css簡單練習5

css簡單練習5

根據css現學內容,完成以下頁面佈局。
圖例以下所示:
在這裏插入圖片描述

css

練習分析:

  1. 總體觀察圖片可知該網頁的背景顏色是灰色,即最大的盒子中背景顏色應設爲灰色。大盒子中擺入多個小一點的盒子來完成佈局,其餘的盒子擺放可經過下圖來理解。
  2. 盒子擺好後能夠根據實際狀況加入外邊距(margin)或內邊距(padding)來分開盒子,以便於按要求完成任務。
  3. 對於形狀相同的盒子寫出來一個後複製粘貼來,能夠減小做業任務。
  4. 對於上方的菜單導航欄中能夠加入僞類來加強視覺效果。
  5. 若代碼量比較大爲了編寫方便,能夠將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">&nbsp;&nbsp;</a>
				&nbsp;&nbsp;
				<a href="http://www.baidu.com">&nbsp;&nbsp;</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="">更多&gt;&gt;</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="">更多&gt;&gt;</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="">更多&gt;&gt;</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="">更多&gt;&gt;</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="">更多&gt;&gt;</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="">更多&gt;&gt;</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;
}

運行結果:

在這裏插入圖片描述

相關文章
相關標籤/搜索