HTML+CSS实战项目

村里唯一的UI设计
3,673 阅读9分钟

学习了billiepander博客的代码。

原链接奉上：https://www.cnblogs.com/pengsixiong/p/4945040.html

稍微改动了些，换成自己的东西。页面和代码分享出来哈。

发现写页面也没想象中那么难。

有错误望指正。


HTML:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="author" content="huangxiaodong">
    <link rel="stylesheet" href="gualingmenghu.css" type="text/css">
    <title></title>
  </head>
  <body>
    <div class="black">
      <div class="core">
          <div class="l">
            <span><a href="#">设为首页</a></span>     <!--这里为什么不用<p></p> 要用<span></span>-->
            <span><a href="#">收藏本站</a></span>
            <span>2018/11/20 12:00:00</span>
          </div>
          <div class="r">
            <span><a href="#">登陆</a></span>
            <span class="zhuce"><a href="#">注册</a></span>
          </div>
      </div>
    </div>
                      <!-- 上面是登陆栏  -->

      <div class="logos">
          <div class="core">
            <div class="logos l">
              <h1><a href="gualingmenghu.html"><img src="images/logo.gif" alt="瓜岭村"/></h1>
            </div>
            <div class="phone r">
              <img src="images/phone.png" alt="电话">
                             <!-- 这个电话图标怎么对齐 -->
              <span>村务热线：400-666-666</span>
            </div>
        </div>
      </div>
                           <!-- 上面是顶部栏  -->
      <div class="nav">
        <div class="core">
          <ul>
            <li class="a">
              <a href="#">网站首页</a>
            </li>
            <li>
              <a href="#">政务公开</a>
            </li>
            <li>
              <a href="#">三资公开</a>
            </li>
            <li>
              <a href="#">政策法规</a>
            </li>
            <li>
              <a href="#">人才中心</a>
            </li>
            <li>
              <a href="#">咨询投诉</a>
            </li>
            <li>
              <a href="#">联系我们</a>
            </li>
          </ul>
        </div>
      </div>
                      <!-- 上面是导航栏 -->

      <div class="middle">
        <div class="core">
          <div class="ad">
            <img src="images/ad_bg.jpg" alt="广告图">
          </div>
          <div class="cont l">
            <div class="tit">
              <img src="images/cont.png" alt="瓜岭村"/>
              <span>更多>></span>
            </div>
            <div class="jj_c">
              <img src="images/diaolou.jpg" alt="瓜岭村"/>
              <p>瓜岭村既是行政村又是自然村，该村位于增城市新塘镇东部。明成宗年间，大多种瓜于此，搭棚看瓜，逐渐定居成村，故名瓜洲，又名瓜岭。瓜岭村位于新塘镇东部，广园东快速路沙埔出口。总面积0.6平方公里，4个村民小组， 183户、698人。村已实现“六通”（通水泥路、通电、通水、通电话、通有线电视、通公共汽车）。瓜岭村至今已有五百多年的历史，是广东著名的侨乡，旅居海外的华侨已超过两千。宁静古朴的瓜岭村，有传统的明清建筑，有异化的中欧式碉楼，有爱国爱乡的华侨，它是一个独特而多元化的人文载体。</p>
              <p>村拥有广东最具特色的碉楼：为防盗匪劫掠，保护村民，以黄田惠为首的海外侨胞解囊捐资，于1929年建成了“宁远楼”。抗战期间，该碉楼还抵御过日本侵略者，并可以看到碉楼铁窗上的弹痕。</p>
              <p>截止至2006年底，总面积0.6平方公里，辖4个村民小组， 共有179户，总人口有662人，其中外来人口约有120人。
</p>
            </div>
          </div>
          <div class="news l">
            <div class="tit">
              <img src="images/new.png" alt="瓜岭村"/>
              <span>更多>></span>
            </div>
            <div class="xw_c">
              <ul>
                <li class="a">
                  <a href="#">
                    <img src="images/citang.jpg" alt="瓜岭村"/>
                    <h3 class="biaoti">宁静的瓜岭村，传统的建筑</h3>
                    <p>广东最具特色的碉楼：为防盗匪劫掠，保护村民，以黄田惠为首的海外侨胞解囊捐资。村拥有广东最具特色的碉楼：为防盗匪劫掠。</p>

                  </a>
                </li>
                <li>
                  <a href="#">
                    <h3>瓜岭村是最美丽的村庄</h3>
                                       <!-- 为什么这里要用H3,下面却要用span -->
                    <span>2015-05-15</span>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <h3>瓜岭村是最美丽的村庄</h3>
                    <span>2015-05-15</span>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <h3>瓜岭村是最美丽的村庄</h3>
                    <span>2015-05-15</span>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <h3>瓜岭村是最美丽的村庄</h3>
                    <span>2015-05-15</span>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <h3>瓜岭村是最美丽的村庄</h3>
                    <span>2015-05-15</span>
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div class="hot l">
            <div class="tit">
              <img src="images/cp.png" alt="瓜岭村"/>
              <span>更多>></span>
            </div>
            <div class="cp_c">
              <ul>
                <li>
                  <a href="#">
                    <img src="images/hd.png" alt="瓜岭村"/>
                    <!-- <span>美丽村庄</span> -->
                  </a>
                </li>
                <li>
                  <a href="#">
                    <img src="images/hd2.png" alt="瓜岭村"/>
                    <!-- <span>美丽村庄</span> -->
                  </a>
                </li>
                <li>
                  <a href="#">
                    <img src="images/hd3.png" alt="瓜岭村"/>
                    <!-- <span>美丽村庄</span> -->
                  </a>
                </li>
                <li>
                  <a href="#">
                    <img src="images/hd4.png" alt="瓜岭村"/>
                    <!-- <span>美丽村庄</span> -->
                  </a>
                </li>
                <li>
                  <a href="#">
                    <img src="images/hd5.png" alt="瓜岭村"/>
                    <!-- <span>美丽村庄</span> -->
                  </a>
                </li>
                <li>
                  <a href="#">
                    <img src="images/hd6.png" alt="瓜岭村"/>
                    <!-- <span>美丽村庄</span> -->
                  </a>
                </li>
                <li class="mar0">
                  <a href="#">
                    <img src="images/hd7.png" alt="瓜岭村"/>
                    <!-- <span>美丽村庄</span> -->
                  </a>
                </li>
                <li>
                  <a href="#">
                    <img src="images/hd8.png" alt="瓜岭村"/>
                    <!-- <span>美丽村庄</span> -->
                  </a>
                </li>
                <li>
                  <a href="#">
                    <img src="images/hd9.png" alt="瓜岭村"/>
                    <!-- <span>美丽村庄</span> -->
                  </a>
                </li>
                <li>
                  <a href="#">
                    <img src="images/hd10.png" alt="瓜岭村"/>
                    <!-- <span>美丽村庄</span> -->
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
  </div>

  <div class="cl"></div>

  <div class="bottom l">
    <div class="core">
      <div class="about">
        <ul>
          <li>
            <span> <a href="#">关于我们</a></span>
          </li>
          <li>
            <span> <a href="#">|</a></span>
          </li>
          <li>
            <span> <a href="#">联系方式</a></span>
          </li>
          <li>
            <span> <a href="#">|</a></span>
          </li>
          <li>
            <span> <a href="#">给我留言</a></span>
          </li>
          <li>
            <span> <a href="#">|</a></span>
          </li>
          <li>
            <span> <a href="#">加入我们</a></span>
          </li>
        </ul>
      </div>
      <div>
        <span class="about2 r">Copyright ©1996-2018 SINA Corporation</span>
      </div>
    </div>
  </div>
    <div class="black2  l">
      <div class="foot">
        <span class="youqing">友情链接：</span>
        <span> <a href="#">中国政务</a></span>
        <span> <a href="#">广东政务</a></span>
        <span> <a href="#">广州政务</a></span>
        <span> <a href="#">增城政务</a></span>
      </div>
    </div>

  </body>
</html>

CSS：

*{
  margin:0;
}
/* body{
  font-size: 13px;
} */
img{ border: none }

.black{
  width: 100%;
  height: 26px;
  background: #1d1d1d;
  color: #e6e6e6;
  line-height: 26px;
  font-size: 13px;
}

.black span a,.black2 span a{
  color: #FFF;
}

.core{
  width: 980px;
  margin: 0 auto;
}

.l{
 float: left;
}

.r{
  float: right;
}

.black span{
  margin-right: 13px;
}

.black span.zhuce{
  margin: 0px;
}

a{
  text-decoration: none;
}

.black  a:hover,.nav a:hover,.black2 a:hover,.about a:hover{
  color: green;
}

/* --------------------------logo------------------------ */

.logos{
  height: 60px;
}

.phone span{
  height: 60px;
  line-height: 60px;
  font-size: 18px;
  font-weight: bold;
  /* padding-left:25px; */
  color: #333;
  /* background: url("images/phone.png") no-repeat center left; */
}
                /* 导航栏 */
.nav{
  width: 100%;
  height: 40px;
  background: url("images/nav_bg.png") repeat-x;
}

.nav li{
  list-style: none;
  float: left;
  line-height: 40px;
  margin-right: 30px;
  /* padding-right: 50px; */
  /* 网站首页前面有一个空格 不知道怎么去除 */
  /* 不知道怎么把导航栏的内容居中 */
}

.nav li:hover{
  background: url("images/nav_hover.png") repeat-x;
}

.nav li a {
  color: #fff;
  font-size: 16px;
  margin: 0 10px 0 10px;
}

             /* 下面这里是中间的内容 */
/* .ad{
  margin-bottom: 10px;
} */

.cont{
  width: 540px;
  margin-right: 20px;
  margin-top: 10px;
}

.tit{
  width: 100%;
  /* padding-bottom: 8px; */
  border-bottom: 1px solid darkred;
  position: relative;

  /* 上面这个有什么用   */
  margin-bottom: 10px;
}

.tit span{
  position: absolute;
  right: 0;
  bottom: 4px;
}

.jj_c img,.xw_c img{
  float: left;
  margin: 0 10px 0 0;
  width: 150px;
  height: 100px
}

.jj_c p,.biaoti{
  font-size: 12px;
  line-height: 24px;
  text-indent: 24px;
}

.news{
  width: 400px;
    margin-top: 10px;
}

.news ul,.bottom ul,.hot ul{
  padding-left: 0px;
}

.xw_c li{
  list-style: none;
  height: 24px;
  line-height: 24px;
  position: relative;
  padding-left: 15px;
  background: url("images/xw_dian.png") no-repeat center left;
  margin-bottom: 6px;
}

.xw_c li.a{
  background: none;
  padding: 0;
  height: 76px;
}
.xw_c a{
  color: #333333;
}

.xw_c li.a{
  margin-bottom: 30px;
  /* padding-bottom: 5px; */
}

.xw_c h3{
  font-weight: normal;
  font-size: 13px;
}

.xw_c span{
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 13px;
}

.xw_c p{
  color: #888;
  font-size: 12px;
  text-indent: 24px;
}

.hot{
  width: 100%;
  margin-bottom: 20px;
  margin-top: 10px;
}

.cp_c li{
  float: left;
  list-style: none;
  margin: 0 8px 0 0;
  /* width: 151px; */
  /* height: 95px; */
}


/* .cp_c span{
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 13px;
  width: 131px;
  height: 20px;
  padding: 0 10px;
  color: #fff;
  background: darkred;
  overflow: hidden;
} */

            /* 下面开始是页脚 */
.bottom{
  width: 100%;
  height: 100px;
    background-color: #11bfea;
    color: #fff;
}

.bottom li{
  list-style: none;
  float: left;
  margin-right: 20px;
  line-height: 100px;
}

.about2{
    line-height: 100px;
}

.bottom a{
  color: #fff;
}

.black2{
  width: 100%;
  height: 26px;
  background: #1d1d1d;
  font-size: 12px;
  color: #fff;
  line-height: 26px;
}

.foot{
  width: 980px;
  margin: 0 auto;
}

.youqing{
  color: red;
}
}
.black2 span{
  margin-right: 10px;
}


avatar
文章
阅读
粉丝