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

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

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>

View Code

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>

View Code

转载于:https://www.cnblogs.com/churjan/p/5797845.html

株洲小巨蛋项目之技术总结相关推荐

株洲小巨蛋项目开发总结
技术总结导航栏二级下拉框 /*CSS部分*//*设定导航栏上按钮样式*/ #header .nav > li{width:148px;height:70px;float:left;line-h ...
株洲小巨蛋项目之心态总结
1.一开始做的时候没大局观,都是从上往下做的,导致后面布局做的很痛苦,后面也是参考了别人做的网站后再重新做的. 2.喜欢边切一张照片边编辑网页,但这样做很低效,时间也浪费很多.正确的做法是,观察整个P ...
DAY10微信小程序项目开发技术总结
一.每日实习任务 1．网页基础知识(html,css,js) 今天老师为我们介绍讲解了网页基础知识(html,css,js).首先,我们安装了谷歌浏览器及sublime text.老师为我们介绍了ht ...
2个程序员1周拿下4万块小程序项目的技术要点
本文给大家分享一个真实的商业项目,和其中的技术要点.这其中也体现了菜鸟程序员和有经验程序员所思考问题的区别.请认真看到底,应该可以学到很多书本和培训教程里学不到的东西. 这个项目规模不大,2个程序员, ...
小程序+springboot+vue技术构建分帐式多商户入驻商城系统开发，引入lombok简化项目代码
网页设计中使用了三种语言:HTML.CSS和JavaScript.HTML和CSS一直是网页设计的基础,而JavaScript则被用于添加网站的动态视图. 在提供吸引人的UI/UX时,JavaScri ...
计算机视觉一些项目实战技术
计算机视觉一些项目实战技术 SELECTIVE SEARCH FOR OBJECT LOCALISATION 需要多种策略来查找上述图像中的所有对象.勺子在桌子上的沙拉碗里.因此,图像本质上是层次性的 ...
《互联网项目运营分析》第四章：互联网项目的技术选择与应用
一,技术是基础二,CGI.ASP.ASP.NET .PHP.JSP,什么技术好三,ACCESS.MSSQL.MYSQL.Oracle,什么数据库好四,AJAX火了和生成静态页面五,DIV和页面 ...
揭秘：支付宝小程序 V8 Worker 技术演进
简介: 本文分享支付宝小程序 V8 Worker 相关工作沉淀和总结,包括技术演进.基础架构.基础功能.以及 JS 引擎能力输出,以及一些优化方案等.欢迎同学们共同探讨,指正.(文末福利:<小程 ...
前端技术演进（六）：前端项目与技术实践
这个来自之前做的培训,删减了一些业务相关的,参考了很多资料(参考资料列表),谢谢前辈们,么么哒 ? 任何五花八门的技术,最终还是要在实践中落地.现代的软件开发,大部分讲求的不是高难度高精尖,而是效率和 ...

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

株洲小巨蛋项目之技术总结相关推荐

最新文章

热门文章