抽屉网网址：http://dig.chouti.com/
使用html+css的方式，模拟网站首页的显示效果，
使用图片，全部节选于网页，
使用html：link的方式，导入CSS
-----------------------------------------------------------------------------------------------------------
html页面代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>chouti</title> <link rel="stylesheet" href="style_chouti.css" type="text/css"> </head> <body> <!--1、页面头部--> <div class="pg-head"> <!--头部导航栏--> <div class="content"> <!--logo--> <div class="logo"> <img src="http://dig.chouti.com/images/logo.png"> </div> <!--菜单--> <div class="menu"> <ul> <li><a>全部</a></li> <li><a>42区</a></li> <li><a>段子</a></li> <li><a>图片</a></li> <li><a>挨踢1024</a></li> <li><a>你问我答</a></li> </ul> </div> <!--搜索--> <div class="search"> <input type="text" value="查询"> </div> <!--登录--> <div class="account"> <ul> <li><a>注册</a></li> <li><a>登录</a></li> </ul> </div> </div> </div> <!--2、页面主体--> <div class="pg-body"> <!--主体内容--> <div class="content"> <!--左侧--> <div class="left"> <div class="opr mid bian"> <div class="l"> <a class="zuire">最热</a> <a>发现</a> <a>人类发布</a> </div> <div class="p backgd"> <a>+ 发布</a> </div> <div class="r"> <a class="jishipaixu">即时排序</a> <a>24小时</a> <a class="day">3天</a> </div> </div> <div class="yellowbox yellowtext"> <em>3</em> <a>条进入热榜，点击查看</a> </div> <div class="contents"> <div class="linebox"> <div class="left"> <a class="text"> 【丁磊：世界500强少有像中国企业家满口价值观 但产品是没水准的】 丁磊接受商业周刊中文版专访：在我看来企业家不应一天到晚站在一个道德制高点上， 去谈论一些概念和话题，而是要通过产品去改变很多事情。 世界500强很少像中国的一些企业家满口价值观，但做出来产品是没有水准的。 </a> <span class="info">-finance.sina.com.cn</span> <a class="info name">挨踢1024</a> <div class="info2"> <a class="tt tuijian"></a> <span>16</span> <a class="tt pinglun"></a> <span>11</span> <a class="tt sicang"></a> <span>私藏</span> <a class="tt zazhi"></a> <span>中国企业家杂志</span> <a class="time">45分钟前</a> <a>入热榜</a> </div> </div> <div class="right"> <a class="peitu"></a> </div> <div class="stop"></div> </div> <div class="linebox"> <div class="left"> <a class="text">广州“蝶贝蕾”喊冤：传销冒用风波几乎让公司瘫痪。</a> <span class="info">-finance.sina.com.cn</span> <a class="info name">挨踢1024</a> <div class="info2"> <a class="tt tuijian"></a> <span>16</span> <a class="tt pinglun"></a> <span>11</span> <a class="tt sicang"></a> <span>私藏</span> <a class="tt zazhi"></a> <span>中国企业家杂志</span> <a class="time">45分钟前</a> <a>入热榜</a> </div> </div> <div class="right"> <a class="peitu"></a> </div> <div class="stop"></div> </div> <div class="linebox"> <div class="left"> <a class="text">护驾！快护驾！</a> <span class="info">-finance.sina.com.cn</span> <a class="info name">挨踢1024</a> <div class="info2"> <a class="tt tuijian"></a> <span>16</span> <a class="tt pinglun"></a> <span>11</span> <a class="tt sicang"></a> <span>私藏</span> <a class="tt zazhi"></a> <span>中国企业家杂志</span> <a class="time">45分钟前</a> <a>入热榜</a> </div> </div> <div class="right"> <a class="peitu"></a> </div> <div class="stop"></div> </div> <div class="linebox"> <div class="left"> <a class="text"> 【丁磊：世界500强少有像中国企业家满口价值观 但产品是没水准的】 丁磊接受商业周刊中文版专访：在我看来企业家不应一天到晚站在一个道德制高点上， 去谈论一些概念和话题，而是要通过产品去改变很多事情。 世界500强很少像中国的一些企业家满口价值观，但做出来产品是没有水准的。 </a> <span class="info">-finance.sina.com.cn</span> <a class="info name">挨踢1024</a> <div class="info2"> <a class="tt tuijian"></a> <span>16</span> <a class="tt pinglun"></a> <span>11</span> <a class="tt sicang"></a> <span>私藏</span> <a class="tt zazhi"></a> <span>中国企业家杂志</span> <a class="time">45分钟前</a> <a>入热榜</a> </div> </div> <div class="right"> <a class="peitu"></a> </div> <div class="stop"></div> </div> <div class="linebox"> <div class="left"> <a class="text"> 【丁磊：世界500强少有像中国企业家满口价值观 但产品是没水准的】 丁磊接受商业周刊中文版专访：在我看来企业家不应一天到晚站在一个道德制高点上， 去谈论一些概念和话题，而是要通过产品去改变很多事情。 世界500强很少像中国的一些企业家满口价值观，但做出来产品是没有水准的。 </a> <span class="info">-finance.sina.com.cn</span> <a class="info name">挨踢1024</a> <div class="info2"> <a class="tt tuijian"></a> <span>16</span> <a class="tt pinglun"></a> <span>11</span> <a class="tt sicang"></a> <span>私藏</span> <a class="tt zazhi"></a> <span>中国企业家杂志</span> <a class="time">45分钟前</a> <a>入热榜</a> </div> </div> <div class="right"> <a class="peitu"></a> </div> <div class="stop"></div> </div> <div class="linebox"> <div class="left"> <a class="text"> 【丁磊：世界500强少有像中国企业家满口价值观 但产品是没水准的】 丁磊接受商业周刊中文版专访：在我看来企业家不应一天到晚站在一个道德制高点上， 去谈论一些概念和话题，而是要通过产品去改变很多事情。 世界500强很少像中国的一些企业家满口价值观，但做出来产品是没有水准的。 </a> <span class="info">-finance.sina.com.cn</span> <a class="info name">挨踢1024</a> <div class="info2"> <a class="tt tuijian"></a> <span>16</span> <a class="tt pinglun"></a> <span>11</span> <a class="tt sicang"></a> <span>私藏</span> <a class="tt zazhi"></a> <span>中国企业家杂志</span> <a class="time">45分钟前</a> <a>入热榜</a> </div> </div> <div class="right"> <a class="peitu"></a> </div> <div class="stop"></div> </div> <div class="linebox"> <div class="left"> <a class="text"> 【丁磊：世界500强少有像中国企业家满口价值观 但产品是没水准的】 丁磊接受商业周刊中文版专访：在我看来企业家不应一天到晚站在一个道德制高点上， 去谈论一些概念和话题，而是要通过产品去改变很多事情。 世界500强很少像中国的一些企业家满口价值观，但做出来产品是没有水准的。 </a> <span class="info">-finance.sina.com.cn</span> <a class="info name">挨踢1024</a> <div class="info2"> <a class="tt tuijian"></a> <span>16</span> <a class="tt pinglun"></a> <span>11</span> <a class="tt sicang"></a> <span>私藏</span> <a class="tt zazhi"></a> <span>中国企业家杂志</span> <a class="time">45分钟前</a> <a>入热榜</a> </div> </div> <div class="right"> <a class="peitu"></a> </div> <div class="stop"></div> </div> <div class="linebox"> <div class="left"> <a class="text"> 【丁磊：世界500强少有像中国企业家满口价值观 但产品是没水准的】 丁磊接受商业周刊中文版专访：在我看来企业家不应一天到晚站在一个道德制高点上， 去谈论一些概念和话题，而是要通过产品去改变很多事情。 世界500强很少像中国的一些企业家满口价值观，但做出来产品是没有水准的。 </a> <span class="info">-finance.sina.com.cn</span> <a class="info name">挨踢1024</a> <div class="info2"> <a class="tt tuijian"></a> <span>16</span> <a class="tt pinglun"></a> <span>11</span> <a class="tt sicang"></a> <span>私藏</span> <a class="tt zazhi"></a> <span>中国企业家杂志</span> <a class="time">45分钟前</a> <a>入热榜</a> </div> </div> <div class="right"> <a class="peitu"></a> </div> <div class="stop"></div> </div> <div class="linebox"> <div class="left"> <a class="text"> 【丁磊：世界500强少有像中国企业家满口价值观 但产品是没水准的】 丁磊接受商业周刊中文版专访：在我看来企业家不应一天到晚站在一个道德制高点上， 去谈论一些概念和话题，而是要通过产品去改变很多事情。 世界500强很少像中国的一些企业家满口价值观，但做出来产品是没有水准的。 </a> <span class="info">-finance.sina.com.cn</span> <a class="info name">挨踢1024</a> <div class="info2"> <a class="tt tuijian"></a> <span>16</span> <a class="tt pinglun"></a> <span>11</span> <a class="tt sicang"></a> <span>私藏</span> <a class="tt zazhi"></a> <span>中国企业家杂志</span> <a class="time">45分钟前</a> <a>入热榜</a> </div> </div> <div class="right"> <a class="peitu"></a> </div> <div class="stop"></div> </div> <div class="linebox"> <div class="left"> <a class="text"> 【丁磊：世界500强少有像中国企业家满口价值观 但产品是没水准的】 丁磊接受商业周刊中文版专访：在我看来企业家不应一天到晚站在一个道德制高点上， 去谈论一些概念和话题，而是要通过产品去改变很多事情。 世界500强很少像中国的一些企业家满口价值观，但做出来产品是没有水准的。 </a> <span class="info">-finance.sina.com.cn</span> <a class="info name">挨踢1024</a> <div class="info2"> <a class="tt tuijian"></a> <span>16</span> <a class="tt pinglun"></a> <span>11</span> <a class="tt sicang"></a> <span>私藏</span> <a class="tt zazhi"></a> <span>中国企业家杂志</span> <a class="time">45分钟前</a> <a>入热榜</a> </div> </div> <div class="right"> <a class="peitu"></a> </div> <div class="stop"></div> </div> <div class="linebox"> <div class="left"> <a class="text"> 【丁磊：世界500强少有像中国企业家满口价值观 但产品是没水准的】 丁磊接受商业周刊中文版专访：在我看来企业家不应一天到晚站在一个道德制高点上， 去谈论一些概念和话题，而是要通过产品去改变很多事情。 世界500强很少像中国的一些企业家满口价值观，但做出来产品是没有水准的。 </a> <span class="info">-finance.sina.com.cn</span> <a class="info name">挨踢1024</a> <div class="info2"> <a class="tt tuijian"></a> <span>16</span> <a class="tt pinglun"></a> <span>11</span> <a class="tt sicang"></a> <span>私藏</span> <a class="tt zazhi"></a> <span>中国企业家杂志</span> <a class="time">45分钟前</a> <a>入热榜</a> </div> </div> <div class="right"> <a class="peitu"></a> </div> <div class="stop"></div> </div> <div class="linebox"> <div class="left"> <a class="text"> 【丁磊：世界500强少有像中国企业家满口价值观 但产品是没水准的】 丁磊接受商业周刊中文版专访：在我看来企业家不应一天到晚站在一个道德制高点上， 去谈论一些概念和话题，而是要通过产品去改变很多事情。 世界500强很少像中国的一些企业家满口价值观，但做出来产品是没有水准的。 </a> <span class="info">-finance.sina.com.cn</span> <a class="info name">挨踢1024</a> <div class="info2"> <a class="tt tuijian"></a> <span>16</span> <a class="tt pinglun"></a> <span>11</span> <a class="tt sicang"></a> <span>私藏</span> <a class="tt zazhi"></a> <span>中国企业家杂志</span> <a class="time">45分钟前</a> <a>入热榜</a> </div> </div> <div class="right"> <a class="peitu"></a> </div> <div class="stop"></div> </div> <div class="linebox"> <div class="left"> <a class="text"> 【丁磊：世界500强少有像中国企业家满口价值观 但产品是没水准的】 丁磊接受商业周刊中文版专访：在我看来企业家不应一天到晚站在一个道德制高点上， 去谈论一些概念和话题，而是要通过产品去改变很多事情。 世界500强很少像中国的一些企业家满口价值观，但做出来产品是没有水准的。 </a> <span class="info">-finance.sina.com.cn</span> <a class="info name">挨踢1024</a> <div class="info2"> <a class="tt tuijian"></a> <span>16</span> <a class="tt pinglun"></a> <span>11</span> <a class="tt sicang"></a> <span>私藏</span> <a class="tt zazhi"></a> <span>中国企业家杂志</span> <a class="time">45分钟前</a> <a>入热榜</a> </div> </div> <div class="right"> <a class="peitu"></a> </div> <div class="stop"></div> </div> <div class="linebox"> <div class="left"> <a class="text">广州“蝶贝蕾”喊冤：传销冒用风波几乎让公司瘫痪。</a> <span class="info">-finance.sina.com.cn</span> <a class="info name">挨踢1024</a> <div class="info2"> <a class="tt tuijian"></a> <span>16</span> <a class="tt pinglun"></a> <span>11</span> <a class="tt sicang"></a> <span>私藏</span> <a class="tt zazhi"></a> <span>中国企业家杂志</span> <a class="time">45分钟前</a> <a>入热榜</a> </div> </div> <div class="right"> <a class="peitu"></a> </div> <div class="stop"></div> </div> <div class="linebox"> <div class="left"> <a class="text">护驾！快护驾！</a> <span class="info">-finance.sina.com.cn</span> <a class="info name">挨踢1024</a> <div class="info2"> <a class="tt tuijian"></a> <span>16</span> <a class="tt pinglun"></a> <span>11</span> <a class="tt sicang"></a> <span>私藏</span> <a class="tt zazhi"></a> <span>中国企业家杂志</span> <a class="time">45分钟前</a> <a>入热榜</a> </div> </div> <div class="right"> <a class="peitu"></a> </div> <div class="stop"></div> </div> <div class="linebox"> <div class="left"> <a class="text"> 【丁磊：世界500强少有像中国企业家满口价值观 但产品是没水准的】 丁磊接受商业周刊中文版专访：在我看来企业家不应一天到晚站在一个道德制高点上， 去谈论一些概念和话题，而是要通过产品去改变很多事情。 世界500强很少像中国的一些企业家满口价值观，但做出来产品是没有水准的。 </a> <span class="info">-finance.sina.com.cn</span> <a class="info name">挨踢1024</a> <div class="info2"> <a class="tt tuijian"></a> <span>16</span> <a class="tt pinglun"></a> <span>11</span> <a class="tt sicang"></a> <span>私藏</span> <a class="tt zazhi"></a> <span>中国企业家杂志</span> <a class="time">45分钟前</a> <a>入热榜</a> </div> </div> <div class="right"> <a class="peitu"></a> </div> <div class="stop"></div> </div> <div class="linebox"> <div class="left"> <a class="text"> 【丁磊：世界500强少有像中国企业家满口价值观 但产品是没水准的】 丁磊接受商业周刊中文版专访：在我看来企业家不应一天到晚站在一个道德制高点上， 去谈论一些概念和话题，而是要通过产品去改变很多事情。 世界500强很少像中国的一些企业家满口价值观，但做出来产品是没有水准的。 </a> <span class="info">-finance.sina.com.cn</span> <a class="info name">挨踢1024</a> <div class="info2"> <a class="tt tuijian"></a> <span>16</span> <a class="tt pinglun"></a> <span>11</span> <a class="tt sicang"></a> <span>私藏</span> <a class="tt zazhi"></a> <span>中国企业家杂志</span> <a class="time">45分钟前</a> <a>入热榜</a> </div> </div> <div class="right"> <a class="peitu"></a> </div> <div class="stop"></div> </div> <div class="linebox"> <div class="left"> <a class="text"> 【丁磊：世界500强少有像中国企业家满口价值观 但产品是没水准的】 丁磊接受商业周刊中文版专访：在我看来企业家不应一天到晚站在一个道德制高点上， 去谈论一些概念和话题，而是要通过产品去改变很多事情。 世界500强很少像中国的一些企业家满口价值观，但做出来产品是没有水准的。 </a> <span class="info">-finance.sina.com.cn</span> <a class="info name">挨踢1024</a> <div class="info2"> <a class="tt tuijian"></a> <span>16</span> <a class="tt pinglun"></a> <span>11</span> <a class="tt sicang"></a> <span>私藏</span> <a class="tt zazhi"></a> <span>中国企业家杂志</span> <a class="time">45分钟前</a> <a>入热榜</a> </div> </div> <div class="right"> <a class="peitu"></a> </div> <div class="stop"></div> </div> <div class="linebox"> <div class="left"> <a class="text"> 【丁磊：世界500强少有像中国企业家满口价值观 但产品是没水准的】 丁磊接受商业周刊中文版专访：在我看来企业家不应一天到晚站在一个道德制高点上， 去谈论一些概念和话题，而是要通过产品去改变很多事情。 世界500强很少像中国的一些企业家满口价值观，但做出来产品是没有水准的。 </a> <span class="info">-finance.sina.com.cn</span> <a class="info name">挨踢1024</a> <div class="info2"> <a class="tt tuijian"></a> <span>16</span> <a class="tt pinglun"></a> <span>11</span> <a class="tt sicang"></a> <span>私藏</span> <a class="tt zazhi"></a> <span>中国企业家杂志</span> <a class="time">45分钟前</a> <a>入热榜</a> </div> </div> <div class="right"> <a class="peitu"></a> </div> <div class="stop"></div> </div> <div class="linebox"> <div class="left"> <a class="text"> 【丁磊：世界500强少有像中国企业家满口价值观 但产品是没水准的】 丁磊接受商业周刊中文版专访：在我看来企业家不应一天到晚站在一个道德制高点上， 去谈论一些概念和话题，而是要通过产品去改变很多事情。 世界500强很少像中国的一些企业家满口价值观，但做出来产品是没有水准的。 </a> <span class="info">-finance.sina.com.cn</span> <a class="info name">挨踢1024</a> <div class="info2"> <a class="tt tuijian"></a> <span>16</span> <a class="tt pinglun"></a> <span>11</span> <a class="tt sicang"></a> <span>私藏</span> <a class="tt zazhi"></a> <span>中国企业家杂志</span> <a class="time">45分钟前</a> <a>入热榜</a> </div> </div> <div class="right"> <a class="peitu"></a> </div> <div class="stop"></div> </div> <div class="linebox"> <div class="left"> <a class="text"> 【丁磊：世界500强少有像中国企业家满口价值观 但产品是没水准的】 丁磊接受商业周刊中文版专访：在我看来企业家不应一天到晚站在一个道德制高点上， 去谈论一些概念和话题，而是要通过产品去改变很多事情。 世界500强很少像中国的一些企业家满口价值观，但做出来产品是没有水准的。 </a> <span class="info">-finance.sina.com.cn</span> <a class="info name">挨踢1024</a> <div class="info2"> <a class="tt tuijian"></a> <span>16</span> <a class="tt pinglun"></a> <span>11</span> <a class="tt sicang"></a> <span>私藏</span> <a class="tt zazhi"></a> <span>中国企业家杂志</span> <a class="time">45分钟前</a> <a>入热榜</a> </div> </div> <div class="right"> <a class="peitu"></a> </div> <div class="stop"></div> </div> <div class="linebox"> <div class="left"> <a class="text"> 【丁磊：世界500强少有像中国企业家满口价值观 但产品是没水准的】 丁磊接受商业周刊中文版专访：在我看来企业家不应一天到晚站在一个道德制高点上， 去谈论一些概念和话题，而是要通过产品去改变很多事情。 世界500强很少像中国的一些企业家满口价值观，但做出来产品是没有水准的。 </a> <span class="info">-finance.sina.com.cn</span> <a class="info name">挨踢1024</a> <div class="info2"> <a class="tt tuijian"></a> <span>16</span> <a class="tt pinglun"></a> <span>11</span> <a class="tt sicang"></a> <span>私藏</span> <a class="tt zazhi"></a> <span>中国企业家杂志</span> <a class="time">45分钟前</a> <a>入热榜</a> </div> </div> <div class="right"> <a class="peitu"></a> </div> <div class="stop"></div> </div> <div class="linebox"> <div class="left"> <a class="text"> 【丁磊：世界500强少有像中国企业家满口价值观 但产品是没水准的】 丁磊接受商业周刊中文版专访：在我看来企业家不应一天到晚站在一个道德制高点上， 去谈论一些概念和话题，而是要通过产品去改变很多事情。 世界500强很少像中国的一些企业家满口价值观，但做出来产品是没有水准的。 </a> <span class="info">-finance.sina.com.cn</span> <a class="info name">挨踢1024</a> <div class="info2"> <a class="tt tuijian"></a> <span>16</span> <a class="tt pinglun"></a> <span>11</span> <a class="tt sicang"></a> <span>私藏</span> <a class="tt zazhi"></a> <span>中国企业家杂志</span> <a class="time">45分钟前</a> <a>入热榜</a> </div> </div> <div class="right"> <a class="peitu"></a> </div> <div class="stop"></div> </div> <div class="linebox"> <div class="left"> <a class="text"> 【丁磊：世界500强少有像中国企业家满口价值观 但产品是没水准的】 丁磊接受商业周刊中文版专访：在我看来企业家不应一天到晚站在一个道德制高点上， 去谈论一些概念和话题，而是要通过产品去改变很多事情。 世界500强很少像中国的一些企业家满口价值观，但做出来产品是没有水准的。 </a> <span class="info">-finance.sina.com.cn</span> <a class="info name">挨踢1024</a> <div class="info2"> <a class="tt tuijian"></a> <span>16</span> <a class="tt pinglun"></a> <span>11</span> <a class="tt sicang"></a> <span>私藏</span> <a class="tt zazhi"></a> <span>中国企业家杂志</span> <a class="time">45分钟前</a> <a>入热榜</a> </div> </div> <div class="right"> <a class="peitu"></a> </div> <div class="stop"></div> </div> </div> </div> <!--右侧--> <div class="right"> <img src="report.jpg"> <div class="check"> <a class="view"></a> <a class="words">如何避免自己被封号</a> </div> <img src="bu.png"> <p class="title"> <strong class="da">24</strong> 小时全部 <strong class="top10">TOP10</strong> </p> <div class="hotlist"><p class="words">最热榜</p></div> <div class="jianjiao"></div> <div class="tops"> <div class="lineone"> <div class="xuhao"> <a>301</a> </div> <div class="jiansu"> <a> 张万年是山东龙口人，1944年，16岁的张万年参军入伍，成为胶东 区的一名小战士。请注意，胶东军区司令是许世友，在第二年，还有一个16 岁的小战士在胶东军区入伍，名叫迟浩田。也就是说，在许世友的胶东 军区，后来出了两位中央军委副主席。 </a> </div> <div class="bian"></div> </div> <div class="lineone"> <div class="xuhao"> <a>302</a> </div> <div class="jiansu"><a>原来耳朵上长黑头。</a></div> <div class="bian"></div> </div> <div class="lineone"> <div class="xuhao"> <a>303</a> </div> <div class="jiansu"> <a>世界第一的花火大会（@cbvivi）</a> </div> <div class="bian"></div> </div> <div class="lineone"> <div class="xuhao"> <a>304</a> </div> <div class="jiansu"> <a>《大学自习室》原版</a> </div> <div class="bian"></div> </div> <div class="lineone"> <div class="xuhao"> <a>305</a> </div> <div class="jiansu"> <a> 张万年是山东龙口人，1944年，16岁的张万年参军入伍，成为胶东 区的一名小战士。 </a> </div> <div class="bian"></div> </div> <div class="lineone"> <div class="xuhao"> <a>306</a> </div> <div class="jiansu"> <a>请注意，胶东军区司令是许世友。</a> </div> <div class="bian"></div> </div> <div class="lineone"> <div class="xuhao"> <a>307</a> </div> <div class="jiansu"> <a>在许世友的胶东军区，后来出了两位中央军委副主席。</a> </div> <div class="bian"></div> </div> <div class="lineone"> <div class="xuhao"> <a>308</a> </div> <div class="jiansu"> <a> 张万年是山东龙口人，1944年，16岁的张万年参军入伍，成为胶东 区的一名小战士。请注意，胶东军区司令是许世友，在第二年，还有一个16 岁的小战士在胶东军区入伍，名叫迟浩田。也就是说，在许世友的胶东 军区，后来出了两位中央军委副主席。 </a> </div> <div class="bian"></div> </div> <div class="lineone"> <div class="xuhao"> <a>309</a> </div> <div class="jiansu"> <a>肚子疼</a> </div> <div class="bian"></div> </div> <div class="lineone"> <div class="xuhao"> <a>300</a> </div> <div class="jiansu"> <a>胡说八道</a> </div> <div class="bian"></div> </div> </div> <img src="ov.jpg" class="pic"> </div> </div> <!--主体底部--> <div class="foot"> <hr> <div class="links"> <a>关于我们</a> <span>|</span> <a>联系我们</a> <span>|</span> <a>服务条款</a> <span>|</span> <a>隐私政策</a> <span>|</span> <a>抽屉热搜榜工具</a> <span>|</span> <a>下载客户端</a> <span>|</span> <a>意见与反馈</a> <span>|</span> <a>友情链接</a> <span>|</span> <a>公告</a> <img src="ct_rss.gif" width="36" height="14"> </div> <div class="info"> <img src="gozap-logo-50_15.gif"> <span>旗下站点</span> <span>©2017 chouti.com</span> <span>京ICP备09053974号-3 京公网安备 110102004562</span> </div> <div class="info"> <span>违法和不良信息举报：</span> <span>电话：<a>010-58302039</a></span> <span>邮箱：<a>jubao@chouti.com</a></span> </div> <div class="info"> <span>版权所有：北京格致璞科技有限公司</span> </div> </div> </div> </body> </html>
CSS页面代码：
body{margin:0;background:#ededed;} .pg-body .bian{border-bottom:1px solid #dce7f4;} .pg-head{top:0;left:0;height:44px;width:100%;z-index:1000;background-color:#2459a2;position:fixed;} .pg-head .content{width:960px;margin:0 auto;line-height:44px;} .pg-head .content .logo{display:inline;float:left;margin-top:8px;} .pg-head .content .menu{float:left;} .pg-head .content .account{float:right;} .pg-head .content .search{float:right;margin-left:16px;} .pg-head ul{list-style:none;margin-top:0;font-size:12px;} .pg-head li{margin-left:-3px;color:rgba(255,255,255,0.65);} .pg-head li:hover{background-color:#204982;} .pg-head li a{margin:0 16px;} .pg-head .menu li{float:left;} .pg-head .account li{float:right;} .pg-body{padding-top:44px;width:960px;margin:0 auto;background-color:#fff;} .pg-body .content{height:auto!important;min-height:713px;overflow:hidden;padding:6px 28px 60px;} .pg-body .content .left{float:left;width:580px;padding-right:10px;} .pg-body .content .left .opr{height:34px;padding-top:3px;padding-bottom:3px;margin-left:3px;} .pg-body .content .left .mid{text-align:center;} .pg-body .content .left .backgd{background-color:#84a42b;border:1px solid #8aab30;width:130px;} .pg-body .content .left .opr a{display:inline-block;width:60px;height:26px;line-height:26px;font:12px 700;} .pg-body .content .left .opr a:visited{text-decoration:none;color:#333;} .pg-body .content .left .opr a:hover{text-decoration:underline;} .pg-body .content .left .opr .l{float:left;color:#369;} .pg-body .content .left .opr .p{float:right;color:white;font-size:14px;} .pg-body .content .left .opr .r{float:right;color:#390;} .pg-body .content .left .opr .r .jishipaixu{color:#b4b4b4;} .pg-body .content .left .opr .r .day{text-align:left;} .pg-body .content .left .opr .l .zuire{background:url(tip.png) no-repeat 0 -299px;color:#333;} .pg-body .content .left .yellowbox{background-color:#fff9e2;border:1px solid #fbe9c0;height:25px;line-height:25px;} .pg-body .content .left .yellowtext{color:#d47f39;text-align:center;text-indent:10px;text-decoration:none;} .pg-body .content .left .yellowbox:hover{text-decoration:underline;} .pg-body .content .left .linebox{padding-top:6px;height:auot!important;min-height:70px;} .pg-body .content .left .linebox .text{color:#369;line-height:20px;font-size:14px;} .pg-body .content .left .linebox .info{font-size:12px;color:#b4b4b4;margin-left:7px;line-height:20px;} .pg-body .content .left .linebox .name{text-decoration:underline;} .pg-body .content .left .linebox .info2{font-size:12px;color:#99aecb;line-height:40px;} .pg-body .content .left .linebox .info2 .tt{display:inline-block;width:18px;height:18px;} .pg-body .content .left .linebox .info2 span{margin-left:3px;margin-right:18px;vertical-align:2px;} .pg-body .content .left .tuijian{background:url(icon_18_118.png) no-repeat 0 -40px;} .pg-body .content .left .pinglun{background:url(icon_18_118.png) no-repeat 0 -100px;} .pg-body .content .left .sicang{background:url(icon_18_118.png) no-repeat 0 -140px;} .pg-body .content .left .time{color:red;} .pg-body .content .left .linebox .left{float:left;width:490px;} .pg-body .content .left .linebox .right{float:right;width:70px;} .pg-body .content .left .peitu{display:inline-block;height:60px;width:60px;border:1px solid #ccc;padding:1px;vertical-align:top;} .pg-body .content .left .peitu{background:url(1.jpg) no-repeat 0 0;} .pg-body .content .left .linebox .stop{clear:both;border-bottom:1px solid #dce7f4;} .pg-body .content .right{float:right;width:300px;padding-left:10px;} .pg-body .content .right .check{height:22px;padding-top:6px;margin-bottom:6px;} .pg-body .content .right .view{display:inline-block;height:20px;width:28px;background:url(view.png) no-repeat 0 0;} .pg-body .content .right .words{color:#369;font-size:14px;line-height:22px;margin-left:7px;vertical-align:super;} .pg-body .content .right .words:hover{text-decoration:underline;} .pg-body .content .right .title{font-size:12px;line-height:20px;letter-spacing:1px;} .pg-body .content .right .title .top10{color:red;font-size:14px;} .pg-body .content .right .title .da{font-size:14px;} .pg-body .content .right .hotlist{height:35px;background-color:#4767b2;margin-bottom:0;} .pg-body .content .right .hotlist .words{line-height:35px;margin-left:0;color:#f4f4f4;text-align:center;} .pg-body .content .right .jianjiao{ width:0;height:0;margin-left:145px; border-top:10px solid #4767b2;border-bottom:10px solid transparent; border-left:10px solid transparent;border-right:10px solid transparent; } .pg-body .content .right .tops{color:#666;font-size:12px;} .pg-body .content .right .lineone{padding:6px 0;} .pg-body .content .right .xuhao{float:left;width:32px;height:22px;background-color:#f0f0f0;text-align:center;line-height:22px;} .pg-body .content .right .jiansu{float:right;margin-left:6px;width:260px;} .pg-body .content .right .bian{clear:both;border-bottom:1px dotted #f0f0f0;padding-bottom:6px;margin-bottom:6px;} .pg-body .foot{height:auto!important;min-height:100px;overflow:hidden;padding:0 28px;font-size:10px;padding-bottom:30px;} .pg-body .foot .links{padding-top:15px;text-align:center;text-decoration:none;} .pg-body .foot .links a{color:#369;margin-left:10px;margin-right:10px;} .pg-body .foot .info{margin-top:6px;text-align:center;} .pg-body .foot .info span{margin-left:5px;} .pg-body .foot img{vertical-align:-2px;}
--------------------------------------------------------------------------------------------------------------
还未实现，有待处理的效果：1、右侧图片最后停在最上方；2、右下角返回最上端的图标；
浙公网安备 33010602011771号