CSS项目列表的应用概述.pptVIP

CSS---- 项目列表的应用 块状元素与内联元素 块状元素： 一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度(width)高度(height)起作用。常见块状元素为div和p。 块状元素与内联元素 常见的块状元素： div - 常用块级标签 form - 交互表单 H1—H6 – 各级大标题 hr - 水平分隔线 ol – 有序表单 p - 段落 table - 表格 ul – 无序列表 举例：hr样式的设置 hr { border: none; height: 6px;/*通过此语句设置横线的粗细*/ width: 800px; ;/*通过此语句设置横线的宽度*/ border-top:10px groove skyblue; } 块状元素与内联元素 内联元素： 内联元素只能容纳文本或者其他内联元素，它允许其他内联元素与其位于同一行，但宽度(width)高度(height)不起作用。常见内联元素为“a”。 块状元素与内联元素 常见的内联元素： a - 锚点 br - 换行 img - 图片 input - 输入框 select - 项目选择 span - 常用内联容器，定义文本内区块 strong - 粗体强调 textarea - 多行文本输入框 举例：span样式的设置 span { font-size: 12px; text-align:center; line-height:12px; display:block;/*没有这句话设置的高、宽度将无效，设置的居中也因此将无法实现。*/ } 用项目列表排列图片 div id=id3 ul liimg src=images/5-3-05.JPG width=120 height=88 //li li……/li /ul /div 用项目列表排列图片 #id3 { width:798px; height:88px; border-bottom:#fff inset 1px; border-left:#fff outset 1px; border-right:#fff inset 1px; } 用项目列表排列图片 #id3 ul li { float:left; /*使图片横向排列*/ padding:0 0 0 25px; /*使图片之间有间距*/ list-style:none; /*使图片前面无项目列表*/ } 无下拉菜单的导航条 步骤： 1、制作一容器放导航条。样式定义： #id1 { background-color:#AF7E21; height:30px; width:800px; } 无下拉菜单的导航条 2、添加项目列表。样式定义： #id1 ul li { font-size:13px; margin:0 0 0 10px;/*使间距增大*/ line-height:30px; /*高度增加*/ float:left; /*横向排列*/ list-style-type:none; ;/*无项目符号*/ } 无下拉菜单的导航条 3、设置需要设置超链接的列表样式。 #id1 ul li a { color:#fff; line-height:30px; text-decoration:none; display:block; /*使高度属性起作用*/ padding:0 18px 0 18px; /*使背景色与文字有间隙*/ } 无下拉菜单的导航条 步骤： 4、设置鼠标置上的样式。样式定义： #id1 ul li a:hover { text-decoration:underline; background: #F90; color:#006; } 相对定位与绝对定位 1、相对定位 如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。 #box_relative { position: relative; left: 30px; top: 20px; } 相对定位与绝对定位 2、绝对定位 设置为绝对定位的元素框从文档流完全删除，与文档流无关，因此可覆盖页面上的其他元素。 相对于最近的已定位的祖先元素，如果不存在已定位的祖先元素，那么就相对于最初的包含块。 相对定位与绝对定位 2、绝对定位 #box_relative { position: absolute;