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

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

主要知识点：

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

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

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

css布局基础：定位练习1

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

设计师必收藏的22个设计素材网站

设计素材，是设计师创意的利剑。中国网页设计对素材门户网站进行整理，给广大设计师推荐国内最好的22个设计素材网站

江山如画
2020年2月23日 • 网页设计
19.3K02
网页设计

品牌logo设计规范及应用-天猫年货节

江山如画
2018年6月20日
15.2K00
网页设计

董文利聊颜色搭配-节日经典配色

网页设计师联盟优秀设计师董文利，董老师系列教程分享，聊颜色，特别是按节日给出的经典配色，牛** 董文利一名靠谱平面设计师/网页设计师/插画设计师。典型80后，爱绘画，玩音乐，不做设计的时候喜欢独自一个人在家附近的江水旁静静的坐上一小会儿。2011年毕业于湖北工业大学艺术设计学院，所修专业是平面设计。

江山如画
2021年2月4日
31.6K00
汉字发展简史：甲骨文-金文-大篆-小篆-隶书-魏碑-草书-楷书-行书

中国具有五千年文字历史，文字中所包涵的精髓，值得每一位设计师学习、继承与探究。设计师需要熟悉各种字体的风格特征，并能灵活运用字体进行编排设计，才能使作品的内容更清晰、更有条理地传达给读者。

江山如画
2023年1月18日 • 网页设计
22.8K01
网页设计

网页设计师应该知道的网页版面设计技巧（精）

今天给大家分享的网页版面设计技巧:减法—分块—加法，非常实用，特别是活动或专题页面设计时可以做参考。

江山如画
2018年2月2日
6.6K01
网站上FLV、MP4格式视频无法播放的原因及解决方法（图）

今天更新网站，把视频文件放到服务器上，用浏览器打开，无法播放视频文件。服务器：windows2003+IIS 问题原因：在IIS服务器上，默认是不支持网站插入并且播放视频功能的。我们需要去配置IIS服务器，以支持相应的视频格式，如：FLV、MP4 在IIS服务器中配置视频格式的方法和步骤 win2003服务器IIS的配置方法打开IIS管理器，在左侧“…

江山如画
2018年5月9日 • 网页设计
9.1K00

发表回复

登录后才能评论