css布局基础:盒子模型练习 孙萍 • 2020年4月4日 上午7:57 • 网页设计 • 阅读 6312 主要知识点: 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 borderCSSmarginpadding盒子 赞 (1) 孙萍管理团队 0 0 打赏 微信扫一扫 支付宝扫一扫 生成海报 css布局基础:浮动和清除浮动练习2 上一篇 2020年4月4日 上午7:51 css布局基础:定位练习1 下一篇 2020年4月4日 上午8:22 99%的人还看了以下文章 网页设计 精选9组网页配色方案-寻找灵感 江山如画 2019年11月24日 42.9K00 网页设计 品牌logo设计规范及应用-天猫年货节 江山如画 2018年6月20日 17.9K00 怎么知道哪些字体是侵权的?免费可商用字体有哪些?免费字体打包下载 字体版权一直是很多设计师的雷区,一不小心就容易触犯。125建设网和大家一起来弄清楚:免费可商用字体到底有哪些?怎么知道哪些字体是侵权的? 怎么知道哪些字体是侵权的? 可以在360查字体:https://fonts.safe.360.cn网站上检查自己电脑上哪些字体是免费可商用的,哪些是商用需要授权的。 免费可商用字体有哪些? 1. 思源黑体(推荐) 思源黑体… 江山如画 2023年1月18日 • 网页设计 8.9K00 网页设计 6个技巧让你的版面设计的脱颖而出! 优秀的版面设计可以让一个普通的文档脱颖而出。本文给大家分享6个让你版面设计脱颖而出的技巧:对齐,聚拢,重复,对比,强调,留白。并通过实例讲解原有版面设计的不足,运用这6个技巧如何改进你的版面设计。 江山如画 2018年10月2日 11.3K00 网页设计 第1章 网页设计与制作基础 1.1 网站与网页1.2 网页相关的概念1.3 网站制作基本流程1.4 网页设计制作工具 江山如画 2018年3月15日 16.1K02 网页设计 网页上标准的广告尺寸规格大全 网页中的标准网页广告尺寸规格 一、120*120,这种广告规格适用于产品或新闻照片展示。 二、120*60,这种广告规格主要用于做LOGO使用。 三、120*90,主要应用于产品演示或大型LOGO。 四、125*125,这种规格适于表现照片效果的图像广告。 五、234*60,这种规格适用于框架或左右形式主页的广告链接。 六、392*72,主要用于有较多图片展… 江山如画 2020年3月11日 15.9K05 发表回复 请登录后评论...登录后才能评论 提交