第六章课后作业

最新推荐文章于 2025-05-26 15:02:57 发布

辛吉聪

最新推荐文章于 2025-05-26 15:02:57 发布

阅读量101

点赞数 2

文章标签： css 前端 css3

本文链接：https://blog.youkuaiyun.com/2402_87190919/article/details/143138318

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>旅游攻略</title>
		<style>
			* {
				box-sizing: border-box;
			}
			
			.first {
				width: 900px;
				height: 100px;
				border: 3px solid;
			}
			.second {
				
				width: 900px;
				height: 50px;
				padding: 10px 0;
				background-color: black;
			}
			a {
				font-size: 15px;
				text-decoration: none;
				color: white;
				letter-spacing: 0.2em;
			}
			.left {
				width: 300px;
				height: 430px;
				margin-top: 10px;
				margin-right: 30px;
				border: solid;
				float: left;
				background-color: #808080;
			}
			.ziti {
				width: 295px;
				height: 240px;
				line-height: 100%;
				background-color: #808080;
			}
			.xhx {
				text-decoration: underline 2px dashed white;
				color: white;
			}
			span {
				display: inline-block;
				height: 35px;
				width: 295px;
				font-size: 15pt;
				color: white;
				background-color: #c5c5c5;
			}
			.ziti img {
				width: 295px;
				height: 165px;
			}
			.container {
				margin-top: 10px;
				float: left;
				width: 560px;
				height: 420px;
			}
			.right1 {
				width: 556px;
				height: 170px;
				background-color: #808080;
			}
			.right1 img {
				width: 556px;
				height: 110px;
			}
			.right2 {
				margin-top: 10px;
				width: 556px;
				height: 240px;
				background-color: #808080;
			}
			.right2 img {
				width: 556px;
				height: 180px;
			}
			.ww {
				color: white;
			}
		</style>
	</head>
	<body>
		<div class="first">
			<img src="照片/logo.JPG" alt="">
		</div>
		<div class="second">
			<a href="#">首页 | </a>
			<a href="#">酒店 | </a>
			<a href="#">旅游 | </a>
			<a href="#">跟团游 | </a>
			<a href="#">自由行 | </a>
			<a href="#">机票 | </a>
			<a href="#">火车 | </a>
			<a href="#">汽车票 | </a>
			<a href="#">机票 | </a>
			<a href="#">门票 | </a>
			<a href="#">攻略 | </a>
			<a href="#">商旅 | </a>
			<a href="#">更多 | </a>
		</div>
		<div class="left">
			<span>最新活动</span>
			<div class="ziti">
				<p class="xhx">上海龙支付酒店+景点满500减100</p>
			    <p class="xhx">包车游世界，畅游当地行，还有出行补贴400元/人</p>
				<p class="xhx">新年红包，你写就有，请拿起手机，编辑你的信息</p>
				<p class="xhx">女神节，特别好礼，送给漂亮的你。</p>
				<p class="xhx">寒假出去玩，温泉滑雪HIGH起来，酒店八折起！</p>
				<img src="照片/guanggao.jpg" alt="">
			</div>
		</div>
		<div class="container">
		<div class="right1">
			<img src="照片/lijiang.jpg" alt="">
			<p class="ww">2019年的第一天，我遇见了下雪的丽江<br />
			喜欢丽江这边的蓝天白云，一年中总会来上几次...</p>
		</div>
		<div class="right2">
			<img src="照片/feilvbin.jpg" alt="">
			<p class="ww">面面旅拍-宿务渔村麦克坦，墨宝鲸鲨干米银，<br />
			三入菲律宾之与反向锦鲤携手的囧途纪行</p>
		</div>
		</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>青年志愿者</title>
		<style type="text/css">
		.zhz{
			width: 900px;
			height: 850px;
			border: 0px solid;
		}
		.top{
			width: 900px;
			height: 100px;
		}
		.menu{
			width: 900px;
			height: 30px;
			margin-top: 5px;
			background-color:#808080;
		}
		.one{
			width: 900px;
			height: 30px;
			background-color: white;
		}
		.left{
			width: 350px;
			height: 600px;
			float: left;
			margin-left: 80px;
			border: solid #808080;
		}
		.yhz{
			width: 350px;
			height: 600px;
			float: right;
			margin-left: 5px;
			margin-right: 80px;
			border: solid #808080;
		}
		.bottom{
			width: 900px;
			height: 20px;
			margin-top: 670px;
			background-color: #808080;
			text-align: center;
			font-family: '楷体';
		}
		#ww{
			font-family:fangsong;
			font-size: 20px;
			font-weight:bolder;
		}
		.xhx{
			border-bottom: 3px solid;
		}
		li{
			list-style: none;
			text-indent: 4em;
			}
		</style>
	</head>
	<body>
		<div class="zhz">
			<div class="top">
				<img src="照片/logo1.JPG" width="900px" height="100px"/>
			</div>
			<div class="menu">
				<span>首页&nbsp;&nbsp;&nbsp;&nbsp;组织&nbsp;&nbsp;&nbsp;&nbsp;项目&nbsp;&nbsp;&nbsp;&nbsp;生态文化&nbsp;&nbsp;&nbsp;&nbsp;人才&nbsp;&nbsp;&nbsp;&nbsp;发布	&nbsp;&nbsp;&nbsp;&nbsp;社区	&nbsp;&nbsp;&nbsp;&nbsp;登录</span>
			</div>
			<div class="one">
				<span>中国青年诚信活动</span>
				<span>公益中国</span>
				<span>中国之声</span>
				<span>中国青年公益行动专栏</span>
				<span>2015年公益服务</span>
				<span>上线</span>
			</div>
			<div class="left">
				<img src="照片/left.JPG" width="350px" height="220px"/>
					<img src="照片/left2.JPG" width="350px" height="375px"/>
			</div>
			<div class="yhz">
				<p id="ww">“我和我的祖国”视频征集活动启动</p>
				<li>。。。。。。。。。。</li>
				<li>。。。。。。。。。。</li>
				<li>。。。。。。。。。。</li>
				<li>。。。。。。。。。。</li>
				<li>。。。。。。。。。。</li>
				<li>。。。。。。。。。。</li>
				<p class="xhx">公益快报</p>
				<li>。。。。。。。。。。</li>
				<li>。。。。。。。。。。</li>
				<li>。。。。。。。。。。</li>
				<li>。。。。。。。。。。</li>
				<li>。。。。。。。。。。</li>
				<li>。。。。。。。。。。</li>
				<li>。。。。。。。。。。</li>
				<p class="xhx">公益观察</p>
				<li>。。。。。。。。。。</li>
				<li>。。。。。。。。。。</li>
				<li>。。。。。。。。。。</li>
				<li>。。。。。。。。。。</li>
				<li>。。。。。。。。。。</li>
				<li>。。。。。。。。。。</li>
				<li>。。。。。。。。。。</li>
			</div>
			<div class="bottom">
				<p>版权所有&copy;中国青年志愿者</p>
			</div>
		</div>
	</body>
</html>