第六章 元素应用CSS课后习题

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

代码如下:

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>旅游攻略</title>
		<style type="text/css">
			.all{
				width: 700px;
				height: 600px;
				border: 0px solid;
			}
			.top{
				width: 700px;
				height: 100px;
			}
			.menu{
				width: 700px;
				height: 30px;
				margin-top: 10px;
				background-color: black;
			}
			.left{
				width: 300px;
				height: 425px;
				margin-top: 10px;
				border: solid;
				float: left;
				background-color: beige;
			}
			.one,.two{
				width: 380px;
				height:210px;
				margin-top: 10px;
				float: right;
				background-color: #808080;
			}
			.three{
				width: 300px;
				height: 260px;
				margin-top: 5px;
				background-color: #808080;
			}
			.dashed-line{
				border-bottom: 2px dashed white;
			}
			p{
				color: white;
			}
			a{
				font-size: 15px;
				text-decoration: none;
				color: white;
			}
		</style>
	</head>
	<body>
		<div class="all">
		<div class="top">
			<img src="img/logo (2).JPG" width="700px" height="100px"/>
		</div>
			<div class="menu">
				<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">最新活动
				<div class="three">
				<p class="dashed-line">上海龙支付酒店+景点满500减100</p>
					<p class="dashed-line">包车游世界,畅游当地行,还有出行补贴400元/人</p>
					<p class="dashed-line">新年红包,你写就有,请拿起手机,编辑你的信息</p>
					<p class="dashed-line">女神节,特别好礼,送给漂亮的你。</p>
					<p class="dashed-line">寒假出去玩,温泉滑雪HIGH起来,酒店八折起!</p>
					<img src="img/guanggao.jpg" width="300px" height="135px"/>
				</div>
			</div>
			<div class="one">
				<img src="img/lijiang.jpg" width="380px" height="140px"/>
				<p>2019年的第一天,我遇见了下雪的丽江<br />
				喜欢丽江这边的蓝天白云,一年中总会来上几次...</p>
			</div>
			<div class="two">
				<img src="img/feilvbin.jpg" width="380px" height="145px"/>
				<p>面面旅拍-宿务渔村麦克坦,墨宝鲸鲨干米银,<br />
				三入菲律宾之与反向锦鲤携手的囧途纪行</p>
			</div>
		</div>
	</body>
</html>

效果图:

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

代码如下:

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>青年志愿者</title>
		<style type="text/css">
		.all{
			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;
		}
		.right{
			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: '楷体';
		}
		#ID1{
			font-family:fangsong;
			font-size: 20px;
			font-weight:bolder;
		}
		.xiahuaxian{
			border-bottom: 3px solid;
		}
		li{
			list-style: none;
			text-indent: 4em;
			}
		</style>
	</head>
	<body>
		<div class="all">
			<div class="top">
				<img src="img/logo (3).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="img/left.JPG" width="350px" height="220px"/>
					<img src="img/left2.JPG" width="350px" height="375px"/>
			</div>
			<div class="right">
				<p id="ID1">"我和我的祖国"视频征集活动启动</p>
				<li>xxxxxxxxxxxxxxxxxx</li>
				<li>xxxxxxxxxxxxxxxxxx</li>
				<li>xxxxxxxxxxxxxxxxxx</li>
				<li>xxxxxxxxxxxxxxxxxx</li>
				<li>xxxxxxxxxxxxxxxxxx</li>
				<li>xxxxxxxxxxxxxxxxxx</li>
				<p class="xiahuaxian">公益快报</p>
				<li>xxxxxxxxxxxxxxxxxx</li>
				<li>xxxxxxxxxxxxxxxxxx</li>
				<li>xxxxxxxxxxxxxxxxxx</li>
				<li>xxxxxxxxxxxxxxxxxx</li>
				<li>xxxxxxxxxxxxxxxxxx</li>
				<li>xxxxxxxxxxxxxxxxxx</li>
				<li>xxxxxxxxxxxxxxxxxx</li>
				<p class="xiahuaxian">公益观察</p>
				<li>xxxxxxxxxxxxxxxxxx</li>
				<li>xxxxxxxxxxxxxxxxxx</li>
				<li>xxxxxxxxxxxxxxxxxx</li>
				<li>xxxxxxxxxxxxxxxxxx</li>
				<li>xxxxxxxxxxxxxxxxxx</li>
				<li>xxxxxxxxxxxxxxxxxx</li>
				<li>xxxxxxxxxxxxxxxxxx</li>
			</div>
			<div class="bottom">
				<p>版权所有&copy;中国青年志愿者</p>
			</div>
		</div>
	</body>
</html>

效果图:

相关推荐
Z_ One Dream13 分钟前
css 在 hover 子元素时,不要让父元素触发 hover 效果
前端·javascript·css
码农幻想梦5 小时前
实验九 视图的使用
前端·数据库·oracle
开心工作室_kaic7 小时前
ssm010基于ssm的新能源汽车在线租赁管理系统(论文+源码)_kaic
java·前端·spring boot·后端·汽车
大力水手~8 小时前
css之loading旋转加载
前端·javascript·css
Nguhyb8 小时前
-XSS-
前端·xss
前端郭德纲8 小时前
深入浅出ES6 Promise
前端·javascript·es6
就爱敲代码8 小时前
ES6 运算符的扩展
前端·ecmascript·es6
王哲晓9 小时前
第六章 Vue计算属性之computed
前端·javascript·vue.js
究极无敌暴龙战神X9 小时前
CSS复习2
前端·javascript·css
风清扬_jd9 小时前
Chromium HTML5 新的 Input 类型week对应c++
前端·c++·html5