网站首页设计

最新推荐文章于 2024-06-13 10:05:56 发布

怪我冷i

最新推荐文章于 2024-06-13 10:05:56 发布

阅读量1.5k

点赞数 2

分类专栏： # html

html 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

小效果图

html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>HTML+CSS实战</title>
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div class="header">
    <div class="top">
        <div class="wp">
            <div class="z">
                <span>
                    <a href="">设为首页</a>
                </span>
                 <span>
                    <a href="">收藏本站</a>
                </span>
            </div>
            <div class="y">
                <span>2015年5月1日</span>
                <span class="mr_0">多云16℃/30℃</span>
            </div>
        </div>
    </div>
    <div class="wp">
        <div class="logos">
            <div class="logo z">
                <h1><a href="index.html"><img src="images/logo.jpg" alt="HTML+CSS实战"/></a></h1>
            </div>
            <div class="dianhua y">
                <span>客服热线：400-000-000</span>
            </div>
            <div class="sousuo y">
                <form action="index.html" method="get">
                    <table cellpadding="0" cellspacing="0" border="0">
                        <tr>
                            <td class="s_z z"></td>
                            <td class="s_c z">
                                <input type="text" name="text" id="s_c_txt"/>
                            </td>
                            <td class="s_y z">
                                <button type="submit" name="submit"></button>
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
        </div>
    </div>
    <div class="nav">
        <div class="wp">
            <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="center">
    <div class="wp">
        <div class="ad">
            <img src="images/ad.jpg" alt=""/>
        </div>
        <div class="jianjie z">
            <div class="tit">
                <img src="images/jianjie.jpg" alt=""/>
               <span><a href="">More</a></span>
            </div>
            <div class="jj_c">
                <img src="images/jianjie_img.jpg" alt=""/>
                <p>
                    麦子学院是成都麦子信息技术有限公司旗下一个IT在线教育平台，目前已有30万注册用户，10万以上APP下载量，5000小时视频内容。 我们从不说空话，专注于IT在线教育，脱离传统教育的束缚，让你走哪学哪，想学就学。逗比的老师，贴心的助教，在这儿你能感受到来自五 湖四海伙伴们热情和踏实的学习态度！
                </p>
                <p>
                    什么都不会没关系，想跳槽想加薪都可以，提升自己更不在话下。 只要你愿意，绝对为你找到一份相当靠谱的工作！成就你，我能行！
                </p>
                <p>
                    那么多的梦想，你不想实现？买的起大奔的人会天天挤公交吗？ 想成为成功人士，脑袋里必须要有知识。一切不以要付出为目的的梦想都是耍流氓！ LPS系统、每周直播课、学习作业快速批改、保就业、班主任助教全程跟踪。 你看，离你完成梦想的道路是不是近了很多。
                </p>
            </div>
        </div>
        <div class="xinwen z">
            <div class="tit">
                <img src="images/xinwen.jpg" alt=""/>
                <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="chanpin z">
            <div class="tit">
                <img src="images/chanpin.jpg" alt=""/>
                <span><a href="">More</a></span>
            </div>
            <div class="cp_c">
                <ul>
                    <li><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>Web前端开发之HTML+CSS基础入门</span></a></li>
                    <li><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>Web前端开发之HTML+CSS基础入门</span></a></li>
                    <li><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>Web前端开发之HTML+CSS基础入门</span></a></li>
                    <li><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>Web前端开发之HTML+CSS基础入门</span></a></li>
                    <li><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>Web前端开发之HTML+CSS基础入门</span></a></li>
                    <li class="mr_0"><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>Web前端开发之HTML+CSS基础入门</span></a></li>
                    <li><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>Web前端开发之HTML+CSS基础入门</span></a></li>
                    <li><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>Web前端开发之HTML+CSS基础入门</span></a></li>
                    <li><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>Web前端开发之HTML+CSS基础入门</span></a></li>
                    <li><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>Web前端开发之HTML+CSS基础入门</span></a></li>
                    <li><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>Web前端开发之HTML+CSS基础入门</span></a></li>
                    <li class="mr_0"><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>Web前端开发之HTML+CSS基础入门</span></a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="cl"></div>
