1。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>旅游攻略</title>
<style type="text/css">
.bc{
width: 900px; /*设置整体盒子的宽度*/
height: 700px; /*设置整体盒子的高度*/
background: url(img/bg.JPG) ; /*设置背景图片*/
}
.b{
float: left; /*设置盒子浮动在左边*/
width: 400px;
height: 520px;
background-color: #000000; /*设置背景为黑色*/
}
.c{
float: right; /*设置盒子浮动在右边*/
width: 480px;
height: 520px;
background-color: #000000; /*设置背景为黑色*/
}
p{
color: white; /*设置文字颜色*/
border-bottom: 3px dashed white; /*设置文字虚线*/
}
.p1{
color: white; /*抵消p标签的效果*/
border-bottom: 3px black; /*设置与背景同色抵消p标签效果*/
}
h2{
background-color: #000000; /*设置标题背景颜色*/
color: white; /*设置文字颜色*/
}
h3{
background-color: brown; /*设置标题背景颜色*/
color: white;
font-size: 30px; /*设置文字大小*/
}
</style>
</head>
<body>
<div class="bc">
<div>
<img src="img/logo.JPG"/>
</div>
<div>
<h2>首页 | 酒店 | 旅游 | 跟团游 | 自由行
| 机票 | 火车 | 汽车票 | 机票 | 攻略
| 商旅 | 更多</h2>
</div>
<div>
<div class="b">
<h3>最新活动</h3>
<div>
<p>上海支付酒店+景点满500减100</p>
<p>包车游世界，畅游当地行，还有出行补贴400元/人</p>
<p>新年红包，你写就有。请拿起手机，编辑您的信息</p>
<p>女神节，特别好礼，送给漂亮的你。</p>
<p>寒假出去玩。温泉滑雪HIGH起来，酒店8折起！</p>
<img src="img/guanggao.jpg" width="400px" height="225px"/>
</div>
</div>
<div class="c">
<div>
<img src="img/lijiang.jpg" width="480px" height="180px"/>
<p class="p1">2019的第一天，我遇见了下雪的丽江。<br />
喜欢丽江这边的蓝天白云，一年中总会来上好几次...</p>
</div>
<div>
<img src="img/feilvbin.jpg" width="480px" height="180px"/>
<p class="p1">画面旅拍--宿务渔村麦克坦，墨宝鲸鲨甘米银。<br />
三入菲律宾之与反向锦鲤携手的囧途纪行</p>
</div>
</div>
</div>
</div>
</body>
</html>
2.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>青年志愿者</title>
<style type="text/css">
h2{ /*用90%截图*/
background-color: brown;
letter-spacing: 10px;
}
.a{
height: 850px;
}
.left{
border: 3px dashed;
float: left;
margin-left: 300px;
}
.right{
border: 3px dashed;
float: right;
margin-right: 300px;
}
</style>
</head>
<body>
<div>
<div>
<img src="img/logo (2).JPG"/>
</div>
<div>
<h2> 首页 志愿组织 志愿项目 志愿文化 志愿情况
志愿人才 志愿发布 志愿服务交流台 志愿社区 登录</h2>
<p>中国青年诚信行动 志愿中国
青年之声 中国青年志愿*阳光光效行动专愿
二O一五年志愿服务*交流会官网 七夕令国*志汇上线</p>
</div>
<div class="a">
<div class="left">
<div>
<img src="img/left.JPG"/>
</div>
<div>
<img src="img/left2.JPG"/>
</div>
</div>
<div class="right">
<div>
<img src="img/b.jpg" width="550px" height="780px"/>
</div>
</div>
</div>
<div>
<img src="img/a.png" width="100%" height="20px"/>
</div>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
