前端基本功-CSS实战.pdfVIP

1.3课程安排

前三天复习css部分

Js部分dom身上网页特效

前端基本功

CSS+JS

1.4项目文件夹（站点）

我们的网页都应该放到一个文件夹内。站点本地站点

1.4.1规划好页面

项目文件夹

1.首页index.html

2.样式css文件夹css文件相同样式（全局样式公共样式）

Base.css（基本样式）global.css(全局样式)

3.images文件

4.特效js文件夹js文件

1.4.2Css初始化

@charsetUTF-8;

/*css初始化*/

html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img{margin:0;padding:0;}

fieldset,img,input,button{border:none;padding:0;margin:0;outline-style:none;}

ul,ol{list-style:none;}

input{padding-top:0;padding-bottom:0;font-family:SimSun,宋体;}

select,input{vertical-align:middle;}

select,input,textarea{font-size:12px;margin:0;}

textarea{resize:none;}/*防止拖动*/

img{border:0;vertical-align:middle;}/*去掉低测默认的3像素空白缝隙*/

table{border-collapse:collapse;}

body{

font:12px/150%Arial,Verdana,\5b8b\4f53;

color:#666;

background:#fff

}

.clearfix:before,.clearfix:after{conte

nt:;

display:table;

}

.clearfix:after{clear:both;}

.clearfix{

*zoom:1;/*IE/7/6*/

}

a{color:#666;text-decoration:none;}

a:hover{color:#C81623;}

h1,h2,h3,h4,h5,h6{text-decoration:none;font-weight:normal;font-size:100%;}

s,i,em{font-style:normal;text-decoration:none;}

.col-red{color:#C81623!important;}

/*公共类*/

.w{/*版心提取*/

width:1210px;margin:0auto;

}

.fl

{float:le

ft

}

.fr

}

.al{

text-align:left

}

.ac{

text-align:center

}

.ar{

text-align:right

}

.hide{

display:none

}

1.4.3引入css

1.4.4Favicon图标

linkrel=shortcuticonhref=favicon.ico/

1.4.5Css位置来分

行内式css

divclass=frstyle=color:red;aa/div

内嵌式样式

style

.one{

width:200px;

}

/style

外链式

linkre