html/css网站demo实战-前端--易笔记-weiyer.com

　　核心提示：本demo结合最近的学习，做了一个的网页。废话不多说了，直接上菜。!DOCTYPE htmlhtmlhead lang=enmeta charset=UTF-8titleHTMLCSSDEMO/tit...

本demo结合最近的学习，做了一个的网页。废话不多说了，直接上菜。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>HTMLCSSDEMO</title>
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body>
  <p class="header">
      <p class="top">
          <p class="ad">
              <p class="wp">
                  <p class="z">
                <span>
                    <a href="https://blog.csdn.net/u012859748">设为首页</a>
                </span>
                 <span>
                    <a href="https://blog.csdn.net/u012859748">收藏本站</a>
                </span>
                  </p>
                  <p class="y">
                      <span>2016年9月3日</span>
                      <span class="mr_0">晴 29℃/35℃</span>
                  </p>
              </p>
          </p>
      </p>
      <p class="wp">
      <p class="logos">
          <p class="logo z">
              <h1><a href="index.html"><img src="images/logo.jpg" alt="HTML+CSS实战"/></a></h1>
          </p>
          <p class="dianhua y">
              <span>客服热线：400-500-000</span>
          </p>
          <p 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>
          </p>
      </p>
      </p>
      <p class="nav">
          <p class="wp">
              <ul>
                  <li class="a">
                      <a href="https://blog.csdn.net/u012859748">学校首页</a>
                  </li>
                  <li>
                      <a href="https://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>
          </p>
      </p>
      </p>
  <p class="center">
     <p class="wp">
      <p class="ad">
          <img src="images/ad.jpg" alt=""/>
      </p>
      <p class="introduce z">
          <p class="tit">
              <img src="images/jianjie.jpg" alt=""/>
              <span><a href="">More</a></span>
          </p>
          <p>
              <p 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>
              </p>
          </p>
      </p>
      <p class="news z">
          <p class="tit">
              <img src="images/xinwen.jpg" alt=""/>
              <span><a href="">More</a></span>
          </p>
          <p 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>
          </p>
      </p>
      <p class="product z">
          <p class="tit">
              <img src="images/chanpin.jpg" alt=""/>
              <span><a href="">More</a></span>
          </p>
          <p 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>
          </p>
      </p>
   </p>
 </p>
  <p class="cl"></p>
  <p class="footer">
      <p class="wp">
      <p 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>
      </p>
      <p class="footer_bottom">
          <p>
              友情连接：<a href="https://www.baidu.com" target="_blank">百度</a><a href="https://www.163.com/" target="_blank">网易</a><a href="https://www.sohu.com" target="_blank">搜狐</a><a href="https://www.edu.com" target="_blank">教育部</a><a href="https://www.google.com" target="_blank">新闻网</a>
          </p>
      </p>
  </p>
  </p>
</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;
}

附赠一效果图：

html/css网站demo实战

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

html/css网站demo实战

时间：2016/9/5 9:52:56 点击：

本类热门

本类推荐

本类固顶

html/css网站demo实战

时间：2016/9/5 9:52:56 点击：

您可能感兴趣的文章

相关评论

发表我的评论

本类热门

本类推荐

本类固顶