html/css网站demo实战

来源：互联网发布：免越狱安装软件编辑：程序博客网时间：2024/05/16 14:34

本demo结合最近的学习，做了一个的网页。

废话不多说了，直接上菜。

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>HTMLCSSDEMO</title>    <link rel="stylesheet" href="css/style.css"/></head><body>  <div class="header">      <div class="top">          <div class="ad">              <div class="wp">                  <div class="z">                <span>                    <a href="http://blog.csdn.net/u012859748">设为首页</a>                </span>                 <span>                    <a href="http://blog.csdn.net/u012859748">收藏本站</a>                </span>                  </div>                  <div class="y">                      <span>2016年9月3日</span>                      <span class="mr_0">晴 29℃/35℃</span>                  </div>              </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-500-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="http://blog.csdn.net/u012859748">学校首页</a>                  </li>                  <li>                      <a href="http://blog.csdn.net/u012859748">学校简介</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="introduce z">          <div class="tit">              <img src="images/jianjie.jpg" alt=""/>              <span><a href="">More</a></span>          </div>          <div>              <div class="jj_c">                  <img src="images/jianjie_img.jpg" alt=""/>                  <p>                      G20峰会将于9月4日至5日在浙江杭州举行。应中国国家主席习近平邀请，30多位国家或国际组织领导人将与会，其中巴西总统特梅尔于当地时间8月31日正式就任后确定参加G20杭州峰会。                  </p>                  <p>                      东京非洲发展国际会议(TICAD)8月28日结束后，日本政府公布了安倍晋三首相访问肯尼亚同肯方发表的联合声明。                  </p>                  <p>                      但肯尼亚方面并没有发表这一联合声明，而且联合声明中有关涉海、涉安改内容与TICAD峰会刚刚发表的《内罗毕宣言》不符。                  </p>                  <p>                      东京非洲发展国际会议(TICAD)8月28日结束后，日本政府公布了安倍晋三首相访问肯尼亚同肯方发表的联合声明。                      但肯尼亚方面并没有发表这一联合声明，而且联合声明中有关涉海、涉安改内容与TICAD峰会刚刚发表的《内罗毕宣言》不符。                  </p>              </div>          </div>      </div>      <div class="news 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"/>                        <h3>G20峰会将于9月4日至5日在浙江杭州举行</h3>                        <span>2016-9-3</span>                    </a>                </li>                <li>                    <a href="">                        <h3>G20峰会将于9月4日至5日在浙江杭州举行</h3>                        <span>2016-9-3</span>                    </a>                </li>                <li>                    <a href="">                        <h3>G20峰会将于9月4日至5日在浙江杭州举行</h3>                        <span>2016-9-3</span>                    </a>                </li>                <li>                    <a href="">                        <h3>G20峰会将于9月4日至5日在浙江杭州举行</h3>                        <span>2016-9-3</span>                    </a>                </li>                <li>                    <a href="">                        <h3>G20峰会将于9月4日至5日在浙江杭州举行</h3>                        <span>2016-9-3</span>                    </a>                </li>                <li>                    <a href="">                        <h3>G20峰会将于9月4日至5日在浙江杭州举行</h3>                        <span>2016-9-3</span>                    </a>                </li>                <li>                    <a href="">                        <h3>G20峰会将于9月4日至5日在浙江杭州举行</h3>                        <span>2016-9-3</span>                    </a>                </li>                <li>                    <a href="">                        <h3>G20峰会将于9月4日至5日在浙江杭州举行</h3>                        <span>2016-9-3</span>                    </a>                </li>                <li>                    <a href="">                        <h3>G20峰会将于9月4日至5日在浙江杭州举行</h3>                        <span>2016-9-3</span>                    </a>                </li>            </ul>          </div>      </div>      <div class="product 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>G20峰会将于9月4日至5日在浙江杭州举行</span></a></li>                <li><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>G20峰会将于9月4日至5日在浙江杭州举行</span></a></li>                <li><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>G20峰会将于9月4日至5日在浙江杭州举行</span></a></li>                <li><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>G20峰会将于9月4日至5日在浙江杭州举行</span></a></li>                <li><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>G20峰会将于9月4日至5日在浙江杭州举行</span></a></li>                <li class="mr_0"><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>G20峰会将于9月4日至5日在浙江杭州举行</span></a></li>                <li><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>G20峰会将于9月4日至5日在浙江杭州举行</span></a></li>                <li><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>G20峰会将于9月4日至5日在浙江杭州举行</span></a></li>                <li><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>G20峰会将于9月4日至5日在浙江杭州举行</span></a></li>                <li><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>G20峰会将于9月4日至5日在浙江杭州举行</span></a></li>                <li><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>G20峰会将于9月4日至5日在浙江杭州举行</span></a></li>                <li class="mr_0"><a href=""><img src="images/chanpin_img.jpg" alt=""/><span>G20峰会将于9月4日至5日在浙江杭州举行</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">                © 2016 winson版权所有 ICP证:备158000000号            </span>      </div>      <div class="footer_bottom">          <p>              友情连接：<a href="http://www.baidu.com" target="_blank">百度</a><a href="http://www.163.com/" target="_blank">网易</a><a href="http://www.sohu.com" target="_blank">搜狐</a><a href="http://www.edu.com" target="_blank">教育部</a><a href="http://www.google.com" target="_blank">新闻网</a>          </p>      </div>  </div>  </div></body></html>

css也贴上吧。

/*通用样式*/*{margin: 0;padding: 0}body{ font: 16px/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: #305070;    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;}.introduce{    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;}.news{    width: 400px;    height: 360px;}.product{    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;}

附赠一效果图：

因为图片是我网上download的，看起来可能不太友好，勿怪。

1 0