![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS3
huanxiangcoco
菜鸟一枚,记录所学
展开
-
css之水平垂直居中方法
1.父元素:display:flex; 子元素: margin:auto;< !DOCTYPE html>< html lang=“en”>< head>< meta charset=“UTF-8”>< meta name=“viewport” content=“width=device-width, initial-scale=...原创 2020-05-06 01:59:57 · 143 阅读 · 0 评论 -
div或p标签单行和多行显示方法以及(html)当鼠标移上显示信息
1.单行显示(以h1为例)代码:< !DOCTYPE html>< html lang=“en”>< head>< meta charset=“UTF-8”>< meta name=“viewport” content=“width=device-width, initial-scale=1.0”>< title>...原创 2020-04-29 01:20:58 · 2090 阅读 · 0 评论 -
键盘enter事件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l...原创 2020-04-28 08:28:16 · 204 阅读 · 0 评论 -
文字居中显示(text-align失效)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l...原创 2020-04-28 08:02:35 · 2278 阅读 · 0 评论 -
ctfgergrthh
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l...原创 2020-04-27 08:35:09 · 295 阅读 · 0 评论 -
自适应布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l...原创 2020-04-25 18:57:45 · 539 阅读 · 0 评论 -
css之文字在图片上居中显示
< html lang=“en”>< head>< meta charset=“UTF-8”>< meta name=“viewport” content=“width=device-width, initial-scale=1.0”>< title>Document< /title>< style>...原创 2020-04-22 13:13:42 · 4943 阅读 · 0 评论 -
一张图片在背景图中居中显示
1.知识点:(1)图片水平居中显示https://zhidao.baidu.com/question/537179073.html看这个的回答 我用的是第二种方法(2)有关于background属性的知识点:http://css.doyoe.com/(这个是css参考手册 打开页面后按Ctrl+F 然后在搜索框搜索background按Enter键即可查找)2.实现< !DO...原创 2020-04-22 01:40:10 · 825 阅读 · 0 评论 -
块元素/行内元素/行内块元素
1.块元素注意:文字类的元素内不能使用块级元素< p>标签主要用于存放文字,因此< p>里面不能放块级元素,特别是不能放< div>同理,< h1>~< h6>等都是文字类块级标签,里面也不能放其他块级元素2.行内元素3.行内块元素总结display详细信息:https://www.runoob.com/cs...原创 2020-04-06 02:31:16 · 226 阅读 · 0 评论 -
Emmet语法(快速生成html/css语法)/VSCode快速格式化代码
1.快速生成html结构语法2.快速css语法3.VSCode快速格式化代码原创 2020-04-06 01:28:49 · 701 阅读 · 0 评论 -
CSS引入样式/样式优先级/href和src的区别/link和@important的区别
1. 行内样式表在元素标签内部的style属性中设定CSS样式写法< p style=“color: red”>dwef< /p>2.内部样式表(内嵌样式表)写到html页面内部,将所有css代码抽取出来,单独放到一个< style>标签中< style>可以放在HTML文档的任意位置,但一般会放在< head>标签中写法...原创 2020-04-06 01:12:31 · 721 阅读 · 0 评论 -
css之文本属性text-align/text-decoration(取消a标签下划线)/text-indent/line-height
1.对齐文本(text-align)(:first-child、:nth-child(n)、:last-child的含义:https://www.cnblogs.com/knightdreams6/p/11109755.html)例子:< !DOCTYPE html>< html lang=“en”>< head>< meta charset...原创 2020-04-04 20:49:56 · 1683 阅读 · 0 评论 -
css规则、选择器(基础、复合)/选择器优先级
一、CSS规则有两个主要的部分构成:选择器以及一条或多条声明(选择器 {样式})二、选择器(有两大类:基础、复合)1.基础选择器有单个选择器组成,包含如下选择器(1)标签选择器可以把某一类标签全部选择出来,比如所有的< p>标签等。语法:标签名{ 属性: 属性值; }(2)类选择器在HTML中以class属性表示,在css中以.表示.一个标签...原创 2020-03-22 16:48:48 · 1149 阅读 · 0 评论 -
css3动画属性
transform(转换):改变元素形状、尺寸和位置transition(过渡):元素从一种样式逐渐改变为另一种的效果animation(动画):通过CSS3的@keyframes(关键帧)规则,可以创建动画rotate(deg):旋转给定的角度,正值为顺时针,负值为逆时针...原创 2019-10-06 22:01:32 · 154 阅读 · 0 评论 -
css垂直居中
< div class=“parent”>< div class=“child”>content< /div>< /div>.parent{width: 100px;height: 100px;border: 1px solid;}原图:垂直居中:1..parent{ width: 100px; height: 1...原创 2019-10-06 14:12:52 · 177 阅读 · 0 评论 -
无/有序列表符号/水平导航
1.list-style-type:配置列表符号样式none:不显示列表符号disc:圆点circle:圆环square:方块decimal:阿拉伯数字upper-alpha:大写字母lower-alpha:小写字母lower-roman:小写罗马数字2.list-style-image:用于替代列表符号的图片,在每个列表项前显示指定图片3.list-style-positio...原创 2019-04-15 00:47:18 · 835 阅读 · 0 评论 -
线性渐变/辐射渐变/透明度
线性渐变:颜色从左向右或者从上到下过渡。用linear-gradient来设置。linear-gradient(where,color1,color2)where:表示渐变方向,为to left /to right /to bottom /to topcolor1:起始颜色color2:结束颜色使用方法:把linear-gradient设为background-image的属性的值。...原创 2019-04-15 00:10:11 · 1336 阅读 · 0 评论