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. Java Queue 各种方法的区别

    再Java里的某些集合类,其实是实现了多个接口的,所以就会同时又多种方法针对同一种操作,比如LinkedList类. 首先看一下java集合类的继承关系图: 这里简单对其重复的方法做点简单的区分. o ...

  2. fragement切换动画效果的实现

    标准动画: fragementTransaction.setTransition(FragmentTransation.TRANSIT_FRAGMENT_CLOSE); 自定义动画: fragemen ...

  3. MFC中修改默认启动对话框方法

    // CMyAppEApp 初始化 BOOL CMyAppEApp::InitInstance(){// 如果一个运行在 Windows XP 上的应用程序清单指定要// 使用 ComCtl32.dl ...

  4. html/css技巧总结

    .e-select .on{display:none} on为e-select的子元素,(之间有空格).e-select.on{display:block} 只有两种属性同时存在时才会起作用(之间无空 ...

  5. LeetCode OJ 109. Convert Sorted List to Binary Search Tree

    Given a singly linked list where elements are sorted in ascending order, convert it to a height bala ...

  6. requirejs 一个拆分js项目的类库

    http://www.requirejs.cn/ http://requirejs.org/docs/start.html

  7. Linux 终端下颜色的输出

    在命令行下也能产生五颜六色的字体和图案,只需要加上一些颜色代码,例如 echo -e "\033[41;36m 红底绿字\033[0m" 其中41的位置代表底色, 36的位置是代表 ...

  8. shell 变量说明

    变量说明 $$Shell本身的PID(ProcessID)$!Shell最后运行的后台Process的PID$?最后运行的命令的结束代码(返回值)$-使用Set命令设定的Flag一览$*所有参数列表. ...

  9. wpf资源嵌套，一个资源引用另外一个资源，被引用的资源应该声明在前面

    在wpf的XAML的Window.Resources中,一个资源引用另外一个资源,出现如下错误: “错误 1 “{DependencyProperty.UnsetValue}”不是 Setter 上“ ...

  10. 转 如何不耍流氓的做运维之——SHELL脚本

    家都是文明人,尤其是做运维的,那叫一个斯文啊.怎么能耍流氓呢?赶紧看看,编写 SHELL 脚本如何能够不耍流氓. 下面的案例,我们以 MySQL 数据库备份 SHELL 脚本的案例来进行阐述. 不记录 ...