HTML+CSS 網頁排版 筆記
阿新 • • 發佈：2018-12-30
- 網頁排版首次練習，記錄學習的點點滴滴
- 主要使用了浮動，盒子模型，無序列表來實現對網頁的排版
- 網頁排版的方式：1.使用浮動來進行網頁排版 2.使用表格來進行網頁排版 3.使用定位來進行網頁排版 使用浮動來進行網頁排版是最常用的
- 盒子模型：內容區，內邊距，邊框，外邊距
- 清除自帶樣式：margin:0px; padding:0px;
- 內聯元素改成塊元素：display:block; 行內塊元素：display:inline-block;
- 居中：margin:0px auto;
- 清除超連結下劃線：text-decoration:none;
- 清除無序列表前面的點：lift-style:none;
- 控制滑鼠滑動的偽類：link，hover，active
- 行高line-height 字間距letter-spacing 單詞間距word-spacing
下面是做簡單網頁排版時的聯絡程式碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } .first{ height:60px; width: 1000px; background-color: black; } .second{ height: 500px; width: 1000px; background-color: yellowgreen; } .third{ height: 20px; width: 1000px; background-color: black; } h1{ color: white; margin-left:20px; } .L{ height: 240px; width: 150px ; margin-left: 5px; float: left; } .second a{ display: block; height: 25px; width: 180px; list-style: none; text-decoration: none; color: black; margin:0px 5px 5px 5px; padding-left:5px ; background-color: blue; } .up{ height:240px; width: 800px; background-color: orange; float: right; } .picture1{ height: 230px; width: 490px; background-color:pink; float: left; margin: 5px; } .decoration1{ height: 230px; width: 290px; background-color: skyblue; float: right; margin: 5px; } h3{ padding-top: 10px; padding-bottom: 20px; } .span1{ font-size: 11px; } .down{ height:240px; width: 800px; background-color: orange; float: right; margin-top: 10px; } .L1{ height: 230px; width: 390px; background-color:pink; float: left; margin: 5px; } .R1{ height: 230px; width: 390px; background-color: skyblue; float: right; margin: 5px; } .picture2{ height: 100px; width: 150px; background-color:yellow; float: left; } .decoration2{ height: 100px; width: 230px; background-color:cyan; float: right; } .decoration3{ height: 100px; width: 230px; background-color:cyan; float: right; } .picture3{ height: 100px; width: 150px; background-color:yellow; float: left; } .classA{ display: block; width: 150px; color: white; font-family: "微軟雅黑"; margin:0px auto; } </style> </head> <body> <div class="first"> <h1>The London News</h1> </div> <div class="second"> <div class="L"> <ul> <li><a href="#">Local News</a></li> <li><a href="#">National News</a></li> <li><a href="#">World News</a></li> <li><a href="#">Politics News</a></li> <li><a href="#">Science News</a></li> <li><a href="#">Technology News</a></li> <li><a href="#">Travel News</a></li> <li><a href="#">Business News</a></li> <li><a href="#">Education News</a></li> <li><a href="#">Entertainment News</a></li> </ul> </div> <div class="r"> <div class="up"> <div class="picture1"> </div> <div class="decoration1"> <h3>The Big Freeze</h3> <span class="span1"> The Land Before Time VIII: The Big Freeze is a 2001 direct-to-video animated adventure musical film and the eighth film in The Land Before Time series. <br /> In September 2001, the film was nominated by the Video Premieres Academy for two awards: "Best Animated Video Premiere Movie" and "Best Animated Character Performance" (Mr. Thicknose). </span> </div> </div> <div class="down"> <div class="L1"> <div class="picture2"> </div> <div class="decoration2"> <h3>Farms Cleared</h3> <span class="span2"> </span> </div> </div> <div class="R1"> <div class="picture3"> </div> <div class="decoration3"> <h3>Interest Rate Rises</h3> <span class="span3"> </span> </div> </div> </div> </div> </div> <div class="third"> <span class="classA">fixed width page design</span> </div> </body> </html>