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

最新推荐文章于 2020-05-27 10:30:40 发布

原创最新推荐文章于 2020-05-27 10:30:40 发布 · 1.5k 阅读

6 ·

CC 4.0 BY-SA版权

JavaEE技术专栏收录该内容

7 篇文章

订阅专栏

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

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

素材下载（包含源码）

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

图1

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

图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">
          天气预报
        </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">
         
           <img src="web/images/icon2.gif" />
          <span>今日推荐</span>
        </div>
        <div id="div9">
         <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"> </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"> </div>
        <div id="div16">
        <img src="web/images/icon2.gif" /><span>宾馆酒店</span>
        </div>
        <div id="div17"> </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;
}