【移动端网页布局】Flex 弹性布局案例 ① ( 案例框架搭建 | html 标签结构框架 | css 初始样式 )

2023-10-11 16:41:13 浏览数 (1)

一、案例框架搭建

1、html 标签结构

在 html 中设置 meta 视口标签 , 设置宽度等于设备宽度 , 初始比例为 1.0 , 用户不可缩放 , 最大缩放比例和最小缩放比例都设置为 1.0 ;

代码语言：javascript复制
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">

此外 , 引入 normalize.css 初始化样式 ,

代码语言：javascript复制
<link rel="stylesheet" href="css/normalize.css">

完整代码 :

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-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>
    
</body>

</html>

2、css 初始样式

在之前的开发中 , 积累的一些默认 css 样式 , 先设置到 css 样式文件的头部 ;

清除点击高亮样式 , 将点击后的高亮样式设置为transparent 完成透明 ;

代码语言：javascript复制
* {
    -webkit-tap-highlight-color: transparent;
}

在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式 ;

代码语言：javascript复制
input {
    -webkit-appearance: none;
}

禁用长按页面时的弹出菜单 ;

代码语言：javascript复制
img,
a {
    -webkit-touch-callout: none;
}

清除浮动样式 :

代码语言：javascript复制
.clearfix:after {
    content: "";
    display: block;
    line-height: 0;
    visibility: hidden;
    height: 0;
    clear: both;
}

设置 css3 盒子模型样式 :

代码语言：javascript复制
div {
    /* css3 盒子模型 */
    box-sizing: border-box;
}

设置文本与图片对齐的样式 : 默认是与文字基线对齐 ;

代码语言：javascript复制
img {
    /* 图片与文字对齐样式 默认是与文字基线对齐 */
    vertical-align: middle;
}

设置链接的样式 :

代码语言：javascript复制
img,
a {
    -webkit-touch-callout: none;
}

a {
    color: #000;
    /* 取消链接的下划线样式 */
    text-decoration: none;
}

设置 ul 列表样式 :

代码语言：javascript复制
ul {
    /* 设置列表的默认样式 */
    margin: 0;
    padding: 0;
    /* 去掉小圆点 */
    list-style: none;
}

完整代码 :

代码语言：javascript复制
body {
    /* 网页布局宽度 = 设备宽度 */
    width: 100%;
    /* 最小宽度 320 像素 */
    min-width: 320px;
    /* 最大宽度 640 像素 */
    max-width: 640px;
    /* 居中对齐 */
    margin: 0 auto;
    /* 字体大小 14 像素 */
    font-size: 14px;
    /* 如果是苹果就是用苹果默认字体 
       如果不是苹果手机 就使用后啊面的字体 */
    font-family: -apple-system, Helvetica, sans-serif;
    /* 字体颜色 */
    color: #000;
    /* 行高 */
    line-height: 1.5;
    /* 水平方向超出隐藏 */
    overflow-x: hidden;
}


/*点击高亮我们需要清除清除  设置为transparent 完成透明*/

* {
    -webkit-tap-highlight-color: transparent;
}


/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/

input {
    -webkit-appearance: none;
}


/*禁用长按页面时的弹出菜单*/

img,
a {
    -webkit-touch-callout: none;
}

a {
    color: #000;
    /* 取消链接的下划线样式 */
    text-decoration: none;
}

ul {
    /* 设置列表的默认样式 */
    margin: 0;
    padding: 0;
    /* 去掉小圆点 */
    list-style: none;
}

img {
    /* 图片与文字对齐样式 默认是与文字基线对齐 */
    vertical-align: middle;
}

div {
    /* css3 盒子模型 */
    box-sizing: border-box;
}

.clearfix:after {
    /* 清除浮动样式 */
    content: "";
    display: block;
    line-height: 0;
    visibility: hidden;
    height: 0;
    clear: both;
}


/* 上面是 CSS 的默认样式, 每个 CSS 文件都有上述样式, 下面开始就是正式样式 */
css flex 布局 框架 移动端

0 人点赞