web技术_css+div完成网页设计

本文介绍了一个关于新疆旅游的网站布局实现方案,包括HTML结构和CSS样式。网站包含了导航栏、天气预报、景点推荐等内容。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

素材下载(包含源码)

图一是给出欲完成的效果图:

web技术_css+div完成网页设计

图1

图2为自己完成的效果图:

web技术_css+div完成网页设计

图2

【源码】

html文件:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>渚?</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>例2</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div id="div0">
 <div id="div1">
  <img src="web/images/banner.jpg" />
 </div>
    <div id="div2">
      <a href="#">首页</a>
      <a href="#">新疆简介</a>
      <a href="#">风土人情</a>
      <a href="#">吃在新疆</a>
      <a href="#">路线选择</a>
      <a href="#">自助行</a>
      <a href="#">摄影摄像</a>
      <a href="#">游记精选</a>
      <a href="#">资源下载</a>
      <a href="#">雁过留声</a>
    </div>
    <div id="div3">
     <div id="div4">
         &nbsp;&nbsp;天气预报
        </div>
        <div id="div5">
         <div id="div6">
             <img src="web/images/icon1.gif" />
                <span>乌鲁木齐 雷阵雨 20℃-31℃</span></div>
            <div id="div6">
             <img src="web/images/icon1.gif" />
                <span>吐鲁番 多云转阴 20℃-28℃</span></div>
            <div id="div6">
             <img src="web/images/icon1.gif" />
                <span>喀什 阵雨转多云 25℃-32℃</span></div>
            <div id="div6">
             <img src="web/images/icon1.gif" />
                <span>库尔勒 阵雨转阴 21℃-28℃</span></div>
            <div id="div6">
             <img src="web/images/icon1.gif" />
                <span>克拉马依 雷阵雨 26℃-30℃</span></div>
            </div>
      <div id="div7">
        <div id="div8">
        &nbsp;
           <img src="web/images/icon2.gif" />
          <span>今日推荐</span>
        </div>
        <div id="div9">
        &nbsp;<br />
         <a href="#"><a href="#"><img src="web/images/tuijian1.jpg" /></a><br />
            <a href="#">喀纳斯河</a>
         <a href="#"><img src="web/images/tuijian2.jpg" /></a><br />
            <a href="#">布尔津</a>
            <a href="#"><img src="web/images/tuijian3.jpg" /></a><br />
            <a href="#">天山之路</a>
        </div>
      </div>       
    </div>
    <div id="div10">
     <div id="div11"><a href="#"><img src="web/images/ghost.jpg" alt="魔鬼城探秘" /></a></div>
        <div id="div12"><img src="web/images/picture_h1.gif" /></div>
        <div id="div13">
         <a href="#"><img src="web/images/beauty1.jpg" /></a>
            <a href="#"><img src="web/images/beauty2.jpg" /></a>
            <a href="#"><img src="web/images/beauty3.jpg" /></a>
            <a href="#"><img src="web/images/beauty4.jpg" /></a>
        </div>
        <div id="div12"><img src="web/images/route_h1.gif" /></div>
        <div id="div14">
         <img src="web/images/icon1.gif" /><a href="#">吐鲁番——库尔勒——库车——塔中——和田——喀什</a><br />
            <img src="web/images/icon1.gif" /><a href="#">乌鲁木齐——天池——克拉马依——乌伦古湖——喀纳斯</a><br />
            <img src="web/images/icon1.gif" /><a href="#">乌鲁木齐——奎屯——乔尔玛——那拉提——巴音布鲁克</a><br />
            <img src="web/images/icon1.gif" /><a href="#">乌鲁木齐——五彩城——将军隔壁——吉木萨尔</a><br />
        </div>
    </div>
   <div id="div15">
     <div id="div16">
         <img src="web/images/icon2.gif" /><span>新疆风光</span>
        </div>
        <div id="div17">
        <a href="#"><img src="web/images/tuijian1.jpg" alt="点击查看大图"/></a><br />
        <a href="#"><img src="web/images/tuijian2.jpg" alt="点击查看大图"/></a>
        </div>
        <div id="div16">
         <img src="web/images/icon2.gif" /><span>小吃推荐</span>
        </div>
        <div id="div17">&nbsp;</div>
        <div id="div18"><img src="web/images/icon1.gif" /><a href="#">17号抓饭</a></div>
        <div id="div18"><img src="web/images/icon1.gif" /><a href="#">大盘鸡</a></div>
        <div id="div18"><img src="web/images/icon1.gif" /><a href="#">五一夜市</a></div>
        <div id="div18"><img src="web/images/icon1.gif" /><a href="#">水果</a></div>
        <div id="div17">&nbsp;</div>
        <div id="div16">
         <img src="web/images/icon2.gif" /><span>宾馆酒店</span>
        </div>
        <div id="div17">&nbsp;</div>
        <div id="div18"><img src="web/images/icon1.gif" /><a href="#">美丽华大饭店</a></div>
        <div id="div18"><img src="web/images/icon1.gif" /><a href="#">海德大饭店</a></div>
        <div id="div18"><img src="web/images/icon1.gif" /><a href="#">银都大饭店</a></div>
        <div id="div18"><img src="web/images/icon1.gif" /><a href="#">鸿福大饭店</a></div>
        <div id="div18"><img src="web/images/icon1.gif" /><a href="#">友好大酒店</a></div>
        <div id="div18"><img src="web/images/icon1.gif" /><a href="#">棉麻宾馆</a></div>
        <div id="div18"><img src="web/images/icon1.gif" /><a href="#">电信宾馆</a></div>
   </div>
  </div>
  <div id="div19">
   <div id="div20">艾萨克 版权所有 <a href="mailto:demo@demo.com">demo@demo.com</a></div>
  </div>
