第三节 DIV+CSS简单实例.doc

html/html文档开始与结束 head/head文档头部 一般用于设置关键字 标题 描述等信息 里面的内容不显示到网页正文 title/title文档标题 在头部中嵌套 link /文档链接 一般用于链接样式表文件 在头部中嵌套 常用属性有href路径 rel=stylesheet type=text/css格式 body/body文档正文 一般不用管 form/form表单 一般不用管 div/div层 用的很频繁 常用属性有id编号 class样式名 ul/ul 列表框 用的很频繁 一般用于新闻列表类的外框 li/li 列表内容 用的很频繁 一般用于新闻列表的显示 嵌套在UL中 br /换行 a/a超链接 用的很频繁 常用属性有href路径 target目标(一般不用 需要打开新网页时才用target=_blank ) title提示(当鼠标指向链接时提示的文本) 样式表中常用的属性 width宽度 height高度 border边框 margin边框与其他元素的距离 padding边框与内容的距离 backgroud-image背景图片 background-color背景颜色 color字体颜色 font-size字体大小 float浮动 样式的命名 如果样式应用在HTML的标签中 如body(有时候整个文档的正文需要宽度设在960px) 则样式的命名为body 实例如下: body { width:960px; } 如果样式应用在有ID的元素中 如div id=div1 则样式的命名为#+样式名 如#div1 实例如下: #div1 { width:900px; border: 1px solid #b0de62; } 如果样式应用在自定义的class的标签中 如div class=left 则样式的命名为.+样式名 如.left 实例如下: .left { float:left; width:200px; border: 1px solid #b0de62; } 样式的命名可以嵌套 如div id=dd1div class=dd2/divdiv id=dd3/div/div样式表中 如果想设置dd2的样式 需要命名为#dd1 .dd2{样式内容} 如果想设置dd3的样式 需要命名为#dd1 #dd2{样式内容} 问题代码如下: div id=div1 ul li我是一条新闻/li li我是一条新闻/li li我是一条新闻/li /ul /div div id=div2 ul li我也是一条新闻,但我的样式不想跟别人一样/li li我也是一条新闻,但我的样式不想跟别人一样/li li我也是一条新闻,但我的样式不想跟别人一样/li /ul /div 问题:如果一个页面中有2个ul 要求显示的样式不一样 请问该如何设置? 简单完整实例 页面中: div id=div1 div class=left导航/div div class=right正文啊正文br /正文啊正文br /正文啊正文/div /div CSS中: #div1 { width:900px; border: 1px solid #b0de62; } .left { float:left; width:200px; border: 1px solid #b0de62; } .right { float:left; margin-left:20px; width:600px; border: 1px solid #b0de62; }