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; }

效果如下：

#