HTML開発ブログのホームページデザイン(2)

テーマデザイン

最初にホームページの画像を紹介します

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

効果は次のとおりです

画像内でスタイルタイプを定義します。

メインdivを作成し、IDタグブログを定義します

 
 
 
 
测试文章
 
内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示内容显示
 
测试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{ 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; }

効果は次のとおりです: