【移动端网页布局】流式布局案例 ⑦ ( 水平排列的图片链接 2

2023-05-07 02:56| 来源: 网络整理| 查看: 265

【移动端网页布局】流式布局案例 ⑦ ( 水平排列的图片链接 2 | 浮动设置 | 盒子模型类型设置 | 结构伪类选择器 ) 原创

韩曙亮_ 2023-05-06 00:43:35 ©著作权

文章标签 css css3 html 移动端网页布局流式布局文章分类 Html/CSS 前端开发

©著作权归作者所有：来自51CTO博客作者韩曙亮_的原创作品，请联系作者获取转载授权，否则将追究法律责任

文章目录一、水平排列的图片链接样式及核心要点1、实现效果2、HTML 结构3、CSS 样式二、完整代码示例1、HTML 标签结构2、CSS 样式3、展示效果

一、水平排列的图片链接样式及核心要点

1、实现效果

实现如下样式 , 水平排列的图片链接 , 第一个图片占宽度的 50% ,

【移动端网页布局】流式布局案例 ⑦ ( 水平排列的图片链接 2 | 浮动设置 | 盒子模型类型设置 | 结构伪类选择器 )_css

第二第三个链接占总宽度的 25% ;

【移动端网页布局】流式布局案例 ⑦ ( 水平排列的图片链接 2 | 浮动设置 | 盒子模型类型设置 | 结构伪类选择器 )_移动端网页布局_02

2、HTML 结构

使用标签作为父盒子 , 其中容纳三个链接标签 , 每个链接标签中包含一个标签 ;

3、CSS 样式

三个盒子水平排列 , 需要将起设置为左浮动 ;

由于需要设置左侧的 border 边框 , 设置了边框整体增加 1 像素 , 导致第三个元素换行 , 因此不能使用传统的盒子模型需要使用 CSS3 盒子模型 ;

.news a { /* 设置浮动让三个链接盒子水平排列 */ float: left; /* 由于需要设置左侧的 border 边框设置了边框整体增加 1 像素导致第三个元素换行因此不能使用传统的盒子模型需要使用 CSS3 盒子模型 */ box-sizing: border-box; }

使用结构伪类选择器 , 分别对第一个标签和第二三个标签进行设置 , 前者占 50% 宽度 , 后者占 25% 宽度 ;

.news a:nth-child(1) { /* 第一个盒子模型占 50% 宽度 */ width: 50%; } .news a:nth-child( n + 2) { /* 上述选择公式的作用是从第 2 个往后面选第 2 / 3 个盒子模型各占 25% 宽度*/ width: 25%; /* 第 2 / 3 个盒子左侧需要设置一个边框 */ border-left: 1px solid #ccc; }

完整代码实例 :

/* 设置水平方向上连续排列的图片链接 */ .news { /* 设置父容器顶部外边距 20 像素 */ margin-top: 20px; } .news img { /* 所有图片宽度自适应 */ width: 100%; } .news a { /* 设置浮动让三个链接盒子水平排列 */ float: left; /* 由于需要设置左侧的 border 边框设置了边框整体增加 1 像素导致第三个元素换行因此不能使用传统的盒子模型需要使用 CSS3 盒子模型 */ box-sizing: border-box; } .news a:nth-child(1) { /* 第一个盒子模型占 50% 宽度 */ width: 50%; } .news a:nth-child( n + 2) { /* 上述选择公式的作用是从第 2 个往后面选第 2 / 3 个盒子模型各占 25% 宽度*/ width: 25%; /* 第 2 / 3 个盒子左侧需要设置一个边框 */ border-left: 1px solid #ccc; }

二、完整代码示例

1、HTML 标签结构

流式布局示例流式布局示例

打开京东APP, 实惠又轻松立即打开登陆

京东超市

2、CSS 样式

a { /* 取消链接点击时的高亮效果 */ -webkit-tap-highlight-color: transparent; } img, a { /* 禁用长按弹出菜单 */ -webkit-touch-callout: none; } input { /* 设置 iOS 取消按钮的自定义样式 */ -webkit-appearance: none; } div { /* 设置 CSS3 盒子模型样式 */ box-sizing: border-box; } ul { /* 取消 ul 列表项的内外边距 */ margin: 0; padding: 0; /* 取消列表项的样式 - 左侧的小圆点 */ list-style: none; } img { /* 默认的图片对齐方式是基线对齐只要不是基线对齐这里随便设置顶部 / 底部 / 中部对齐都可以 */ vertical-align: middle; } a { /* 设置字体颜色值 */ color: #666; /* 取消链接的底部横线样式 */ text-decoration: none; } .clearfix:after { /* 清除浮动的固定样式如果要为某个容器清除浮动为其设置 class="clearfix" 样式 */ content: ""; display: block; line-height: 0; visibility: hidden; height: 0; clear: both; } 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: #666; /* 行高 */ line-height: 1.5; background-color: white; } .app { /* 设置顶部提示条高度 45 像素 */ height: 45px; } .app ul li { /* 设置左浮动令列表元素水平排列 */ float: left; /* 设置高度 45 像素 = 行高垂直居中 */ height: 45px; line-height: 45px; /* 设置总体背景 */ background-color: #333333; /* 文本水平居中 */ text-align: center; /* 文本颜色白色 */ color: #fff; } .app ul li:nth-child(1) { /* 关闭按钮宽度占布局宽度 / 设备宽度的 8% */ width: 8%; } .app ul li:nth-child(1) img { /* 设置关闭按钮的图像宽度该图片自动水平 / 垂直对齐 */ width: 10px; } .app ul li:nth-child(2) { /* 设置 Logo 宽度 10% */ width: 10%; } .app ul li:nth-child(2) img { /* 在 10% 宽度的 Logo 盒子中图片的宽度是 30 像素高度没有给出但是宽高等比例缩放高度也是 30 像素 */ width: 30px; /* 默认的图片对齐方式是基线对齐只要不是基线对齐这里随便设置顶部 / 底部 / 中部对齐都可以 */ vertical-align: middle; } .app ul li:nth-child(3) { /* 中间的 "打开京东APP, 实惠又轻松" 文本盒子的宽度 */ width: 57%; } .app ul li:nth-child(4) { /* 右侧的立即打开红色按钮盒子 */ width: 25%; background-color: #F63515; } /* 下面是搜索栏样式 */ .search-wrap { /* 第二排搜索栏样式 */ /* 该样式在滑动时 , 始终在最上方显示 */ position: fixed; /* 防止外边距塌陷进行的设置 */ overflow: hidden; /* 搜索栏宽度充满全屏 */ width: 100%; /* 搜索栏的高度为 44 像素 */ height: 44px; /* 搜索栏最小宽度 320 像素浏览器拉倒最小该布局的宽度不低于 320 像素 */ min-width: 320px; /* 搜索栏最大宽度 640 像素浏览器拉到最大该布局最大 640 像素 */ max-width: 640px; } .search-btn { /* 左侧按钮布局 */ /* 左侧按钮需要设置到左侧使用绝对定位进行设置 */ position: absolute; /* 定位到左上角 */ top: 0; left: 0; /* 设置盒子的尺寸 */ width: 40px; height: 44px; } .search-btn::before { /* 在指定的标签元素内部的前面插入内容 */ /* 左侧按钮盒子中插入三图片 */ content: ""; /* 显示模式设置为块级元素 */ display: block; /* 盒子大小设置为 20 x 18 像素 */ width: 20px; height: 18px; /* 设置背景 */ background: url(../images/s-btn.png) no-repeat; /* 设置图片背景大小 */ background-size: 20px 18px; /* 设置图像的外边距 */ margin: 14px 0 0 15px; } .search-login { /* 右侧按钮布局 */ /* 右侧按钮需要设置到左侧使用绝对定位进行设置 */ position: absolute; /* 盒子定位到右上角 */ right: 0; top: 0; /* 布局尺寸 40 x 44 像素 */ width: 40px; height: 44px; /* 文字颜色白色 */ color: #fff; /* 行高 = 内容高度垂直居中 */ line-height: 44px; } .search { /* 中间部位搜索栏盒子内容 */ /* 子绝父相该容器的子容器需要绝对定位因此父容器设置为相对定位 */ position: relative; /* 搜索框高度 30 像素 */ height: 30px; /* 白色字体 */ background-color: #fff; /* 上下 0 像素外边距左右 50 像素外边距 */ margin: 0 50px; /* 左侧和右侧设置为 15 像素圆角 */ border-radius: 15px; /* 将搜索布局居中放置设置 7 像素上外边距出现外边距塌陷需要在父容器设置 overflow: hidden */ margin-top: 7px; } .jd-icon { /* 搜索框中插入 JD 图标 */ /* 设置 JD 图标的宽高 */ width: 20px; height: 15px; /* 设置绝对定位 */ position: absolute; /* 定位到左上角距离顶部 8 像素距离左侧编剧 13 像素 */ top: 8px; left: 13px; /* 设置 JD 图片背景 */ background: url(../images/jd.png) no-repeat; /* 设置背景图片的尺寸会缩放背景图片 */ background-size: 20px 15px; } .jd-icon::after { /* 插入竖线 */ content: ""; /* 竖线盒子模型使用绝对定位 */ position: absolute; /* 竖线盒子模型在 JD 图标的右上角 right 值为负数说明该竖线在 JD 图标之外 */ right: -8px; top: 0; /* 设置显示模式为块级元素可以设置宽高 */ display: block; /* 盒子模型尺寸为 1 x 15 像素 */ width: 1px; height: 15px; /* 设置盒子的灰色背景 */ background-color: #ccc; } .sou { /* 二倍精灵图 */ /* 设置精灵图中的放大镜图标 */ /* 该图标是绝对定位 */ position: absolute; /* 设置放大镜图标的绝对定位位置 */ top: 8px; left: 50px; /* 设置盒子模型尺寸 */ width: 18px; height: 15px; /* 设置精灵图以及精灵图中的放大镜图标位置 */ background: url(../images/jd-sprites.png) no-repeat -81px 0; /* 此处将二倍精灵图缩小了一倍 */ background-size: 200px auto; } .slider img { /* 设置 Banner 栏大图宽度尺寸为 100% */ width: 100%; } /* 设置水平方向上连续排列的图片链接 */ .brand { /* 设置圆角后超过圆角的图片不再显示 */ overflow: hidden; /* 设置圆角顺序为 : 左上 / 右上 / 右下 /左下 */ border-radius: 10px 10px 0 0; } .brand div { /* 设置 .brand 父容器下的 div 盒子左浮动这样这些盒子可以在水平方向上紧密排列 */ float: left; /* 要在水平方向上放置 3 个为其设置 1/3 的宽度即可 */ width: 33.33%; } .brand div img { /* 设置图片链接中的图片在水平方向上充满父容器即可 */ width: 100%; } /* 多排按钮导航栏 */ nav { /* 整个导航布局距离顶部 5 像素 */ padding-top: 5px; } nav a { /* 设置左浮动宽度为 20% 正好能放下 5 个 */ float: left; width: 20%; /* 文字水平对齐 */ text-align: center; } nav a img { /* 图片宽度为 40 像素高度自适应 */ width: 40px; /* 上下 10 像素外边距 */ margin: 10px 0; } nav a span { /* 导航栏中的文本设置为块级元素 */ display: block; } /* 设置水平方向上连续排列的图片链接 */ .news { /* 设置父容器顶部外边距 20 像素 */ margin-top: 20px; } .news img { /* 所有图片宽度自适应 */ width: 100%; } .news a { /* 设置浮动让三个链接盒子水平排列 */ float: left; /* 由于需要设置左侧的 border 边框设置了边框整体增加 1 像素导致第三个元素换行因此不能使用传统的盒子模型需要使用 CSS3 盒子模型 */ box-sizing: border-box; } .news a:nth-child(1) { /* 第一个盒子模型占 50% 宽度 */ width: 50%; } .news a:nth-child( n + 2) { /* 上述选择公式的作用是从第 2 个往后面选第 2 / 3 个盒子模型各占 25% 宽度*/ width: 25%; /* 第 2 / 3 个盒子左侧需要设置一个边框 */ border-left: 1px solid #ccc; }

3、展示效果

【移动端网页布局】流式布局案例 ⑦ ( 水平排列的图片链接 2 | 浮动设置 | 盒子模型类型设置 | 结构伪类选择器 )_移动端网页布局_03

赞收藏评论分享举报

上一篇：【五一创作】【Midjourney】Midjourney 连续性人物创作 ① ( 通过垫图方式生成类似图像 )

【本文地址】

公司简介

联系我们