jtahstu的博客

Git仓库   英文博客  

最新碎语:以后没事写写小的知识点吧

您的位置:jtahstu的博客 >笔记> 大三下软件项目开发实训第三天 - div+css布局(新疆行知书)

大三下软件项目开发实训第三天 - div+css布局(新疆行知书)

这个东西也花了本人一天的时间做的,兼容上有点小瑕疵,195行,请称呼本人195行

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>新疆行知书</title>
 <!--<link rel="stylesheet" type="text/css" href="style.css"/>-->
 <style type="text/css">
  body{background-color:#2285c8}
  body,hr,p,ul{margin:0;padding:0}
  #container{margin:0 auto;width:780px}
  #logo{height:150px;background-image:url("img/banner.jpg")}
  #nav{height:33px;background-color:#0c6}
  #nav ul{margin-top:0;margin-bottom:0;padding-left:0;list-style-type:none}
  #nav ul li{float:left;padding-top:7px;width:78px;height:26px;background-image:url("img/button1.jpg");text-align:center;font-size:9pt}
  #nav ul li:hover{background-image:url("img/button1_bg.jpg")}
  #nav ul li a{text-decoration:none}
  #left{width:200px;border-top:1px solid #fff}
  #left,#middel{float:left;height:600px;background-color:#fff}
  #middel{width:25pc;border:1px solid #1682ef}
  #right{float:left;width:174px;height:600px;border:1px solid #fff;background-color:#bdf}
  #weather{width:200px;height:145px;background-color:#fff}
  #weather-h{margin:0;padding-top:17px;height:30px;border-bottom:1px solid #fff;background-image:url("img/weather.jpg");font-size:14px}
  #weather-h span{padding-left:5pc;color:#fff}
  #weather-b{padding:5px 0;width:200px;background-color:#5da7f0;color:#fff;font-size:9pt}
  #weather-li{padding-left:20px;list-style-image:url("img/icon1.gif")}
  #recommend{width:200px;height:25px;background-color:#bdf}
  #recommend span{padding-top:2px;color:#09365f}
  #recommend-t{text-align:left;font-weight:700;font-size:13px}
  .icon{height:10px}
  #recommend-img{background-color:#5da6eb;text-align:center}
  .recommend-imgs{height:146px}
  .recommend-imgs span{margin:0,auto;padding-top:10px;width:200px;color:#fff;font-size:13px}
  .recommend-imgs img{margin-top:7px;border:1px solid;color:#fff}
  #pic-mid{padding-top:5px;text-align:center}
  .mid-img{padding-top:10px}
  #beautiful-ul{padding-right:15px;padding-left:11px}
  #beautiful-ul li{float:left;padding-left:10px;width:82px;list-style-type:none}
  #beautiful-ul li img{border:1px solid #00f}
  #line-ul ul{padding-top:5px;padding-left:46px;color:#244358;list-style-image:url("img/icon1.gif");font-size:9pt}
  #line-ul ul li{color:#0d527c}
  #footer{margin-top:5px;height:30px;text-align:center}
  #footer p{border:solid #fff 3px;background-color:#5da6eb;font-size:9pt}
  #mail{color:#fff;text-decoration:none}
  #view{padding-top:2px;width:174px;height:25px;background-color:#bdf;color:#09365f}
  #view-t{text-align:left;font-weight:700;font-size:14px}
  #view-img{padding-bottom:10px;background-color:#5da6eb;text-align:center}
  .view-imgs span{margin:0,auto;padding-top:10px;width:200px;color:#fff}
  .view-imgs img{margin-top:10px;border:1px solid;color:#fff}
  #snack{padding-top:2px;width:174px;height:25px;background-color:#bdf;color:#09365f}
  #snack-t{text-align:left;font-weight:700;font-size:14px}
  #snack-img{padding-bottom:10px;text-align:center}
  #snack-img,#snack-ul{background-color:#5da6eb}
  #snack-ul{height:93pt}
  #snack-ul ul{padding-top:20px;padding-left:20px;color:#fff;list-style-image:url(img/icon1.gif);font-size:13px}
  #snack-ul ul li{margin:0;padding:0;padding-left:5px;width:130px;border-bottom:dashed 1px #fff}
  #hotel{padding-top:2px;width:174px;height:25px;background-color:#bdf;color:#09365f}
  #hotel-t{text-align:left;font-weight:700;font-size:14px}
  #hotel-ul{height:165px;background-color:#5da6eb}
  #hotel-ul ul{padding-top:20px;padding-left:20px;color:#fff;font-size:13px}
  #hotel-ul ul li{margin:0;padding:0;padding-left:5px;width:130px;border-bottom:dashed 1px #fff;list-style-image:url("img/icon1.gif");}
 </style>
 <!--coding by jtahstu on 2016/5/25-->
</head>
<body>
 <div id="container">
  <div id="logo"></div>
  <div id="nav">
   <ul>
    <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>
    <li><a href="#">摄像摄影</a></li>
    <li><a href="#">游记精选</a></li>
    <li><a href="#">资源下载</a></li>
    <li><a href="#">雁过留声</a></li>
   </ul>
  </div>
  <div id="left">
   <div id="weather">
    <div id="weather-h">
     <span>天气查询</span>
    </div>
    <div id="weather-b">
     <ul id="weather-li">
      <li><span>乌鲁木齐 雷阵雨 20℃-31℃</span></li>
      <li><span>吐鲁番 多云转阴 20℃-28℃</span></li>
      <li><span>乌鲁木齐 雷阵雨 20℃-31℃</span></li>
      <li><span>乌鲁木齐 雷阵雨 20℃-31℃</span></li>
      <li><span>乌鲁木齐 雷阵雨 20℃-31℃</span></li>
     </ul>
    </div>
    <div id="recommend">
     <img src="img/icon2.gif" class="icon"/>
     <span id="recommend-t">
      今日推荐
     </span>
     <div id="recommend-img">
      <div class="recommend-imgs" >
       <img src="img/tuijian1.jpg"/>
       <br />
       <span>克拉斯河</span>
      </div>
      <div class="recommend-imgs">
       <img src="img/tuijian2.jpg"/>
       <br />
       <span>布尔津</span>
      </div>
      <div class="recommend-imgs">
       <img src="img/tuijian3.jpg"/>
       <br />
       <span>天山之路</span>
      </div>
     </div>
    </div>
   </div>
  </div>
  <div id="middel">
   <div id="pic-mid">
    <img src="img/ghost.jpg"/>
   </div>
   <img src="img/picture_h1.gif" class="mid-img"/>
   <div id="beautiful-ul">
    <ul>
     <li><img src="img/beauty1.jpg"/></li>
     <li><img src="img/beauty2.jpg"/></li>
     <li><img src="img/beauty3.jpg"/></li>
     <li><img src="img/beauty4.jpg"/></li>
    </ul>
   </div>
   <img src="img/route_h1.gif" class="mid-img"/>
   <div id="line-ul">
   <ul>
    <li>吐鲁番--库尔勒--库车--塔中--和田--喀什</li>
    <li>乌鲁木齐--天池--克拉玛依--乌伦古湖--喀纳斯</li>
    <li>乌鲁木齐--奎屯--乔尔玛--那拉提--巴音布鲁克</li>
    <li>乌鲁木齐--五彩城--建军隔壁--吉木萨尔</li>
   </ul>
  </div>
  </div>
  <div id="right">
   <div id="view">
    <img src="img/icon2.gif" class="icon"/>
    <span id="view-t">
     新疆风光
    </span>
    <div id="view-img">
     <div class="view-imgs" >
      <img src="img/map1.jpg"/>
     </div>
     <div class="view-imgs">
      <img src="img/map2.jpg"/>
     </div>
    </div>
    <div id="snack">
     <img src="img/icon2.gif" class="icon"/>
     <span id="snack-t">
      小吃推荐
     </span>
     <div id="snack-ul">
      <ul>
       <li>17号抓饭</li>
       <li>大盘鸡</li>
       <li>五一夜市</li>
       <li>水果</li>
      </ul>
     </div>
     <div id="hotel">
      <img src="img/icon2.gif" class="icon"/>
      <span id="hotel-t">
       宾馆酒店
      </span>
      <div id="hotel-ul">
       <ul>
        <li>美丽华大酒店</li>
        <li>海德大酒店</li>
        <li>银都大酒店</li>
        <li>鸿福大酒店</li>
        <li>友好大酒店</li>
        <li>棉麻宾馆</li>
        <li>电信宾馆</li>
       </ul>
      </div>
     </div>
    </div>
   </div>
  </div> 
  <div id="footer">
   <p>jtahstu&copy;版权所有 &nbsp;&nbsp; <a id="mail" href="mailto:root@jtahstu.com">root@jtahstu.com</a></p>
  </div>
 </div>
</body>
</html>
代码下载地址:http://oys4d26sw.bkt.clouddn.com/zip/xjxzs.zip

---

本文章采用 知识共享署名2.5中国大陆许可协议 进行许可,欢迎转载,演绎或用于商业目的。

---

二维码加载中...

扫一扫移动端访问O(∩_∩)O

发表评论

94 + 60 =
路人甲 表情
看不清楚?点图切换 Ctrl+Enter快速提交
正在加载中……