![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
文章平均质量分 67
LSYHhhhh
github 链接 - https://github.com/Lin-SiYu
展开
-
CSS - 伪类
目录1、超链接(a标签)四大伪类2、内容伪类3、索引伪类4、取反伪类1、超链接(a标签)四大伪类a:link {color: #FF0000} /* link 未访问的链接 */a:visited {color: #00FF00} /* visited 已访问的链接 */a:hover {color: #FF00FF} /* hover 鼠标移动到链接上 */a...原创 2018-09-25 08:30:15 · 158 阅读 · 0 评论 -
CSS - 响应式布局
概念随着网页大小的改变,而改变布局的响应方式。例如:https://www.golaravel.com/实现方式- interger 设置触发宽度 网页小于<integer>设定宽度 @media only screen and (max-width: <integer>) { selector { ...原创 2018-09-27 15:46:32 · 455 阅读 · 0 评论 -
CSS3 - Flexible Box (Flex)
目录一、概念二、容器属性1、flex-direction 属性2、flex-wrap 属性 3、flex-flow 属性 4、justify-content (内容对齐)属性5、align-items 属性6、align-content 属性三、项目属性① order 属性 ② flex-grow 属性③ flex-shrink 属性④ ...原创 2018-09-27 15:29:16 · 456 阅读 · 0 评论 -
CSS - 普通选择器
目录 一、基础选择器1、通配选择器2、标签选择器3、类选择器4、id选择器二、基础选择器优先级三、组合选择器1、群组选择器2、子代(后代)选择器3、相邻(兄弟)选择器4、交集选择器四、组合选择器优先级 - 同目录结构下 - 不同目录结构下五、属性选择器一、基础选择器1、通配选择器匹配文档中所有标签:通常指html、bod...原创 2018-09-21 17:11:11 · 201 阅读 · 0 评论 -
CSS - 文档流 and 布局(浮动、流式、定位、相对、绝对、固定)
目录一、文档流(normal flow)1、概念2、BFC(Block formatting context 块格式化上下文) - 2.1一切皆为框 - 2.2 无名块框3、BFC规则二、浮动布局1、浮动布局概念2、基本语法3、实现块级元素的同行显示(文本环绕效果)---- float:left4、实现块级元素的同行显示(布局规则)---- left(...原创 2018-09-26 16:04:11 · 2723 阅读 · 0 评论 -
CSS -背景样式
目录- 背景色 background-color- 背景图像 background-image- 背景重复(平铺) background-repeat- 背景定位 background-position关键字百分数值长度值- 背景关联 background-attachment- 背景样式作用在一个属性中 backgrounddiv { ...原创 2018-09-20 19:03:29 · 143 阅读 · 0 评论 -
CSS - 文本、字体样式
目录CSS 字体样式- font 简写属性定义和用法说明- font-family 规定元素的字体系列使用引号- font-style 定义字体的风格italic 和 oblique 的区别- font-variant 设定小型大写字母- font-weight 将文本设置为粗体- font-size 设置文本的大小使用像素来设置字体大小使用 ...原创 2018-09-20 18:27:56 · 1165 阅读 · 0 评论 -
CSS - 尺寸和颜色
目录CSS尺寸属性- height:设置元素高度 & width:设置元素的宽度- 关于设置div,设置height百分比设置无效。- line-height:设置行高定义和用法说明- max-height:设置元素的最大高度 & max-width:设置元素的最大宽度定义和用法说明- min-height:设置元素的最小高度 & m...原创 2018-09-20 17:01:38 · 394 阅读 · 0 评论 -
CSS - 三种插入方式(创建)
目录CSS样式表HTML文件内引入样式表的三种方式- 外部样式表(外联式)- 内部样式表(内联式)- 内联样式(行间式)三种引入方式的优先级- 三种方式内容属性不冲突(不重复)- 当三种方式存在相同属性(冲突)实验一、内联式和外联式冲突,内联式位于外联式上方先解析。--- 由外联式决定实验二、内联式和外联式冲突,外联式位于内联式上方先解析。--- 由内联...原创 2018-09-20 15:47:29 · 13218 阅读 · 1 评论 -
CSS/HTML - 标签a、img、list的常用方式
目录 一、a标签1、常用用法2、相对路径3、常用属性4、其他用法5、a标签reset操作:默认属性的清除6、锚点(点击返回顶部)7、鼠标样式8、图片跳转页面二、img标签1、常用用法2、常用属性三、list列表1、有序列表2、无序列表3、list的reset操作:默认属性的清除一、a标签1、常用用法<a hr...原创 2018-09-25 18:51:37 · 1240 阅读 · 0 评论 -
CSS - border -绘画(梯形、三角形)
画梯形<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>border</title> <!-- 画梯形 --> <style type="text/css">原创 2018-09-25 18:38:15 · 2186 阅读 · 0 评论 -
CSS - 盒模型 - 隐藏方式
方式一、背景颜色透明,盒子存在,内容或子级标签照旧显示(不推荐).d1 {background-color: transparent;}方式二、使用盒子透明度,完全透明,保存盒子区域占位。.d2 { background-color: orange; /*以盒子透明度隐藏:0~1*/ opacity: 0;}方式三、display,隐藏盒子的显示,盒子的区域占...原创 2018-09-25 17:25:32 · 539 阅读 · 0 评论 -
CSS - 盒模型 margin的常见需求
目录父子场景下需求一:sup(父亲)左上右顶格显示。即,消除默认8px需求二:儿子在父亲的水平中央显示(儿内 margin: 0 auto;)需求三:儿子在父亲的垂直中央显示需求四:儿子在父亲的水平居右显示(margin-right:0)父子场景下需求一:sup(父亲)左上右顶格显示。即,消除默认8px<!DOCTYPE html><html...原创 2018-09-25 17:11:53 · 222 阅读 · 0 评论 -
CSS - 盒模型布局 - margin 陷阱(父子、兄弟)
目录margin 陷阱:内联块中对于相邻快的影响margin陷阱 - 兄弟布局margin陷阱 - 父子布局父子 - 解决方法一:固定父亲(border-top)父子 - 解决方法二:使用paddingmargin 陷阱:内联块中对于相邻快的影响<!DOCTYPE html><html><head> <meta cha...原创 2018-09-25 16:33:00 · 1249 阅读 · 0 评论 -
CSS - 盒模型(框模型)
目录一、盒模型概念二、盒模型成员介绍1、content(内容显示区域)2、border(边框)- 透明边框(边框颜色 transparent)3、padding单边内边距属性内边距的百分比数值4、margin(外边距)- 值复制- 单边外边距属性三、border-radius(边界圆角)四、其他相关属性1.max、min-width、hei...原创 2018-09-25 15:50:53 · 391 阅读 · 0 评论 -
CSS3 - 过渡 and 动画
目录一、过渡概念过渡属性1、transition-property(过渡属性样式)**必须被设置**2、transition-duration(过渡属性的持续时间)3、transition-delay (延迟效果执行时间)4、transition-timing-function(过渡运动曲线)- 贝塞尔曲线学习。查询网站5、transition (整体赋值)...原创 2018-09-27 16:29:41 · 237 阅读 · 0 评论