一：麦子商城首页制作
代码：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="ytf-8"> <title>html+css</title> <link rel="stylesheet" href="css/style.css"/> <!--link style="text/css"--> </head> <body> <a name="toppp"></a> <div class="top"> <div class="black"> <div class="core"> <div class="l"> <span><a href="">设为首页</a></span> <span><a href="">收藏本站</a></span> <!-- <span class="r">2015/9/1</span> 若把日期放这里，会到收藏本站的右边，可能是因为父元素l的影响，所以需要单独div--> </div> <div class="r"> <span class="dw">2015/9/1 风和日丽</span> </div> </div> </div> <div class="logos"> <div class="core"> <div class="logos l"> <h1><a href="index.html"><img src="images/logo.jpg" alt="HTML+CSS实战"/></a></h1> </div> <div class="search l"> <form action="index.html" method="get"> <table cellpadding="0" cellspacing="0" border="0"> <tr> <td class="s_z"></td> <td class="s_c"> <input type="text" name="text" id="s_c_txt"/> </td> <td class="s_y"> <button type="submit" name="submit"></button> </td> </tr> </table> </form> <!-- <h1 class="s_z l"><a href="index.html"><img src="images/s_z.jpg" alt="HTML+CSS实战"/></a></h1> <h1 class="s_c l"><a href="index.html"><img src="images/s_c.jpg" alt="HTML+CSS实战"/></a></h1> <h1 class="s_y l"><a href="index.html"><img src="images/s_r.jpg" alt="HTML+CSS实战"/></a></h1> --> </div> <div class="phone r"> <span>客服热线：400-000-000</span> </div> </div> </div> </div> <!-- <div class="nav"> <div class="core"> </div> </div> --> <div class="nav"> <div class="core"> <ul> <li class="a"><a href="index.html">网站首页</a></li> <li><a href="index.html">公司简介</a></li> <li><a href="index.html">业务描述</a></li> <li><a href="index.html">服务范围</a></li> <li><a href="index.html">产品中心</a></li> <li><a href="index.html">人才管理</a></li> <li><a href="index.html">在线留言</a></li> <li><a href="index.html">联系我们</a></li> </ul> </div> </div> </div> <!--中间部分--> <div class="middle"> <div class ="core"> <div class="ad"> <img alt="广告" src="images/ad.jpg"/> </div> <div class="cont l"> <div class="tit"> <img alt="intro" src="images/jianjie.jpg"/> <span>more</span> </div> <div class="jj_c"> <img alt="" src="images/jianjie_img.jpg"/> <p> 麦子学院是成都麦子信息技术有限公司旗下一个IT在线教育平台，目前已有30万注册用户，10万以上APP下载量，5000小时视频内容。 我们从不说空话，专注于IT在线教育，脱离传统教育的束缚，让你走哪学哪，想学就学。逗比的老师，贴心的助教，在这儿你能感受到来自五 湖四海伙伴们热情和踏实的学习态度！ </p> <p> 什么都不会没关系，想跳槽想加薪都可以，提升自己更不在话下。 只要你愿意，绝对为你找到一份相当靠谱的工作！成就你，我能行！ </p> <p> 那么多的梦想，你不想实现？买的起大奔的人会天天挤公交吗？ 想成为成功人士，脑袋里必须要有知识。一切不以要付出为目的的梦想都是耍流氓！ LPS系统、每周直播课、学习作业快速批改、保就业、班主任助教全程跟踪。 你看，离你完成梦想的道路是不是近了很多。 </p> </div> </div> <div class="news l"> <div class="tit"> <img alt="intro" src="images/xinwen.jpg"/> <span><a href="">More</a></span> </div> <div class="xw_c"> <ul> <li class="a"> <a href=""> <img src="images/list_img.jpg" alt=""/> <h3>Web前端开发HTML+CSS基础入门</h3> <p>麦子学院朱朝兵老师带领大家从HTML语法，基本结构到CSS入门DIV+Css布局,通俗易懂 ... ...</p> </a> </li> <li> <a href=""> <h3>Web前端开发之HTML+CSS基础入门</h3> <span>2015-05-15</span> </a> </li> <li> <a href=""> <h3>Web前端开发之HTML+CSS基础入门</h3> <span>2015-05-15</span> </a> </li> <li> <a href=""> <h3>Web前端开发之HTML+CSS基础入门</h3> <span>2015-05-15</span> </a> </li> <li> <a href=""> <h3>Web前端开发之HTML+CSS基础入门</h3> <span>2015-05-15</span> </a> </li> <li> <a href=""> <h3>Web前端开发之HTML+CSS基础入门</h3> <span>2015-05-15</span> </a> </li> <li> <a href=""> <h3>Web前端开发之HTML+CSS基础入门</h3> <span>2015-05-15</span> </a> </li> <li> <a href=""> <h3>Web前端开发之HTML+CSS基础入门</h3> <span>2015-05-15</span> </a> </li> </ul> </div> </div> <div class="prod l"> <div class="tit"> <img alt="intro" src="images/chanpin.jpg"/> <span>more</span> </div> <div class="cp_c"> <ul> <li><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>web前端blablabla</span></a></li> <li><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>web前端blablabla</span></a></li> <li><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>web前端blablabla</span></a></li> <li><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>web前端blablabla</span></a></li> <li class="mar0"><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>web前端blablabla</span></a></li> <li><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>web前端blablabla</span></a></li> <li><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>web前端blablabla</span></a></li> <li><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>web前端blablabla</span></a></li> <li><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>web前端blablabla</span></a></li> <li><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>web前端blablabla</span></a></li> </ul> </div> </div> </div> </div> <div class="cl"></div> <!--由于参评推荐有浮动，会影响foot，在此清除浮动--> <div class="bottom"> <div class="footop"> <div class="core"> <span class="l"> <a href="">关于我们</a> | <a href="">联系我们</a> | <a href="">加入我们</a> | <a href="">给我留言</a> </span> <span class="r"> 2015 麦子学院版权所有 ICP证:蜀ICP备13000000号-1 </span> </div> </div> <div class="footbot"> <div class="core"> <p class="l"> 友情连接：<a href="http://www.maiziedu.com" target="_blank">麦子学院</a><a href="http://www.dz7.com.cn" target="_blank">DZ起点网</a><a href="http://www.maiziedu.com" target="_blank">麦子学院</a><a href="http://www.maiziedu.com" target="_blank">教育部</a><a href="http://www.maiziedu.com" target="_blank">新闻网</a> </p> </div> </div> </div> <!-- <div class="core"> <span>关于我们</span>|<span>联系我们</span>|<span>加入我们</span>|<span>给我留言</span> </div--> </div> <div class="totop"> <a href="#toppp"><img src="images/top_tool.jpg" alt=""></a> </div> </body> </html>
*{margin:0;} body{ font: 14px/24px 'Microsoft YaHei', '宋体’.'"Helvetica Neue", Helvetica, Arial, sans-serif'' } .core{ width: 960px;margin: 0 auto; } .l{ float: left;} .r{ float: right;} .cl{ clear: both; } .mar0{ margin: 0 } img{ border: none } /*.body{ margin:0; }*/ .black{ width : 100%; height : 24px; background: #303030; color:white; line-height:24px; /*同块的高度便可以居中*/ } .black span{ margin-right: 15px; } .black span.dw{ /*取消掉2015/9/1 风和日丽的margin-right的属性*/ margin:0px; } .black span.mr_0{ margin: 0; } .black a{ color: #d8d8d8; text-decoration: none; /*下划线*/ } .black a:hover{ /*鼠标放上链接的颜色:red*/ color: #f60; } /*------------------top——logos-----------------------------*/ .logos{ height: 59px; margin: 15px 0; } .search{ width:330px; height:41px; margin-top: 24px; margin-left: 45px; } .search td{ /*注意此种命名方式*/ height:41px; } .s_z{ width: 6px; background: url("../images/s_z.jpg") no-repeat; } .s_c{ width: 240px; background: url("../images/s_c.jpg") repeat-x; z-index:4; } .s_y{ width:78px; background: url("../images/s_r.jpg") no-repeat; } .s_c input{ height: 34px; line-height: 35px; border: none; margin-bottom: 3px; width: 240px; z-index:1; } .s_y button{ width: 78px; height: 41px; background: none; border: 0; cursor: pointer; /*鼠标移上去变成小手*/ } .phone{ /*也可以用.phone span{...}*/ height:59px; line-height:59px; font-size : 26px; color : darkred; margin-top:15px; } /*------------------nav-----------------------------*/ .nav{ width:100%; height:39px; background:url("../images/nav_bg.jpg") repeat-x; } .nav li{ /*!!!!去掉前面小点以及并没有使用span而是使用li排成一排*/ list-style:none; float : left; line-height : 39px; padding-right:10px; } .nav li.a,.nav li:hover{ background: url("../images/nav_hover.jpg") repeat-x; } .nav a{ color:#fff; font-size:16px; text-decoration:none; } /*-----------------------------中间部分--------------------------*/ .ad{ margin-bottom: 10px; } .cont{ width: 540px; height: 360px; margin-right: 20px; } .tit{ <!--三个通用--> width:480px; padding-bottom: 8px; border-bottom: 1px solid darkred; <!--实现下面那条红线--> position: relative; margin-bottom: 10px; <!--与下面内容有点分割显得好看--> } .tit span{ position:absolute; right:0; bottom:0; } .tit a{ color:darkred; text-decoration:none; } .jj_c img{ /*此class实现了文字分布在图片左边*/ float:left; margin:0 10px 10px 0; } .jj_c p{ color:rgb(140,140,140); text-indent:24px; } .news{ width:400px; height:360px; } .news ul{ padding-left:0px; } .xw_c{ } .xw_c li{ list-style:none; height:24px; line-height:24px; position: relative; padding-left:15px; background:url("../images/list_bg.jpg") no-repeat center left; margin-bottom:6px; } .xw_c li.a{ background:none; padding:0; height:76px; } .xw_c a{ color:#6161; text-decoration:none; } .xw_c li img{ float:left; margin:0 10 10 0; } .xw_c h3{ font-weight:normal; font-size:14px; } .xw_c span{ position: absolute; right: 0; bottom: 0; font-size: 12px; color: #888888; } .xw_c p{ font-size:12px; color:#888; text-indent:24px; } .prod{ width:100%; height:300px; } .cp_c{ } .cp_c li{ float: left; list-style:none; margin:0 10px 10px 0; width:151px; height:96px; overflow:hidden; position:relative; } .cp_c span{ display:none; position:absolute; bottom:0; left:0; font-size:14px; width:131px; height:20px; padding:0 10px; color:#fff; background:darkred; overflow:hidden; } .cp_c li a:hover span{ /*!!!!!shenmegui!!!!*/ display:block; } .cp_c li.mar0{ margin-right:0; } .bottom{ width:100%; height:103px; background:url("../images/footer_bg.jpg") repeat-x; } .footop{ height:80px; line-height:80px; color:#fff; } .footop a{ color:white; text-decoration:none; } .footop .l{ /*卧槽，这个叼，改变已有类*/ font-size:16px; } .footbot a{ color:#fff; text-decoration:none; margin-right:5px; } .totop{ position:fixed; width:40px; height:205px; right:0; bottom:190px; }
二：医院首页制作
代码：
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <link rel="stylesheet" href="css/style.css"/> </head> <body> <div class="top"> <div class="core"> <a href=""><img src="images/logo.png"></a> <div class="r"> <span><button type="submit" name="submit1"><img src="images/contact.png" alt="0"></span> <span><button type="submit" name="submit2"><img src="images/weixin.png" alt="1"></span> <span><button type="submit" name="submit3"><img src="images/weibo.png" alt="2"></span> </div> </div> </div> <div class="core"> <div class="banner"> <span class="ban_i"><img src="images/iphone.png"></span> <span class="ban_a"><img src="images/android.png"></span> <span class="ban_i"><button type="submit" name="submit"></button></span> <span class="ban_a"><button type="submit" name="submit"></button></span> </div> <div class="intro"> <span><a href=""><img src="images/introduce1.png"></a><h3 style="margin-top:20px">沟通便捷</h3><p>24小时电话热线免费拨打，随时在线</p></span> <span><a href=""><img src="images/introduce2.png"></a><h3 style="margin-top:20px">全国大医院</h3><p>全国各地大医院，只有想不到，没有找不到</p></span> <span><a href=""><img src="images/introduce3.png"></a><h3 style="margin-top:20px">隐私保护</h3><p>隐私完全保密，签订保密合同</p></span> <span><a href=""><img src="images/introduce4.png"></a><h3 style="margin-top:20px">评分制度</h3><p>我的疗效，您来评判，首发评测系统，追进医患共同责任</p></span> </div> </div> <div class="cl"></div> <div class="core"> <div class="main"> </div> </div> <div class="foot"> <div class="core"> <a href=""><img src="images/footer-logo.png"></a> <ul class="r"> <li class="fi"><a href=""><span>关于我们</span></a> <a href=""><span>联系我们</span></a> <a href=""><span>帮助中心</span></a> <a href=""><span>网络地图</span></a></li> <li class="ft"><span><img src="images/gongshang.png"></span><span>上海工商菊，还是竹叶青好喝，可乐汽少了一点</span></li> </ul> </div> </div> </body> </html>
*{margin:0;} body{ font: 14px/24px 'Microsoft YaHei', '宋体’.'"Helvetica Neue", Helvetica, Arial, sans-serif'' } .core{ width: 1100px;margin: 0 auto; } .l{ float: left;} .r{ float: right;} .cl{ clear: both; } .mar0{ margin: 0 } img{ border: none } .top{ width:100%; height:112px; background:url("../images/header.png") repeat-x; } .top img[src="images/logo.png"]{ float:left; margin-top:21px; } .top img[alt]{ position:relative; margin-top:21px; right:100px; } .top img[alt="1"]{ position:absolute; top:38px; right:125px; } .top img[alt="2"]{ position:absolute; top:38px; right:185px; } .top button{ background:none; cursor:pointer; border:0; width:0; height:0; } .top button[name="submit1"]{ } /*----------------banner--------------------*/ .banner{ width:1100px; height:655px; background:url("../images/banner.jpg") no-repeat; position:relative; } .banner .ban_i{ position:absolute; top:440px; right:280px; } .banner .ban_a{ position:absolute; top:520px; right:280px; } .banner button{ width:227px; height:68px; background:none; border:0; cursor:pointer; } .intro span{ float:left; width:275px; height:114px; } .intro img{ float:left; margin-top:25px; margin-right:3px; } .main{ height:671px; background:url("../images/main.jpg"); margin-bottom:26px; } .foot{ width:100%; height:49px; background-color:black; } .foot img{ float:left; } .foot li{ list-style:none; color:white; float:right; } .foot a{ color:#fff; font-size:16px; text-decoration:none; } .fi{ position:relative; right:0; } .ft{ position:absolute; margin-top:25px; right:123px; }