<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>旅游攻略网站</title>
<style type="text/css">
.all{
width: 600px;
height: 800px;
background: url(img/bg.JPG);
}
.logo{
width: 600px;
height: 150px;
}
#img{
width: 600px;
height: 150px;
}
.top{
width: 600px;
height: 50px;
background-color: #fff000;
}
.left{
width: 300px;
height: 600px;
float: left;
background-color: #ffffff;
}
.wz{
width: 300px;
height: 300px;
margin-top: 20px;
background-color: bisque;
}
#img1{
width: 300px;
height: 210px;
}
.r1{
width: 300px;
height: 295px;
float: right;
background-color: #ffffff;
}
#img2{
width: 300px;
height: 250px;
float: right;
}
.r2{
width: 300px;
height: 300px;
margin-top: 5px;
float: right;
background-color: #ffffff;
}
#img3{
width: 300px;
height: 230px;
}
#x{
font-size: 9px;
}
</style>
</head>
<body>
<div class="all">
<div class="logo"><img src="img/logo.jpg" id="img"/></div>
<div class="top">
<p>首页| 酒店|旅游|跟团游|自由行|机票|火车|汽车票|机票|门票|攻略|商旅|更多</p>
</div>
<div class="left">
<p>最新活动</p>
<div class="wz">
<p >上海龙支付酒店+景点，满500减100</p>
<hr style="border: 1px dashed;">
<p >包车游世界，畅游当地行，还有出行补贴400元/人</p>
<hr style="border: 1px dashed;">
<p >新年红包，你写就有。请掌起手机编辑您的信息 </p>
<hr style="border: 1px dashed;">
<p >女神节，特别好礼，送给漂亮的你</p>
<hr style="border: 1px dashed;">
<p >寒假出去玩。温泉滑血HIGH起来，酒店8折起!</p>
<img src="img/guanggao.jpg" id="img1"/>
</div>
</div>
<div class="r1">
<img src="img/lijiang.jpg" id="img2"/>
<p id="x">2019的第一天，我遇见了下雪的丽江。</p>
<p id="x">喜欢丽江这边的蓝天白云，一年中总会来上好几次..</p>
</div>
<div class="r2">
<img src="img/feilvbin.jpg" id="img3"/>
<p id="x">面面旅拍一宿务渔村麦克坦，墨宝鲸鲨甘米银。</p>
<P id="x">三入菲律宾之与反向锦鲤携手的同迷纪行</P>
</div>
</div>
</body>
</html>运行结果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>青年志愿者</title>
<style type="text/css">
.all{
width: 900px;
height: 1200px;
border: 0px solid;
}
.top{
width: 900px;
height: 100px;
}
.menu{
width: 900px;
height: 30px;
margin-top: 5px;
background-color:#717171;
letter-spacing: 16px;
}
.wz{
width: 900px;
height: 30px;
background-color: white;
letter-spacing: 2px;
}
.left{
width: 350px;
height: 680px;
float: left;
margin-left: 80px;
border: solid #000;
}
.right{
width: 350px;
height: 680px;
float: right;
margin-left: 5px;
margin-right: 80px;
border: solid #000;
}
.bottom{
width: 900px;
height: 20px;
margin-top: 750px;
background-color: #717171;
}
#ID1{
font-family:fangsong;
font-size: 20px;
font-weight:bolder;
}
.x{
border-bottom: 3px solid;
}
.first{
text-indent: 2em;
}
li{
list-style: none;
text-indent: 4em;
}
</style>
</head>
<body>
<div class="all">
<div class="top">
<img src="img/logo (2).JPG" width="900px" height="100px"/>
</div>
<div class="menu">
<span>首页</span>
<span>志愿组织</span>
<span>志愿项目</span>
<span>志愿人才</span>
<span>志愿发布</span>
<span>志愿社区</span>
<span>登录</span>
</div>
<div class="wz">
<span>中国青年诚信活动</span>
<span>公益中国</span>
<span>青年之声</span>
<span>中国青年阳光公益行动专栏</span>
<span>二O一五年志愿服务重庆交流活动</span>
<span>上线</span>
</div>
<div class="left">
<img src="img/left.JPG" width="350px" height="260px"/>
<img src="img/left2.JPG" width="350px" height="380px"/>
</div>
<div class="right">
<p id="ID1">“我和我的祖国”视频征集活动启动</p>
<p class="first">2019年1月28日，以“我和我的祖国”为主题的全国互联网正能量视频征集活动正式启动。</p>
<li>xxxxxxxxxxxxxxxxxx</li>
<li>xxxxxxxxxxxxxxxxxx</li>
<li>xxxxxxxxxxxxxxxxxx</li>
<li>xxxxxxxxxxxxxxxxxx</li>
<li>xxxxxxxxxxxxxxxxxx</li>
<li>xxxxxxxxxxxxxxxxxx</li>
<p class="x">公益快报</p>
<li>xxxxxxxxxxxxxxxxxx</li>
<li>xxxxxxxxxxxxxxxxxx</li>
<li>xxxxxxxxxxxxxxxxxx</li>
<li>xxxxxxxxxxxxxxxxxx</li>
<li>xxxxxxxxxxxxxxxxxx</li>
<li>xxxxxxxxxxxxxxxxxx</li>
<li>xxxxxxxxxxxxxxxxxx</li>
<p class="x">公益观察</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 align="center">版权所有©中国青年志愿</p>
</div>
</div>
</body>
</html>运行结果：
