CSS+DIV练手——旅游网站

最新推荐文章于 2022-12-30 09:51:54 发布
最新推荐文章于 2022-12-30 09:51:54 发布
阅读量1w 收藏 127
点赞数 29
分类专栏： BS开发 文章标签： css div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xqf309/article/details/8150316
版权

        BS要结了，抽出空来拿CSS+DIV练练手，用了理解的会更深刻，这次做的是个旅游网站的界面（例子源于《精通CSS.DIV网页设计与布局》）。

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>
<link style="text/css" rel="stylesheet" href="css/journeyWeb.css"/>
</head>
<body>
	<div id="container">
		<div id="header">
			<img src="image/banner.jpg" alt="图片加载中"/>	
		</div>
		<div id="globalLink">
			<ul>
				<li><a href=www.baidu.com">首页</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>天气查询</sapn></h3>
				<ul>
					<li>乌鲁木齐   雷阵雨20℃-31℃</li>
					<li>吐鲁番   多云转阴20℃-28℃</li>
					<li>柴达木   雷阵雨转多云18℃-25℃</li>
					<li>库尔勒   雷阵雨20℃-31℃</li>
					<li>克拉玛依   雷阵雨20℃-31℃</li>
				</ul>
			</div>
			<div id="today">
				<h3><span>今日推荐</span></h3>
				<ul>
					<li><a href="#"><img src="image/tuijian1.jpg" ></a></li>
					<li class="sceneryname"><a href="#">克纳斯河</a></li>
					<li><a href="#"><img src="image/tuijian2.jpg" ></a></li>
					<li class="sceneryname"><a href="#">布尔津</a></li>
					<li><a href="#"><img src="image/tuijian3.jpg" ></a></li>
					<li class="sceneryname"><a href="#">天山之路</a></li>
				</ul>
			</div>
		</div>
		<div id="middle">
			<div id="ghost">
				<img src="image/ghost.jpg" alt="图片加载中"/>
			</div>
			<div id="beauty">
				<h3><img src="image/picture_h1.gif"/></h3>
				<ul>
					<li><a href="#"><img src="image/beauty1.jpg" /></a></li>
					<li><a href="#"><img src="image/beauty2.jpg" /></a></li>
					<li><a href="#"><img src="image/beauty3.jpg" /></a></li>
					<li><a href="#"><img src="image/beauty4.jpg" /></a></li>
				</ul>
				<br />
			</div>
			<div id="route">
				<h3><img src="image/route_h1.gif"/></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>新疆风光</h3>
				<div><a href="#"><img src="image/map1.jpg" alt="数据加载中"/></a></div>
				<div><a href="#"><img src="image/map2.jpg" alt="数据加载中"/></a></div>
			</div>
			<div id="food">
				<h3>小吃推荐</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="lift">
				<h3>宾馆酒店</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>清风 © 版权所有<a href="mailto:350676076@qq.com">350676076@qq.com</a></p>
		</div>
	</div>
</body>
</html>

 

CSS代码：

html{
	margin:0px;
	padding:0px;
	width:780px;
	margin:0 auto;
	font-size:12px;
	background-color:#2286C6;
}
body{

	margin:0px;
	padding:0px;
}
#header{
	width:780px;
	/*background-color:blue;*/
}

#globalLink{
	width:780px;
}
#globalLink a{
	display:block;
	padding:5px;
	background-image:url("../image/button1.jpg");
	background-repeat:no-repeat;
	   /*记得行内元素设置长度和宽度不好使，a标签不属于行内元素吗？*/
}
#globalLink ul{
	list-style:none;
	margin:0px;
	padding:0px;
}
#globalLink ul li{
	float:left;
	width:78px;
	text-align:center;
}


#globalLink a:link ,#globalLink a:visited{
	color:#004ab7;
	text-decoration:underline;
}

#globalLink a:hover{
	color:#ffffff;
	text-decoration:underline;
	background-image:url("../image/button1_bg.jpg");
}
#globalLink a:active{
	color:black;
}
#left{
	float:left;
	width:200px;
	background-color:#ffffff;

	margin:0px;
	padding:0px 0px 5px 0px;
	color:#d8ecff;
}

#weather{
	background:url(../image/weather.jpg)no-repeat -5px 0px;
	background-color:#53a6eb;
	margin:0px 5px;
}

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

