移动端布局的编写页面

最新推荐文章于 2021-09-13 13:05:44 发布
ssh6666
最新推荐文章于 2021-09-13 13:05:44 发布
阅读量191
点赞数 2
分类专栏：初学者文章标签： html5 css3 css
本文链接：https://blog.youkuaiyun.com/ssh6666/article/details/105105148
版权
初学者专栏收录该内容
22 篇文章
订阅专栏
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
		 <link rel="stylesheet" href="css/reset.css" />
        <link rel="stylesheet" type="text/css" href="css/reset.css"/>
        <link rel="stylesheet" href="font/iconfont.css" />
        <style type="text/css">
            *{margin: 0;padding: 0;}
            .header{
                height: 3.46rem;
                background: pink url("img/banner.jpg")no-repeat center/100% 100%;
                padding-top:0.3rem;
            }
            .search{
                height: 0.62rem;
                padding:0px 0.3rem;
                display:flex;
                justify-content: space-between;
                align-items:center;
            }
            .searBtn{
                width: 5.9rem;
                height: 0.6rem;
                background: rgba(0,0,0,0.5);
                border-radius:0.3rem;
                color:#fff;
                line-height:0.6rem;
                text-align:center;
                font-size:0.28rem;
            } 
            .searBtn i{
                display:inline-block;
                font-size:0.28rem;
                margin-right:0.08rem;
				
            }
			/* 内容区 */
			/* con1 */
			.con1 ul{
				height: 3.35rem;
				width:100%;
				display: flex;
				flex-wrap: wrap;
				padding: 0.3rem 0;
				border-bottom:0.45rem #f5f5f5 solid;
				background: #ffffff;
			}
			.con1 ul li{
				list-style: none;
				height: 1.86rem;
				width: 25%;
				display: flex;
				justify-content: space-around;
			}
			.con1 ul li a{
				display: flex;
				flex-direction: column;
				color: #000000;
				text-align: center;
				font-size: 0.4rem;
				
			}
			.con1 ul img{
				height: 1.02rem;
				width: 1.02rem;
				margin:0 auto;
			}
			/* con1结束 */
			/* con2 */
			.con2{
				
			}
			.con2 ul{
				height: 2rem;
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				border-bottom:0.45rem #f5f5f5 solid;
			}
			.con2 ul li{
				height:1rem ;
				width: 33%;
				display: flex;
				align-items: center;
				box-sizing: border-box;
				border: 1px solid #f5f5f5 !important;
				
			}
			.con2 ul li img{
				height: 0.34rem;
				width: 0.34rem;
				padding-left:0.1rem ;
			}
			.con2 ul li a{
				color: #000000;
				font-size: 0.35rem;
				padding-left:0.1rem ;
			}
			/* con2 结束*/
			/* con3 */
			.con3 h2{
				font-size:0.48rem;
				height: 1.2rem;
				line-height: 1.2rem;
				text-align: center;
				font-weight: bold;
			}
			.con3Nei{
				display: flex;
				width: 100%;
				justify-content: space-around;
				flex-wrap: wrap;
			}
			.con3 .con3Nei dl{
				height: 5rem;
				width: 3.45rem;
			}
			.con3 .con3Nei dl dt img{
				height:2.34rem ;
				width: 3.45rem;
			}
			.con3 .con3Nei dl dd{
				margin: 0.1rem 0;
			}
			.con3 .con3Nei dl dd a{
				color: #000000;
				font-size: 0.4rem;
			}
			.con3 .con3Nei dl p span{
				color: red;
			}
			.con3 .con3Nei dl p{
				color: #b7b8b9;
			}
			/* con3结束 */
			/* con4end */
			.con4end{
				height: 1.52rem;
				width: 100%;
				background-color: #f5f5f5;
				padding-bottom: 1.07rem;
			}
			.con4end h2{
				font-size:0.2rem ;
				color: #c2c5ca;
				text-align: center;
				padding-top:0.6rem ;
			}
			.con4end ul {
				display: flex;
				justify-content: center;
				
			}
			.con4end ul li{
				margin: 0.1rem;
				
			}
			.con4end ul li a{
				color: #000000;
			}
			
			/* con4end结束 */
			/* footer */
			.footer{
				height: 1.07rem;
				width: 100%;
				position: fixed;
				bottom: 0rem;
				background: white;
			}
			.footer ul{
				height: 1.07rem;
				display: flex;
				justify-content: space-around;
				align-items: center;
			}
			.footer ul li{
				display: flex;
				flex-direction: column;
				text-align: center;
			}
			.footer ul li a{
				color: #000000;
				text-align: center;
			}
			
			/* footer结束 */
        </style>
    </head>
    <body>
        <div class="header">
            <div class="search">
                <span>
                    <img src="img/list.jpg" alt="" />
                </span>
                <a href="" class="searBtn"><i class="iconfont icon-fangdajing
