毕业设计——前端学习记录

1. 学会了div布局:曾经因为网页布局问题而有点畏惧前端,感谢毕设让我一个人负责前后端

2. 从代码中领悟了标签嵌套的规则:如三栏式布局中header和footer部分的子布局

3. 正在学习网页自适应屏幕宽高:学习中

4. html5布局:

5. 常用的网页布局:“同”字结构,“T”字结构等等

6. 布局方式的比较:inline-block布局 vs 浮动布局(值得一看)

7. 鼠标悬停时出现文字:在标签中设置title属性值就可以出现文字了

8. div设置为圆角矩形:设置属性border-radius: 25px;

9. 浮动布局下,网页缩放造成的块级元素混乱处理:可以考虑用overflow属性,同时需要应用display: inline-block而不是float布局。暂时只知道处理同一行的元素混乱问题。涉及的项目问题:在base.html中的header及footer部分的网页缩放所造成的混乱问题,已解决(暂时性解决):关于overflow:hidden;的用法请自行搜索。

  9.1 解决了搜索框的搜索按钮的文字显示不全问题:首先,将搜索框的长度为固定值(即阀值),在网页缩放过程中如果超过该阀值就会自动隐藏。通过在其父标签中设置overflow:hidden;在子标签溢出时隐藏子标签。

  9.2 解决了footer部分的标签overflow导致的结构混乱问题:解法同9.1

  9.3 总结就是在处理网页缩放中导致的结构混乱问题时可以通过在对应的父标签中设置overflow:hidden;,需要注意的是,对于可能出现overflow的标签,其对应的宽度需要一个固定值(阀值),用于控制何时会进行hidden处理,同时该标签的布局方式不能是浮动float方式

  9.4 发现的结构混乱问题暂时只有以上这些,待续……

10. 关于浏览器首选执行的标志语句:"!important",学到了学到了。。

猜你喜欢

转载自www.cnblogs.com/johnyhe/p/10600169.html