首页 > 代码库 > 放假(一)
放假(一)
白天补觉,晚上补代码...
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>快点来抢啊...</title> <style type="text/css"> /*css初始化*/ body,ul,li,p{margin:0px;padding:0px;} ul,li{list-style:none;} body{font-size:12px;background-color:#ccc;font-family: "times new roman",宋体;} .clear{clear:both;} .orangered{color:orangered;} .red{color:red;} .gray{color:gray; text-decoration:line-through;padding-left:40px;} /*box模块*/ .box{ background-color:#fff; margin:30px auto; width:760px; padding:20px; } /*标题模块*/ .box .title{ height:30px; line-height:30px; font-size:20px; color:orangered; border-bottom:2px solid orangered; font-weight:bold; } /*内容模块*/ .box .content{ padding:10px 35px; } .box .content li{ float:left; padding:10px; position:relative; } .box .content p{ line-height:150%; } .box .content ul div{ position:absolute; top:0px; right:0px; } </style> </head> <body> <div class="box"> <div class="title">今日闪价</div> <div class="content"> <ul> <li> <a href="#"><img src="images/01.jpg" /></a> <p> [特价款]雷朋板材光学镜架<br /> <span class="orangered">年中盛典 满128元减30元</span><br /> <span class="red">¥476.0</span> <span class="gray">¥1360</span> </p> <div><img src="images/xsq.png" /></div> </li> <li> <a href="#"><img src="images/02.jpg" /></a> <p> [特价款]雷朋板材光学镜架<br /> <span class="orangered">年中盛典 满128元减30元</span><br /> <span class="red">¥476.0</span> <span class="gray">¥1360</span> </p> <div><img src="images/xsq.png" /></div> </li> <li> <a href="#"><img src="images/03.jpg" /></a> <p> [特价款]雷朋板材光学镜架<br /> <span class="orangered">年中盛典 满128元减30元</span><br /> <span class="red">¥476.0</span> <span class="gray">¥1360</span> </p> <div><img src="images/xsq.png" /></div> </li> <li> <a href="#"><img src="images/04.jpg" /></a> <p> [特价款]雷朋板材光学镜架<br /> <span class="orangered">年中盛典 满128元减30元</span><br /> <span class="red">¥476.0</span> <span class="gray">¥1360</span> </p> <div><img src="images/xsq.png" /></div> </li> <li> <a href="#"><img src="images/05.jpg" /></a> <p> [特价款]雷朋板材光学镜架<br /> <span class="orangered">年中盛典 满128元减30元</span><br /> <span class="red">¥476.0</span> <span class="gray">¥1360</span> </p> <div><img src="images/xsq.png" /></div> </li> <li> <a href="#"><img src="images/06.jpg" /></a> <p> [特价款]雷朋板材光学镜架<br /> <span class="orangered">年中盛典 满128元减30元</span><br /> <span class="red">¥476.0</span> <span class="gray">¥1360</span> </p> <div><img src="images/xsq.png" /></div> </li> <li> <a href="#"><img src="images/07.jpg" /></a> <p> [特价款]雷朋板材光学镜架<br /> <span class="orangered">年中盛典 满128元减30元</span><br /> <span class="red">¥476.0</span> <span class="gray">¥1360</span> </p> <div><img src="images/xsq.png" /></div> </li> <li> <a href="#"><img src="images/08.jpg" /></a> <p> [特价款]雷朋板材光学镜架<br /> <span class="orangered">年中盛典 满128元减30元</span><br /> <span class="red">¥476.0</span> <span class="gray">¥1360</span> </p> <div><img src="images/xsq.png" /></div> </li> </ul> <div class="clear"></div> </div> </div> </body> </html>
传智首页做了一点点,我发现排网页真的很需要耐心...
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>传智首页</title> <style type="text/css"> /*全局css设置*/ body,p,ul,li,h1{margin:0px;padding:0px;} ul,li{list-style:none;} body{background-color:#ccc;font-size:12px;font-family:宋体;} a:link,a:visited{color:#000;text-decoration:none;} a:hover{color:red;} .blue{color:blue;} .red{color:red;} .clear{clear:both;} /*top模块*/ .top{ width:958px; margin:0px auto; height:20px; line-height:20px; } .top p{float:left;color:cornflowerblue;} .top li{float:right;padding-left:4px;} /*logo模块*/ .logo{ margin:0px auto; width:958px; height:102px; background:url("images/bg-logo.jpg") no-repeat; position:relative; } .logo .left{ width:202px; height:76px; background: url("images/logo.gif") no-repeat; position: absolute; top:14px; } .logo .middle{ position: absolute; width:390px; top:10px; left:250px; } .logo .middle h1{ color:dodgerblue; float:left; width: 390px; padding-left:4px; padding-bottom: 4px; } .logo .middle li{ background:url("images/li01.png") no-repeat; width:78px; height:20px; float:left; line-height:20px; text-indent:10px; color:#fff; margin:2px 50px 2px 0px; } .logo .right{ background: url("images/topword.gif") no-repeat; width:358px; height:90px; position: absolute; right: 0px; top:6px; } </style> </head> <body> <div class="top"> <p>专业的Java,.net,PHP,C/C++,网页设计,平面设计,UI设计,ios培训机构</p> <ul> <li><a href="#">联系我们</a></li> <li><a href="#">招贤纳士</a> |</li> <li><a href="#"><span class="red">传智特刊</span></a> |</li> <li><a href="#"><span class="blue">校园生活</span></a> |</li> <li><a href="#"><span class="blue">免费公开课</span></a> |</li> <li><a href="#">网站首页</a> |</li> </ul> </div> <div class="logo"> <div class="left"></div> <div class="middle"> <h1>PHP学员</h1> <ul> <li>北京校区</li> <li>上海校区</li> <li>广州校区</li> <li>武汉校区</li> <li>成都校区</li> </ul> <div class="clear"></div> </div> <div class="right"></div> </div> </body> </html
放假(一)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。