第六章练习题-优快云博客


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>旅游攻略</title>
        <style>
            * {
                box-sizing: border-box;
            }
            
            .first {
                width: 900px;
                height: 100px;
                border: 3px solid;
            }
            .second {
                
                width: 900px;
                height: 50px;
                padding: 10px 0;
                background-color: black;
            }
            a {
                font-size: 15px;
                text-decoration: none;
                color: white;
                letter-spacing: 0.2em;
            }
            .left {
                width: 300px;
                height: 430px;
                margin-top: 10px;
                margin-right: 30px;
                border: solid;
                float: left;
                background-color: #808080;
            }
            .ziti {
                width: 295px;
                height: 240px;
                line-height: 100%;
                background-color: #808080;
            }
            .xhx {
                text-decoration: underline 2px dashed white;
                color: white;
            }
            span {
                display: inline-block;
                height: 35px;
                width: 295px;
                font-size: 15pt;
                color: white;
                background-color: #c5c5c5;
            }
            .ziti img {
                width: 295px;
                height: 165px;
            }
            .container {
                margin-top: 10px;
                float: left;
                width: 560px;
                height: 420px;
            }
            .right1 {
                width: 556px;
                height: 170px;
                background-color: #808080;
            }
            .right1 img {
                width: 556px;
                height: 110px;
            }
            .right2 {
                margin-top: 10px;
                width: 556px;
                height: 240px;
                background-color: #808080;
            }
            .right2 img {
                width: 556px;
                height: 180px;
            }
            .ww {
                color: white;
            }
        </style>
    </head>
    <body>
        <div class="first">
            <img src="照片/logo.JPG" alt="">
        </div>
        <div 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>
        </div>
        <div class="left">
            <span>最新活动</span>
            <div class="ziti">
                <p class="xhx">上海龙支付酒店+景点满500减100</p>
                <p class="xhx">包车游世界，畅游当地行，还有出行补贴400元/人</p>
                <p class="xhx">新年红包，你写就有，请拿起手机，编辑你的信息</p>
                <p class="xhx">女神节，特别好礼，送给漂亮的你。</p>
                <p class="xhx">寒假出去玩，温泉滑雪HIGH起来，酒店八折起！</p>
                <img src="照片/guanggao.jpg" alt="">
            </div>
        </div>
        <div class="container">
        <div class="right1">
            <img src="照片/lijiang.jpg" alt="">
            <p class="ww">2019年的第一天，我遇见了下雪的丽江<br />
            喜欢丽江这边的蓝天白云，一年中总会来上几次...</p>
        </div>
        <div class="right2">
            <img src="照片/feilvbin.jpg" alt="">
            <p class="ww">面面旅拍-宿务渔村麦克坦，墨宝鲸鲨干米银，<br />
            三入菲律宾之与反向锦鲤携手的囧途纪行</p>
        </div>
        </div>
    </body>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>青年志愿者</title>
		<style type="text/css">
		.zhz{
			width: 900px;
			height: 850px;
			border: 0px solid;
		}
		.top{
			width: 900px;
			height: 100px;
		}
		.menu{
			width: 900px;
			height: 30px;
			margin-top: 5px;
			background-color:#808080;
		}
		.one{
			width: 900px;
			height: 30px;
			background-color: white;
		}
		.left{
			width: 350px;
			height: 600px;
			float: left;
			margin-left: 80px;
			border: solid #808080;
		}
		.yhz{
			width: 350px;
			height: 600px;
			float: right;
			margin-left: 5px;
			margin-right: 80px;
			border: solid #808080;
		}
		.bottom{
			width: 900px;
			height: 20px;
			margin-top: 670px;
			background-color: #808080;
			text-align: center;
			font-family: '楷体';
		}
		#ww{
			font-family:fangsong;
			font-size: 20px;
			font-weight:bolder;
		}
		.xhx{
			border-bottom: 3px solid;
		}
		li{
			list-style: none;
			text-indent: 4em;
			}
		</style>
	</head>
	<body>
		<div class="zhz">
			<div class="top">
				<img src="照片/logo1.JPG" width="900px" height="100px"/>
			</div>
			<div class="menu">
				<span>首页&nbsp;&nbsp;&nbsp;&nbsp;组织&nbsp;&nbsp;&nbsp;&nbsp;项目&nbsp;&nbsp;&nbsp;&nbsp;生态文化&nbsp;&nbsp;&nbsp;&nbsp;人才&nbsp;&nbsp;&nbsp;&nbsp;发布	&nbsp;&nbsp;&nbsp;&nbsp;社区	&nbsp;&nbsp;&nbsp;&nbsp;登录</span>
			</div>
			<div class="one">
				<span>中国青年诚信活动</span>
				<span>公益中国</span>
				<span>中国之声</span>
				<span>中国青年公益行动专栏</span>
				<span>2015年公益服务</span>
				<span>上线</span>
			</div>
			<div class="left">
				<img src="照片/left.JPG" width="350px" height="220px"/>
					<img src="照片/left2.JPG" width="350px" height="375px"/>
			</div>
			<div class="yhz">
				<p id="ww">“我和我的祖国”视频征集活动启动</p>
				<li>。。。。。。。。。。</li>
				<li>。。。。。。。。。。</li>
				<li>。。。。。。。。。。</li>
				<li>。。。。。。。。。。</li>
				<li>。。。。。。。。。。</li>
				<li>。。。。。。。。。。</li>
				<p class="xhx">公益快报</p>
				<li>。。。。。。。。。。</li>
				<li>。。。。。。。。。。</li>
				<li>。。。。。。。。。。</li>
				<li>。。。。。。。。。。</li>
				<li>。。。。。。。。。。</li>
				<li>。。。。。。。。。。</li>
				<li>。。。。。。。。。。</li>
				<p class="xhx">公益观察</p>
				<li>。。。。。。。。。。</li>
				<li>。。。。。。。。。。</li>
				<li>。。。。。。。。。。</li>
				<li>。。。。。。。。。。</li>
				<li>。。。。。。。。。。</li>
				<li>。。。。。。。。。。</li>
				<li>。。。。。。。。。。</li>
			</div>
			<div class="bottom">
				<p>版权所有&copy;中国青年志愿者</p>
			</div>
		</div>
	</body>
</html>