1.使用CSS对页面网页元素加以修饰，制作“旅游攻略”网站。
浏览效果如下：
HTML代码如下：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>旅游攻略</title><link type="text/css" rel="stylesheet" href="204-1.css"/></head><body><div><img src="img/bgSix.jpg"/><div class="photo"></div><div class="font1"><p class="border1">首页|酒店|旅游|跟团游|自由行|机票|火车|汽车票|机票|门票|攻略|商旅|更多</p></div><div class="border2"><div class="font2">最新活动<br /><div id="bg">上海龙支付酒店+景点满500减100<hr id="hr">包车游世界，畅游当地行，还有出行补贴400元/人<hr id="hr">新年红包，你写就有。请拿起手机编辑您的信息。<hr id="hr">女神节，特别好礼，送给漂亮的你。<hr id="hr">寒假出去玩。温泉滑血HIGH起来，酒店8折起!<hr id="hr"/><img src="img/guanggao.jpg" id="img1"/></div></div><div class="div1" id="font3"><img src="img/lijiang.jpg" width="650px" height="110px"/>2019的第一天，我遇见了下雪的丽江。<br />喜欢丽江这边的蓝天白云，一年中总会来上好几次...</div><div class="div2" id="font3"><img src="img/feilvbin.jpg" width="650px" height="160px"/>面面旅拍一宿务渔村麦坦克，墨宝鲸鲨甘米银，<br />三入菲律宾之与反向锦鲤携手的囧途纪行</div></div></div></body>
</html>CSS代码如下：
body{background-image: url(img/bgSix.jpg);}#bg{width: 200px;height: 350px;background-color: #333333;border:none;}.photo{width: 900px;height:80px;margin-left: 45px;background-image: url(img/logo.jpg);}.font1{font-family: "宋体";font-size: 20px;color: #ffffff;letter-spacing: 1px;//字间距text-align: left ;//文字对齐方式}.font2{font-family: "黑体";font-style: normal;font-size: 13px;color: #ffffff;background-color: #808080;}#font3{font-family: "黑体";font-style: normal;font-size: 13px;color: #ffffff;background-color: #808080;}.border1{width: 900px;height:35px;padding-top: 10px;border:none;//无边框margin-left: 45px;margin-left: 45px;background-color: #0000ff;}.border2{width: 200px;height: 365px;margin-left: 45px;background-color: #000000;border: 1px;border-style: solid;#hr{border-width: 1px;border-color: #ffffff;border-style: dashed;margin-top: 0px;}#img1{width: 200px;height: 187px;margin-top: 0px;margin-top: -6px;position: relative;}.div1{height: 140px;width: 648px;border: 2px solid #808080;margin-top: -368px;margin-left:240px;background-color: #808080;}.div2{width: 648px;height: 190px;border: 2px solid #808080;margin-top: 18px;margin-left:240px;background-color: #808080;}2.使用CSS对页面网页元素加以修饰，制作“青年志愿者”网站。
浏览效果如下：
HTML代码如下：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>青年志愿者</title><link type="text/css" href="css/205-2.css" rel="stylesheet"/></head><body><div class="img1"><img src="img/logoSix.jpg"/><div class="b1" id="f1">首页 志愿组织 志愿项目 志愿文化 志愿阵地 志愿人才 志愿发布 志愿服务交流会 志愿社区 登录 </div><div class="b2">第十三届中国青年志愿者评选表彰活动 第十三届中国青年志愿者优秀个人奖、组织奖、项目奖评选表彰活动申报开始啦！ 第十三届中国青年志愿者优秀个人奖、组织奖、项目奖评选表彰活动启动 青年之声</div><div class="b3" id="img2" ><img src="img/left.jpg" width="462px" height="250px"/><img src="img/left2.jpg" width="460px" height="230px"/></div><div class="b4"><h2>“我和我的祖国”视频征集活动启动<span id="f2"><br> 2019年1月28日，以“我和我的祖国”为主题的全国互联网正能量视频征集评选活动正式启动。</h2></span> <span id="f3"> 青年志愿者行动指导中心、阿里公益、阿里文娱联合主办，<br> 旨在评选和集中展示在网上有影响力、有公益性、有良好反响的优秀榜样和网络精品力作，<br> 让广大影像内容创作者发挥自己的社会责任感，推动社会主义精神文明建设，<br> 传播网络正能量，为建国70周年献礼。<br></span> <h4 id="f4"> 青春之灿烂</h4><hr class="b5"><div><span id="f3"> 新时代的中国青年志愿者行动的方向是什么？<br> “中国青年志愿者事业在新的历史条件下创新工作领域、服务社会需求的一大创举。”<br> “希望越来越多的青年人以你们为榜样，到基层和人民中去建功立业，让青春之花绽放在祖国最需要的地方。”<br> 曾多次对志愿服务工作作出重要指示，给青年志愿者群体亲切回信、寄语。<br></span></div><h4 id="f4"> 青春之道路</h4><hr class="b5"><div><span id="f3"> 这是组织服务青年的一条重要道路。<br> 在中国青年志愿者行动的大旗下，大批青年在奉献社会、服务人民的过程中，实现着自己的价值。<br> 他们在志愿服务的实践中，加强了对国情、民情、社情的了解，锤炼了意志品格。<br></span></div></div><br /><br /><br /><br /><div class="b6" align="center">主办单位：共青团中央青年志愿者工作部、中国青年志愿者协会秘书处、中国青年报社协办及技术平台支持：中青在线、中青华云、国家志愿者公益服务支撑平台</div></div></body>
</html>CSS代码如下：
.img1{width: 300px;height: 50%;background-image: url(img/logoSix.jpg) ;background-repeat: no-repeat;}#img2{padding-left: 5px;padding-top: 5px;}.b1{width: 1680px;height: 30px;border: 1px #0000ff solid;background-color: #0000ff;}.b2{width: 1680px;height: 30px;border: none}.b3{width: 460px;height: 500px;margin-left: 300px;border: 1px #000000 solid;}.b4{width: 465px;height: 501px;margin-top: -505px;margin-left: 800px;border: 1px #000000 solid;}.b5{width: 450px;height: 1px;padding-bottom: -10px;border-width: 2px;}.b6{width: 1680px;height: 25px;border: 1px #808080 solid;background-color: #808080;}#f1{font-family: 黑体;font-size: 20px;}#f2{font-family:songti;font-size: 10px;}#f3{font-family: heiti;font-size: 8px;}#f4{font-family: heiti;color: #808080;}