text-indent:30em;  缩进

font-family:"sans serif"文字的字体

border-width:1px; border-style:solid; border-color:#CCCCCC;边框 实现 边框颜色

style="border-width:1px; border-style:solid dashed; border-color:#CCCCCC #000000;"上边实线 左右虚线

ol有序会显示数字   ul无序显示点<ul><li></li></ul>  <ol><li></li></ol>

style="list-style:none; * 列表属性的缩写，设置列表修饰符为none，修饰符的位置为默认的outside */

list-style-type:square;将列表的预设标记定义为实心方块

list-style-position:inherit;列表项目标记放置在文本内，且环绕文本根据标记对齐；

list-style-image:url(jiaocheng/images/btn_login.gif) 覆盖预设标记用jiaocheng/images/btn_login.gif

text-decoration:underline;让文字下边有下划线

text-decoration:none;让文字无下划线

body > strong {     }子选择符

<style type="text/css">p, .myContent, #title {font-size:18px; color:#FF0000;} </style>群组选择器

}

Padding    标签内补丁

Margin 标签外补丁

margin-left:auto;

margin-right:auto; /* 左右外补丁设置为auto，容器将会在标准模式解析情况下居中 */

margin-bottom:15px;

margin-bottom:-9999px;到达底部

padding-bottom:9999px;

visibility hidden----将元素隐藏，但是在网页中该占的位置还是占着。

display none----将元素的显示设为无，即在网页中不占任何的位置。

line-height:60px; 行高一般用字体

background:url(images/bg.png) repeat-y 0 0; 沿着Y线自动

font-weight:bold;  字体加粗

h1 span {

display:none; /* 设置span标签内的文字不可见，并且不会在页面中占据其原本所占据的空间 */

}

overflow:hidden; /* 隐藏超出段落p标签容器的内容 */s

background-repeat:no-repeat; /* 设置背景图像不重复显示 */

background-position:50% 100px; /* 将背景图片定位到div容器的水平50%，垂直100px的位置 */

list-style:none; /* 消除li的默认样式 */

text-indent:20px; /* 设置li中内容缩进20px */

clear:both;  清除浮动是为了下面的布局内容不受上面浮动内容的影响
一般，如果你上面div设置了浮动但是下面的内容不想要浮动了，那就把要把下面的div 清除浮动
如果你是左右布局两，那么最外面的两个就不用清除浮动，两个都是左浮动，这样他们就会在一排显示，实现了左右布局

list-style-position:inside; /* 将列表的修饰符定义在列表之内 *

list-style-position:outside; /* 将列表的修饰符定义在列表的外围 */

<h>标题</h>

<dl></dl>

<dt><dt>

<dd><dd>

