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框模型(译者注:也被称为"盒模型")是网页布局的基础 --每个元素被表示为一个矩形的方框,框的内容 ...
随机推荐
- Arduino红外遥控系列教程2013——发射与接收
教程一:红外接收教程本教程共四步操作,将教大家如何收集电视红外遥控器的编码 视频链接:http://v.youku.com/v_show/id_XNTE2NjQ5NTcy.html 第一步:电路连接, ...
- JavaScript实现私有属性
原文:JavaScript实现私有属性 JavaScript被很多人认为并不是一种面向对象语言,原因有很多种,比如JavaScript没有类,不能提供传统的类式继承:再比如JavaScript不能实现 ...
- linux下设置ip地址 gw网关,dns的方法
本文介绍下,在linux中设置IP地址.网关.dns的方法,有需要的朋友作个参考吧. 设置linux网络的方法有两种:第一种:使用命令修改(直接即时生效) 复制代码代码示例: ip and net ...
- 【C/C++】Linux下使用system()函数一定要谨慎
[C/C++]Linux下使用system()函数一定要谨慎 http://my.oschina.net/renhc/blog/53580 曾经的曾经,被system()函数折磨过,之所以这样,是因为 ...
- linux ar 命令的使用
摘自http://blog.csdn.net/hxg130435477/article/details/8217247 用途说明 创建静态库.a文件.用C/C++开发程序时经常用到,但我很少单独在命令 ...
- python内置函数（2）-递归与迭代
这篇文章简单介绍了迭代和递归的概念.两者的区别 什么是迭代: 迭代是重复反馈过程的活动,其目的通常是为了接近并达到所需的目标或结果.每一次对过程的重复被称为一次“迭代”,而每一次迭代得到的结果会被用来 ...
- c/c++性能优化--- cache优化的一点杂谈
之前写了一篇关于c/c++优化的一点建议,被各种拍砖和吐槽,有赞成的有反对的,还有中立的,网友对那篇博客的的评论和吐槽,我一个都没有删掉,包括一些具有攻击性的言论.笔者有幸阅读过IBM某个项目的框架代 ...
- 连不上VSS 【转】
今天打开项目,但是连不上VSS,报错如下: (一)现象: Could not find the Visual SourceSafe Internet Web Service connection in ...
- C++中函数的默认参数
使用方法: (1)在函数声明或定义时,直接对参数赋值,该参数就是默认参数. (2)在函数调用时,省略部分或全部参数,这时就会使用默认参数进行代替. 注意事项: (1)一般在声明函数是设置默认参数. 如 ...
- DictoryInfo.GetFiles
using System; using System.IO; namespace ConsoleApplication1 { class Program { static void Main(stri ...