首页 > 代码库 > css+div

css+div

2024-07-13 06:01:50   223人阅读

padding:6px 10px 0 10px; 上 右 下 左

border:1px solid #dbdbdb;边框
margin-bottom:8px与最下边边框的距离

display:block;
display：block；比较常用于<a><span>这两个标签——因为这两个标签非块元素，如果不用display：block定义一下，那么定义width、height等和长宽相关的css属性时会发现完全不生效。你可以实际写几行简单代码感受一下。


background:url(images/side_bg.gif) 0 bottom no-repeat
背景图片地址-左右的对齐方式（或距离）-左右的对齐方式（或距离）-是否重复

border-bottom:1px dashed #dcdcdc; color:#777;} 下边框定义虚线
border-bottom:1px dashed #dcdcdc; 下划线 及下划线的颜色
padding:0; margin:0;
表示全局声明div的边框外部和元素距离为0
list-style:none;去掉黑点；
text-decoration:none;修饰下划线
background:url(images/nav_bg.gif) 0 0 repeat-x;
意思就是背景以X轴（横向）平铺

color:#fff;
color:#444;
color:6e6e6e
color:#666;


text-decoration:underline; /*定义文字具有下划线*/
text-decoration:none; /*定义文字不带有下划线*/
font-weight:bold; /*加粗文字*/
overflow:hidden的作用是隐藏溢出 也就是超出的部分隐藏
border-bottom:1px dashed #dcdcdc; color:#777;}


padding-bottom:10px； 填充就是让下边框展示多大
margin-bottom:10px; 与边框的距离
text-indent:50em
text的意思是文本，indent在计算机英语中意思是缩进，至于后面的2em意思就是2个相对单位；
border:1px solid #FF0000; 边框大小 实线边框的颜色
padding:20px 300px; /* 上下内补丁为150px 左右内补丁为50px */
border:solid #FF0000; /* 定义边框样式以及颜色，使用默认边框大小 */
border-width:10px 5px; /* 定义边框大小覆盖上面的默认大小，上下边框为10px，左右边框为5px */
margin:50px 100px; /* 上下外补丁50px 左右外补丁为100px */

width:200px;
height:100px;
padding:150px 50px; /* 上下内补丁为150px 左右内补丁为50px */
display:none;隐藏

display：block；比较常用于<a><span>这两个标签——因为这两个标签非块元素，如果不用display：block定义一下，那么定义width、height等和长宽相关的css属性时会发现完全不生效
visibility: hidden----将元素隐藏，但是在网页中该占的位置还是占着。

position：relative 这是相对定位啊
position：absolute这个是绝对定位
text-indent:80px; /* 设置段落p标签缩进24px; */
text-decoration:underline; 有下划线的
font-weight:bold; 加粗字体


background-repeat:no-repeat; 页面中背景图片显示在背景色之上
background-position:right bottom 将背景图片定位到div容器的右下角
background-position:50% 100px; 将背景图片定位到div容器的水平50%，垂直100px的位置
background-position:100px; 属性值只有一个数值，该数值将作用于水平方向的定位，而垂直方向的将以默认的50%为基准
background-repeat:repeat-x; /* 设置背景图像仅以X轴为基准的横向平铺 */
background-repeat:repeat-y; /* 设置背景图像仅以Y轴为基准的纵向平铺 */
background-repeat:repeat; /* 设置背景图像在纵向和横向上平铺 */
}
background:#FFFFFF url(images/logo.jpg) no-repeat center center; /* 定位段落p标签的背景色为白色，背景图片不重复，并且水平方向以及垂直方向都为居中 */

text-decoration:none;取消下划线

border-top:1px dashed #AFAFB0;
border-bottom:1px dashed #AFAFB0;
background-color:#FFFFFF;
设置虚线

display:inline; /* 取消段落p标签的块属性 */ 也就是取消段落字节等的空白

 

<style type="text/css">
li {
list-style-image:url("images/music.gif"); /* 设置列表的修饰符为一个ICO图标 */
}
li.li_position_in {
list-style-position:inside; /* 将列表的修饰符定义在列表之内 */
}
li.li_position_out {
list-style-position:outside; /* 将列表的修饰符定义在列表的外围 */
}
</style>

 

 

alt 属性为用户由于某些原因无法查看图像时提供了备选的信息
margin:5px auto;自动编剧
margin-top:10px;
overflow:hidden的作用是隐藏溢出
display:block;显示块状
font-weight:bold;加粗
overflow:auto;是让高度自适应， zoom:1;是为了兼容IE6

margin:0 auto; 上下wield0左右居中
margin:1px 1px 1px 1px 分别表示 上、右、下、左

line-height:200%; 行高
list-style:none; 去掉小圆点
font-family: Verdana; 如果没有字体就用他
img { border:0px;}

display:inline; 显示 让图片与文字自动缩进


a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */

a { display: block; height: 30px; width: 100px; text-decoration: none; line-height: 30px; text-align: center; background: #CCC; }
a:hover { color: #FFF; text-decoration: none; background: #333; }这里定义区块状


文章出处：标准之路(http://www.aa25.cn)

 

如果div t 他们并联 左浮动是与上一个div浮动 在他俩包含就是与宽边浮动
<style type="text/css">
#c { width:100px; height:100PX; background:#666666; float:left;}
#f { width:200px; height:100px; background:#006699; margin-left:100px;}
</style>

<div id="t">
<div id="c"></div>
<div id="f"></div>
</div>

中间没有定义宽左右被盖掉
#side { background: #99FF99; height: 300px; width: 120px; float: left; }
#side1 { background: #99FF99; height: 300px; width: 120px; float: right; }
#main { background: #99FFFF; height: 300px; margin:0 120px; }

<div id="side">此处显示 id "side" 的内容</div>
<div id="side1">此处显示 id "side1" 的内容</div>
<div id="main">此处显示 id "main" 的内容</div>

文章出处：标准之路(http://www.aa25.cn

 

 

 

@CHARSET "UTF_8";

*{

padding:0;

margin:0

}

margin是外边距 padding是内边距 意思就是 外边距=0 内边距=0

 

border:2px solid#ccc;

画一个边框，边线宽为2个像素  实线  颜色为#
 

margin-left10px； 是只限制和左边的距离

margin0 0 0 10px； 是限制里上下左右的距离

 

text-align:center

text 文本  align 对齐  centenr 中心   其实很简单的 就是把你的文字之类的放在中间  一般用在标题里 

 

clear:both;

清除浮动

 

margin:50px 0 0 50px;

向右向下浮动

 

 

display:inline;

display属性值:
none 此元素不会被显示。

 

 

letter-spacing:1px

检索或设置对象中的文字之间的间隔。 
 
text-decoration:none;
文本修饰无
 
color:#f00;
text-decoration:underline;
下划线
 
border-top
border-right
border-left
也可以这么写：
border: 1px solid #ED9F9F;
border-width: 0 0 1px 0; 

绝对定位（absolute）、相对定位（relative），

 

完整应该是<a href="http://www.mamicode.com/#" target="_blank"></a> 意思是在新的页面窗口打开一个超链接

readonly="readonly"限制写入


联系
我们