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;
}![[JAVAEE] 线程安全问题](https://i-blog.csdnimg.cn/direct/0325e8762966485d8c32769b03cede6a.png)
![[含文档+PPT+源码等]精品基于Nodejs实现的医院问诊系统的设计与实现](https://img-blog.csdnimg.cn/img_convert/813da755b48b27014b0d5e96affa1a51.png)
