css3基础及应用
Stavin Li
许一人之偏爱,尽余生之慷慨。
展开
-
css巩固-选择器优先级
CSS优先级1.内联样式 (例如,style="font-weight:bold")2.ID 选择器(例如,#example)3.类选择器 (例如,.example),属性选择器(例如,[type="radio"])和伪类(例如,:hover)4.标签选择器(例如,h1)和伪元素(例如,::before)5.通配选择符`(*)`关系选择符`(+, >, ~, ' ', ||)`和 否定伪类`(:not())`对优先级没有影响。(但是,在` :not() `内部声明的选择器会影响优先级)6.原创 2021-03-09 14:53:29 · 255 阅读 · 0 评论 -
css 背景图+背景色渐变
1.由于采用rem计算,头部背景图自动适配时,某些机型下背景图底部会有细微的缝隙,造成背景色露底。所以采用背景图+背景色渐变方案。代码如下:.plan-head{ padding-left: 1rem; height:9.78rem; color: #fff; background: url(./images/head@2x.png) no-repeat bottom / contain,linear-gradient(to bottom, #32D2FF 0%, #3.原创 2021-02-09 16:18:33 · 1713 阅读 · 1 评论 -
CSS @media - 手机和平板适配
tip:1.css默认手机样式,平板在此基础上修改数值;2.以500px作为两者区分1.手机cssh3{ height: 4.96rem; padding-top: 1.51rem; font-size: 1rem; font-weight: 500; text-align: center; }2.平板css2.1竖屏@media screen and (orientation: portrait) and (min-device-widt.原创 2021-02-09 16:09:16 · 1744 阅读 · 0 评论 -
Textarea /n 内容展示时实现换行
<div class="content">11111111/n2222222/n3333333<div>添加样式如下:.content{ white-space: pre-line;}原创 2020-03-18 14:22:06 · 1114 阅读 · 0 评论 -
table固定首行首列
原理表格左右拆分,再上下拆分,最后拆分为四个table容器滚动右下table时,加scroll事件,控制左下scrollTop与右上scrollLeft两个table的scroll值注意左下、右上overflow: hidden,右下overflow: scroll左下、右下最后需要新增<td style="visibility: hidden;"></td&g...原创 2018-12-29 11:51:57 · 8034 阅读 · 1 评论 -
十二 . css系列之less语法
1.什么是less:所谓less是一种动态语言,它是以CSS语法为基础,目的是简化CSS代码,降低CSS维护成本。Less不可以被浏览器直接解释执行,需要对less文件进行编译,编译工具是“考拉”2.less和CSS的区别有这样几点:less可以定义变量、定义minin3.less文件中语言编码声明格式:@charset &amp;quot;UTF-8&amp;quot;;4.less中可以进行注释...原创 2018-08-11 09:18:01 · 1105 阅读 · 0 评论 -
十一 . css系列之统筹、使用规范及重置样式
(一)CSS统筹1.给html文档加标题2.设置meta标签a.&amp;amp;lt;meta charset=&amp;quot;utf-8&amp;quot; /&amp;amp;gt;b.&amp;amp;lt;meta name=&amp;quot;keywords&amp;quot; content=&amp;quot;关键字1,关键字2,原创 2018-08-11 09:17:11 · 421 阅读 · 0 评论 -
十 . css系列之兼容问题
(一)浏览器简介1 .浏览器:网页浏览工具,发展历史如下:真正开启现在互联网时代的浏览器,是在1993年发布的Mosaic。其后是Netscape Navigator(网景领航者,简称NN,持续时间为1994-2008)2 .浏览器内核:浏览器最关键的部分就是它的渲染引擎(Rendering Engine),也就是大家平常所说的“内核”。(所谓内核,就是常驻内存、能够快速响应的...原创 2018-08-10 18:18:27 · 359 阅读 · 0 评论 -
九 . css系列之定位、z-index及应用
(一)定位的含义通过定位可以让一个元素位于页面的任意位置,定位的思想认为所有元素都是“框”,框分为两个:块块、行内框。定位的分类:静态定位、相对定位、绝对定位、固定定位(二)定位分类定位的分类:静态定位、相对定位、绝对定位、固定定位1.position:static定位的默认值,元素没有任何的附加效果2.position:relative相对定位a.相对定位的参...原创 2018-08-10 18:15:55 · 482 阅读 · 0 评论 -
八 . css系列之浮动及应用
(一)标准文档流:HTML元素默认的排列方式,简称为标准流(二)浮动流:所谓浮动流是指通过浮动属性,将标准流中的HTML元素抽离出来,在标准流上面新建一个层,这个层里面的元素排列方式就是浮动流,浮动流中的元素被称为浮动元素1.float:left、right、nonefloat:none默认,元素没有浮动,人处于标准流中float:left元素向左浮动float:right...原创 2018-08-10 18:12:18 · 293 阅读 · 0 评论 -
七 . css系列之盒子模型
(一)盒子模型 1.盒子模型是网页制作中的重要的指导思想 2.盒子模型是网页布局的基石 3.它认为页面中所有元素都可以看做是一个盒子,p div span a img 4.它认为可以通过设置盒子的属性,进而改变盒子在页面中的显示效果 5.它认为页面中的所有盒子是相互影响(二)盒子模型的属性:宽度、高度、边框、内边距、外边距 宽度width:属性值为像素值,或者是百分比 ...原创 2018-08-10 18:09:58 · 323 阅读 · 0 评论 -
六 . css系列之列表、背景、表格属性
(一)列表属性1.list-style-type:修饰列表前面符号的类型属性值为disc(默认,黑色实心圆)/circle(空心圆)/square(黑色方块)/none(去掉列表符号)2.list-style-image:用图像作为列表项前面的符号属性值为url(图像的地址),该方法没有办法控制符号的位置,所以使用并不多,常用背景图来做3.list-style-...原创 2018-08-10 18:01:48 · 1247 阅读 · 0 评论 -
五 . css系列之文本段落属性及应用
(一)CSS属性——文本属性、段落属性1.color:修饰字体颜色,属性值可以是颜色名称(red/blue/green/gold,建议写常见的名称)、十六进制、rgb值、rgba值2.font-size:修饰字体的大小,属性值常为数值加单位,单位px/em,注意如果字体大小不是0,那么单位必须加,如果是0,可以省略单位,字体默认的大小16px,常用12px3.fo...原创 2018-08-10 17:55:36 · 1160 阅读 · 0 评论 -
四 . css系列之选择器详解及权重
(一)选择器详解1.标签选择器(元素选择器)`HTML`标签作为选择器,作用是选取`HTML`文档中相同的HTML元素`P{}`2.类选择器第一步:设置类名&amp;lt;开始标签 class=&quot;类名&quot;&amp;gt;&amp;lt;/结束标签&amp;gt;第二步:为类设置样式.类名{}注意:1.同一文档中类名可以相同2.class后面可以有多个值,用空格分开原创 2018-08-10 17:49:18 · 5706 阅读 · 1 评论 -
三 . css系列之语法、样式表
(一)css简介及基本语法什么是CSS:Cascading Style Sheet层叠样式表,用于修饰和美化HTML标签的一种计算机语言,能够实现结构表现的分离。CSS基本语法 选择器{ 属性:属性值; 属性:属性值; …… } 选择器:选择器也叫作选择符,作用是告诉浏览器,样式的应用对象 选择器的种类:标签选择器(元素选择器)、类选择器、id原创 2017-01-24 17:06:17 · 539 阅读 · 0 评论 -
二 . css系列之超链接、表格、表单及元素分类
(一)超链接超链接的应用对象:文字、图片 超链接标签常用属性 a. href:目标文件的路径 b. target:_self(默认,在自身窗口打开目标文件)、_blank(在新窗口打开目标文件) 超链接的种类 a. 内部链接:在一个站点内部各文件间的链接,路径直接写相对路径 b. 外部链接:所谓外部路径就是站点间的链接或者说是网站间的链接,路径要写一个绝对路径原创 2017-01-24 16:47:22 · 1357 阅读 · 0 评论 -
一 . css系列之html需知及ps的基础操作
html简介及ps基础操作原创 2017-01-24 15:04:25 · 545 阅读 · 0 评论