无序列表实践：制作网易奥运专题视频右侧新闻列表
发布时间：2010年4月21日 文章分类：xhtml+css 文章作者：Hitomi 浏览次数：次
本效果来自：http://v.2008.163.com/v_4HU1KJ3P.html
具体效果图片如下：
本节课学习新的xhtml标签：无序列表标签ul和列表标签li
ul的意思就是unordered list：直译为无序列表，代表的是一系列没有先后关系的内容
li就是list的缩写，是属于ul的组成部分，ul和li是不分家的一对标签，总是ul嵌套着li出现。
本节课要用到的知识点：
- 1、标签嵌套
- 2、CSS选择符的嵌套关系
- 3、ul、li标签的css样式
- 4、a标签的css样式(重点是伪类:hover，即鼠标经过样式)
- 5、fireworks软件的简单应用：切图导出
- 6、背景图片的高级应用
- 7、id属性的强化训练
第一个知识点：首先用嵌套的方法写出我们这节课的xhtml部分
- <div id="news_list">
- <ul>
- <li id="no1"><a href="#">开幕式：李宁飞天点燃主火炬 圣火闪耀中国</a></li>
- <li id="no2"><a href="#">开幕式：刘欢布莱曼咏天籁音 演绎《我和你》</a></li>
- <li id="no3"><a href="#">开幕式：中国代表团正式入场 姚明任旗手</a></li>
- <li id="no4"><a href="#">开幕式文艺表演集锦：声色夜 我和你</a></li>
- <li id="no5"><a href="#">视频：北京奥运会主题歌MV《我和你》</a></li>
- <li id="no6"><a href="#">2008奥运烟花之夜：最美的北京星空 </a></li>
- <li id="no7"><a href="#">开幕式：倒计时惊艳 气势恢宏显大国风范</a></li>
- <li id="no8"><a href="#">耀眼焰火精彩文艺表演 开幕式上半场回放</a></li>
- <li id="no9"><a href="#">开幕式：科比领衔各国运动员向北京问好</a></li>
- <li id="no10"><a href="#">揭秘李宁如何腾云驾雾点燃火炬</a></li>
- </ul>
- </div>
最外面<div>控制这个区域 id="news_list"带有语义的说明这个区域叫做news_list(新闻_列表)
<div>里面一层是<ul>，表示着这里是个无序列表开始
<ul>里面是10个<li>分别赋予no1到no10的id，让这10个<li>有不同的名字，主要用来做前面10个序号
最后<li>里面是<a>标签，我们的超级链接，href="#"代表链接回本页。
OK，xhtml部分实在是太简单了，嘿嘿。
下面重点说明CSS部分，代码如下：
- #news_list ul li{
- line-height:23px;
- /* 行高23px 新属性，记忆一下，经常用的文字排版属性，word中的行间距，就是一行文字的高度 */
- list-style-type:none;
- /* 去掉列表默认样式，想看默认样式就把这句list-style-type:none;去掉看看 */
- background:url(no1.gif) no-repeat 0px 6px;
- /* 背景图片:no1.gif 不平铺 距左0px 距顶6px */
- text-indent:20px;
- /* 文字缩进 20px */
- }
- #news_list ul li a{
- font-size:12px;
- color:#000;
- text-decoration:none;
- /*文字修饰:无*/
- }
- #news_list ul li a:hover{
- text-decoration:underline;
- /*文字修饰:下划线*/
- }
- #news_list ul li#no1{background:url(no1.gif) no-repeat 0px 6px;}
- #news_list ul li#no2{background:url(no2.gif) no-repeat 0px 6px;}
- #news_list ul li#no3{background:url(no3.gif) no-repeat 0px 6px;}
- #news_list ul li#no4{background:url(no4.gif) no-repeat 0px 6px;}
- #news_list ul li#no5{background:url(no5.gif) no-repeat 0px 6px;}
- #news_list ul li#no6{background:url(no6.gif) no-repeat 0px 6px;}
- #news_list ul li#no7{background:url(no7.gif) no-repeat 0px 6px;}
- #news_list ul li#no8{background:url(no8.gif) no-repeat 0px 6px;}
- #news_list ul li#no9{background:url(no9.gif) no-repeat 0px 6px;}
- #news_list ul li#no10{background:url(no10.gif) no-repeat 0px 6px;}
第二个知识点：CSS选择符嵌套
说完了xhtml的嵌套，再说说CSS选择符的嵌套，像#news_list ul li{}这样的写法就是选择符嵌套，他表示的意思是我要对id="news_list"的标签下的所有<ul>标签下的所有<li>加个样式，我们知道只有一个id="news_list"，可是这下面的<ul>和<li>有几个不一定能确定，所以给一个总的样式，让他们在这样的关系下总能有这个样式，这个选择符的灵活性很高，要多加练习。
第三个知识点：列表样式
line-height这句很常用的文字排版属性，一行文字的高度，背下来吧太常用了。
list-style-type这句是列表<li>的特有css属性，他用来控制<li>的小豆点的，我们这里用list-style-type:none;就是为了去掉他默认的豆点，因为实在太难看了，而换上我们自己的小图片做背景，关于list-style-type的其他属性值查看CSS手册，这里不重复罗嗦了。
text-indent这句和line-height一样也是文字排版属性，一段文字首行的缩进，也背下来吧。
第四个知识点：超级链接样式
这里要说的重点是a标签的伪类，这在IE浏览器里可是只有a有的珍贵东西，不过未来的发展会满足所有标签都可以用，今天讲一个最常用的hover，鼠标经过时的样式，好多特效都靠这个啦，好好学习，伪类是作为选择符出现的，他的写法很简单就是在a后边加冒号:和hover，写全了就是a:hover，我们这里加的样式是text-decoration，这个属性是修饰文字用的，一般就是下滑线，中划线，上划线了，因为超级链接在没有CSS的时候默认就带下滑线，所以在a的样式中上来就text-decoration:none;把这个难看的下滑线干掉，然后在鼠标经过a:hover里再让下滑线出来，最终就是鼠标经过链接文字的时候有下滑线
第五个知识点：fireworks简单应用
这节课要涉及到图片背景图了，所以不得不提一下网页图片制作软件fireworks了，我们今天要用到两个功能，放大镜和区域导出工具，主要目的是截取效果图上列表前面的10个编号图片。
第六个知识点：背景图片的应用
图片截好了，我们要用background属性将图片放在文字前面，前几节课用过background的背景颜色了，这回来点高级的，背景图片以及背景图片的定位，仔细看这句background:url(no1.gif) no-repeat 0px 6px;其中：
url(no.gif)这句指定一个图片路径作为背景图片
no-repeat是该图片不平铺，默认是上下左右都平铺，铺满为止，还有横着铺repeat-x和竖着铺repeat-y两个
0px 6px表示的是定位，默认图片在左上角，这里的0px表示居左，6px表示居顶，就是为了调整标号图片的位置，让他好看！
第七个知识点：id属性的巩固强化
在选择符#news_list ul li中一下把10个编号都写成1了，如何让10个显示不一样的编号呢？这回<li>的id属性有作用了，嘿嘿，分别给这10个id写一个背景图的样式就成了。
这节课讲的内容很多啊，同学们好好吸收吸收，留一下作业，如图制作出网页，提示：要用class了，只需要截2张图片，和本节课很像的，改改就成。
