案例

遠飛夢發表於2018-11-14
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>傳智播客設計學院首頁</title>
	<style>
	.danner{
		width: 1000px;
		height: 285px;
		margin: 13px auto 15px auto;
		overflow: hidden;/* 對溢位的部分進行修剪,防止溢位內容呈現在元素框之外; */
	}
	.left{
		width: 755px;
		height: 285px;
		font-weight: bold;/* 文字粗細 */
		background-color: red;/* 背景顏色 */
		position: relative;/* 設定父元素相對定位 */
		float: left;/* 向左浮動 */
	}
	.content_left{
		position: absolute;/* 設定絕對定位 */
		top: 90px;/* 相對父元素上邊線的距離 */
		right: 45px;/* 相對父元素右邊線的距離 */
		text-align: right;/* 文字內容右對齊 */
	}
	.school-en{
		font-size: 14px;
	}
	.school-ch{
		font-size: 24px;
		font-family:黑體;
		background-color: black;
		padding-right: 10px;/* 右內邊矩 */
	}
	.advertise{/* 類選擇器 */
		margin-top: 20px;/* 上內邊距 */
		font-family: 黑體;
		font-size: 16px;
	}
	ul.style_a{/* 交集選擇器即第一個為標記選擇器第二個為類選擇器或者id選擇器,中間不能有空格 */
		margin-top: 25px;
		margin-left: 120px;
		list-style:none;/* 取消無序列表前的標記 */
		overflow: hidden; /* 對溢位的部分進行修剪,防止溢位內容呈現在元素框之外; */
	}
	ul.style_a li{/* 後代選擇器 */
		float: left;/* 浮動 */
		margin-left: 10px;/* 內邊距 */
	}
	body{/* 全域性控制 */
		font-family: 微軟雅黑;font-size: 12px;color: #FFF;
	}
	body,p,ul,li,h4,img{/* 並集選擇器 */
		margin: 0;/* 與其他盒子之間的距離（外邊距） */
		padding: 0;/* 內邊距 */
		border: 0;/* 邊框 */
		list-style: none;/* 取消無序列表前的標記 */
	}
	</style>
</head>
<body>
	<div class="banner">
		<div class="left">
			<div class="content_left">
				<p class="school_en">CHUANZHIBOKECHUAN<br/>ZHIBOKE</p>
				<p class="school_ch">傳智播客</p>
				<p class="advertise">以就業為導向<br/>打造理論與實際相結合的實戰型人才</p>
				<ul class="style_a">
					<li class="current"><a href="#">1</a></li>
					<li><a href="#">2</a></li><a> <!-- 標籤定義超連結，用於從一個頁面連結到另一個頁面。<a> 元素最重要的屬性是 href 屬性，它指定連結的目標。#代表連線到本頁。 -->
					<li><a href="#">3</a></li>
					<li><a href="#">4</a></li>
				</ul>
			</div>
		</div>
		<div class="right">
		    <div class="content_right">
			    <h4>課程介紹</h4>
			    <ul class="style_icon">
				   <li><a href="#">1</a></li>
				   <li><a href="#">2</a></li>
				   <li><a href="#">3</a></li>
				   <li><a href="#">4</a></li>
			    </ul>
			    <p class="cl">傳智部落格設計學院</p>
		    </div>
		</div>
	</div>
</body>
</html>

此程式碼不是全部的程式碼，只是對書上的案例進行解析，

相關文章