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

       em单位受到*{}中全局字体大小的影响，如果想设置一段单独文字大小的文本的首行缩进，需要在此文本p标签下单独设置字体大小和text-indent的em值。

加入了js脚本，主要完成了当前页的页码要显示红色背景的要求。不过比较简单粗暴，没实现只针对数字页码的背景颜色显示。

学会啦！！！

网站css样式一开始就要规划好，可以重复使用已有样式表来提升效率和网页风格一致性。

背景颜色、图片的简写方法示列：

background: #f2f2f2 url("../images/li_bg2.gif") no-repeat left center;

当背景颜色与背景图片同时存在时，只要背景图片没有填充满整个元素，剩余部分显示背景颜色。

当盒子内容比较多时，可以用 min_height 让内容撑开盒子的高度,同时还需要将后面的容器设置clear：both;； 注意：IE下没有min_height，IE下是 _height,默认内容较多时，会撑开。 大型网站，主流清除浮动方法：浮动元素的父元素 class="clearfix"， css定义 .clearfix{ clear:both; content:"."; height:0; overflow:hidden; }

list-style-type默认disc实心圆，cricle空心圆，square实心方块。

想把底部版权区最右侧的背景图片（竖条）去掉，以达到更美观的效果可以为里面最右侧li单独设置class名，包括其子级li图片，否则会继承之前设置的li背景图片不能完全去除。

<li class="copyright_content_right"><a href="#"><img src="images/weixin.png" />微信关注</a>
    <ul>
        <li class="copyright_content_right"><img src="images/qrcode.jpg"></li>
    </ul>
</li>

.copyright_content li{
    width: 200px;
    line-height: 30px;
    list-style: none;
    float: left;
    background: url("../images/line.png") no-repeat right center;
    text-align: center;
    font-family: "Microsoft YaHei";
}

.copyright_content ul .copyright_content_right{
    background-image: none;
}

1. <dl> 

2.    <dt>标题1</dt> 

3.    <dd>列表1</dd> 

4.    <dd>列表2</dd> 

5. </dl>

dl、dt、dd更符合语义，注意dd默认会缩进，根据需要在css中修改。

• 给元素设置宽高时，注意是否是内联元素，应设置display:inline-block或者block，否则宽高无效。
  

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

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

• 采用百分比时，效果却很奇怪，0% 0%时背景图片和元素左上角对其，100% 100%时背景图片和元素右下角对齐。

• 查了资料，才知道原来采用百分比定位背景是遵守以下公式 

       x：（元素的宽度-图片的宽度）* X% 

       y：（元素的高度-图片的高度）* Y%

• 记住首先，背景设置为no-repeat，定位坐标才可以生效！

IE兼容性提示：

在无序列表li中的两个内联元素的文字里，float：right的那一条最好放在li中的右边，否则会出现显示下沉的问题。

&gt; 为转义的‘’>‘’。

如何实现CSS限制字数,超出部份显示点点点...

<div >试试看试试看试试看试试看试试看试试看试试看试试看试试看试试看试试看</div>

首先在HTML中添加轮播图片盒子列表：

<!-- 焦点图盒子 -->
<div id="boxID">
  <!-- 载入中的Loading图片(可选) -->
  <div class="loading"><img src="img/loading.gif" alt="请稍候..." /></div>
  <!-- 内容列表 -->
  <div class="pic">
    <ul>
        <li><a href="#"><img src="img/1.jpg" alt="标题1" /></a></li>
        <li><a href="#"><img src="img/2.jpg" alt="标题2" /></a></li>
        <li><a href="#"><img src="img/3.jpg" alt="标题3" /></a></li>
        <li><a href="#"><img src="img/4.jpg" alt="标题4" /></a></li>
        <li><a href="#"><img src="img/5.jpg" alt="标题5" /></a></li>
        <!-- 你可以根据需要添加更多的列 -->
    </ul>
  </div>
</div>

然后在Head内初始化js设置：

myFocus.set({id: 'boxID'});

推荐用详细初始化设置：

myFocus.set({
    id: 'boxID',//焦点图盒子ID
    pattern: 'mF_tbhuabao',//直接选择焦点图风格的名称
    time: 3,//切换时间间隔(秒)
    trigger: 'mouseover',//触发切换模式:'click'(点击)/'mouseover'(悬停)
    delay: 200,//'mouseover'模式下的切换延迟(毫秒)
    width:200,//设置图片区域宽度(像素)
    height:200,//设置图片区域高度(像素)
    txtHeight: 'default'//标题高度设置(像素),'default'为默认CSS高度，0为隐藏
});

myfocus下载地址：

http://koen301.github.io/myfocus/

截图原来是这样