css的技巧-转小月博客

1. 文字换行

/*强制不换行*/
white-space:nowrap; 

/*自动换行*/
word-wrap: break-word;
word-break: normal;

/*强制英文单词断行*/
word-break:break-all;

2. 两端对齐

text-align:justify;text-justify:inter-ideogra

3. 去掉Webkit(chrome)浏览器中input(文本框)或textarea的黄色焦点框

input,button,select,textarea{ outline:none;}
textarea{ font-size:13px; resize:none;}

注:去掉chrome记住密码后自动填充表单的黄色背景

4. ie6: position:fixed

.fixed-top /* position fixed Top */{position:fixed;bottom:auto;top:0; }
* html .fixed-top /* IE6 position fixed Top */{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));}
*html{background-image:url(about:blank);background-attachment:fixed;}

5. clearfix

.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
.clearfix{display:inline-block;}
html[xmlns] .clearfix{display:block;}
* html .clearfix{height:1%;}
.clearfix{*zoom: 1;}
.clearfix:after{clear:both;display:table;content:"”;}
.clearfix{overflow:hidden;_zoom:1;}

6. seperate-table

.tab{border-collapse:separate;border:1px solid #e0e0e0;}
.tab th,.tab td{padding:3px;font-size:12px;background:#f5f9fb;border:1px solid;border-color:#fff #deedf6 #deedf6 #fff;}
.tab th{background:#edf4f0;}
.tab tr.even td{background:#fff;}
<table class="tab" width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <th>111</th>
        <td>222</td>
    </tr>
    <tr>
        <th>111</th>
        <td>222</td>
   </tr>
</table>

7. min-height: 最小高度兼容代码

.minheight500{
     min-height:500px;
     height:auto !important;
     height:500px;
     overflow:visible;
}

8. 鼠标不允许点击:

cursor:not-allowed;

9. mac font: osx平台字体优化

font-family:"Hiragino Sans GB","Hiragino Sans GB W3",‘微软雅黑‘;

10. 省略号:

.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
时间: 2024-10-13 22:56:38

css的技巧-转小月博客的相关文章

【小月博客】 Html5 上传图片 移动端、PC端通用

在博客园注册账号有些天了,感觉有些许欣慰,自己写的东西有人在看,有人在评论很是开心.(ps: 满足一下虚荣心吧!) 废话不多说了,说一下今天给大家分享的是 html5上传图片.我们是在移动端使用的,但是这个在pc上也通用兼容性我只在谷歌测试过.之前一直用的angular写的<用HTML5的File API做上传图片预览能>.今天摒弃angular的东西分享一个html5 + js 图片上传案例.那么今天还是按照一定的步骤来讲吧. HTML 上传图片 HTML 第一步创建html,我们在页面中放

Html5开发——html+css基础二(个人博客一)

今天没有写完,而且写的还有点问题,所以今天就先不上传代码了(ps:快写完了才发现布局有问题,导致代码太多,感觉写的不是很好,所以今天先分析一下布局) 第一步先写一个大的div用来放ABC三个部分,这个大的div居中! 第二步分别写ABC三个部分,ABC三个部分分别使用浮动(float)来定位.A和B都各使用了一张非常小的图片,通过重复(repeat)属性生成A和B 第三步C部分分别写好3~16这几个模块,在通过组合利用浮动定位.分组如下: E:3 F:4.7.10.13 G:5.8.11.14

pure css做的手机版博客园(我自己博客)

源码如下: 1 <!doctype html> 2 <html> 3 <head> 4 <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 5 <!--缩放比例以及允许缩放--> 6 <meta name="viewport" content="width=device-width, in

【小月博客】用HTML5的File API做上传图片预览功能

前段时间做了一个项目,涉及到上传本地图片以及预览的功能,正好之前了解过 html5(点击查看更多关于web前端的有关资源) 可以上传本地图片,然后再网上看了一些demo结合自己的需求,终于搞定了.(PS : 不得不承认我这个人有多懒,没有需求的时候我向来不主动去学习).移动端完全支持哦!已测试. 下面给大家看看代码吧怎么实现的 第一:HTLM部分(这里不去做漂亮的样式了我们注重学习功能) <input type="file" id="fileElem" mul

我的博客园CSS样式分享

过完年又开始上班了,已经从2月25连续加班到现在,晚上11点多才回去,也没时间写文章了. 先分享一下我的博客园的CSS吧. 我的博客皮肤最开始的时候是参考共享一下我的自定义CSS博客皮肤(2012.3) 修改的. 使用的是LessIsMore皮肤 下面是自定义的CSS样式 @charset "utf-8"; body { font-size: 15px; padding: 0; margin: 0; font-family: "微软雅黑", "宋体&quo

简易博客[ html + css ] 练习

1. 前言 通过使用 html + css 编写一个简易的博客作为入门练习 2. 代码及实现 2.1 目录结构 2.2 代码部分 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <link href="https://cdn.bootcss.com/normalize/8.0.1/normalize.min.css&qu

[JS]玩转博客园的几个“奇技淫巧”

混迹博客园快一个月了,非常喜欢这块技术氛围浓厚的园地,不过在玩转园子的过程中也发现了几个小缺陷,不过好在申请了JS权限之后可以解决大部分的不方便,而在不能植入自定义JS的页面也可以用比较hack的方式来缓解问题.本文就来说一说我这一个月来碰到的几个问题以及解决之道:D 一.判断当前用户 写随笔的过程中可能经常需要对页面进行一下预览,然而编辑器的预览功能没办法带上自定义的CSS和JS,所以通常都得保存草稿然后查看随笔.预览完之后想要继续编辑的话就得一直拉到随笔的结尾,这个实在是不太方便,于是自然就

盘点iOS开发者必看的105个全球最佳博客

1. Apple Swift Blog 所有iOS开发者的必读博客,可以看到最新的官方新闻,还有Swift编程语言的创造者Chris Lattner所传授的技巧.这个博客唯一的缺点就是更新太慢,希望今后能更新地更频繁一些. 2. Ray Wenderlich 无论是初学者还是熟手,Ray网站的特色文章--教程甚至播客都值得一读.简单来说,可以从中找到你想要的一切.更新:现在该网站更像是个社区,有很多出色的程序员无私地分享自己的知识. Twitter可关注@rwenderlich 3. Cult

iOS开发者必看的全球100个最佳博客

如果你正在寻找见解深刻,并富有教育意义的iOS开发博客,那就找对地方了.下面列出了质量最好且最为活跃的105个线上博客.如你所知,互联网上高质量的iOS博客并不缺乏,但我决定再过滤一下,去芜存菁,找出最精华的那些与你们分享. 无论是想要与同侪沟通的iOS开发老手,还是渴望学习以提高移动应用开发技巧的大学新鲜人,都能从这些博客中找到自己所需的工具.知识见解与技术,并在软件的开发过程中充分利用这些知识. 如果其中有你的博客,而你想要在自己的网站上分享这一荣耀的话,可以复制下面这段代码. <a hre