Day4-京东1
1.1 项目文件夹 （站点）
我们的网页都应该放到 一个文件夹内。 站点 本地站点
1.1.1 规划好页面
项目文件夹
1.首页 index.html
2.样式 css文件夹 css文件 相同样式 （全局样式 公共样式）
Base.css（基本样式） global.css (全局样式)
3.图片 images 文件
4.特效 js文件夹 js 文件
1.1.2 Css 初始化
@charset "UTF-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{
content:"";
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:0 auto;
}
.fl {
float:left
}
.fr {
float:right
}
.al {
text-align:left
}
.ac {
text-align:center
}
.ar {
text-align:right
}
.hide {
display:none
}
1.1.3 引入css
1.1.4 Favicon 图标
<link rel="shortcut icon" href="favicon.ico" />
1.1.5 Css 位置来分
行内式 css
<div class="fr" style="color:red;">aa</div>
内嵌式样式
<style>
.one {
width: 200px;
}
</style>
外链式
<link rel=”stylesheet” href =”css/base.css” />
Font 字体综合写
Font: 字体加粗 字号/行高 字体;
必须有字号和字体。
Font-weight:bold; 700
S del 删除线
I em 倾斜
U ins 下划线
字体加粗 font-weight: 700;
让字体不加粗: font-weight:normal;
字体倾斜: font-style:italic; 不用
字体不倾斜： font-style:normal;
不下划线 不删除线: text-decoration: none;
定位： position：static; 静态定位 约等于标准流
浮动的不浮动: float:none; none left right
定位的不定位: position: static; absolute relative fixed
标签 1 类 10 id 100 行内 1000
网页稳定：
Width 和height 最稳定
其次 padding
最后才考虑margin
