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

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

主要知识点：

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

界面设计的字体规范：常用字体，字号，字体颜色及间距对齐

今天125网页设计给大家分享界面设计中常用的字体，字号，字体颜色及间距对齐的一些小经验，通过设计经验可以帮助你做出更好的版式，相信大家会有收获。一、常见界面设计中字体使用问题 1.字体样式太多，导致页面杂乱 2.使用的字体不易识别 3.字体样式和内容的气氛或规范不匹配二.界面设计中文字的使用规则移动端常规字体 IOS:常选择华文黑体或者冬青黑体，尤其是…

江山如画
2018年12月29日 • 网页设计
10.0K00
网页设计

网页制作实战项目九：飘城旅行社（分步教程2）

网页制作实战项目九：飘城旅行社（分步教程）精在上一课中，我们学习了实战项目九-首页的制作，今天来实现其他主要页面：旅游资讯。练习一：PC端固定布局地址：http://www.125jz.com/wp-content/demo/20190113demo1.html 练习二：流体移动布局地址：马上上线练习三：兼容响应式布局地址：马上上线 1.导航下…

江山如画
2019年1月22日
13.0K05
网站上FLV、MP4格式视频无法播放的原因及解决方法（图）

今天更新网站，把视频文件放到服务器上，用浏览器打开，无法播放视频文件。服务器：windows2003+IIS 问题原因：在IIS服务器上，默认是不支持网站插入并且播放视频功能的。我们需要去配置IIS服务器，以支持相应的视频格式，如：FLV、MP4 在IIS服务器中配置视频格式的方法和步骤 win2003服务器IIS的配置方法打开IIS管理器，在左侧“…

江山如画
2018年5月9日 • 网页设计
9.9K00
网页设计

2023新年福利第二弹：38个设计师必备技巧（进阶）

江山如画
2023年1月21日
15.5K01
网页设计

5个制作网站必须思考的问题，解决好这些才能提高访问量

决定做一个网站前，站长们需要深入思考这5大问题。如果你能妥善地解决好这些问题，那你的网站一定会吸引用户，访问量大增。

江山如画
2018年2月28日
5.5K01
网页设计

从零开始做APP界面设计三：字体选择字号及配色方案

上一篇《从零开始做APP界面设计二：App界面设计尺寸》我们学习了app界面设计尺寸规范，今天中国网页设计给大家分享App界面设计中字体的选用、字号设置及配色方案。 App界面设计标准色: 背景用色、文字用色、图标用色 App界面设计标准字： IOS:中文使用苹方字体英文和数字使用Helvetica Android:中文使用思源黑体英文和数字使用Rob…

江山如画
2018年4月22日
13.6K02

发表回复

登录后才能评论