css案例学习之盒子模型
<!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>
css案例学习之盒子模型的更多相关文章
- css的两种盒子模型
css的两种盒子模型:W3C标准盒子模型.IE盒子模型 两者的相同之处:都包含margin.border.padding.content 两者的不同之处:W3C标准盒子模型的content部分不包含其 ...
- ArcGIS案例学习笔记2_2_模型构建器和山顶点提取批处理
ArcGIS案例学习笔记2_2_模型构建器和山顶点提取批处理 计划时间:第二天下午 背景:数据量大,工程大 目的:自动化,批处理,定制业务流程,不写程序 教程:Pdf/343 数据:chap8/ex5 ...
- CSS Box Model（盒子模型）
CSS Box Model(盒子模型) 一.简介 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封 ...
- [CSS属性设置，盒子模型，网页布局]
[CSS属性设置,盒子模型,网页布局] CSS属性设置 1. 宽和高 width:属性可以为元素设置宽度. height:属性可以为元素设置高度. 块级标签的宽度不修改的情况下默认占浏览器的一整行,块 ...
- css笔记17：盒子模型加强版的案例
1.先看看经典案例效果图,导出思路: 分析:思路 基本结构 <div> <ul> <li><img src=""/> </li ...
- css笔记16：盒子模型的入门案例
1.案例一: 效果图如下: (1)box1.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...
- 【CSS学习】--- 盒子模型
一.前言:这篇只作为本人的笔记,以后慢慢再补充. 页面中的所有元素都可以被看作一个一个的“盒子”.这些盒子都包含了:内容(content).内边距(padding).边框(border)以及外边距(m ...
- CSS学习之盒子模型
1. 前言 盒子模型,英文即box model.无论是div.span.还是a都是盒子. 但是,图片.表单元素一律看作是文本,它们并不是盒子.这个很好理解,比如说,一张图片里并不能放东西,它自己就是自 ...
- CSS学习摘要-盒子模型
注:全文摘要自网络开发者网站,当然间隔也会整理一些思路和格式排版添加进去. CSS框模型(译者注:也被称为"盒模型")是网页布局的基础 --每个元素被表示为一个矩形的方框,框的内容 ...
随机推荐
- HeadFirst设计模式读书笔记(2)-观察者模式(Observer Pattern)
观察者模式:定义了对象之间一对多的依赖关系,这样一来,当一个对象的状态发生改变时,它的依赖者将会受到通知并且自动更新. 有一个模式可以帮你的对象知悉现况,不会错过该对象感兴趣的事,对象甚至在运行时可以 ...
- JVM启动过程——JVM之一
JVM是Java程序运行的环境,同时是一个操作系统的一个应用程序进程,因此它有自己的生命周期,也有自己的代码和数据空间. JVM体系主要是两个JVM的内部体系结构分为三个子系统和两大组件,分别是:类装 ...
- system.exit(0) vs system.exit(1)
2.解析 查看java.lang.System的源代码,我们可以找到System.exit(status)这个方法的说明,代码如下: /** * Terminates the currently ru ...
- Android 自定义View之BounceProgressBar
之前几天下载了很久没用了的桌面版酷狗来用用的时候,发现其中加载歌曲的等待进度条的效果不错(个人感觉),如下: 然后趁着这周末两天天气较冷,窝在宿舍放下成堆的操作系统作业(目测要抄一节多课的一堆堆文字了 ...
- poj 1018 Communication System_贪心
题意:给你n个厂,每个厂有m个产品,产品有B(带宽),P(价格),现在要你求最大的 B/P 明显是枚举,当P大于一定值,B/P为零,可以用这个剪枝 #include <iostream> ...
- POJ 1811 Prime Test 素性测试 分解素因子
题意: 给你一个数n(n <= 2^54),判断n是不是素数,如果是输出Prime,否则输出n最小的素因子 解题思路: 自然数素性测试可以看看Matrix67的 素数与素性测试 素因子分解利用 ...
- #include <list>
clear();删除向量中的所有对象 erase(iterator it);删除it所指向的容器对象 insert(iterator it,const T&);向it所指的向量位置前插入一个对 ...
- 树形控件CTreeCtrl的使用
树形控件在界面编程中应用十分普遍,如在资源管理器中和树形结构显示书的文件夹等,我们一步步研究树形控件的使用. 在对话框界面上首先拖动创建一个树,一般我们改变三个属性: Has Buttons显示带有& ...
- Performing a full database disaster recovery with RMAN
Performing a full database disaster recovery with RMAN1. Make the RMAN backup set pieces available.2 ...
- Oozie入门
作者 Boris Lublinsky, Michael Segel ,译者 侯伯薇 发布于 2011年8月18日 |注意:QCon全球软件开发大会(北京)2016年4月21-23日,了解更多详情! 分 ...