需求分析
技术分析
1、DIV 相关的技术
Div 它是一个 html 标签，一个块级元素(单独显示一行)。它单独使用没有任何意义，必须结合CSS来使用。它主要用于页面的布局。
Span 它是一个 html 标签，一个内联元素(显示一行)。它单独使用没有任何意义，必须结合CSS 来使用。它主要用于对括起来的内容进行样式的修饰。
2、CSS 的作用
HTML：它是整个网站的骨架。
CSS：它是对整个网站骨架的内容进行美化(修饰)。
3、CSS 语法格式
语法和规范
选择器{
属性名 1:属性值 1;
属性名 2:属性值 2;
属性名 3:属性值 3;
}
CSS基本选择器
选择器的作用是选择要设置格式的元素。style里面写的是CSS的代码，对选择器选择的元素进行设置。
元素选择器
对所有元素（标签）进行统一设置，用元素选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素选择器</title>
<style>
div{
font-size: 30px;
color: pink;
}
</style>
</head>
<body>
<div>
逗比时给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的！！！11
</div>
<div>
逗比时给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的！！！22
</div>
<div>
逗比时给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的！！！33
</div>
<div>
逗比时给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的！！！44
</div>
<div>
逗比时给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的！！！55
</div>
</body>
</html>
类选择器
对部分元素（标签）进行统一设置，用类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>类选择器</title>
<style>
.div2{
font-size: 30px;
color: gold;
}
</style>
</head>
<body>
<div>
逗比时给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的！！！11
</div>
<div class="div2">
逗比时给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的！！！22
</div>
<div>
逗比时给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的！！！33
</div>
<div class="div2">
逗比时给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的！！！44
</div>
<div>
逗比时给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的！！！55
</div>
</body>
</html>
ID选择器
对某一个元素（标签）进行设置，用ID选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<style>
#div5{
font-size: 30px;
color: yellow;
}
</style>
</head>
<body>
<div>
逗比时给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的！！！11
</div>
<div>
逗比时给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的！！！22
</div>
<div>
逗比时给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的！！！33
</div>
<div class="div2" id="div5">
逗比时给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的！！！44
</div>
<div id="div5">
逗比时给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的！！！55
</div>
</body>
</html>
CSS其他选择器
层级选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>层级选择器</title>
<style>
div p{
font-size: 30px;
color: green;
}
</style>
</head>
<body>
<div>
逗比时给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的！！！11
</div>
<div>
逗比时给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的！！！22
</div>
<div>
逗比时给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的！！！33
</div>
<div>
<p>
逗比时给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的！！！44
</p>
</div>
<div>
逗比时给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的！！！55
</div>
<p>
逗比时给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的！！！55
</p>
</body>
</html>
属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
input[type="text"]{
background-color: red;
}
input[type="password"]{
background-color: blue;
}
</style>
</head>
<body>
用户名:<input type="text" name="username" /><br />
密码: <input type="password" name="password" />
</body>
</html>
CSS的引入方式
内部引入
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内部引入</title>
<style type="text/css">
div{
font-size: 30px;
color: pink;
}
</style>
</head>
<body>
<div>
逗比时给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的！！！11
</div>
<div>
逗比时给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的！！！12
</div>
<div>
逗比时给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的！！！13
</div>
<div>
逗比时给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的！！！14
</div>
<div>
逗比时给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的！！！15
</div>
</body>
</html>
行内引入
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>行内引入</title>
<style type="text/css">
div{
font-size: 30px;
color: pink;
}
</style>
</head>
<body>
<div>
逗比时给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的！！！11
</div>
<div>
逗比时给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的！！！12
</div>
<div>
逗比时给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的！！！13
</div>
<div>
逗比时给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的！！！14
</div>
<div style="font-size: 20px; color: blue;">
逗比时给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的！！！15
</div>
</body>
</html>
外部引入
style.css
div{
font-size: 30px;
color: pink;
}
外部引入.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>外部引入</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div>
逗比时给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的！！！11
</div>
<div>
逗比时给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的！！！12
</div>
<div>
逗比时给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的！！！13
</div>
<div>
逗比时给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的！！！14
</div>
<div>
逗比时给小伙伴看的,成熟是给陌生人看的,幼稚是给喜欢的人看的！！！15
</div>
</body>
</html>
CSS浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框（整个网页面）或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在
一样。
三个框都不浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS浮动</title>
<style>
#one{
border: 1px solid red;
width: 600px;
height: 150px;
/*float: left;*/
}
#two{
border: 1px solid black;
width: 600px;
height: 150px;
/*float:left;*/
}
#three{
border: 1px solid blue;
width: 600px;
height: 150px;
/*float: left;*/
}
/*清除浮动*/
#clear{
clear: both;
}
</style>
</head>
<body>
<div id="one">
</div>
<div id="clear">
</div>
<div id="two">
</div>
<div id="three">
</div>
</body>
</html>
红框向右浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS浮动</title>
<style>
#one{
border: 1px solid red;
width: 600px;
height: 150px;
float: right;
}
#two{
border: 1px solid black;
width: 600px;
height: 150px;
/*float:left;*/
}
#three{
border: 1px solid blue;
width: 600px;
height: 150px;
/*float: left;*/
}
/*清除浮动*/
/*#clear{
clear: both;
}*/
</style>
</head>
<body>
<div id="one">
</div>
<!--<div id="clear">
</div>-->
<div id="two">
</div>
<div id="three">
</div>
</body>
</html>
红框向左浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS浮动</title>
<style>
#one{
border: 1px solid red;
width: 600px;
height: 150px;
float: left;
}
#two{
border: 1px solid black;
width: 600px;
height: 150px;
/*float:left;*/
}
#three{
border: 1px solid blue;
width: 600px;
height: 150px;
/*float: left;*/
}
/*清除浮动*/
/*#clear{
clear: both;
}*/
</style>
</head>
<body>
<div id="one">
</div>
<!--<div id="clear">
</div>-->
<div id="two">
</div>
<div id="three">
</div>
</body>
</html>
所有框向左浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS浮动</title>
<style>
#one{
border: 1px solid red;
width: 150px;
height: 50px;
float: left;
}
#two{
border: 1px solid black;
width: 150px;
height: 50px;
float: left;
}
#three{
border: 1px solid blue;
width: 150px;
height: 50px;
float: left;
}
/*清除浮动*/
/*#clear{
clear: both;
}*/
</style>
</head>
<body>
<div id="one">
</div>
<!--<div id="clear">
</div>-->
<div id="two">
</div>
<div id="three">
</div>
</body>
</html>
下面把框的宽度调大，使得一个网页容纳不了三个框，只能容纳两个框，第三个框会滑下来，如果高度不同，可能滑不到下面一行的最左边，会被卡住，具体见下面的情形：
清除浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS浮动</title>
<style>
#one{
border: 1px solid red;
width: 650px;
height: 50px;
float: left;
}
#two{
border: 1px solid black;
width: 650px;
height: 50px;
float: left;
}
#three{
border: 1px solid blue;
width: 650px;
height: 50px;
float: left;
}
/*清除浮动*/
#clear{
clear: both;
}
</style>
</head>
<body>
<div id="one">
</div>
<div id="clear">
</div>
<div id="two">
</div>
<div id="three">
</div>
</body>
</html>
上面的被卡住的情形中，框2清除浮动后
盒子模型
在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。而默认情况下，内边距、边框和外边距的值均为 0.
占据页面大小的区域是整个元素框的总尺寸！默认情况，padding、margin、border均为 0，假如我们设定了区域内容的 width 和height，那么此时整个元素框的总尺寸就是该区域内容的宽高了，此时，如果设定了 margin 值，那么整个元素框的总尺寸会发生变化(变大了)，但是我们希望它的整体布局不发生变化！所有我们可以修改区域内容的尺寸(原有大小减去设定的 margin 值)。
CSS padding 属性
CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。
例如，如果您希望所有 h1 元素的各边都有 10 像素的内边距，只需要这样：
h1 {padding: 10px;}
您还可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值：
h1 {padding: 10px 0.25em 2ex 20%;}
技巧：浏览器下调整大小的方法
必须是CSS写的才可以
DIV+CSS实现首页
（下面代码中已经把刚开始设置的边框的宽度全部置成0了，全部一次性设置为0的方法是：查询border：1px，然后用border:0px替换即可）
使用DIV和CSS完成首页重新布局，效果和前几篇的HTML基础——网站首页显示页面一样。
步骤分析：
第一步：先定义个大的 div，然后嵌套 8 个小的 div
第二步：(第一行)在第一个 div 里面嵌套 3 个小的 div
第三步： (第二行)在小 div里面写一个列表标签(需要使用 css的 display属性的 inline)
第四步：(第三行)在小 div 里面放置一张图片
第五步：(第四行)在小 div 里面嵌套 2 个 div(在下面的 div 再嵌套 2 个 div，最后一在右 边的 div 里面嵌套 10 个 div)
第六步：(第五行)在小 div 里面放置一张广告图片
第七步：(第七行)在小 div 里面放置一张广告图片
第八步：(第八行) 在小 div 里面放置超链接和文字内容。
此案例使用了CSS的其他内容：
1）去掉超链接的下划线：
a{
text-decoration: none;
}
2）让 div 居中
margin：0px auto;
3）让块级元素成为内联元素
display:inline;
4）块级元素内容居中
text-align:center;
最终实现代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用DIV+CSS完成首页重新布局</title>
<style>
#father{
border: 1px solid red;
width: 1300px;
height: 2170px;
margin: auto;
}
/*logo画框*/
/*#logo{
border: 1px solid black;
width: 1300px;
height: 50px;
}*/
#clear{
clear: both;
}
.top{
border: 1px solid blue;
width: 431px;
height: 50px;
float: left;
}
#top{
padding-top: 12px;
height: 38px;
}
#menu{
border: 1px solid red;
width: 1300px;
height: 50px;
background-color: black;
}
ul li{
display: inline;
color: white;
}
#product{
border: 1px solid red;
width: 1300px;
height: 558px;
}
#product_top{
border: 1px solid blue;
width: 100%;
height: 50px;
padding-top: 8px;
}
#product_bottom{
border: 1px solid green;
width: 100%;
height: 500px;
}
#product_bottom_left{
border: 1px solid red;
width: 200px;
height: 500px;
float: left;
}
#product_bottom_right{
border: 1px solid blue;
width: 1094px;
height: 500px;
float: left;
}
#big{
border: 1px solid red;
width: 544px;
height: 250px;
float: left;
}
#small{
border: 1px solid blue;
width: 180px;
height: 250px;
float: left;
/*让里面内容居中*/
text-align: center;
}
#bottom{
text-align: center;
}
/*去除下划线的标签*/
a{
text-decoration: none;
}
</style>
</head>
<body>
<div id="father"><!--把八个div封这个fatherdiv里面-->
<!--1.logo部分-->
<div id="logo">
<div class="top">
<img src="../img/logo2.png" height="46px" />
</div>
<div class="top">
<img src="../img/header.png" height="46px" />
</div>
<div class="top" id="top">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</div>
</div>
<!--如果上面logo没画框，可以清除浮动-->
<div id="clear">
</div>
<!--2.导航栏部分-->
<div id="menu">
<ul>
<a href="#"><li style="font-size: 20px;">首页</li></a>
<a href="#"><li>手机数码</li></a>
<a href="#"><li>家用电器</li></a>
<a href="#"><li>鞋靴箱包</li></a>
<a href="#"><li>奢饰品</li></a>
<a href="#"><li>飞机大炮</li></a>
</ul>
</div>
<!--3.轮播图部分-->
<div id="">
<img src="../img/1.jpg" width="100%"/>
</div>
<!--4.最新商品-->
<!--分成上下两个div，下面的div又分成左右两个div,右边的div又可以分成一个大的图片的div，
还有剩下九个小的图片的div-->
<div id="product">
<div id="product_top">
<!--用span，他是内联的，全部内容占一行-->
<span style="font-size: 25px;">最新商品</span>
<img src="../img/title2.jpg" />
</div>
<div id="product_bottom">
<div id="product_bottom_left">
<img src="../img/big01.jpg" width="100%" height="100%" />
</div>
<div id="product_bottom_right">
<div id="big">
<a href="#"><img src="../img/middle01.jpg" width="100%" height="100%"/></a>
</div>
<div id="small">
<img src="../img/small01.jpg" />
<a href="#"><p style="color: gray;">咖啡机</p></a>
<p style="color: red;">¥399</p>
</div>
<div id="small">
<img src="../img/small01.jpg" />
<a href="#"><p style="color: gray;">咖啡机</p></a>
<p style="color: red;">¥399</p>
</div>
<div id="small">
<img src="../img/small01.jpg" />
<a href="#"><p style="color: gray;">咖啡机</p></a>
<p style="color: red;">¥399</p>
</div>
<div id="small">
<img src="../img/small01.jpg" />
<a href="#"><p style="color: gray;">咖啡机</p></a>
<p style="color: red;">¥399</p>
</div>
<div id="small">
<img src="../img/small01.jpg" />
<a href="#"><p style="color: gray;">咖啡机</p></a>
<p style="color: red;">¥399</p>
</div>
<div id="small">
<img src="../img/small01.jpg" />
<a href="#"><p style="color: gray;">咖啡机</p></a>
<p style="color: red;">¥399</p>
</div>
<div id="small">
<img src="../img/small01.jpg" />
<a href="#"><p style="color: gray;">咖啡机</p></a>
<p style="color: red;">¥399</p>
</div>
<div id="small">
<img src="../img/small01.jpg" />
<a href="#"><p style="color: gray;">咖啡机</p></a>
<p style="color: red;">¥399</p>
</div>
<div id="small">
<img src="../img/small01.jpg" />
<a href="#"><p style="color: gray;">咖啡机</p></a>
<p style="color: red;">¥399</p>
</div>
</div>
</div>
</div>
<!--5.广告图片-->
<div id="">
<img src="../img/ad.jpg" width="100%" height="100%"/>
</div>
<!--6.热门商品-->
<!--分成上下两个div，下面的div又分成左右两个div,右边的div又可以分成一个大的图片的div，
还有剩下九个小的图片的div-->
<div id="product">
<div id="product_top">
<span style="font-size: 25px;">热门商品</span>
<img src="../img/title2.jpg" />
</div>
<div id="product_bottom">
<div id="product_bottom_left">
<img src="../img/big01.jpg" width="100%" height="100%" />
</div>
<div id="product_bottom_right">
<div id="big">
<a href="#"><img src="../img/middle01.jpg" width="100%" height="100%"/></a>
</div>
<div id="small">
<img src="../img/small01.jpg" />
<a href="#"><p style="color: gray;">咖啡机</p></a>
<p style="color: red;">¥399</p>
</div>
<div id="small">
<img src="../img/small01.jpg" />
<a href="#"><p style="color: gray;">咖啡机</p></a>
<p style="color: red;">¥399</p>
</div>
<div id="small">
<img src="../img/small01.jpg" />
<a href="#"><p style="color: gray;">咖啡机</p></a>
<p style="color: red;">¥399</p>
</div>
<div id="small">
<img src="../img/small01.jpg" />
<a href="#"><p style="color: gray;">咖啡机</p></a>
<p style="color: red;">¥399</p>
</div>
<div id="small">
<img src="../img/small01.jpg" />
<a href="#"><p style="color: gray;">咖啡机</p></a>
<p style="color: red;">¥399</p>
</div>
<div id="small">
<img src="../img/small01.jpg" />
<a href="#"><p style="color: gray;">咖啡机</p></a>
<p style="color: red;">¥399</p>
</div>
<div id="small">
<img src="../img/small01.jpg" />
<a href="#"><p style="color: gray;">咖啡机</p></a>
<p style="color: red;">¥399</p>
</div>
<div id="small">
<img src="../img/small01.jpg" />
<a href="#"><p style="color: gray;">咖啡机</p></a>
<p style="color: red;">¥399</p>
</div>
<div id="small">
<img src="../img/small01.jpg" />
<a href="#"><p style="color: gray;">咖啡机</p></a>
<p style="color: red;">¥399</p>
</div>
</div>
</div>
</div>
<!--7.广告图片-->
<div id="">
<img src="../img/footer.jpg" width="100%" height="100%"/>
</div>
<!--8.友情链接和版权信息-->
<div id="bottom">
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明</a>
<p>
Copyright © 2005-2016 传智商城 版权所有
</p>
</div>
</div>
</body>
</html>
