![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
舒眉
流水不腐,户枢不蠹。
展开
-
CSS-解决li标签里span垂直居中的问题
给span设置display:block;则将此结构看成div里包裹div标签的结构。解决办法:给li设置display:flex;属性,则span设置margin-top:auto;,line-height:32px;属性即可。原创 2020-08-18 13:27:19 · 2042 阅读 · 0 评论 -
CSS——初做网页的小心得--下拉框联动
学习做前端用了半年的时间,学完之后,并没有真正的去用它,也不知道怎么去使用这些技术。半年后,一个偶然的机会,我们社团要做一个小官网,也是学生自己搞的,起初很兴奋,也很担心自己的技术只是皮毛,但是还是同意了。果然在制作的时候遇到很多障碍,下拉框之间的联动效果。 下拉框的联动效果是为了实现学院与专业之间的连接,当选择学院的时候,专业的下拉框也要进行变化。事先把每一个院的专...原创 2018-10-10 19:25:33 · 627 阅读 · 1 评论 -
010——CSS的三大特性(重点)
一、层叠性我理解中的层叠式覆盖的意思。如果有相同的两个样式,只能选择一个,则遵循就近原则。① 样式冲突: 遵循就近原则。实例:<div>路飞</div>div { color: red;}div { color: pink;}效果:② 样式不冲突: 不会发生层叠。实例:div { color: red; font-...原创 2018-07-27 19:55:52 · 895 阅读 · 0 评论 -
009——通过文字阴影实现凹凸效果
首先效果如下:代码部分:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body { backgroun原创 2018-07-27 19:09:50 · 364 阅读 · 0 评论 -
008——背景(background)
背景经常会被用到,重点。一、背景的几个属性background-color 背景颜色 background-image 背景图片地址 background-repeat 是否平铺 background-position 背景位置 background-attachment 背景固定还是滚动 其中背景位置中属性值用英文,有left、right...原创 2018-07-27 19:08:08 · 199 阅读 · 0 评论 -
007——CSS几项规范要求
一、空格规范 △ 选择器与 { 之间必须包含空格.orange {} △ 属性名与之后的 : 之间不允许包含空格,而 : 与属性值之间必须包含空格。font-size: 12px;二、选择器规范 △ 当一个并集选择器中有多个选择器,每一个选择前期必须独占一行。span,div,.content { color: red;} ...原创 2018-07-27 17:15:49 · 116 阅读 · 0 评论 -
011——页面布局(盒子模型、盒子边框、内外边距、content宽度和高度、盒子模型的稳定性、CSS3盒模型、盒子阴影)
一、盒子边框△ 基本属性值border: border-width border-style border-color;这三个参数分别为:边框宽度(像素值)、边框样式、边框颜色边框样式 属性值 none 没有边框(默认值) solid 边框为单实线(最常用) dashed 边框为虚线 dotted 边框为点线 double...原创 2018-07-28 20:54:58 · 1551 阅读 · 0 评论 -
006---css复合选择器(交集选择器,并集选择器,后代选择器,子元素选择器,属性选择器,伪元素选择器)
复合选择器是由两个或读个基础选择器,通过不同的方式组合成的,目的是为了可以选择更准确的目标元素。一、交集选择器例如:<div class="orange">I am P1</div><p class="orange">I am P2</p>.orange { color: orange;}p.orange { font-size: 40px...原创 2018-04-22 10:45:12 · 3019 阅读 · 0 评论 -
005---标签显示模式(行内块元素、行内元素、块级元素)
一、块级元素每一个块级元素都会独占据一整行或多整行,可以对其设置宽度、高度、对齐等属性,常用于网页布局和网页结构的搭建。常见的块级元素有<h1>...<h6>、<p>、<div>、<ol>、<li>等,其中div标签是最典型的元素。如:<body> <div>123</d原创 2018-04-21 16:44:14 · 326 阅读 · 0 评论 -
004---css样式表(内部样式表、行内样式表、外部样式表)
一、内部样式表内嵌式是将CSS代码集中写在HTML文档的head头部中,并且用style标签定义,基本语法如下:语法中,style标签一般位于head标签中title标签之后,也可以放在HTML文档的任何地方。type="text/CSS" 在HTML5中可以省略。二、行内样式表行内样式表适合于样式较少的情况。语法:如下例:<div style="color:red;font-size: ...原创 2018-04-21 15:56:51 · 20519 阅读 · 1 评论 -
003-css外观属性(color、行间距、水平居中、首行缩进、字间距、文字阴影)
一、color颜色 color用于定义文本颜色,取值方式有三种: ① 英文单词red、green。。。 ② RGB值,如rgb(255,0,0)。 ③ 十六进制,如,#000000就是黑色(可以简写成#000)。二、line-height 行间距 有竖直居中的效果。语法:line-height: 26px;在没有使用行间距的效果的时候:使用之后...原创 2018-04-19 21:45:10 · 780 阅读 · 0 评论 -
002---选择器(标签选择器、类选择器、id选择器、伪类选择器、通配符选择器)
一、标签选择器语法:(像p、div、hn....的标签)<p>标签选择器</p><style> p { color: green; }</style>效果展示: 二、类选择器顾名思义,class本身就有类的意思,这里表示具有相同class值的一类。语法:<p class="...原创 2018-04-18 22:21:13 · 1007 阅读 · 0 评论 -
001---css样式规则及css字体样式
一、css产生的原因为了解决混乱的样式结构。二、css的样式规则例如:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> h1原创 2018-04-17 21:41:36 · 294 阅读 · 0 评论 -
css制作进度条下划线-经过时过渡到100,松开时过渡到0
效果描述:1.打开页面时。标题下方没有下划线。2.鼠标经过标题时。由0%过渡出现下划线至100%。3.鼠标离开标题时。下划线由100%以过度的效果消失至0%。(做出来的效果还是挺炫的,有进度条的效果)用到的标签(CSS):a.动画效果:animation:; animation:动画名称(引用) 动画时间 运动曲线 开始时间 播放次数 是否反方向;原创 2017-10-22 11:06:29 · 1237 阅读 · 0 评论 -
CSS外边距及盒子居中对齐
外边距(margin)语法:margin-left: 左外边距(常用)margin-right: 右外边距margin-top:上外边距(常用)margin-bottom: 下外边距*margin: 上外边距 右外边距 下外边距 左外边距 (取值顺序与内边距相同)注意的是:外边距可以实现盒子居中。一个盒子实现水平居中的两个条件:1.必须是块级元素2.盒原创 2017-09-27 18:07:45 · 3833 阅读 · 0 评论 -
CSS 子元素选择器
CSS中子元素选择器比较有针对性,只能作为某元素子元素的元素。语法:父元素 > 子元素 { 属性:属性值;}需要注意的是,>的前后均有空格,且不能省略。(类比京东页面的一部分) Document .nav { background-color: rgba(111,111,111,1); width: 230px; height: 500px;原创 2017-09-23 16:06:37 · 2945 阅读 · 0 评论 -
CSS样式
CSS样式有三种:1.内部样式表内嵌式是将CSS代码集中写在HTML(5)文档的head头部标签,并且用style标签定义,(一般放在title后面)。 Document p { color: skyblue; } 样式表2.行内样式表style在body的标签内。 Document style="color: s原创 2017-09-23 10:29:18 · 220 阅读 · 0 评论 -
CSS字体样式
1.font-size 字体大小 常用像素px。相对长度大小说明em相对于当前对象内文本的字体尺寸px像素,最常用绝对长度单位说明in英寸cm厘米mm毫米pt点 Document p { font-size:原创 2017-09-23 11:35:30 · 245 阅读 · 0 评论