DIV+CSS系列课程 (三) 常用标签及简单实例

最新推荐文章于 2024-10-02 15:35:50 发布

MyNameIsPig

最新推荐文章于 2024-10-02 15:35:50 发布

阅读量350

点赞数

分类专栏： DIV+CSS基础文章标签： div css class 文档 stylesheet float

本文链接：https://blog.csdn.net/MyNameIsPig/article/details/6687578

版权

DIV+CSS基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<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="dd1"><div class="dd2"></div><div 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;
}