一、(8)个人博客首页综合实战
一、HTML代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>个人博客</title> <link rel="stylesheet" href="CSS/index.css"/> </head> <body> <div class="topnav"> <div> 欢迎访问博客园 <span> <a href="#">关于我们</a> <a href="#">联系我们</a> </span> </div> </div> <header> <div> <a href="#"><img src="images/logo.png" alt="博客LOGO"/></a> <nav> <a href="#">首页</a> <a href="#">互联网</a> <a href="#">好货推荐</a> <a href="#">技术宅</a> <a href="#">数码</a> <a href="#">民生</a> <a href="#">影像</a> <a href="#">游记</a> <a href="#">心情随笔</a> <a href="#">留言本</a> </nav> <form action="#" method="get"> <input type="text" name="keywords" placeholder="请输入要搜索的内容"/> <input type="image" src="images/search.png" title="搜索"/> </form> </div> </header> <!--横幅--> <div class="banner"> <div> <h1>个人博客</h1> <a href="#">+关注</a> <p>原创独立个人博客网站</p> </div> </div> <!--内容--> <section class="content"> <main> <ul> <li> <a href="#"><img src="images/pic1.jpg" alt="图1"></a> <h4><a href="#">美之氧制氧机怎么样,怎么用</a></h4> <p class="info"> <span class="time">17:10</span> <span class="category">好货推荐</span> <span class="hits">144</span> <span class="comment">0条</span> </p> <p>不好意思,这么久才来评价,我是想等我爸用了在来评价的,我爸肺结核好多年了,肺都没了,平常喘气比较困难,我就给我爸买了这款吸氧机,这款吸氧机确实不错。货到了我爸就用了,现在已经用了几天了效果明显的好了很多,我爸说他现在喘气舒服多了,在也不用担心老爸呼吸的困难了,....</p> </li> <li> <a href="#"><img src="images/pic1.jpg" alt="图1"></a> <h4><a href="#">美之氧制氧机怎么样,怎么用</a></h4> <p class="info"> <span class="time">17:10</span> <span class="category">好货推荐</span> <span class="hits">144</span> <span class="comment">0条</span> </p> <p>不好意思,这么久才来评价,我是想等我爸用了在来评价的,我爸肺结核好多年了,肺都没了,平常喘气比较困难,我就给我爸买了这款吸氧机,这款吸氧机确实不错。货到了我爸就用了,现在已经用了几天了效果明显的好了很多,我爸说他现在喘气舒服多了,在也不用担心老爸呼吸的困难了</p> </li> <li> <a href="#"><img src="images/pic1.jpg" alt="图1"></a> <h4><a href="#">美之氧制氧机怎么样,怎么用</a></h4> <p class="info"> <span class="time">17:10</span> <span class="category">好货推荐</span> <span class="hits">144</span> <span class="comment">0条</span> </p> <p>不好意思,这么久才来评价,我是想等我爸用了在来评价的,我爸肺结核好多年了,肺都没了,平常喘气比较困难,我就给我爸买了这款吸氧机,这款吸氧机确实不错。货到了我爸就用了,现在已经用了几天了效果明显的好了很多,我爸说他现在喘气舒服多了,在也不用担心老爸呼吸的困难了</p> </li> <li> <a href="#"><img src="images/pic1.jpg" alt="图1"></a> <h4><a href="#">美之氧制氧机怎么样,怎么用</a></h4> <p class="info"> <span class="time">17:10</span> <span class="category">好货推荐</span> <span class="hits">144</span> <span class="comment">0条</span> </p> <p>不好意思,这么久才来评价,我是想等我爸用了在来评价的,我爸肺结核好多年了,肺都没了,平常喘气比较困难,我就给我爸买了这款吸氧机,这款吸氧机确实不错。货到了我爸就用了,现在已经用了几天了效果明显的好了很多,我爸说他现在喘气舒服多了,在也不用担心老爸呼吸的困难了</p> </li> <li> <a href="#"><img src="images/pic1.jpg" alt="图1"></a> <h4><a href="#">美之氧制氧机怎么样,怎么用</a></h4> <p class="info"> <span class="time">17:10</span> <span class="category">好货推荐</span> <span class="hits">144</span> <span class="comment">0条</span> </p> <p>不好意思,这么久才来评价,我是想等我爸用了在来评价的,我爸肺结核好多年了,肺都没了,平常喘气比较困难,我就给我爸买了这款吸氧机,这款吸氧机确实不错。货到了我爸就用了,现在已经用了几天了效果明显的好了很多,我爸说他现在喘气舒服多了,在也不用担心老爸呼吸的困难了</p> </li> <li> <a href="#"><img src="images/pic1.jpg" alt="图1"></a> <h4><a href="#">美之氧制氧机怎么样,怎么用</a></h4> <p class="info"> <span class="time">17:10</span> <span class="category">好货推荐</span> <span class="hits">144</span> <span class="comment">0条</span> </p> <p>不好意思,这么久才来评价,我是想等我爸用了在来评价的,我爸肺结核好多年了,肺都没了,平常喘气比较困难,我就给我爸买了这款吸氧机,这款吸氧机确实不错。货到了我爸就用了,现在已经用了几天了效果明显的好了很多,我爸说他现在喘气舒服多了,在也不用担心老爸呼吸的困难了</p> </li> <li> <a href="#"><img src="images/pic1.jpg" alt="图1"></a> <h4><a href="#">美之氧制氧机怎么样,怎么用</a></h4> <p class="info"> <span class="time">17:10</span> <span class="category">好货推荐</span> <span class="hits">144</span> <span class="comment">0条</span> </p> <p>不好意思,这么久才来评价,我是想等我爸用了在来评价的,我爸肺结核好多年了,肺都没了,平常喘气比较困难,我就给我爸买了这款吸氧机,这款吸氧机确实不错。货到了我爸就用了,现在已经用了几天了效果明显的好了很多,我爸说他现在喘气舒服多了,在也不用担心老爸呼吸的困难了</p> </li> <li> <a href="#"><img src="images/pic1.jpg" alt="图1"></a> <h4><a href="#">美之氧制氧机怎么样,怎么用</a></h4> <p class="info"> <span class="time">17:10</span> <span class="category">好货推荐</span> <span class="hits">144</span> <span class="comment">0条</span> </p> <p>不好意思,这么久才来评价,我是想等我爸用了在来评价的,我爸肺结核好多年了,肺都没了,平常喘气比较困难,我就给我爸买了这款吸氧机,这款吸氧机确实不错。货到了我爸就用了,现在已经用了几天了效果明显的好了很多,我爸说他现在喘气舒服多了,在也不用担心老爸呼吸的困难了</p> </li> </ul> <div class="pagination"> <a href="#">«</a> <a href="#" class="on">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">»</a> </div> </main> <aside> <h3>文章分类</h3> <ul class="catelist"> <li><a href="#">互联网</a></li> <li><a href="#">好货推荐</a></li> <li><a href="#">技术宅</a></li> <li><a href="#">数码</a></li> <li><a href="#">民生</a></li> <li><a href="#">影像</a></li> <li><a href="#">游记</a></li> <li><a href="#">心情随笔</a></li> </ul> <h3>控制面板</h3> <p class="control"> 你好,欢迎访问该网站!<br/> </p> <a href="#">登录后台</a> <a href="#">查看权限</a> <h3>搜索</h3> <form action="#" method="get" class="seatch"> <input type="text" name="keywords"/> <button type="submit">搜索</button> </form> <h3>最新留言</h3> <ul class="message"> <li> <span>张三</span> <p>哈哈哈</p> </li> <li> <span>张三</span> <p>哈哈哈</p> </li> <li> <span>张三</span> <p>哈哈哈</p> </li> <li> <span>张三</span> <p>哈哈哈</p> </li> </ul> <h3>热门文章</h3> <ul class="article"> <li> <a href="#">宝马五系100-120码高速方向盘抖动解决方案</a> <p> <span class="jishu">技术宅</span> <span class="yuedu">1107</span> </p> </li> <li> <a href="#">宝马五系100-120码高速方向盘抖动解决方案</a> <p> <span class="jishu">技术宅</span> <span class="yuedu">1107</span> </p> </li> <li> <a href="#">宝马五系100-120码高速方向盘抖动解决方案</a> <p> <span class="jishu">技术宅</span> <span class="yuedu">1107</span> </p> </li> <li> <a href="#">宝马五系100-120码高速方向盘抖动解决方案</a> <p> <span class="jishu">技术宅</span> <span class="yuedu">1107</span> </p> </li> <li> <a href="#">宝马五系100-120码高速方向盘抖动解决方案</a> <p> <span class="jishu">技术宅</span> <span class="yuedu">1107</span> </p> </li> <li> <a href="#">宝马五系100-120码高速方向盘抖动解决方案</a> <p> <span class="jishu">技术宅</span> <span class="yuedu">1107</span> </p> </li> </ul> <h3>标签列表</h3> <ul class="catelist"> <li><a href="#">互联网</a></li> <li><a href="#">好货推荐</a></li> <li><a href="#">技术宅</a></li> <li><a href="#">数码</a></li> <li><a href="#">民生</a></li> <li><a href="#">影像</a></li> <li><a href="#">游记</a></li> <li><a href="#">心情随笔</a></li> </ul> </aside> </section> <div class="afterbody"> <div> <p><strong>友情链接:</strong></p> </div> <a href="#">西华大学</a> <a href="#">西南大学</a> <a href="#">成都大学</a> <a href="#">四川大学</a> <a href="#">西华大学</a> </div> <footer> <p>个人博客网站</p> <p>版权所有,未经授权不得使用!</p> </footer> </body> </html>
二、CSS代码
@charset "utf-8"; /*初始化默认样式*/ body,h1,h2,h3,h4,h5,h6,form,ul,ol,dt,dd,p{margin: 0;padding: 0;} a:link,a:visited{color: #444444;text-decoration: none;} a:hover{color: #0000ff;} body{background:#f2f2f2;color:#666;} /*公共样式*/ .topnav>div,header>div,.banner>div{ width: 1200px; margin: 0 auto; } /*顶部工具条*/ .topnav{ background: #444444; color: #ddd; font: 12px/2em "微软雅黑", serif; } .topnav span{ float: right; } .topnav a{ color: #ddd; padding: 0 10px; } /*头部和导航*/ header{ background: #ffffff; line-height: 75px; font-size:15px; overflow: hidden; } header img{ float: left; } header a{ float: left; padding: 0 15px; } header form{ float: right; box-sizing: border-box; position: relative; } header form input:first-child{ width: 204px; height: 34px; border: 1px solid #eaeaea; background: #f5f5f5; } header form input:last-child{ position: absolute; top: 30px; right: 8px; } /*横幅*/ .banner{ background: #112211 url("../images/banner.jpg") no-repeat center top; height: 200px; color: #ffffff; } .banner>div{ padding-top: 50px; } .banner h1{ display: inline; } .banner a{ position: relative; top: -10px; font-size: 14px; color: #0000ff; } /*内容*/ .content{ width: 1200px; margin: 0 auto; padding-top: 15px; overflow: hidden; } /*左边栏*/ .content main{ width: 850px; float: left; } .content main img{ width: 206px; height: 166px; display: block; } .content main li>a{ float: left; padding-right: 15px; } .content main li{ list-style: none; overflow: hidden; border: 1px solid #dddddd; background: #ffffff; font-size:14px; margin-bottom: 15px; padding: 16px; } .content main h4{ font:bold 18px/2em 微软雅黑; overflow: hidden; } .content main .info{ margin: 10px 0; } .content main .info span{ background: url("../images/icon.png") no-repeat; padding-left: 16px; margin-right: 14px; } .content main .info .time{background-position: -5px -26px;} .content main .info .category{background-position: -5px -47px;} .content main .info .hits{background-position: -5px -92px;} .content main .info .comment{background-position: -5px -70px;} /*分页*/ .content main .pagination{ text-align: center; padding: 20px 0; } .content main .pagination>a{ background: #ffffff; padding: 12px 16px; border-radius: 6px; } .content main .pagination a:hover{ background:#00A7EA; color:#fff; } .content main .pagination a.on{ background:#00A7EA; color:#fff; } /*右边栏*/ .content aside{ width:300px; float:right; border:1px solid #ddd; background:#fff; padding:15px; } .content aside h3{ font:18px/3em 微软雅黑; border-bottom:1px solid #ddd; } .content aside .catelist{ list-style:none; overflow:hidden; padding-top:10px; } .content aside .catelist li{ float:left; width:146px; height:35px; line-height:35px; text-align:center; background:#f8f8f8; margin:2px; } .content aside .control{ padding-top: 10px; font-size: 14px; } .content aside .seatch{ margin: 15px 0px; border: 1px solid #dddddd; position: relative; } .content aside .seatch button{ width: 56px; height: 26px; position: absolute; right:2px; top: 2px; border: 0; background: #00A7EA; color: #ffffff; border-left: 2px solid #ffffff; } .content aside .seatch input{ width: 100%; box-sizing: border-box; height: 30px; background: #eeeeee; border: 2px solid #ffffff; } .content aside .message { list-style: none; font-size: 14px; } .content aside .message li{ overflow: hidden; padding: 15px 0; border-bottom: 1px dashed #dddddd; } .content aside .message span{ background: #00A7EA url("../images/icon.png") no-repeat right -136px; float: left; color: #ffffff; margin-right: 10px; padding: 1px 8px 1px 4px; } .content aside .article{ list-style: none; font-size: 14px; padding-top: 20px; } .content aside .article li>a{ background: url("../images/icon.png") no-repeat -1px -113px; padding-left: 16px; line-height: 3em; } .content aside .article li{ border-bottom: 1px dashed #66ffff; display: block; padding-bottom: 10px; } .content aside .article span{ background: url("../images/icon.png") no-repeat; padding-left: 16px; margin-right: 14px; } .content aside .article .jishu{ background-position: -5px -27px; } .content aside .article .yuedu{ background-position: -5px -92px; } .afterbody{ padding-top: 20px; overflow: hidden; font: 15px/2em "微软雅黑"; padding-left: 40%; } .afterbody>div{ float: left; } footer{ background: #ffffff; line-height: 2em; padding: 15px 0; } footer p{ text-align: center; }
三、样式效果图
--来自爱说爱笑,浑身骄傲,不哭不闹,无视嘲笑,我是小尾巴,我为自己代言。