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

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

主要知识点：

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

web开发技术项目评分标准

是否符合网站建设规范（10分）包括文件名、目录、代码、选择器命名、有无适当的注释等。主题突出（10分）全站围绕一个主题及其周边内容进行建设，不存在和主题不相关的其他信息。内容丰富、完整，工作量饱满（20分）内容健康、积极向上，具有可读性、艺术性。设计思路清晰，明确表达设计意图。网站页面数量要求包含至少一个主页和四个或以上的二级页面、三级页面。每页页…

江山如画
网页设计 2018年6月1日
4.9K05
设计师必收藏的22个设计素材网站

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

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

网页设计中的字体选择以及常用字号

网页设计中的字体中文：宋体，微软雅黑，方正系列（无状态）英文： Helvetica：被评为设计师最爱的字体，Realist风格，简洁现代的线条，非常受到追捧。在Mac下面被认为是最佳的网页字体。 Arial: 和Helvetica非常像，细节上比如R和G有小小差别。如果字号太小，文字太多，看起来会有些累眼。 Lucida Grande：是Mac OS U…

江山如画
2019年10月22日
6.8K02
9个实用小技巧快速提高版面设计质量

江山如画
2019年11月8日 • 网页设计
11.6K00
编程开发

opencv 图像旋转 cv2.rotate和np.rot90案例精讲

OpenCV 方法 OpenCV 中带有一个旋转图像的函数 cv2.rotate rotate(src, rotateCode[, dst]) -> dst参数：src：输入图像rotateCode：旋转方式1、cv2.ROTATE_90_CLOCKWISE：顺时针 90 度2、cv2.ROTATE_180：顺时针 180 度3、cv2.ROTATE_…

江山如画
2022年12月1日
3.6K00
网页设计

网站图片、文件防盗链方法大全

一般盗链分为文件盗链和图片盗链两种。如果您网站上的音乐、视频、flash、压缩包文件、图片等，被其它网站大量的复制、盗用，会对自己网站产生大量的无效流量并对网站服务器造成很大的压力，所以很多网站都会设置防盗链,防止别人盗用自己网站的图片、音视频或下载文件资源。今天中国网页设计给大家分享网站图片、文件防盗链的方法，对网站站长有很大帮助。 1、Windows主…

江山如画
2018年2月26日
4.7K01

发表回复

登录后才能评论