用css进行布局

 用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把它定位在主要栏右边了。我觉得这样应该是不对的。

上一篇:default parameter value for ‘color’ must be a compile-time constant


下一篇:.NET Core 中的并发编程