html+css实战之仿博客网页

  这几天学习了一些html+css的知识，于是就动手仿博客页面做了一个静态的页面。

 下面为实现的代码：

blog.html:

 





博客
 
学院
 
下载
 
GitChat
 
论坛
 
问答
 
商城
 
头条
 
活动
 
码云
 
ITeye
 







写博客
 
发Chat
 





我的博客

修改个人资料
 
管理博客
 

只看原创




 listview实现列表


listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表. listview实现一个列表.listview实现一个列表.


原创
2018-01-01 00:00:00
阅读量：1000
评论：2

listview实现列表


listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表. listview实现一个列表.listview实现一个列表.


原创
2018-01-01 00:00:00
阅读量：1000
评论：2

listview实现列表


listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表. listview实现一个列表.listview实现一个列表.


原创
2018-01-01 00:00:00
阅读量：1000
评论：2

listview实现列表


listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表. listview实现一个列表.listview实现一个列表.


原创
2018-01-01 00:00:00
阅读量：1000
评论：2

listview实现列表


listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表. listview实现一个列表.listview实现一个列表.


原创
2018-01-01 00:00:00
阅读量：1000
评论：2
  

XXX

原创      粉丝     喜欢     码云 
 8 
 8 
 8 
 未开通 


访问量： 1000 
等级： 2 
排名： 10000 
勋章： 恒 

文章分类  
 Android
8篇
 CSS 
8篇
 JAVA 
8篇

文章存档  
 2017年10月
2篇
 2018年01月 
2篇
 2019年03月 
6篇
阅读排名 

css链接
阅读量：200


css链接
阅读量：200


css链接
阅读量：200

 
联系我们
网站客服
 微博客服
 wwwmaster@csdn.net
400-100-200
京ICP证00000000号
关于|招聘|广告服务

body{
margin:0;
padding:0;
}#container{
width:1349px;
height:1500px;
background-color:#eee;
}#header{
background-color:white;
height:50px;
width:1349px;
}#header .title li{
height:50px;
line-height:50px;
font-size:15px;
margin-left:20px;
margin-right:10px;
list-style-type:none;
float:left;
}
.title li a:link{
color:black;
text-decoration:none;
}
.title li a:hover{
color:red;
}
#header .subtitle li {
height:50px;
line-height:50px;
float:left;
list-style-type:none;
font-size:15px;
margin-right:10px;
color:black;
}
.subtitle li a:link{
color:black;
text-decoration:none;
}
.subtitle li a:hover{
color:red;
}
#main{
width:1349px;
height:1500px;
background-image:url(./images/bkg.jpg);
}
#main h{
margin:50px 900px 50px  80px;
font-size:40px;
font-weight:700px;
float:left;
}
#main .mana li {
float:left;
margin-right:20px;
margin-top:40px;
list-style-type:none;
font-size:15px;
color:white;
}
.mana li a{
border:1px solid white;
padding:2px;
color:white;
text-decoration:none;
}
.mana a:hover{
background:red;
color:white;
}#lside{
width:800px;
height:700px;
background:white;
margin:0px 50px 50px 80px;
padding:5px;
float:left;
}#rside{
width:300px;
height:1000px;
background:white;
float:left;
}#state h{
margin:20px 400px 20px 15px;
color:#999;
font-size:18px;
border:1px solid gray;
padding:2px;
font-family:'PingFang SC','Microsoft YaHei',SimHei,Arial,SimSun;
}
#state img{
margin:20px 20px 10px 15px;
}
#artitlrtitle h{
font-size:20px;
font-weight:700px;
margin:10px 200px 10px 15px;
float:left;
clear:both;
}#content p{
font-size:10px;
margin:5px 15px;
clear:both;
color:#999;
}
#time h{
margin:3px 10px 5px 15px;
font-size:15px;
float:left;
color:#999;
}
#time .oth{
margin:3px 10px 5px 15px;
font-size:15px;
float:left;
color:#999;
}#head img{
margin:15px;
}#head p{
float:left;
font-size:20px;
margin:30px 10px;
font-weight:700px;
color:#999;
font-weight:600px;
}#four .yuan{
font-size:16px;
font-weight:700px;
margin:5px 10px 10px 40px;
color:gray;
float:left;
}#four  .num1{
font-size:14px;
font-weight:700px;
margin:5px 6px 20px 51px;
color:#999;
}
#four .num2{
font-size:14px;
font-weight:700px;
margin:5px 7px 20px 50px;
color:#999;
}
#four .num3{
font-size:14px;
font-weight:700px;
margin:5px 7px 20px 46px;
color:#999;
}
#four .num4{
font-size:14px;
font-weight:700px;
margin:5px 7px 20px 29px;
color:#999;
}
#intro{
height:260px;
width:300px;
margin-top:10px;
}
#intro .ff{
font-size:10px;
margin:5px 20px;
clear:both;
}
#fenlei h{
font-size:15px;
font-weight:700px;
float:left;
margin:10px 20px;
font-weight:700px;
}
#fenlei p .ti1 {
float:left;
clear:left;
font-size:10px;
margin:5px 20px;
color:gray;
text-decoration:none;
}#fenlei p .ti1:hover{
color:red;
}
#fenlei .tii1{
float:right;
clear:right;
font-size:8px;
margin:5px 20px;
color:#bbb;
}
#cundang h{
font-size:15px;
font-weight:700px;
float:left;
clear:left;
margin:20px 20px;
}
#cundang p .ti1{
float:left;
clear:left;
font-size:10px;
margin:5px 20px;
color:gray;
text-decoration:none;
}
#cundang p .ti1:hover{
color:red;
}
#cundang .tii1{
float:right;
clear:right;
font-size:8px;
margin:5px 20px;
color:#bbb;
}#paiming h{
font-size:15px;
font-weight:700px;
float:left;
clear:left;
margin:20px 20px;
font-weight:700px;
}
#pm .tiname{
float:left;
clear:left;
font-size:15px;
margin:5px 20px;
color:gray;
text-decoration:none;
}
#pm .tiname:hover{
color:red;
}
#pm .tinum{
float:left;
clear:left;
font-size:8px;
margin:3px 20px;
color:#bbb;
}
#callus h{
font-size:15px;
font-weight:700px;
float:left;
clear:left;
margin:20px 20px;
font-weight:700px;
}#callus .us{
font-size:10px;
margin:5px 2px 5px 20px;
float:left;
clear:left;
}
#callus .weibo{
font-size:10px;
margin:5px 5px;
padding-right:80px;
float:right;
clear:right;
}
#callus .us1{
font-size:10px;
margin:5px 20px;
float:left;
clear:left;
}
#callus .oo1{
margin:40px 80px 10px 80px;
font-size:10px;
float:left;
clear:left;
}
#callus .oo2{
margin:10px 80px 10px 80px;
font-size:10px;
float:left;
clear:left;
}

     因为刚接触html和css，所以我只能以我目前对其的理解做出这个页面。有不足，但记录下来可以作为我自己学习的一个过程笔记。接下去不断深入学习后，有时间可以回过头来进行优化。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！