CSS 案例
关注
分享
扫一扫
文章平均质量分 69
学习过程中的一些案例分享
_Tough_Girl
这个作者很懒，什么都没留下…
展开
-
table表格，thead固定，tbody滚动
table表格，thead固定，tbody滚动原创 2023-04-04 17:49:52 · 949 阅读 · 1 评论 -
CSS案例：简洁版小米侧边栏
案例：简洁版小米侧边栏案例的核心思路分为两步:（1）把链接a 转换为块级元素，这样链接就可以单独占一行，并且有宽度和高度。（2） 鼠标经过a 给链接设置背景颜色。代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>简单版小米侧边栏</title> <style> a {原创 2021-09-16 17:03:12 · 1244 阅读 · 1 评论 -
CSS案例：产品模块和品优购快报模块
案例1：产品模块效果图：布局：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>综合案例-产品模块</title> <style>原创 2021-09-17 14:35:56 · 810 阅读 · 0 评论 -
CSS案例：土豆网鼠标经过显示遮罩
案例：土豆网鼠标经过显示遮罩目的：练习元素的显示与隐藏练习元素的定位核心原理：原先半透明的黑色遮罩看不见， 鼠标经过大盒子，就显示出来。遮罩的盒子不占有位置， 就需要用绝对定位 和 display 配合使用。鼠标经过显示遮罩的效果图：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>仿土豆网显示隐藏遮罩案例原创 2021-09-17 19:35:08 · 1081 阅读 · 0 评论 -
CSS案例：padding应用之新浪导航栏
案例：新浪导航案例-padding影响盒子好处padding内边距可以撑开盒子，我们可以做非常巧妙的运用。因为每个导航栏里面的字数不一样多，我们可以不用给每个盒子宽度了，直接给padding 最合适。相关取值:上边框为3像素, 颜色为 #ff8500下边框为1像素 颜色为 #edeef0盒子高度为 41像素, 背景颜色为 #fcfcfc文字颜色为 #4c4c4c代码：<!DOCTYPE html><html lang="en"><head>原创 2021-09-17 10:19:05 · 1324 阅读 · 0 评论