<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 设置 meta 视口标签 -->
<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>Flex 弹性布局案例</title>
</head>
<body>
<!-- 顶部固定定位搜索栏 - 不随着页面滑动而消失 -->
<div class="search-index">
<!-- 搜索栏提示内容 -->
<div class="search">输入搜索信息</div>
<!-- 搜索栏右侧按钮 -->
<a href="#" class="user">我 的</a>
</div>
<!-- Banner 轮播图模块 -->
<div class="banner">
<img src="upload/focus.jpg" alt="">
</div>
<!-- 横向导航栏 -->
<ul class="local-nav">
<li>
<a href="#">
<span class="local-nav-icon1"></span>
<span>景点·玩乐</span>
</a>
</li>
<li>
<a href="#">
<span class="local-nav-icon2"></span>
<span>周边游</span>
</a>
</li>
<li>
<a href="#">
<span class="local-nav-icon3"></span>
<span>美食林</span>
</a>
</li>
<li>
<a href="#">
<span class="local-nav-icon4"></span>
<span>一日游</span>
</a>
</li>
<li>
<a href="#">
<span class="local-nav-icon5"></span>
<span>当地攻略</span>
</a>
</li>
</ul>
</body>
</html>
【移动端网页布局】Flex 弹性布局案例 ③
73 浏览量
2024-03-06
21:53:59
上传
评论
收藏 686KB ZIP 举报
demo.zip （28个子文件） 
demo css 
normalize.css 8KB index.css 8KB
index.html 2KB images 
subnav-bg.png 7KB sprite.png 20KB localnav_bg.png 23KB upload 
pic5.jpg 24KB pic6.jpg 28KB banner.dpg 91KB nav-bg.dpg 10KB pic22.dpg 36KB new2.dpg 16KB pic3.dpg 20KB nav1.webp 6KB focus.jpg 30KB pic1.dpg 17KB pic33.dpg 85KB nav2.webp 4KB pic4.jpg 22KB pic2.jpg 46KB nav3.webp 4KB new1.dpg 25KB pic3.jpg 27KB pic2.dpg 17KB pic11.dpg 74KB news.dpg 4KB pic1.jpg 46KB new3.dpg 17KB资源评论
