西部数码网站站点cnnic网站
题目一：
使用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）
- 此网页设置了两个左右浮动的盒子，从而将内容分成两块