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

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

主要知识点：

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

网页设计中字体运用的12个技巧一超实用！

文字、文本排版是日常网站设计工作中经常用到，看似简单的文字，实际上排版也是很有讲究。 1. 了解字体的性格每个字体都有性格，人们比较喜欢一些有特色的东西。那么这些被喜欢的存在什么规则呢，了解你的目标人群，知道你文档的用途，选择一类字体，使用你的目标人群所期望的字体，是你的文档的用途所需要的字体。更多请阅读：网页设计字体篇：字体的性格 2. 避免使用默认字…

江山如画
2019年10月26日 • 网页设计
4.2K00
网页设计

网页设计的任务及网页设计的实现

网页设计的任务，是指设计者要表现的主题和要实现的功能。站点的性质不同，设计的任务也不同。从形式上，可以将站点分为三类。
网页设计的实现可以分为两个部分。第一部分为站点的规划及草图的绘制。第二部分为网页的制作。

江山如画
2020年2月4日
6.5K00
网页设计

web前端工程师需要掌握哪些知识，0基础学习Web前端课程大纲

想从事Web前端开发，需要掌握哪些知识？中文网页设计网今天给大家分享0基础学习Web前端的课程大纲，从入门到精通，帮助你快速成长为Web前端工程师。 Web前端基础课程大纲第一阶段：HTML+CSS 第二阶段：JavaScript基础知识第三阶段：DOM、BOM与事件第四阶段：面向对象与数据交互第五阶段：JavaScript实战第六阶段：数据类型…

江山如画
2018年10月24日
2.7K01
网页制作实战项目二：爱的天空

请加入网页设计交流群：208047327 ，在项目制作过程中有任何问题，可以在群内讨论，或进入本站问答社区互动。【时间要求】 2 学时（ 45 分钟× 2=90 分钟）【上机内容】《爱的天空》主页面及心情日志页面制作【上机目的】 1 、巩固表格布局的方法和技巧 2 、掌握HTML及CSS的使用【上机重点】 1 、表格布局 2 、HTML及CSS的使…

江山如画
2018年4月12日 • 网页设计
10.2K012
网页设计

制作网页，你需要掌握以下知识

推荐：如何制作网页，网站制作流程 HTML（超文本标记语言）：HTML是用于构建网页结构的标记语言。你需要学习HTML标签、属性和元素的使用，了解如何创建网页的基本结构、标题、段落、链接、图像等。推荐学习：Html入门教程（零基础）、跟永哥学HTML5 CSS（层叠样式表）：CSS用于为网页添加样式和布局。你需要学习CSS选择器、属性和值的使用，了解如何设置…

江山如画
2023年10月4日
2.0K00
网页设计

网页设计师必须知道的八大前端核心知识

前端入门核心知识点浏览器 Web标准：结构标准（HTML）、表现标准（CSS）、行为标准（JS）浏览器分为两部分：渲染引擎（即：浏览器内核）、JS 引擎浏览器的工作原理：重绘和重排、V8引擎 App的WebView容器，相当于浏览器，可以内嵌H5网页 HTML5 语义化标签：<header>、<article> 、<foo…

江山如画
2023年1月18日
3.3K00

发表回复

登录后才能评论