初學html，任務1：一個簡單html頁面，要求：內容頁面裝一篇文章 用html來分段
阿新 • • 發佈：2018-05-29
enter pos 工程師 分享圖片 visit 技術 運行 並且 center
這是主要內容部分，用html實現版塊分布。
接下來是樣式部分。
讓頁面所有元素的padding和margin都設置為0 ；
否則加入一張大的覆蓋的背景圖片後，會由於瀏覽器的緣故，圖片周邊有白邊；
設置背景圖，並且把字體設置為微軟雅黑；
註意代碼格式，同樣是background就一起寫在後面，最好不要使用註釋代碼，否則瀏覽器會多次重復檢索，會降低頁面顯示速度；
板塊位置設置為相對，設置字體背景塊顏色；
opacity為設置透明度，前一個opacity取值範圍是0-100,後一個opacity取值範圍是0-1，越接近0就越透明；
給正文部分板塊設置絕對路徑，行間距等；
對超鏈接設置樣式：
link:連接平常的狀態
visited:連接被訪問過之後
hover:鼠標放到連接上的時候
active:連接被按下的時候
這幾個屬性順序不能顛倒，一般正常順序為：link，visited，hover，active，即
a:link
a:visited
a:hover
a:active
代碼如下所示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>東野圭吾</title> <style> *{ margin: 0; padding: 0; box-sizing: border-box; } body { background: url(./img/timg4Y6FJHB6.jpg) no-repeat center 0px fixed; background-size: cover; /* background-position: center 0; background-size: cover; background-attachment:fixed; background-repeat:no-repeat;*/ font-family: "微軟雅黑", sans-serif; } .dise { position: relative; top: 150px; background-color: #4F4F4F; width: 1300px; height: 400px; filter:alpha(opacity:30); opacity:0.5;font-family: "微軟雅黑" } .neirong1{ position: absolute; left: 300px; top: 170px; padding: 10px; width: 400px; color: black; margin-bottom: 10px; font-size: 22px;font-family: "微軟雅黑" } .neirong2 { position: absolute; top: 350px; left: 300px; padding: 10px; width: 400px; color: black; margin-bottom: 10px; font-size: 22px; } .neirong3 { position: absolute; top: 150px; left: 750px; padding: 10px; width: 400px; color: black; margin-bottom: 10px; font-size: 22px; line-height:40px; } a:link { color: #FF0000; text-decoration: underline; } a:visited { color: #FFFFFFFF; text-decoration: none; } a:hover { color: #000000; text-decoration: none; } a:active { color: #FFFFFF; text-decoration: none; } </style> </head> <body> <div class="dise"></div> <div class="neirong1">東野圭吾（ひがしの けいご，Higashino Keigo），日本推理小說作家。 代表作有<a href="#">《放學後》</a> <a href="#">《秘密》</a> <a href="#">《白夜行》</a> <a href="#">《以眨眼幹杯》</a>等。 1958年2月4日出生於日本大阪。</div> <div class="neirong2">畢業於大阪府立大學電氣工學專業， 之後在汽車零件供應商日本電裝擔任生產技術工程師，並進行推理小說的創作。 1985年，憑借《放學後》獲得第31回江戶川亂步獎，從此成為職業作家，開始專職寫作。 </div> <div class="neirong3">1999年<a href="#">《秘密》</a>獲第52屆日本推理作家協會獎， 2006年<a href="#">《嫌疑人X的獻身》</a>獲134屆直木獎， 東野圭吾從而達成了日本推理小說史上罕見的“三冠王”。 2017年4月，第11屆中國作家富豪榜子榜單“外國作家富豪榜”發布， 東野圭吾問鼎外國作家富豪榜首位。 </div> </body> </html>
運行結果如下圖：
css樣式最好和html內容分開寫，單獨創一個css文件，在html中用link標簽鏈；
最後註意排版，美觀！！！
初學html，任務1：一個簡單html頁面，要求：內容頁面裝一篇文章 用html來分段