<div class="footer">
    <div class="wp">
        <div class="footer_top">
            <span class="z">
                <a href="">关于我们</a>    |    <a href="">联系我们</a>    |    <a href="">加入我们</a>    |    <a href="">给我留言</a>
            </span>
            <span class="y">
                © 2015 麦子学院版权所有 ICP证:蜀ICP备13000000号-1
            </span>
        </div>
        <div class="footer_bottom">
            <p>
                友情连接：<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>

</body>
</html>

css

/*通用样式*/
*{ margin: 0;padding: 0 }
body{ font: 14px/24px 'Microsoft YaHei', '宋体’.'"Helvetica Neue", Helvetica, Arial, sans-serif'' }
.wp{ width: 960px;margin: 0 auto; }
.z{ float: left;}
.y{ float: right;}
.cl{ clear: both; }
.mr_0{ margin: 0 }
img{ border: none }

.top{
    width: 100%;
    height: 24px;
    line-height: 24px;
    background: #303030;
    color: #d8d8d8;
}
.top span{
    margin-right: 15px;
}
.top span.mr_0{
    margin: 0;
}
.top a{
    color: #d8d8d8;
    text-decoration: none;
}
.top a:hover{
    color: #f60;
}
/*LOGOS*/
.logos{
    height: 59px;
    margin: 15px 0;
}
/*搜索*/
.sousuo{
    width: 330px;
    height: 41px;
    margin-top: 8px;
}
.sousuo 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;
}
.s_y{
    width:78px;
    background: url("../images/s_r.jpg") no-repeat;
}
.s_c input{
    height: 35px;
    line-height: 35px;
    border: none;
    margin-top: 2px;
    width: 200px;
}
.s_y button{
    width: 78px;
    height: 41px;
    background: none;
    border: 0;
    cursor: pointer;
}
.dianhua{
    height: 59px;
    line-height: 59px;
    margin-left: 15px;
}
.dianhua span{
    font-size: 26px;
    color: darkred;
}
/*导航*/
.nav{
    height: 39px;
    width: 100%;
    background: url("../images/nav_bg.jpg") repeat-x;
}
.nav li{
    list-style: none;
    float: left;
    line-height: 39px;
    padding: 0 28px;
}
.nav li.a , .nav li:hover{
    background: url("../images/nav_hover.jpg") repeat-x;
}
.nav a{
    color: #fff;
    font-size: 16px;
    text-decoration: none;
}
/*center*/
.ad{
    margin-bottom: 10px;
}
.tit{
    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;
}
.jianjie{
    width: 540px;
    height: 360px;
    margin-right: 20px;
}
.jj_c img{
    float: left;
    margin: 0 10px 10px 0;
}
.jj_c p{
    color: #616161;
    text-indent: 24px;
}
.xinwen{
    width: 400px;
    height: 360px;
}
.chanpin{
    width: 100%;
    height: 300px;
}
.xw_c{

}
.xw_c li{
    list-style: none;
    height: 24px;
    line-height: 24px;
    position: relative;
    padding-left: 15px;
    margin-bottom: 6px;
    background: url("../images/list_bg.jpg") no-repeat center left;
}
.xw_c li.a{
    background: none;
    padding: 0;
    height: 76px;
}
.xw_c li img{
    float: left;
    margin: 0 10px 10px 0;
}
.xw_c span{
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 12px;
    color: #888888;
}
.xw_c h3{
    font-weight: normal;
    font-size: 14px;
}
.xw_c a{
    color: #616161;
    text-decoration: none;

}
.xw_c p{
    font-size: 12px;
    color: #888;
    text-indent: 24px;
}
.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;
    height: 20px;
    width: 131px;
    padding: 0 10px;
    color: #fff;
    background: darkred;
    overflow: hidden;
}
.cp_c li a:hover span{
    display: block;
}
.cp_c li img{
    float: left;
}
.cp_c li.mr_0{
    margin-right: 0;
}
/*footer*/
.footer{
    height: 103px;
    width: 100%;
    background: url("../images/footer_bg.jpg") repeat-x;
}
.footer_top{
    height: 80px;
    line-height: 80px;
    color: #fff;
}
.footer_top .z{
    font-size: 16px;
}
.footer_top a{
    color: #fff;
    text-decoration: none;
}
.footer_bottom p{
    color: #f60;
}
.footer_bottom a{
    color: #888;
    text-decoration: none;
    margin-right: 10px;
}
.footer_bottom a:hover{
    color: #f60;
}