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

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

主要知识点：

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

汉字发展简史：甲骨文-金文-大篆-小篆-隶书-魏碑-草书-楷书-行书

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

江山如画
2023年1月18日 • 网页设计
22.7K01
网页设计字体篇：字体的性格

优秀的字体远在读者理解句意之前就通过字形与笔画风格将情感传达给读者，传情达意正是字体设计的意义所在

江山如画
2019年10月23日 • 网页设计
10.0K00
网页设计

网页制作实战项目九：飘城旅行社（分步教程2）

网页制作实战项目九：飘城旅行社（分步教程）精在上一课中，我们学习了实战项目九-首页的制作，今天来实现其他主要页面：旅游资讯。练习一：PC端固定布局地址：http://www.125jz.com/wp-content/demo/20190113demo1.html 练习二：流体移动布局地址：马上上线练习三：兼容响应式布局地址：马上上线 1.导航下…

江山如画
2019年1月22日
11.3K05
9个排版设计原则！ – 优设小课堂

江山如画
2020年4月4日 • 网页设计
14.9K00
网页设计

网页制作实战项目四：使用DIV+CSS制作网页

【时间要求】 2 学时（ 45 分钟× 2=90 分钟）【上机内容】使用DIV+CSS制作网页——个人站点制作【上机目的】 1、掌握CSS盒模型 2、掌握网页元素的定位 3、掌握DIV+CSS布局的方法和技巧【上机重点】 1 、网页元素的定位 2、DIV+CSS布局的方法和技巧【上机难点】从表格布局向DIV+CSS布局的转变【上机教学方法】 1…

江山如画
2018年5月3日
19.5K08
福利！13款免费商用卡通字体推荐（已打包）

本期推荐的是免费商用的卡通体，此类字体非常适合运用在可爱活泼、轻松休闲的设计中，会有不俗的表现力，常常能达到“画龙点睛”的效果。部分作品展示：整个字形向上倾斜，给人一种积极向上的感觉，而且横折和竖折的笔画都有弧线，没那么死板，无论是笔画结构，还是笔画粗细，都是灵活的，是一例轻松快乐风格的字体。字形笔画去除了折笔的弧形，换之以平直的笔画，竖弯钩转为竖折，…

江山如画
2023年1月28日 • 网页设计
13.2K00

发表回复

登录后才能评论