【CSS】课程网站 网格商品展示 模块制作 ② ( 网格商品展示盒子模型测量及样式 | 处理列表间隙导致意外换行问题 | 代码示例 )
文章目录
- 一、网格展示盒子模型测量及样式
- 1、盒子尺寸测量
- 2、处理列表间隙导致意外换行问题
- 3、列表项测量及样式
- 二、网格展示盒子模型代码示例
- 1、HTML 标签结构
- 2、CSS 样式
- 3、展示效果
绘制矩形框中的部分 :
一、网格展示盒子模型测量及样式
1、盒子尺寸测量
绘制如下样式排列的盒子 , 该盒子建议不要设置高度 ,
这样盒子可以放若干行 , 由盒子中列表的元素个数 , 自动决定放几行 ;
下面的 10 个盒子 , 放在 ul 列表中 , 每个盒子都占用一个 li 列表项 ;
每个列表项盒子 , 必须精准测量 , 一个像素都不能差 , 否则每一行最后一个元素会由于宽度计算不准确导致意外换行 ;
测量 单个盒子的宽高为 228 x 270 ;
水平方向上 , 模块之间的间隔 15 像素 ,
垂直方向上 , 模块之间的间隔 也是 15 像素 ;
2、处理列表间隙导致意外换行问题
一排有 5 个 228x270 的盒子 , 其中间隙 15 像素 ,
版心的宽度为 1200 像素 ;
228 * 5 + 15 * 4 = 1200 像素 , 但是最后一个盒子右侧添加 15 像素的右边距地话 , 会导致最后一个元素掉到第二行 , 这里需要将最后一个元素的右边距去掉 ;
解决上述问题有 2 个方案 :
- 将最后一个元素的右边距去掉 ;
- 将盒子宽度从 1200 像素修改为 1215 像素 ;
CSS 样式如下 :
/* 网格商品展示 */
.box-bd {/* 处理列表间隙导致意外换行问题一排有 5 个 228x270 的盒子 , 其中间隙 15 像素228 * 5 + 15 * 4 = 1200 像素 , 但是最后一个盒子右侧添加 15 像素的右边距地话 , 会导致最后一个元素掉到第二行 , 这里需要将盒子宽度从 1200 像素修改为 1215 像素 正好放 5 盒子 + 5 间隙*/width: 1215px;
}/* 网格中 ul 列表中每个列表项样式 */
.box-bd li {/* 设置左浮动 让列表项在一行中从左到右排列 */float: left;/* 设置尺寸 228 x 270 */width: 228px;height: 270px;/* 设置右边距和下边距 */margin-right: 15px;margin-bottom: 15px;/* 设置背景颜色 - 白色 */background-color: #fff;/* 设置盒子模型的阴影 */box-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
}
3、列表项测量及样式
列表项内的图片大小为 228x155 像素 ;
此处如果切图尺寸大于该尺寸 , 只需要设置 width: 100%;
即可实现自适应设置 ;
img {width: 100%;
}
第一行文本 , 左侧 和 上方 各有 20 像素间隔 ;
第一行文本 14 像素 , 颜色值 #050505 ;
第二行文本 , 12 像素 , 颜色值 #ff7c2d ;
后面的文本颜色值 #999999 ;
根据上面测量得出的样式 :
/* 图片自适应 图片宽度 = 盒子宽度 */
.box-bd li img {width: 100%;
}/* 第一行文本样式 */
.box-bd li h4 {/* 设置 20 像素外边距 */margin: 20px;/* 设置文本颜色与大小 */font-size: 14px;color: #050505;/* 取消标题粗体 */font-weight: 400;
}/* 第二行文本样式 */
.box-bd li p {/* 左右设置 20 像素的外边距 */margin: 0 20px;/* 设置字体大小和颜色 */font-size: 12px;color: #999;
}/* 第二行文本样式 - 前面的橙色文本 */
.box-bd p span {color: orange;
}
二、网格展示盒子模型代码示例
1、HTML 标签结构
核心代码 :
<!-- 网格商品展示模块 - 开始 --><div class="box w"><div class="box-hd"><h3>精品推荐</h3><a href="#">查看全部</a></div><!-- 没有设置高度 内部有浮动 必须清除浮动 --><div class="box-bd clearfix"><ul><li><img src="data:images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span> • 1200人在学习</p></li><li><img src="data:images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span> • 1125人在学习</p></li><li><img src="data:images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span> • 1125人在学习</p></li><li><img src="data:images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span> • 1125人在学习</p></li><li><img src="data:images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span> • 1125人在学习</p></li><li><img src="data:images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span> • 1125人在学习</p></li><li><img src="data:images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span> • 1125人在学习</p></li><li><img src="data:images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span> • 1125人在学习</p></li><li><img src="data:images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span> • 1125人在学习</p></li><li><img src="data:images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span> • 1125人在学习</p></li></ul></div></div><!-- 网格商品展示模块 - 结束 -->
完整代码 :
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8" /> <title>课程网站</title><link rel="stylesheet" href="style.css">
</head>
<body><!-- 头部模块 - 开始 --><div class="header w"><!-- 1. 最左侧的 logo 标题 --><div class="logo"><!-- 图片 --><img src="data:images/logo.png" alt=""></div><!-- 2. 导航栏盒子 - 使用无序列表实现 --><div class="nav"><ul><li><a href="#">首页</a></li><li><a href="#">课程</a></li><li><a href="#">职业规划</a></li></ul></div><!-- 3. 搜索栏盒子 --><div class="search"><!-- 文本输入框表单 --><input type="text" value="输入关键词"><button></button></div><!-- 4. 用户栏盒子 --><div class="user"><div class="user-img"><img src="data:images/head_icon.png" alt=""></div><div class="user-name">用户1</div></div></div><!-- 头部模块 - 结束 --><!-- Banner 模块 - 开始 --><div class="banner"><!-- 版心模块 --><div class="w"><!-- 左侧 侧导航栏 --><div class="subnav"><!-- 无序列表 --><ul><li><a href="#">前端开发 <span>></span></a></li><li><a href="#">后端开发 <span>></span></a></li><li><a href="#">移动开发 <span>></span></a></li><li><a href="#">人工智能 <span>></span></a></li><li><a href="#">商业预测 <span>></span></a></li><li><a href="#">云计算&大数据 <span>></span></a></li><li><a href="#">运维&从测试 <span>></span></a></li><li><a href="#">UI设计 <span>></span></a></li><li><a href="#">产品 <span>></span></a></li></ul></div><!-- 右侧 课程栏 --><div class="course"><!-- 顶部的标题 --><div class="course-hd">我的课程表</div><div class="course-bd"><!-- 中部的 列表 --><ul><li><span class=".span1">继续学习</span> <span class=".span2">程序语言设计</span><p>正在学习-使用对象</p></li><li><span class=".span1">继续学习</span> <span class=".span2">程序语言设计</span><p>正在学习-使用对象</p></li><li><span class=".span1">继续学习</span> <span class=".span2">程序语言设计</span><p>正在学习-使用对象</p></li></ul><!-- 底部的 全部课程 按钮 --><a href="#" class="all">全部课程</a></div></div></div></div><!-- Banner 模块 - 结束 --><!-- 横向导航栏 模块 - 开始 --><div class="goods w"><h3> 精品推荐 </h3><div class="goods-item">| <a href="#">jQuery</a>| <a href="#">Spark</a>| <a href="#">MySQL</a>| <a href="#">JavaWeb</a>| <a href="#">MySQL</a>| <a href="#">JavaWeb</a></div><div class="mod"> 修改兴趣 </div> </div><!-- 横向导航栏 模块 - 结束 --><!-- 网格商品展示模块 - 开始 --><div class="box w"><div class="box-hd"><h3>精品推荐</h3><a href="#">查看全部</a></div><!-- 没有设置高度 内部有浮动 必须清除浮动 --><div class="box-bd clearfix"><ul><li><img src="data:images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span> • 1200人在学习</p></li><li><img src="data:images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span> • 1125人在学习</p></li><li><img src="data:images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span> • 1125人在学习</p></li><li><img src="data:images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span> • 1125人在学习</p></li><li><img src="data:images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span> • 1125人在学习</p></li><li><img src="data:images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span> • 1125人在学习</p></li><li><img src="data:images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span> • 1125人在学习</p></li><li><img src="data:images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span> • 1125人在学习</p></li><li><img src="data:images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span> • 1125人在学习</p></li><li><img src="data:images/pic.jpg" alt=""><h4>Think PHP 5.0 博客系统实战项目演练</h4><p><span>高级</span> • 1125人在学习</p></li></ul></div></div><!-- 网格商品展示模块 - 结束 -->
</body>
</html>
2、CSS 样式
核心代码 :
/* 网格商品展示 */
.box-bd {/* 处理列表间隙导致意外换行问题一排有 5 个 228x270 的盒子 , 其中间隙 15 像素228 * 5 + 15 * 4 = 1200 像素 , 但是最后一个盒子右侧添加 15 像素的右边距地话 , 会导致最后一个元素掉到第二行 , 这里需要将盒子宽度从 1200 像素修改为 1215 像素 正好放 5 盒子 + 5 间隙*/width: 1215px;
}/* 网格中 ul 列表中每个列表项样式 */
.box-bd li {/* 设置左浮动 让列表项在一行中从左到右排列 */float: left;/* 设置尺寸 228 x 270 */width: 228px;height: 270px;/* 设置右边距和下边距 */margin-right: 15px;margin-bottom: 15px;/* 设置背景颜色 - 白色 */background-color: #fff;/* 设置盒子模型的阴影 */box-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
}/* 图片自适应 图片宽度 = 盒子宽度 */
.box-bd li img {width: 100%;
}/* 第一行文本样式 */
.box-bd li h4 {/* 设置 20 像素外边距 */margin: 20px;/* 设置文本颜色与大小 */font-size: 14px;color: #050505;/* 取消标题粗体 */font-weight: 400;
}/* 第二行文本样式 */
.box-bd li p {/* 左右设置 20 像素的外边距 */margin: 0 20px;/* 设置字体大小和颜色 */font-size: 12px;color: #999;
}/* 第二行文本样式 - 前面的橙色文本 */
.box-bd p span {color: orange;
}
整体代码 :
/* 清除标签默认的内外边距 */
* {padding: 0; margin: 0;
}/* 清除列表默认样式 ( 主要是前面的点 ) */
li {list-style: none;
}/* 清除所有链接的下划线样式 */
a {text-decoration: none;
}/* 清除按钮默认样式 ( 主要是按钮自带的边框 ) */
button {border: none;
}/* 设置总体背景 */
body {background-color: #f3f5f7;
}/* 版心宽度 1200 像素 , 在浏览器中居中对齐 */
.w {width: 1200px;margin: auto;
}/* 头部盒子样式 */
.header {/* 高度 42 像素 */height: 42px;/* 设置颜色 方便调试 *//*background-color: pink;*//* 上下设置 20 像素外边距 , 左右自动居中 */margin: 30px auto;
}.logo {/* 靠左侧浮动 */float: left;/* 设置与 导航栏盒子 的外边距 */margin-right: 60px;
}/* 导航栏设置 左浮动 */
.nav {float: left;
}/* 导航栏内部 的 无序列表 设置左浮动 */
.nav ul li {/* 设置 无序列表项 从左到右排列 */float: left;
}/* 设置无序列表中的链接样式 */
.nav ul li a {/* 显示模式 块级元素 */display: block;/* 高度 40 像素 , 总高度 42 像素 , 有 2 像素的下边框 */height: 40px;/* 上下内边距 0 像素 , 左右内边距 10 像素 */padding: 0 10px;/* 右外边距 20 像素 */margin-right: 20px;/* 行高 = 内容高度 垂直居中 */line-height: 40px;/* 字体大小 */font-size: 18px;/* 字体颜色 */color: #050505;/* 取消链接下方的横线 */text-decoration: none;/* 调试时使用的背景 *//*background: skyblue;*/
}/* 鼠标经过链接时的样式 */
.nav ul li a:hover {/* 鼠标经过导航栏链接 , 底部显示 2 像素的 #00a4ff 颜色实线 */border-bottom: 2px solid #00a4ff;
}/* 搜索栏盒子模型 */
.search {/* 设置左浮动 排列在 导航栏后面 */float: left;/* 设置左外边距 65 像素 */margin-left: 65px;
}/* 搜索栏 输入框 */
.search input {/* 设置左浮动 , 方便与右侧的按钮进行排列 */float: left;/* 宽度为 360 像素, 但是左侧有 20 像素内边距变为 340 像素 */width: 340px;/* 高度 38 像素 但是盒子大小 42 像素 , 设置 40 加上 2 像素边框正好充满 */height: 40px;/* 1 像素边框 */border: 1px solid #00a4ff;/* 没有右边框 */border-right: 0;/* 文本左侧有 20 像素内边距 */padding-left: 20px;/* 设置文本颜色 */color: #bfbfbf;
}/* 搜索框按钮 */
.search button {/* 设置左浮动 使其与表单在同一行显示 */float: left;/* 按钮宽度 50 像素 */width: 50px;/* 按钮高度 40 像素 但是为了与父容器匹配 这里拉伸到 42 像素 */height: 42px;/* 使用图片背景方式设置按钮图片 */background: url(images/search_button.png);
}/* 用户栏盒子 */
.user {float: left;/* 高度 = 行高 垂直居中 */height: 42px;line-height: 42px;/* 距离左侧 30 像素 左外边距 */margin-left: 30px;/* 文字大小 14 像素 */font-size: 14px;/* 字体颜色 #666666 */color: #666666;
}/* 用户栏 头像样式 */
.user .user-img {float: left;/* 用户头像 30 像素 容器高 42 上下各 6 像素边距 图像垂直居中 */padding: 6px 0;
}/* 用户栏 名字样式 */
.user .user-name {float: left;/* 名字与头像间隔 6 像素 */margin-left: 6px;
}/* Banner 条样式 */
.banner {/* 宽度自动填充整个浏览器, 这里只设置高度 */height: 420px;/* 背景颜色 #1c036c , 背景图片水平居中对齐 */background: #1c036c url(images/banner_bg.png) no-repeat top center;
}/* 配置 Banner 条 左侧侧导航栏 样式 *//* 侧导航栏 样式 */
.subnav {/* 设置左浮动 */float: left;/* 左侧侧导航栏 190 x 420 , 左右两侧各 20 像素内边距 */width: 150px;/* 高度 420 像素 */height: 420px;/* 上下没有内边距 , 左右各 20 像素内边距 */padding: 0 20px;/* 背景半透明 黑色背景 0.3 透明度 */background: rgba(0, 0, 0, .3);
}/* 测导航栏 中 无序列表 列表项 高度 45 像素 */
.subnav li {/* 高度 = 行高 , 垂直居中 */height: 45px;line-height: 45px;
}/* 测导航栏 中 列表项 中的链接样式 */
.subnav li a {/* 默认情况下为白色 */color: #fff;/* 字体大小 14 像素 */font-size: 14px;/* 取消链接下方的下划线 */text-decoration: none;
}/* 鼠标经过时 文字颜色变色 */
.subnav li a:hover {color: #00b4ff;
}/* 链接内部的 span 标签 , 右浮动 */
.subnav span {float: right;
}/* 配置 Banner 条 课程表 盒子模型样式 *//* Banner 条右侧 课程表盒子样式 */
.course {/* 设置了浮动不会出现外边距塌陷问题 */float: right;/* 盒子尺寸 228 x 300 像素 */width: 228px;height: 300px;/* 背景颜色 - 白色 */background-color: #fff;/* 课程表盒子 与 Banner 条顶部有 50 像素的上外边距 */margin-top: 50px;
}/* Banner 条右侧 课程表 头部样式 */
.course-hd {/* 尺寸 228x48 像素 */height: 48px;/* 盒子背景颜色 */background-color: #9bceea;/* 字体大小 */font-size: 18px;/* 水平居中 */text-align: center;/* 垂直居中 - 行高 = 内容高度 */line-height: 48px;/* 文字颜色 - 白色 */color: #fff;/* 文字加粗 */font-weight: 700;
}/* Banner 条右侧 课程表 body 部分整体设置左右 15 像素内边距 */
.course-bd {/* 左右设置 15 像素内边距 */padding: 0 15px;
}/* Banner 条右侧 课程表 无序列表 距离头部有 10 像素间隔 */
.course-bd ul {/* 10 像素内边距 - 使用外边距会出现塌陷的问题 */padding-top: 10px;
}/* Banner 条右侧 课程表 无序列表 列表项样式 */
.course-bd li {/* 列表项高度是 60 像素, 文字与顶部有 10 像素间隔这里将列表项设置成 50 像素 , 此位置直接写文字即可 多行文本无法设置居中 , 为了保证文字处于距离顶部 10 像素位置只能将列表项设置为 50 像素高度*/height: 50px;/* 设置底部边框 */border-bottom: 1px solid #ccc;/* 顶部设置 10 像素外边距 下面直接紧贴写文字 以达到多行文本居中对齐效果 */margin-top: 10px;
}/* Banner 条右侧 课程表 无序列表 列表项 继续学习 文本样式 */
.course-bd li .span1 {font-size: 16px;color: #4e4e4e;
}/* Banner 条右侧 课程表 无序列表 列表项 课程内容 文本样式 */
.course-bd li .span2 {font-size: 14px;color: #4e4e4e;
}/* Banner 条右侧 课程表 无序列表 列表项 正在学习 文本样式 */
.course-bd li p {font-size: 12px;color: #a5a5a5;
}/* Banner 条右侧 课程表 底部按钮样式 */
.all {/* 显示模式 - 块级元素 */display: block;/* 总高度 40 像素 , 有 2 像素的上下边框 */height: 38px;/* 边框 1 像素 实线 颜色 #00a4ff */border: 1px solid #00a4ff;/* 距离顶部无序列表 10 像素 */margin-top: 10px;/* 文字大小 16 像素 */font-size: 16px;/* 设置文字颜色 */color: #00a4ff;/* 水平对齐 */text-align: center;/* 垂直对齐 - 行高 = 内容高度 */line-height: 38px;
}/* Banner 条右侧 课程表 底部按钮 - 鼠标经过时的样式 */
.all:hover {background-color: #00a4ff;color: #fff;
}/* 下面是横向导航栏模块 *//* 横向导航栏模块 总体盒子模型 样式 */
.goods {/* 内容高度 60 像素 */height: 60px;/* 盒子总体背景 - 白色 */background-color: #fff;/* 顶部 10 像素外边距 */margin-top: 10px;/* 垂直居中 - 内容高度 = 行高 , 子元素中行高可继承 */line-height: 60px;/* 设置盒子的阴影 */box-shadow: 2px 2px 2px rgba(0, 0, 0, .2);
}/* 左侧盒子 */
.goods h3 {/* 设置左浮动 */float: left;/* 左右设置 30 像素外边距 */margin: 0 30px;/* 文字大小 16 像素 */font-size: 16px;/* 设置文字颜色 */color: #00a4ff;}/* 设置 竖线和课程名称所在盒子 的文本颜色这是所有的文本样式 课程在链接里面 由 a 标签设置样式除 a 标签外 只剩下竖线 的样式*/
.goods-item {float: left;color: #bfbfbf;
}/* 链接标签的样式 */
.goods-item a {/* 设置 链接 字体大小和颜色值 */font-size: 16px;color: #050505;/* 左右设置 30 像素样式 */margin: 0 30px;
}/* 设置 右侧盒子样式 */
.mod {/* 设置右浮动 */float: right;/* 右侧设置 300 像素外边距 */margin-right: 30px;/* 字体大小和颜色 */font-size: 14px;color: #00a4ff;
}/* 网格商品展示模块样式 *//* 网格商品展示模块大盒子 距离上面的 导航栏 15 像素 */
.box {margin-top: 15px;
}/* 文本部分 设置垂直居中 */
.box-hd {/* 内容高度 = 行高, 垂直居中 */height: 60px;line-height: 60px;
}/* 左侧文本样式 */
.box-hd h3 {/* 文本左浮动 */float: left;/* 设置字体大小和颜色 */font-size: 20px;color: #494949;/* 取消标题的加粗样式, 也可以使用 normal 值 */font-weight: 400;
}/* 右侧文本样式 */
.box-hd a {/* 右侧文本右浮动 */float: right;/* 右侧文本距离右边界有 30 像素 */margin-right: 30px;/* 设置文本颜色和字体大小 */font-size: 12px;color: #a5a5a5;
}/* 网格商品展示 */
.box-bd {/* 处理列表间隙导致意外换行问题一排有 5 个 228x270 的盒子 , 其中间隙 15 像素228 * 5 + 15 * 4 = 1200 像素 , 但是最后一个盒子右侧添加 15 像素的右边距地话 , 会导致最后一个元素掉到第二行 , 这里需要将盒子宽度从 1200 像素修改为 1215 像素 正好放 5 盒子 + 5 间隙*/width: 1215px;
}/* 网格中 ul 列表中每个列表项样式 */
.box-bd li {/* 设置左浮动 让列表项在一行中从左到右排列 */float: left;/* 设置尺寸 228 x 270 */width: 228px;height: 270px;/* 设置右边距和下边距 */margin-right: 15px;margin-bottom: 15px;/* 设置背景颜色 - 白色 */background-color: #fff;/* 设置盒子模型的阴影 */box-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
}/* 图片自适应 图片宽度 = 盒子宽度 */
.box-bd li img {width: 100%;
}/* 第一行文本样式 */
.box-bd li h4 {/* 设置 20 像素外边距 */margin: 20px;/* 设置文本颜色与大小 */font-size: 14px;color: #050505;/* 取消标题粗体 */font-weight: 400;
}/* 第二行文本样式 */
.box-bd li p {/* 左右设置 20 像素的外边距 */margin: 0 20px;/* 设置字体大小和颜色 */font-size: 12px;color: #999;
}/* 第二行文本样式 - 前面的橙色文本 */
.box-bd p span {color: orange;
}
3、展示效果
【CSS】课程网站 网格商品展示 模块制作 ② ( 网格商品展示盒子模型测量及样式 | 处理列表间隙导致意外换行问题 | 代码示例 )相关推荐
- 【CSS】课程网站网页底部开发 ( 网页底部盒子模型测量及样式 | 代码示例 )
文章目录 一.网页底部盒子模型测量及样式 1.盒子布局说明 2.底部的大盒子测量及样式 3.版心盒子 4.版权盒子 5.链接盒子 二.代码示例 1.HTML 标签结构 2.CSS 样式 3.显示效果 ...
- 【CSS】课程网站横版导航栏 ( 横版导航栏测量及样式 | 代码示例 )
文章目录 一.盒子测量及样式 1.总体盒子测量及样式 2.左侧盒子测量及样式 3.中间盒子测量及样式 4.右侧盒子测量及样式 二.横版导航栏代码示例 1.HTML 标签结构 2.CSS 样式 3.显示 ...
- CSS盒子模型详解(清除无序列表的项目符号)
CSS盒子模型详解(清除无序列表的项目符号) 网页的布局过程 准备好相关的网页元素(盒子) 利用CSS设置好盒子的样式以及在网页中的摆放位置 往盒子里面装东西 盒子模型(box model) 网页中, ...
- css中的伪元素、基线对齐、盒子模型
目录 一.伪元素 二.基线对齐 三.盒子模型 1.外边距margin 2.边框(border) 一.伪元素 说明:伪类元素使用两个冒号(::)而不是一个冒号,目的是为区分伪类和伪元素,大多数浏览器都支 ...
- 【CSS】滑动门技术 ( 借助 CSS 精灵技术实现 | 外部标签设置左半部分背景图片 | 内部标签设置右半部分背景图片 | 鼠标经过更换背景 | 代码示例 )
文章目录 一.滑动门技术 1.滑动门技术借助 CSS 精灵技术实现 2.外部标签设置左半部分背景图片 3.内部标签设置右半部分背景图片 4.鼠标经过时更换背景 二.完整代码示例 一.滑动门技术 1.滑 ...
- css基础伪类选择器与选择器权重以及盒子模型的用法演示
1. 伪类选择器 根据元素的位置或状态来匹配子元素 1.1 结构伪类 与上下文选择器很相似 后文演示所用 HTML 代码如下: <!DOCTYPE html> <html lang= ...
- 《css设计彻底研究》读书笔记之 盒子模型
一.在给元素设置背景时 IE作用域:content + padding Firefox作用域:content + padding + border 二.border border-color : re ...
- CSS基础知识(颜色、伪类、盒子模型)
6.设置颜色单位 L 普通英文单词 {color : 属性值red;} 此方法简单,便捷.但设置的颜色在不同浏览器中,可能显示的颜色出现差异 * 三原色 - 红.绿.蓝 L 颜色的八进制方式 ...
- 毕业设计java 课程精品网站,java毕业设计_springboot框架的精品课程网站
这是一个基于java的毕业设计项目,毕设课题为springboot框架的精品课程网站, 是一个采用b/s结构的javaweb项目, 开发工具eclipsei/eclipse, 项目框架jsp+spri ...
最新文章
- TVM: Deep Learning模型的优化编译器(强烈推荐, 附踩坑记录)
- linux相对路径列出目录文件,linux – UNIX:列出目录中具有相对路径的文件
- mysql数据库中的int类型_MySQL中int(M)和tinyint(M)数值类型中M值的意义
- “XEIM”国内开源即时通讯XEIM
- 如何选购显卡2011版
- 节日仪式感海报PSD分层模板,快来pick一下!
- html table datasrc,table_data_tables.html
- 随想录(从kaldi学习语音识别)
- 腐蚀rust电脑分辨率调多少_腐蚀Rust画面怎么设置 _游侠网
- 快速傅立叶变换_FFT
- Java中删除一个文件夹下的所有文件(包括子目录内的文件)
- 面试题系列(三)-socket
- TCA9548A IIC多路扩展模块使用
- 金蝶旗舰版固定资产计提折旧报错‘费用分配表所引用的*是非明细的核算项目’,如何解决?
- 10分钟教你用python做个打飞机(超详细超入门教程)附源代码下载
- FaceNet2ExpNet: Regularizing a Deep Face Recognition Net for Expression Recognition论文个人解读
- 根据指定的经纬度查询半径为5km的地点
- 青岛经济职业学校计算机老师,青春不散场!青岛经济职业学校举办2020届毕业典礼...
- centos安装LDAP即配置
- 记录ubuntu22.04突然连不上网
热门文章
- PHP批量删除报错,批量删除的PHP
- Ajax系列之JSONP
- 论坛报名 | 语音与自然语言处理的最新突破和前沿趋势。道翰天琼认知智能平台为您揭秘新一代人工智能。
- Java面试总结笔记
- 华为鸿蒙是系统还是处理器,华为将发布MatePad Pro:搭载鸿蒙系统,麒麟9000处理器...
- switch+ 三元运算符 +while +do while +for
- Successive Approximation Register ADC逐次逼近寄存器型模数转换器
- (starGAN)StarGAN: Unified Generative Adversarial Networksfor Multi-Domain Image-to-Image Translatio
- MindMaster思维导图拖动(移动)和上下、左右滚动
- html5钻石,html5 canvas发光的钻石背景动画特效