900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 05移动端布局基础之flex弹性布局项目实战(携程移动端首页)

05移动端布局基础之flex弹性布局项目实战(携程移动端首页)

时间:2024-06-15 09:07:40

相关推荐

05移动端布局基础之flex弹性布局项目实战(携程移动端首页)

技术交流QQ群:1027579432,欢迎你的加入!

1.携程网移动端首页

打开网址:

2.技术选型

方案:采取单独制作移动页面方案技术:布局采取flex布局

3.搭建相关文件夹结构

4.设置视口标签以及引入初始化样式

```<meta name="viewport" content="width=device-width, user-scalable=no, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0"><link rel="stylesheet" href="css/normalize.css"><link rel="stylesheet" href="css/index.css">```

5.常用初始化样式

```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-color: #f2f2f2;overflow-x: hidden;-webkit-tap-highlight-color: transparent;}```

6.常见flex布局思路

7.背景线性渐变Gradient Background

语法1

background: linear-gradient(起始方向,颜色1,颜色2,...);background: -webkit-linear-gradient(left, red,blue);background: -webkit-linear-gradient(left top,red, blue);

背景渐变必须添加浏览器私有前缀;起始方向可以是:方位名词或度数,如果省略默认就是top;

8.资料下载

笔记及代码,欢迎star,follow,fork…

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。