css簡單練習5
根據css現學內容，完成如下頁面布局，
圖例如下所示：
練習分析：
- 整體觀察圖片可知該網頁的背景顏色是灰色，即最大的盒子中背景顏色應設為灰色，大盒子中擺入多個小一點的盒子來完成布局，其他的盒子擺放可通過下圖來理解，
- 盒子擺好后可以根據實際情況加入外邊距（margin）或內邊距（padding）來分開盒子，以便于按要求完成任務，
- 對于形狀相同的盒子寫出來一個后復制粘貼來，可以減少作業任務，
- 對于上方的選單導航欄中可以加入偽類來增強視覺效果，
- 若代碼量比較大為了撰寫方便，可以將css代碼塊與html代碼塊分開寫，但注意需要通過
link來將css匯入html中，如本題目中使用的<link href="css/css.css" rel="stylesheet" />，
html代碼實作如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="css/css.css" rel="stylesheet" />
</head>
<body>
<!-- 頂部線 -->
<div class="aline"></div>
<!-- 頂部線結束 -->
<!-- logo部分,分三個小部分，左中右 -->
<div id="logo">
<div class="logo_left"></div>
<div class="logo_center"></div>
<div class="logo_right">
<a href="http://www.baidu.com">登 錄</a>
<a href="http://www.baidu.com">注 冊</a>
</div>
<div style="clear: left;"></div>
</div>
<!-- logo部分結束 -->
<!-- 匯入欄 -->
<div class="manu">
<div class="manu1"><a href="">首頁</a></div>
<div class="manu1"><a href="">唐詩</a></div>
<div class="manu1"><a href="">宋詞</a></div>
<div class="manu1"><a href="">古代小說</a></div>
<div class="manu1"><a href="">現代小說</a></div>
<div class="manu1"><a href="">散文</a></div>
<div class="manu1"><a href="">詩歌</a></div>
<div style="clear: left;"></div>
</div>
<!-- 匯入欄結束 -->
<!-- 廣告區 -->
<div>
<div class="advertising"></div>
</div>
<!-- 廣告區結束 -->
<!-- 專案磁區分為project_1，project_2和project三部分 -->
<div class="project">
<!-- project第一部分開始 -->
<div class="project_1">
<div class="part_1">
<div class="part_1-1">唐詩</div>
<div class="part_1-2">
<a href="">更多>></a>
</div>
<div style="clear: both;"></div>
<div class="part_1-3">
<a href="">靜夜思</a>
</div>
<div class="part_1-3">
<a href="">靜夜思</a>
</div>
<div class="part_1-3">
<a href="">靜夜思</a>
</div>
</div>
<div class="part_2">
<div class="part_1-1">宋詞</div>
<div class="part_1-2">
<a href="">更多>></a>
</div>
<div style="clear: both;"></div>
<div class="part_1-3">
<a href="">靜夜思</a>
</div>
<div class="part_1-3">
<a href="">靜夜思</a>
</div>
<div class="part_1-3">
<a href="">靜夜思</a>
</div>
</div>
<div class="part_3">
<div class="part_1-1">元曲</div>
<div class="part_1-2">
<a href="">更多>></a>
</div>
<div style="clear: both;"></div>
<div class="part_1-3">
<a href="">靜夜思</a>
</div>
<div class="part_1-3">
<a href="">靜夜思</a>
</div>
<div class="part_1-3">
<a href="">靜夜思</a>
</div>
</div>
<div style="clear: left;"></div>
</div>
<!-- project第一部分結束 -->
<!-- project第二部分開始 -->
<div class="project_2">
<div class="part_1">
<div class="part_1-1">唐詩</div>
<div class="part_1-2">
<a href="">更多>></a>
</div>
<div style="clear: both;"></div>
<div class="part_1-3">
<a href="">靜夜思</a>
</div>
<div class="part_1-3">
<a href="">靜夜思</a>
</div>
<div class="part_1-3">
<a href="">靜夜思</a>
</div>
</div>
<div class="part_2">
<div class="part_1-1">宋詞</div>
<div class="part_1-2">
<a href="">更多>></a>
</div>
<div style="clear: both;"></div>
<div class="part_1-3">
<a href="">靜夜思</a>
</div>
<div class="part_1-3">
<a href="">靜夜思</a>
</div>
<div class="part_1-3">
<a href="">靜夜思</a>
</div>
</div>
<div class="part_3">
<div class="part_1-1">元曲</div>
<div class="part_1-2">
<a href="">更多>></a>
</div>
<div style="clear: both;"></div>
<div class="part_1-3">
<a href="">靜夜思</a>
</div>
<div class="part_1-3">
<a href="">靜夜思</a>
</div>
<div class="part_1-3">
<a href="">靜夜思</a>
</div>
</div>
<div style="clear: left;"></div>
</div>
<!-- project第二部分結束 -->
<!-- project第三部分開始 -->
<div class="proect_3">
<div class="part_3-1">友情鏈接</div>
<div class="part_3-2"></div>
<div style="clear: both;"></div>
<div class="part_3-3">
<a href="http://www.baidu.com">百度</a>
</div>
</div>
<!-- project第三部分結束 -->
</div>
</body>
</html>
css代碼實作如下：
* {
margin: 0px;
padding: 0px;
}
body {
background-color: #E3E3E3;
}
.aline {
background-color: #00A9F8;
height: 3px;
width: 1200px;
margin: auto;
}
#logo {
width: 75rem;
margin: 10px auto;
}
.logo_right a {
color: #00A9F8;
font-size: 16px;
font-weight: bold;
text-decoration: none;
}
.logo_center,
.logo_left,
.logo_right {
height: 80px;
float: left;
}
.logo_left {
width: 250px;
background-color: #F5F5F5;
background-image: url(../img/logo.jpg);
background-repeat: no-repeat;
background-position: center;
}
.logo_center {
width: 700px;
background-color: #00A9F8;
background-image: url(../img/timg.jpg);
background-position: center;
background-repeat: no-repeat;
}
.logo_right {
width: 250px;
background-color: #F5F5F5;
text-align: center;
line-height: 80px;
}
.logo_right a {
text-decoration-line: none;
}
.manu {
margin: 10px auto;
width: 1200px;
height: 60px;
}
.manu1 {
background-color: #00A9F8;
width: 171px;
float: left;
height: 60px;
text-align: center;
line-height: 60px;
}
.manu1 a {
color: #FFFFFF;
text-decoration: none;
}
.manu1:hover {
background-color: #18e8ff;
}
.advertising {
width: 1200px;
height: 120px;
background-image: url(../img/timg.gif);
background-position: center;
background-repeat: no-repeat;
margin: 10px auto;
}
.part_1 {
height: 45px;
background-color: #FFFFFF;
width: 385px;
}
.part_1-1,
.part_1-2 {
height: 45px;
border-bottom-width: 3px;
border-bottom-color: #00A9F8;
border-bottom-style: solid;
width: 385px;
color: #FFFFFF;
}
.part_1-1 {
float: left;
background-color: #00A9F8;
width: 105px;
text-align: center;
line-height: 45px;
}
.part_1-2 {
float: right;
background-color: #FFFFFF;
width: 260px;
text-align: right;
line-height: 45px;
padding-right: 20px;
}
.part_1-3 {
text-align: left;
line-height: 45px;
border-bottom-width: 1px;
border-bottom-color: #E3E3E3;
border-bottom-style: dotted;
background-color: #FFFFFF;
width: 375px;
padding-left: 10px;
}
.part_1-2 a {
color: #00A9F8;
text-decoration: none;
}
a {
color: black;
text-decoration: none;
}
.part_1,
.part_2,
.part_3 {
float: left;
}
.part_2 {
margin: 0px 22.5px;
}
.project {
width: 1200px;
margin: 0px auto;
}
.project_2 {
margin-top: 10px;
margin-bottom: 10px;
}
.parject_3 {
width: 1200px;
background-color: #FFFFFF;
height: 45px;
}
.part_3-1,
.part_3-2 {
height: 45px;
border-bottom-width: 3px;
border-bottom-color: #00A9F8;
border-bottom-style: solid;
text-align: center;
line-height: 45px;
}
.part_3-1 {
background-color: #00A9F8;
width: 95px;
float: left;
padding-left: 10px;
color: #FFFFFF;
}
.part_3-2 {
width: 1095px;
float: right;
background-color: #FFFFFF;
}
.part_3-3 {
width: 1190px;
height: 45px;
background-color: #FFFFFF;
padding-left: 10px;
}
運行結果：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/205474.html
標籤：其他
上一篇：javeweb之EL