【塊級標籤結構的搭建】案例:製作導航欄

css

層疊樣式表

內部樣式

外部樣式

內聯樣式(行內樣式,嵌入式樣式)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>內部樣式表</title>
		
		<!-- 內部樣式 -->
		<style type="text/css">
			
		</style>
		
		<!-- 外部樣式 -->
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		
		
	</head>
	<body>
		<!-- 行內樣式表 -->
		<p style="">內聯(行內)優先級最高<br>
		內部樣式表與外部樣式表的優先級和書寫的順序有關,後寫的優先級別高(最後加載的誰)
		</p>
	</body>
</html>

設置導航欄

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>導航欄</title>
		<style type="text/css">
			li{
				/* 塊級元素設置爲行內元素 */
				display: inline-block;
				width: 100px;
				height: 30px;
				background-color: lightseagreen;
				/* 字體大小 */
				font-size: 12px;
				/* 對齊方式 */
				text-align: center;
				/* 等於li的高度,可以上字體垂直居中 */
				line-height: 30px;
				
			}
			a{
				/* 字體顏色 */
				color: #fff;
				/* 去掉下劃線 */
				text-decoration: none;
			}
		</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>
			<li><a href="#">下載中心</a></li>
			<li><a href="#">工程實例</a></li>
		</ul>
	</body>
</html>

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章