css div11

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>

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。