#weather ul{
	list-style:none;
	margin:8px 5px 0px 5px;
	padding:10px 0px 8px 5px;
}

#weather ul li{
	background:url(../image/icon1.gif) no-repeat 0px 6px;
	padding:1px 0px 0px 10px;
}
#today{

	background-color:#5EA6EB;
	margin:5px;
	margin-top:0px;
}
#today h3{
	margin:0px;
	padding-left:20px;
	background-color:#BBDDFF;
	background-image:url("../image/icon2.gif");
	background-repeat:no-repeat;
	background-position:10px 50%;
	color:#004AB7;
	
}
#today ul{
	list-style:none;
	margin:0px;
	padding:8px;

}
#today ul li{
	text-align:center;
}

#today.sceneryname{
	padding-bottom:6px;
}

#today a:link ,#today a:visited{
	color:#D8ECFF;
	text-decoration:underline;
}

#today a:hover{
	color:#ffffff;
	text-decoration:underline;
}
#today a:active{
	color:black;
}

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

#middle #ghost img{
	margin-top:6px;
	margin-left:3px;

}

#beauty h3{
	margin:4px 0px;
}
#beauty  ul{
	list-style:none;
	margin:0px;
	padding:0px;
	padding:5px;
}
#beauty ul li{
	float:left;
	margin-right:9px;
	margin-bottom:5px;
	border:1px solid blue;
	height:123px;
}
#route h3{
	margin:4px 0px;
}

#route ul{
	list-style:none;
	padding:0px;
	margin:0px;
	padding:15px;
}
#route ul li{
	padding:1px 0px;
}
#route a:link ,#route a:visited{
	color:#004ab7;
	text-decoration:underline;
}

#route a:hover{
	color:#000000;
	text-decoration:underline;
}
#route a:active{
	color:black;
}

#right{
	float:left;
	margin:0px 0px 1px 2px;
	width:171px;
	background-color:#5EA6EB;
	color:#d8ecff;
}

#right h3{
	color:#004AB7;
	margin:0px;
	
	background-color:#BBDDFF;
	padding:8px;
	padding-left:18px;
	background-image:url("../image/icon2.gif");
	background-repeat:no-repeat;
	background-position:7px center;
	
}
#right #map a{
	margin:0px;
}

#right #map a img{
	margin:5px 10px;
}
#right a:link ,#right a:visited{
	color:#D8ECFF;
	text-decoration:underline;
}

#right a:hover{
	color:#ffffff;
	text-decoration:underline;
}
#right a:active{
	color:black;
}


#food ul,#lift ul{
	list-style:none;
	padding:0px 0px 10px 0px;
	margin:10px 10px 0px 10px;
}

#food ul li,#lift ul li{
	background-image:url("../image/icon1.gif");
	background-repeat:no-repeat;
	background-position:3px 9px;
	padding:3px 0px 3px 12px;
	border-bottom:1px dashed #EEEEEE;
	
}
#food a:link ,#food a:visited{
	color:#004ab7;
	text-decoration:underline;
}

#food a:hover{
	color:#000000;
	text-decoration:underline;
}
#food a:active{
	color:black;
}

#lift a:link ,#lift a:visited{
	color:#004ab7;
	text-decoration:underline;
}

#lift a:hover{
	color:#000000;
	text-decoration:underline;
}
#lift a:active{
	color:black;
}

#footer{
	background-color:#ffffff;
	margin:1px 0px;
	clear:both;
	position:relative;
	padding:1px 0px;
	}

#footer p{
	text-align:center;
	padding:0px;
	margin:4px 5px;
	background-color:#5ea6eb;
	
}

#footer p a{
	color:#ffffff;
	text-decoration:none;

}

 

       这段时间试着总结自己的“代码大全”，把不理解的和经典的代码段整理出来，积累久了肯定的、能大大的提高工作效率，有写常用的东西还可以封装起来，用的时候拿过来用就好了（比如像SQLHelper一类的）。

 

 

 

 

 

 

 


 

