第六章课后习题-优快云博客

本文链接：https://blog.youkuaiyun.com/2401_87136665/article/details/143080221

1.使用CSS对页面元素加以修饰制作"旅游攻略网站"

代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>旅游攻略</title>
		<style>
		.c1{
				background-color: #55aaff;
				text-align: left;
				padding: 10px 0;
				font-size: 1.2em;
			}
			.c-left{
				float: left;
				width: 30%;
			}
			.content1{
				background-color: #ffff00;
				border-bottom-style: dashed;
			}
			.content2{
				background-color: #55aaff;
				font-style: inherit;
				margin-top: 0%;
				
			}
			.c_right{
				width: 60%;
				height: 50%;
				float: right;
				margin-right: 1%;
			}
			.work01{
				background-color: antiquewhite;
							}
			 img {
			            width: 100%;
			            display: block; 
			        } 
		</style>
	</head>
	<body>
		<div><img src="./img/logo2.JPG" width="100%" height="100"/></div>
		<div><p class="c1">首页|酒店|旅游|跟团游|自由行|机票|门票|火车|汽车票|攻略|商旅|更多</p></div>
		<div class="c-left">
			<p class="work01">最新活动</p>
			<p class="content1">上海龙支付酒店+景点满500减100</p>
			<p class="content1">包车游世界，畅游当地行，还有出行补贴400/人</p>
			<p class="content1">新年红包，你写就有，请拿起手机 编辑您的信息</p>
			<p class="content1">女神节，特别好礼，送给漂亮的你</p>
			<p class="content1">寒假出去玩，温泉滑雪HIGH起来，酒店八折起!</p>
			<img src="./img/guanggao.jpg" width="100%" height="300px"/>
		</div>
		<div class="c_right">
			<div><img src="./img/lijiang.jpg" width="100%" height="250px"/>
			<p class="content2">2019的第一天，我遇见了下雪的丽江。<br />
			喜欢丽江这边的蓝天白云，一年中总会来上好几次</p>
			</div>
			<img src="./img/feilvbin.jpg" width="100%" height="250px"/>
			<p class="content2">面面旅拍一宿务渔村麦克坦，墨宝鲸鲨甘米银<br />
			三入菲律宾之与反向锦鲤携手的囧途纪行</p>
		</div>
	</body>
</html>

运行结果如下:

2.使用CSS对网页元素加以修饰，制作"青年志愿者"网站

代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>青年志愿者</title>
		<style type="text/css">
			body {
			            font-family:fangsong; /* 设置一个默认字体 */
			        }
			.text1{
				word-spacing: 8px;
				text-align: left;
				background-color: beige;
				letter-spacing: 0.1em;
				margin-top: 0%;
			}
			.w1{
				word-spacing: 8px;
				text-align: left;
				background-color: #ffffff;
				letter-spacing: 0.2em;
				margin-top: 0%;
			}
			.t1{
				float: left;
				margin-left: 350px;
				height: 600px;
				width: 400px;
			}
			.work01{
				float: right;
				margin-right: 350px;
				height: 750px;
				width: 450px;
			border-style: solid;
			}
	
		</style>
	</head>
	<body>
		<img src="./img/logo3.JPG"/>
		  <p class="text1">首页 &nbsp; 志愿组织 &nbsp; 志愿项目 &nbsp; 志愿文化 &nbsp; 志愿阵地 &nbsp; 志愿人才 &nbsp; 志愿发布 &nbsp; 志愿服务协会 &nbsp; 支援社区 &nbsp; 登录</p>
		<p class="w1">中国青年诚信行动 &nbsp; 志愿中国 &nbsp; 青年生产&nbsp; 中国青年.... &nbsp;二〇一五年.....官网 &nbsp; .....上线</p>
		<div class="t1">
			<img src="./img/left.JPG"/>
			<img src="./img/left2.JPG"/>
		</div>
		<div class="work01">
			<h3 align="center">"我和我的祖国" 视频征集活动启动</h3>
			<p> 看不清书上文字</p>
		</div>	
			
	</body>
</html>

运行结果如下所示