HTML5+CSS编写个人博客界面
生活随笔
收集整理的這篇文章主要介紹了
HTML5+CSS编写个人博客界面
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
剛?cè)腴Thtml和css，花了一天入門基礎(chǔ)，第二天花了五六個(gè)小時(shí)完成老師布置的作業(yè)——個(gè)人博客界面，初學(xué)者可以進(jìn)行參考編寫。
注：里面的鏈接都不能點(diǎn)擊
廢話少說(shuō)，看結(jié)果：
?
?參考代碼：
microbloy.html
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>個(gè)人博客</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>個(gè)人首項(xiàng)</b></a>| <a href="hdfd"><b>心情日志</b></a>| <a href="hdfd"><b>精選文章</b></a>| <a href="hdfd"><b>溫馨相冊(cè)</b></a>| <a href="hdfd"><b>個(gè)人檔案</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;"> 個(gè)人檔案</br><img src="img/個(gè)人檔案.png" width="23"height="20" border="0" align="left" /> <a href="http:sdaf"> 個(gè)人檔案 </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"> 技術(shù)文章</a> Technicelercies<br /><hr width="90" align="center" style="height:0.01px;border:none;border-top:1px dashed #0066CC;" /> <img src="img/相冊(cè).png" width="23"height="20" border="0" align="left" /> <a href="http:sdaf"> 相冊(cè)</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++設(shè)計(jì)定義</a></td><td>    [2020-1-3]</td></tr><tr><td> *<a href="htt">c語(yǔ)言設(shè)計(jì)定義</a></td><td>    [2010-1-7]</td></tr><tr><td> *<a href="htt">java設(shè)計(jì)定義</a></td><td>    [2021-5-3]</td></tr><tr><td> *<a href="htt">phython設(shè)計(jì)定義; </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 />虛擬網(wǎng)店測(cè)試如：HTML</b1><br /><b2> HTML5是構(gòu)建Web內(nèi)容的一種語(yǔ)言描述方式，HTML5是互聯(lián)網(wǎng)的下一代標(biāo)準(zhǔn)，是構(gòu)建以及呈現(xiàn)互聯(lián)網(wǎng)內(nèi)容的一種語(yǔ)言方式，被認(rèn)為是互聯(lián)網(wǎng)的核心技術(shù)之一。HTML產(chǎn)生于1990年，1997年HTML4成為互聯(lián)網(wǎng)標(biāo)準(zhǔn)，并廣泛應(yīng)用于互聯(lián)網(wǎng)應(yīng)用的開(kāi)發(fā)。</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 />描述：性格開(kāi)朗，善于溝通，為人正直</p></h1></div> <p style="size: 4;font-family: 'arial narrow';">Best EdUPOTAL Serverce</br>dfdss</p></div><div id="footer">版權(quán)所有*CopyRright:<a href="http:www.csoftedu.com">http:www.csoftedu.com</a>All rights reserved<br />瀘ICP備05030066號(hào)</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; }總結(jié)
以上是生活随笔為你收集整理的HTML5+CSS编写个人博客界面的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Shell文件查找之find命令（1）
- 下一篇： 数据库基础：IndexedDB