03-flex布局.zip资源-CSDN文库

共26个文件

html：12个

jpg：7个

png：5个

需积分: 5 151 浏览量 2023-09-01 09:42:37 上传评论收藏 287KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

03-flex布局.zip （26个子文件）

03-flex布局

07-flex设置侧轴对齐方式（多行）.html 1KB

08-flex-flow复合属性.html 909B

03-flex设置主轴上的子元素排列方式1.html 1KB

09-flex子项flex份数.html 1KB

11-背景线性渐变.html 675B

01-flex布局体验.html 779B

04-flex设置主轴上的子元素排列方式2.html 851B

06-flex设置侧轴上的子元素排列方式.html 1KB

05-flex-wrap子元素是否换行.html 989B

10-align-self和order.html 1KB

css

normalize.css 8KB

index.css 6KB

index.html 6KB

images

hotel.png 10KB

subnav-bg.png 7KB

sprite.png 20KB

hot.png 3KB

localnav_bg.png 23KB

upload

pic5.jpg 24KB

pic6.jpg 28KB

focus.jpg 30KB

pic4.jpg 22KB

pic2.jpg 46KB

pic3.jpg 27KB

pic1.jpg 46KB

02-flex主轴方向.html 1KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/index.css"> <title>携程在手，说走就走</title> </head> <body>  <div class="search-index"> <div class="search">搜索:目的地/酒店/景点/航班号</div> <a href="#" class="user">我的</a> </div>  <div class="focus"> <img src="upload/focus.jpg" alt=""> </div>  <ul class="local-nav"> <li> <a href="#" title="景点·玩乐"> <span class="local-nav-icon-icon1"></span> <span>景点·玩乐</span> </a> </li> <li> <a href="#" title="景点·玩乐"> <span class="local-nav-icon-icon2"></span> <span>景点·玩乐</span> </a> </li> <li> <a href="#" title="景点·玩乐"> <span class="local-nav-icon-icon3"></span> <span>景点·玩乐</span> </a> </li> <li> <a href="#" title="景点·玩乐"> <span class="local-nav-icon-icon4"></span> <span>景点·玩乐</span> </a> </li> <li> <a href="#" title="景点·玩乐"> <span class="local-nav-icon-icon5"></span> <span>景点·玩乐</span> </a> </li> </ul>  <nav> <div class="nav-common"> <div class="nav-items"> <a href="#">海外酒店</a> </div> <div class="nav-items"> <a href="#">海外酒店</a> <a href="#">特价酒店</a> </div> <div class="nav-items"> <a href="#">海外酒店</a> <a href="#">特价酒店</a> </div> </div> <div class="nav-common"> <div class="nav-items"> <a href="#">海外酒店</a> </div> <div class="nav-items"> <a href="#">海外酒店</a> <a href="#">特价酒店</a> </div> <div class="nav-items"> <a href="#">海外酒店</a> <a href="#">特价酒店</a> </div> </div> <div class="nav-common"> <div class="nav-items"> <a href="#">海外酒店</a> </div> <div class="nav-items"> <a href="#">海外酒店</a> <a href="#">特价酒店</a> </div> <div class="nav-items"> <a href="#">海外酒店</a> <a href="#">特价酒店</a> </div> </div> </nav>  <ul class="subnav-entry"> <li> <a href="#"> <span class="subnav-entry-icon"></span> <span>电话费</span> </a> </li> <li> <a href="#"> <span class="subnav-entry-icon"></span> <span>电话费</span> </a> </li> <li> <a href="#"> <span class="subnav-entry-icon"></span> <span>电话费</span> </a> </li> <li> <a href="#"> <span class="subnav-entry-icon"></span> <span>电话费</span> </a> </li> <li> <a href="#"> <span class="subnav-entry-icon"></span> <span>电话费</span> </a> </li> <li> <a href="#"> <span class="subnav-entry-icon"></span> <span>电话费</span> </a> </li> <li> <a href="#"> <span class="subnav-entry-icon"></span> <span>电话费</span> </a> </li> <li> <a href="#"> <span class="subnav-entry-icon"></span> <span>电话费</span> </a> </li> <li> <a href="#"> <span class="subnav-entry-icon"></span> <span>电话费</span> </a> </li> <li> <a href="#"> <span class="subnav-entry-icon"></span> <span>电话费</span> </a> </li> </ul>  <div class="sales-box"> <div class="sales-hd"> <h2>热门活动</h2> <a href="#" class="more">获取更多福利</a> </div> <div class="sales-bd"> <div class="row"> <a href="#"> <img src="upload/pic1.jpg" alt=""> </a> <a href="#"> <img src="upload/pic2.jpg" alt=""> </a> </div> <div class="row"> <a href="#"> <img src="upload/pic3.jpg" alt=""> </a> <a href="#"> <img src="upload/pic4.jpg" alt=""> </a> </div> <div class="row"> <a href="#"> <img src="upload/pic5.jpg" alt=""> </a> <a href="#"> <img src="upload/pic6.jpg" alt=""> </a> </div> </div> </div> </body> </html>

评论收藏

内容反馈