- 博客(25)
- 收藏
- 关注
RSS订阅原创 CSS精灵图（雪碧图）
CSS精灵图先来解个疑惑：为什么网页中的小图标都是用i标签定义？这只是一个网站开发中一个不成形的默认规则而已，这样的话你当前网站中的所有小图标都可以用i标签，前提是你的全局css文件中必须有一个样式：i{background:xxx.png},这张xxx.png是由很多小图标合成在一个大图上面的。这样你前端哪个页面要用哪些小图标的时候，你就直接用i标签，只需要定义css background...
2019-12-01 17:54:04
330
1
原创 CSS元素的显示模式
CSS元素的显示模式什么是显示模式在HTML中将所有的标签分为两类，分别是容器及和文本级在css中也将所有的标签分为两类，分别是块级元素和行内元素什么是块级元素和行内元素块级元素独占一行，可设置宽高行内元素不独占一行，不可设置宽高怎么区分块级元素和行内元素所有的容器级标签都是块级元素所有的文本级标签(除了p标签)都是行内元素区分块级元素是否独占一行如果没有设置...
2019-12-01 16:52:43
166
原创 div和span标签
div和span标签用于网页的基本布局div作用配合css基本布局网页span作用配合css修改局部样式div,span区别div独占一行span不会占一行div是容器级别的容器级别的可以嵌套其他任何的标签div h ul ol dl li…span是文本级的标签文本级别的只能嵌套文字、超链接、图片span/p/buis/strong/em/...
2019-12-01 16:34:31
826
1
原创 CSS优先级 补充
CSS优先级 补充!important作用：用于提升某个直接选中标签的选择器中的某个属性的优先级，可以将被选中属性的优先级提升至最高注意点：只能用于直接选中的标签，不能用于继承的(简介选中)通配符选择器也是直接选中只能提升被选中的属性的优先级感叹号不可省略，必须写在分号前格式:#p1 { color:red !important;}权重问题...
2019-12-01 11:44:30
139
原创 CSS 三大特性
CSS 三大特性继承性给父元素设置一些属性子元素也可以使用注意点：并不是所有的属性都可以继承只有以color/font/text/line开头的属性才可以拥有继承性a标签的文字颜色和下划线不能继承h标签的文字大小不能继承用处：通过给body设置属性让全网页通用<style>div {color:red;}</style><div...
2019-12-01 11:17:31
72
原创 CSS 选择器（二）
CSS 选择器（二）交集选择器（了解）给所有选择器选中的标签中相交的那部分标签设置属性格式：选择器之间没有任何符号！<!--选择器1选择器2 { 属性:值;}--><style>p.p1 { color:red;}</style><p></p><p></p><p cla...
2019-12-01 10:34:44
120
原创 CSS/HTML 知识补充
知识补充选择ul中的第某一个liul li:nth-child(1) {} /*选中第一个li*/ul li:nth-child(2) {} /*选中第二个li*/ul li:nth-child(3) {} /*选中第三个li*//*....*/disoplay:none;设置元素不显示，也就是隐藏可用作制作隐藏导航栏将二级导航先设置为none,再在一级导航上添加效果：当...
2019-12-01 08:46:42
107
原创 CSS 文字属性
CSS 文字属性基本属性斜体font-style:normal(正常)/italic(倾斜);加粗font-weight:lighter(默认细线)/bold(加粗)/bolder(更粗)/100-900的整百数字;大小font-size:xpx; px(像素单位，一定要带);字体font-family:“宋体”; 如果取值是中文需要双或单引号,设置的字体必须是用户电脑安装的字体;如果...
2019-12-01 08:43:22
111
原创 CSS 文本装饰
CSS 文本装饰文本线text-decoration:underline; /*下划线*/text-decoration:line-through; /*删除线*/text-decoration:overline; /*上划线*/text-decoration:none; /*无，用于去掉a标签的下划线*/文本对齐text-align:center; /*居中*/text-al...
2019-12-01 08:42:28
303
原创 CSS 选择器（一）
CSS 选择器（一）标签选择器根据指定的标签在当前页面中选中所有该名称标签格式标签名 {属性:值;}会选中左右该标签，不能单独选中某一个标签id选择器根据指定的id选择到该属性，id名不能重复id名称只能有字母数字下划线组成，不能以数字开头id名称不能是重复的id在企业开发中用的如果仅仅是为了设置样式是不会使用id选择器的，因为在前端开发中使用id选择器一般是为了添加js...
2019-12-01 08:39:22
108
原创 CSS 颜色属性
CSS 颜色属性颜色设置color:rgb()/rgba()/#…十六进制/单词;颜色类型css支持以下几种颜色值英文单词可以表达的颜色有限rgb三原色[白(255红,255绿,255蓝)-黑(0,0,0)],rgba(css3)三原色加一个控制透明度的值a:rgba(255,255,255,0.9);透明度取值在0-1;0为全透明;1为不透明;1...
2019-12-01 08:37:51
412
1
原创 css 背景图片
背景图片背景尺寸属性background-size:100px 100px; 具体像素background-size:50% 50%; 百分比background-size:auto 100px; 宽度的等比拉伸background-size:100px suto; 高度的等比拉伸background-size:cover; 整体需要等比拉伸到高度和宽度都填满元素background...
2019-11-29 21:21:47
104
原创 HTML 3D转化模块
3D转化模块什么是2d和3d2d就是一个平面，没有厚度只有宽度和高度3d是一个立体，有厚度默认情况下所有元素都是2d这么让一个元素呈现3d效果和透视一样，给父元素添加一个transform-style:preserve-3d;即可设置让整个元素无论页面多大都是居中显示position:absolute;left:50%;margin-left:-元素宽的一半;动画中如果有有...
2019-11-29 21:20:59
119
原创 html 3d
创建简单的3d场景perspective:800;perspective-origin:50% 50%;示意:使用transform属性调整元素translate<位移操作>translateX(X px)translateY(Y px)translateZ(Z px)rotate<旋转操作>rotateX(X deg)rotateY(Y...
2019-11-29 21:19:56
132
原创 css3新增模块 过渡模块
css3新增模块过渡hover这个伪类选择器也可以用到其他模块transition-property:width;/*告诉系统哪一个属性需要执行过渡*/transition-duration:5s;/*告诉系统属性需要执行过渡的持续时间*/过度的三要素必须有属性发生变化必须必须告诉系统哪属性发生变化需要执行过渡效果必须告诉系统过渡效果的持续时长注意css是层叠样式表，...
2019-11-29 21:18:20
650
原创 html 2d转换
2d转换transform设置转换效果transform:scale(); /*缩放，1是原大小，小于1是缩小，大于1是放大*/transform:rotate(xdeg); /*旋转，deg是角度单位*/transform:translate(xpx;ypx); /*元素从当前位置位移，x是在x轴位移的长度，y是在y轴唯一的长度*/transform-origin设置形变中心点/*...
2019-11-29 21:16:26
436
原创 HTML 盒子阴影和文字阴影
盒子阴影和文字阴影盒子阴影box-shadow:/*水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影*/;/*简写*/box-shadow:/*水平偏移 垂直偏移 模糊度 (颜色)*//*缩写的默认颜色是跟随盒子中内容的颜色*/注意盒子的阴影分为内外阴影(inset outset) 默认为外阴影outset阴影扩展：在原本阴影的上下左右各加要扩展的面积文字阴影te...
2019-11-29 21:15:46
421
原创 HTML 动画模块
动画模块动画模块与过渡模块相同点动画模块与过渡模块十分相似，也是还给某一元素添加动画效果，要想实现也是需要满足三要素动画模块与过渡模块区别过渡动画必须人为的触发才会执行动画，动画不需要人为的触发就可以执行动画动画模块的基本使用/*动画三要素：*//*(1)告诉系统哪个属性需要执行动画：*/animation-name:动画名称;/*(2)告诉系统我们需要创建一个名字叫动画名称的动...
2019-11-29 21:15:14
366
原创 HTML基础 H5标签
HTML基础 H5标签video标签用于播放视频<video src=".webm" autoplay=“autoplay” controls=“controls” poster="相对地址" muted=“muted”> <!--webm是网页专用的视频播放类型--><!--属性--><!--默认是不自动播放autoplay控制是否自动播放...
2019-11-29 21:14:05
259
原创 HTML基础 表单
HTML基础 表单什么是表单：专门收集用户信息的表单格式：<form> <input></form>input标签<input type="text"> <!--明文输入--><input type="password"> <!--密码输入--><input type="text"...
2019-11-29 21:13:12
81
原创 html基础 表格
html基础 表格table表格标签表格是一种数据的展现形式表格有边框属性，默认为0<table> <!--表格整体--> <caption></caption> <!--表格标题--> <tr><th></tr> <!--当前列的标题,内容会相对单元格自动居中加粗--&g...
2019-11-29 21:12:34
79
原创 a标签的伪类选择器
a标签的伪类选择器a标签在不同状态下有不同的样式a标签的伪类选择器就是为了修改a标签在不同状态下的样式:link 修改从未被访问过的a标签:visited 修改被访问过的样式:active 修改鼠标长按状态下的样式:hover 修改鼠标悬停在a标签上的样式a标签的伪类选择器可以同时出现也可以单个出现如果同时出现要设置严格的定义顺序爱恨原则 (love hate) l->...
2019-11-29 21:11:36
168
1
原创 HTML基础 标签
HTML基础 标签p告诉浏览器这是一段文本，占据一行h1.2.3.4.5.6标题标签，也是占据一行hr分割线，占据一行注释HTML中<!--这是一段注释-->CSS中/*这是一段注释*/快捷键ctrl+/img添加图片br换行br标签的注意点br可以连续使用br是不另起一个段落换行，而在企业开发中都是因为要另起一个段落而换行所以，br在企业开发...
2019-11-29 21:09:55
373
原创 html基础-基础知识
html基础-基础知识什么是浏览器常见浏览器及其内核也是一台计算机，比一般计算机大，主要用于存储数据浏览器访问网页的原理浏览器请求数据的过程什么是url平时我么在访问网页时输入的地址就是一个URLurl格式http://127.0.0.1:80/index.htmlurl拆分协议类型 http:// （超文本传输协议）服务器ip地址 127.0.0.1服务器端口号...
2019-11-29 21:09:01
175
原创 html基础-基础标签
html基础-基础标签h系列标签作用用于给文本添加标题语义格式<h1></h1><h2></h2><h3></h3><h4></h4><h5></h5><h6></h6>注意：在企业开发中慎用<h1>标签...
2019-11-29 21:04:07
72
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人