html 谁知道用html怎么做到像桂林生活网的那种导航条啊

html 谁知道用html怎么做到像桂林生活网的那种导航条啊,第1张

三种办法,最简单的一种:做一个flash插进网页即可;第二中,自己编写javascript代码;第三种:调用jquery。第一种方法最简单,不需要什么技术,用DW软件插入即可,第二种第三种需要有javascript的知识才行

( 源代码 )

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title></title>

<link rel="stylesheet" type="text/css" href="css/wai.css"/>

</head>

<body>

<div class="box">

<div class="top_box">桂林天气预报</div>

<dl class="date_box">

<dt class="tubiao"><img src="img/3.jpg"/></dt>

<dt class="date">2012年03月14日</dt>

<dt class="gl">桂林</dt>

<dt class="zy">气象信息由<span>中央气象</span>台提供</dt>

</dl>

<dl class="nav_box1">

<dt class="current">当前天气</dt>

<dt class="say"><img src="img/2.jpg"/></dt>

<dt class="shower"><p class="zy2">阵雨</p><p>12℃~18℃</p></dt>

<dt class="wz">

<ul>

<li class="fl">·风力:北风小于3级</li>

<li>·紫外线强度:弱</li>

<li>·空气质量:良</li>

</ul>

</dt>

</dl>

<dl class="nav_box2">

<dt class="current">72小时天气预报</dt>

<dt class="date2">2012-03-14</dt>

<dt class="date2">2012-03-15</dt>

<dt class="date2">2012-03-16</dt>

<dt class="say2"><img src="img/1.jpg"/></dt>

<dt class="say2"><img src="img/1.jpg"/></dt>

<dt class="say2"><img src="img/1.jpg"/></dt>

<dt class="wz2">

<ul>

<li>阵雨</li>

<li>12℃~18℃</li>

<li>北风小于3级</li>

</ul>

</dt>

<dt class="wz2">

<ul>

<li>阵雨</li>

<li>12℃~18℃</li>

<li>北风小于3级</li>

</ul>

</dt>

<dt class="wz2">

<ul>

<li>阵雨</li>

<li>12℃~18℃</li>

<li>北风小于3级</li>

</ul>

</dt>

</dl>

<dl class="nav_box3">

<dt class="tubiao2"><img src="img/4.jpg"/></dt>

<dt class="city">城市指数</dt>

<dt class="gd"><a href="#">更多</a></dt>

<dt class="ht"></dt>

<dt class="nav3_l">

<ul>

<li>穿衣指数</li>

<li>舒适度指数</li>

<li>晨练指数</li>

<li>感冒指数</li>

<li>空调指数</li>

<li>洗车指数</li>

<li>空气污染指数</li>

<li>啤酒指数</li>

<li>晾晒指数</li>

<li>旅行指数</ul>

</ul>

</dt>

<dt class="nav3_z">

<ul>

<li>舒适</li>

<li>舒适</li>

<li>较不宜</li>

<li>易发</li>

<li>较少开启</li>

<li>不宜</li>

<li>良</li>

<li>较适宜</li>

<li>不太适宜</li>

<li>适宜</ul>

</ul>

</dt>

<dt class="nav3_r">

<ul>

<li>建议着溥型套装或牛仔衫裤等春秋过渡装。年老体弱者宜着套装...</li>

<li>温度适宜,风力不大,您在这样的天气条件下,会感到比较清爽和...</li>

<li>有降水,较不宜晨练,室外锻炼清携带雨具.建议年老体弱人群适...</li>

<li>昼夜温差大,且空气湿度较大,易发生感冒,请注意适当增减衣服...</li>

<li>您将感到很舒适,一般不需要开启空调...</li>

<li>不宜洗车,未来24小时内有雨,如果在此期间洗车,雨水和路上...</li>

<li>气象条件有利于空气污染物稀释、扩散和清除,可以室外正常活动...</li>

<li>适理的饮用啤酒可能会增加您舒适的感觉,但要注意适千万不要过...</li>

<li>有降水,可能会淋湿晾晒的衣物,不太适宜晾晒,请随时注意天气...</li>

