css布局基础：盒子模型练习

孙萍 • 2020年4月4日上午7:57 • 网页设计 • 阅读 3303

主要知识点：

1、盒子在页面的显示=margin+border+padding+width/height

2、每个html元素都可以抽象为一个盒子

效果图：

参考：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css布局基础：盒子模型练习|www.125jz.com</title> <style> * { margin: 0; padding: 0; } /*覆盖默认样式*/ ul li { width: 100px; height: 40px; line-height: 40px; text-align: center; list-style: none; background-color: dimgrey; color: white; border-bottom: 1px solid white; } h3 { height: 50px; line-height: 50px; width: 100px; background-color: #000000; color: wheat; text-align: center; border-bottom: 1px solid #FFFFFF; } ul { display: none; margin-left: 50px; } div:hover ul { display: inline-block; } </style> </head> <body> <div> <h3>家电</h3> <ul> <li>冰箱</li> <li>洗衣机</li> <li>空调</li> </ul> </div> <div> <h3>洗护</h3> <ul> <li>洗衣液</li> <li>牙膏</li> <li>护发素</li> </ul> </div> <div> <h3>衣物</h3> <ul> <li>男装</li> <li>女装</li> <li>童装</li> </ul> </div> </body> </html>

Tips:You can change the code before run.

本文来自投稿，不代表125jz立场，如若转载，请注明出处：http://www.125jz.com/5529.html

border CSS margin padding 盒子

赞 (1)

孙萍管理团队

微信扫一扫

微信扫一扫

支付宝扫一扫

支付宝扫一扫

css布局基础：浮动和清除浮动练习2

上一篇 2020年4月4日上午7:51

css布局基础：定位练习1

下一篇 2020年4月4日上午8:22

网页设计

6个技巧让你的版面设计的脱颖而出！

优秀的版面设计可以让一个普通的文档脱颖而出。本文给大家分享6个让你版面设计脱颖而出的技巧：对齐，聚拢，重复，对比，强调，留白。并通过实例讲解原有版面设计的不足，运用这6个技巧如何改进你的版面设计。

江山如画
2018年10月2日
4.3K00
网页设计

做个企业网站多少钱？

联系中国网页设计站长做网站：QQ 41588872 很多企业要做网站，老板先问的是做个网站多少钱？这个真没有办法直接回答，因为网站的价格跟网站的定位、功能需求、栏目等是息息相关的，你必须描述清楚你的要求才可以给出大致报价。因此，首先要明确你做网站的目的是什么？ 1、展示型网站只是把网站作为一张“网络名片”，让别人知道你有网站，印在名片上，感觉企业高大…

江山如画
2018年9月30日
3.6K01
如何设计有新意的精美网页？

经常制作网页，可是没有新意且面目雷同或似曾相识。如何制作生动、活泼又充满新意的网页？那就好好看看设计大师的作品吧，拟物，创作的灵感来源于生活！

江山如画
2019年10月5日 • 网页设计
3.5K00
网页设计技巧：3步提升网页品质

网页设计中的细节通常是束缚我们想像和内容设置的枷锁。要提升网页设计品质，特别是活动或专题页面的视觉效果，请学习网页设计师必须知道的设计技巧：减法、分块、加法。 1.减法网页设计中原先的细节经常是束缚我们想像和内容设置的枷锁。保留梁柱和承重墙是必需的，这便是我们在网页设计方法中提到的特征。 2.分块在功能划分前，进行网页分区前所要做的信息消化。比如我们希望…

江山如画
2019年2月21日 • 网页设计
4.3K00
网页设计

网站首页的设计

网站首页从根本上说就是全站内容的目录，是一个索引。但只是罗列目录显然是不够的。网站首页设计步骤首先要确定首页的功能模块，即确定需要在首页上实现的主要内容和功能；其次设计首页的版面；最后处理技术上的细节。设计网站主页必须遵循的5点基本原则 1、要简单能吸引浏览者注意的时间是短暂的。你的网站应该下载速度很快。如果你的网站为了给人留下深刻印象而包…

江山如画
2018年3月15日
2.0K00
网页设计

配色就是这么简单！7个在线配色网站推荐

配色对一个网站的来说非常重要，优秀的网页配色不是单纯好看就行了，颜色是有功能和目的的，需要了解颜色背后所能传达的信息、氛围、价值观……当你在面不同的客户时，你要清清楚楚的知道，你应该从什么倾向的颜色入手。网页面向的人群的年龄段、性别比例、消费层次、风格偏好等等，都应该作为选色的考量因素。但网页配色更多的需要大量的实践去体会。简单来说…

江山如画
2018年1月31日
26.3K115

发表回复

登录后才能评论