用css进行布局
一,开始布局的注意事项
1、作为最佳实践,应把html(内容)和css(显示)分离;
2、网站设计主要有两大类型:固定宽度(基于像素)和响应式(也称流式,使用百分数定义)
二,构建页面
!!高效网页的核心是结构良好,语义化的HTML。
1、恰当的使用article、aside、nav、section、header、footer、和div等元素将页面分成不同的逻辑块,并对他们使用ARIR地标角色。如以下代码:
<article class="about">
<h2>..</h2>
<img src=".." width="n" height="m" src="..">
<p>..</p>
</article> <div class="..">
<h2>..</h2>
<img src=".." width="n" height="m" src="..">
</div> <aside class="mod">
<h2>...</h2>
<ul class="links">
<a href="..">..</a><br/>
<a href="..">..</a>
</ul>
</aside>
(其中的...根据自己的需要进行填写)
三,在旧版浏览器中为html5元素添加样式
将以下代码添加到网页的主样式表文件(所有页面都用到的样式表文件)
article,aside,figcaption,figure,footer,header,main,nav,section{
display:block;
}
2,在每个页面的head元素添加以下代码:
<!--if it IE9-->
<script scr="http://html5shiv.googlecode.com/svn/trunk/html5.js">
四,对默认样式进行重置或标准化
1、css重置可以有效的将所有默认样式都设置为”0“
五,盒模型
1、定义:css进行处理是,它认为每个元素都包含在一个不可见的盒子里。
2,盒子构成:内容区域,内容区域周围的空间(内边距,padding),内边距的外边缘(边框,border),边框外面将元素与相邻元素隔开的不可见区域。
六,控制元素的显示类型和可视性
1、h1~h6、p等元素为块级元素(display:block;),em,strong,cite等为行内元素(display:inline;)。本质区别是他们的display属性。css可以改变默认的属性值,如p{display:line;}或者em{display:block;}
2,设置为inline的元素会忽略任何width,height,margin-top和margin-bottom设置。inline-block元素可以使用这些属性。
3,display:XX;用于指定元素的显示方式;XX:block(块);inline(行内);inline-block(显示行内元素,但是具有块级元素的特征,可以为四条边设置:width,heigth,margin,padding等属性);display:inline;中元素可接受padding的设置,但是padding-top和padding-bottom会越界进入相邻元素空间。
!!
4,控制元素可见性,如
em{
visibility:hidden;
}
将元素隐藏。
七,设置元素的宽高
1、可以为很多元素设置宽高,如:分块内容、段落、列表项、div、图像、video、表单元素等。
如以下代码:
main{
width:600px;
}
.sidebar{
width:300px;
}
2、设置宽高:width:w; height:h; (w 和 h ,只表示长度,单位如px,em等 或者使用auto让浏览器计算高度)
(width和heigth不是继承的)
3、宽度,外边距和auto
.secend{
border:3px soild royalblue;
margin:10px;
padding:8px;
}
八,在元素周围添加内边距
1、如果不设置内边距(左),内容就会贴在边框上。添加后内容的外围就会有一些空白。
.about{
padding: .3125em .625em .625em
}
2、在元素周围添加边距的方法 padding:X; x为要添加的空间量,带单位(px或em)的长度,或者父元素宽度的百分比
九,设置边框
1、例如
.about img{
border:5px soild #bebebe }
十,设置元素周围的外边距
margin:x; (-top ; -right; -bottom; -left)(x为带单位的数值)
margin-left: 10px;
.page{
margin:0 auto;
}<!--让网页的内容水平居中-->
auto的值一来于width的值。
!!margin和padding,border的用法类似。
十一,使元素浮动,控制元素浮动的位置,
1、float:dir; (dir:left or right or none)
2、清除浮动:clear:X;(X:left,right,both,none)(清除浮动很重要)
3、创建自清除浮动元素
.container{overflow:hidden;}
!!浮动元素的display属性值会自动强制转化为block。
十三,对元素进行定位
1,相对定位
possition:realitive;
top:d; (top,right,bottom,left皆可用)(d为希望元素从它自然位置偏移的距离)
2、绝对定位
possition:absolute;
top:d; (top,right,bottom,left皆可用)(d为希望元素从它自然位置偏移的距离)
!!定位是不继承的。
十四,在栈中定位元素。
1、z-index:n;n表示定位过的对象堆中的层级的数字。
十五、溢出处理
overflow:hidden;(隐藏)
overflow:auto;(滚动)
overflow:hidden;(滚动)
!!overflow是不继承的。
十六、垂直对齐元素
vertical-align:baseline;middle;sub;super;text-top;
vertical-align仅适用于行内元素(inline 入em,strong,cite),不能适用于块级元素(bolck 如h1~h6);
十七,修改鼠标指针
cuesor:pointer;default;crosshair;move;help;等等
注:今天遇到一个比较大的问题,没有解决:我做了一个有主要栏和附注栏的页面,本来附注栏在主要栏下面,想让附注栏浮动在主要栏右边,写了float:right;它只是向右移动,不是移动到主要栏的右边。然后我就用position把它定位在主要栏右边了。我觉得这样应该是不对的。