![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
文章平均质量分 83
Root_src
简单的事情重复做
展开
-
阿里百秀移动端首页案例
技术选型方案:我们采取响应式页面开发方案技术:bootstrap框架设计图:本设计图采用1280px设计尺寸 页面布局分析 有一个.container大盒子 里面装三个盒子nav 2份 artictle 7份 aside侧边栏3份 屏幕划分 中等屏幕和大屏幕一致 ① 屏幕缩放发现中屏幕 和大屏幕布局是一致的。因此我们列定义为col-md就可以了,md是大于等于970以上的 ②屏幕缩放发现小屏幕布局发生变化,因此我们需要为小屏幕根据需求改变布局 ③ 屏幕缩原创 2022-04-20 19:20:47 · 515 阅读 · 0 评论 -
VW / vh
vw / vh 是什么 vw / vh 是一个相对单位(类似em 和 rem相对单位) vw是:viewport width 视口宽度单位 vh是:viewport height 视口高度单位 相对视口的尺寸计算结果 1vw= 1/100视口宽度1vh= 1/100视口高度例如当前屏幕视口是375像素,则1vw就是3.75像素,如果当前屏幕视口为414 则1vw 4.14像素注意:和百分比有区别的, 百分比是相对于父元素来说的,而vw和vh总是针对于当前视口来原创 2022-04-20 19:12:21 · 645 阅读 · 0 评论 -
移动端web响应式布局开发
我宣布响应式布局 !你!是!我的!神!响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的设备划分 尺寸区间 超小屏幕(手机) < 768px 小屏设备(平板) >=768px ~<992px 中等屏幕(桌面显示器) >=992px~<1200px 宽屏设备(大桌面显示器) >=1200px响应式布局容器响应式需要一个父级作为布局容器,来配合子级元素来实现变化效果原理就是在不同屏幕下,通过媒体查询来改变这原创 2022-04-20 17:25:26 · 663 阅读 · 0 评论 -
黑马面面页面布局
一、目的 了解移动端页面开发流程 掌握移动端常见布局思路 技术方案1. 弹性盒子 + rem + LESS4. 最小适配设备为iphone5 320px 最大设配设备为iphone8plus(ipad能正常查看内容即可)代码规范1. 类名语义化,尽量精短、明确,必须以字母开头命名,且全部字母为小写,单词之间统一使用下划线“_” 连接2. 类名嵌套层次尽量不超过三层3. 尽量避免直接使用元素选择器4. 属性书写顺序 布局定位属性:display / po...原创 2022-04-15 23:17:05 · 990 阅读 · 0 评论 -
苏宁移动端页面案例
整这个flexible.js还下载了github 下老半天又看不懂不会用啊啊啊真烦躁苏宁往移动端首页方案: 我们采取单独制作移动页面方案技术:布局采取rem适配布局(less+rem+媒体查询)设计图:本设计图采用750px设计尺寸 搭建相关文件夹 与以往一样 设置视口标签以及引入初始化样式 4.设置公共common.less文件 新建common.less 设置好最常见的屏幕尺寸,利用媒体查询设置不同的html字体大小,因为除了首页其他页面也需要 我们原创 2022-04-14 23:18:41 · 714 阅读 · 0 评论 -
移动web开发rem适配布局
摆烂了两天遗漏挺多的,赶紧写完赶紧睡觉把,明天想想怎么过教资的面试咯移动web开发rem适配布局rem单位rem(root em)是一个相对单位,类似于em em是父元素字体大小不同的是rem的基准是相对于html元素的字体大小比如 根元素html 设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px媒体查询1.什么是媒体查询?媒体查询(madia Query)是CSS新语法 使用@media查询,可以针对不同的媒体类型定义原创 2022-04-14 23:08:42 · 80 阅读 · 0 评论 -
3D转换 --继续学习
3D移动 translate3d3D移动在2D移动的基础上多加了一个可以移动的方向,就是z轴方向。 translform:translateX(100px):仅仅是在x轴上移动 translform:translateY(100px):仅仅是在Y轴上移动 translform:translateZ(100px):仅仅是在Z轴上移动(注意:translateZ一般用px单位 transform:translate3d(x,yz):其中xy、z分别指要移动的轴的方向的距离原创 2022-04-08 22:26:30 · 947 阅读 · 0 评论 -
2D转换 动画 3D转换
好烦好烦好烦好烦好烦好烦好烦好烦好烦好困好困好困好困好困好困transform:sacle(x,y) 缩放 缩放 x y放倍数 宽度,高度 注意其中x y用逗号分隔 可以是小数 不会影响其他盒子 鼠标经过时图片放大 所以只要注意hover是放在图片img内 而不是div 利用overflow:hidden将放大后图片多余部分隐藏起来分页按钮案例2D转换综合写法注意: 同时使用多个转换,其格式为: transform: tra...原创 2022-04-07 22:35:21 · 362 阅读 · 0 评论 -
2D转换学习
2D转换转换(transform)是CSS中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放等效果转换可以简单理解为变形 移动: translate 旋转:rotate 缩放:scale 二维坐标系2D转换是改变标签在二维平面上的位置和形状的一种技术,先来学习二维坐标2D转换之移动 translate语法:transform: translate (x,y); 或者分开写transform: translateX(n);transfor原创 2022-04-06 22:38:46 · 141 阅读 · 0 评论 -
PC端品优购注册页面 resgister.css以及web服务器学习
注册页类名命名注册页面:register.html注意:注册页面比较隐私,为了保护用户信息,我们不需要对当前页面做SEO优化注册专区: registerarea注册内容 reg-form错误的 error成功的 success默认的 defaultlogo 盒子不能加margin-top,会造成塌陷,直接加padding-topregisterarea 布局h3标题 + reg-form注册内容reg-form盒子水平垂直居中手机号、短信验..原创 2022-04-06 22:32:41 · 745 阅读 · 0 评论 -
HTML5、CSS3提高学习
HTML5 CSS3提高学习摆脱了我计算边框 分不清结构的问题 但是今天的内容花了挺长时间的HTML5和CSS3提高HTML5的新特性HTML5的新增特性主要是针对于以前的不足,增加了一些新的标签,新的表单和新的表单属性等结构比样式更重要这些特性都有兼容性的问题,基本是IE9+以上版本的浏览器才支持,如果不考虑兼容性的问题,可以大量使用这些新特性声明: 新特性增加了很多,但是我们专注于开发常用的新特性 狭义的HTML5随着时间发展,我们更偏向 HTML5 CSS3原创 2022-04-02 22:38:15 · 56 阅读 · 0 评论 -
常见布局方式和CSS初始化学习
常见布局技巧巧妙利用一个技术更快更好的布局:margin负值巧妙利用 让每个盒子margin 往左侧移动 -1px正好压住相邻盒字边框 鼠标经过某个盒子的时候,提高当前盒子的层级即可(如果没有定位,则加相对定位(保留位置)如果有定位,则加z-index) <style> ul li { position: relative; float: left; list-style...原创 2022-04-01 23:08:21 · 142 阅读 · 0 评论 -
CSS三角和用户界面的学习
发现前面写的播客内容太冗杂了,不好具体问具体思考分两个知识点记录CSS三角类似于秒杀价,会出现梯形形状 先创建一个大盒子和一个小盒子span ,再利用上面的方法给小盒子设置定位和边框 CSS 用户界面什么是界面样式?所谓界面样式,就是更改一些用户操作样式,一边特高更好的更好的用户体验 更改用户的鼠标样式 表单轮廓 防止表单域拖拽 鼠标样式cursorli (cursor:pointer; )设置或检索在对象上移动的鼠标指针采用何种系统预原创 2022-04-01 22:47:08 · 77 阅读 · 0 评论 -
精灵图和字体图标学习
精灵图为什么需要精灵图?一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度因此,为了有效的减少服务器接受和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(也称CSS Sprites、CSS雪碧)精灵图(sprites)的使用使用精灵图核心:1.精灵图技术主要针对于背景图片使用,就是把多个小背景图片整合到一张大图片中2.这个大图片也称为sprites精灵图 或者 雪碧图原创 2022-04-01 22:37:06 · 87 阅读 · 0 评论 -
CSS定位学习
为什么需要定位?定位则是可以让盒子自由的在某个盒子内移动位置或固定屏幕中的某个位置,并且可以压住其他盒子定位的组成定位:将盒子定在某一个位置,所以定位也是在摆放盒子,按照定位的方式移动盒子定位=定位模式+边偏移定位模式用于指定一个元素在文档中的定位方式,边偏移则决定了该元素的最终位置定位模式定位模式决定元素的定位方式,它通过CSS的position属性来设置,其值可以分为四个static 静态定位relative 相对定位absolute绝对定位fixed 固定定原创 2022-03-31 21:44:41 · 56 阅读 · 0 评论