html+css
文章平均质量分 62
gaoya7305
一切皆有可能
展开
-
二十七、响应式布局练习- 美图导航栏1
因为我们的菜单列表是后面点击左侧按钮在展示,所以在写样式前,先把这个菜单nav注释藏起来,不影响我们外面大局的布局。用户信息用的是雪碧图,2x(2倍图),比他真实的图标大小,大了一倍,所以待会需要缩小下。1.移动端优先 - 先写完移动端的界面,再写网页。分析:手机宽度下的网页元素, 导航栏3个元素,左边菜单,中间标题, 右边用户。问题:因为旋转的点在中心位置,所以导致转出来是 > 样式,不是 x 样式。无js参与,所以我们用hover 模拟下,当鼠标移动到三,他立马变成 X。原创 2023-07-28 11:11:39 · 249 阅读 · 0 评论 -
二十六、媒体查询2
样式切换的分界点,我们称其为断点,也就是网页的样式会再这个点时发生变化;比如看到的很多网页,当视口不断缩小,到某个点,会突然变成竖屏界面展示。min-width 视口的最小宽度(视口大于指定宽度时生效)max-width 视口的最大宽度(视口小于指定宽度时生效)一般设计的时候,高度不考虑,只考虑宽度。问题:这里的500px太过于精确。解决: 优化下,用范围更灵活。height 视口的高度。width 视口的宽度。原创 2023-07-25 09:23:20 · 451 阅读 · 0 评论 -
二十五、响应式布局 - 媒体查询
我们发现很多网页,在用户拉动边框缩放可视区的时候,内部控件都会随着大小有变动,这个就是在自适应屏幕 - 响应式布局。- 如果同一种设备,都是屏幕,但是可以是不同状态。比如:有些屏幕大,有些屏幕小,有些屏幕是横的,有些屏幕是竖的。- 网页有时候需要打印机 - 打印机又是一种设备(打印机没有屏幕);- 根据这个设备的不同,打印的时候一个样式,屏幕上看是另外一个样式;- 电脑,手机都有屏幕 - 他们是属于一种设备;原创 2023-07-24 09:02:03 · 133 阅读 · 0 评论 -
二十四、移动页面练习3
在item-list 再复制一个item。原创 2023-07-21 15:01:29 · 62 阅读 · 0 评论 -
二十三、移动页面练习2
如果不加 flex-flow:row wrap;样式就是这样,因为flex自带伸缩,让他们都放到一行,即使设置了每个元素的宽也无用。解决: 设置换行(按行排列,换行) flex-flow:row wrap;// 设置辅轴方向的对齐方式(这里还可以用space-around)因为这里我们当时量整体高度是包含了上下空白的。一、界面第二部分开发 - 图片展示。三、设置这4个菜单的对齐方式。三、详细设置每个菜单的样式。原创 2023-07-20 13:53:32 · 37 阅读 · 0 评论 -
二十二、移动端页面练习1
当我们设置header宽度的时候,发现他和整个屏幕主体内容,都是等宽,且居中,所以我们直接在外面定义个w类,可以让他更能广泛使用。2.设置头部元素样式。原创 2023-07-20 10:26:17 · 45 阅读 · 0 评论 -
二十一、vm 适配
这样扩大,通过看computed 如果正常显示了我们写的font-size,就表示当前定义的font-size正确。写了style后,看真实生效的样式要看computed,调试会常用到 ,调试面板的 styles 只能看代码去设置的样式。确定倍数后,如这里的40倍,即1rem = 40px, 后面再在设计图中测出元素的width,height后 除以 40, 就得到rem值了。/* 此时这里的1rem = 100px;1 rem = 1 html的字体大小 (1个html的font-size)原创 2023-07-19 10:28:46 · 217 阅读 · 0 评论 -
二十、移动端网页开发-px 和 vw基础知识
假设现在设计图是:750px, 使用vw作为单位: 100vw (整个视口的宽度), 现在在设计图中测到的一个图标大小为: 48px x 35px ,100vw = 一个视口的宽度(100%),在这里就是和手机屏幕宽度一样。/* 开发的是手机移动页面,就不能用px,而是用vw。原创 2023-07-17 14:36:39 · 319 阅读 · 0 评论 -
十八、网页端在移动端的像素
1. 在不同的屏幕,单位像素的大小是不同的,像素越小,屏幕越清晰。手机端的像素就是宽度和高度,如iphone6 4.7寸 750 x 1334。-2. 手机的像素点 远远小于 计算机的像素点。原创 2023-07-17 09:03:25 · 259 阅读 · 0 评论 -
十三、弹性容器flex的样式1
设置ul为弹性元素,默认是flex-direction:row,所以不用设置,然后在让里面的方块不进行伸缩。2.flex-wrap 换行。(针对方块的溢出的解决方法)4.justify-content 设置元素的对齐方式。我们看到小方块超出了边框。原创 2023-07-06 15:29:30 · 101 阅读 · 0 评论 -
十二、flex练习
需求:做出下面的样式。原创 2023-07-05 17:24:19 · 221 阅读 · 0 评论 -
十一、弹性盒flex - 介绍
现在我们把li 的width:200px, ul 父元素width: 300px;,从这里可以看出3个li的width加起来是超过300的,但是效果是没有元素超出父元素,他们自动伸缩了,就是收缩系数控制的。通过 display: flex,来设置ul为弹性容器,效果是高度没有塌陷,且水平排列。解决方法:让我们的li元素都具有伸缩特性 - flex-grow:1;我们知道float:left 会导致高度塌陷,flex不会。当前父类ul,没有设置高度,这里是元素自适应高度。flex(弹性盒,伸缩盒)原创 2023-07-05 16:56:49 · 152 阅读 · 0 评论 -
十、less语法2
c. 直接复制全部 less.comppile,然后,点击做下角的设置图标 - 设置 - 扩展 - easy less configtion。e. 在xx.less 中操作保存下,会多一个other.css.map 文件,你在调试,你就会发现可以看到正常的less行号.b. 如果我想找到css 对应的less 所在行,需要在插件easy less 这里面,配置。a. 如果调试过程中,要改样式,是要改less,但是提示会给你的是css的某行。然后compress (压缩):false,原创 2023-07-04 16:14:52 · 240 阅读 · 0 评论 -
九、less语法
多行注释,在less中写了的多行注释,保持less文件后,自动会在css中继承下来,单行注释不会。表示,p2有p1相同的width,height, 同时在为p2多扩展设置一个color。使用类选择器时,可以在选择器后面添加一个括号,这时我们实际上就创建了一个mixins。//如果我们确实不想传值,其实我们也可以在设置混合函数方法的时候给他们一个默认值。用的话: @变量名, 变量不仅可以存数字,颜色,也可以存类名。// 有了默认值,你可以不传,或者只传一个。优化这种写法,不让他在重复写一次。原创 2023-07-04 15:46:43 · 343 阅读 · 0 评论 -
八、less简介
less :对变量的支持,对mixin的支持,对css做了许多扩展,语法也和css差不多。less是一个css的预处理语言,他的语法是要通过中间再编译成css的语法。插件: easy less 保存代码的时候会自动把less 编译成css。less和js优点相似,学会js,再理解他就很简单了。原创 2023-07-03 09:02:07 · 173 阅读 · 0 评论 -
七、动画 - 缩放scale
动画,缩放,scale原创 2023-06-30 09:27:47 · 300 阅读 · 0 评论 -
六、动画 - 旋转的应用例子,时钟
rotate,旋转,时钟原创 2023-06-28 09:35:26 · 103 阅读 · 0 评论 -
五、动画 - 旋转rotate
旋转,动画, rotate原创 2023-06-26 10:31:36 · 752 阅读 · 0 评论 -
四、动画:Z轴平移translateZ
动画,Z轴平移,translateZ原创 2023-06-21 08:29:09 · 116 阅读 · 0 评论 -
三、动画 -变形transform
如下这样写,你会发现box3撑满整个屏幕,因为你设置了 margin: auto;所以它宽高也可以自动设置。现在如果我现在把宽高删掉,然后box3盒子里面有字。现在想box3的宽高,通过我设置的box3的文字内容来撑开。并且box3依然在屏幕的居中。上面这种写法有缺陷:如果这个元素,宽高是确定,可以这样写。1.首先我们先做准备工作:在界面上画出两个方块。变形就是指通过CSS来改变元素的形状或位置。2.现在让box1往x轴右侧移动。1.变形transform定义。一、变形transform定义。原创 2023-06-20 08:50:39 · 1070 阅读 · 0 评论 -
二、动画- animation动画
animation ,动画原创 2023-06-19 08:28:37 · 999 阅读 · 0 评论 -
一、动画 - 过渡效果transition
动画,过渡效果transition原创 2023-06-14 09:06:59 · 1512 阅读 · 3 评论