网络部第二次作业 ——音乐软件界面模仿&布局思路探索
- 图标的引入
如上图,音乐软件界面有诸多图标,分别有不同的功能。以下列举两种引入图标的方法,以及本人对两种方式的思考,素材来源都是阿里云矢量图
1.直接引用svg代码
优点:简单方便,直接复制即可引用,不受网络限制,可离线使用,相当于用代码直接“画”一个图标出来
缺点:代码过长
适用范围:引用少数图标,或制作简单网页
2.iconfont 引用
iconfont有两种引用方式,一种是离线,一种在线。
共同优点:代码简单,只需在头文件中引入样式即可
在线引用:每次加入新图标需要在头文件中替换新的源网站
离线引用:将在线引用的源网站代码复制下来,保存到本地作为css文件,在头文件中引入。每次加入新图标需要更改css代码。
相对于svg的缺点:操作繁琐一些?
- 鼠标指针样式的更改
音乐界面的按钮等鼠标移动上去会变成小手,那么这应该如何实现?
1.空超链接
在没有了解cursor代码时想到的临时方法
2.cursor
css代码中,cursor: +鼠标样式,如pointer为小手
- hover属性
如图,音乐界面的几个栏目标题鼠标放上去后会变色,这是用hover实现的。需要注意的是,hover是对一个div设置才会有如图的效果,不然仅是文字的背景变成灰色。
hover也应用于一些按钮的变色,如图(截图自动隐藏了小手光标)
原理为
div设置一个初始颜色→div:hover设置一个颜色 - 布局的思考
本次作业我一开始的排版、布局就不太好,导致后期稍微改一点东西都牵一发而动全身,不得不用absolute强行补救
网页布局像地基一样,所以下次做网页时一定先将区块用不同颜色div分好,想好哪个div放什么内容- 关于flex布局
flex布局是一个比较方便且实用的布局,需要将一个大的div定义为容器,然后在里面实行布局等操作
因本人还在学习flex,这里先不谈
垂直于屏幕的布局
类似于word中的分层,如“置于顶层”等操作。在css中,分层可以通过“z-index:数字”来实现
默认层级都为0,设为负数则在所有元素底层,数字越大,层级越高
比如下图,搜索图标的层级高于搜索框,所以可以显示在搜索框之上。
ps:其实可以将图标和搜索框放在同一div实现,主要之前用搜索框用的是绝对定位~~
- 关于flex布局
- 缩进与页边距
一开始用的比较笨的方法,需要用多个"< br>", 进行布局,空行
后来改进,可以用一个大的div包裹,然后用padding来设定边距
行缩进方面,不用一串&nbsp,用css中的text-indent:+缩进长度,即可简单地实现行缩进 - 总结
本次的模仿界面作业让我对html css有了更新、更全面的认识,从布局的样式,到代码的优化、简洁化,都有了更新的体会与收获。希望在今后的学习中再接再厉。
©️小毛o今天早睡了嘛!