"></i>搜索目的地/折扣/关键字</a>
            </div>
        </div>
        <div class="content">
			<div class="con1">
				<ul>
					<li><a href=""><img src="./img/pic.png" alt="">自由行</a></li>
					<li><a href=""><img src="./img/pic1.png" alt="">特价机票</a></li>
					<li><a href=""><img src="./img/pic2.png" alt="">当地玩乐</a></li>
					<li><a href=""><img src="./img/pic3.png" alt="">签证</a></li>
					<li><a href=""><img src="./img/pic4.png" alt="">租车自驾</a></li>
					<li><a href=""><img src="./img/pic5.png" alt="">邮轮</a></li>
					<li><a href=""><img src="./img/pic6.png" alt="">酒店</a></li>
					<li><a href=""><img src="./img/pic7.png" alt="">全部</a></li>
				</ul>
			</div>
			<div class="con2">
				<ul>
					<li><img src="./img/list1.png" alt=""><a href="">门票</a></li>
					<li><img src="./img/list2.png" alt=""><a href="">当地游</a></li>
					<li><img src="./img/list3.png" alt=""><a href="">WIFI电话卡</a></li>
					<li><img src="./img/list4.png" alt=""><a href="">交通票券</a></li>
					<li><img src="./img/list5.png" alt=""><a href="">当地参团</a></li>
					<li><img src="./img/list6.png" alt=""><a href="">接送机/包车</a></li>
				</ul>
			</div>
			<div class="con3">
				<h2>精选折扣</h2>
				<div class="con3Nei">
				<dl>
					<dt><img src="./img/pic1.jpg" alt=""></dt>
					<dd><a href="">[国庆]长沙直飞洛杉矶10天/13天/14天往返含税机	</a></dd>
					<p><span>3099</span>元起</p>
				</dl>
				<dl>
					<dt><img src="./img/pic2.jpg" alt=""></dt>
					<dd><a href="">[国庆]长沙直飞洛杉矶10天/13天/14天往返含税机	</a></dd>
					<p><span>3099</span>元起</p>
				</dl>
				<dl>
					<dt><img src="./img/pic3.jpg" alt=""></dt>
					<dd><a href="">[国庆]长沙直飞洛杉矶10天/13天/14天往返含税机	</a></dd>
					<p><span>3099</span>元起</p>
				</dl>
				<dl>
					<dt><img src="./img/pic4.jpg" alt=""></dt>
					<dd><a href="">[国庆]长沙直飞洛杉矶10天/13天/14天往返含税机	</a></dd>
					<p><span>3099</span>元起</p>
				</dl>
				<dl>
					<dt><img src="img/pic1.jpg" alt=""></dt>
					<dd><a href="">[国庆]长沙直飞洛杉矶10天/13天/14天往返含税机	</a></dd>
					<p><span>3099</span>元起</p>
				</dl>
				<dl>
					<dt><img src="./img/pic4.jpg" alt=""></dt>
					<dd><a href="">[国庆]长沙直飞洛杉矶10天/13天/14天往返含税机	</a></dd>
					<p><span>3099</span>元起</p>
				</dl>
				</div>
			</div>
			<div class="con4end">
				<h2>2004-2007&copy;穷游网&trade; qyer.com all rights resenved.</h2>
				<ul>
					<li ><a href="">手机版</a></li>
					<li><a href="">电脑版</a></li>
					<li><a href="">APP</a></li>
				</ul>
			</div>
		</div>
        <div class="footer">
			<ul>
				<li class="iconfont icon-home "><a href="" >首页</a></li>
				<li class="iconfont icon-xiangji "><a href="" >目的地</a></li>
				<li class="iconfont icon-xiangji "><a href="" >我的</a></li>
			</ul>
		</div>
         
         
         
         
        <script type="text/javascript" src="js/flexible.js"></script>
    </body>
</html>
效果图
在这里插入图片描述