JavaWeb前端-CSS定位与DIV布局实战-新疆行知书网页设计

最新推荐文章于 2024-07-14 22:18:32 发布
最新推荐文章于 2024-07-14 22:18:32 发布
阅读量4k 收藏 41
点赞数 6
文章标签： java web 前端 实战
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/arsoooo/article/details/83751668
版权

本文代码为CSS定位与DIV布局实战-新疆行知书网页设计的代码

by：arsoooo

网页效果如下：
新疆行知书整体效果图源代码（相关文件下载在最后）

index.html文件代码

//index.html的代码如下

<!doctype html>
<html>
	<head>
	<title>新疆旅游-arsoooo</title>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
		<meta name="keywords" content="新疆"/>
		<meta name="description" content="新疆是个好地方"/>
		<link href="css.css" rel="stylesheet" type="text/css">
		<style type="">		
		</style>
	</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>乌鲁木齐   雷阵雨 20℃-31℃</li>
						<li>吐鲁番   多云转阴 20℃-28℃</li>
						<li>喀什   阵雨转多云 25℃-32℃</li>
						<li>库尔勒   阵雨转阴 21℃-28℃</li>
						<li>克拉玛依   雷阵雨 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>arsoooo&copy;版权所有 
				<a href="mailto:980815161@qq.com">980815161@qq.com</a>
				</p>
			</div>
		</div>	
	</body>
</html>

css.css文件

//css.css的代码如下：

body{
	background:#2286c6;
	margin:0px;
	padding:0px;
	font-size:12px;
	font-family:Arial;
}
#container{
	margin:0px auto;
	width:780px;
	height:600px;
	text-align:left;
	background:#123456;
}
#banner{
	margin:0px;
	padding:0px;
	width:100%;
	height:150px;
	background:#778899;
}
#globallink{
	margin:0px;
	padding:0px;
}
#globallink ul{
	list-style-type:none;
	padding:0px;
	margin:0px;
}
#globallink ul li{
	float:left;
	text-align:center;
	width:78px;
}
#globallink ul li a{
	display:block;
	padding:7px 6px 7px 6px;
	margin:0px;
	background:url("images/button1.jpg") no-repeat;
}
#globallink a:link {
	color:#004a87;
	text-decoration:none;
}    /* 未被访问的链接 */
#globallink a:visited {
	color:#004a87;
	text-decoration:none;
} /* 已被访问的链接 */
#globallink a:hover {
	text-decoration:underline;
	background:url("images/button1_bg.jpg") no-repeat;
}   /* 鼠标指针移动到链接上 */
#globallink a:active {text-decoration:underline;}  /* 正在被点击的链接 */

#left{
	margin:0px;
	padding:0px 0px 5px 0px;
	width:200px;
	background:white;
	color:#d8ecff;
	float:left;
}
#weather{
	background:url("images/weather.jpg") no-repeat -5px -5px;
	margin:0px 5px;
	background-color:#5ea6eb;
}
#weather h3{
	font-size:12px;
	padding:16px 0px 0px 74px;
	margin:5px; 
}
#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:0px 0px 0px 10px;
}
#today{
	background:#5ea6eb;
	margin:0px 5px 0px 5px;
	padding:0px 0px 10px 0px;
}
#today h3{
	color:#003973;
	font-size:12px;
	background:#bbddff url("images/icon2.gif") no-repeat 5px 9px;
	padding:4px 0px 0px 15px;
	margin:0px 0px 5px 0px;
}
#today ul{
	margin:-1px 0px 0px 0px;
	padding:0px;
	list-style-type:none;	
}
#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 {
	text-decoration:underline;
	color:#ffff00;
}   /* 鼠标指针移动到链接上 */
#middle{
	margin:0px 2px;
	padding:5px 0px 5px 0px;
	width:400px;
	background:white;
	float:left;
}
#middle div{
	margin:0px 5px;
}
#middle h3{
	margin:0px;
	padding:0px;
	height:41px;	
}
#middle h3 span{
	display:none;/*去掉span内文字，换成背景图片*/
}
#beauty{
	margin:15px 0px 0px 0px;
	padding:0px;
}
#beauty h3{
	background:url("images/picture_h1.gif") no-repeat;
}
#beauty ul,#route ul{	/*此处设置margin上高度可以使left和middle下底边对齐*/
	list-style-type:none;
	margin:15.5px 1px 0px 1px;
	padding:0px;
}
#beauty ul li{
	float:left;
	width:97px;
	text-align:center;
}
#beauty ul li img{
	border:1px solid #4ab0ff;/*实线solid*/
}#route{
	clear:left;
	margin:0px;
	padding:5px 0px 15px 0px;
}
#route h3{	
	background:url("images/route_h1.gif") no-repeat;
}
#route ul li{
	background:url("images/icon1.gif") no-repeat 20px 9px;
	padding:3px 0px 0px 30px;
}
#route ul li a:link,#today ul li a:visited {
	color:#d8ecff;
	text-decoration:none;
} /* 未被访问的链接+已被访问的链接 */
#route ul li a:hover {
	text-decoration:underline;
	color:black;
}   /* 鼠标指针移动到链接上 */
#right{
	margin:0px;
	padding:0px 0px 5px 0px;
	width:176px;
	background:#ffffff;
	float:left;
}
#right div{
	margin:0px 5px;
	background:#5ea6eb;
}
#right h3{
	color:#003973;
	font-size:12px;
	background:#bbddff url("images/icon2.gif") no-repeat 5px 9px;
	padding:4px 0px 2px 15px;
	margin:4.5px 0px 5px 0px;   /*此处设置margin上高度可以使left和middle下底边对齐*/
}
#map p{
	text-align:center;
	margin:0px;
	padding:2px 0px 5px 0px;
}
#map p img{
	border:1px solid #ffffff;
	margin:4px 0px 0px 0px; 
}
#food ul,#life ul{
	list-style-type: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 {
	text-decoration:underline;
	color:black;
}
	
