浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: #f00;
float: left;
}
.box2{
width: 200px;
height: 200px;
background-color: #00f;
/*左浮动*/
float: left;
}
.box3{
width: 200px;
height: 200px;
background-color: #0f0;
float:left;
}
.box4{
width: 200px;
height: 200px;
background-color: #ff0;
float: right;
}
.nav{
width: 100%;
height: 100px;
background: #ccc;
}
.box{
width: 100%;
height: 200px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">111</div>
<div class="box2">222</div>
<div class="box3"></div>
<div class="box4">111</div>
</div>
<div class="nav">
导航栏
</div>
</body>
</html>
浮动案例附带外联css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="fudong.css">
<style type="text/css">
/*公共样式*/
*{
margin: 0; /*清除默认样式*/
padding: 0;
}
a{
text-decoration: none;
color: #000;
}
li{
list-style: none;
/*清除li小黑点*/
}
</style>
</head>
<body>
<div class="nav">
<div class="nav-layout">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新闻中心</a></li>
<li><a href="#">产品介绍</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">公司实力</a></li>
</ul>
</div>
</div>
</body>
</html>
.nav{
width: 100%;
height: 60px;
background-color: #ccc;
}
.nav-layout{
width: 1200px;
height: 60px;
margin: 0 auto;
}
.nav li{
width: 120px;
height: 60px;
float: left;
text-align: center;
line-height: 60px;
}
.nav li:hover{
background-color: #f00;
}
.nav li a:hover{
color: #fff;
text-decoration: underline;
}
列表样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淘宝网 - 淘！我喜欢</title>
<link rel="icon" type="text/css" href="img/TB14aHpkeH2gK0jSZJnXXaT1FXa-16-16.ico">
<style type="text/css">
/*常见的图片格式：gif 动图
jpg 普通图片
png 透明背景图片
ico 小图标*/
ul{
/*清除小黑点*/
/*list-style: none;*/
/*把小黑点移到内容区域*/
list-style-position: inside;
/*把小黑点替换成小图标*/
list-style-image: url(img/icon.jpg);
}
</style>
</head>
<body>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新闻中心</a></li>
<li><a href="#">产品介绍</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">公司实力</a></li>
</ul>
</body>
</html>
布局案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*清除浏览器默认内外边距*/
*{
margin: 0;
padding: 0;
}
/*定义一个版心，并且居中/*/
.content{
width: 1200px;
height: 680px;
margin: 0 auto;
}
/*头部图片*/
.top{
width: 100%;
height: 150px;
}
/*列表部分*/
.list{
width: 100%;
height: 200px;
background-color: #FD1B4E;
}
.list div{
width: 230px;
height: 190px;
float: left;
margin-top: 10px;
margin-left: 10px;
}
.list .list-1{
margin-left: 5px;
}
/*标题部分*/
.title{
width: 100%;
height: 60px;
background-color: #FD1B4E;
text-align: center;
color: #FFEA06;
line-height: 60px;
font-weight: bold;
font-size: 20px;
}
.title-1{
width: 135px;
height: 60px;
float: left;
color: #fff;
font-weight: bold;
font-size: 26px;
text-align: left;
padding-left: 10px;
}
.title-2{
width: 135px;
height: 20px;
float: right;
border: 1px solid #fff;
margin-right: 10px;
color: #fff;
font-size: 14px;
line-height: 20px;
font-weight: 300; /*让加粗的字体不加粗*/
margin-top: 20px;
border-radius: 20px; /*让div两头变圆，值应该和高一样*/
}
/*产品部分*/
.product{
width: 100%;
height: 300px;
background-color: #FD1B4E;
}
.product div{
width: 188px;
height: 265px;
background-color: #fff;
float: left;
margin-left: 10px;
padding: 10px 20px;
font-size: 14px;
}
.product div img{
width: 100%;
}
.product div p{
margin-bottom: 10px;
}
.span-1{
color: #F42424;
font-weight: bold;
font-size: 20px;
}
.span-2{
text-decoration: line-through;
font-size: 13px;
color: #A8A8A8;
}
</style>
</head>
<body>
<div class="content">
<div class="top">
<img src="img/113_P_1573180055767.png">
</div>
<div class="list">
<div class="list-1"><img src="img/1515953434094179058.png"></div>
<div><img src="img/1515953435023649761.png"></div>
<div><img src="img/1515953435162544293.png"></div>
<div><img src="img/1515953435545165923.png"></div>
<div><img src="img/1515953435777799300.png"></div>
</div>
<div class="title">
<div class="title-1">
好货大聚惠
</div>
周年庆第一波，每天5场限时秒杀
<div class="title-2">
更多周年好货 >
</div>
</div>
<div class="product">
<div>
<img src="img/0_thumb_G_1489098265067.jpg">
<p>志高嵌入式电陶炉加用双头双灶镶嵌式电磁炉双眼光波炉特</p>
<span class="span-1">￥366.00</span>
<span class="span-2">￥585.60</span>
</div>
<div>
<img src="img/0_thumb_G_1489096810833.jpg">
<p>志高嵌入式电陶炉加用双头双灶镶嵌式电磁炉双眼光波炉特</p>
<span class="span-1">￥366.00</span>
<span class="span-2">￥585.60</span>
</div>
<div>
<img src="img/0_thumb_G_1489097011644.jpg">
<p>志高嵌入式电陶炉加用双头双灶镶嵌式电磁炉双眼光波炉特</p>
<span class="span-1">￥366.00</span>
<span class="span-2">￥585.60</span>
</div>
<div>
<img src="img/0_thumb_G_1489105301550.jpg">
<p>志高嵌入式电陶炉加用双头双灶镶嵌式电磁炉双眼光波炉特</p>
<span class="span-1">￥366.00</span>
<span class="span-2">￥585.60</span>
</div>
<div>
<img src="img/0_thumb_G_1489105386951.jpg">
<p>志高嵌入式电陶炉加用双头双灶镶嵌式电磁炉双眼光波炉特</p>
<span class="span-1">￥366.00</span>
<span class="span-2">￥585.60</span>
</div>
</div>
</div>
</body>
</html>
实例如下：