input[type="text"] {

text-align:center; border:1px solid #FF0000; background-color:#999999;}

</style>

<form name=""  id="">

<input type="text" name=" " id="" />

<input type="password" name="" id="" />

</form>

<style type="text/css">

div {

width:200px; /* 定义div标签的宽度为200px */

height:30px; /* 定义div标签的高度为200px */

padding:20px; /* 定义div标签内补丁为20px */

border:5px solid #FF0000; /* 定义div标签边框为粗细5px、边框色为红色的实线边框*/

margin-bottom:10px; /* 定义div标签外补丁底边为10px */

color:#FFFFFF;

background-color:#000000; /* 定义div标签的背景色为黑色 */

}

</style>

<title>盒模型实验四</title>

</head>

<body>

<div>我是第一个div标签哦</div>

<div>那我就是第二个div标签啦</div>

<div>显然，我就是第三个div标签</div>

</body>

</html>

<style type="text/css">

* {

margin:0;

padding:0;

}

.header, .footer {

height:60px;

line-height:60px;

text-align:center;

color:#FFFFFF;

background-color:#AAAAAA;

}

.container {

text-align:center;

color:#FFFFFF;

}

.mainBox {

float:left;

width:100%;

background-color:#FFFFFF;

} /* 设置主要内容区域的外层div标签浮动，并将宽度设置为100% */

.mainBox .content {

margin:0 210px 0 310px;

background-color:#000000;

} /* 设置主要内容区域的内层div标签外补丁保持宽度的默认值为auto，留出空白的位置给左右两列 */

.subMainBox {

float:left;

width:300px;

margin-left:-100%;

background-color:#666666;

} /* 将次要内容区域设置左浮动，并设置宽度为300px，负边距为左边的-100% */

.sideBox {

float:left;

width:200px;

margin-left:-200px;

background-color:#666666;

} /* 将侧边栏设置左浮动，并设置宽度为200px，负边距为左边的-200px */

.footer {

clear:both;

}

</style>

<title>两列定宽中间自适应结构</title>

</head>

<body>

<div class="header">头部信息</div>

<div class="container">

<div class="mainBox">

<div class="content">主要内容区域</div>

</div>

<div class="subMainBox">次要内容区域</div>

<div class="sideBox">侧边栏</div>

</div>

<div class="footer">底部信息</div>

</body>

</html>

css div11的更多相关文章

  1. 学起来 —— CSS 入门基础

    Hello,大家好! 小女来更博啦!CSS福利送上~~~ 首先给大家介绍一下CSS到底是什么? 一.CSS概念 W3C规范中,要求有三条:一 为"两个分离",二 为语言遵循语义化, ...

  2. HTML——CSS的基础语法2

    一.盒模型 1-1.什么是盒模型? HTML5盒模型包括:内容(content).填充(padding.也叫做内边距).边框(border).边界(margin,也叫做外边距). 这些属性我们可以用日 ...

  3. 超全面的JavaWeb笔记day04<dom树等>

    1.案例:在末尾添加节点(*****) 创建标签 createElement方法 创建文本 createTextNode方法 把文本添加到标签下面 appendChild方法 2.元素对象(了解) 如 ...

  4. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  5. css属性—position的使用与页面的分层介绍

    一.引言: 在css众多属性中,position算是里面用的比较多也相对来说比较重要的属性了,它对于单个标签的“定位”.标签之间的“相对位置定位”还有网页的分层来说十分重要! 二.“定位的实现”具体介 ...

  6. 前端之html的常用标签2和css基本使用

    一 列表标签 ul标签:无序列表 ol标签:有序列表 li标签:写在ul和ol标签里面的 dl标签:定义列表 dt标签和dd标签:都写在dl里面的 <!DOCTYPE html> < ...

  7. JavaWeb(HTML +css+js+Servlet....)

    注意 1.不要把函数命名为add(),不然容易和自带的冲突报错 2.是createElement 不要把create中的e写掉了 3.记得是getElementsByTaxName和getElemen ...

  8. 超全面的JavaWeb笔记day02<CSS&JavaScript>

    1.CSS的简介 2.CSS概述和与HTML的结合方式(四种)(*******) 3.CSS的基本选择器(******) 4.CSS的扩展选择器(了解) 5.CSS的盒子模型(了解) 6.CSS的布局 ...

  9. css系列（7）成品网页

        本节介绍用css和html组合起来写的页面.(代码可以直接运行)     (1)仿旧版腾讯微博注册页面:(文件夹地址:http://files.cnblogs.com/files/MenAng ...

随机推荐

  1. C语言-字符串文本串联

    要形成包含多个行的字符串,可以串联两个字符串. 为此,请键入正斜杠,然后按 return 键. 反斜杠导致编译器忽略以下换行符. 例如,字符串     "Long strings can b ...

  2. 文本输入框和下拉菜单特效-用正则表达式验证E-mail格式

    ———————————————————————————— <script type="text/javascript">                         ...

  3. hdu_5680_zxa and set(想法题)

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=5680 题意: 问题描述 zxa有一个集合A=\{a_1,a_2,\cdots,a_n\}A={a​1​ ...

  4. TeX括号。。。

    #include <stdio.h> #include <stdlib.h> int main() { ; ) { if(c=='"') { printf(" ...

  5. [转]Flash、Flex、AS3.0框架及类库资源收集之十全大补

    原文地址:http://www.d5power.com/portal.php?mod=view&aid=27 APIs.Libs.Components1.as3ebaylibhttp://co ...

  6. ios 视频播放

    #import "ViewController.h"@import MediaPlayer; @interface ViewController (){    MPMoviePla ...

  7. Global事件执行顺序

    Global.asax 文件,有时候叫做 ASP.NET 应用程序文件,提供了一种在一个中心位置响应应用程序级或模块级事件的方法.你可以使用这个文件实现应用程序安全性以及其它一些任务.下面让我们详细看 ...

  8. js截取文件名

    str = 'C:\fakepath\ll.doc'; str.substring(str.lastIndexOf("\\")+1,str.lastIndexOf(".& ...

  9. 3.1 cron表达式

    1.Cron在线生成网址:      http://cron.qqe2.com/   http://www.pdtools.net/tools/becron.jsp#cron 2.Cron 概要 3. ...

  10. CodeForces 429B Working out 动态规划

    Description Summer is coming! It's time for Iahub and Iahubina to work out, as they both want to loo ...