CSS的盒子模型案例

最新推荐文章于 2022-12-01 12:51:07 发布
最新推荐文章于 2022-12-01 12:51:07 发布
阅读量514 收藏
点赞数 2
文章标签： 数据库

CSS的功能可谓强大，作为程序员，不能只在后台默默无闻，也要到前台爽一把，意思意思，这样自己干活从前台

界面到后台数据库就算是全能了。能给自己省了不少力气，艺多不压身嘛，下面来介绍一下CSS里面的盒子模型。

所谓的盒子模型就是指比如Div嵌套Div这里的Div可以理解成为一个盒子，当然了，不一定是Div嵌套Div，还可能

是Div里面嵌套了别的东西，不管嵌套了什么，都可以把他们叫做盒子模型。

下面来演示一个模仿很多大型网站的一个多用户图像显示的效果，看着简单，其实做起来不是那么的容易。

首先上HTML代码，这个容易

<!DOCTYPE html> <html> <head> <title>box.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="../css/box.css" type="text/css"></link> </head> <body> <div class="div1"> <ul class="faceul"> <li><img src="/HTML/img/cat2.jpg"/><br/><a href="#">小猫</a></li> <li><img src="/HTML/img/cat2.jpg"/><br/><a href="#">小猫</a></li> <li><img src="/HTML/img/cat2.jpg"/><br/><a href="#">小猫</a></li> <li><img src="/HTML/img/cat2.jpg"/><br/><a href="#">小猫</a></li> <li><img src="/HTML/img/cat2.jpg"/><br/><a href="#">小猫</a></li> <li><img src="/HTML/img/cat2.jpg"/><br/><a href="#">小猫</a></li> <li><img src="/HTML/img/cat2.jpg"/><br/><a href="#">小猫</a></li> <li><img src="/HTML/img/cat2.jpg"/><br/><a href="#">小猫</a></li> <li><img src="/HTML/img/cat2.jpg"/><br/><a href="#">小猫</a></li> <li><img src="/HTML/img/cat2.jpg"/><br/><a href="#">小猫</a></li> <li><img src="/HTML/img/cat2.jpg"/><br/><a href="#">小猫</a></li> <li><img src="/HTML/img/cat2.jpg"/><br/><a href="#">小猫</a></li> </ul> </div> </body> </html>
其实就是一个div里面嵌套了ul然后里面有li和img和href，分别受CSS的控制，大头在CSS这里。

