9.5笔记

墨染雨

于 2019-09-16 19:00:23 发布

阅读量99

点赞数

分类专栏： WEB前端

本文链接：https://blog.csdn.net/qq_39857903/article/details/100897908

版权

WEB前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

今天做的网页
html代码:

<!doctype html>

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html;charset=gb2312"/>
  <meta name="Author" content="chenhao">
  <meta name="Keywords" content="新疆,美丽的地方">
  <meta name="Description" content="新疆是一个美丽的地方，让人神往的地方，每年都会有很多游人来此游玩">
  <link href="css.css" rel="stylesheet" type="text/css">
  <title>新疆旅游网</title>
 </head>
 <body>
    <!--整个外层容器-->
	<div id="container">
	    <!--banner条-->
		<div id="banner">
			<img src="images/banner.jpg" alt="新疆风光"/>
		</div>

<!--全局导航条-->
<div id="globallink">
   <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">
		<h3><span>天气查询</span></h3>
		<ul>
			<li>乌鲁木齐&nbsp;&nbsp;&nbsp;雷阵雨 20℃-31℃</li>
			<li>吐鲁番&nbsp;&nbsp;&nbsp;多云转阴 20℃-28℃</li>
			<li>喀什&nbsp;&nbsp;&nbsp;阵雨转多云 25℃-32℃</li>
			<li>库尔勒&nbsp;&nbsp;&nbsp;阵雨转阴 21℃-28℃</li>
			<li>克拉马依&nbsp;&nbsp;&nbsp;雷阵雨 26℃-30℃</li>
		</ul>
	</div>	
	<div id="today">
		<h3><span>今日推荐</span></h3>
		<ul>
			<li><a href="#"><img src="images/tuijian1.jpg"></a></li>
			<li><a href="#">喀纳斯河</a></li>
			<li><a href="#"><img src="images/tuijian2.jpg"></a></li>
			<li><a href="#">布尔津</a></li>
			<li><a href="#"><img src="images/tuijian3.jpg"></a></li>
			<li><a href="#">天山之路</a></li>
		</ul>
	</div>
</div>

    <div id="middle">
       <div id="ghost"><a href="#" title="魔鬼城探秘"><img src="images/ghost.jpg" border="0"></a></div>
    	<div id="beauty">
    		<h3><span>美景寻踪</span></h3>
    		<ul>
    			<li><a href="#"><img src="images/beauty1.jpg"></a></li>
    			<li><a href="#"><img src="images/beauty2.jpg"></a></li>
    			<li><a href="#"><img src="images/beauty3.jpg"></a></li>
    			<li><a href="#"><img src="images/beauty4.jpg"></a></li>
    		</ul>
    	</div>
    	<div id="route">
    		<h3><span>线路精选</span></h3>
    		<ul>
    			<li><a href="#">吐鲁番——库尔勒——库车——塔中——和田——喀什</a></li>
    			<li><a href="#">乌鲁木齐——天池——克拉马依——乌伦古湖——喀纳斯</a></li>
    			<li><a href="#">乌鲁木齐——奎屯——乔尔玛——那拉提——巴音布鲁克</a></li>
    			<li><a href="#">乌鲁木齐——五彩城——将军隔壁——吉木萨尔</a></li>
    		</ul>
    	</div>
    </div>

 <!--右侧栏-->
<div id="right">
	<div id="map">
		<h3><span>新疆风光</span></h3>
		<p><a href="#" title="点击看大图"><img src="images/map1.jpg"></a></p>
		<p><a href="#" title="点击看大图"><img src="images/map2.jpg"></a></p>
	</div>
	<div id="food">
		<h3><span>小吃推荐</span></h3>
		<ul>
			<li><a href="#">17号抓饭</a></li>
			<li><a href="#">大盘鸡</a></li>
			<li><a href="#">五一夜市</a></li>
			<li><a href="#">水果</a></li>
		</ul>
	</div>
	<div id="life">
		<h3><span>宾馆酒店</span></h3>
		<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>
		</ul>
	</div>
</div>

<div id="footer">
	<p>艾萨克 &copy;版权所有 <a href="mailto:demo@demo.com">demo@demo.com</a></p>
</div>

css代码如下：

body{
    background-color:#2286c6;
	margin:0px;
	padding:0px;
	text-align:center;
	font-size:12px;
	font-family:Arial;
}
#container{
	margin:0px auto;
	width:780px;
	height:600px;
	text-align:left;
}

#globallink{
	margin:0px; padding:0px;
}

#globallink ul{
	list-style-type:none;
	margin:0px;
	padding:0px;
}

#globallink li{
	float:left; 
	text-align:center;
	width:78px;	
}

#globallink a{
	display:block;
	padding:9px 6px 11px 6px;
	background:url("images/button1.jpg") no-repeat;
	margin:0px;
}

#globallink a:link, #globallink a:visited{
	color:#004a87;
	text-decoration:underline;
}
#globallink a:hover{
	color:#FFFFFF;
	text-decoration:none;
	background:url("images/button1_bg.jpg") no-repeat;
}


