最簡單的個人博客頁面布局
阿新 • • 發佈：2018-10-16
部分 挑戰 block lin title 程序 靜態 打出 代碼
今天完成課堂布置的web作業，讓我再次深刻認識到代碼只有自己打出來才能真的記住或者理解。盡管我已經跟著視頻或者書籍做了一定量的練習，但在沒有參考的情況下直接寫的話，連最基礎的布局和標簽屬性都沒有掌握。認識到問題是好事，希望自己能解決。
本次web作業發現的問題：
1· 當給出靜態頁面的布局圖，難以合理的利用CSS來解決，對布局沒有足夠的認識
2·標簽的語義理解不足，不能采用合適的標簽，尤其是在class/name/id 屬性的設置上，沒有足夠認識
3·float屬性在布局中起了相當重要的作用，點擊這裏可以查看相關參考 。
4·顏色的值選擇不熟悉
5·通過margin/padding屬性來進行合理的布局
6·無法實現響應式布局
這是html部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Blog</title> <link rel="stylesheet" type="text/css" href="blogcss.css"> </head> <body> <header><h1 align="center">崔王寧的博客</h1></header> <nav> <ul > <li><a href="#">首頁</a></li> <li><a href="#">博文</a></li> <li><a href="#">相冊</a></li> <li><a href="#">個人檔案</a></li> </ul> </nav> <div> <section> <article class="art1"> <div> <h2>HTML5</h2> <hr style= "border:1px dashed #46a3ff" /> <div> <p>html5是下一代html標準，目前仍然處於發展階段，經過了Web2.0時代，基於互聯網的應用已經越來越豐富，同時也對互聯網提出了更高的要求</p> </div> <hr style= "border:1px solid #46a3ff" /> <footer><p>編輯於2018.10.15</p></footer> </div> </article> <article class="art2"> <div> <h2>CSS3</h2> <hr style= "border:1px dashed #46a3ff" /> <div> <p>對於與前端設計師來說，雖然css3不是最新的技術，但他卻重啟了一扇奇思妙想的窗口。 </p> </div> <hr style= "border:1px solid #46a3ff" /> <footer><p>編輯於2018.10.15</p></footer> </div> </article> </section> <aside> <div> <h2>簡介</h2> <p> <span>HTMl</span>和<span>CSS</span>正在掀起一場變革，它不是在替代flash，而是正在發展為開放的web平臺，不但在移動領域建工卓著，呃呃企鵝對傳統的應用程序發起挑戰。</p> </div> </aside> </div> <footer><div><hr style= "border:1px solid #46a3ff" /><p align="center" class="footer-1">版權所有2018</p></div></footer> </body> </html>
這是css部分
h1{ color:#9d9d9d; } nav{ width:100%; display: block; background-color: blue; height: 40px; margin:0 auto; box-shadow: 0 5px #6a6aff; } ul { display:block; margin:0 auto; list-style: none; } ul li{ float: left; line-height: 40px; text-align: center; position: relative; } a{ text-decoration: none; color:#000; display: block; padding: 0 10px; } a:hover{ color:#FFF; background-color:#000; } div{ position:relative; } aside{ margin-top:10px; float:right; height:350px; width:15%; background:#f0f0f0; } span{ color:#46a3ff; } div article{ margin:10px; padding:10px; width:120%; height:180px; border-width:3px; border-color:#46a3ff; border-style: solid } section{ float:left; } .art2{ clear: both; } footer{ clear:left; }
逐漸優化代碼，提高自己，任重道遠
最簡單的個人博客頁面布局