CSS(3)
文章平均质量分 77
css
我在人间贩卖青春
这个作者很懒,什么都没留下…
展开
-
移动端(六)响应式布局与Bootstrap
响应式开发原理简单来说,就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备响应式需要一个父级做为布局容器,来配合子级元素来实现变化效果在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式变化 * { margin: 0; padding: 0; } ul { list-style: none; }原创 2021-10-07 19:38:25 · 153 阅读 · 0 评论 -
移动端(五)flexible.js + rem适配布局
rem适配方案flexible.jsgithub地址:https://github.com/amfe/lib-flexibleflexible.js 是手机淘宝团队出的移动端布局适配库不需要在写不同屏幕的媒体查询,因为里面js做了处理原理是把当前设备划分为10等份,但是不同设备下,比例还是一致的。要做的,就是确定好当前设备的html 文字大小就可以了比如当前设计稿是 750px, 那么我们只需要把 html 文字大小设置为 75px(750px / 10) 就可以,里面页面元素rem值: 页面原创 2021-10-07 17:18:44 · 479 阅读 · 0 评论 -
移动端(四)rem与媒体查询@media适配布局
remrem (root em)是一个相对单位,类似于em,em是父元素字体大小不同的是rem的基准是相对于html元素的字体大小比如,根元素(html)设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。rem的优势:父元素文字大小可能不一致, 但是整个页面只有一个html,可以很好来控制整个页面的元素大小/* 根html 为 12px */html { font-size: 12px;}/* 此时 div 的字体大小就是 24px */原创 2021-10-07 16:56:09 · 374 阅读 · 0 评论 -
移动端(三)CSS3 flex弹性盒子模型
flex弹性盒子操作方便,布局极为简单,移动端应用很广泛PC 端浏览器支持情况较差IE 11或更低版本,不支持或仅部分支持PC端页面布局,建议还是传统布局;如果不考虑兼容性问题的PC端页面布局,还是使用flex弹性布局注意:当我父盒子设为 flex 布局以后,子元素的 float、clear 和 vertical-align 属性将失效原理通过给父盒子添加flex属性,来控制子盒子的位置和排列方式属性flex-direction:设置主轴的方向,即子元素的排列方向j原创 2021-10-07 16:27:54 · 127 阅读 · 0 评论 -
移动端(二)物理像素比与二倍图、-webkit-tap-highlight-color、-webkit-appearance
物理像素&物理像素比物理像素物理像素点指的是屏幕显示的最小颗粒,是物理真实存在的。这是厂商在出厂时就设置好了PC端 和 早前的手机屏幕 / 普通手机屏幕: 1CSS像素 = 1 物理像素PC端页面,1个px 等于1个物理像素的,移动端就不尽相同,开发时候的1px 不是一定等于1个物理像素物理像素比Retina(视网膜屏幕)是一种显示技术,将把更多的物理像素点压缩至一块屏幕里,从而达到更高的分辨率,并提高屏幕显示的细腻程度一个px能显示的物理像素点的个数,称为物理像素比或屏幕像原创 2021-10-07 15:33:56 · 223 阅读 · 0 评论 -
移动端(一)布局视口与meta视口标签
视口视口(viewport)就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口布局视口 layout viewport:一般移动设备的浏览器都默认设置了一个布局视口,iOS, Android基本都将这个视口分辨率设置为 980px。PC上的网页大多都能在手机上呈现,只不过元素看上去很小,一般默认可以通过手动缩放网页,PC上的网页大多都能在手机上呈现,只不过元素看上去很小,一般默认可以通过手动缩放网页视觉视口 visual viewport:看到的网站的区域,可以原创 2021-10-07 13:06:47 · 407 阅读 · 0 评论 -
3D导航及旋转木马
3D导航<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title&原创 2021-09-23 23:33:29 · 87 阅读 · 0 评论 -
3D视角及3D反转
3D 视角transform-style: preserve-3d;让子元素保持3d立体空间环境<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-C原创 2021-09-23 23:16:55 · 308 阅读 · 0 评论 -
水平居中、垂直居中、水平垂直居中
水平居中块级元素margin: 0 auto;行内元素和行内块元素给其父元素添加 text-align:center ;即可垂直居中单行文字line-height: 40px;,40px为盒子高度图片文字img { /* vertical-align: bottom; */ /* 让图片和文字垂直居中 */ vertical-align: middle; /* vertical-align: top; */}textarea { ve原创 2021-09-21 22:30:34 · 165 阅读 · 0 评论 -
css制作三角形、带三角文本框、价格三角框
css制作三角形及带三角文本框<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> .原创 2021-09-21 23:00:18 · 363 阅读 · 0 评论 -
css动画实现热点图样式及奔跑的小熊
热点图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>原创 2021-09-22 23:29:40 · 142 阅读 · 0 评论 -
温故知新之(七)2D和3D的移动、旋转、缩放、背景渐变
2D转换translate移动transform:translate(x,y);分开写法:transform:translateX(n);transform:translateY(n);translate 最大的优点:不会影响到其他元素的位置translate 中的百分比单位是相对于自身元素的对行内标签没有效果旋转transform: rotate(Ndeg);rotate 里面跟度数,单位是 deg ,比如 rotate(45deg)默认旋转的中心点是元素的中心点tr原创 2021-09-17 23:07:20 · 182 阅读 · 0 评论 -
温故知新之(六)图片模糊处理、transition过渡、动画animation
图片模糊处理filter: blur(5px);blur是一个函数 小括号里面数值越大,图片越模糊 注意数值要加px单位calc()width:calc(100% - 80px);transition过渡transition: all 0.5s ease 1s;transition: 要过渡的属性 花费时间 运动曲线 何时开始过渡经常和:hover一起搭配使用过渡写到本身,谁做动画给谁加如果想要多个属性都变化,属性写all就可以了动画animationkeyframes原创 2021-09-17 22:54:49 · 261 阅读 · 0 评论 -
温故知新之(五)鼠标样式、图片与文本对齐、溢出文字省略显示、精灵图Sprites、iconfont
界面样式改变鼠标样式cursor: pointer | move | text | not-allowed | default; 改变鼠标样式default 小白,默认pointer 小手move 移动text 文本not-allowed 禁止去掉输入框聚焦时的蓝色边框outline: none | 0; 去掉默认的聚焦蓝色边框防止拖拽文本域resize: none; 防止拖拽文本域图片和文本对齐vertical-align: baseline | top |原创 2021-09-16 23:30:51 · 158 阅读 · 0 评论 -
温故知新之(四)页面布局之浮动、定位及元素的隐藏与显示
页面布局传统网页布局的三种方式普通流(标准流)标签按照规定好默认方式排列,即块级元素会独占一行,从上向下顺序排列;行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行浮动 多个块级盒子(div)水平排列成一行定位页面布局准则多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置先设置盒子大小,之后设置盒子的位置浮动浮动的典型应用:让多个块级元素一行内排列显示。通过display:inile原创 2021-09-12 23:08:18 · 254 阅读 · 0 评论 -
温故知新之(三)css背景属性、盒子模型、圆角边框和阴影
背景属性背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等background-color: transparent | red;,设置元素的背景颜色,transparent 为透明background-image : none | url(url);,设置元素的背景图像,url 指定使用绝对或相地址指定的背景图像background-repeat: repeat| no-repeat| repeat-x| repeat-y;,设置背景图像的平铺repeat 背景图像在原创 2021-09-09 23:15:05 · 116 阅读 · 0 评论 -
温故知新之(二)css文本样式属性及元素显示模式
文本样式属性字体样式属性font-family:Arial,"Microsoft Yahe","微软雅黑";,设置字体,可以设置多个,系统没有第一个字体就会加载第二个字体,以此类推font-size: 20px;,设置字体大小font-weight: normal | bold | bolder | lighter |number | inherit;,设置字体粗细normal 默认值(不加粗的),相当于 number=400bold 定义粗体(加粗的),相当于 number=700bol原创 2021-09-09 23:12:36 · 161 阅读 · 0 评论 -
温故知新之(一)css选择器
选择器选择器的分类基本选择器标签选择器:顾名思义,就直接是标签,div,p,span…类选择器:给标签写上class='test',样式写上.test{}类选择器多类名:给一个标签的 class 里绑多个样式类,class="test font-color"id 选择器:给标签写上id='test',样式写上#test{},主要 javascript 搭配通配符选择器:给所有标签加上该样式,* {属性1:属性值1;....}复合选择器常用的复合选择器包括:后代选择器、子选择器、原创 2021-09-09 23:08:45 · 153 阅读 · 0 评论