text-indent用来规定文本块中首行文本的缩进，但是px是绝对单位，20px不一定正好是两个字符，而em是相对单位，1em的大小是当前1个字体的大小，因此2em正好是两个字符。另提示：text-indent的值允许负值，因此如果想隐藏某个div中的文字可以这样写text-indent:-9999px.

min-height:350px;设置这个盒子的最小高度为350px;

但这个写法在IE6下面不被识别

可以采用_height';350px;

本课程总结：

1、行内样式的优先级高于外部样式

2、行内样式适合于少量样式的地方

background-position x y：x水平y垂直单位可以是px也可以是%。或者是top,left,right,bottom,center，如是则只写一个英文位置时，另一个位置默认为center。位置信息什么都不写，默认为center。

• 采用像素值来定位时，像素值意味着背景图片和元素左上角的差值

list-style-type可以设置列表项目符号为：none无项目符号，disc实心圆，circle空心圆，square实心方块等但是不可以设置图片为项目符号。

解决span标签在IE浏览器下出现错位的情况，在代码中把日期放在标题的左侧。

关于使用myfocus的API:

1、设置的焦点图初始化的ID需要与图片列表最外层的ID一致。

2、图片列表外面，包裹一个class为PIC的div.

Myfocus教程的相关网址：http://demo.jb51.net/js/myfocus/tutorials.html

使用教程：

step1:

<script type="text/javascript" src="js/myfocus-2.0.0.min.js"></script><!--引入myFocus库-->
<script type="text/javascript" src="js/mf-pattern/slide3D.js"></script><!--引入风格js文件-->
<link href="js/mf-pattern/slide3D.css" type="text/css" /><!--引入风格css文件-->

提示：符合条件的情况下，引入风格文件(js/css)可省，引入myFocus库即可。那么风格文件是如何自动引入的？详情请看myFocus的文件结构与自动引入风格文件机制。

step2:

<div id="boxID"><!--焦点图盒子-->
  <div class="loading"><img src="img/loading.gif" alt="请稍候..." /></div><!--载入画面(可删除)-->
  <div class="pic"><!--内容列表(li数目可随意增减)-->
  	<ul>
        <li><a href="#"><img src="img/1.jpg" thumb="" alt="标题1" text="详细描述1" /></a></li>
        <li><a href="#"><img src="img/2.jpg" thumb="" alt="标题2" text="详细描述2" /></a></li>
        <li><a href="#"><img src="img/3.jpg" thumb="" alt="标题3" text="详细描述3" /></a></li>
        <li><a href="#"><img src="img/4.jpg" thumb="" alt="标题4" text="详细描述4" /></a></li>
        <li><a href="#"><img src="img/5.jpg" thumb="" alt="标题5" text="详细描述5" /></a></li>
  	</ul>
  </div>
</div>

IMG标签的属性说明：

• src : 图片地址；

• thumb : 图片的略缩图地址(需要风格支持，可以省略，如果省略即把大图地址作为它的地址)；

• alt : 图片的描述文字；

• text : 图片更详细的描述文字(需要风格支持，可以省略)

Step 3. 在step1代码之后的任意一个位置调用(建议在head标签结束前调用)

//你可以简单的调用---只设置它的盒子id，其它参数全部默认设置：
<script type="text/javascript">
myFocus.set({id:'boxID'});
</script>

//或详细一点的参数调用：
<script type="text/javascript">
myFocus.set({
    id:'boxID',//焦点图盒子ID
    pattern:'mF_fancy',//风格应用的名称
    time:3,//切换时间间隔(秒)
    trigger:'click',//触发切换模式:'click'(点击)/'mouseover'(悬停)
    width:450,//设置图片区域宽度(像素)
    height:296,//设置图片区域高度(像素)
    txtHeight:'default'//文字层高度设置(像素),'default'为默认高度，0为隐藏
});
</script>

//更多参数设置及jQuery方式调用请查看使用者API。

关于解决由于浮动导致的一些不理想页面效果显示，

比如由于设置了父类盒子logo的高度为80px导致下面的盒子nav中的效果无法正常显示，为了解决这个问题，可以采用不设定logo类的高度，而是采用在logo的盒子中增多一个clearfloat的盒子，并设定这个clearfloat盒子中的clear:both,比如，

.clearfloat{

clear:both;

height:0;

overflow:hidden;

}

或者直接在logo类里面增多一个语句overflow:hidden,

这个原理涉及到BFC原理，

相关解释，https://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html

通过设置img中的vertical-align的属性为middle可以使图片和同一个盒子中的文字垂直对齐，使文字居中在图片中。

.top_content a:hover , .top_content a:ative{

}

//a:hover表示鼠标经过的状态，a:active表示活动状态