Demo-2（豆瓣）

最近的时间都拿来练习吧
这一个页面有个关于定位和浏览器的问题有点弄不清楚
就是nav设置最小宽度与主体内容宽度等宽（与豆瓣小组相同），希望右侧的标签不会跟随浏览器宽度变窄而向左，始终靠右保持在nav的最小宽度里面，但是没能实现，有点昏…

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><link rel="stylesheet" href="style.css"/><title>豆瓣</title>
</head>
<body>
<header><!--顶部head--><div class="link"><ul class="left"><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="#">FM</a></li><li><a href="#">东西</a></li><li><a href="#">市集</a></li><li><a href="#">更多</a></li></ul><ul class="right"><li class="code"><a href="#">下载豆瓣客户端</a><div class="code-box"><img src="pic/db-logo.jpg" alt="db-logo" class="db-logo"/><h1>豆瓣</h1><p>我们的精神角落</p><img src="pic/erweima.png" alt="erweima" class="erweima"/><a href="#">iPhone</a><p>·</p><a href="#">Android</a></div></li><li><a href="#">提醒</a></li><li><a href="#">豆邮</a></li></ul><div class="code"></div></div><!--常规head 包含搜索框--><nav><div class="bg"><div class="head"><ul><li><a href="#"><img src="pic/logo.png" alt="logo"/></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><input type="text" placeholder="搜索你感兴趣的内容和人..."/><a href="#" class="search"><i></i></a></li></ul></div></div></nav>
</header>
<div class="clear"></div>
<div class="content"><!--左侧内容--><div class="contentL"><!--内容发布标签--><div class="share"><ul><li><a href="#"><i></i> 说句话</a></li><li><a href="#"><i></i> 发照片</a></li><li><a href="#"><i></i> 推荐网页</a></li><li><a href="#"><i></i> 写日记</a></li><li><a href="#"><i></i> 发布东西</a></li><li><!--<i></i>--><a href="#"><i></i> 首页设置</a></li></ul><div class="clear"></div><div class="input"><input type="text" placeholder="分享生活点滴..."/><a href="#"><i class="photo"></i></a><a href="#"><i class="sharp"></i></a></div></div><!--主要内容-已发布--><div class="news"><div class="userhead"><a href="#"><i></i></a></div><div class="box"><div class="username"><a href="#">Violet 的日记:</a></div><div class="article"><div class="text"><h2><a href="#">怪力八面体——胡夫金字塔</a></h2><p>前几天看到有人在广播里发了这个，搜了一下似乎也没有人针对这个写过文，我就斗胆先写一个吧，因为觉得这件事针对很好玩。。。吉萨的三座大金字塔里，有一座是一个八面体。这个八面金字塔...</p><a href="#" class="like"><i></i> 喜欢</a></div><div class="pic"><img src="pic/picture.jpg" alt=""/></div></div><div class="from"><p>一小时前，来自 <a href="#">精选热门</a></p></div></div></div><div class="news"><div class="userhead"><a href="#"><i></i></a></div><div class="box"><div class="username"><a href="#">Violet 的日记:</a></div><div class="article"><div class="text"><h2><a href="#">怪力八面体——胡夫金字塔</a></h2><p>前几天看到有人在广播里发了这个，搜了一下似乎也没有人针对这个写过文，我就斗胆先写一个吧，因为觉得这件事针对很好玩。。。吉萨的三座大金字塔里，有一座是一个八面体。这个八面金字塔...</p><a href="#" class="like"><i></i> 喜欢</a></div><div class="pic"><img src="pic/picture.jpg" alt=""/></div></div><div class="from"><p>一小时前，来自 <a href="#">精选热门</a></p></div></div></div><div class="news"><div class="userhead"><a href="#"><i></i></a></div><div class="box"><div class="username"><a href="#">Violet 的日记:</a></div><div class="article"><div class="text"><h2><a href="#">怪力八面体——胡夫金字塔</a></h2><p>前几天看到有人在广播里发了这个，搜了一下似乎也没有人针对这个写过文，我就斗胆先写一个吧，因为觉得这件事针对很好玩。。。吉萨的三座大金字塔里，有一座是一个八面体。这个八面金字塔...</p><a href="#" class="like"><i></i> 喜欢</a></div><div class="pic"><img src="pic/picture.jpg" alt=""/></div></div><div class="from"><p>一小时前，来自 <a href="#">精选热门</a></p></div></div></div><div class="news"><div class="userhead"><a href="#"><i></i></a></div><div class="box"><div class="username"><a href="#">Violet 的日记:</a></div><div class="article"><div class="text"><h2><a href="#">怪力八面体——胡夫金字塔</a></h2><p>前几天看到有人在广播里发了这个，搜了一下似乎也没有人针对这个写过文，我就斗胆先写一个吧，因为觉得这件事针对很好玩。。。吉萨的三座大金字塔里，有一座是一个八面体。这个八面金字塔...</p><a href="#" class="like"><i></i> 喜欢</a></div><div class="pic"><img src="pic/picture.jpg" alt=""/></div></div><div class="from"><p>一小时前，来自 <a href="#">精选热门</a></p></div></div></div><div class="news"><div class="userhead"><a href="#"><i></i></a></div><div class="box"><div class="username"><a href="#">Violet 的日记:</a></div><div class="article"><div class="text"><h2><a href="#">怪力八面体——胡夫金字塔</a></h2><p>前几天看到有人在广播里发了这个，搜了一下似乎也没有人针对这个写过文，我就斗胆先写一个吧，因为觉得这件事针对很好玩。。。吉萨的三座大金字塔里，有一座是一个八面体。这个八面金字塔...</p><a href="#" class="like"><i></i> 喜欢</a></div><div class="pic"><img src="pic/picture.jpg" alt=""/></div></div><div class="from"><p>一小时前，来自 <a href="#">精选热门</a></p></div></div></div><!--翻页-页码--><div class="pages"><ul><li><a href="#">＜前页</a></li><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">6</a></li><li><a href="#">7</a></li><li><a href="#">8</a></li><li><a href="#">9</a></li><li><a href="#">...</a></li><li><a href="#">后页＞</a></li></ul></div></div><!--右侧内容--><div class="contentR"><div class="first"><h2>豆瓣正在发生······</h2><a href="#">哈利·波特第八部全球同步上架</a><a href="#">China Joy优秀游戏鉴赏</a></div><div class="second"><img src="pic/news.jpg" alt=""/><a href="#">>申请创建小站</a><img src="pic/code.png" alt=""/></div><div class="third"><div><h2>热门活动······</h2><span>（<a href="#">换一个</a>）</span></div><div class="hd"><a href="#">给我看看你们的美好工作台吧~</a><p>时间：6月27日-8月26日</p><p>参加：266人参加</p><div class="hd-p"></div></div><a href="#" class="hd-a">>更多线上活动</a></div><div class="fourth"><div><h2>豆瓣一拍一······</h2><span>（<a href="#">换一个</a>）</span></div><div><div class="nice"></div><div class="fourth-t"><a href="#">很高兴遇见你</a><p>城市：厦门</p><p>价格：2400</p></div></div><div><div class="wei"></div><div class="fourth-t"><a href="#">微套系 | 至真系列</a><p>城市：北京</p><p>价格：1480</p></div></div><div class="clear"></div><a href="#">>已开发17个城市</a></div><div class="fifth"><img src="pic/news.jpg" alt=""/></div></div>
</div>
<div class="clear"></div>
<footer><div class="about"><ul class="copyright"><li><p>&copy; 2005 - 2016 douban.com,all rights reserved 北京豆网科技有限公司</p></li></ul><ul class="other"><li><a href="#">关于豆瓣</a></li><li><span>·</span><a href="#">在豆瓣工作</a></li><li><span>·</span><a href="#">联系我们</a></li><li><span>·</span><a href="#">免责声明</a></li><li><span>·</span><a href="#">帮助中心</a></li><li><span>·</span><a href="#">移动应用</a></li><li><span>·</span><a href="#">豆瓣广告</a></li></ul></div>
</footer></body>
</html>

