株洲小巨蛋项目之技术总结

在做株洲小巨蛋这个项目的时候遇到了很多技术上的问题,下面我把这些问题给总结下来。

1.多行文本如何垂直居中?

如果是单行,直接设置行高与父元素高度一样即可

height: 300px;
line-height: 300px;

悲观是瘟疫,乐观是甘霖

但如果多行呢?这么设置并不能使多行文字都垂直居中,反而容易使文本溢出。

悲观是瘟疫,乐观是甘霖;悲观只能产生平庸,乐观才能造就卓绝

那如何设置呢?这里用到了两个命令

display:table-cell(多行固定高度居中)
 vertical-align: middle;

即:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7         .wrap{
 8             width: 300px;
 9             height: 300px;
10             border: medium solid #ff0000;
11             display: table-cell;
12             vertical-align: middle;
13         }
14         </style>
15     </head>
16     <body>
17         <div class="wrap">悲观是瘟疫,乐观是甘霖;悲观只能产生平庸,乐观才能造就卓绝;悲观是因为短视而看不清事物的本质,乐观是因为卓视而对事物的深入了解;从卓绝的人那里,我们不难发现乐观的精神,从平庸的人那里,我们很容易找到阴郁的影子。</div>
18     </body>
19 </html>

2.如何设置单侧阴影

 1 <!DOCTYPE html>
 2 <html>
 3
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7         <style type="text/css">
 8             .container {
 9                 width: 300px;
10                 height: 300px;
11                 background: #ababab;
12                 position: absolute;
13                 top: 30%;
14                 left: 30%;
15             }
16
17             .container::after {
18                 display: block;
19                 position: absolute;
20                 bottom: 0;
21                 left: 20px;
22                 width: 260px;
23                 height: 1px;
24                 content: "";
25                 z-index: -1;
26                 box-shadow: 0 0 20px 10px #000000, 0 10px 30px 5px #000000;
27             }
28         </style>
29     </head>
30
31     <body>
32         <div class="container"></div>
33     </body>
34 </html>

时间: 2024-10-15 02:27:13

株洲小巨蛋项目之技术总结的相关文章

株洲小巨蛋项目之心态总结

1.一开始做的时候没大局观,都是从上往下做的,导致后面布局做的很痛苦,后面也是参考了别人做的网站后再重新做的. 2.喜欢边切一张照片边编辑网页,但这样做很低效,时间也浪费很多.正确的做法是,观察整个PSD层,看那些需要切图的.全部切下来以后再去设计网页. 3.项目做到一半的时候,发现自己代码写的很乱,而且命名我也有点看不懂,所以在命名规范这方面我还要下点功夫. 4.刚做项目的时候没有考虑把一下经常使用的代码发到一个global.css里面,导致了每个页面都要写大量重复性的代码. 下一次我可以提升

小巨蛋项目技术总结与心态总结

心态总结:沉得住气,方成得了器.收获多少,常不在于付出多少,而是受外力使然或偶然因素所致.不要希望付出什么,就一定要得到什么,坚持不懈专注某事,若失之东坡,且收之桑榆.凡事须看远些,急功未必近利,有时成功的脚步来的很慢.需要耐心聆听与等候.别梦想一些完全做不到的事情,只要走在路上,尽头定有风景. 打代码要一步一步打,不要一步登天,有事情是要说出来的,不要去等着对方领悟,等到最后只能是伤心和失望.在这个项目中我发现沟通也是很重要的,理清思路然后再写代码.不要一看到项目就想立刻把他做出来,要一边想着

网络小助手项目开发总结报告

网络小助手项目开发总结报告 1引言 1.1编写目的 通过一段时间后对网络小助手项目进行详细开发和测试,该项目已经基本完成.本报告旨在将项目开发过程中的经验和不足之处进行总结,为以后的团队开发活动积累经验.本报告经审核后,交由软件工程老师王老师审查. 1.2背景 说明: a.  软件项目名称:网络小助手 b.  开发者:兰梦,李金吉,马翔,赵天,胡佳奇 用户:学生 系统运行环境:windows XP/windows 7/windows 8下的通用PC 1.3参考资料 <软件工程--原理,方法与应用

【小程序源码案例】微信小程序项目开发案例分享

作者:web小二本文标签: 微信小程序 小程序源码案例 小程序项目小程序的开发,并不是适合所有公司,我今天跟大家分享小程序方面的教程,主要是供大家学习使用.学习这种东西,有时候则是单纯的喜欢,没有任何目的,很单纯的为了好玩,记得很早之前学flash,没有想法,就是觉得好玩,纯娱乐爱好而已.到后来玩视频剪辑也是出于同样的原因,不图钱财名利,只是图自己个人爱好娱乐. 但是,学习,有时候则是需要有明确目的,特别是关系到自己吃饭问题的时候,你就需要非常有目的去学习,并且还需要制定好学习的计划与目标,希望

公司某项目前端技术积累

最佳实践 BootStrap + jquery + jquery插件 + sea.js/require.js + Grunt 前期技术选型 BootStrap + Backbone.js + require.js + jquery插件 ExtJS Angular.js BootStrap + jquery + jquery插件 前端技术选型总结: 之所以选择 BootStrap + jquery + jquery插件 的原因是因为ExtJS或Angular.js这种大而全的MVC框架,学习成本较

“小世界”项目心得记录(一)

背景: 最近准备做一个B2C的电商平台,一方面是想真正投入使用,一方面也是复习一下大学三年的学习成果,所以会以比较正规的软件开发方式进行开发,现在开始对此项目进行记录. (一)需求分析阶段: (1)此项目的建模工具不再使用之前使用的Visio.starUML,而是打算尝试使用IBM的Rational Software Architect和Sparx Systems的Enterprise Architect. (2)用例图:  参与者是与系统交互的对象,所以它不仅仅指使用系统的人:  用例的识别:

中国联通携手微信小程序首家技术服务商酷客多协助“企业上云”

2017年6月7日,绍兴市越城区举行了关于"企业上云"酷客多小程序宣讲会.在此次宣讲会上提出了中国联通将携手国内首家微信小程序新零售技术服务商推出小程序大数据平台. "企业上云"计划是在2017年4月13日由浙江省信息化工作领导小组发布的<浙江省"企业上云"行动计划(2017)>中提出的,该计划旨在促进经济转型升级,加快推动,新增十万企业上阿里云,构成"云上浙江".为了响应"企业上云",绍兴联通

Mysql查找所有项目开始时间比之前项目结束时间小的项目ID

这是之前遇到过的一道sql面试题,供参考学习: 查找所有项目开始时间比之前项目结束时间小的项目ID mysql> select * from t2; +----+---------------------+---------------------+ | id | start | end | +----+---------------------+---------------------+ | 1 | 2015-01-01 00:00:00 | 2015-01-29 00:00:00 | |

小程序项目别的页面初始化拿到的值为两种状态(已解决)

小程序项目别的页面初始化拿到的值为两种状态,其他页面拿不到app.js全局globalData下全局的cookie app.js文件 onLaunch: function () { console.log('app-onLaunch') this.getUserInfo(); }, onShow:function(){ console.log('app-onShow') }, // 获取用户信息,登录 getUserInfo: function (callBack) { let that = t