54-html页面小项目------------新疆行之书

原创 2013年12月06日 09:01:40

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="layout.css" rel="stylesheet" type="text/css">
</head>


<body>
<div id="container">
  <div id="banner"><img src="images\banner.jpg"></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>
    <br>
  </div>
  <div id="left">
    <div id="weather">
      <h3><span>天气查询</span></h3>
      <ul>
        <li>乌鲁木齐   雷阵雨 20℃-31℃</li>
        <li>吐鲁番   多云转阴 20℃-28℃</li>
        <li>喀什   阵雨转多云 25℃-32℃</li>
        <li>库尔勒   阵雨转阴 21℃-28℃</li>
        <li>克拉玛依   雷阵雨 26℃-30℃</li>
      </ul>
      <br>
    </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>
      <br>
    </div>
  </div>
  <div id="middle">
    <div id="ghost"><a href="#" title="魔鬼域探秘"><img src="images\ghost.jpg" 

border="0"></a></div>
    <div id="beauty">
      <h3> </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>
      <br>
    </div>
    <div id="route">
      <h3> </h3>
      <ul>
        <li><a href="#">吐鲁番--库尔勒--库车--塔中--和田--喀什</a></li>
        <li><a href="#">乌鲁木齐--天池--克拉玛依--乌伦古湖--喀纳斯</a></li>
        <li><a href="#">乌鲁木齐--奎屯--乔尔玛--那拉提--巴音布鲁克</a></li>
        <li><a href="#">乌鲁木齐--五彩城--将军隔壁--吉木萨尔</a></li>
      </ul>
      <br>
    </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>
      <br>
    </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>
      <br>
    </div>
  </div>
  <div id="footer">
    <p>艾萨克 ©版权所有 <a 

href="mailto:issacnewtonc@tom.com">issancewtonc@tom.com</a></p>
  </div>
</div>
</body>
</html>



css部分:

body{
	background-color:#2286c6;
	margin: 0px;
	padding:0px;
	text-align:center;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
}
#container{
	position:relative;
	margin:0px auto 0px auto;
	width:780px;
	text-align:left;
}
div br{
	display:none;
}
#globallink{
	margin:0px; padding:0px;
}
#globallink ul{
    list-style:none;
	padding:0px; margin: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:underline;
	background:url(images/button1_bg.jpg) no-repeat;
}

#left{
	float:left;
	width:200px;
	background-color:#FFFFFF;
	margin:0px;
	padding:0px 0px 5px 0px;
	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;
}
div#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: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: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 0px 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 0px 1px 2px;
	width:176px;
	background-color:#FFFFFF;
	color:#d8ecff;
}
#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(images/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;
}


 

图片下载地址:http://download.csdn.net/detail/u010653050/6666495

快速学习HTML开发(从学习到项目上线用3周时间)

首先要声明, 我不知道我这种方法对没有任何开发经验的人,有没有帮助。 但是,如果你有一门编程经验,这个应该可以帮到你。 就先不念念叨叨了,我们进入下面的学习吧。 * 我自己用了一个星期学习,又用了...
  • mxh1988123
  • mxh1988123
  • 2015年08月29日 01:15
  • 635

HTML5最佳实战项目

  • 2015年09月23日 17:16
  • 335KB
  • 下载

网页设计图片素材网站 收集

http://www.17sucai.com/ 17素材网 http://www.nipic.com/index.html 昵图网
  • u013682842
  • u013682842
  • 2015年11月11日 12:07
  • 861

下载网页相关知识

分析页面头req = urllib2.Request(http://www.pythoncool.com)req.info()即可返回meta信息
  • damingg
  • damingg
  • 2009年12月18日 13:01
  • 388

HTML项目实战程序下载

  • 2008年04月27日 16:20
  • 300KB
  • 下载

HTMl小项目

  • 2014年09月12日 12:43
  • 7.79MB
  • 下载

网页设计素材

(Loading)页面加载图标:http://www.sj33.cn/sc/GIF/200803/15016.html
  • Junehacker
  • Junehacker
  • 2011年01月11日 13:02
  • 302

我的部分新疆印象兼答有关网友的北疆提问(新浪旧贴)

(原帖2001年7月18日发表于新浪论坛)我是1995年夏季在新疆游荡的,好多年没去了,希望我的记忆还能帮各位的忙。我当年是从乌鲁木齐坐长途客运车先到达阿勒泰,再转车到布尔津的。阿勒泰是个安静的小城,...
  • gracexu
  • gracexu
  • 2007年04月19日 20:58
  • 705

学习HTML的小项目程序

  • 2012年07月31日 16:51
  • 19.18MB
  • 下载

为何新疆的股权投资企业所得税是12%,个人所得税是16%

终于整明白了: 1、国家和地方,对于所得税分享比例为6:4 2、正常的企业所得税为25%,西部大开发企业所得税可以优惠到15%,新疆本地还有本地留存部分减半征收政策,本地留存企业所得税应为6%,减半征...
  • charleslei
  • charleslei
  • 2015年09月10日 12:24
  • 6003
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:54-html页面小项目------------新疆行之书
举报原因:
原因补充:

(最多只允许输入30个字)