CSSflex实战 - 移动版携程网首页制作 - CSS3 - flex布局
Posted YK菌
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSSflex实战 - 移动版携程网首页制作 - CSS3 - flex布局相关的知识,希望对你有一定的参考价值。
文章目录
学学javascript,学学Vue,再用用ElementUI,感觉好久没有自己写过CSS了,需要练习练习~
关于flex布局,可以看看之前的博文【CSS】十分钟彻底弄懂flex布局 - 弹性盒 - 伸缩盒 - 代替浮动
今天主要是来一次移动端的实战内容
内容很简单,会用到很多CSS3的知识,巩固一下~
目标
0. 起步
目录结构
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
</body>
</html>
index.css
body {
max-width: 540px;
min-width: 320px;
margin: 0 auto;
font: normal 14px/1.5 Tahoma, "Lucida Grande", Verdana, "Microsoft Yahei",
STXihei, hei;
color: #000;
background: #f2f2f2;
overflow-x: hidden;
-webkit-tap-highlight-color: transparent;
}
1. 顶部搜索框
1.1 目标
1.2 整体布局
顶部一个盒子,固定定位,定在顶部,然后居中对齐
中间两个盒子,左边宽度自适应,右边固定宽度
<body>
<div class="search-index">
<div class="search"></div>
<a href="#" class="user"></a>
</div>
</body>
/* 搜索模块 */
.search-index {
display: flex;
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
min-width: 320px;
max-width: 540px;
height: 44px;
background-color: pink;
}
.search {
flex: 1;
}
.user {
width: 44px;
height: 44px;
background-color: orange;
}
1.3 填充头像区域
用伪元素将头像显示出来,头像使用的是精灵图
精灵图使用二倍图,将图片等比例缩放为原来的一半,然后测量位置
<a href="#" class="user">我 的</a>
a {
text-decoration: none;
}
.user {
width: 44px;
height: 44px;
background-color: orange;
font-size: 12px;
text-align: center;
color: #2eaae0;
}
.user::before {
content: "";
display: block;
width: 23px;
height: 23px;
/* 使用精灵图 */
background: url(../images/sprite.png) no-repeat -59px -194px;
/* 二倍图 */
background-size: 104px auto;
margin: 5px auto 0;
}
1.4 搜索框区域
将盒子改成border-box的盒模型
div {
box-sizing: border-box;
}
<div class="search">搜索:目的地/酒店/景点/航班号</div>
设置搜索框的大小再加入一些阴影,文字垂直居中
.search {
position: relative;
height: 26px;
/* 行高不是26px而是24px因为使用的是CSS3盒模型 */
line-height: 24px;
border: 1px solid #ccc;
flex: 1;
font-size: 12px;
color: #666;
margin: 7px 10px;
padding-left: 26px;
border-radius: 5px;
/* 设置阴影 */
box-shadow: 0 2px 4px rgba(0, 0,0,.2);
}
搜索图标一样用的精灵图,采用伪元素插入到前面
.search::before {
content: "";
/* display: block; */
/* 改成绝对定位,不占用原来位置,不会把文字挤下去 */
position: absolute;
top: 5px;
left: 5px;
width: 15px;height: 15px;
background: url(../images/sprite.png) no-repeat -59px -279px;
background-size: 104px auto;
}
再给整个搜索模块加背景色和上下边框
.search-index {
display: flex;
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
min-width: 320px;
max-width: 540px;
height: 44px;
background-color: #F6F6F6;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
1.5 效果
2. 焦点图模块
2.1 布局
<div class="focus">
<img src="./upload/focus.jpg" alt="">
</div>
上面搜索框是固定定位,不占原来的位置,要使用padding把上面的位置留出来
/* focus */
.focus {
padding-top: 26px;
}
.focus img {
width: 100%;
}
2.2 效果
3. 局部导航栏
3.1 布局
使用flex
圆角矩形
<ul class="local-nav">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
ul {
list-style: none;
margin: 0;
padding: 0;
}
.local-nav {
display: flex;
height: 64px;
background: #fff;
margin: 3px 4px;
border-radius: 8px;
}
.local-nav li {
flex: 1
}
3.2 填充内容
使用flex的思路 竖直居中 图片在上 文字在下
<ul class="local-nav">
<li>
<a href="#">
<span class="local-nav-icon"></span>
<span>景点·玩乐</span>
</a>
</li>
<li>
<a href="#">
<span class="local-nav-icon"></span>
<span>景点·玩乐</span>
</a>
</li>
<li>
<a href="#">
<span class="local-nav-icon"></span>
<span>景点·玩乐</span>
</a>
</li>
<li>
<a href="#">
<span class="local-nav-icon"></span>
<span>景点·玩乐</span>
</a>
</li>
<li>
<a href="#">
<span class="local-nav-icon"></span>
<span>景点·玩乐</span>
</a>
</li>
</ul>
.local-nav a {
display: flex;
/* 将主轴改成从上到下 */
flex-direction: column;
/* 侧轴居中对齐 */
align-items: center;
font-size: 12px;
}
.local-nav-icon {
width: 32px;
height: 32px;
/* flex不会出现外边距合并问题 */
margin-top: 8px;
background: url(../images/localnav_bg.png) no-repeat 0 0;
background-size: 32px auto;
}
使用CSS3的选择器,可以方便的给这五个导航设置样式
<ul class="local-nav">
<li>
<a href="#" title="景点·玩乐">
<span class="local-nav-icon1"></span>
<span>景点·玩乐</span>
</a>
</li>
<li>
<a href="#" title="周边游">
<span class="local-nav-icon2"></span>
<span>周边游</span>
</a>
</li>
<li>
<a href="#" title="美食林">
<span class="local-nav-icon3"></span>
<span>美食林</span>
</a>
</li>
<li>
<a href="#" title="一日游">
<span class="local-nav-icon4"></span>
<span>一日游</span>
</a>
</li>
<li>
<a href="#" title="当地攻略">
<span class="local-nav-icon5"></span>
<span>当地攻略</span>
</a>
</li>
</ul>
.local-nav li a [class^="local-nav-icon"] {
width: 32px;
height: 32px;
background-color: orange;
/* flex不会出现外边距合并问题 */
margin-top: 8px;
background: url(../images/localnav_bg.png) no-repeat 0 0;
background-size: 32px auto;
}
.local-nav li a .local-nav-icon2 {
background-position: 0 -32px;
}
.local-nav li a .local-nav-icon3 {
background-position: 0 -64px;
}
.local-nav li a .local-nav-icon4 {
background-position: 0 -96px;
}
.local-nav li a .local-nav-icon5 {
background-position: 0 -128px;
}
3.3 效果
4. 主导航栏
4.1 布局
一个大的圆角矩形,里面套三个矩形
<nav>
<div class="nav-common">
<div class="nav-items">1</div>
<div class="nav-items">2</div>
<div class="nav-items">3</div>
</div>
<div class="nav-common">2</div>
<div class="nav-common">3</div>
</nav>
里面的盒子采用flex布局
中间的盒子设置 上下margin
nav {
/* 因为里面的div没有圆角,所以需要这样 */
overflow: hidden;
border-radius: 8px;
margin: 0 4px 3px;
}
.nav-common {
display: flex;
height: 88px;
background-color: orange;
}
.nav-common:nth-child(2){
margin: 3px 0;
}
.nav-items {
flex: 1
}
/* 表示取前两个元素 */
.nav-items:nth-child(以上是关于CSSflex实战 - 移动版携程网首页制作 - CSS3 - flex布局的主要内容,如果未能解决你的问题,请参考以下文章