【HTML＋CSS网页设计与布局 从入门到精通】第13章-块元素div和内联元素span格式布局
2024-06-05 05:40:24
目录
块元素背景，边框，颜色等布局
块元素ID选择器
另一个例子
块元素中的图片
盒子模型的演示
块级元素中的文本格式
块级元素div与内联元素span的对比
两个行内元素的margin
两个块级元素的margin
子div
span的margin设置为负数
盒子模型的演示
块元素背景，边框，颜色等布局
<html>
<head>
<title>border-style</title>
<style type="text/css">
div{border-width:6px;border-color:#000000;margin:20px; padding:5px;background-color:#FFFFCC;
}
</style>
</head><body><div style="border-style:dashed">The border-style of dashed.</div> <div style="border-style:dotted">The border-style of dotted.</div><div style="border-style:double">The border-style of double.</div><div style="border-style:groove">The border-style of groove.</div><div style="border-style:inset">The border-style of inset.</div><div style="border-style:outset">The border-style of outset.</div><div style="border-style:ridge">The border-style of ridge.</div><div style="border-style:solid">The border-style of solid.</div>
</body>
</html>
块元素ID选择器
<html>
<head>
<style type="text/css">
#outerBox{width:200px;height:100px;border:2px black solid;border-left:4px green dashed;border-color:red gray orange blue; /*上 右 下 左*/border-right-color:purple;
}
</style>
</head>
<body><div id="outerBox"></div>
</body>
另一个例子
<html>
<head>
<style type="text/css">
#outerBox{width:128px;height:128px;border:10px black dashed;background:silver;
}
</style>
</head>
<body><div id="outerBox"></div>
</body>
块元素中的图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>演示</title>
<style type="text/css">
#box{width:128px;height:128px;padding:0 20px 10px; /*上 左右 下*/padding-left:10px;border:10px gray dashed;
}#box img{
border:1px blue solid;
} </style>
</head><body><div id="box"><img src="cup.gif"></img></div>
</body></html>
盒子模型的演示
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>盒子模型的演示</title><style type="text/css">body{margin:0 0 0 0;font-family:宋体;font-size:12px;}ul { background: #ddd; margin: 15px 15px 15px 15px;padding: 5px 5px 5px 5px;/* 没有设置边框 */}li { color: black; /* 黑色文本 */ background: #aaa; /* 浅灰色背景 */margin: 20px 20px 20px 20px; /* 左侧外边距为0，其余为20像素*/padding: 10px 0px 10px 10px; /* 右侧内边距为0，其余10像素 */list-style: none /* 取消项目符号 *//* 未设置边框 */}li.withborder {border-style: dashed;border-width: 5px; /* 设置边框为2像素 */border-color: black;margin-top:20px； }</style></head><body><ul><li>第1个列表的第1个项目内容</li> <li class="withborder">第1个列表的第2个项目内容，内容更长一些，目的是演示自动折行的效果。</li></ul><ul><li>第2个列表的第1个项目内容</li><li class="withborder">第2个列表的第2个项目内容，内容更长一些，目的是演示自动折行的效果。</li></ul></body>
</html>块级元素中的文本格式
<html>
<head>
<title>div 标记范例</title>
<style type="text/css">
div{font-size:18px; /* 字号大小 */font-weight:bold; /* 字体粗细 */font-family:Arial; /* 字体 */color:#FFFF00; /* 颜色 */background-color:#0000FF; /* 背景颜色 */text-align:center; /* 对齐方式 */width:300px; /* 块宽度 */height:100px; /* 块高度 */
}
</style>
</head>
<body><div>这是一个div标记</div>
</body>
</html>
块级元素div与内联元素span的对比
<html>
<head>
<title>div与span的区别</title>
</head>
<body><p>div标记不同行：</p><div><img src="cup.gif" border="0"></div><div><img src="cup.gif" border="0"></div><div><img src="cup.gif" border="0"></div><p>span标记同一行：</p><span><img src="cup.gif" border="0"></span><span><img src="cup.gif" border="0"></span><span><img src="cup.gif" border="0"></span>
</body>
</html>
两个行内元素的margin
<html>
<head>
<title>两个行内元素的margin</title>
<style type="text/css">span{background-color:#a2d2ff;text-align:center;font-family:Arial, Helvetica, sans-serif;font-size:12px;padding:10px;
}
span.left{margin-right:30px;background-color:#a9d6ff;
}
span.right{margin-left:40px;background-color:#eeb0b0;
}</style>
</head>
<body><span class="left">行内元素1</span><span class="right">行内元素2</span>
</body>
</html>
两个块级元素的margin
<html>
<head>
<title>两个块级元素的margin</title>
<style type="text/css">
<!--
div{background-color:#a2d2ff;text-align:center;font-family:Arial, Helvetica, sans-serif;font-size:12px;padding:10px;
}
-->
</style>
</head>
<body><div style="margin-bottom:50px;">块元素1</div><div style="margin-top:30px;">块元素2</div>
</body>
</html>
子div
<head>
<title>父子块的margin</title>
<style type="text/css">
<!--
div.father{ /* 父div */background-color:#fffebb;text-align:center;font-family:Arial, Helvetica, sans-serif;font-size:12px;padding:10px;border:1px solid #000000;height:40px; /* 设置父div的高度 */
}
div.son{ /* 子div */background-color:#a2d2ff;margin-top:30px;margin-bottom:0px;padding:15px;border:1px dashed #004993;
}
-->
</style>
</head>
<body><div class="father"><div class="son">子div</div></div>
</body>
span的margin设置为负数
<head>
<title>margin设置为负数</title>
<style type="text/css">
span{text-align:center;font-family:Arial, Helvetica, sans-serif;font-size:12px;padding:10px;border:1px dashed #000000;
}
span.left{margin-right:30px;background-color:#a9d6ff;
}
span.right{margin-left:-53px; /* 设置为负数 */background-color:#eeb0b0;
}
</style>
</head>
<body><span class="left">行内元素1</span><span class="right">行内元素2</span>
</body>
盒子模型的演示
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>盒子模型的演示</title>
<style type="text/css">
body{margin:0 0 0 0;font-family:宋体;
}
ul { background: #ddd; margin: 15px;padding: 10px;font-size:12px;line-height:14px;
}
h1 { background: #ddd; margin: 15px;padding: 10px;height:30px;font-size:25px;
}
p,li { color: black; /* 黑色文本 */ background: #aaa; /* 浅灰色背景 */margin: 20px 20px 20px 20px; /* 左侧外边距为0，其余为20像素*/padding: 10px 0px 10px 10px; /* 右侧内边距为0，其余10像素 */list-style: none /* 取消项目符号 */
}
.withborder {border-style: dashed;border-width: 5px; /* 设置边框为2像素 */border-color: black;margin-top:20px;
}
</style>
</head><body><h1>标准流中的盒子模型演示</h1><ul><li>第1个项目内容</li> <li class="withborder">第2个项目内容，第2个项目内容，第2个项目内容，第2个项目内容，第2个项目内容，第2个项目内容。</li></ul></body>
</html>【HTML＋CSS网页设计与布局 从入门到精通】第13章-块元素div和内联元素span格式布局相关推荐
- [19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器...
一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...
- html分类页面,CSS网页设计 把HTML标记分类
p.h1.或div等元素常常称为块级元素,这些元素显示为一块内容:Strong,span等元素称为行内元素,它们的内容显示在行中,即"行内框".(可以使用display=block ...
- CSS网页布局心得（样式优先级，块级元素，内联元素，display，position，float）
文章涉及的知识点:CSS,样式优先级,块级元素,内联元素,display,position,float 使用top;right; bottom;right时,要注意是对于哪个元素进行定位,要保证定位元 ...
- CSS块级元素、内联元素概念
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...
- 从文档流来看内联元素和块元素的css排版
veda原创[抄录]讲得很好存自己这里看 从文档流来看内联元素和块元素的css排版 CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的 ...
- CSS进阶（7）—— 内联元素的掌管者line-height和vertical-align（上）
在CSS世界中,块级元素一般负责结构,而内联元素则负责文字内容,而CSS设计的初衷就是面向图文混合排版,因此内联元素在CSS世界中有着非常重要的地位.由于本章内容较多,因此特分为上下两章,依旧可以根据 ...
- CSS文档流与块级元素和内联元素
文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不 ...
- 前端学习 -- Css -- 内联元素的盒模型
内联元素不能设置width和height: 设置水平内边距,内联元素可以设置水平方向的内边距:padding-left,padding-right: 垂直方向内边距,内联元素可以设置垂直方向内边距,但 ...
- CSS的块级元素和内联元素，以及float
说明:之前有一点搞错了,就是float其实是浮动起来,其它元素会位于它的底层. 最近在系统地学习HTML5,感觉补上了好多缺失的知识. 例如: 锚点定位其实可以通过 id 来实现: CSS 使用 !i ...
最新文章
- LeetCode简单题之最长和谐子序列
- 位操作符：位与、|位或、^异或、~求反、左移位、带符号右移位、无符号右移位...
- Panabit 安装指南
- 常用的数字逻辑电路符号
- c 函数多次声明_【C语言】- static和extern关键字 - 对函数的作用！
- HDU-3622 Bomb Game 2sat
- 安装mongoDB遇见的一个路径问题
- 《天天数学》连载16：一月十六日
- FusionCharts 中文乱码
- HDU1285确定比赛名次（拓扑排序+优先队列）
- java毕业设计基于javaweb+mysql数据库实现的在线学习网站|在线课堂含论文+开题报告
- 批处理bat schtasks 启动远程应用
- IDEA生成springboot项目的两种方式
- 车联网真要来了？全球汽车网络安全市场将实现跨越式增长
- Day14-HTTP协议 web开发概述 servlet快速入门
- Spider(网络蜘蛛)之ajax爬取douban电影排行和kfc门店数据
- 基于凹凸实验室的个人前端项目规范！（值得一看）
- CentOS 终端启动 快捷键
- ansible批量化脚本
- 发卡网-个人支付宝接入-实时到账