WEB学习第四天（网页模型）

于 2019-09-06 00:58:16 发布
阅读量277 收藏 1
点赞数 2
分类专栏： CSS WEB HTML 文章标签： 学习 html CSS WEB
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SHA925/article/details/100569742
版权
WEB 同时被 3 个专栏收录
9 篇文章 0 订阅
订阅专栏
HTML
8 篇文章 0 订阅
订阅专栏
CSS
4 篇文章 0 订阅
订阅专栏

完成后的网页：

在这里插入图片描述

实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>网页布局</title>
		<style type="text/css">
			@import url("css/网页.css");
		</style>
	</head>
	<body>
		<div class="di" align="center">
			<div class="banner">
				<img src="img/2.jpg" height="140px" width="830px"/>
			</div>
			<div class="globallink" >
				<ul>
					<div id="globallink">
						<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>
					</div>
				</ul>
			</div>
			<div class="c">
				<div class="ca">
					<div class="left">
						<div class="lefta">
							<div class="tqt">
								<img src="img/3.jpg" height="38px" width="224px" />
							</div>
							<div class="tqw">
								<ul>
									<div id="tq">
										<li><img src="img/icon1.gif"> 乌鲁木齐 雷阵雨 20℃-31℃</li>
										<li><img src="img/icon1.gif"> 吐鲁番 多云转阴 20℃-28℃</li>
										<li><img src="img/icon1.gif"> 喀什 阵雨转多云 25℃-32℃</li>
										<li><img src="img/icon1.gif"> 库尔勒 阵雨转阴 21℃-28℃</li>
										<li><img src="img/icon1.gif"> 克拉玛依 雷阵雨 26℃-30℃</li>
									</div>
								</ul>
							</div>
							<div class="leftab">
								<div class="tjw" align="left">
									<img src="img/icon2.gif" />今日推荐
								</div>
								<div class="tjt" align="center">
									<a href="#" ><img src="img/tuijian1.jpg"/></a><br />
									<a href="#">喀纳斯河</a><br />
									<a href="#" ><img src="img/tuijian1.jpg"/></a><br />
									<a href="#">布尔津</a><br />
									<a href="#" ><img src="img/tuijian1.jpg"/></a><br />
									<a href="#">天山之路</a>
								</div>
							</div>
						</div>
					</div>
					<div class="middle" align="center">
						<div class="mg">
							<img src="img/ghost.jpg"  title="魔鬼域"/>
						</div>
						<div class="xz" align="left">
							<img src="img/picture_h1.gif" />
						</div>
						<div class="xzt">
							<div class="xzab">
								<div class="xza">
									<img src="img/beauty1.jpg" />
								</div>
								<div class="xzb">
									<img src="img/beauty2.jpg" />
								</div>
							</div>
							<div class="xzcd">
								<div class="xzc">
									<img src="img/beauty3.jpg" />
								</div>
								<div class="xzd">
									<img src="img/beauty4.jpg" />
								</div>
							</div>
						</div>
						<div class="lx" align="left">
							<img src="img/route_h1.gif" />
						</div>
						<div align="left">
							<div id="lx">
								<li><img src="img/icon1.gif"><a href="#">吐鲁番—库尔勒—库车—塔中—和田—喀什</a></li>
								<li><img src="img/icon1.gif"><a href="#">乌鲁木齐—天池—克拉玛依—乌伦古湖—喀纳斯</a></li>
								<li><img src="img/icon1.gif"><a href="#">乌鲁木齐—奎屯—乔尔玛—那拉提—巴音布鲁克</a></li>
								<li><img src="img/icon1.gif"><a href="#">乌鲁木齐—五彩城—将军隔壁—吉木萨尔</a></li>
							</div>
						</div>
					</div>
				</div>
				<div class="righta">
					<div class="rightaa">
						<div class="fgw" align="left">
							<img src="img/icon2.gif" />新疆风光
						</div>
						<div class="fgt">
							<a href="#"><img src="img/map1.jpg"  title="点击看大图"/></a>
							<a href="#"><img src="img/map2.jpg" title="点击看大图"/></a>
						</div>
						<div class="xc" align="left">
							<img src="img/icon2.gif" />小吃推荐
						</div>
						<div class="xcw">
							<div align="left">
							<ul>
								<div id="xc">
									<li><a href="#">17号抓饭</a></li>
									<li><a href="#">大盘鸡</a></li>
									<li><a href="#">五一夜市</a></li>
									<li><a href="#">水果</a></li>
								</div>
							</ul>
							</div>
						</div>
						<div class="jd" align="left">
							<img src="img/icon2.gif" />宾馆酒店
						</div>
						<div class="jdw" align="left">
							<ul>
								<div id="jd">
									<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>
								</div>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<div class="footer">
				<div class="footera">
					<a href="mailto:收件人邮箱?subject=test&cc=抄送人邮箱&subject=主题&body=内容">艾萨克©版权所有demo@demo.com</a>
				</div>
			</div>
		</div>
	</body>
</html>

CSS代码

*{
	margin: 0;
	padding: 0;
	}
div.di{
	height: 2000px;
	width: auto;
	background-color: #2285c8;
	}
div.banner{
	border-style: solid;
	border-width: 3px;
	border-color: #2c84b0;
	height: 140px;
	width: 830px;
	background-color: #09c7dd;
}
div.globallink{
	border-style: solid;
	border-width: 3px;
	border-top-width: 0px;
	border-color: #2c84b0;
	height: 30px;
	width: 830px;
	background-color: #dbe7ed;
	}
