【回顾整理】HTML+CSS个的两个实战项目

一：麦子商城首页制作

代码：

<!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>
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;
}
CSS

二：医院首页制作

代码：

<!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>
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;
}
CSS
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/pengsixiong/p/4945040.html