关于QQ音乐官网的仿写总结及相关试验的结果报告

念旧_
194 阅读4分钟

1.首先，刚开始写通达校网就有的疑惑:img，也就是图片，到底是行内元素还是块元素，如果其为行内元素，为什么又能够设置宽高?

这个问题看似不起眼，但却是能影响到以后大框架搭建的稳定性等等问题，如果根深蒂固，思维固化，这种本质上的理解错误将不利于基础的绝对夯实，会留有一定的技术空白。

正解:

img是行内替换元素，但其同时又兼有行内元素，行内块，和块级元素的特性，从元素本身的特点来讲，img属于其中的可替换元素(详情见MDN解释)，即

  • 浏览器根据元素的标签和属性，来决定元素的具体显示内容

  • 例如浏览器会根据 <img> 标签的src属性的值来读取图片信息并显示出来，而如果查看(X)HTML代码，则看不到图片的实际内容；又例如根据 <input> 标签的type属性来决定是显示输入框，还是单选按钮等

  • 替换元素一般有内在尺寸，所以具有 width 和 height，可以设定

    • 例如你不指定 <img> 的 width 和 height 时，就按其内在尺寸显示，也就是图片被保存的时候的宽度和高度

  • 对于表单元素，浏览器也有默认的样式，包括宽度和高度

  • <img>、<input>属于行内替换元素。height/width/padding/margin均可用。效果等于块元素

此文正解来源于SegmentFault，文章出处请点这里

                                                      完美的官网

2.第二个容易被忽视的问题就是a标签的应用规范

例如想要引用a标签以网页跳转，但当你用上的的时候你会发现a标签下的文字有下划线，而且字体还是蓝色的，这个的解决方法还是简单的，但其中容易搞混的就是相同属性的权重问题，a标签和div和span等等标签之间的包含及父子继承关系，代码见下:

<div class="headbox1_2">
 <ul>
  <li class="headbox1_2_li"><a href="https://y.qq.com/artists" target="_blank"style="color: white;text-decoration: none;"><span class="one">音乐馆</span></a></li>
  <li class="headbox1_2_li"><a href="https://y.qq.com/artists" target="_blank"              style="color: black;text-decoration: none;"><span class="span_1">我的音乐</span></a></li>            
  <li class="headbox1_2_li"><a href="https://y.qq.com/artists" target="_blank"              style="color: black;text-decoration: none;"><span class="span_1">客户端</span></a></li>            
  <li class="headbox1_2_li"><a  href="https://y.qq.com/artists" target="_blank"              style="color: black;text-decoration: none;"><span class="span_1">开放平台</span></a></li>            
  <li class="headbox1_2_li"><a  href="https://y.qq.com/artists" target="_blank"              style="color: black;text-decoration: none;"><span class="span_1">VIP</span></a></li>          
 </ul>        
</div>

第一次用a标签的时候a标签的本身样式困扰了我几分钟(我知道千锋教育讲过，但我都是开3倍速刷过去的，理解一下)，问了王佬后得以解决

第二次用a标签的时候是在总网页完成收尾的时候，那时候通过简单试验才知道a标签不能乱加，有时与span同用的时候容易对其造成影响，所以改成外面大的加a标签，小个的用span进行效果加持。

3.比较重要的，就是二级下拉菜单的局限性

纯css二级菜单的好处就是简单易做，效率高

但纯css二级菜单的局限性也很明显，之前做校网的时候就有发觉，这次做小米商城的官网的时候感受更强烈:

3.1 二级菜单默认左对齐且位置固定，如这次的小米购物车，为达到右对齐的效果只能更改其margin值为负数使其网反方向对其

.dinglanbox2 ul {  
display: none;  
position: absolute;}
.dinglanbox2 li {  
display: block;  
margin-left: -195px;          注意这里  
text-align: center;  
height: 100px;  
line-height: 100px;  
width: 315px;  
margin-right: 0px;  
box-shadow: -5px 5px 10px -4px #cbcbcb, 5px 5px 10px -4px #cbcbcb;  
color: black;  
position: absolute;  
z-index: 40;  
background-color: white;}

3.2 第二个比较鸡肋的特点，就是二级菜单默认在父盒子或列表的下面垂直或者是水平排布

就比如说做这个效果，二级菜单并不是明智之选

3.3 二级菜单的默认宽高属性

对于高度来说，二级菜单貌似没有限制，但是一旦想设置宽度，例如100%，二级菜单就会受限报错，并且将高度的最大值统一为父元素的高度，属实麻烦。

4.小小的三角形技术总结

利用的是span标签
.sanjiao {  
width: 0px;
height: 0px;  
display: inline-block;  
border: 5px solid transparent;  
border-top: 5px solid white;  
position: relative;  
top: 2.5px;  
margin-left: 30px;}

.bbox:hover .sanjiao {  
border: 5px solid transparent;  
border-bottom: 5px solid white;  
top: -2.5px;}

那些hover之后出现二维码的应该也是个盒子隐藏再加个三角吧

5.记录3个极其实用的快捷键

1.竖行多行选中操作

alt+shift+左键

2.灵活多行选中

alt+鼠标左键

3.元素查找

ctrl+f

6.分享一个小技巧，那些用来分隔或者其他效果的小粗线极有可能是高度或者宽度为极小的盒子，或者直接用|进行span效果

总结:多实验试验新的属性或者不同属性或css的相互作用效果，多实验不同标签属性的不同方向应用效果

作者:king_24

转载请告知，共同学习交流进步，欢迎点赞收藏

avatar
文章
阅读
粉丝