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

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

主要知识点：

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

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

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

江山如画
2018年5月17日 • 网页设计
12.4K19
配色如此简单-最实用的配色教程

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

江山如画
2019年10月31日 • 网页设计
9.5K00
网页设计

左侧固定，右侧自适应布局的两种实现方法

左侧固定，右侧自适应布局效果图很多页面，特别是网站后台管理页面，不少采用左右布局。本文讲解左侧固定，右侧自适应布局的两种实现方法。左侧固定200px宽，右侧自适应，中间间隔10px。 HTML: <div class=”parent”> <div class=”side”></div> <div class=”m…

江山如画
2019年3月10日
9.3K01
网页设计色彩搭配:红色

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

江山如画
2021年2月4日 • 网页设计
10.8K02
网页设计心得-图片的选择和处理

网页设计师心得-图片的选择和处理，教给你如何根据色彩角度、网页角度、摄影角度来选图，并通过几个简单的案例教会你如何处理图片。

江山如画
2022年3月19日 • 网页设计
2.2K00
网页设计

平面排版 CRAP原则-人人都可能成为设计师

CRAP是四项基本设计原理，包括对比（Contrast）、重复（Repetition）、对齐（Alignment）、亲密（Proximity）对比（Contrast）避免页面上的元素太过相似、如果元素不相同，就让它们截然不同元素包含字体、颜色、大小、线宽、形状、空间等根本目的：增强页面效果，　有助于信息的组织如何实现：通过字体选择、线宽、颜色、形状…

江山如画
2018年5月8日
18.1K111

发表回复

登录后才能评论