前端实现html公用(HTML+CSS小案例学成在线之实战代码)

前端实现html公用(HTML+CSS小案例学成在线之实战代码)

前端实现html公用的问题你了解吗,本站通过大数据汇集了html做前端, web前端html代码的相关解答,希望对你有所帮助。



整个网页布局划分为四部分:top、nav、main、footer。

前端实现html公用(HTML+CSS小案例学成在线之实战代码)

确定公共CSS部分

top代码运行图

nav部分

html代码

nav代码运行图

main部分

所有main的内容都包含在main总盒子中。

main内容太多无法完全在一个代码块里写,提前把总盒子摘出来。逐个写各部分的代码。

menu部分

menu代码运行图

main-top

main-top代码运行图

main-center部分

main-center代码运行图

main-bottom部分

这部分是直接调用的现有选择器,没有添加新的css代码。

main-bottom代码运行图

footer部分

footer代码运行示意图

img元素在实际使用中,与周围元素会产生空白间隙。

解决方法:将img元素变为块元素即可。

好了,以上就是这几天的学习成果,虽然做的慢,但是能做出来还是有些成就感的,哈哈。

这个页面上有两个定位没有去做,等学习定位之后再补上吧。

下次准备开始学习定位。

前端实现html公用相关信息就介绍到这里,html做前端, web前端html代码的问题希望对你有所帮助。

文章版权声明:除非注明,否则均为边学边练网络文章,版权归原作者所有

相关阅读