</div>
</body>
</html>
css文件:

@charset "utf-8";

  body{
   width:auto;
   margin:0 auto;
   background-color:#06F;
  }
  #div0{
   width:790px;
   margin:0 auto;
   background-color:#FFF;
  }
  #div1{
   width:783px;
   height:150px;
   margin-bottom:-3px;
   margin:0 auto;
  }
  #div2{
   width:783px;
   height:33px;
   margin:0 auto;
   margin-top:-4px;
   text-align:center;
   background-image:url(web/images/button1.jpg);
   background-repeat:repeat-x;
   border-bottom-style:solid;
   border-bottom-color:#0CF;
   border-bottom-width:2px;
  }
  #div2 a{
   display:block;
   width:78px;
   height:33px;
   float:left;
   font-size:12px;
   margin:0px auto;
   line-height:30px;
  }
  #div2 a:link{
   color:#06C;
  }
  #div2 a:visited{
   color:#06C;
  }
  #div2 a:hover{
   background-image:url(web/images/button1_bg.jpg);
   background-color:#F00;
  }
  #div2 a:active{
   color:#06C;
  }
  #div3{
   width:200px;
   margin:0px auto;
   float:left;
   padding:0px;
   border-right-color:#09F;
   border-right-style:solid;
   border-right-width:3px;
  }
  #div3 #div4{
   height:47px;
   text-align:center;
   background-image:url(web/images/weather.jpg);
   line-height:47px;
   font-size:14px;
   color:#FFF;
  }
  #div3 #div5{
   width:200px;
   background-color:#03F;
   text-align:center;
   background-color:#FFF;
  }
  #div5 #div6{
   width:190px;
   text-align:center;
   font-size:12px;
   background-color:#09F;
  }
  #div3 #div7{
   background-color:#FFF;
   text-align:center;
  }
  #div7 #div8{
   width:190px;
   text-align:left;
   font-size:12px;
   color:#00F;
   background-color:#06C;
  }
  #div7 #div9{
   width:190px;
   background-color:#09F;
   text-align:center;
   color:#FFF;
   font-size:12px;
  }
  #div9 img{
   border:1px #FFF solid;
  }
  #div9 a{
   color:#FFF;
   text-decoration:none;
  }
  #div9 a:hover{
   color:#CF0;
   text-decoration:underline;
  }
  #div10{
   float:left;
   width:400px;
   margin:0 auto;
   background-color:#FFF;
   text-align:center;
  }
  #div10 #div11{
   margin:5px auto;
   width:390px;
  }
  #div11 a:visited{
   border-style:none;
  }
  #div11 img{
   border-style:none;
  }
  #div10 #div12{
   text-align:left;
   margin-left:0em;
  }
  #div13 a img{
   margin-left:0.5em;
   border:1px #0CF solid;
  }
  #div14 img{
   margin-left:1em;
  }
  #div14{
   font-size:12px;
   text-align:left;
  }
  #div14 a{
   margin-left:1em;
   text-decoration:none;
   color:#06F;
  }
  #div14 a:hover{
   text-decoration:underline;
   color:#000;
  }
  #div15{
   float:left;
   width:180px;
   margin:0 auto;
   border-left:3px #09F solid;
  }
  #div16{
   color:#00F;
   background-color:#099;
  }
  #div16 img{
   margin-left:0.5em;
   margin-right:0.5em;
  }
  #div16 span{
   font-size:12px;
  }
  #div17{
   background-color:#09F;
  }
  #div17 a img{
   margin-top:0.2em;
   margin-left:0.2em;
   border:1px #FFF solid;
  }
  #div18{
   background-color:#09F;
   border-bottom:1px #0CF dashed;
  }
  #div18 img{
   margin-left:1em;
  }
  #div18 a{
   margin-left:1em;
   text-decoration:none;
   font-size:14px;
   color:#fff;
  }
  #div18 a:hover{
   text-decoration:none;
   color:#000;
  }
  #div19{
   width:790px;
   height:20px;
   background-color:#FFF;
   margin:0 auto;
   border-top:2px #09F solid;
  }
  #div19 #div20{
   text-align:center;
   font-size:12px;
   background-color:#09F;
   height:15px;
   margin:5px 5px;
  }
  #div20 a{
   color:#FFF;
   text-decoration:none;
  }
  #div20 a:hover{
   text-decoration:underline;
  }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值