CSS的盒子模型案例

原创 2012年03月23日 21:07:01

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选择器,使用的还是挺多的功能,主要是这些东西控制起来不简

单,还是得多练练才行。

效果图


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

论。这是真理!

WEB前端学习 Day 1(DIV+盒子模型+CSS文本+实例)

关于html,用得最多的就是DIV。所以先把DIV学好,搞懂他的一些特性。其次,文字在一个网页里面也是很重要的,所以先学CSS文本。从html下手,那么,DIV是什么? DIV就是一个块,在DIV里...
  • sdanfy
  • sdanfy
  • 2015年10月22日 01:20
  • 2380

css盒子模型实例

.html代码如下: 2 3 4 CSS Box Model 5 6 body 7 { 8 backg...
  • yayun0516
  • yayun0516
  • 2014年11月25日 10:02
  • 1002

CSS盒子模型

我们每天浏览网页,登录各种网站,可是有没有发现,尽管网页数量数不胜数,但是每个网页都是信息罗列的很整齐,页面设置页非常合理。这是怎么做到的呢?难道每个网页都是需要大量人手来管理的吗?这就是本篇博客要讨...
  • u010942465
  • u010942465
  • 2014年09月23日 16:36
  • 1122

深度理解div+css布局嵌套盒子

1. 网页布局概述    网页布局的概念是把即将出现在网页中的所有元素进行定位,而CSS网页排版技术有别于传统的网页排版方法,它将页面首先在整体上使用标记进行分块,然后对每个快进行CSS定位以及...
  • dqn811
  • dqn811
  • 2017年08月19日 17:42
  • 282

网页设计-盒子模型总结

常见行级标签:span,strong,img,input 块级元素包括:div,ul,ol,li,p,dt,dl 标准文档流特点:从上到下,从左到右,输出文档内容,由块级元素和行级元素组成 盒子...
  • Amo_te_ama_me
  • Amo_te_ama_me
  • 2016年06月07日 19:27
  • 1184

《CSS3实战》笔记--弹性盒模型(一)

《CSS3实战》总结 弹性盒模型(Flexible Box Moudle)
  • Lovejulyer
  • Lovejulyer
  • 2016年04月24日 10:37
  • 2768

神奇的CSS盒子模型

CSS盒子模型:就是用来装页面上的元素的矩形区域。CSS中的盒子模型包括IE盒子模型和标准的W3C盒子模型。这两种盒子模型都包含有内容(content)、填充(padding)、边框(border)、...
  • Eavan_Zhou
  • Eavan_Zhou
  • 2016年08月23日 11:23
  • 3361

CSS--两种盒子模型以及border属性

盒模型(box model) 概述: margin(-TopRightBottomLeft), padding(-TRBL),border(TRBL+style|color|width), box...
  • cat_foursi
  • cat_foursi
  • 2017年05月04日 22:05
  • 1900

CSS标准盒子模型

CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素框处理元素内容(element content)、内边距(padding)、边框(border) 和 外边距(marg...
  • zerlinda_c
  • zerlinda_c
  • 2015年12月04日 18:49
  • 1337

简述对CSS的盒子模型理解?

CSS盒子模型也叫做框模型,具备内容(content)、填充(padding)、边框(border)、边界(margin)这些属性。在CSS中,每一个元素都被视为一个框,而每个框都有三个属性: bor...
  • u012396955
  • u012396955
  • 2016年12月29日 13:42
  • 2876
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS的盒子模型案例
举报原因:
原因补充:

(最多只允许输入30个字)