div标签，我们称为层，div是块状元素，结合css能够很好的进行网页布局
我们先来写一段div+css的代码，让大家看下div是什么样的
nbsp;html>div{width:300px;height:300px;border:1px solid red}
登录后复制
上面的一段代码，然后我们运行一下，在网页当中显示一个宽高各位300像素，边框为红色的正方形
然后我们来如何布局网站首页，首页的样子是这样的
上面一块，作为轮播图
立即学习“前端免费学习笔记（深入）”；
下面一块是导航，然后是内容部分，内容部分分为左右俩块，然后最下面以块，我们来看看是如何制作的，制作网页，我们要有html基础与css的基础，比如id选择器与类选择器等
在使用div+css进行网页布局，我们要使用float，如果有小伙伴们不知道这块的知识，可以去参考【创想鸟】上面的css的视频教程或者文字教程，如上所述，我们要做的例子
nbsp;html>*{margin:0;padding:0;}#div{width:100%;height:300px;background:#f69;}#daohang{width:100%;height:50px;background:#f60;}ul li{list-style:none;float:left;line-height:50px;margin-left:130px;}#bdy{width:100%;height:500px;background:green;}#left{width:30%;height:500px;background:red;float:left;}#right{width:70%;height:500px;background:#ccc;float:left;}#but{width:100%;height:200px;background:#f60;} 轮播图
- 公司首页
- 公司新闻
- 产品介绍
- 加盟领航
- 联系我们
- 在线客服
- 驾车路线图
公司公告公司新闻底部信息
登录后复制
其实代码并没有多少，也很简单，但是你们注意margin与padding 的区别 这个还是很重要的，margin ,边界与边界之间的距离，padding 内容与边界之间的距离，有很多朋友说css里面的属性记不住，对于这块，我觉得你记不住，是因为你练习地少了，只有自己多写多练，我个人觉得这样才会记住！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3253796.html