*{padding: 0;margin: 0;font-family: Arial, "Microsoft Yahei";
}
ul li{list-style: none;
}
a{text-decoration: none;
}
input{outline: none;border: 1px solid #e5e5e5;
}
.clear{clear: both;
}header .link{width: auto;background: #545454;overflow: hidden;
}
header .left{float: left;
}
header .right{float: right;position: absolute;right: 0;
}
header ul li{float: left;
}
header .link a{font-size: 12px;/*font-weight: bold;*/line-height: 28px;color: #e5e5e5;padding: 0 12px;
}
header .link a:hover{color: #ffffff;
}
header .code-box{display: none;width: 248px;height: 500px;border: 1px solid #e5e5e5;border-top: none;background-color: #fff;text-align: center;
}
.code:hover .code-box{position: absolute;display: block;left: -71px;z-index: 2;
}
.code-box .db-logo{display: block;width: 110px;margin: 60px auto 0;
}
.code-box .erweima{display: block;width: 172px;margin: 12px auto 0;
}
.link .code-box h1{font-weight: lighter;font-size: 24px;margin-top: 20px;
}
.link .code-box a{color: #3377bb;padding: 0;font-size: 12px;line-height: 32px;
}
.link .code-box p{display: inline;font-size: 12px;line-height: 32px;letter-spacing: 4px;
}
.link .code-box a:hover{color: #3377bb;
}nav .bg{width: 100%;background-color: #edf4ed;
}
nav .head{position: relative;width: 950px;margin: auto;/*outline: 1px solid;*/overflow: hidden;
}
nav .head ul li a{font-size: 16px;color: #2b8e3a;line-height: 74px;margin: auto 12px;
}
nav .head a:hover{color: #fff;background-color: #2b8e3a;
}
nav .head img{vertical-align: middle;
}
.head ul li:last-child{float: right;line-height: 74px;
}
.head input{width: 250px;height: 30px;text-indent: 8px;
}
.search{position: absolute;display: inline-block;width: 30px;height: 30px;right: -12px;bottom: 21px;
}
.search i{position: absolute;display: block;width: 14px;height: 14px;left: 8px;top: 8px;background-image: url("pic/search.png");
}
.content{width: 950px;margin: 50px auto;/*outline: 1px solid;*/
}
.contentL{width: 604px;float: left;
}
.share ul li{float: left;margin-right: 20px;
}
.share ul li a{color: #3377bb;line-height: 16px;font-size: 14px;
}
.share ul li:last-child a{color: #cecece;
}
.share ul li:hover a{color: #000;
}
.share ul li:last-child{float: right;margin-right: 0;
}
.share ul li i{display: inline-block;width: 19px;height: 16px;vertical-align: middle;/*outline: 1px solid;*/background-image: url("pic/icon.png");
}
.share ul li:nth-child(1) i{background-position: 0 -98px;
}
.share ul li:nth-child(2) i{background-position: 0 -38px;
}
.share ul li:nth-child(3) i{background-position: 0 -8px;
}
.share ul li:nth-child(4) i{background-position: 0 -129px;
}
.share ul li:nth-child(5) i{background-position: 0 -158px;
}
.share ul li:last-child i{width: 12px;height: 12px;background-image: url("pic/set.png");
}
.input{position: relative;
}
.input input{display: block;width: 602px;height: 30px;margin-top: 8px;text-indent: 8px;
}
.input i{display: inline-block;width: 19px;height: 16px;/*outline: 1px solid;*/background-image: url("pic/icon.png");
}
.photo{position: absolute;top: 9px;right: 36px;background-position: 0 -38px;
}
.sharp{position: absolute;top: 9px;right: 12px;background-position: 0 -68px;
}
.news{width: 604px;height: 240px;margin: 24px 0;/*outline: 1px solid;*/
}
.userhead{float: left;
}
.userhead i{display: block;width: 48px;height: 48px;background-image: url("pic/head.jpg");
}
.box{float: right;width: 516px;height: 239px;/*outline: 1px solid;*/border-bottom: 1px solid #e5e5e5;
}
.username a{position: relative;font-size: 14px;left: -20px;color: #000;
}
.article{width: 472px;height: 128px;padding: 16px 24px 16px 20px;background-color: #f9f9f9;margin-top: 8px;margin-bottom: 12px;
}
.text{position: relative;width: 340px;height: 128px;/*outline: 1px solid;*/float: left;
}
.text h2{line-height: 14px;font-size: 14px;width: auto;font-weight: normal;
}
.text h2 a{color: #3377bb;
}
.text h2:hover a{color: #fff;background-color: #3377bb;
}
.text p{font-size: 12px;line-height: 16px;margin-top: 8px;color: #414141;
}
.like{position: absolute;display: inline-block;width: 52px;height: 22px;background: none;/*outline: 1px solid;*/border: 1px solid #bababa;border-radius: 2px;bottom: 0;font-size: 12px;line-height: 24px;text-align: center;color: #000;
}
.text i{display: inline-block;width: 12px;height: 12px;vertical-align: middle;/*outline: 1px solid;*/background-image: url("pic/ic_actions.png");
}
.text a:hover i{background-position: 0 -20px;
}
.pic{float: right;margin-top: 8px;
}
.pic img{height: 60px;
}
.from p{color: #bababa;font-size: 14px;margin-top: 12px;margin-left: 20px;
}
.from a{color: #999999;font-size: 14px;
}
.from a:hover{color: #fff;background-color: #3377bb;
}.contentR{width: 250px;float: right;
}
.contentR a {font-size: 12px;line-height: 18px;color: #3377bb;
}
.contentR a:hover{color: #fff;background-color: #3377bb;
}
.contentR h2{font-size: 16px;color: #2b8e3a;margin-bottom: 18px;
}
.contentR p{color: #999999;font-size: 12px;line-height: 18px;
}
.first{width: 218px;height: 82px;padding: 18px 16px;background-color: #f2f7f6;border-radius: 4px;margin-bottom: 20px;
}
.first a{font-size: 14px;line-height: 26px;
}
.second img{width: 250px;
}
.second a{display: inline-block;margin: 40px 0;
}
.third{width: 100%;margin: 30px 0;
}
.third h2,span{display: inline-block;
}
.third span{font-size: 12px;
}
.third .hd-a{display: inline-block;margin-top: 16px;
}
.third .hd{position: relative;width: 100%;
}
.third .hd-p{position: absolute;width: 48px;height: 30px;top: 0;right: 0;background-color: #95825C;
}
.fourth{width: 100%;margin: 30px 0 16px;
}
.fourth h2,span{display: inline-block;
}
.fourth span{font-size: 12px;
}
.nice{float: left;width: 120px;height: 80px;background-color: #F3BFA1;margin: 8px 0;
}
.wei{float: left;width: 120px;height: 80px;background-color: #18171C;margin: 8px 0 16px;
}
.fourth-t{float: right;width: 120px;height: 80px;margin: 8px 0;
}
.fifth{width: 100%;margin: 8px 0;
}.pages{width: 604px;margin: auto;/*text-align: center;*/
}
.pages ul{text-align: center;
}
.pages ul li{display: inline;/*float: left;*/
}
.pages a{display: inline-block;width: 16px;height: 16px;line-height: 16px;font-size: 14px;text-align: center;color: #3377bb;margin: 0 4px;
}
.pages ul li:first-child a{width: auto;color: #bababa;
}
.pages ul li:last-child a{width: auto;
}
.pages ul li:hover a{color: #fff;background-color: #83BF73;
}
footer{position: relative;margin: 64px auto 0;width: 950px;font-size: 12px;bottom: 8px;
}
footer .about{display: block;/*height: 30px;*/padding: 8px 0 24px;border-top: 1px dashed #bababa;
}
footer .copyright{float: left;color: #999999;
}
footer .other{float: right;
}
.other li{float: left;
}
.other span{text-align: center;width: 10px;color: #999999;
}
.other a{color: #3377bb;
}
.other a:hover{background-color: #3377bb;color: #fff;
}

