CSS
关注
分享
扫一扫
away.....
Nothing you can not learn.
展开
-
移动端WEB开发——响应式布局
移动端WEB开发之响应式布局1.0 响应式开发原理1.1 响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。设备的划分情况：设备划分尺寸区间超小屏幕<768px小屏设备>= 768px ~ <992px中等屏幕（桌面显示器）>=992px ~ <1200px宽屏设备（大屏显示器）>=1200px小于768的为超小屏幕（手机）768~992之间的为小屏设备（平板）原创 2020-11-02 10:51:50 · 310 阅读 · 0 评论 -
移动web开发——rem布局
移动web开发之rem布局1. rem基础rem单位rem (root em)是一个相对单位，类似于em，em是父元素字体大小。不同的是rem的基准是相对于html元素的字体大小。比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。/* 根html 为 12px */html { font-size: 12px;}/* 此时 div 的字体大小就是 24px */ div { font-si转载 2020-11-01 09:44:57 · 195 阅读 · 0 评论 -
案例制作——携程移动端首页（flex布局）
案例制作——携程移动端首页（flex布局）1.index.html<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" co原创 2020-10-29 10:29:31 · 2511 阅读 · 0 评论 -
移动web开发——flex布局
移动web开发——flex布局1.0传统布局和flex布局对比1.1传统布局兼容性好布局繁琐局限性，不能再移动端很好的布局1.2 flex布局操作方便，布局极其简单，移动端使用比较广泛pc端浏览器支持情况比较差IE11或更低版本不支持flex或仅支持部分1.3 建议如果是pc端页面布局，还是采用传统方式如果是移动端或者是不考虑兼容的pc则采用flex2.0 flex布局原理flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活原创 2020-10-28 15:35:00 · 98 阅读 · 0 评论 -
移动web开发流式布局
移动web开发流式布局1.0 移动端基础1.1浏览器现状PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。移动端常见浏览器：UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样。总结：兼容移动端主流浏览器，处理Web原创 2020-10-20 13:42:54 · 454 阅读 · 1 评论 -
浏览器私有前缀
浏览器私有前缀浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无需添加1、私有前缀-moz-：代表Firefox浏览器私有属性-ms-： 代表IE浏览器私有属性-webkit: 带阿标Safari、Chrome私有属性-o-： 代表Opera 私有属性2、提倡写法-moz-border-radius: 10px;-webkit-border-radius: 10px;-o-border-radius: 10px;border-radius: 10px;...原创 2020-10-19 15:38:13 · 596 阅读 · 0 评论 -
CSS3——3D 转换
cHTML5一、 认识 3D 转换3D 的特点近大远小物体和面遮挡不可见三维坐标系x 轴：水平向右 – 注意：x 轴右边是正值，左边是负值y 轴：垂直向下 – 注意：y 轴下面是正值，上面是负值z 轴：垂直屏幕 – 注意：往外边的是正值，往里面的是负值二、3D 转换3D 转换知识要点3D 位移：translate3d(x, y, z)3D 旋转：rotate3d(x, y, z)透视：perspctive3D呈现 transfrom原创 2020-10-19 13:32:25 · 284 阅读 · 0 评论 -
CSS3知识总结
七、CSS3 属性选择器(上)什么是 CSS3在 CSS2 的基础上拓展、新增的样式CSS3 发展现状移动端支持优于 PC 端CSS3 目前还草案，在不断改进中CSS3 相对 H5，应用非常广泛属性选择器列表类选择器、属性选择器、伪类选择器5的权重是10属性选择器代码演示button { cursor: pointer;}button[disabled] { cursor: default}八、CSS3 属性选择器(下)代码演原创 2020-10-17 09:48:24 · 102 阅读 · 1 评论 -
CSS——获得焦点元素
获得焦点元素:focus 伪类 选择器用于选取获得焦点的元素 。 我们这里主要针对的是 表单元素:hover语法：.total input { border: 1px solid #ccc; height: 30px; width: 40px; transition: all .5s;}/*这个input 获得了焦点*/.total input:focus { width: 80px; border: 1px solid skyblue;}border: 1px原创 2020-10-13 16:20:41 · 3244 阅读 · 0 评论 -
CSS——过渡
过渡(CSS3)过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。过渡动画： 是从一个状态 渐渐的过渡到另外一个状态可以让我们页面更好看，更动感十足，虽然 低版本浏览器不支持（ie9以下版本） 但是不会影响页面布局。我们现在经常和 :hover 一起 搭配使用。语法格式:transition: 要过渡的属性 花费时间 运动曲线 何时开始;属性原创 2020-10-13 10:01:34 · 1098 阅读 · 1 评论 -
CSS常用初始化语句（base.css）
/*base.css*//*清除元素默认的内外边距 */* { margin: 0; padding: 0}/*让所有斜体 不倾斜*/em,i { font-style: normal;}/*去掉列表前面的小点*/li { list-style: none;}/*图片没有边框 去掉图片底侧的空白缝隙*/img { border: 0; /*ie6*/ vertical-align: middle;}/*让button 按钮原创 2020-10-10 09:39:43 · 543 阅读 · 0 评论 -
CSS高级技巧——滑动门
6. 滑动门滑动门出现的背景制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下去的感觉，为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。 最常见于各种导航栏的滑动门。核心技术核心技术就是利用CSS精灵（主要是背景位置）和 盒子padding撑开宽度, 以便能适应不同字数的导航栏。一般的经典布局都是这样的：<li>原创 2020-10-09 17:22:50 · 1032 阅读 · 0 评论 -
CSS高级技巧——CSS精灵技术（sprite)
5. CSS精灵技术（sprite)5.1 为什么需要精灵技术当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为什么需要精灵技术：为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度。出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。5.2 精灵技术讲解CSS 精灵其实是将网页中的一些背景图原创 2020-10-09 17:15:34 · 352 阅读 · 0 评论 -
CSS高级技巧——溢出的文字省略号显示
4. 溢出的文字省略号显示4.1 white-spacewhite-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容white-space:normal ；默认处理方式white-space:nowrap ； 强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。4.2 text-overflow 文字溢出设置或检索是否使用一个省略标记（…）标示对象内文本的溢出text-overflow : clip ；不显示省略标记（...），而是简单的裁切原创 2020-10-09 17:12:35 · 187 阅读 · 0 评论 -
CSS高级技巧——图片、表单和文字对齐
3. vertical-align 垂直对齐有宽度的块级元素居中对齐，是margin: 0 auto;让文字居中对齐，是 text-align: center;没有垂直居中的属性。vertical-align 垂直对齐，它只针对于行内元素或者行内块元素，vertical-align : baseline |top |middle |bottom 设置或检索对象内容的垂直对其方式。注意：vertical-align 不影响块级元素中的内容对齐，它只针对于行内元素或者行内块元素，特原创 2020-10-09 17:10:46 · 932 阅读 · 0 评论 -
CSS高级技巧——CSS用户界面样式
2. CSS用户界面样式所谓的界面样式， 就是更改一些用户操作样式，以便提高更好的用户体验。更改用户的鼠标样式 (滚动条因为兼容性非常差，不研究)表单轮廓等。防止表单域拖拽2.1 鼠标样式cursor设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。属性值描述default小白 默认pointer小手move移动text文本not-allowed禁止鼠标放我身上查看效果哦：<ul> <l原创 2020-10-09 17:02:26 · 201 阅读 · 0 评论 -
CSS高级技巧——元素的显示与隐藏
CSS高级技巧1. 元素的显示与隐藏目的让一个元素在页面中消失或者显示出来场景类似网站广告，当点击关闭就不见，但是重新刷新页面，会重新出现1.1 display 显示（重点）display 设置或检索对象是否及如何显示。display: none 隐藏对象display：block 除了转换为块级元素之外，同时还有显示元素的意思。特点： 隐藏之后，不再保留位置。实际开发场景：配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为原创 2020-10-09 16:58:25 · 531 阅读 · 0 评论 -
CSS——定位
定位1. CSS 布局的三种机制网页布局的核心 —— 就是用 CSS 来摆放盒子位置。CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流、浮动和定位，其中：普通流（标准流）浮动让盒子从普通流中浮起来 —— 让多个盒子(div)水平排列成一行。定位将盒子定在某一个位置 自由的漂浮在其他盒子的上面 —— CSS 离不开定位，特别是后面的 js 特效。2. 为什么使用定位** 当我们滚动窗口的时候，盒子是固定屏幕某个位置的**要实现以上效果，标准流原创 2020-10-08 15:21:53 · 662 阅读 · 0 评论 -
CSS——清除浮动
清除浮动1、为什么要清除浮动因为父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响下面的标准盒子2、清除浮动的本质清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0的问题。清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。3、清除浮动的方法语法：选择器{clear：属性值；} clear 清除属性值描述left不允许左侧有浮动元素（清除左侧浮动的影响）right不允许右侧原创 2020-09-26 15:40:18 · 197 阅读 · 0 评论 -
CSS——浮动
CSS布局的三种机制网页布局的核心–就是用CSS来摆放盒子CSS提供了三种机制来设置盒子的摆放位置，分别是**普通流（标准流）、浮动和定位，**其中：普通流（标准流）块级元素会独占一行，从上到顺序排列；常用元素： div、hr、p、h1-h6、ul、ol、dl、form、table行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行；常用元素：span、a、i、em等浮动让盒子从普通流中浮起来，主要作用让多个盒子一行显示。定位将盒子定在浏览器的某一个位置—CSS离原创 2020-09-26 14:19:36 · 299 阅读 · 0 评论 -
(圆角边框 盒子阴影 CSS书写规范)
1、圆角边框语法： border-radius: length; 技巧： border-radius:50%百分比会显示宽度和高度的一半，而作一般圆角矩形，只要用高度或宽度的一半（精确单位）2、盒子阴影语法： box-shadow：水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影； 1、 box-shadow: 2px 2px 2px 2px #000; 2、 box-shadow: 0 15px 30px rgba(0原创 2020-09-26 09:55:38 · 209 阅读 · 0 评论 -
盒子模型（插入图片，外边距，内边距）
盒子模型（Box Model）所谓盒子模型就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。盒子里面的文字和图片的等元素是内容区域盒子的厚度成为盒子的边框盒子内容与边框的距离是内边距（类似单元格的cellpadding）盒子与盒子之间的距离是外边距（类似单元格的cellspacing）1、盒子边框（Box Boder）语法： border ： border原创 2020-09-25 14:57:58 · 11905 阅读 · 1 评论 -
css三大特性（层叠性，继承性，优先级）
CSS三大特性1、层叠性概念：指多种样式的叠加是浏览器处理冲突的一个能力，如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉原则：样式冲突，遵循的原则是就近原则。哪个样式离着结构近，就执行哪个样式样式不冲突，不会重叠 <style> div { color: red; font-size: 30px; } div {原创 2020-09-24 23:55:53 · 302 阅读 · 0 评论 -
css背景（图片，位置，背景附着，平铺）
一、行高1.1、行高测量基线与基线的距离为行高1.2、单行文本垂直居中文字的行高等于盒子的高度 line-height:30px;行高= 上距离 + 内容高度 + 下距离盒子 ：上距离和下距离总是相等的，因此文字看上去是垂直居中的行高与高度的关系：行高=高度，文字会垂直居中行高>高度，文字会垂直偏下行高<高度，文字会垂直偏上二、css背景（background）2.1 背景颜色（color）语法： background-color: transpare原创 2020-09-24 23:03:09 · 1018 阅读 · 0 评论 -
块级元素，行内元素，行内块元素及其相互转换
标签的显示（display）模式HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素1、块级元素（block-level） 常见的块元素有<h1>~<h6> ,<p>,<div>,<ul>,<ol>,<li>等，其中<div>标签是最典型的块元素块级元素的特点：（1）自己独占一行（2）高度，宽度，外边距以及内边距都可以控制（3）宽度默认是容器的100%（4）是一个容器及盒子、里原创 2020-09-24 14:22:50 · 17032 阅读 · 0 评论 -
CSS复合选择器（后代，子元素，交集，并集，链接伪类选择器）
CSS复合选择器目的是选择更准确更精细的目标元素标签复合选择器是由两个或多个基础选择器，通过不同方式组合1、后代选择器概念：后代选择器又称为包含选择器作用：用来选择元素或元素组的子孙后代写法： 父级 子级{属性：属性值；属性：属性值；}语法： .class h3{color:red; font-size:16px;}2、子元素选择器作用：子元素选择器只能选择作为某元素子元素（亲儿子,不包含子元素的下级元素）的元素写法：把父级标签写在前面，子级标签写在后面，中间原创 2020-09-24 13:14:56 · 729 阅读 · 0 评论 -
CSS外观属性(color text-align/indent 快捷键emmet用法)
CSS外观属性1、color：文本颜色作用：color属性用于定义文本的颜色取值有以下三种表示属性值预定义的颜色值red，green，blue十六进制#FF0000,# FF6600,#29D794RGB代码RGB（255,0，0）或RGB（100%，0%，0%）2、text-align ：文本对齐方式作用：text-align 属性用于设置文本内容的水平对齐，相当于HTML中的align对其属性可用属性如下：属性解释left原创 2020-09-23 19:17:25 · 603 阅读 · 0 评论 -
CSS字体样式font
CSS字体样式1、font字体谷歌浏览器默认文字大小16px字体大小单位主要用px2、font-family：字体作用：font-family属性用于设置哪一种字体 p{font-family:"微软雅黑"} font-family：Arial,"Microsoft YaHei"，“黑体” 可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个，则会尝试下一个，直到找到3、CSS Unicode字体文件编码时可能会产生错误，使用Unicode写中文名称，浏览器可以正确解析原创 2020-09-23 13:55:54 · 349 阅读 · 0 评论 -
CSS基础选择器（标签，类，id，通配符）
CSS选择器1、CSS选择器作用找到特定的HTML页面元素（选择标签用的）2、CSS基础选择器2.1 标签选择器概念：标签选择器（元素选择器）是指用HTML标签名 称作选择器，按标签名称分类，为页面中的某一类标签指定统一的CSS样式语法：标签名{属性1：属性值1；属性2：属性值2；}作用标签选择器可以把某一类标签全部选择出来优点是能快速为页面中的同一类型的标签统一样式缺点不能设计差异化样式2.2 类选择器概念：类选择器使用“.”（英文点号）进行表示，后面紧跟类型语法：原创 2020-09-23 12:56:23 · 1692 阅读 · 0 评论 -
CSS样式规则
CSScss作用：设置HTML版面的布局和外观的显示样式一、引入CSS样式表1、行内式（内联样式）概念：称为内样式，行间样式是通过标签的style属性来设置元素的样式语法格式：<标签名 style="属性1：属性值1； 属性2：属性值2；属性3：属性值3；">内容</标签名>2、内部样式表（内嵌样式表）概念：称内嵌式是将CSS代码集中卸载HTML文档的head头部标签中，并用style标签来定义语法格式： <style type="text/css原创 2020-09-23 09:03:14 · 1807 阅读 · 1 评论