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盒子模型 深入理解盒子模型(上) 深入理解盒子模型(下) 浮动与定位(上) 浮动与定位(下) 文字与图像(上) 文字与图像(下) CSS导航设计 链接与导航 竖直菜单(上) 竖直菜单(下) 水平菜单 下拉菜单...
。。。
自从1996年CSS1的推出,W3C组织就建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落、列表、标题、图片以及层。 盒模型主要定义四个区域:内容(content)...
CCS学习资料css项目源码和文档资料: css基础.pdf CSS基础(源代码).zip css字体和文本样式.pdf CSS字体和文本样式(源代码).zip ...盒子模型(ppt).pdf 盒子模型(源代码).rar 网页布局基础.rar 页面width属性.pdf
轻松搞定网页设计html+css+javascript ...3、div+css网页布局(盒子模型经典案例、仿sohu首页面布局); 4、javascript深入讲解(js基本语法、数组、js面向对象编程,js系统函数、事件、js dom编程详解、正则表达式)
《CSS高效开发实战——CSS 3、LESS、SASS、Bootstrap、Foundation》分为3部分:第1部分是HTML/CSS基础和CSS 3新特性演示,涵盖盒子模型、浮动布局、属性前缀、选择器、字体、边框、背景、颜色、变换、动画、弹性盒子...
2013笔记轻松搞定网页设计html+css+javascript ...3、div+css网页布局(盒子模型经典案例、仿sohu首页面布局); 4、javascript深入讲解(js基本语法、数组、js面向对象编程,js系统函数、事件、js dom
第3章 深入理解盒子模型 3.1 盒子的内部结构 3.2 边框(border) 3.2.1 实验1——border-style 3.2.2 属性值的简写形式 3.2.3 实验2——属性的缩写形式 3.2.4 实验3——边框与背景 ...
本书详细介绍了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高级应用,css基础知识,盒子模型,排版案例
《CSS设计彻底研究》详细介绍了CSS核心基础、盒子模型等知识,力求把道理和方法讲清楚,采用了“探索式”的讲解方法,对于一个问题,例如标准流、浮动、定位等规律,均通过一系列动手实验,使读者自己就能够非常自然...
多背景(CSS3)凹凸文字导航栏案例文本的装饰CSS 三大特性CSS层叠性CSS继承性CSS优先级CSS特殊性(Specificity)盒子模型(CSS重点)看
10.2 盒子模型 10.3 元素的定位 10.4 定位实例一:轻轻松松给图片签名 10.5 定位实例二:文字阴影效果 第11章 CSS+div布局方法剖析 11.1 CSS排版观念 11.2 固定宽度且居中的版式 ...
盒子模型(W3C模型、怪异模型),选择器,em/px/rem/vh/vw, 回流与重绘,BFC,flex 弹性布局,Grid 网格布局,响应式设计,隐藏页面元素,布局水平居中,文本水平居中,单行多行文本显示,画三角形,Css 性能优化
10.2 盒子模型 10.3 元素的定位 10.4 定位实例一:轻轻松松给图片签名 10.5 定位实例二:文字阴影效果 第11章 CSS+div布局方法剖析 11.1 CSS排版观念 11.2 固定宽度且居中的...
10.2 盒子模型 10.3 元素的定位 10.4 定位实例一:轻轻松松给图片签名 10.5 定位实例二:文字阴影效果 第11章 CSS+div布局方法剖析 11.1 CSS排版观念 11.2 固定宽度且居中的版式 ...
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 定位实例一:轻轻松松给图片...