熊青峰
关注
  • 29
    点赞
  • 踩
  • 127
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
HTML＋CSS＋DIV网页设计与布局.pdf
05-07
以html语言为基础，围绕最新的css技术精髓展开深入讲解，包括认识网站开发、网页文字和图片、超链接、表格、多媒体、滚动字幕、列表、表单、框架、设置文本样式、设置网页背景样式、设置边框边距、元素布局、网页...
HTML+CSS简单的网页制作期末作业——浙江旅游景点介绍网页制作
qq_38512570的博客
04-04 133
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web
用HTML+CSS做一个漂亮简单的旅游网站——旅游网页设计与实现(6页)HTML+CSS+JavaScript
网页设计与制作 | HTML+CSS+JS
12-30 1124
🏀 精彩专栏推荐👇🏻👇🏻👇🏻 💝 【作者主页——🔥获取更多优质源码】 💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的
DIV+CSS实现旅游网站首页
bangzhou5573的博客
08-24 3752
<!DOCTYPE html>　　　　<html lang="en">　　　　<head>　　　　<meta charset="UTF-8">　　　　<title>旅游网站首页</title>　　　　</head>　　　　<body>　　　　<div>　　　　<img src...
学css推荐,无私推荐：学习css的几个好网站
weixin_34749183的博客
08-03 651
css是许多人梦寐以求学习的东西，当然也包括本人在内。但是，由于css是崭新的老技术，到底该如何去学，能系统的说说的人就不多了吧!~老衲我在互联网麽怕滚打了个数载，对这些美丽的技术也是很感兴趣滴!~相信许多和我一样的勤奋的菜鸟同学也有满世界找教程的痛苦吧。好了，不多说了，就偷偷告诉你们几个：前沿视频教室，这里不仅提供网页制作视频教程，还有动画制作、图像制作视频教程。其中css视频教程被转载的最多，...
HTML+CSS购物网站——小米有品
03-23
HTML+CSS购物网站——小米有品（含首页，购物车，个人信息，登录，商品详细信息，注册页面）
计算机毕业设计HTML+CSS+JavaScript——基于HTML花店购物网站项目与实现.md
08-10
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计...
HTML+CSS+JavaScript学习练手.zip
最新发布
01-01
HTML+CSS+JavaScript学习练手HTML+CSS+JavaScript学习练手 HTML+CSS+JavaScript学习练手HTML+CSS+JavaScript学习练手 HTML+CSS+JavaScript学习练手HTML+CSS+JavaScript学习练手 HTML+CSS+JavaScript学习练手...
HTML+CSS大作业——vivo官方商城
07-08
HTML+CSS大作业
web前端旅游页面div+css实现
12-17
这是一套完整的web前端旅游页面， 一共7个页面， 并且在登录、注册时具有js表单校验， 页面之间实现了跳转。
一个比较使用的旅游网页,漂亮的html+css网站模板、网页设计源码
12-25
DIV+CSS搭好框架，JS写好输入框事件。内附有字体和图片,现在下的人比较多积分自动增加了，有需要的可以下载。1
div+css设计的旅游网站
12-12
一个div+css设计的旅游网站静态程序，适合使用div+css布局的初学者。
用HTML+div+css编写的一个旅游网站的编写
04-06
这是一个本人用HTML设计的一个网站，用table+css和少量的div！！
css+html做的旅游预订页面
03-21
css+html做的旅游预订页面，便于初学者学习！
54-html页面小项目------------新疆行之书
热门推荐
高调做事，低调做人！
12-06 1万+
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"> <hea...
JavaWeb前端-CSS定位与DIV布局实战-新疆行知书网页设计
arsoooo的博客
11-05 3811
本文代码为CSS定位与DIV布局实战-新疆行知书网页设计的代码 by：arsoooo 网页效果如下： 源代码（相关文件下载在最后） index.html文件代码 //index.html的代码如下 &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;新疆旅游-arsoooo&lt;/title&gt; &lt;meta...
HTML+CSS旅游网站
06-22
HTML+CSS旅游网站，非常好看的旅游网站设计
html+CSS+DIV海南旅游网站
05-09
html+CSS+DIV海南旅游网站html+CSS+DIV海南旅游网站
css3变为css+div
05-12
相比于 CSS3，CSS + DIV 的布局方式更加灵活，可以实现更多样化的页面设计效果。同时，CSS + DIV 的布局方式也更加适合响应式设计，能够适应不同尺寸的屏幕和设备。 需要注意的是，CSS3 和 CSS + DIV 并不是相互...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值