<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8"/>
<title>實作vivo X9s手機的宣傳面面</title>
<!-- 引用CSS樣多檔案，路徑、類型、與目前檔案關系 -->
<!-- 使用類選擇器，僞類選擇器，僞元素選擇器 -->
<link href="css/style.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div class="cont">
<h1><a href="#">vivo X9s</a></h1>
<div class="top">
更強大的分屏多任務3.0<br/>新增對QQ浏覽器、天貓等應用的
分屏功能，大幅增加了可以一屏二用的場景，不但可以邊看視訊邊回複，更可以一
邊聊天一邊購物、寫文檔、回郵件、看新聞
</div>
</div>
</body>
</html>
@charset "utf-8";
/*css document*/
.cont{/*類選擇器，設定頁面整體大小以及背景圖*/
width: 1536px;/*設定整體頁面寬度為1536像素*/
height: 840px;/*設定整體頁面高度840像素*/
margin: 0 auto;/*設定頁面外邊距上下邊距為0,左右自适應*/
text-align: center;/*文字對齊方式為居中對齊*/
background: url("../images/bg.jpg");/*為頁面設定背景圖檔*/
}
h1{/*通過标記選擇器，選擇<h1>标題标記*/
padding-top: 80px;/*設定向上的内邊距*/
}
.top{/*使用類選擇器，改變主體内容的樣式*/
line-height: 30px;/*類選擇器，設定行高為30像素*/
margin: 0 auto;/*設定主體部分的外邊距*/
text-align: center;/*設定文字的對齊方式為居中對齊*/
width: 650px;/*設定主體部分的寬度為650像素*/
font-size: 20px;/*設定文字的大小*/
}
/**設定頁面的功能樣式*/
.top:after{/*在類名為top的div後面添加内容*/
content: url("../images/phone.png");/*添加内容為1張圖檔,url為圖檔位址*/
display: block;/*設定顯示方式*/
margin-top: 50px;/*設定所添加内容的向上的外邊距*/
}
.top:first-line{/*類選擇器中第一行文字的樣式*/
font-size: 30px;/*設定第一行字型大小*/
line-height: 90px;/*設定第一行字型行高*/
}
a:link{/*設定未被通路的超連結的樣式*/
text-decoration: none;/*取消期預設的下劃線*/
color: #000;/*設定字型顔色為黑色*/
}
a:visited{/*設定通路後的超連結的樣式*/
color: purple;/*設定通路後的超接的字型顔色為紫色*/
}
a:hover{/*設定滑鼠停留在超連結上的樣式*/
text-decoration: underline;/*類選擇器設定滑鼠滑過時在文字下方出現下劃線*/
color: #B49668;/*設定滑鼠懸停在超連結上時的字型顔色*/
}
a:active{/*設定正在被單擊的超連接配接樣式*/
color: red;/*設定下在被單擊的超連結字型顔色*/
text-decoration: none;/*取消正在被單擊的超接的下劃線*/
}
![CSS的僞元素和僞類的差別[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)