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

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

主要知识点：

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

网页设计

如何制作自己的网页

要制作网页，建议你要具备的条件：对电脑熟练操作，使用电脑最好在一年以上，对网页设计感兴趣，有较充足的学习时间，熟悉office办公软件。当然，这些不是一定必须的。第一阶段：开始时最好是学些网页编辑软件如：Dreamweaver，hbuiler X，webstorm，Sublime Text 这样可以使您更了解网页制作与运营的原理。最好是结合教程边学习边制…

江山如画
2020年2月18日
5.6K01
网页设计色彩搭配:红色

标准红色的RGB值分别是255、0、0。红色在网络上出现的频率可以说是比较高的，无论是传达吉庆的信息还是商业上的应用，是一种极具有表现力的色彩。红色容易让人联想到太阳、热血、婚姻、喜庆，给人的感觉当然富有吉祥、吉祥、活力、激动、火暴等寓意。如图所示：图红色基调红色的波长最长，穿透力最强，感知度也最高。它经常用来表现太阳、火焰、热血、花卉等，具有积…

江山如画
2021年2月4日 • 网页设计
10.6K02
网页设计师必备的45个配色神器

分享优秀网页设计为大家整理的45个配色神器。

江山如画
2019年10月16日 • 网页设计
12.7K02
制作漂亮网页的窍门

我们浏览任何一个网页，仅从界面上就可以轻易的识别出专业和非专业的区别，那么怎么才能让网页设计的专业、漂亮、好看？这就要涉及到美术的一些基本常识。首先网页风格的形成主要依赖于网页的版式设计，页面的色调处理，还有图片与文字的组合形式等。

江山如画
2019年11月16日 • 网页设计
8.9K00
网页制作实战项目八：川厨小巷

【时间要求】 2 学时（ 45 分钟× 2=90 分钟）【上机内容】川厨小巷【上机目的】 1 、掌握网页布局的方法和技巧 2 、掌握行为的使用 3、掌握javascript(网页特效)的使用 4、培养团队意识和协作精神【上机重点】 1 、网页布局 2 、javascript(网页特效)的使用【上机难点】 javascript(网页特效)的使用【上…

江山如画
2018年5月31日 • 网页设计
13.0K027
网页设计

9组清新活泼的网页设计配色方案

江山如画
2019年11月24日
47.0K05

发表回复

登录后才能评论