网络部第二次作业

网络部第二次作业 ——音乐软件界面模仿&布局思路探索

• 图标的引入

如上图，音乐软件界面有诸多图标，分别有不同的功能。以下列举两种引入图标的方法，以及本人对两种方式的思考，素材来源都是阿里云矢量图

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实现，主要之前用搜索框用的是绝对定位~~
    
• 缩进与页边距
  
  一开始用的比较笨的方法，需要用多个"< br>",&nbsp进行布局，空行
  后来改进，可以用一个大的div包裹，然后用padding来设定边距
  
  行缩进方面，不用一串＆nbsp，用css中的text－indent：＋缩进长度，即可简单地实现行缩进
• 总结
  本次的模仿界面作业让我对html css有了更新、更全面的认识，从布局的样式，到代码的优化、简洁化，都有了更新的体会与收获。希望在今后的学习中再接再厉。
  ©️小毛o今天早睡了嘛!