`
BradyZhu
  • 浏览: 245500 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

CSS的盒子模型案例

 
阅读更多

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

单,还是得多练练才行。

效果图


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

论。这是真理!

分享到:
评论

相关推荐

    CSS+DIV-盒子模型示例.zip

    CSS+DIV-盒子模型示例.zip

    css各种高级实例+源码

    深入CSS盒子模型 深入理解盒子模型(上) 深入理解盒子模型(下) 浮动与定位(上) 浮动与定位(下) 文字与图像(上) 文字与图像(下) CSS导航设计 链接与导航 竖直菜单(上) 竖直菜单(下) 水平菜单 下拉菜单...

    CSS补充案例之第四章盒子模型.docx

    。。。

    CSS教程:通过实例学习和理解CSS盒模型

    自从1996年CSS1的推出,W3C组织就建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落、列表、标题、图片以及层。 盒模型主要定义四个区域:内容(content)...

    CCS学习资料css项目源码和文档资料.zip

    CCS学习资料css项目源码和文档资料: css基础.pdf CSS基础(源代码).zip css字体和文本样式.pdf CSS字体和文本样式(源代码).zip ...盒子模型(ppt).pdf 盒子模型(源代码).rar 网页布局基础.rar 页面width属性.pdf

    韩顺平轻松搞定网页设计(html.css.js)(完整版)

    轻松搞定网页设计html+css+javascript ...3、div+css网页布局(盒子模型经典案例、仿sohu首页面布局); 4、javascript深入讲解(js基本语法、数组、js面向对象编程,js系统函数、事件、js dom编程详解、正则表达式)

    CSS高效开发实战——CSS 3、LESS、SASS、Bootstrap、Foundation

    《CSS高效开发实战——CSS 3、LESS、SASS、Bootstrap、Foundation》分为3部分:第1部分是HTML/CSS基础和CSS 3新特性演示,涵盖盒子模型、浮动布局、属性前缀、选择器、字体、边框、背景、颜色、变换、动画、弹性盒子...

    韩顺平html+css笔记

    2013笔记轻松搞定网页设计html+css+javascript ...3、div+css网页布局(盒子模型经典案例、仿sohu首页面布局); 4、javascript深入讲解(js基本语法、数组、js面向对象编程,js系统函数、事件、js dom

    《CSS设计彻底研究》光盘源码

    第3章 深入理解盒子模型  3.1 盒子的内部结构   3.2 边框(border)   3.2.1 实验1——border-style  3.2.2 属性值的简写形式   3.2.3 实验2——属性的缩写形式   3.2.4 实验3——边框与背景   ...

    css彻底设计研究css.pdf+源码

    本书详细介绍了CSS核心基础、盒子模型等知识,力求把道理和方法讲清楚,采用了“探索式”的讲解方法,对于一个问题,例如标准流、浮动、定位等规律,均通过一系列动手实验,使读者自己就能够非常自然地得出结论,使...

    css设计彻底研究 源代码

    第3章 深入理解盒子模型  3.1 盒子的内部结构 3.2 边框(border) 3.2.1 实验1——border-style 3.2.2 属性值的简写形式 3.2.3 实验2——属性的缩写形式 3.2.4 实验3——边框与背景 3.3 内边距...

    CSS+div基础知识的ppt文档

    css高级应用,css基础知识,盒子模型,排版案例

    《CSS设计彻底研究》【中文PDF+源代码】

    《CSS设计彻底研究》详细介绍了CSS核心基础、盒子模型等知识,力求把道理和方法讲清楚,采用了“探索式”的讲解方法,对于一个问题,例如标准流、浮动、定位等规律,均通过一系列动手实验,使读者自己就能够非常自然...

    CSS3笔记1

    多背景(CSS3)凹凸文字导航栏案例文本的装饰CSS 三大特性CSS层叠性CSS继承性CSS优先级CSS特殊性(Specificity)盒子模型(CSS重点)看

    《精通CSS+DIV网页样式与布局》光盘源码

     10.2 盒子模型  10.3 元素的定位   10.4 定位实例一:轻轻松松给图片签名   10.5 定位实例二:文字阴影效果   第11章 CSS+div布局方法剖析   11.1 CSS排版观念   11.2 固定宽度且居中的版式  ...

    CSS 面试思维导图合集(包含案例)

    盒子模型(W3C模型、怪异模型),选择器,em/px/rem/vh/vw, 回流与重绘,BFC,flex 弹性布局,Grid 网格布局,响应式设计,隐藏页面元素,布局水平居中,文本水平居中,单行多行文本显示,画三角形,Css 性能优化

    精通CSS.DIV.网页样式与布局 源码

     10.2 盒子模型  10.3 元素的定位   10.4 定位实例一:轻轻松松给图片签名   10.5 定位实例二:文字阴影效果   第11章 CSS+div布局方法剖析   11.1 CSS排版观念   11.2 固定宽度且居中的...

    精通CSS+DIV网页样式与布局

     10.2 盒子模型  10.3 元素的定位   10.4 定位实例一:轻轻松松给图片签名   10.5 定位实例二:文字阴影效果   第11章 CSS+div布局方法剖析   11.1 CSS排版观念   11.2 固定宽度且居中的版式  ...

    精通CSS+DIV网页样式与布局视频教材

    10.2.1 盒子模型的概念 10.2.2 border 10.2.3 padding 10.2.4 margin 10.3 元素的定位 10.3.1 float定位 10.3.2 position定位 10.3.3 z-index空间位置 10.4 定位实例一:轻轻松松给图片...

Global site tag (gtag.js) - Google Analytics