代碼
<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 {/*鼠標經(jīng)過nav 里面的 ul 就不做動畫了*/
animation-play-state: paused;/*鼠標經(jīng)過暫停動畫*/
}
結(jié)果
image.png
代碼
<link rel="stylesheet" href="css/style.css">
<title>傳統(tǒng)布局三等份</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;
}
結(jié)果
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;子盒子添加份數(shù)*/
/*margin: 0 5px;*/
}
section div:nth-child(1) {
background-color: pink;
flex: 1;/*flex: 1 子盒子份數(shù)当叭，不跟單位*/
}
section div:nth-child(2) {
background-color: purple;
flex: 2;
}
section div:nth-child(3) {
background-color: blue;
flex: 1;
}
結(jié)果
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;*/
}
結(jié)果
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);/*文字陰影*/;
}
結(jié)果
image.png
