MauerSu
- 浏览: 495315 次
- 性别:
- 来自: 北京
-
文章分类
- 全部博客 (563)
- 工作经验 (12)
- 数据库 (13)
- Servlet (10)
- Struts2 (1)
- Spring (25)
- Eclipse (5)
- Hibernate (5)
- Eclips (8)
- HTTP (7)
- J2EE (21)
- EHcache (1)
- HTML (11)
- 工具插件使用 (20)
- JPA (2)
- 杂谈 (17)
- 数据结构与算法 (3)
- Cloud Foundry (1)
- 安全 (10)
- J2SE (57)
- SQL (9)
- DB2 (6)
- 操作系统 (2)
- 设计模式 (1)
- 版本代码管理工具 (13)
- 面试 (10)
- 代码规范 (3)
- Tomcat (12)
- Ajax (5)
- 异常总结 (11)
- REST (2)
- 云 (2)
- RMI (3)
- SOA (1)
- Oracle (12)
- Javascript (20)
- jquery (7)
- JSP自定义标签 (2)
- 电脑知识 (5)
- 浏览器 (3)
- 正则表达式 (3)
- 建站解决问题 (38)
- 数据库设计 (3)
- git (16)
- log4j (1)
- 每天100行代码 (1)
- socket (0)
- java设计模式 耿祥义著 (0)
- Maven (14)
- ibatis (7)
- bug整理 (2)
- 邮件服务器 (8)
- Linux (32)
- TCP/IP协议 (5)
- java多线程并发 (7)
- IO (1)
- 网页小工具 (2)
- Flash (2)
- 爬虫 (1)
- CSS (6)
- JSON (1)
- 触发器 (1)
- java并发 (12)
- ajaxfileupload (1)
- js验证 (1)
- discuz (2)
- Mysql (14)
- jvm (2)
- MyBatis (10)
- POI (1)
- 金融 (1)
- VMWare (0)
- Redis (4)
- 性能测试 (2)
- PostgreSQL (1)
- 分布式 (2)
- Easy UI (1)
- C (1)
- 加密 (6)
- Node.js (1)
- 事务 (2)
- zookeeper (3)
- Spring MVC (2)
- 动态代理 (3)
- 日志 (2)
- 微信公众号 (2)
- IDEA (1)
- 保存他人遇到的问题 (1)
- webservice (11)
- memcached (3)
- nginx (6)
- 抓包 (1)
- java规范 (1)
- dubbo (3)
- xwiki (1)
- quartz (2)
- 数字证书 (1)
- spi (1)
- 学习编程 (6)
- dom4j (1)
- 计算机系统知识 (2)
- JAVA系统知识 (1)
- rpcf (1)
- 单元测试 (2)
- php (1)
- 内存泄漏cpu100%outofmemery (5)
- zero_copy (2)
- mac (3)
- hive (3)
- 分享资料整理 (0)
- 计算机网络 (1)
- 编写操作系统 (1)
- springboot (1)
最新评论
-
masuweng：
亦论一次OutOfMemoryError的定位与解错 -
变脸小伙：
引用[color=red][/color]百度推广中运用的技术 ...
Spring 3 mvc中返回pdf,json,xml等不同的view -
Vanillva：
不同之处是什么？？
Mybatis中的like查询 -
thrillerzw：
转了。做个有理想的程序员
有理想的程序员必须知道的15件事 -
liujunhui1988：
觉得很有概括力
15 个必须知道的 Java 面试问题（2年工作经验）
源：http://blog.csdn.net/mylovestart/article/details/8607202
评：
标准流/非标准流
流:在现实生活中就是流水,在网页设计中就是指元素(标签)的排列方式
标准流:元素在网页中就像流水,排在前面的元素(标签)内容前面出现,排在后面的元素(标签)内容后面出现
非标准流:当某个元素(标签)脱离了标准流(比如因为相对定位)排列,我们统称为非标准排列
盒子模型
在网页设计中,CSS盒子模型都具备的属性:内容(content),填充(padding),边框(border),边界(margin)
注意margin是指两个元素之间的距离
CSS盒子具有弹性,里面的东西大过盒子本身最多把它撑大,但它不会损坏
下面举个盒子模型的案例
my.css
[css] view plaincopy
body{
/*指定body的宽度,样式,颜色*/
border: 1px solid red;
width: 800px;
height: 1000px;
/*0表示上下0,auto表示左右居中*/
margin:0 auto;
}
.s1{
width: 100px;
height: 100px;
border: 1px solid blue;
margin-top: 10px;
margin-left:10px;
/*padding-top:100px;
padding-left:100px;*/
}
.s1 img{
width:80px;
margin-top:5px;
margin-left:5px;
}
test.html
[html] view plaincopy
<!DOCTYPE html>
<html>
<head>
<title>test.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="my.css" type="text/css"></link>
</head>
<body>
<div class="s1"><img src="images/1.jpg"></div>
</body>
</html>
网页打开如图
再写一个例子,实现多个图片的显示,图片下有链接
my.css
[css] view plaincopy
body{
margin:0px;
padding:0px;
}
.div1{
width:400px;
height: 400px;
border: 1px solid #b4b4b4;
margin-left:100px;
margin-top:20px;
}
/*faceul用于控制显示图片区域的宽度和高度*/
.faceul{
width:350px;
overflow:auto /*原文这里没有说清楚 原文： height:350px; */
border: 1px solid red;
list-style-type: none;
}
/*控制单个图片区域*/
.faceul li{
width: 80px;
height: 90px;
border:1px solid blue;
float: left;/*左浮动*/
margin-left:15px;
margin-top: 15px;
}
.faceul img{
width:60px;
margin-left:5px;
margin-top: 5px;
}
.faceul a{
font-size: 12px;
margin-left:15px;
}
a:link{
text-decoration:none;
color:black;
}
a:hover
{
text-decoration:underline;
color:red;
}
text.html
[html] view plaincopy
<!DOCTYPE html>
<html>
<head>
<title>test.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="my.css" type="text/css"></link>
</head>
<body>
<div class="div1">
<ul class="faceul">
<li><img src="images/1.jpg"/><a href="">嘻哈猴1</a></li>
<li><img src="images/2.jpg"/><a href="">嘻哈猴2</a></li>
<li><img src="images/3.jpg"/><a href="">嘻哈猴3</a></li>
</ul>
</div>
</body>
</html>
网页打开如图
评：
标准流/非标准流
流:在现实生活中就是流水,在网页设计中就是指元素(标签)的排列方式
标准流:元素在网页中就像流水,排在前面的元素(标签)内容前面出现,排在后面的元素(标签)内容后面出现
非标准流:当某个元素(标签)脱离了标准流(比如因为相对定位)排列,我们统称为非标准排列
盒子模型
在网页设计中,CSS盒子模型都具备的属性:内容(content),填充(padding),边框(border),边界(margin)
注意margin是指两个元素之间的距离
CSS盒子具有弹性,里面的东西大过盒子本身最多把它撑大,但它不会损坏
下面举个盒子模型的案例
my.css
[css] view plaincopy
body{
/*指定body的宽度,样式,颜色*/
border: 1px solid red;
width: 800px;
height: 1000px;
/*0表示上下0,auto表示左右居中*/
margin:0 auto;
}
.s1{
width: 100px;
height: 100px;
border: 1px solid blue;
margin-top: 10px;
margin-left:10px;
/*padding-top:100px;
padding-left:100px;*/
}
.s1 img{
width:80px;
margin-top:5px;
margin-left:5px;
}
test.html
[html] view plaincopy
<!DOCTYPE html>
<html>
<head>
<title>test.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="my.css" type="text/css"></link>
</head>
<body>
<div class="s1"><img src="images/1.jpg"></div>
</body>
</html>
网页打开如图
再写一个例子,实现多个图片的显示,图片下有链接
my.css
[css] view plaincopy
body{
margin:0px;
padding:0px;
}
.div1{
width:400px;
height: 400px;
border: 1px solid #b4b4b4;
margin-left:100px;
margin-top:20px;
}
/*faceul用于控制显示图片区域的宽度和高度*/
.faceul{
width:350px;
overflow:auto /*原文这里没有说清楚 原文： height:350px; */
border: 1px solid red;
list-style-type: none;
}
/*控制单个图片区域*/
.faceul li{
width: 80px;
height: 90px;
border:1px solid blue;
float: left;/*左浮动*/
margin-left:15px;
margin-top: 15px;
}
.faceul img{
width:60px;
margin-left:5px;
margin-top: 5px;
}
.faceul a{
font-size: 12px;
margin-left:15px;
}
a:link{
text-decoration:none;
color:black;
}
a:hover
{
text-decoration:underline;
color:red;
}
text.html
[html] view plaincopy
<!DOCTYPE html>
<html>
<head>
<title>test.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="my.css" type="text/css"></link>
</head>
<body>
<div class="div1">
<ul class="faceul">
<li><img src="images/1.jpg"/><a href="">嘻哈猴1</a></li>
<li><img src="images/2.jpg"/><a href="">嘻哈猴2</a></li>
<li><img src="images/3.jpg"/><a href="">嘻哈猴3</a></li>
</ul>
</div>
</body>
</html>
网页打开如图
分享到：
发表评论
-
data:image/png;base64是什么
2014-11-29 14:38 2589源：http://copier.blog.163.com/bl ... -
jquery 中获取所有选中的checkbox的用法
2014-03-31 17:20 555源：http://hi.baidu.com/yy3b2007c ... -
em（倍）与px的区别
2013-12-25 10:20 432源：http://www.cnblogs.com/showke ... -
CSS 外边距合并
2013-12-23 09:54 524源：http://www.w3school.com.c ... -
CSS网页布局教程:绝对定位和相对定位
2013-12-22 23:29 777源：http://www.webjx.com/css/ ... -
li浮动时ul自动适应高度方法
2013-12-22 22:36 1309源：http://blog.micxp.com/index.p ... -
DIV+CSS两种盒子模型
2013-12-22 21:23 468源：http://www.cnblogs.com/re ... -
html中<a>标签_top和_parent的区别
2013-03-27 11:20 2443源：http://blog.sina.com.cn/s/b ... -
js和css控制鼠标略过和点击后的样式
2013-03-11 21:36 2673源：http://blog.csdn.net/xn4545 ... -
js脚本添加书签到收藏夹
2013-03-05 20:06 1056javascript:window.external.addF ... -
30条HTML代码编写指南 for入门者
2013-01-20 14:17 794源：http://www.cnblogs.com/xly12 ...
相关推荐
IE盒子模型和标准W3C盒子模型.盒子模型是CSS中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 IE 盒子模型和标准 W3C 盒子模型。
CSS盒子模型.rarCSS盒子模型.rarCSS盒子模型.rarCSS盒子模型.rarCSS盒子模型.rar
CSS盒子模型结构
H5div盒子模型例子H5div盒子模型例子H5div盒子模型例子H5div盒子模型例子
盒子模型 内外边距盒子模型 内外边距盒子模型 内外边距盒子模型 内外边距盒子模型 内外边距
认识盒子模型; 认识盒子模型;认识盒子模型;盒子模型相关属性; 盒子模型相关属性;盒子模型相关属性;盒子模型相关属性;盒子模型相关属性;盒子模型相关属性; 盒子模型相关属性;盒子模型相关属性;盒子模型相关属性;盒子...
标准资源包和一些模型
CSS盒子模型图片，和大家分享一下，里面详细的介绍了CSS的盒子模型
这是盒子模型的思维导图，便于理解CSS这一核心，通过思维导图我们可以成体系的理解盒子模型，便于学习和记忆
单元二 CSS3样式表端基础前Web单元2-6 框模型（盒子模型）13内边距框模型概述42边框外边距文档结构与标准文档流span为inline元素，若干个inline元素是水平排列的body，ul，li为block元素，它们独占一整行，兄弟之间...
简单比较了一线标准盒子模型与IE盒子模型的不同
其实盒子模型有两种，分别是 IE 盒子模型和标准 W3C 盒子模型。 盒子模型是CSS中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 IE 盒子模型和标准 W3C 盒子模型。他们对盒子模型的解释...
简单的html代码，盒子模型，只是大概的描述下盒子模型的例子
CSS盒子模型的应用
CSS盒子模型教程PPT课件.pptx
CSS+DIV-盒子模型示例.zip
box2使用说明 1、文件引用 需引入必要文件box2.js和box2.css； jquery版本在1.4以上 2、添加方法 ... ...控制面板" panelHeight="" panelWidth="300" showStatus="收缩" panelUrl=""> ...panerTitle：box2添加左上角标题，...
CSS盒子模型教程学习教案.pptx
DNF盒子模型------------------易语言模拟