body{ margin: 0px; padding: 0px; } /*用于控制显示的位置*/ .div1{ width: 500px; height:300px; border:1px solid #b4b4b4; margin-left: 400px; margin-top: 100px; } /*用于控制显示图片区域的宽度和高度*/ .faceul{ width: 450px; height: 280px; border:1px solid red; margin-left: 0px; list-style-type: none; } /*用于控制单个图片区域大小*/ .faceul li{ widows: 50px; height: 85px; border: 1px solid blue; float: left; margin-left: 5px; margin-top: 5px; } .faceul a{ font-size: 12px; margin-left: 25px; } .faceul img{ width: 90px; margin-top: 2px; } a:LINK { text-decoration: none; color: red; } a:HOVER { text-decoration: underline; color:blue; } a:VISITED { color: gray; }
分别使用了类选择器，父子选择器。然后还有html选择器，使用的还是挺多的功能，主要是这些东西控制起来不简

单，还是得多练练才行。

效果图


我的感触，设计网页不简单。干啥都不容易啊，不能轻易鄙视前台，谁都不容易，不要对你没有做过的事情下结

论。这是真理！

iteye_3606
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css3-盒模型实例.html
08-27
同上
CSS+DIV-盒子模型示例.zip
11-03
**CSS+DIV 盒子模型详解** 在网页设计与开发中，CSS（层叠样式表）和DIV元素是构建布局的基础。"CSS+DIV-盒子模型示例.zip"中的内容显然是为了帮助理解CSS中的盒子模型及其应用。盒子模型是CSS布局的核心概念，它将...
css案例学习之盒子模型
weixin_33778778的博客
11-23 101
定义：每个盒子都有：边界、边框、填充、内容四个属性； 每个属性都包括四个部分：上、右、下、左；这四部分可同时设置，也可分别设置；里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。 案例代码： &lt;!DOCTYPE html PUBliC "-//W3C//DTD XHTML...
一个实例带你透析CSS盒子模型
Rookie
08-29 893
文章目录CSS盒子模型简介盒子模型与width/height之间的关系一个玩转margin的实例结语 CSS盒子模型简介 当对一个文档进行布局（lay out）的时候，将所有元素表示为一个个矩形的盒子（box）。每个盒子由四个部分（或称区域）组成。如图，与盒子的四个组成区域相对应，每个盒子有四个边界：内容边界 content、内边距边界 padding、边框边界 border、外边框边界 margin。 这是chrome开发者工具element面板中style部分的一个盒子模型图，如果有对chrome开发
新浪导航案例
绿色水杯
08-22 510
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { ma
css盒子模型实例
张亚运的专栏
11-25 2185
.html代码如下： 2 3 4 CSS Box Model 5 6 body 7 { 8 background: #333; 9 } 10 div 11 { 12 height: 240px; 13 w
CSS盒子模型教程PPT课件.pptx
10-10
CSS 盒子模型教程 CSS 盒子模型是指浏览器对网页中的各个元素...盒子模型的案例包括调整网页中的对齐方式、理解盒子的各个属性、理解空格的影响、理解 body 标记的 margin 属性、如何利用 CSS 控制页面特定的元素等。
Css盒子模型入门指导
12-17
**什么是CSS盒子模型？** CSS盒子模型由四个主要部分组成： 1. **内容（Content）**：这是盒子内的实际内容，如文字、图像等。 2. **内填充（Padding）**：位于内容区域和边框之间的空间，用来增加元素内部的距离，...
CSS盒子模型教程PPT学习教案.pptx
10-01
**CSS盒子模型详解** 在网页设计中，CSS（Cascading Style Sheets）是用于控制页面元素样式的关键技术。其中，盒子模型（Box Model）是理解CSS布局基础的重要概念。本教程将详细介绍盒子模型的各个方面，帮助你更好...
CSS补充案例之第四章盒子模型.docx
11-19
【CSS 盒子模型】 CSS 盒子模型是网页布局中的核心概念，它定义了元素如何占据空间并与其他元素交互。在本案例中，我们主要关注边框（border）、内边距（padding）和背景颜色（background-color）的使用。 案例4-1...
盒子模型代码
10-09
简单的html代码，盒子模型，只是大概的描述下盒子模型的例子
css盒子模型详解加示例
09-25
主要介绍了css盒子模型详解加示例,W3C组织建议把所有的网页上的对象都放在一个盒子中,在定义盒子宽高的时候，要考虑到内填充，边框，边界的存在,这里讲了一个盒子的构成、CSS盒子模型的属性，还有一些示例,需要的朋友可以参考下
H5div盒子模型例子
04-27
H5div盒子模型例子H5div盒子模型例子H5div盒子模型例子H5div盒子模型例子
css之盒子模型案例
态度决定高度A=X+Y+Z
05-22 1171
/* 盒子模型: 盒子模型就是把一个html边框比作成了一个盒子的边框，盒子模型要做用于操作数据与边框之间的距离或者 是边框与边框之间的距离。 盒子模型主要是用于操作内边距(padding)与外边距（margin） */ div{ border-style:solid; width:100px; height:100px; /* 内边距 */ padding
实例-CSS盒子模型演示
qq_45348373的博客
12-01 352
最近呢就是有朋友问我css盒子模型的演示，所以今天我将给大家讲一讲盒子模型。然后呢，我会很系统的将这一课讲完，内容比较多也希望各位能够仔细观看，看懂了，实操一下也就会了。
css盒子模型及实例
龙行天下 欢迎来我的地盘
10-24 817
1.概述css盒子模型 1>先看看w3c的概述 2>其实css每个元素都是一个盒子（盒模型） 2.css盒子模型种类 1>w3c标准模型—————————>element空间宽度 = content内容 + border + padding + margin 2>IE传统模型（IE6-）—————>element = content = content(border + paddin
CSS笔记4-盒子模型案例
PIUYIXIU的博客
10-27 468
案例一： 鼠标事件+背景图片+边框格式设置 <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> li{ list-style-type:none; } body,ul,li,h1{ margin:0; padding:0; } div ul li a{ text-decorat
css盒子模型及其实战案例（下）
阿牛的博客
02-04 1588
今天总结盒子模型剩下的一点内容，包括圆角边框，盒子阴影，文字阴影
html5盒子模型案例
最新发布
09-15
下面是一个简单的HTML5盒子模型的案例： ```html <!DOCTYPE html> .box { width: 200px; height: 200px; border: 1px solid black; padding: 20px; margin: 20px; } <p>This is some content inside ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值