浮動
<!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>
實例如下：
![]()
