第一次做项目，效果还不错，哈哈。生命不息，折腾不止！努力不一定有好的结果，不努力肯定没有结果，年轻就是奋斗的资本，别让以后的自己后悔。这里要感谢师傅小虫巨蟹，谢谢他老人家一直以来对我的鼓励与教导，还要感谢腾讯课堂给了我了十天前端训练营的名额，十天让我学到了许多知识，希望还能有机会参加以后的训练营。
效果图
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>迥陌的博客</title>
<link rel="stylesheet" href="css/global.css">
</head>
<body>
<div id="header">
<img src="images/logo.jpg" alt="logo">
<p>生命不息，折腾不止！努力不一定有好的结果，不努力肯定没有结果，年轻就是奋斗的资本，别让以后的自己后悔。</p>
</div>
<div id="nav">
<ul>
<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>
<div class="clear"></div>
</ul>
</div>
<!--content start-->
<div id="content">
<!--left-->
<div class="left" id="c_left">
<div class="s_tuijian">
<h2>文章<span>推荐</span></h2>
</div>
<div class="content_text">
<!--wz-->
<div class="wz">
<h3><a href="#" title="浅谈：html5和html的区别">浅谈：HTML5未来行业发展方向</a></h3>
<dl>
<dt><img src="images/s.jpg" width="200" height="123" alt=""></dt>
<dd>
<p class="dd_text_1">HTML5作为一个火遍了2016年互联网的网红，前方无疑是开阔而平坦的大道。那么HTML5未来主要会应用在哪些方向上呢？在智能手机和平板电脑爆炸的今天，移动端明显干掉了PC端成为主流，所以无论开发什么，必定是移动先行.....</p>
<p class="dd_text_2">
<span class="left author">迥陌</span><span class="left sj">时间:2017-4-18</span>
<span class="left fl">分类:<a href="#" title="学无止境">学无止境</a></span><span class="left yd"><a href="#" title="阅读全文">阅读全文</a>
</span>
<div class="clear"></div>
</p>
</dd>
<div class="clear"></div>
</dl>
</div>
<!--wz end-->
<!--wz-->
<div class="wz">
<h3><a href="#" title="浅谈：html5和html的区别">浅谈：HTML5中的meta标签到底是什么</a></h3>
<dl>
<dt><img src="images/s1.jpg" width="200" height="123" alt=""></dt>
<dd>
<p class="dd_text_1">做响应式网站的时候，我们经常看到什么HTML5黑科技，独特的meta标签独得搜索引擎喜爱，收录快之类的宣传语，不少用户都是云里雾里。其实这个HTML5中的meta标签到底是何方神圣，为什么直接影响网站优化？今天给大家解答一下。Meta标签用来描述一个HTML网页文档的属性.....</p>
<p class="dd_text_2">
<span class="left author">迥陌</span><span class="left sj">时间:2017-4-19</span>
<span class="left fl">分类:<a href="#" title="学无止境">前端相关</a></span><span class="left yd"><a href="#" title="阅读全文">阅读全文</a>
</span>
<div class="clear"></div>
</p>
</dd>
<div class="clear"></div>
</dl>
</div>
<!--wz end-->
<!--wz-->
<div class="wz">
<h3><a href="#" title="浅谈：html5和html的区别">浅谈：响应式设计是啥？凭啥这么火爆？</a></h3>
<dl>
<dt><img src="images/s2.jpg" width="200" height="123" alt=""></dt>
<dd>
<p class="dd_text_1">响应式网页设计这个概率早在2010年就由著名网页设计师Ethan Marcotte提出了，经过几年的发展，响应式已经席卷前端和设计领域成为人们建站的首选，那么响应式网站到底有啥魅力，让它这么火爆呢？响应式网站通俗的来说就是可跨屏浏览，多终端自适应.....</p>
<p class="dd_text_2">
<span class="left author">迥陌</span><span class="left sj">时间:2017-4-20</span>
<span class="left fl">分类:<a href="#" title="学无止境">学无止境</a></span><span class="left yd"><a href="#" title="阅读全文">阅读全文</a>
</span>
<div class="clear"></div>
</p>
</dd>
<div class="clear"></div>
</dl>
</div>
<!--wz end-->
<!--wz-->
<div class="wz">
<h3><a href="#" title="浅谈：html5和html的区别">浅谈：前端页面渲染机制</a></h3>
<dl>
<dt><img src="images/s3.jpg" width="200" height="123" alt=""></dt>
<dd>
<p class="dd_text_1">作为一个前端开发，最常见的运行环境应该是浏览器吧，为了更好的通过浏览器把优秀的产品带给用户，也为了更好的发展自己的前端职业之路，有必要了解从我们在浏览器地址栏输入网址到看到页面这期间浏览器是如何进行工作的,进而了解如何更好的.....</p>
<p class="dd_text_2">
<span class="left author">迥陌</span><span class="left sj">时间:2017-4-21</span>
<span class="left fl">分类:<a href="#" title="学无止境">前端相关</a></span><span class="left yd"><a href="#" title="阅读全文">阅读全文</a>
</span>
<div class="clear"></div>
</p>
</dd>
<div class="clear"></div>
</dl>
</div>
<!--wz end-->
<!--wz-->
<div class="wz">
<h3><a href="#" title="浅谈：html5和html的区别">浅谈：Web前端如何优雅的切图</a></h3>
<dl>
<dt><img src="images/s4.jpg" width="200" height="123" alt=""></dt>
<dd>
<p class="dd_text_1">提起切图，想起一则比较尴尬的事情，15年初在博主刚毕业第一份工作的面试中，面试官问我：“你平时切图都用什么软件？”，耿直的我以为他是问我用什么软件切片，遂回答photoshop。后面才明白，在我所在这个城市的前端圈里，切图指的就是将设计稿.....</p>
<p class="dd_text_2">
<span class="left author">迥陌</span><span class="left sj">时间:2017-4-22</span>
<span class="left fl">分类:<a href="#" title="学无止境">学无止境</a></span><span class="left yd"><a href="#" title="阅读全文">阅读全文</a>
</span>
<div class="clear"></div>
</p>
</dd>
<div class="clear"></div>
</dl>
</div>
<!--wz end-->
</div>
</div>
<!--left end-->
<!--right-->
<div class="right" id="c_right">
<div class="s_about">
<h2>关于博主</h2>
<img src="images/my.jpg" width="230" height="230" alt="博主"/>
<p>博主：迥陌</p>
<p>职业：web前端</p>
<p>座右铭：生活不止眼前的苟且，还有诗和远方！</p>
<p>
<a href="#" title="联系博主"><span class="left b_1"></span></a><a href="#" title="加入QQ群，一起学习！"><span class="left b_2"></span></a>
<div class="clear"></div>
</p>
</div>
<!--栏目分类-->
<div class="lanmubox">
<div class="hd">
<ul><li>精心推荐</li><li>最新文章</li><li class="hd_3">热门文章</li></ul>
</div>
<div class="bd">
<ul>
<li><a href="#" title="我们的网络在移动端的发展前景">
我们的网络在移动端的发展前景</a></li>
<li><a href="#" title="关于响应式布局">关于响应式布局</a></li>
<li><a href="#" title="如何创建个人博客网站">如何创建个人博客网站</a></li>
<li><a href="#" title="前端-HTML面试题">前端-HTML面试题</a></li>
<li><a href="#" title="为什么新站前期排名老是浮动？(转)">为什么新站前期排名老是浮动？(转)</a></li>
</ul>
<ul>
<li><a href="#" title="10道典型的JavaScript面试题">10道典型的JavaScript面试题</a></li>
<li><a href="#" title="web前端设计排版技巧">web前端设计排版技巧</a></li>
<li><a href="#" title="前端css3那些事">前端css3那些事</a></li>
<li><a href="#" title="零基础想学习HTML5技术从何学起">零基础想学习HTML5技术从何学起</a></li>
<li><a href="#" title="解密HTML5未来行业发展方向">解密HTML5未来行业发展方向</a></li>
</ul>
<ul>
<li><a href="#" title="web前端开发学习技划">web前端开发学习技划</a></li>
<li><a href="#" title="2017年大前端发展趋势">2017年大前端发展趋势</a></li>
<li><a href="#" title="2017年，前端开发市场饱和了吗？">2017年，前端开发市场饱和了吗？</a></li>
<li><a href="#" title="web前端的学习建议">web前端的学习建议</a></li>
<li><a href="#" title="优雅地进行移动端开发">优雅地进行移动端开发</a></li>
</ul>
</div>
</div>
<!--end-->
<div class="link">
<h2>友情链接</h2>
<p><a href="http://www.jianshu.com/u/36cbbf82a6a7">迥陌个人简书</a></p>
</div>
</div>
<!--right end-->
<div class="clear"></div>
</div>
<!--content end-->
<!--footer start-->
<div id="footer">
<p>© 2017<a href="http://www.jianshu.com/u/36cbbf82a6a7" target="_blank">迥陌</a>. All Rights Reserved.</p>
</div>
<!--footer end-->
</body>
</html>CSS代码
@charset "utf-8";
*{margin:0; padding:0px;}
body{
font-size:14px;
font-family:"微软雅黑";
background: #E3E3E5 url(../images/bg.jpg) 50% top scroll no-repeat;
color:#5d5d5d;
}
a{text-decoration:none;}
.left{float:left;}
.right{float:right;}
.clear{clear:both;}
li{list-style:none;}
img{display:block;border:0px;}
/*hearder*/
#header{width:1000px; margin:0 auto;}
#header img{width: 160px; margin:10px 0px 0px 0px; }
#header p{font-size:18px; color:#DB5E5E; font-weight:500;}
/*nav*/
#nav{width:1000px; margin:20px auto; }
#nav ul li{width:140px; height:30px; line-height:30px; float:left; text-align:center; margin:0px 2px 0px 0px;}
#nav ul li a{color:#506F70; font-size:16px; width:140px; height:30px; display:block;}
#nav ul li a:hover{display:block; width:140px; height:30px; background:#829696; border-radius:3px; color:#fff;}
/*c_left*/
#content{width:1000px;margin:5px auto;}
#c_left{width:730px; background:#fff;border-radius:1px;}
#c_left .s_tuijian{width:710px;height:68px;margin-left:10px;background:url("../images/r_line.jpg") bottom left repeat-x;}
.s_tuijian h2{width:650px;height:37px;background:url("../images/tj.png") no-repeat;padding:20px 0px 5px 60px;
color:#D242DF;font-size:18px;margin-left:5px;}
.s_tuijian h2 span{color:#3798A5;padding-left:3px;}
/*文章*/
#c_left .content_text{width:730px;margin-top:5px;}
#c_left .content_text .wz{width:725px;margin:5px 0px 10px 0px;color:#1D1A1A;}
.wz h3{width:400px;height:30px;overflow:hidden;line-height:30px;font-size:17px;font-weight:500;padding-left:5px;color:#325EBD;}
.wz h3 a{color:#D3535D;}
.wz h3:hover{padding-left:20px; transition: all 0.5s;-webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s;}
.wz dl{width:730px;margin-top:3px;}
.wz dl dt{float:left;width:204px;height:127px;margin-left:5px;display:block;border:1px solid #ccc;}
.wz dl dt img{padding:2px;}
.wz dl dd{float:left;width:505px;overflow:hidden;margin-left:5px;}
.wz dl dd .dd_text_1{line-height: 25px; display:block;overflow:hidden;}
.wz dl dd .dd_text_2{line-height:30px;margin-top:10px;}
.wz dl dd .dd_text_2 span{padding-left:15px;}
.wz dl dd .dd_text_2 .author{display:block;width:60px;height:30px;
background:url("../images/tx.jpg") 5px 7px no-repeat;padding-left:25px;margin-left:20px;}
.wz dl dd .dd_text_2 .sj{display:block;width:120px;height:30px;
background:url("../images/sj.jpg") 5px 7px no-repeat;padding-left:25px;}
.wz dl dd .dd_text_2 .fl{display:block;width:110px;heigt:30px;text-align:center;}
.wz dl dd .dd_text_2 .fl a{color:#1D1718;}
.wz dl dd .dd_text_2 .yd{display:block;width:110px;height:30px;text-align:center;margin-top:3px;}
.wz dl dd .dd_text_2 .yd a{color:#F55522;display:block;width:80px;height:22px;line-height:22px;
text-align:center;padddding:2px 5px;border:1px solid #AC9696;border-radius:2px;}
.wz dl dd .dd_text_2 .yd a:hover{color:#f36;}
/*right*/
#c_right{width:260px;}
#c_right .s_about{width:260px;border:1px solid #ccc;background:#fff;}
#c_right .s_about h2{width:230px;margin:0 auto;font-size:16px;color:#333;padding:10px 0px 3px 10px;border-bottom:1px solid #555;}
#c_right .s_about img{margin:0 auto;margin:10px 0px 0px 15px; }
#c_right .s_about p{padding-left:30px;}
#c_right .s_about p .b_1{display:block;width:93px;height:30px; background:url("../images/qq_bg.png") no-repeat;}
#c_right .s_about p .b_2{margin-left:20px;display:block;width:97px;height:25px; background:url("../images/qq_bg.png") -93px 0 no-repeat;}
/*随机、最新文章*/
#c_right .lanmubox{width:260px;height:180px;border:1px solid #ccc;margin-top:5px;background:#fff;}
.lanmubox .hd{width:260px;height:30px;border-bottom:1px solid #ddd;}
.lanmubox .hd ul li{float:left;width:85px;height:30px;line-height:30px;text-align:center; cursor:pointer; }
.lanmubox .hd .hd_3{width:88px;}
.lanmubox .hd ul li.on{height:30px;background:#fff;border:1px solid #ccc;border-bottom:2px solid #fff;border-top:1px solid #f00;}
.lanmubox .bd{width:260px;height:145px;zoom:1;background:url("../images/list.png") 5px 5px no-repeat;overflow:hidden;}
.lanmubox .bd ul li{width:230px;padding-left:25px;height:29px;line-height:29px;}
.lanmubox .bd ul li:hover{padding-left:35px;transition: all 0.5s;-webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s;}
.lanmubox .bd ul li a{color:#444;font-size:14px;}
.lanmubox .bd ul li a:hover{color:#f00;}
/*link*/
#c_right .link{width:260px;height:180px;border:1px solid #ccc;margin-top:5px;background:#fff;}
.link h2{font-size:16px;color:#444;padding:5px 0px 2px 5px;border-bottom:1px solid red;}
.link p{padding:10px 0px 0px 15px;}
.link p a{color:#444;}
.link p a:hover{color:#f00;}
/*right end*/
/*content end*/
#footer{width:1000px;height:50px;margin:10px auto;border-top:1px solid #ccc;}
#footer p{text-align:center;font-size:14px;color:#231C25;}
#footer p a{color:#231C25;}
扫一扫
157
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
