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

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

主要知识点：

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

网页设计

接到一个网站开发项目怎么去完成？—网站的开发流程

接到一个网站开发项目怎么去完成？今天125建站网给大家讲解开发一个网站有哪些流程，学过软件工程中瀑布模型的童鞋可能感觉会很熟悉。网站的开发流程【网站需求分析】⇓【制定网站建设方案】⇓【网站制作计划】⇓【页面设计和程序开发】⇓【网站测试】⇓【发布网站】⇓【推广和维护】网站需求分析：不管是对个人网站还是商业网站，网站需求分析都是很重要的。比如要为一个公…

江山如画
2018年1月29日
4.3K014
配色如此简单-最实用的配色教程

本文主要介绍实战中配色方法和设计大师常用的快速配色技巧，希望大家能活学活用。

江山如画
2019年10月31日 • 网页设计
6.3K00
这篇设计配色干货，0基础也能让你做出好作品

配色一直是设计圈子里的热门话题，是我们作为设计师必须要掌握的一门重要技能，通过色彩可以向用户传递不同层面的视觉信息，所以不同的色彩也都被人们赋予了不同的含义。比如：红色、橙色、黄色等暖色系的颜色能表现出温暖、热闹；而蓝色、淡蓝色等冷色系颜色，会给人一种凉爽、寒冷的感觉。将色彩属性与设计作品有效地相互结合，往往能做到 1+1>2 的视觉效果。色彩的特征…

江山如画
2020年2月18日 • 网页设计
5.3K01
网页设计

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

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

江山如画
2019年1月22日
7.6K05
网页设计

第2章HTML基础

HTML的基本结构
HTML语言的语法
HTML语言的常用标记
HTML 5新增结构元素

江山如画
2018年3月16日
5.2K00
网页设计

web开发技术课程项目考查

考查目的一、专业能力目标 ①检验学生对《web开发技术》课程的理解与掌握情况 ②锻炼学生运用所学知识解决实际问题，进行项目开发的能力。 ③掌握web项目的开发流程，网站建设的技术和方法，具备一定的网站设计能力及网页制作能力。 ④培养学生网站规划建设、发布，以及管理维护的基本技能。 ⑤培养学生掌握项目开发的的思想和方法，树立严肃认真的工作作风。二、技能目标…

江山如画
2018年6月1日
5.9K04

发表回复

登录后才能评论