<li>有降水,温度适宜,在细雨中游玩别有一番情调,可不要错过机会...</ul>

</ul>

</dt>

</dl>

</div>

</body>

</html>

(CSS样式)

*{

margin: 0

padding: 0

}

ul li{

list-style: none

}

.top_box{

width: 100px

height: 30px

background: #FFFFFF

text-align:center

line-height: 30px

color:blue

font-weight: bold

position: absolute

margin-left: 255px

margin-top: -18px

}

.box{

width: 590px

height: 651px

border: 1px solid #0c5d0b

margin: 20px auto

background: #FFFFFF

position: relative

}

.date_box{

width: 550px

height: 35px

margin: 5px auto

background: url(../img/5.jpg)no-repeat

}

.tubiao{

width: 35px

}

.tubiao img{

margin-left: 10px

}

.date{

width: 130px

}

.gl{

width: 50px

}

.tubiao ,.date ,.gl ,.zy{

float: left

height: 35px

height: 35px

color: #b60329

font-size: 14px

line-height: 35px

font-weight: bold

}

.zy{

width: 230px

float: right

text-align: center

}

.zy span{

color: black

}

.nav_box1{

width: 505px

height: 100px

border:1px solid gainsboro

margin: auto

margin: 5px auto

}

.current{

width: 505px

height: 25px

background: url(../img/6.jpg) no-repeat

color: #1c385a

line-height: 25px

text-indent: 1em

font-size: 14px

font-weight: bold

}

.say{

width: 180px

height: 75px

float: left

}

.say img{

margin: 10px 60px

}

.shower{

width: 140px

height: 75px

float: left

background: #edf1fa

text-align: center

color: #15376b

font-size: 14px

}

.zy2{

width: 140px

height: 20px

margin-top: 15px

}

.wz{

width: 185px

height: 75px

float: left

color: #15376b

font-size: 14px

}

.wz ul li{

list-style: none

text-align: center

}

.fl{

width: 185px

height: 20px

margin-top: 5px

}

.nav_box2{

width: 505px

height: 170px

border:1px solid gainsboro

margin: 5px auto

}

.date2{

width: 155px

height: 22px

float: left

margin-left:10px

margin-top: 10px

background: #eeeeee

font-size: 14px

text-align: center

line-height: 22px

}

.say2{

width: 155px

height: 55px

float: left

margin-left:10px

text-align: center

}

.say2 img{

margin-top: 10px

}

.wz2{

width: 155px

height: 50px

background: #eef3f7

float: left

margin-left:10px

}

.wz2 ul li{

list-style: none

text-align: center

font-size: 12px

}

.nav_box3{

width: 505px

height: 270px

border:1px solid gainsboro

margin: 5px auto

}

.city{

width: 100px

height: 35px

text-align: center

float: left

}

.tubiao2{

width: 35px

height: 35px

color: #b60329

float: left

}

.tubiao2 img{

margin-left: 20px

}

.gd{

width: 35px

height: 35px

float: right

}

.city ,.tubiao2 ,.gd{

font-weight: bold

font-size: 14px

line-height: 35px

}

.gd a{

text-decoration: none

color: black

display: block

}

.gd a:hover{

color: darkred

}

.ht{

width: 480px

height: 3px

margin: auto

background: url(../img/9.jpg) no-repeat

margin-top: 35px

}

.nav3_l{

width: 90px

height: 220px

float: left

font-size: 12px

}

.nav3_l ul li{

width: 90px

text-align: left

font-weight: bold

color: #15376B

text-indent: 1em

}

.nav3_z{

width: 60px

height: 220px

}

.nav3_z ul li{

width: 60px

text-align: left

font-weight: bold

color: #000000

}

.nav3_r{

width: 350px

height: 220px

}

.nav3_r ,.nav3_z{

font-size: 12px

float: left

}

.nav3_r ul li{

width: 350px

text-align: left

color: #666666

}

.nav3_r ul li ,.nav3_z ul li ,.nav3_l ul li{

font-weight: bold

line-height: 22px

height: 22px

}


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7524738.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-06
下一篇 2023-04-06

发表评论

登录后才能评论

评论列表(0条)

保存