HTML开发博客之主页设计（二）

主题设计

首先将主页图片引入

      
   
 
 
 
 
 首页
 
科技资讯
 
心情随笔
 
资源收藏
 
图文图片
 
留言板
 
登陆/注册
 
 
 
  
 
 
 
 
 网站位置 | 关于我们 | 意见反馈 |
 
 
 
友情链接
 
PHP中文网 | 小猪CMS
 
公司网址：php.cn
 
 
 
  

效果如图

在图片内定义样式类型。

创建主体div，定义id标签blog

 
 
 
 
测试文章
 
内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示
 
测试2016/10/31
 
 
 

我们对css样式进行控制

#blog{ width: 1000px; overflow: hidden; margin: 0 auto; margin-top: 20px; } #blog ul{ list-style-type: none; } #blog ul li{ background-color: white; padding: 20px; width: 100%; overflow: hidden; margin-top: 15px; } .blog-left{ float: left; width: 680px; overflow: hidden; } .blog-right{ float: left; margin-left: 10px; width: 280px; overflow: hidden; } .blog-right img{ width: 280px; height: 200px; } .title{ text-decoration:none; font-size: 26px; } .blog-left p{ color: gray; } .blog-left img{ width: 20px; margin-right: 10px; vertical-align: middle; }

底部增加一个分页条

 首页 1 2 3 ...尾页 

对page分页条进行操作

.page{ height: 40px; margin-top: 10px; text-align: center; padding-top: 20px; } .page a{ border: 1px solid #71b0bb; text-decoration: none; margin: 5px; padding: 5px 10px; } .page a:link,.page a:visited{ color: #000000; } .page a:hover,.page a:active{ color: #FFF; background-color: #bbac5c; }

效果如下：