C语言自学完备手册(33篇)
Android多分辨率适配框架
HTML5前端开发实战系列教程
MySQL数据库实操教程(35篇图文版)
推翻自己和过往——自定义View系列教程(10篇)
走出思维困境，踏上精进之路——Android开发进阶精华录
讲给Android程序员看的前端系列教程(40集免费视频教程+源码)
版权声明
本文原创作者：谷哥的小弟作者博客地址：http://blog.csdn.net/lfdfhl页面效果
页面源码
HMTL源码<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>潮牌服饰</title><link href="css/style.css" type="text/css" rel="stylesheet" /></head><body><!-- 头部模块 begin --><div id="header"><ul class="nav"><li class="logo"><img src="img/logo.png" /></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></div><!-- 头部模块 end --><!-- 内容模块 begin --><div id="content"><div class="banner"><img src="img/banner.jpg" /></div><div class="style_bg"><div class="style"><dl><dt class="left1"></dt><dd class="left2"><a href="#">明星风尚</a></dd><dt class="left3"></dt><dd class="left4"><a href="#">时尚博主</a></dd></dl><dl><dt class="center1"></dt><dd class="center2"><a href="#">流行搭配</a></dd><dt class="center3"></dt><dd class="center4"><a href="#">精选秀场</a></dd></dl><dl class="third"><dt class="right1"></dt><dd class="right2"><a href="#">环球街拍</a></dd></dl></div></div><h2>潮流前沿 / Tidal current</h2><div class="current"><dl><dt class="match_1"></dt><dd class="current01">潮流饰品</dd><dd class="current02"><a class="three" href="#">快速购买通道</a></dd></dl><dl><dt class="match_2"></dt><dd class="current01">时尚女鞋</dd><dd class="current02"><a class="three" href="#">快速购买通道</a></dd></dl><dl><dt class="match_3"></dt><dd class="current01">精品包包</dd><dd class="current02"><a class="three" href="#">快速购买通道</a></dd></dl><dl><dt class="match_4"></dt><dd class="current01">百搭衣帽</dd><dd class="current02"><a class="three" href="#">快速购买通道</a></dd></dl></div></div><!-- 内容模块 end --><!-- 底部模块 begin --><div id="footer"><p>CopyRight © 2018-2028 cn.com, All rights reserved.</p><p>2001-2018 版权所有 潮流服饰 CP备13385453</p></div><!-- 底部模块 end --></body> </html>
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879 CSS源码* {margin: 0;padding: 0;list-style: none; } body {background: #fff9ed;font-family: "微软雅黑";font-size: 14px; } a:link, a:visited {text-decoration: none;color: #fff;font-size: 16px; } #header {height: 128px;background: url(../img/head_bg.jpg) repeat-x;border-bottom: 3px solid #d5d5d5; } .nav {width: 980px;margin: 0 auto; } li {float: left; } li a {display: inline-block;height: 91px;width: 119px;text-align: center;line-height: 70px; } li a:hover {background: url(../img/xuanfu.png) center center; } #content {width: 980px;margin: 0 auto; } .style_bg {width: 908px;height: 330px;background: #ec6e47;padding: 10px 36px 5px; } .style {width: 892px;height: 314px;background: #fff;padding: 8px 10px 8px 6px; } .style dl {width: 279px;height: 313px;float: left;margin-left: 4px; } .style .third {width: 322px; } .style dt, .style dd {float: left; } .style .left1, .style .left3, .style .center1, .style .center3 {width: 162px; } .style .left2, .style .left4, .style .center2, .style .center4, .style .right2 {width: 117px; } .style .left1, .style .left2, .style .center1, .style .center2 {margin-bottom: 8px; } .style .left1 {height: 169px;background: url(../img/pic01.jpg) no-repeat; } .style .left2 {height: 169px;line-height: 169px; } .style .left3 {height: 137px;background: url(../img/pic02.jpg) no-repeat; } .style .left4 {height: 137px;line-height: 137px; } .style .center1 {height: 117px;background: url(../img/pic03.jpg) no-repeat; } .style .center2 {height: 117px;line-height: 117px; } .style .center3 {height: 188px;background: url(../img/pic04.jpg) no-repeat; } .style .center4 {height: 188px;line-height: 188px; } .style .right1 {width: 205px;height: 314px;background: url(../img/pic05.jpg) no-repeat; } .style .right2 {height: 314px;line-height: 314px; } .style a {display: block;background: #242424;text-align: center; } .style a:hover {background: #ea6c46; } h2 {width: 259px;height: 45px;background: #ea6c46;font-size: 20px;font-weight: 100;line-height: 45px;text-align: center;color: #fff;margin-top: 80px; } .current {width: 958px;height: 342px;background: #fff;border: 1px solid #dcd2ba;padding: 13px 0 0 20px; } .current dl {width: 229px;height: 330px;border: 1px solid #dcd2ba;float: left;margin-right: 5px; } .current dt {width: 229px;height: 212px;border-bottom: 1px solid #dcd2ba; } .current01 {width: 229px;height: 66px;background: #fff;line-height: 66px;color: #7a7a7a;font-size: 22px;text-align: center; } .current02 {width: 140px;height: 38px;background: #f3734e url(../img/gouwu.jpg) left center no-repeat;margin: 0 14px;line-height: 38px;padding-left: 60px;color: #fff; } .match_1 {background: url(../img/match01.jpg) center center no-repeat; } .match_2 {background: url(../img/match02.jpg) center center no-repeat; } .match_3 {background: url(../img/match03.jpg) center center no-repeat; } .match_4 {background: url(../img/match04.jpg) center center no-repeat; } .current a {display: inline-block;width: 180px;height: 38px; } #footer {width: 100%;height: 103px;background: #020202;color: #fff;line-height: 26px;text-align: center;padding-top: 50px;margin-top: 65px; }
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252
