1.居中问题
比如让宽度为60%的<div class="box">居中,可以再.box里面设置margin:auto
2.高度固定的div里面有两个子类div且高度和父类一致,但是不是左右排列,而是上下排列
原因是没有设置float属性。
3.在设计整个页面时,要考虑的东西(持续更新)
首先抓住页面的共性,把这些共性提取出来
4.h标签
不能直接使用。可以定义的有<h1>~~<h6>.
<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。
由于 h 元素拥有确切的语义,因此请您慎重地选择恰当的标签层级来构建文档的结构。因此,请不要利用标题标签来改变同一行中的字体大小。相反,我们应当使用层叠样式表定义来达到漂亮的显示效果。在使用时css比较好的用法是直接定义h1 ,h2而不是定义
某某div.class h1{}这样就违背了本身的原意。
5.css
ul.box-icon li{
width: 110px;
height: 150px;
padding-right: 34px;
float: left;
}
ul.box-icon li.last{
width: 110px;
height: 150px;
float: left;
}
在 <li class="last">里面的所有的属性将会依然包含padding-right:34px; 如果想要消除这个必须在ul.box-icon li.last 里面设置padding-right:0;
6.css里面图片竖直居中
<div class="logo">
<a href="/"><img src="/static/image/logo_03.png" alt=""/></a>
</div>
css设置
.logo a {
position: absolute;
height: 82px;
line-height: 82px;
}
.logo a img{
vertical-align: middle;
}
需要注意的是:.logo a 里面必须要设置line-height的高度,否则图片不会居中。
7.图片大小比例随着窗口变化等比例缩放
.banner img{
width: 100%;
display: block;
}
8.css控制单行文本
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;