代码
<link rel="stylesheet" href="css/style.css">
<title>Title</title>
</head>
<body>
<nav>
<ul>
<li><img src="images/t1.jpg" width="126px" height="86px" alt=""></li>
<li><img src="images/t2.jpg" width="126px" height="86px" alt=""></li>
<li><img src="images/t3.jpg" width="126px" height="86px" alt=""></li>
<li><img src="images/t4.jpg" width="126px" height="86px" alt=""></li>
<li><img src="images/t5.jpg" width="126px" height="86px" alt=""></li>
<li><img src="images/t6.jpg" width="126px" height="86px" alt=""></li>
<li><img src="images/t7.jpg" width="126px" height="86px" alt=""></li>
<li><img src="images/t1.jpg" width="126px" height="86px" alt=""></li>
<li><img src="images/t2.jpg" width="126px" height="86px" alt=""></li>
<li><img src="images/t3.jpg" width="126px" height="86px" alt=""></li>
<li><img src="images/t4.jpg" width="126px" height="86px" alt=""></li>
<li><img src="images/t5.jpg" width="126px" height="86px" alt=""></li>
<li><img src="images/t6.jpg" width="126px" height="86px" alt=""></li>
<li><img src="images/t7.jpg" width="126px" height="86px" alt=""></li>
</ul>
</nav>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
nav {
width: 882px;
height: 86px;
border: 1px solid pink;
margin: 100px auto;
overflow: hidden;
}
nav li {
float:left;
}
nav ul {
width: 200%;
animation: moveing 5s linear infinite;/*引用动画*/
/*linear 匀速运动*/
}
/*定义动画*/
@keyframes moveing {
from {
transform: translateX(0);
}
to {
transform: translateX(-882px);
}
}
nav:hover ul {/*鼠标经过nav 里面的 ul 就不做动画了*/
animation-play-state: paused;/*鼠标经过暂停动画*/
}
结果
image.png
代码
<link rel="stylesheet" href="css/style.css">
<title>传统布局三等份</title>
</head>
<body>
<section>
<div>1</div>
<div>2</div>
<div>3</div>
</section>
section {
width: 80%;
height: 200px;
border: 1px solid pink;
margin: 100px auto;
}
section div {
width: 33.33%;
height: 100%;
float: left;
}
section div:nth-child(1) {
background-color: pink;
}
section div:nth-child(2) {
background-color: purple;
}
section div:nth-child(3) {
background-color: blue;
}
结果
image.png
代码
<link rel="stylesheet" href="css/style.css">
<title>伸缩布局三等份</title>
</head>
<body>
<section>
<div>1</div>
<div>2</div>
<div>3</div>
</section>
section {
width: 80%;
height: 200px;
border: 1px solid pink;
margin: 100px auto;
/*父级盒子添加flex*/
display: flex;/*伸缩布局模式*/
}
section div {
height: 100%;
/*flex: 1;子盒子添加份数*/
/*margin: 0 5px;*/
}
section div:nth-child(1) {
background-color: pink;
flex: 1;/*flex: 1 子盒子份数，不跟单位*/
}
section div:nth-child(2) {
background-color: purple;
flex: 2;
}
section div:nth-child(3) {
background-color: blue;
flex: 1;
}
结果
image.png
代码
<link rel="stylesheet" href="css/style.css">
<title>伸缩布局固定宽度</title>
</head>
<body>
<section>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</section>
section {
width: 80%;
height: 200px;
border: 1px solid pink;
margin: 100px auto;
/*父级盒子添加flex*/
display: flex;/*伸缩布局模式*/
min-width: 500px;
flex-direction: column;/*给父盒子添加 伸缩布局排列方式 垂直，row水平也可以*/
}
section div {
height: 100%;
}
section div:nth-child(1) {
background-color: pink;
/*width: 200px;*/
}
section div:nth-child(2) {
background-color: purple;
/*margin: 0 5px;*/
/*width: 100px;*/
}
section div:nth-child(3) {
background-color: blue;
/*flex: 1;*/
}
section div:nth-child(4) {
background-color: green;
/*flex: 1;*/
}
结果
image.png
代码
<link rel="stylesheet" href="css/style.css">
<title>携程旅行</title>
</head>
<body>
<header>
<img src="images/baodi2@v7.15.jpg" width="768px" height="154px" >
</header>
<nav>
<div class="row">
<div class="rou3 hote"><a href="#">酒店</a></div>
<div class="rou3 hotel">
<a href="#">海外酒店</a>
<a href="#">特价酒店</a>
</div>
<div class="rou3 hotel">
<a href="#">团购</a>
<a href="#">民宿·客栈</a>
</div>
</div>
<div class="row">
<div class="rou3 hote"><a href="#">机票</a></div>
<div class="rou3 hotel">
<a href="#">火车票·抢票</a>
<a href="#">特价机票</a>
</div>
<div class="rou3 hotel">
<a href="#">汽车票·船票</a>
<a href="#">专车·租车</a>
</div>
</div>
<div class="row">
<div class="rou3 hote"><a href="#">旅游</a></div>
<div class="rou3 hotel">
<a href="#">目的地攻略</a>
<a href="#">周边游</a>
</div>
<div class="rou3 hotel">
<a href="#">邮轮旅行</a>
<a href="#">定制旅行</a>
</div>
</div>
<div class="row">
<div class="rou3 hotel">
<a href="#">景点·玩乐</a>
<a href="#">礼品卡</a>
</div>
<div class="rou3 hotel">
<a href="#">美食林</a>
<a href="#">Wifi·电话卡</a>
</div>
<div class="rou3 hotel">
<a href="#">购物·外汇</a>
<a href="#">保险·签证</a>
</div>
</div>
</nav>
</body>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
body {
min-width: 320px;/*最小宽度*/
max-width: 540px;/*最大宽度*/
margin: 0 auto;
}
header {
width: 100%;/*继承body的宽度 body 540px*/
height: 100px;
}
header img {
width: 100%;/*继承header的宽度*/
height: 100%;
}
nav {
padding: 5px;
}
.row {
height: 90px;
width: 100%;
background-color: pink;
border-radius: 8px;
display: flex;/*伸缩布局 父亲加*/
margin-bottom: 5px;
}
nav .row:nth-child(2) {
background-color: #3d98ff;
}
nav .row:nth-child(3) {
background-color: #44c522;
}
nav .row:nth-child(4) {
background-color: #fc9720;
}
.rou3 {
flex: 1;/*每个占一份*/
border-left: 1px solid #ffffff;
}
.row div:first-child {
border: 0;
}
.hotel {
display: flex;
flex-direction: column;/*垂直排列*/
}
.hotel a {
flex: 1;
font-size: 16px;
color:#ffffff;
text-align: center;
line-height: 45px;
text-decoration: none;
text-shadow: 0 2px 1px rgba(0, 0, 0, 0.5);/*文字阴影*/
}
.hotel a:first-child {
border-bottom: 1px solid #ffffff;
}
.hote a{
flex: 1;
font-size: 16px;
color:#ffffff;
text-align: center;
line-height: 90px;
text-decoration: none;
text-shadow: 0 2px 1px rgba(0, 0, 0, 0.5);/*文字阴影*/;
}
结果
image.png
