<!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>
html网页布局,供参考
于 2022-12-06 23:18:15 首次发布