Demo-2（豆瓣）相关推荐

微信小程序实例源码大全demo下载
怎么本地测试微信小程序实例源码 1.下载源码 2.打开微信开发者工具 3.添加项目->选择本项目目录->编译执行微信小程序实例源码大全微信小程序游戏类demo:识色:从相似颜色中挑选不 ...
微信小程序联盟：官方文档+精品教程+demo集合（12月更新……）
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
微信小程序联盟：官方文档+精品教程+demo集合（未完待续，持续更新中……）
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
微信小程序联盟：官方文档+精品教程+demo集合（5月31日更新，持续更新中……）...
2019独角兽企业重金招聘Python工程师标准>>> 微信小程序联盟 1:官方工具: https://mp.weixin.qq.com/debug/w ... tml?t=1476 ...
微信小程序导航：官方文档+精品教程+demo集合（5月31日更新)
官方文档 1:官方工具:https://mp.weixin.qq.com/debug/w - tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/d ...
微信小程序周报（第八期）
2019独角兽企业重金招聘Python工程师标准>>> 微信小程序联盟--微信小程序周报每周一笑客户被绑,蒙眼,惊问:"想干什么?"对方不语,鞭笞之,客户求饶 ...
【干货】微信小程序实例源码大全
微信小程序游戏类demo:识色:从相似颜色中挑选不同的一个源码链接:http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1105 ...
微信小程序源码案例大全
微信小程序demo:足球,赛事分析小程序简易导航小程序demo:办公审批小程序Demo:电魔方小程序demo:借阅伴侣微信小程序demo:投票微信小程序demo:健康生活小程序demo: ...
微信小程序资料集（上）
**微信小程序正式公测,**[张小龙全面阐述小程序,定档1月9日上线(附90分钟演讲全文) ...](简书) 前言:**新人第一坑,跳坑指南:修改后,必须保存:ctrl+S:** 1:官方工具:[ht ...
Scrapy简明教程(一)
原文链接前言 Scrapy是一个纯Python语言实现的爬虫框架,简单.易用.拓展性高使得其成为Python爬虫中的主流利器,本文以目前官方最新的版本1.6为基础,展开从简单使用到深入原理的探讨. ...

Demo-2（豆瓣）

Demo-2（豆瓣）相关推荐

最新文章

热门文章