训练营-移动端
文章平均质量分 66
晴天.js
大前端
展开
-
仿酷狗音乐移动端静态页面-3
在本页面中,每个div当中的分割线是采用渐变的方法制作出来的。下面详细说一下渐变属性值:linear-gradient 表示线性渐变,第一个值填写的是渐变的方向,deg表示角度,默认是从上到下。我此处写的0deg,表示从下到上。如果填写90deg表示水平从左到右的一个渐变,180deg从右到左的渐变。角度值可以随意0至360随意填写,符合自己的要求就可以。后面依次是颜色值,这里演示的是红色到黄色的一个渐变,可以填写多个值,呈现一段段的渐变。2. 径向渐变。原创 2023-02-20 15:34:11 · 184 阅读 · 0 评论 -
仿酷狗音乐移动端静态页面-2
在HTML中,块级元素默认会独占一行的位置,多个块级元素从上到下依次排列。此时,如果要想我们的页面变得好看,就要使这些块能够按照我们的要求去到相应的位置,其中一种办法就是使用弹性布局。添加在需要布局的父级当中,对子元素进行位置排列的控制。它的属性是我们能够进行布局的关键。原创 2023-02-18 14:03:11 · 119 阅读 · 0 评论 -
仿酷狗音乐移动端静态页面-1
2. 移动端布局要注意ui给的设计图与实际终端的像素的比例,如果自己进行开发训练,可以使用vw,vh来作为单位。这里vw表示移动终端的屏幕宽度,1vw代表站移动终端宽度的1%,即100vw等于终端屏幕宽度。vw,vh始终跟随移动终端的尺寸进行动态变化。毗邻的定义为:同级或者嵌套的盒元素,并且它们之间没有非空内容、Padding或Border分隔。在本项目中经常用到margin(外间距)进行div位置变换,其中存在一个问题首尾与父级边框重合的div会造成父级边框跟随设置移动,这是来自于CSS的一个规定。原创 2023-02-17 11:22:48 · 135 阅读 · 0 评论