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

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

主要知识点：

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

网页制作实战项目六：中融宝企业网站制作

【时间要求】 2 学时（ 45 分钟× 2=90 分钟）【上机内容】中融宝企业网站制作【上机目的】 1 、掌握网页布局的方法和技巧 2 、掌握HTML及CSS的使用 3、掌握表单及表单元素的使用 4、培养团队意识和协作精神【上机重点】 1 、网页布局 2 、表单制作 3 、HTML及CSS的使用【上机难点】 1、网页布局 2、CSS的定义和使用【…

江山如画
2018年5月17日 • 网页设计
14.3K19
网页设计

快速找到海报设计中存在的版式问题

通过海报设计实例，分析海报设计存在的问题，引导如何重新设计修改。从实战中理解所学的设计理论，活学活用。

江山如画
2018年7月9日
19.7K00
网页制作实战项目八：川厨小巷

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

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

第1章网页设计与制作基础

1.1 网站与网页1.2 网页相关的概念1.3 网站制作基本流程1.4 网页设计制作工具

江山如画
2018年3月15日
13.8K02
网页设计

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

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

江山如画
2019年10月22日
12.1K02
网页设计

网站设计的七个步骤

一般初学者经过短暂的学习就可以学会制作网页，于是他们认为网页制作非常简单，就匆匆忙忙制作自己的网站，可是做出来之后与别人一比，才发现自己的网站非常粗糙，这是为什么呢？常言道：“性急吃不了热豆腐”。建立一个网站就像盖一幢大楼一样，它是一个系统工程，有自己特定的工作流程，你只有遵循这个步骤，按部就班地一步步来，才能设计出一个满意的网站。初学网页制作从这里开始 …

江山如画
2020年6月13日
7.9K00

发表回复

登录后才能评论