常用的css的技巧

2022-10-07 14:08:07

1.在做项目当中，由静态页面来载入到项目中，作为动态数据的部分，若是这个动态数据，前面或者后面有需要图片显示（图片是用background来显示的），一般不用float:left或者right,而是padding。

例如：预览

2、做瑞祥装饰的手机端时，遇到一个问题，

3、很多时候我们写导航的时候，导航每个li之间可能会有间隔线，但是我们经常会去要设置最后一个间隔线为无，一般会使用 li:last-child。

li:last-child{border-right:none;}

4、经常会遇到需要强制不折行，但是因为不常用，总是不记得.

p{word-break:break-all; white-space:nowrap;}

5.还有一个相当不常用，就是关于汉字注音 — 使用ruby标签和ruby-align属性,可以利用ruby-align设置对齐方式。

<ruby style="ruby-align:right">注音<rt>zhuyin</rt></ruby>

6.常用的超过宽度的内容自动截断，并且显示省略号。(定义一个宽度，再加上 text-overflow:ellipsis; white-space:nowrap; overflow:hidden;)

<ul>

        <li>CSS实战精萃 - Pro CSS Techniques </li>

        <li>CSS实战：id是狙击枪 class是双刃剑 合则两利分则两败</li>

        <li>CSS布局实例：CSS标签切换代码实例教程</li>

        <li>Web标准：改变您的网页制作思维方式</li>

        <li>解决IE7以下版本不支持无A状态伪类的几种方法！</li>

        <li>CSS去除表格td默认间距及制作1px细线表格  </li>

</ul>

ol{width:300px; margin:50px auto;}

li {width:100px; line-height:25px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}

7.平时写table时，经常在表格中因为文字过多，而导致挤压临近数据，如下图

所以一般在平时写table的时候，还是要有习惯，给table中每个td一定的宽度，或者宽度比，然后再加上word-wrap: break-word

如下面代码：

 <tr>

                                        <th width="2%">

                                            <input id="chkAll" name="chkAll" runat="server" type="checkbox" onclick="Check(this, 'chkItem')" title="全选" /></th>

                                        <th width="4%">编号</th>

                                        <th width="4%">地区</th>

                                        <th width="8%">材料名称</th>

                                        <th width="4%">品牌</th>

                                        <th width="4%">规格</th>

                                        <th width="12%">所属材料</th>

                                        <th width="5%">原供价</th>

                                        <th width="5%">现供价</th>

                                        <th width="5%">原配送</th>

                                        <th width="5%">现配送</th>

                                        <th width="7%">申请理由</th>

                                        <th width="7%">打回理由</th>

                                        <th width="7%">详细状态</th>

                                        <th width="7%">审核状态</th>

                                        <th width="7%">申请时间</th>

                                        <th width="7%">执行时间</th>

                                    </tr>

.tbl_2 td,.tbl_2 th {

    height: 35px;

    line-height:35px;

    border-bottom:1px dashed #f0f0f0;

    color:#18191B;

    font-size:13px;
    word-wrap: break-word; 

}

.tbl_2 td span {

    width:%;

    padding: 2px;

}

效果如下图所示：

码农公寓

相关文章