刚入门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;
}
![[ES6] 01. Intro to ES6 and traceur compiler](https://images0.cnblogs.com/blog/364241/201411/151837353434462.jpg)
