第六章 元素应用CSS课后习题
1.使用CSS对页面网页元素加以修饰，制作“旅游攻略”网站。
代码如下：
<!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对页面网页元素加以修饰，制作“青年志愿者”网站。
代码如下：
<!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>首页 组织 项目 生态文化 人才 发布 社区 登录</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>版权所有©中国青年志愿者</p>
</div>
</div>
</body>
</html>效果图：
原文地址：https://blog.csdn.net/2301_80403042/article/details/143085125
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！