CSS3
文章平均质量分 66
.
FG.
第十三月你就如期出现,我也想听听,你心里的我是什么样子的
展开
-
CSS3的新特性
CSS3 新增选择器1. 属性选择器属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者id选择器。选择符简介E[att]选择具有att属性的 E 元素E[att=“val”]选择具有 att 属性且属性值等于 val 的 E元素E[att^=“val”]匹配具有 att 属性且值以 val 开头的 E 元素E[att$=“val”]匹配具有 att 属性且值以 val 结尾的 E 元素E[att*=“val”]匹配具有 att原创 2022-01-11 20:40:31 · 166 阅读 · 0 评论 -
CSS初始化
不同浏览器对有些标签的默认值是不同的,为了消除不同浏览器对HTML文本呈现的差异,照顾浏览器的兼容,所以需要对CSS初始化。每个网页都必须首先进行初始化。以京东CSS初始化为例:/*把我们所有标签的内外边距清零*/* { margin:0; padding:0;}/*把em,i 斜体文字不倾斜*/em,i { font-style:normal;}/*去掉li的小圆点*/li { list-style:none;}img { /*bo原创 2022-01-11 11:45:25 · 225 阅读 · 0 评论 -
常见布局技巧
1. margin负值运用1.让每个盒子margin在左侧移动 -1px 正好压住相邻盒子边框2.鼠标经过某个盒子的时候,提高当前盒子的层级即可(如果没有定位,则加相对定位(保留位置),如果有定位,则加z-index)2. 文字围绕浮动元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatibl原创 2022-01-11 11:16:59 · 70 阅读 · 0 评论 -
溢出的文字省略号显示
1. 单行文本溢出显示省略号必须满足三个条件/*1.先强制一行内显示文本*/white-space: nowrap;(默认的normal自动换行)/*2.超出的部分隐藏*/overflow: hidden;/*3.文字用省略号替代超出的部分*/text-overflow: ellipsis;<style> div { width: 150px; height: 80px; background-color: pink原创 2022-01-10 21:31:52 · 2736 阅读 · 0 评论 -
vertical-align属性应用
CSS的vertical-align属性使用场景:经常用于设置图片或者表单(行内块元素)和文字垂直对齐。用于设置一个元素的垂直对齐方式,但是它只针对于行内元素或者行内块元素有效。语法:vertical-align: baseline | top | middle | bottom;值描述baseline默认,元素放置在父元素的基线上top把元素的顶端与行中最高元素的顶端对齐middle把此元素放置在父元素的中部bottom把元素的顶端与行中最低的元素的原创 2022-01-10 18:24:05 · 353 阅读 · 1 评论 -
CSS用户界面样式
1. 界面样式所谓的界面样式,就是更改一些用户操作模式,以便提高用户体验。更改用户的鼠标表单轮廓防止表单域拖拽2. 鼠标样式li {cursor:pointer; }设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。属性值描述default小白 默认pointer小手move移动text文本not-allowed禁止<body> <ul> <li style="原创 2022-01-10 17:47:58 · 186 阅读 · 0 评论 -
CSS三角
网页中常见一些三角形,使用CSS直接画出来就可以,不必做成图片或者字体图标。比如:div { width: 0; height: 0; line-height: 0; font-size: 0 ; /*为了照顾兼容性*/ border: 50px solid transparent; border-top-color: pink; margin: 100px auto; }<!DO原创 2022-01-10 16:31:48 · 177 阅读 · 0 评论 -
CSS字体图标
1. 字体图标的产生字体图标使用场景:主要用于显示网页中通用、常用的一些小图标。精灵图是有诸多优点的,但是缺点很明显。图片文件还是比较大的图片本身放大和缩小会失真一旦图片制作完毕想要更换非常复杂此时,有一种技术的出现很好的解决了以上问题,就是字体图标的iconfont。字体图标可以分为前端工程师提供一种方便高效的图标使用方式,展示的是图标,本质属于字体。2. 字体图标的优点轻量级:一个图标字体要比一系列的图像要小。一旦字体加载了,图标就会马上渲染出来,减少了服务器请求。灵活性:本质原创 2022-01-10 13:07:46 · 147 阅读 · 0 评论 -
CSS精灵图
1. 精灵技术的目的为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度2. 精灵图(sprites)的使用使用精灵图核心:精灵技术主要针对于背景图片的使用。就是把多个小背景图片整合到一张大图片中 。这个大图片也称为sprites 精灵图 或者 雪碧图移动背景图片位置,此时可以使用background-position。移动的距离就是这个目标图片的x和y坐标,注意网页中的坐标有所不同。一般往左、往上移动都是负值。使用精灵图的时候需要精确测量,每个小背景图片的大小和位置 。&l原创 2022-01-10 11:21:40 · 286 阅读 · 0 评论 -
图片显示元素案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>土豆原创 2022-01-09 00:14:57 · 188 阅读 · 0 评论 -
显示隐藏元素
1. display属性display: none; 隐藏对象display: block; 除了转换为块级元素之外,同时还有显示元素的意思display隐藏元素后,不再占有原来的位置2. visibility可见性visibility属性用于指定一个元素可见还是隐藏visibility: visible; 元素可见visibility: hidden; 元素隐藏visibility隐藏元素后,继续占有原来的位置3. overflow溢出overflow属性指定了如.原创 2022-01-08 19:56:19 · 411 阅读 · 1 评论 -
淘宝焦点图案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>淘.原创 2022-01-08 14:37:30 · 395 阅读 · 0 评论 -
定位的拓展
1. 绝对定位的盒子居中加了绝对定位的盒子不能通过margin: 0 auto 水平居中,但是可以通过以下计算方法实现水平和垂直居中。(1) left: 50%;:让盒子的左侧移动到父级元素的水平中心位置。(2) margin-left:-100px;:让盒子向左移动自身宽度的一半。 <style> .box { position: absolute; left: 50%; margin-lef原创 2022-01-02 22:25:30 · 75 阅读 · 1 评论 -
定位叠放次序 z-index
定位叠放次序在使用定位布局时,可能会出现盒子重叠的情况。此时,可以使用z-index来控制盒子的前后次序(z轴)语法:选择器 { z-index: 1;}数值可以是正整数、负整数或0,默认是auto,数值越大,盒子越靠上。如果属性相同,则按照书写顺序,后来居上。数字后面不能加单位。只有定位的盒子才有 z-index 属性。<!DOCTYPE html><html lang="en"><head> <meta charset="UT原创 2022-01-02 21:06:32 · 425 阅读 · 0 评论 -
定位的模式
1. 静态定位 static静态定位是元素的默认定位方式,无定位的意思。语法:选择器 { position: static;}静态定位按照标准特性摆放位置,它没有边偏移静态定位在布局时很少用到2. 相对定位 relative相对定位是元素在移动位置的时候,是相对于它原来的位置来说的。语法:选择器 { position: relative;}它是相对于自己原来的位置来移动 (移动位置的时候参照点是原来的位置)原来在标准流的位置继续占用,后面的盒子仍然以标准流的方式对待它 (不脱原创 2022-01-02 01:32:26 · 597 阅读 · 1 评论 -
定位的概念
1. 为什么需要定位?某个元素可以自由的在一个盒子内移动,并且压住其他盒子当我们滚动窗口的时候,盒子是固定屏幕某个位置的2. 定位组成定位:将盒子定在某一个位置,所以定位也是在摆放盒子,按照定位的方式移动盒子。定位 = 定位模式 + 边偏移定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。(1) 定位模式定位模式决定元素的定位方式,它通过CSS的position属性来设置,其值可以分为四个:值语义static静态定位relative原创 2022-01-01 23:01:10 · 293 阅读 · 0 评论 -
学成在线案例
写的不标准-_-<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti原创 2021-12-11 13:47:39 · 97 阅读 · 1 评论 -
CSS属性书写顺序
建议遵循以下顺序:1.布局定位属性:display / position / float / clear / visibility / overflow /2.自身属性:width / height / margin / padding / border / background3.文本属性:color / font / text-decoration / text-align / vertical-align / whit-space / break-word4.其他属性(CSS3):conten原创 2021-12-02 21:18:14 · 56 阅读 · 1 评论 -
PS 切图
PS有很多的切图方式:图层切图、切片切图、PS插件切图1. 图层切图最简单的切图的方式:右击图层–>快速导出为PNG但是很多情况下,我们需要合并图层再导出:选中需要的图层:图层菜单–>合并图层(ctrl+e)右击–>快速导出为PNG2. 切片切图1. 利用切片选中图片利用切片工具手动划出2.导出选中的图片文件菜单–>导出–>存储为web设备所用格式–>选择我们要的图片格式–>格式3. PS插件切图安装Cutterman...原创 2021-12-02 21:02:47 · 217 阅读 · 0 评论 -
清除页面浮动
1. 为什么要清除浮动呢?由于父级盒子很多情况下,不方便给高度,但是子盒子浮动又不占有位置,最后父级盒子高度为0时,就会影响下面的标准流盒子。由于浮动元素不再占用原文档流的位置,所以它会对后面的元素排版产生影响。2. 清除浮动本质清除浮动的本质是清除浮动元素造成的影响如果父盒子本身有高度,则不需要清除浮动清除浮动之后,父级就会根据浮动的子盒子自动检测高度。父级有了高度,就不会影响下面的标准流了3. 清除浮动语法:选择器{clear:属性值;}属性值描述left原创 2021-11-27 16:42:35 · 237 阅读 · 1 评论 -
盒子浮动布局练习
1.<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g原创 2021-11-27 09:53:19 · 276 阅读 · 1 评论 -
浮动的使用
1. 为什么要用浮动?网页布局第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动。2. 什么是浮动?float属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘。语法:选择器(float:属性值;)属性值描述none元素不浮动(默认值)left元素向左浮动right元素向右浮动3. 浮动特性浮动元素会脱离标准流(脱标)1. 脱离标准普通流的控制(浮)移动到指定位置(动),(俗称脱标)2.浮动原创 2021-11-27 08:48:45 · 502 阅读 · 1 评论 -
圆角边框和阴影
圆角边框(重点)在CSS3中,新增了圆角边框样式,这样我们的盒子就可以变圆角。border-radius属性属于设置元素的外边框圆角。语法:border-radius:length;radius半径(圆的半径)原理:(椭)圆与边框的交集形成圆角效果。参数值可以为数值或百分比的形式如果是正方形,想要设置为一个圆,把数值修改为高度或者宽度的一半即可,或者直接写为50%如果是个矩形,设置为高度的一半就可以做该属性是一个简写属性,可以跟四个值,分别代表左上角、右上角、右下角、左下角分开写:原创 2021-11-24 00:17:13 · 145 阅读 · 0 评论 -
盒子模型案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>小米原创 2021-11-23 23:29:49 · 441 阅读 · 1 评论 -
盒 子 模 型
1.1 盒子模型(Box Model)组成盒子模型:就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。CSS盒子模型本质上是一个盒子,封装周围的HTML元素,它包括:边框、外边距、内边距和实际内容。1.2 边框(border)border可以设置元素的边框。边框由三部分组成:边框宽度(粗细)、边框样式、边框颜色语法:border : border-width || border-style || border-color属性作用border原创 2021-11-20 15:15:05 · 89 阅读 · 1 评论 -
CSS的三大特性
CSS的三大特性1. 层叠性相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要是解决样式冲突的问题。层叠性原则:样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式样式不冲突,不会层叠.长江后浪推前浪。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Comp原创 2021-05-10 13:00:52 · 137 阅读 · 2 评论 -
CSS背景
3. CSS的背景背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。3.1 背景颜色background-color属性定义了元素的背景颜色。background-color: 颜色值;一般情况下元素背景颜色默认值是transparent(透明),我们也可以手动指定背景颜色为透明色。3.2 背景图片background-image属性描述了元素的背景图像。实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片,优点是非常便于控制位置(精灵图也是一种运用场景原创 2021-05-09 09:17:28 · 106 阅读 · 1 评论 -
CSS的元素显示模式
2. CSS的元素显示模式2.1 什么是元素显示模式作用:网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页。元素显示模式就是元素(标签)以什么方式进行显示,比如<div>自己占一行,比如一行可以放多个<span>。HTML元素一般分为块元素和行内元素两种类型。2.2 块元素常见的块元素有<h1>~<h6>、<p>、<div>、<span>、<ul>、<ol原创 2021-05-08 08:55:01 · 105 阅读 · 2 评论 -
CSS复合选择器
1. CSS复合选择器1.1 什么是复合器在CSS中,可以根据选择器的类型吧选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的。1.复合选择器可以更准确、更高效的选择目标元素(标签)2.复合选择器是由两个或多个基础选择器,通过不同的方式组合而成3.常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等1.2 后代选择器(重要)后代选择器又称为包含选择器,可以选择父元素里面子元素。其写法就是把外层标签写在前面,内层标签写在后面,中间用空格原创 2021-05-03 23:59:44 · 118 阅读 · 1 评论 -
Emmet语法
1. Emmet语法1.1 快速生成HTML结构语法1.生产标签直接输入标签名按tab键即可,比如 div 然后tab键,就可以生成<div></div>.2.如果想要生成多个相同的标签 加上就可以了,比如 div3 然后tab键,就可以快速生成3个div.3.如果有父子级关系的标签,可以用 > 比如 ul>li 然后tab键就可以了4.如果有兄弟关系的标签,用 + 就可以了,比如 div+p.5.如果生成带有类名或者id名字的,直接写 .demo 或者 #原创 2021-05-01 20:35:34 · 124 阅读 · 2 评论 -
CSS的引入方式
5. CSS的引入方式5.1 CSS的三种样式表1.行内样式表(行内式)2.内部样式表(嵌入式)3.外部样式表(链接式)5.2 内部样式表内部样式表(内部样式表)是写到html页面内部,是将所有的CSS代码抽取出来,单独放到一个<style>标签中。<style> div { color: red; font-size: 12px; }</style><style>标签理论上可以放在HTML文档的任何地方,但原创 2021-04-28 20:54:36 · 81 阅读 · 2 评论 -
CSS文本属性
4. CSS文本属性CSS文本属性可定义文本的外观,比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。4.1 文本颜色color属性用于定义文本的颜色。div { color: red;}表示表示属性值预定义的颜色值red,green,blue,御用色pink十六进制#FF0000,#FF6600,#29D794RGB代码rgb(255,0,0)或rgb(100%,0%,0%)开发中最常用的是十六进制。4.2 对其文本text-alig原创 2021-04-25 19:41:11 · 239 阅读 · 0 评论 -
CSS字体属性
3. CSS字体属性CSS Font (字体)属性用于定义字体系列、大小、粗细和文本样式(如斜体)。3.1 字体系列CSS使用font-family属性定义文本的字体系列。p { font-family:"微软雅黑";}div { font-family: Arial,"Microsoft Yahei","微软雅黑";}1.各种字体之间必须使用英文状态下的逗号隔开2.一般情况下,如果有空格隔开的多个单词组成的字体,加引号3.尽量使用系统默认自带字体,保证在任何用户的浏览器中都能正确显示4原创 2021-04-22 21:25:46 · 132 阅读 · 0 评论 -
CSS基础选择器
2.CSS基础选择器2.1 CSS选择器的作用选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。简单来说,就是选择标签用的。1.找到所有的h1标签,选择器(选对人).2.设置这些标签的样式,比如颜色为红色(做对事).2.2 选择器分类选择器分为基础选择器和复合选择器两个大类.1.基础选择器由单个选择器组成的.2.基础选择器又包括:标签选择器,类选择器,id选择器和通配符选择器.2.3标签选择器标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,原创 2021-04-21 19:18:04 · 100 阅读 · 0 评论 -
CSS语法规范
CSS1.CSS语法规范CSS规则有两个主要部分构成:选择器以及一条或多条声明。1.选择器是用于指定CSS样式的HTML标签,在花括号内是该对象设置的具体样式.2.属性和属性值以“键值对"的形式出现.3.属性是对指定的对象设置样式属性,例如字体大小、文本颜色等.4.属性和属性值之间用英文":"分开.5.多个“键值对”之间用英文“;”,进行区分.2.CSS代码风格1.样式格式书写(1)紧凑格式h3 {color: deeppink;font-size: 20px;}(2)展开格式(原创 2021-04-21 16:56:52 · 866 阅读 · 0 评论