使用webstorm 编辑
1. 确定项目文件夹
2. 规划好页面
a. 首页 index.html
b. 样式 CSS文件夹: css文件 base样式 和 global 样式
c. 图片 images文件夹
d. 特效 js文件夹:js文件
3. css初始化
4. 引入css
<link rel="stylesheet" href="css/base.css">
5.引入favicon图标
<link rel="" href="favicon.ico">
6. css权重
标签 1 , 类 10 ,id 100 , 行内 1000 ,
7.
网页稳定:
Width 和height 最稳定
其次 padding
最后才考虑margin8 . 清除浮动
清除浮动的目的就是为了解决父亲盒子的高为0的问题
a.额外标签法
<div class=" cl h"></div>
.cl{clear:both}
.h{height:}
b. overflow:hidden
c. 伪元素法
.clearfix:after { content:””; Visibility:hidden; Display:block; Height:0; Clear:both; } .clearfix{ Zoom:1;}d. 双伪元素法
.clearfix:before,.clearfix:after{ display: table; content: "";}.clearfix:after { clear: both;}.clearfix { zoom: 1;}案例:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } .father{ width: 600px; border: 1px solid red; /* overflow: hidden; */ } .xiongda,.xionger{ width: 200px; height: 100px; background-color: yellow; float: left; } /* 双伪元素清除浮动 */ .xiongda,.xionger{ width: 200px; height: 100px; background-color: yellow; float: left; } .clearfix:after{ display: block; content: ""; clear: both; visibility: hidden; height: 0; } .clearfix{ zoom:1; } /* 伪元素清除浮动 .clearfix:before,.clearfix:after{ display: table; content: ""; } .clearfix:after{ clear: both; } .clearfix{ zoom:1; } */ </style></head><body> <div class="father clearfix"> <div class="xiongda">熊大</div> <div class="xionger">熊二</div> </div></body></html>
新闻热点
疑难解答