#left{
	float:left;
	width:200px;
	margin:0px;
	padding:0px 0px 5px 0px;
	background-color:#FFFFFF;
	color:#d8ecff;
}

#left div{
	background-color:#5ea6eb;
	margin:0px 5px 0px 5px;
}

#weather{
	background:url("images/weather.jpg") no-repeat -5px 0px; 
	margin:0px 5px 0px 5px; 
	background-color:#5ea6eb;
}

#left #weather h3{
	font-size:12px;
	padding:24px 0px 0px 74px;
	color:#FFFFFF;
	background:none;
	margin:0px;
}

div#weather ul{
	margin:8px 5px 0px 5px;
	padding:10px 0px 8px 5px;	
	list-style-type:none;
}
#weather ul li{
	background:url("images/icon1.gif") no-repeat 0px 6px;
	padding:1px 0px 0px 10px;
}
#left div h3{
	font-size:12px;
	padding:4px 0px 2px 15px;
	color:#003973;
	margin:0px 0px 5px 0px;
	background:#bbddff url("images/icon2.gif") no-repeat 5px 7px;
}

#today{
	padding:0px 0px 10px 0px;
}
#today ul{
	list-style-type:none;
	margin:-5px 0px 0px 0px;
	padding:0px;
}
#today ul li{
	text-align:center;
}
#today ul li img{
	border:1px solid #FFFFFF;
	margin:8px 0px 0px 0px;
}
#today ul li a:link, #today ul li a:visited{
	color:#d8ecff;
	text-decoration:none;
}
#today ul li a:hover{
	color:#FFFF00;
	text-decoration:underline;
}

#middle{
	background-color:#FFFFFF;
	margin:0px 2px 0px 2px;
	padding:5px 0px 0px 0px;
	width:400px; 
	float:left;
}

#middle div{
	margin-left:5px;
	margin-right:5px;
	position:relative;
}
#middle h3{
	margin:0px; padding:0px;
	height:41px;
}
#middle h3 span{
	display:none;		/* 文字去掉，换成图片 */
}

#beauty{
	margin:15px 0px 0px 0px;
	padding:0px;
}
#beauty h3{
	background:url("images/picture_h1.gif") no-repeat;
}
#beauty ul, #route ul{
	list-style:none;
	margin:8px 1px 0px 1px;
	padding:0px;
}
#beauty ul li{
	float:left;
	width:97px;
	text-align:center;
}
#beauty ul li img{
	border:1px solid #4ab0ff;
}
#route{
	clear:both; margin:0px;
	padding:5px 0px 15px 0px;
}
#route h3{
	background:url("images/route_h1.gif") no-repeat;
}
#route ul li{
	padding:3px 0px 0px 30px;
	background:url("images/icon1.gif") no-repeat 20px 7px;
}
#route ul li a:link, #route ul li a:visited{
	color:#004e8a;
	text-decoration:none;
}
#route ul li a:hover{
	color:#000000;
	text-decoration:underline;
}

#right{
	float:left;
	margin:0px;
	width:176px;
	padding:0px 0px 5px 0px;
	background-color:#FFFFFF;
}

#right div{
	position:relative;
	margin-left:5px;
	margin-right:5px;
	background-color:#5ea6eb;
}
#right div h3{
	font-size:12px;
	padding:4px 0px 2px 15px;
	color:#003973;
	margin:0px 0px 5px 0px;
	background:#bbddff url("images/icon2.gif") no-repeat 5px 7px;
}
#map{
	margin-top:5px;	
}
#map p{
	text-align:center;
	margin:0px;
	padding:2px 0px 5px 0px;
}
#map p img{
	border:1px solid #FFFFFF;
}

#food{
	padding-top:10px;
}
#food ul, #life ul{
	list-style:none;
	padding:0px 0px 10px 0px;
	margin:10px 10px 0px 10px;
}
#food ul li, #life ul li{
	background:url(icon1.gif) no-repeat 3px 9px;
	padding:3px 0px 3px 12px;
	border-bottom:1px dashed #EEEEEE;
}
#food ul li a:link, #food ul li a:visited, #life ul li a:link, #life ul li a:visited{
	color:#d8ecff;
	text-decoration:none;
}
#food ul li a:hover, #life ul li a:hover{
	color:#000000;
	text-decoration:none;
}
#life{
	padding-top:10px;
	padding-bottom:5px;
	margin-bottom:5px;
}

#footer{
	background-color:#FFFFFF;
	margin:1px 0px 0px 0px;
	clear:both;
	position:relative;
	padding:1px 0px 1px 0px;
}
#footer p{
	text-align:center;
	padding:0px;
	margin:4px 5px 4px 5px;
	background-color:#5ea6eb;
}
#footer p a{
	color:#FFFFFF;
	text-decoration:none;
}

墨染雨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
9.5笔记

今天做的网页html代码:<!doctype html><html> <head> <meta http-equiv="Content-Type" content="text/html;charset=gb2312"/> <meta name="Author" content="chenhao"> <meta ...
复制链接

扫一扫