div.globallink ul li{
	 	float: left;
	 	list-style-type: none;
	 }
div.globallink ul li a{
	 	display: block;
	 	width: 67px;
	 	padding: 4px 8px;
	 	background: url(../img/button1.jpg);
	 	margin: 0px;
	 	font-weight: bold;
	}
div.globallink ul li a:hover{
	margin: 0;
	color: gold;
	background: url(../img/button1_bg.jpg);
}
div.c{
	border-style: solid;
	border-width: 3px;
	border-top-width: 0px;
	border-color: #2c84b0;
	height: 600px;
	width: 830px;
	}
div.ca{
	height: 600px;
	width: 626px;
	float: left;
	}
div.righta{
	border-left: solid 3px #2c84b0;
	height: 600px;
	width: 200px;
	background-color: #5ea6eb;
	float: right;
	}
div.rightaa{
	border: solid 3px #f7fafb;
}
div.fgw{
	background: url(../img/button1.jpg);
	height: 25px;
	width: 194px;
}
div.fgt{
	height: 210px;
	width: auto;
}
div.xc{
	background: url(../img/button1.jpg);
	height: 25px;
	width: 194px;
}
div.xcw{	
	padding: 10px;
	height: 110px;
	text-align: left;
}
div.xcw ul li{
	border-bottom: dashed 1px white;
}
div.jd{
	background: url(../img/button1.jpg);
	height: 25px;
	width: 194px;
}
div.jdw{
	height: 178px;
}
div.left{
	border-right: solid 3px #2c84b0;
	height: 600px;
	width: 230px;
	background-color: #59a9f2;
	float: left;
	}
div.lefta{
	border-style: solid;
	border-width: 3px;
	border-color: #f7fafb;
	height: 594px;
	width: 224px;
	text-align: center;
	}
div.tqt{
	border-style: solid;
	border-width:  2px;
	border-color: #f7fafb;
	border-top-width: 0px;
	border-right-width: 0px;
	border-left-width: 0px;
	}
div.tqw{
	text-align: center;
	height: 110px;
	}
div.tjw{
	background:url(../img/button1.jpg);
	height: 25px;
	width: 224px;
	}
div.tjt{
	height: 300px;
	width: 220px;
	}
div.middle{
	height: 600px;
	width: 390px;
	background-color: #f7fafb;
	float: right;
	}
div.xzab{
	float: left;
	}
div.xzcd{
	float: right;
	}
div.xza{
	border-style: solid;
	border-width:  7px;
	border-color: #f7fafb;
	float: left;
	}
div.xzb{
	border-style: solid;
	border-width:  7px;
	border-color: #f7fafb;
	float: right;
	}
div.xzc{
	border-style: solid;
	border-width:  7px;
	border-color: #f7fafb;
	float: left;
	}
div.xzd{
	border-style: solid;
	border-width:  7px;
	border-color: #f7fafb;
	float: right;
	}
div.footer{
	border-style: solid;
	border-width: 3px;
	border-top-width: 0px;
	border-color: #2c84b0;
	height: 28px;
	width: 830px;
	background-color: #0decfb;
	background: url;
	}
div.footera{
	border: solid 3px #f7fafb;
}
div.jdw ul li{
	border-bottom: dashed 1px white;
}
#tq{
	list-style-type: none;
}
.tjt a:hover{
	color: gold;
}
#lx{
	text-decoration: none;
	list-style-type: none;
}
#lx a{
	text-decoration: none;
}
#lx a:hover{
	color: gold;
}
#xc{
	list-style-type: none;
}
#xc a{
	text-decoration: none;
}
#xc a:hover{
	color: gold;
}
#jd{
	list-style-type: none;
}
#jd a{
	text-decoration: none;
}
#jd a:hover{
	color: gold;
}
#globallink a{
	text-decoration: none;
}
.tjt a{
	text-decoration: none;
}

总结：

1.a{text-decoration: none;}可去除无序列表前面的项目符号。

2.li{ float:left: } li a{ display: block; width: 80px; }对所有链接宽度相等，浮动<li>元素，并指定为<a>元素的宽度。

3.多个div可叠加使用。

4.注意class与id的区别：id不可重复定义。

5.padding：内容与边框之间的距离。
margin：元素与元素之间的距离。
padding复合属性设置所有内填充属性，用法如下：
属性值为一个数值如padding:10px,表示上右下左内填充都为10px
属性值为二个数值如padding:10px 20px,表示内填充上下都为10px，左右都为20px
属性值为三个数值如padding: 10px 20px 30px,表示内填充上为10px，左右为20px，下为30px
属性值为四个数值如padding: 10px 20px 30px 40px,表示上右下左，内填充为上为10px，右为20px，下为30px，左为40px
margin复合属性设置所有外边距属性，用法如下：
属性值为一个数值如margin:10px,表示上右下左都为10px
属性值为二个数值如margin:10px 20px,表示外边距上下都为10px，左右都为20px
属性值为三个数值如margin: 10px 20px 30px,表示外边距上为10px，左右为20px，下为30px
属性值为四个数值如margin: 10px 20px 30px 40px,表示上右下左，外边距为上为10px，右为20px，下为30px，左为40px
padding对元素宽高的影响
素设置宽高后，再设置padding将会影响盒子的实际大小。
盒子的实际宽=width+padding-left+padding-right+border
盒子的实际高=height+padding-top+padding-bottom+border

6.使用a{ text-decoration: none; }可将带有下划线的超链接文本去掉下划线。

7.list-style-type 属性设置列表项标记的类型。

Ben. .
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值