#footer{
	margin:0px;
	padding:1px 0px;
	background:white;
	clear:left;
}
#footer p{
	text-align:center;
	padding:0px;
	margin:4px 5px;
	background:#5ea6eb;
}
#footer p a{
	color:white;
	text-decoration:none;
}

相关文件下载，仅供学习交流：

链接：https://pan.baidu.com/s/1TotOTu3E8tWqCcNxEvpvtQ 密码：792j

~转载注明出处@arsoooo

arsoooo
关注
  • 6
    点赞
  • 踩
  • 41
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Python+Vue计算机毕业设计健身房管理系统m127n（源码+程序+LW+部署）
万青JAVA毕设源码
12-31 844
Python3.7.7+Django+Mysql5.7+pip list+HBuilderX（Vscode也行）+Vue+Pychram社区版。2. 前端：vue+css+javascript+jQuery+easyUI+highcharts。2.IDE环境：Python和Python 社区版都可以。Django + Vue +Python+Mysql 等等组成，B/S模式等等。该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程。1. 后端：Python、Vue、Django、Mysql。
新疆旅游网全站程序
12-22
新疆旅游网全站程序
新疆 旅游主题网页设计 html源码 带js轮播图
m0_37916936的博客
04-23 448
dw、hbuilder、vscode、sublime等编辑软件都可打开运行修改图片文字代码。【旅游类】4页新疆旅游网页 首页带JavaScript轮播图。主要分为 首页、地区介绍、景区介绍、新疆美食。网页比较简单，适合初学者。用到的是flex弹性布局。
互联网摸鱼日报（2023-03-22）
weixin_43849685的博客
03-22 538
腾讯大规模云原生技术实践案例集不止于监控，夜莺V6全新升级为开源观测平台阿里副总裁贾扬清即将离职，独家回应称“暂未创立公司”腾讯发布2022研发大数据报告：Go语言蝉联最热编程语言行知数字中国数字化转型案例集锦麒麟桌面操作系统运行安卓移动应用的技术实践数据库内核杂谈（二十八）- 和ChatGPT一起精读 DynamoDB 2022 论文微服务先行者 James Lewis：别纠结单体还是微服务，面向服务才是正解GPT-4“失控”行为大赏：创建行动计划欲接管推特并取代马斯克，还引诱教授帮其制定逃跑计划IBM公
制作一个简单HTML旅游网站（HTML+CSS+JS）新疆设计与实现7个页面
爱敲代码的卡拉米的博客
06-10 1085
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
[独有源码]springboot新疆在线旅游网站的设计与实现4x3z5借鉴他人经验，找到适合自己的毕业设计
承志程序设计
08-12 334
选题背景： 随着互联网的快速发展，旅游行业也逐渐向线上转型。在线旅游网站作为旅游信息的主要来源和交流平台，对于提供便捷、全面的旅游服务起着至关重要的作用。而新疆作为中国西部地区的旅游目的地之一，拥有丰富的自然景观和独特的民族文化，吸引了大量的游客前来探索。然而，目前在新疆地区缺乏一个完善的在线旅游网站，导致游客获取信息不便、预订困难等问题频发。因此，设计与实现一个新疆在线旅游网站具有重要的现实意义。 意义所在： 首先，新疆在线旅游网站的设计与实现可以提供游客全面准确的旅游信息。通过收集整理新疆各地的景点介
用web前端所学的知识做新疆旅行网页面
sur_haha的博客
01-21 625
【代码】用web前端所学的知识做新疆旅行网页面。
web第四天9.5 主页
weixin_45598725的博客
09-05 140
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>新疆知行书</title> <link rel="stylesheet" href="css/知行书.css" type="text/css"/&...
JavaWeb前端-CSS定位与DIV布局实战-新疆行知书网页设计-附件资源
03-02
JavaWeb前端-CSS定位与DIV布局实战-新疆行知书网页设计-附件资源
Javaweb-网上书城项目实验报告书-课程设计报告书.doc
08-19
在本实验报告书中，我们将深入探讨项目的各个关键方面，包括需求分析、功能模块设计、数据库设计、流程设计以及项目总结，并附带部分运行截图。 一、需求分析 网上书城的主要需求包括： 1. 用户注册与登录：用户...
尚硅谷第5季公开课-JavaWeb书城实战
07-22
教程名称： 尚硅谷第5季公开课-JavaWeb书城实战 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
旅游景区网站制作源码
04-27
模板介绍： 风格简洁清爽，适合各种中小企业的网站搭建。 宽度：990px 对齐：居中 主色：黑色+蓝色 结构：div+css 运行环境：asp.net2.0(或以上） 后台地址：pageadmin网站管理系统
javaweb前端课程设计-MyEclipse
06-24
HTML5和JavaScript，适用于本科生结课设计。内容包括链接、锚点、注册表、问卷调查、有序和无序列表、贪吃蛇游戏、BOM和DOM、音乐和视频播放器，时钟和日历、图片随机移动，省市联动、全选和全不选效果、压缩包下载...
div 在java_将<div>元素定位在屏幕中心
weixin_29530503的博客
02-23 157
回答(12)2 years ago简单的方法，如果你有一个固定的宽度和高度：#divElement{position: absolute;top: 50%;left: 50%;margin-top: -50px;margin-left: -50px;width: 100px;height: 100px;}​2 years ago随着变形越来越受到支持，你可以在不知道弹出窗口的宽度/高度的情况下做到...
JavaWeb8——利用 CSS 和 DIV 网页布局
NoBug
03-21 2788
文章目录1. DIV + CSS 布局2. 网页布局框架示例 1. DIV + CSS 布局 在开始设计一个网站时，首先要对网页进行布局，一个好的布局，可以加快开发进度。 DIV + CSS 布局是网页 HTML 通过div 标签以及 css 样式代码开发制作的网页的统称。 DIV + CSS 布局的网页更易维护，网页打开更快。 DIV + CSS 布局相对于表格，框架有以下优势： 1. 使用页面加载更快速。 2. 使修改设计时更有效率且费用更低。 3. 更有利于搜索引擎的搜索。 4. 节约成本，降低宽
CSS+DIV练手——旅游网站
web开发
11-05 1537
BS要结了，抽出空来拿CSS+DIV练练手，用了理解的会更深刻，这次做的是个旅游网站的界面（例子源于《精通CSS.DIV网页设计与布局》）。 html代码： &lt;!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition...
前端开发工程师必读书籍推荐
m0_38080374的博客
11-03 8327
作者：阿里云云栖社区 链接：https://www.zhihu.com/question/22591993/answer/148215178 来源：知乎 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 阿里云云栖社区，汇集阿里技术精粹，点此关注（文字链接地址：https://www.zhihu.com/org/a-li-yun-yun-qi-she-qu-48
《JavaSE》---6.＜基础语法（Java三大程序控制结构）＞
最新发布
m0_73456341的博客
07-14 838
本篇博客主要讲解Java基础语法中的三大结构，一种顺序结构、两大分支结构i（if-else、swich-case）、四大循环结构（while、do while、fot、foreach）

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值