六、元素应用CSS的习题
题目一：
使用CSS样式对页面元素加以修饰，制作“ 旅游攻略 ”网站。如下图所示
运行效果：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>旅游攻略</title>
<style type="text/css">
.whole {
width: 780px;
height: 600px;
margin: 0 auto;
}
.first{
width: 700px;
}
.second{
margin-top: 10px;
width:780px;
height: 30px;
background-color: black;
}
a{
color: white;
text-decoration: none;
}
a:focus{
outline: 2px solid #00f; /* 蓝色边框，可根据设计调整颜色和宽度 */
}
.left{
float: left;
width: 350px;
height: 500px;
background-color: antiquewhite;
margin-top: 10px;
border: 1px solid;
}
.left1{
height: 260px;
background-color: #886666;
}
.left2{
border-bottom: 2px dashed white;
color: #ccc;
}
.new{
font-size: 20px;
color: #666;
}
.right{
margin-top: 10px;
float: right;
height: 250px;
width: 390px;
}
.right2{
width: 390px;
height: 300px;
float: right;
}
.right3,.right4{
margin-top: 0%;
color: #333;
background-color: #886666;
font-size: 12px;
}
body{
background-image: url(img/bg.JPG);
}
</style>
</head>
<body>
<div class="whole">
<div class="first">
<img src="img/logo.JPG" width="780" height="100px" alt="网站logo"/>
</div>
<nav 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>
</nav>
<div class="left">
<a class="new">最新活动</a>
<div class="left1">
<p class="left2">上海龙支付酒店 + 景点满500减100</p>
<p class="left2">包车游世界，畅游当地行，还有出行补贴400元/人</p>
<p class="left2">新年红包，你写就有。请拿起手机，编辑你的信息。</p>
<p class="left2">女神节，特别好礼，送给漂亮的你。</p>
<p class="left2">寒假出去玩。温泉滑血HIGH起来，酒店8折起!</p>
</div>
<div>
<img src="img/guanggao.jpg" width="350px" height="190px"/>
</div>
</div>
<div class="right">
<img src="img/lijiang.jpg" width="390px" height="200px"/>
<p class="right3">2019的第一天，我遇见了下雪的丽江。<br />喜欢丽江这边的蓝天白云，一年中总会来上好几次···</p>
</div>
<div class="right2">
<img src="img/feilvbin.jpg" width="390px" height="200px"/>
<p class="right4">面面旅拍一宿务渔村麦克坦、墨宝鲸盐甘米银;<br />三入菲律宾之与反向锦鲤携手的囧途纪行</p>
</div>
</div>
</body>
</html>代码讲解
- 这个网页由导航栏（first、second）、左侧的浮动盒子（left）和右侧的浮动盒子（right）组成。
- margin: 0 auto; 有居中的效果
-
其中 alt="网站logo" ，当这图片加载不出来是会用 “网站logo” 的文字来替代图片<img src="img/logo.JPG" width="780" height="100px" alt="网站logo"/>
题目二：
使用CSS对页面网页元素加以修饰，制作“青年志愿者”网站。
运行效果 ：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>青年志愿者</title>
<style type="text/css">
.whole{
width: 100%;
height: 850px;
border: 0px solid;
margin: 0 auto;
}
.logo{
width: 100%;
height: 100px;
}
.logo img{
width: 100%;
height: 100px;
}
a{
text-decoration: none;
}
.NavBar{
width: 100%;
height: 30px;
margin-top: 5px;
background-color:#686868;
}
.NavBar a{
padding: 10px 20px;
}
.NavBar2{
width: 900px;
height: 30px;
background-color: white;
}
.NavBar2 a{
color:black;
}
.left{
width: 350px;
height: 600px;
float: left;
margin-left: 20%;
margin-right: 10px;
border: solid #686868;
}
.right{
width: 350px;
height: 600px;
float: right;
margin-right: 20%;
margin-left: 10px;
border: solid #686868;
}
.right1{
font-family:fangsong;
font-size: 20px;
font-weight:bolder;
}
.right2{
border-bottom: 3px solid;
}
li{
list-style: none;
text-indent: 4em;
}
.footer{
width: 100%;
height: 20px;
margin-top: 670px;
text-align: center;
background-color: #686868;
}
</style>
</head>
<body>
<div class="whole">
<div class="logo">
<img src="img/logo2.JPG" width="100%" height="100px"/>
</div>
<div class="NavBar">
<span> <a href="#">首页</a> </span>
<span> <a href="#">志愿组织</a> </span>
<span> <a href="#">志愿项目</a> </span>
<span> <a href="#">志愿文化</a> </span>
<span> <a href="#">志愿人才</a> </span>
<span> <a href="#">发布</a> </span>
<span> <a href="#">志愿服务交流会</a> </span>
<span> <a href="#">志愿社区</a> </span>
<span> <a href="#">登录</a> </span>
</div>
<div class=".NavBar2">
<span><a href="#">中国青年诚信活动</a> </span>
<span><a href="#">志愿中国</a> </span>
<span><a href="#">青年之声</a> </span>
<span><a href="#">中国青年公益行动专栏</a> </span>
<span><a href="#">2015年公益服务交流会官网</a> </span>
<span><a href="#">XXXX上线</a> </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 class="right1">“我和我的祖国”视频征集活动启动</p>
<li> X X X X X X X X X X </li>
<li> X X X X X X X X X X </li>
<li> X X X X X X X X X X </li>
<li> X X X X X X X X X X </li>
<li> X X X X X X X X X X </li>
<li> X X X X X X X X X X </li>
<p class="right2">公益快报</p>
<li> X X X X X X X X X X </li>
<li> X X X X X X X X X X </li>
<li> X X X X X X X X X X </li>
<li> X X X X X X X X X X </li>
<li> X X X X X X X X X X </li>
<li> X X X X X X X X X X </li>
<li> X X X X X X X X X X </li>
<p class="right2">公益观察</p>
<li> X X X X X X X X X X </li>
<li> X X X X X X X X X X </li>
<li> X X X X X X X X X X </li>
<li> X X X X X X X X X X </li>
<li> X X X X X X X X X X </li>
<li> X X X X X X X X X X </li>
<li> X X X X X X X X X X </li>
</div>
<div class="footer">
<p>版权所有©中国青年志愿者</p>
</div>
</div>
</body>
</html>代码讲解：
（1） .whole类
- 整个网页的内容被包裹在
<div class="whole">中，这是一个主要的容器 - width: 100%; 使
whole容器将随着浏览器窗口的大小变化而自动调整宽度 - margin: 0 auto; 使
<div class="whole">这个元素居中。
（2）.NavBar类和.NavBar2类
- 是用来设置导航栏的的样式
（3）
- 此网页设置了两个左右浮动的盒子，从而将内容分成两块