CSS3
文章平均质量分 83
Root_src
简单的事情重复做
展开
-
阿里百秀移动端首页案例
技术选型方案:我们采取响应式页面开发方案技术:bootstrap框架设计图:本设计图采用1280px设计尺寸 页面布局分析 有一个.container大盒子 里面装三个盒子nav 2份 artictle 7份 aside侧边栏3份 屏幕划分 中等屏幕和大屏幕一致 ① 屏幕缩放发现中屏幕 和大屏幕布局是一致的。因此我们列定义为col-md就可以了,md是大于等于970以上的 ②屏幕缩放发现小屏幕布局发生变化,因此我们需要为小屏幕根据需求改变布局 ③ 屏幕缩原创 2022-04-20 19:20:47 · 518 阅读 · 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 · 656 阅读 · 0 评论 -
黑马面面页面布局
一、目的 了解移动端页面开发流程 掌握移动端常见布局思路 技术方案1. 弹性盒子 + rem + LESS4. 最小适配设备为iphone5 320px 最大设配设备为iphone8plus(ipad能正常查看内容即可)代码规范1. 类名语义化,尽量精短、明确,必须以字母开头命名,且全部字母为小写,单词之间统一使用下划线“_” 连接2. 类名嵌套层次尽量不超过三层3. 尽量避免直接使用元素选择器4. 属性书写顺序 布局定位属性:display / po...原创 2022-04-15 23:17:05 · 998 阅读 · 0 评论 -
苏宁移动端页面案例
整这个flexible.js还下载了github 下老半天又看不懂不会用啊啊啊真烦躁苏宁往移动端首页方案: 我们采取单独制作移动页面方案技术:布局采取rem适配布局(less+rem+媒体查询)设计图:本设计图采用750px设计尺寸 搭建相关文件夹 与以往一样 设置视口标签以及引入初始化样式 4.设置公共common.less文件 新建common.less 设置好最常见的屏幕尺寸,利用媒体查询设置不同的html字体大小,因为除了首页其他页面也需要 我们原创 2022-04-14 23:18:41 · 722 阅读 · 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 · 81 阅读 · 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 · 953 阅读 · 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 · 365 阅读 · 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 · 144 阅读 · 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 · 751 阅读 · 0 评论 -
PC端品优购网页(common.css)以及列表页面(list.css)
疫情有反复了,谁能想到极少有疫情动态的江西能反复又反复,在不远处的南昌大学都有人确诊,学校的快递又不能收了,近期以“好好学习好好睡觉”来麻痹自己,解封的是遥不可期呢main 主体模块制作以前书写的就是模块化中的公共部分main 主体模块是index里面专有的,注意需要新的样式文件index.css main 盒子宽度为980 像素 位置距离左边220px (magin-left) 给高度就不用清除浮动 下拉模块210以及10px留白 main 里面包含左侧盒子,左浮...原创 2022-04-05 22:31:03 · 767 阅读 · 0 评论 -
PC端品优购网页制作(common.css)2
正式制作网页网站首页一般都是使用index命名,比如index.html或index.php我们开始制作首页的头部和底部的时候,根据模块化开发,样式要写到common.css里面常用模块类名命名可参考菜鸟教程快捷导航shortcut制作 通栏的盒子命名为shortcut 是最快捷导航的意思,注意这里的行高,可以继承给里面的盒子 里面包含版心的盒子 版心盒子里面包含1号左侧盒子左浮动 版心盒子里面包含2号右侧盒子右浮动 header 制作 he原创 2022-04-04 23:37:28 · 848 阅读 · 0 评论 -
PC端品优购网页制作(common.css)
制作网页前的基础学习品优购项目规划1.1网站制作流程 客户沟通制定方案 签订合同 预付定金 不能退 初稿审核 网页美工会制作原型图和PSD效果图 前台页面设计后台工程开发 测试验收 上线培训 后期维护(半年左右) 现阶段我们主要做前台页面设计1.2品优购项目整体介绍项目名称:品优购项目描述:品优购是一个电商网站,我们要完成PC端首页,列表页、注册页的制作1.3品优购项目的学习目的1.电商网站比较综原创 2022-04-04 23:20:56 · 904 阅读 · 0 评论 -
HTML5、css3学习3
CSS盒子模型CSS3中可以通过box-sizing来指定盒模型,有2个值:即可指定为content-box、border-box 这样我们计算盒子大小的方式就发生了变化可以分成两种情况: box-sizing:content-box 盒子大小为width+padding+border (以前默认的) box-sizing: border-box盒子大小为width 如果盒子模型我们改为了box-sizing: border-box, 那padding和border就不会撑大盒子原创 2022-04-02 23:02:55 · 88 阅读 · 0 评论 -
HTML5 CSS3提高学习2
CSS3新特性CSS3的现状: 新增CSS3特性有兼容性的问题,ie9+才支持 移动端支持优于PC端 不断改进中 应用相对广泛 现阶段主要学习:新增选择和盒子模型 以及其他特性 属性选择器属性选择器可以根据元素特性属性的来选择元素,这个就可以不用借助与类或者id选择器E[att] 选择具有att属性的E元素 E[att="val"] 选择具有att属性且属性值等于val的E元素 重点务必掌握 E[att^="val"] 匹配具有att属性且值以v原创 2022-04-02 22:58:21 · 77 阅读 · 0 评论 -
HTML5、CSS3提高学习
HTML5 CSS3提高学习摆脱了我计算边框 分不清结构的问题 但是今天的内容花了挺长时间的HTML5和CSS3提高HTML5的新特性HTML5的新增特性主要是针对于以前的不足,增加了一些新的标签,新的表单和新的表单属性等结构比样式更重要这些特性都有兼容性的问题,基本是IE9+以上版本的浏览器才支持,如果不考虑兼容性的问题,可以大量使用这些新特性声明: 新特性增加了很多,但是我们专注于开发常用的新特性 狭义的HTML5随着时间发展,我们更偏向 HTML5 CSS3原创 2022-04-02 22:38:15 · 56 阅读 · 0 评论