html网页布局，供参考

z2466589307

已于 2022-12-06 23:21:34 修改

阅读量245

点赞数

文章标签： html css 前端

于 2022-12-06 23:18:15 首次发布

本文链接：https://blog.csdn.net/z2466589307/article/details/128212388

版权

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>携程旅行网官网:酒店预订,机票预订查询,旅游度假,商旅管理</title>
    <link rel="icon" href="OIP-C.jfif">
    <meta name="description" content="携程旅行网是中国领先的在线旅行服务公司，向超过9000万会员提供酒店预订、酒店点评及特价酒店查询、机票预订、飞机票查询、时刻表、票价查询、航班查询、度假预订、商旅管理、为您的出行提供全方位旅行服务。">
    <meta name="keywords" content="酒店预订,特价酒店, 机票,机票预订,飞机票查询,航班查询,酒店团购,旅游度假,旅行,商旅管理">

</head>
<body>
<header>页眉区域    </header>
<section>
    <article>1.主体内容区域</article>
    <nav>2.导航栏</nav>
    <aside>3.其他栏目</aside>
</section>
<footer>页脚区域</footer>
 <style type="text/css">
 *{
    margin: 0;
    padding: 0;
    -moz-box-sizing:  border-box;
    box-sizing: border-box;
 }
 html,body{
    height: 100%;
    color: #fff;
 }
 body{
    min-width: 100%;
 }
 header,section,article,nav,aside,footer{
    display: block;
    text-align: center;
    text-shadow: 1px 1px 1px #444;
    font-size: 1.2em;

 }
 header{
    background-color: hsla(200, 10%, 20%,.9);
    min-height: 100px;
    padding: 10px 20px;
    min-width: 100%;
 }
 section{
    min-width: 100%;
 }
 nav{
    background-color: hsla(300, 60%, 20%, .9);
    padding: 1%;
    width: 220px;
 }
 article{
    background-color: hsla(300, 60%, 20%, .9);
    padding: 1%;
 }
 aside{
    background-color: hsla(120, 50%, 50%,  .9);
 }
 footer{
    background-color: hsla(250, 50%, 80%,  .9);
    min-height: 60px;
    padding: 1%;
    min-width: 100%;
 }
 body{
    display: -wekbit-box ;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flexbox;
    display: flex;
    -moz-box-orient: vertical;
    -webkit-box-orient: vertical;
    -moz-box-direction: normal;
    -moz-box-direction: normal;
    -moz-box-lines: multiple;
    -webkit-box-lines: multiple;
    -webkit-flex-flow: column wrap;
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;
 }
 section{
    display: -moz-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    -moz-box-orient: horizontal;
    -webkit-box-orient: horizontal;
    -moz-box-direction: normal;
    -webkit-box-direction: normal;
    -moz-box-lines: multiple;
    -webkit-box-lines: multiple;
    -ms-flex-flow: row wrap;
    -webkit-box-flow: row wrap;
    flex-flow: row wrap;
    -moz-box-align: stretch;
    -webkit-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;
 }
 article{
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    -moz-box-ordinal-group: 2;
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
 }
 aside{
    -moz-box-ordinal-group: 3;
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 3;
    -webkit-order: 3;
    order: 3;
 }

</style>
</body>
</html>