CSS
文章平均质量分 63
CSS基础知识
奶盖不加糖
慢慢漫漫
展开
-
CSS三角运用:仿京东的秒杀案例
仿京东的秒杀案例:原创 2021-02-22 22:40:13 · 432 阅读 · 0 评论 -
仿京东三角效果案例
下面的效果是如何实现的呢?案例:<head> <style> div { /*相对定位*/ position: relative; width: 200px; height: 100px; background-color: pink; margin: 100px auto; }原创 2021-02-22 14:19:36 · 231 阅读 · 0 评论 -
CSS 边框可以模拟三角效果
CSS 三角是怎么来的了?做法如下:<head> <style> div { /*我们用css 边框可以模拟三角效果*/ width: 0; height: 0; border-top: 10px solid red; border-right: 10px solid green; border-bottom: 1原创 2021-02-22 13:07:10 · 222 阅读 · 0 评论 -
CSS的margin负值运用:压住盒子的相邻框,实现淘宝商品页面的边框操作
margin负值之美负边距+定位:水平垂直居中。一个绝对定位的盒子,利用父级盒子的 50%,然后往左(上)走自己宽度的一半,可以实现盒子水平垂直居中。压住盒子的相邻框如淘宝的商品页面:案例: <style> div { /*浮动的盒子是紧贴在一起的*/ float: left; width: 200px; height: 300px; bor原创 2021-02-21 23:38:24 · 357 阅读 · 0 评论 -
CSS中为什么会出现滑动门技术,它具体应用在哪里?
滑动门为了便各种特殊形状的背景能够适应元素文本内容的多少,出现了CSS滑动门的技术。它从新角度构建页面,使各种特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,可用性更强。最常见于各种导航栏的滑动门。核心技术核心技术就是利用CSS精灵(主要是背景位置)和盒子padding 撑开宽度,以便适应不同数字的导航栏。一般经典布局都是这样的:...原创 2021-02-21 22:29:23 · 147 阅读 · 0 评论 -
CSS精灵图
精灵图为什么需要精灵图一个网页中往往会应用很多很小的背景图片作为修饰,当网页中图片过多的时,服务器就会频繁地接送和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度。因此,为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(也称为CSS Sprites 、CSS雪碧)核心原理:将网页中的一些小背景图像整合到一张大图中,这样服务器只需要一次请求就可以了。精灵图(sprites) 的使用使用精灵图核心:精灵技术主要针对于背景图片使用。就是把多个小图片原创 2021-02-20 22:30:56 · 239 阅读 · 0 评论 -
CSS溢出文字省列号显示怎么做?
溢出文字省列号white-space 设置或检索对象文本显示方式。通常我们用于强制一行显示内容。white-space :normal ; 默认处理方式white-space : nowrap ; 强制在同一行显示所有文本,直到文本结束或者遇到br 标签对象换行。tex-overflow 文字溢出设置或检索是否使用一个省略标记(…)标示对象内文本溢出tex-overflow : clip; 不显示省略标记(…),而是简单的裁切。tex-overflow : ellipsis; 当对象原创 2021-02-20 15:33:28 · 209 阅读 · 0 评论 -
CSS中该怎么垂直居中?怎么去除图片底侧空白缝隙?
vertical-align 垂直对齐有宽度的块级元素居中对齐,是margin : 0 auto;让文字居中对齐,是 text-align : center;vartical-align 垂直对齐,它只针对于行内元素或者行内块元素。vertical-align : baseline | top |middle | bottom设置或检索对象内容的垂直方式。注意:vertical-align 不影响块级元素中的内容对齐,它只针对于行内块元素或者行内块元素。特别是行内块元素,通常用来控原创 2021-02-20 14:28:46 · 166 阅读 · 0 评论 -
CSS用户界面样式:鼠标样式cursor ,轮廓线 outline ,防止拖拽文本域resize ,用户界面样式总结
文章目录CSS用户界面样式鼠标样式cursor轮廓线 outline防止拖拽文本域resize用户界面样式总结CSS用户界面样式 所谓的界面样式,就是更改一些用户操作样式,以便提高更好的用户体验。更改用户的鼠标样式。表单轮廓等。防止表单域拖拽鼠标样式cursor设置或检索在对象移动的鼠标指针采用何种系统预定义的光标形状。属性值描述default小白 、默认pointer小手move移动text文本not-allowed禁止案例:原创 2021-02-20 12:13:12 · 218 阅读 · 0 评论 -
CSS之定位中绝对定位的子绝父相说法有误,子绝原来不一定父相
借知乎的回答如下解释:首先,我想告诉你的是,如果父级元素是绝对定位(absolute)或者没有设置,里面的绝对定位(absolute)自动以body定位。这句话是错的。正确的是:只要父级元素设了position并且不是static(默认既是static),那么设定了absolute的子元素即以此为包含块(最近的)。绝对定位(Absolute positioning)元素定位的参照物是其包含块,既相对于其包含块进行定位,不一定是其父元素。...原创 2021-02-20 10:30:19 · 1063 阅读 · 0 评论 -
CSS元素的显示与隐藏 :display 属性, visibility 属性, overflow 溢出
元素的显示与隐藏类似网站的广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现。本质:让一个元素在页面中隐藏或者显示出来。display 显示隐藏visibility 显示隐藏overflow 溢出显示隐藏display 属性display 属性用于设置一个元素应如何显示。display:none ;隐藏对象display:block ;除了转换为块级元素之外,同时还有显示元素的意思。display 隐藏元素后,不再占有原来的位置。后面应用及其广泛,搭配JS可以做很多的原创 2021-02-19 21:28:53 · 807 阅读 · 0 评论 -
CSS之定位:边偏移 静态定位static 相对定位 relative 绝对定位 absolute 固定定位 fixed 粘性定位sticky,子绝父相的由来,绝对定位的盒子居中, 堆叠顺序
为什么需要定位?某一个盒子可以自由的在一个盒子内移动位置,并且压住其他盒子。当我们滚动窗口的时候,盒子的是固定屏幕的某个位置的。为什么需要定位以上效果,标准流或者浮动都无法实现,此时需要定位来实现。所以:浮动可以让多个盒子一行没有缝隙排列显示,经常用于横向排列盒子。定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子。定位组成:定位:将盒子定在某一个位置,所以定位也是在摆放盒子,按照定位的方式移动盒子。定位 = 定位模式 +边偏移。定位模式原创 2021-02-18 21:55:30 · 1365 阅读 · 2 评论 -
CSS之浮动:什么是浮动,float 属性,float之浮漏特点,(浮动元素与父盒子,兄弟盒子的关系),清除浮动的方法: 额外标签法,父级添加overflow,使用after,使双伪元素
浮动(float)传统网页布局的三种方式网页布局的本质———用CSS来摆放盒子。把盒子摆放到相应位置。CSS提供了三种传统布局方式(简单来说,就是盒子如何进行排列顺序);普通流(标准流)浮动定位标准流(普通流/文档流)所谓标准流;就是标签按照规定好默认方式排列。块级元素会独占一行,从上到下顺序排列。常用元素:div ,hr ,p ,h1-h6 ,ul ,ol ,dl ,from ,table行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行。常用元素:span ,a原创 2020-12-14 23:48:11 · 806 阅读 · 4 评论 -
CSS中圆角边框 、盒子阴影、文字阴影具体运用
圆角边框在CSS3中,新增了圆角边框样式,这样我们的盒子就可以变圆角了。border-radius属性用于设置元素的外边框圆角。语法:border-radius:length;其中每一个值都可以为数值或百分比的形式。技巧:让一个正方形变成圆圈语法:border-radius:50%;案例:<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wi原创 2020-12-05 21:59:24 · 278 阅读 · 0 评论 -
新闻列表综合案例:知识点:边框,去掉列表默认的样式,清除内外边距等
知识点回顾:边框border 可以设置元素的边框。边框有三部分组成:边框宽度(粗细) , 边框样式 , 边框颜色。语法:border : border-width || border-style || border-color边框样式 border-style可以设置如下值none: 没有边框即忽略所有边框的宽度(默认值)。solid: 边框为单实线(最为常用)。dashed: 边框为虚线。 dotted: 边框为点线。去掉列表默认的样式以为无序列表和有序列表前面默认的列表样式,原创 2020-12-05 14:51:26 · 689 阅读 · 0 评论 -
练习:新浪导航栏
新浪导航栏的核心就是因为里面的数字不一样多,所以不方便给宽度,还是给padding,撑开盒子<head> <title>新浪导航栏</title> <style> .nav { height: 41px; background-color: #fcfcfc; /*上边框 3像素 实线*/ border-top: 3px solid原创 2020-11-18 01:00:20 · 315 阅读 · 0 评论 -
CSS盒子模型: 盒子模型( Box Model)组成 ,边框, 表格的细线边框 ,内边距(padding) 边框会影响盒子的实际大小, 外边距 (margin) 外边距合并, 清除内外边距
盒子模型:页面布局要学习三大核心:盒子模型,浮动和定位页面布局过程:1.先准备好相关的网页元素,网页元素基本都是盒子Box。2.利用CSS设置好盒子的样式,然后摆放到相应位置。3.往盒子里面装内容。网页布局的核心本质:就是利用CSS摆盒子。盒子模型( Box Model)组成所谓盒子模型:就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。CSS盒子模型本质上是一个盒子,封装周围的HTML元素,它包括:边框、外边距、内边距、和实际内容。...原创 2020-10-07 14:29:49 · 1218 阅读 · 1 评论 -
五彩导航栏:行内转换模式,文字水平居中,背景图片,链接伪类选择器
五彩导航栏要巩固的内容:链接属于行内元素,但是此时需要宽度和高度,因此需要模式转换。里面文字需要水平居中,因此需要单行文字垂直居中的代码。链接里面需要设置背景图片。因此需要用到背景的相关属性设置。鼠标经过变化背景图片,因此需要用到链接伪类选择器。<head> <title> 五彩导航栏 </title> <style> /*后代选择器*/ .nav a { /*转换为行内块*/ dis原创 2020-09-26 15:43:24 · 487 阅读 · 0 评论 -
CSS的背景:背景颜色, 背景图片 ,背景平铺, 背景图片的位置 ,背景图像固定 (背景附着), 背景复合写法 ,背景色半透明
CSS的背景通过CSS的背景属性,可以给页面元素添加背景样式。背景属性可以设置颜色、背景图片、背景图片位置、背景图像固定等。背景颜色background-color属性定义了元素的背景颜色。background-color:颜色值;一般情况下元素背景颜色默认值是transparent (透明),我们也可以手动指背景颜色为透明色。background-color:transparent;例子:<head> <style> div { wid原创 2020-09-22 00:24:12 · 727 阅读 · 0 评论 -
链接a转换为块级元素之小练习:简洁版小米侧边栏
简洁版小米侧边栏案例的核心思路分为两步:把链接 a 转换为块级元素,这样链接就可以单独占一行,并且有宽度和高度。鼠标经过 a 链接设置背景颜色。<head> <title>简单版小米侧边栏</title> <style> a { /*转换为块级元素*/ display:block; /*宽高*/ width: 230px; height: 40px; /*背景颜原创 2020-09-20 16:54:37 · 1499 阅读 · 0 评论 -
CSS的元素显示模式:块元素, 行内元素 ,行内块级级元素 ,元素的显示模式转换(转换为块元素,转换为行内,元素转换为行内块)
文章目录CSS的元素显示模式块元素行内元素行内块级级元素元素显示模式的总结元素的显示模式转换CSS的元素显示模式作用:网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页。元素显示模式就是元素 (标签)以什么方式进行显示,比如 <div>自己占一行,比如一行可以放多个 <span>。HTML元素一般分为块元素和行内元素两种类型。块元素常见的块元素有<h>~<h6>、<p>、<div>、&l原创 2020-09-20 16:15:26 · 921 阅读 · 0 评论 -
CSS的复合选择器: 后代选择器、子选择器、并集选择器、伪类选择器等
CSS复合选择器什么是复合选择器?在CSS中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进线组合形成的。符合选择器可以更加准确、更高效的选择目标元素(标签)。符合选择器是由两个或多个基础选择器,通过不同的组合而成的。常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等。后代选择器后代选择器又称为包含选择器,可以选择父元素里面子元素。其写法就是外层标签写在前面,内标签写在后面,中间用空格分隔。当标签发生嵌套时,内层原创 2020-09-20 13:40:07 · 12444 阅读 · 0 评论 -
CSS的引入方式:行内样式表(行内式)、内部样式表(嵌入式)、外部样式表(链接式)
CSS引入方式内部样式表:内部样式表(内嵌样式表)是写到 html 页面内部。是将所有的CSS代码抽取出来,单独放到一个 <style>标签中。<head> <style> div { color: red; font-size: 12px; } </style></head><body> <div>开心</div></body>&原创 2020-09-14 16:02:21 · 12439 阅读 · 0 评论 -
CSS的文本属性:文本的颜色、对齐文本、装饰文本、文本的缩进、行间距等
CSS文本属性CSS Text (文本) 属性可定义文本的外观,比如文本的颜色、对齐文本、装饰文本、文本的缩进、行间距等。文本的颜色color 属性定义文本的颜色。<head> <style> div { color: pink; } </style></head><body> <div>该睡觉啦,啊啊啊啊</div></body>表示属性原创 2020-09-13 06:05:47 · 863 阅读 · 0 评论 -
CSS字体属性:字体系列、字体大小、字体粗细、文字样式、字体复合属性
CSS字体属性CSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体)。字体系列CSS使用 font-family 属性定义文本的字体系列。<head> <style> p {font-family: "微软雅黑";} div {font-family: ARIAL,"Microsoft Yahei","微软雅黑";} </style></head><body&原创 2020-09-13 05:01:06 · 68872 阅读 · 1 评论 -
基础选择器:标签选择器、类选择器、类选择器-多类名、id 选择器、 *通配符选择器
文章目录CSS基础选择器CSS基础选择器的作用选择器的分类标签选择器类选择器类选择器-多类名id 选择器id 选择器 和 类选择器的区别*通配符选择器基础选择器的总结:CSS基础选择器CSS基础选择器的作用选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。简单来说,就是选标签用的。以上CSS做了两件事:1.找到所有 h1 标签,选择器 (选对人)。2.设置这些标签的样式,比如颜色为红色(做对事)。选择器的分类选择器分为基础选择器和复合选择器两大类。基础选择器是由单个选原创 2020-09-12 21:17:44 · 2379 阅读 · 0 评论 -
CSS基本简介及书写规范
文章目录HTML的局限性CSS简介总结:CSS的语法规范CSS代码风格样式格式书写紧凑格式展开格式样式大小写空格规范HTML的局限性HTML非常单纯,只关注内容的语义。比如<h1>表明是一个大标题,<p>表明这是一个段落,<img>表明这有个图片,<a>表示此处有来链接。很早的时候,世界的网站虽然有很多,但是他们有一个共同特点:丑。虽然HTML可以做简单的样式,但是带来的是无尽的臃肿和繁琐。CSS简介CSS的主要使用场景就是美化网页,布局页面的。原创 2020-09-12 16:02:50 · 227 阅读 · 2 评论