css布局基础:盒子模型练习 孙萍 • 2020年4月4日 上午7:57 • 网页设计 • 阅读 6845 主要知识点: 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%的人还看了以下文章 网页设计 网页设计色彩搭配:蓝色 蓝色是三原色之一,波长过短,纯正的蓝色RGB值分别为0、0、255,给人一种平静、平和、美丽、文静、安详与洁净的感觉。 蓝色与红、橙色相反,是典型的冷色,也是常见的后退色和收缩色,表示沉静、冷淡、理智、高深、透明等含义。 1. 蓝色性格特点 蓝色博大、永恒、平静、理智、纯净、遥远,就像辽阔的天空和大海。我国少数民族多使用靛蓝、普蓝作染料,因此,靛蓝、普蓝似乎… 江山如画 2021年2月4日 28.1K00 网页制作实战项目八:川厨小巷 【时间要求】 2 学时( 45 分钟× 2=90 分钟) 【上机内容】 川厨小巷 【上机目的】 1 、掌握网页布局的方法和技巧 2 、掌握行为的使用 3、掌握javascript(网页特效)的使用 4、培养团队意识和协作精神 【上机重点】 1 、网页布局 2 、javascript(网页特效)的使用 【上机难点】 javascript(网页特效)的使用 【上… 江山如画 2018年5月31日 • 网页设计 20.3K027 网页设计 第2章HTML基础 HTML的基本结构 HTML语言的语法 HTML语言的常用标记 HTML 5新增结构元素 江山如画 2018年3月16日 14.5K00 网页设计心得-图片的选择和处理 网页设计师心得-图片的选择和处理,教给你如何根据色彩角度、网页角度、摄影角度来选图,并通过几个简单的案例教会你如何处理图片。 江山如画 2022年3月19日 • 网页设计 3.4K00 网页设计 做个企业网站多少钱? 联系中国网页设计站长做网站:QQ 41588872 很多企业要做网站,老板先问的是做个网站多少钱? 这个真没有办法直接回答,因为网站的价格跟网站的定位、功能需求、栏目等是息息相关的,你必须描述清楚你的要求才可以给出大致报价。 因此,首先要明确你做网站的目的是什么? 1、展示型网站 只是把网站作为一张“网络名片”,让别人知道你有网站,印在名片上,感觉企业高大… 江山如画 2018年9月30日 18.2K01 网页设计字体篇:字体的性格 优秀的字体远在读者理解句意之前就通过字形与笔画风格将情感传达给读者,传情达意正是字体设计的意义所在 江山如画 2019年10月23日 • 网页设计 12.6K00 发表回复 请登录后评论...登录后才能评论 提交