HTML5+CSS编写个人博客界面
生活随笔
收集整理的這篇文章主要介紹了
HTML5+CSS编写个人博客界面
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
剛入門html和css，花了一天入門基礎，第二天花了五六個小時完成老師布置的作業——個人博客界面，初學者可以進行參考編寫。
注：里面的鏈接都不能點擊
廢話少說，看結果：
?
?參考代碼：
microbloy.html
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>個人博客</title><link rel="stylesheet" href="css/bloy.css"></head><body><div id="page-container"><div id="main-nav" align="right"style="color: blue;"><a1></br><a href="hdfd"><b>個人首項</b></a>| <a href="hdfd"><b>心情日志</b></a>| <a href="hdfd"><b>精選文章</b></a>| <a href="hdfd"><b>溫馨相冊</b></a>| <a href="hdfd"><b>個人檔案</b></a>|  </a1></div><div id="content"><div id="sidebar-a"><div id="pic"><h2><img src="img/pic3.png" width="233"height="105"alt="English Designs" border="0" align="right" /></h2></div><div id="pic2" style="size:10px;"> 個人檔案</br><img src="img/個人檔案.png" width="23"height="20" border="0" align="left" /> <a href="http:sdaf"> 個人檔案 </a>Personal files<br /><hr width="90" align="center" style="height:0.01px;border:none;border-top:1px dashed #0066CC;" /><img src="img/pen.png" width="23"height="20" border="0" align="left" /> <a href="http:sdaf"> 心情日志</a> Rloofog<br /><hr width="90" align="center" style="height:0.01px;border:none;border-top:1px dashed #0066CC;" /><img src="img/文章.png" width="23"height="20" border="0" align="left" /> <a href="http:sdaf"> 技術文章</a> Technicelercies<br /><hr width="90" align="center" style="height:0.01px;border:none;border-top:1px dashed #0066CC;" /> <img src="img/相冊.png" width="23"height="20" border="0" align="left" /> <a href="http:sdaf"> 相冊</a> pic<br /><hr width="90" align="center" style="height:0.01px;border:none;border-top:1px dashed #0066CC;" /> <br /> </div> </div><div id="content1"> <div id="content3"><h4 > 精選文章：</h4><table border="0"><tr><td > *<a href="htt">c++設計定義</a></td><td>    [2020-1-3]</td></tr><tr><td> *<a href="htt">c語言設計定義</a></td><td>    [2010-1-7]</td></tr><tr><td> *<a href="htt">java設計定義</a></td><td>    [2021-5-3]</td></tr><tr><td> *<a href="htt">phython設計定義; </a></td><td>    [2000-1-3]</td></tr></table> </div><div id="content2" style="line-height: 14px;"><b1 style="color: burlywood;"><br /><br /><br /><br />虛擬網店測試如：HTML</b1><br /><b2> HTML5是構建Web內容的一種語言描述方式，HTML5是互聯網的下一代標準，是構建以及呈現互聯網內容的一種語言方式，被認為是互聯網的核心技術之一。HTML產生于1990年，1997年HTML4成為互聯網標準，并廣泛應用于互聯網應用的開發。</b2><p style="font-family: '微軟雅黑';size: 12px;color: burlywood;">友情連接</p> <a href="http://www.baidu.com"><img border="0" src="img/pic2.png" alt="圖片1" width="60" height="60"></a>  <a href="http://www.baidu.com"><img border="0" src="img/pic2.png" width="60" height="60"></a> <a href="http://www.baidu.com"><img border="0" src="img/pic2.png" width="60" height="60"></a></div></div></div><div id="header"><div id="indrouce"> <img src="img/pic2.png" width="80"height="80"alt="pic" border="0"/><h1><p style="size: a3;font-family:arial,castellar;">姓名：XXX<br />qq:XXXXXXX<br />年齡：19<br />描述：性格開朗，善于溝通，為人正直</p></h1></div> <p style="size: 4;font-family: 'arial narrow';">Best EdUPOTAL Serverce</br>dfdss</p></div><div id="footer">版權所有*CopyRright:<a href="http:www.csoftedu.com">http:www.csoftedu.com</a>All rights reserved<br />瀘ICP備05030066號</div></div></body> </html>bloy.css
#page-container{width: 760px;margin: auto;background: url(../img/pic.png);; } #main-nav{background: #87CEEB;height: 50px; } #header{text-align: center; height: 400px; } #pic2{width: 350px;height: 140px;text-indent: 0%; } #pic{float:right;width: 350px;height: 120px; } #indrouce{ padding-top: 15px;background: powderblue;height: 200px;width: 110px;margin-left: 60px; } #content{width: 500px;float: right; } #content2{height: 230px;width: 250px; } #content1{height: 230px; } b1{font: arial;text-align: left;font-size: 14px; } b2{font-size: 6px;line-height:1px; } #content3{font-size: 12px;float: right;width: 250px;height: 230px; } #sidebar-a{ font-size: 12px;height:120px; } h2{float: right;margin-right: 2px;padding: 1px; }h1{text-align: left;font-family:arial;font-size: 12px;color: #666666;margin: 0;padding: 0; } #footer{font-size: 10px;clear: both;background:#F0F0F0;height: 40px;border-top: 10px;text-align: center;padding: 13px 25px; }總結
以上是生活随笔為你收集整理的HTML5+CSS编写个人博客界面的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Shell文件查找之find命令（1）
- 下一篇： Bootstrap前端组件库+构建管理