一、布局参照模板
http://www.yangqq.com/web/24/
二、布局的html页面
<!doctype html> <html lang="zh-hans"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="stylesheet" href="css/animation.css"> <link rel="stylesheet" href="css/timelineBlog.css"> <title>个人博客模板</title> </head> <body> <header> <nav id="nav"> <ul class="nav-bar"> <li class="nav-menu"><a href="#">网站首页</a></li> <li class="nav-menu"><a href="#">个人博客模板</a></li> <li class="nav-menu"><a href="#">图书推荐</a></li> <li class="nav-menu active"><a href="#">网站建设</a></li> <li class="nav-menu "><a href="#">html5/css</a></li> <li class="nav-menu"><a href="#">技术探讨</a></li> <li class="nav-menu"><a href="#">慢生活</a></li> <li class="nav-menu"><a href="#">闲言碎语</a></li> <li class="nav-menu"><a href="#">JS实践</a></li> </ul> </nav> </header> <div class="main-body"> <div class="banner"> <figure> <img src="images/art.jpg" alt="banner-img"/> <figcaption> <h4> 渡人如渡己，渡已，亦是渡 </h4> <p> 当我们被误解时，会花很多时间去辩白。 但没有用，没人愿意听，大家习惯按自己的所闻、理解做出判别，每个人其实都很固执。与其努力且痛苦的试图扭转别人的评判，不如默默承受，给大家多一点时间和空间去了解。而我们省下辩解的功夫，去实现自身更久远的人生价值。其实，渡人如渡己，渡已，亦是渡人。 </p> </figcaption> </figure> <div class="mingpian"> <h2>我的名片</h2> <p>网名：DanceSmile | 即步非烟</p> <p>职业：Web前端设计师、网页设计</p> <p>电话：13662012345</p> <p>Email：dancesmiling@qq.com</p> <ul class="social-link"> <li><a href="/" class="talk" title="给我留言"></a></li> <li><a href="/" class="address" title="联系地址"></a></li> <li><a href="/" class="email" title="给我写信"></a></li> <li><a href="/" class="photos" title="生活照片"></a></li> <li><a href="/" class="heart" title="关注我"></a></li> </ul> </div> </div> <div class="bland"></div> <div class="main-content"> <ul class="ul-blogs"> <li class="blog-item"> <div class="blog-wrapper"> <div class="trigle"></div><!--三角形--> <div class="circle"></div><!--圆形--> <h4><a href="#">我希望我的爱情是这样的</a></h4> <div class="item-main"> <div class="img-wrapper"> <a href="#"><img src="images/s1.jpg" alt="article1"/></a> </div> <p> 我希望我的爱情是这样的，相濡以沫，举案齐眉，平淡如水。我在岁月中找到他，依靠他，将一生交付给他。做他的妻子，他孩子的母亲，为他做饭，洗衣服，缝一颗掉了的纽扣。然后，我们一起在时光中变老。 </p> </div> <ul class="blog-footer"> <li class="likes"><a href="#">10</a></li> <li class="comments"><a href="#">34</a></li> <li class="icon-time"><a href="#">2013-8-7</a></li> </ul> </div> </li> <li class="blog-item"> <div class="blog-wrapper"> <div class="trigle"></div><!--三角形--> <div class="circle"></div><!--圆形--> <h4><a href="#">我希望我的爱情是这样的</a></h4> <div class="item-main"> <div class="img-wrapper"> <a href="#"><img src="images/s1.jpg" alt="article1"/></a> </div> <p> 我希望我的爱情是这样的，相濡以沫，举案齐眉，平淡如水。我在岁月中找到他，依靠他，将一生交付给他。做他的妻子，他孩子的母亲，为他做饭，洗衣服，缝一颗掉了的纽扣。然后，我们一起在时光中变老。 </p> </div> <ul class="blog-footer"> <li class="likes"><a href="#">10</a></li> <li class="comments"><a href="#">34</a></li> <li class="icon-time"><a href="#">2013-8-7</a></li> </ul> </div> </li> <li class="blog-item"> <div class="blog-wrapper"> <div class="trigle"></div><!--三角形--> <div class="circle"></div><!--圆形--> <h4><a href="#">我希望我的爱情是这样的</a></h4> <div class="item-main"> <div class="img-wrapper"> <a href="#"><img src="images/s1.jpg" alt="article1"/></a> </div> <p> 我希望我的爱情是这样的，相濡以沫，举案齐眉，平淡如水。我在岁月中找到他，依靠他，将一生交付给他。做他的妻子，他孩子的母亲，为他做饭，洗衣服，缝一颗掉了的纽扣。然后，我们一起在时光中变老。 </p> </div> <ul class="blog-footer"> <li class="likes"><a href="#">10</a></li> <li class="comments"><a href="#">34</a></li> <li class="icon-time"><a href="#">2013-8-7</a></li> </ul> </div> </li> <li class="blog-item"> <div class="blog-wrapper"> <div class="trigle"></div><!--三角形--> <div class="circle"></div><!--圆形--> <h4><a href="#">我希望我的爱情是这样的</a></h4> <div class="item-main"> <div class="img-wrapper"> <a href="#"><img src="images/s1.jpg" alt="article1"/></a> </div> <p> 我希望我的爱情是这样的，相濡以沫，举案齐眉，平淡如水。我在岁月中找到他，依靠他，将一生交付给他。做他的妻子，他孩子的母亲，为他做饭，洗衣服，缝一颗掉了的纽扣。然后，我们一起在时光中变老。 </p> </div> <ul class="blog-footer"> <li class="likes"><a href="#">10</a></li> <li class="comments"><a href="#">34</a></li> <li class="icon-time"><a href="#">2013-8-7</a></li> </ul> </div> </li> <li class="blog-item"> <div class="blog-wrapper"> <div class="trigle"></div><!--三角形--> <div class="circle"></div><!--圆形--> <h4><a href="#">我希望我的爱情是这样的</a></h4> <div class="item-main"> <div class="img-wrapper"> <a href="#"><img src="images/s1.jpg" alt="article1"/></a> </div> <p> 我希望我的爱情是这样的，相濡以沫，举案齐眉，平淡如水。我在岁月中找到他，依靠他，将一生交付给他。做他的妻子，他孩子的母亲，为他做饭，洗衣服，缝一颗掉了的纽扣。然后，我们一起在时光中变老。 </p> </div> <ul class="blog-footer"> <li class="likes"><a href="#">10</a></li> <li class="comments"><a href="#">34</a></li> <li class="icon-time"><a href="#">2013-8-7</a></li> </ul> </div> </li> </ul> <aside> <div class="tuijian"> <h2>推荐文章</h2> <ol> <li><span><strong>1</strong></span><a href="/">有一种思念，是淡淡的幸福,一个心情一行文字</a></li> <li><span><strong>2</strong></span><a href="/">励志人生-要做一个潇洒的女人</a></li> <li><span><strong>3</strong></span><a href="/">女孩都有浪漫的小情怀——浪漫的求婚词</a></li> <li><span><strong>4</strong></span><a href="/">Green绿色小清新的夏天-个人博客模板</a></li> <li><span><strong>5</strong></span><a href="/">女生清新个人博客网站模板</a></li> <li><span><strong>6</strong></span><a href="/">Wedding-婚礼主题、情人节网站模板</a></li> <li><span><strong>7</strong></span><a href="/">Column 三栏布局 个人网站模板</a></li> <li><span><strong>8</strong></span><a href="/">时间煮雨-个人网站模板</a></li> <li><span><strong>9</strong></span><a href="/">花气袭人是酒香—个人网站模板</a></li> </ol> </div> <div class="topic"> <h2>图文并茂</h2> <ul class="ul-topic"> <li> <a href="#"> <img src="images/k01.jpg"/> <p>腐女不可怕，就害怕腐女会画画！</p> <p class="added">伤不起</p> </a> </li> <li> <a href="/"> <img src="images/k01.jpg"> <p>问前任，你还爱我吗？无限戳中泪点~</p> <p class="added">感兴趣</p> </a> </li> <li> <a href="/"> <img src="images/k01.jpg"> <p>世上所谓幸福，就是一个笨蛋遇到一个傻瓜。</p> <p class="added">喜欢</p> </a> </li> </ul> </div> <div class="clicks"> <h2>热门点击</h2> <ol> <li><span><a href="/">慢生活</336666></span><a href="/">有一种思念，是淡淡的幸福,一个心情一行文字</a></li> <li><span><a href="/">爱情美文</a></span><a href="/">励志人生-要做一个潇洒的女人</a></li> <li><span><a href="/">慢生活</a></span><a href="/">女孩都有浪漫的小情怀——浪漫的求婚词</a></li> <li><span><a href="/">博客模板</a></span><a href="/">Green绿色小清新的夏天-个人博客模板</a></li> <li><span><a href="/">女生个人博客</a></span><a href="/">女生清新个人博客网站模板</a></li> <li><span><a href="/">Wedding</a></span><a href="/">Wedding-婚礼主题、情人节网站模板</a></li> <li><span><a href="/">三栏布局</a></span><a href="/">Column 三栏布局 个人网站模板</a></li> <li><span><a href="/">个人网站模板</a></span><a href="/">时间煮雨-个人网站模板</a></li> <li><span><a href="/">古典风格</a></span><a href="/">花气袭人是酒香—个人网站模板</a></li> </ol> </div> <div class="search"> <form class="search-form" method="post" action="#"> <input type="text" value="Search" onfocus="this.value=''" onblur="this.value='Search'"/> </form> </div> <div class="video"> <img src="images/artwork.png"/> <p>南方姑娘</p> <p>歌手：赵磊</p> <p>所属专辑《赵小磊》</p> <p><a href="#">喜欢</a></p> <p class="video-player"> <audio src="#" controls></audio> </p> </div> </div> </aside> </div> </div> <footer> <div class="footer-content"> <div class="links"> <h2>友情链接</h2> <ul> <li><a href="/">杨青个人博客</a></li> <li><a href="http://www.3dst.com">3DST技术服务中心</a></li> </ul> </div> <div class="comments"> <h2>最新评论</h2> <dl> <dt><img src="images/s8.jpg"> </dt> <dd>DanceSmile <time>49分钟前</time> </dd> <dd>在 <a href="http://www.yangqq.com/jstt/bj/2013-07-28/530.html" class="title">如果要学习web前端开发，需要学习什么？ </a>中评论：</dd> <dd>文章非常详细，我很喜欢.前端的工程师很少，我记得几年前yahoo花高薪招聘前端也招不到</dd> </dl> <dl> <dt><img src="images/s8.jpg"> </dt> <dd>yisa <time>2小时前</time> </dd> <dd>在 <a href="http://www.yangqq.com/news/s/2013-07-31/533.html" class="title">芭蕾女孩的心事儿</a>中评论：</dd> <dd>我手机里面也有这样一个号码存在</dd> </dl> <dl> <dt><img src="images/s8.jpg"> </dt> <dd>小林博客 <time>8月7日</time> </dd> <dd>在 <a href="http://www.yangqq.com/jstt/bj/2013-06-18/285.html" class="title">如果个人博客网站再没有价值，你还会坚持吗？ </a>中评论：</dd> <dd>博客色彩丰富，很是好看</dd> </dl> </div> <div class="photos"> <h2>摄影作品</h2> <ul> <li><a href="/"><img src="images/01.jpg"></a></li> <li><a href="/"><img src="images/01.jpg"></a></li> <li><a href="/"><img src="images/01.jpg"></a></li> <li><a href="/"><img src="images/01.jpg"></a></li> <li><a href="/"><img src="images/01.jpg"></a></li> <li><a href="/"><img src="images/01.jpg"></a></li> <li><a href="/"><img src="images/01.jpg"></a></li> <li><a href="/"><img src="images/01.jpg"></a></li> <li><a href="/"><img src="images/01.jpg"></a></li> </ul> </div> </div> <div class="footer-bottom"> <p>Copyright 2013 Design by <a href="#">DanceSmile</a></p> </div> </footer> <script src="js/jquery-2.1.4.min.js"></script> </body>
三、布局的css代码
/*Css Document*/ * { margin:0; padding:0; } *,*:before,*:after{ box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */ } body{ font:12px "宋体"; background-color:#333; color:#3F3E3C; line-height:1.5; } img{ border:0; vertical-align:middle; } h1,h2,h3,h4,h5,h6{ font-weight:normal; } h1{ font:24px "微软雅黑"; } p{ word-wrap:break-word; } ul,ol{ list-style:none; margin:0; padding:0; } dl,dt,dd{ margin:0; padding:0; } a{ color:#a6a6a6; text-decoration:none; transition:all 1s ease; } a:hover{ color:#fff; } .clear:after{ content:""; display:table; clear:both; } .clear{ zoom:1; } /*用来清除浮动*/ .blank { height: 5px; overflow: hidden; 100%; margin: auto; clear: both } /*nav导航*/ header{ margin-top:30px; 100%; background-color:#222; height:70px; line-height:70px; border-bottom:1px solid #464647; } nav>ul{ 1000px; margin:0 auto; /*保证各个菜单处于居中状态*/ text-align:center; } nav>ul li{ display:inline-block; } nav>ul li>a{ color:#e7e7e7; display:block; padding:0 20px; /*使用这个来控制高度，就可以不用使用padding-top*/ line-height:40px; font-size:12px; } nav>ul li>a:hover, nav>ul li.active>a{ color:#fff; border-radius:6px; background-color:rgba(20,20,20,0.8); box-shadow: 0px 1px 0px rgba(255,255,255,.1), inset 0px 1px 1px rgba(0,0,0,.7); } .main-body{ 100%; overflow:hidden; border-top:1px solid #000; } /*第一部分的图片和名片*/ .banner{ 1000px; margin:30px auto; overflow:hidden; margin-top:30px; position:relative; } /*图片部分*/ .banner figure{ 630px; height:250px; position:relative; float:left; margin:0; position:relative; -webkit-animation:pageTop 6s ease backwards; } .banner figure>figcaption{ position:absolute; top:20%; left:0; right:0; bottom:20%; color:white; background-color:rgba(153,153,153,.8); padding:20px; opacity:0; transition:all 1s ease; } .banner figure>figcaption>h4{ font-weight:bold; } .banner figure:hover>figcaption{ opacity:1; } /*名片部分*/ .mingpian{ background-color:#222; box-shadow: 0px 1px 0px rgba(255,255,255,.1), inset 0px 1px 1px rgba(0,0,0,.7); border-radius:6px; 350px; float:right; height:248px; overflow:hidden; } .mingpian h2{ margin-left:10px; margin-top:15px; margin-bottom:15px; font-size:2.1em; font-weight:bold; } .mingpian p{ color:#89919a; line-height:2.1; margin-left:45px; -webkit-animation:blink 3s ease backwards; } .mingpian ul.social-link{ text-align:center; margin:15px 0 0 15px; } .mingpian ul.social-link li{ display:inline-block; margin-right:5px; } .mingpian ul.social-link li a{ display:block; border-radius:59%; background-color:pink; 50px; height:50px; box-shadow: 0px 1px 0px rgba(255,255,255,.1), inset 0px 1px 1px rgba(0,0,0,.7); } /*博客区域*/ .main-content{ 1000px; margin:40px auto; } .ul-blogs{ 666px; float:left; position:relative; } .ul-blogs:before{ 2px; content:""; position:absolute; top:0; bottom:0; right:0; background-color:#000; } .blog-wrapper{ margin-bottom:40px; position:relative; 630px; background-color:#222; border-radius:6px; box-shadow:0px 1px 0px rgba(255,255,255,.1), inset 0px 1px 1px rgba(0,0,0,.7); } /*三角形*/ .trigle{ position:absolute; right:0; margin-right:-20px; top:20px; border-style:solid; border-0 0 20px 22px; border-color:transparent transparent transparent #111; } /*圆形*/ .circle{ position:absolute; top:15px; right:0; margin-right:-40px; 12px; height:12px; border:2px solid #333; border-radius:50%; background-color:#111; } .circle:hover{ border:2px solid #B9B9B9; } li.blog-item h4{ padding:0 0 0 20px; font-size:16px; font-family:"微软雅黑"; line-height:40px; height:40px; } li.blog-item h4>a:hover{ padding-left:20px; } .blog-item .item-main{ padding:10px 20px 60px 20px; } .item-main img{ 150px; height:120px; transition:all 1s ease; } .item-main img:hover{ opacity:0.6; } .item-main .img-wrapper{ float:left; } .item-main p{ padding-left:170px; color:#a6a6a6; font-size:12px; line-height:28px; } ul.blog-footer{ clear:both; background-color:#000; overflow:hidden; border-bottom-left-radius:6px; border-bottom-right-radius:6px; } ul.blog-footer li{ display:inline-block; } ul.blog-footer li>a{ display:block; height:20px; line-height:20px; padding:0 10px; } ul.blog-footer li:first-child{ float:right; } ul.blog-footer li:second-child{ float:right; } /*侧边栏部分*/ aside{ 310px; float:right; } aside h2, footer h2 { font-size: 16px; margin-bottom: 10px; text-shadow: #000 1px 1px 1px; color: #ccc } aside>div{ box-shadow: 0px 1px 0px rgba(255,255,255,.1), inset 0px 1px 1px rgba(0,0,0,.7); border-radius: 6px; padding: 15px; background: #222; margin-bottom: 20px; overflow: hidden; } .tuijian li{ white-space:nowrap; text-overflow:ellipsis; overflow:hidden; } .tuijian li span:before{ content:"0"; } .tuijian li span{ margin-right:10px; font-size:14px; font-family:"微软雅黑"; } .tuijian li:nth-child(-n+3) span{ 39px; color:#999; } .tuijian li:nth-child(-n+3) strong{ font-size:24px; font-weight:normal; } .tuijian li:first-child span{ color:#f8490b; } .tuijian li:nth-child(n+3){ line-height:24px; } .tuijian li:nth-child(4){ margin-top:5px; } .tuijian li a:hover{ padding-left:20px; } /*图文并茂*/ .ul-topic>li>a{ display:block; } .ul-topic>li{ overflow:hidden; margin-bottom:15px; } .ul-topic>li:last-child{ margin-bottom:0; } .ul-topic{ overflow:hidden; } .topic img{ float:left; } .topic p{ padding-left:93px; } .topic p.added{ color:#B5783E; margin-top:10px; } /*热门点击*/ .clicks span:before{ content:"【"; margin-right:5px; } .clicks span:after{ content:"】"; margin-left:5px; } .clicks span{ color:#3F3E3C; } .clicks span a{ color:#336666; } .clicks a:hover{ text-decoration:underline; } .clicks li{ white-space:nowrap; text-overflow:ellipsis; overflow:hidden; line-height:24px; } /*搜索框*/ .search { text-align:center; padding:25px 30px; } .search input{ display:block; background-color:#191919; line-height:26px; color:#a6a6a6; border:1px solid #111; 100%; } /*音频播放*/ .video img{ 95px; height:90px; float:left; } .video p:not(:last-child){ padding-left:115px; line-height:24px; color:#B9B9B9; } .video .video-player{ overflow:hidden; 100%; } .video audio{ margin-top:20px; 100%; } .video a{ color:B5783E; } .video a:hover{ text-decoration:underline; } /*页脚部分*/ footer{ margin-top:10px; background-color:#1D1D1D; overflow:hidden; } footer .footer-content{ 1000px; margin:0 auto; overflow:hidden; padding:15px; } footer .links{ 200px; overflow:hidden; float:left; line-height:25px; } footer .comments{ 410px; float:left; } footer .comments dl>dt{ float:left; } footer .comments dl{ overflow:hidden; clear:left; margin-bottom:15px; } footer .comments dl>dt>img{ 70px; height:70px; } footer .comments dl>dd{ padding-left:10px; line-height:2; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; } footer .comments time{ color:#006666; } footer .comments dl>dd:last-child{ color:#6A9150; } footer .photos{ 250px; text-align:center; float:right; } footer .photos>ul>li{ display:inline-block; margin-right:3px; margin-bottom:10px; } footer .photos img{ 70px; height:70px; } .footer-bottom{ clear:both; background-color:#000; } footer .footer-bottom p{ 1000px; margin:0 auto; padding:10px 5px; }
四、相关动画的css定义
/*图片向上翻转的动画效果*/ @-webkit-keyframes pageTop { 0% { opacity: 0; -webkit-transform: perspective(400px) rotateX(90deg); } 100% { opacity: 1; -webkit-transform: perspective(400px) rotateX(0deg); } } /*文字的闪烁效果*/ @-webkit-keyframes blink{ 0%{ opacity:0; }40%{ opacity:.3; }50%{ opacity:.8; }55%{ opacity:.3; }60%{ opacity:.8; }100%{ opacity:0; } }
五、该案例知识点总结
1，导航条的实现（line-height取代padding-top,padding-bottom）
2,图像的翻转动画
3，文字的闪烁动画
4，带箭头和圆点的div的实现（箭头可以是完整的三角，半三角；利用和背景相同的border实现圆角周围的间隙效果）；
5，ul：before实现一条竖线
6，hover时候改变padding，opacity等实现动画效果
7，长文本的单行文字效果
8，特殊选择器的使用,nth-child(-n+3)
9,audio组件的使用
10，dl，dt，dd组件的使用