日常css

最新推荐文章于 2024-08-30 21:39:41 发布

菜鸟开发

最新推荐文章于 2024-08-30 21:39:41 发布

阅读量170

点赞数

分类专栏： html_css

html_css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

对话框：

.tip {

position: relative;background-color: #fff;

width: 60%;height: 30px;

line-height: 30px;color: #AAB2BD;

text-align: center;border-radius: 4px;

font-family: sans-serif;border: 1px solid #ddd;

display: inline-block;top: 5px;

-webkit-box-flex: 1;-moz-box-flex: 1;

-webkit-flex: 1;-ms-flex: 1;

flex: 1;

}

.tip:after {

font-family: Muiicons;font-size: 18px;

position: absolute;top: 50%;

display: inline-block;-webkit-transform: translateY(-50%);

transform: translateY(-50%);text-decoration: none;

color: #ddd;-webkit-font-smoothing: antialiased;

right: -12px;content: '\e583';

background: #fff;height: 12px;

line-height: 12px;

}

弹性布局：

.display-flex{

display: box;display: -webkit-box;

display: -moz-box; display: -ms-flexbox;

display: -webkit-flex;display: flex;

}

.flex-direction{

-webkit-box-orient: vertical;-webkit-flex-direction:column;

-moz-flex-direction: column;-ms-flex-direction: column;

-o-flex-direction: column;flex-direction:column;

}

.flex{

-webkit-box-flex: 1;-moz-box-flex: 1;

-webkit-flex: 1;-ms-flex: 1;

flex: 1;

}

页面垂直滚动条(IE/FF兼容)
html { overflow-x:auto; overflow-y:scroll; }

清除样式
    ul,li,ol,dl,dt,dd { list-style:none; }
    img { border:0; }
    i { font-style:normal; }
    s { text-decoration:none; }

CSS important
.dialog{margin:4px !important;margin:1px;} /* IE以最后出现的为准, Firefox|Opera|Safari以!important为准 */

CSS DIV半透明
    filter: alpha(opacity=50); /*IE支持(范围0-100)*/
    opacity: 0.50; /*非IE支持(范围0-1)*/
    visibility: visible; /*是否可见[visible|hidden](IE/Firefox都支持)*/

CSS 手形鼠标
cursor:pointer;

设定图形上下左右留空
<img src="图形文件名" vspace="上下留空点数" hspace="左右留空点数">

input的图像标签
<input type="image" src="image.gif" alt="Submit">

accesskey和tabindex属性
    网站要兼顾更多情况下的使用，比如没有光标设备（如鼠标）的情况下，要让使用键盘操作也可以完成form的填写，这时候点击对于它们来说，已经没有任何意义。我们这个时候选用label的accesskey（快捷键，IE下为alt+accesskey属性值，FF下为alt+shift+accesskey属性值）和tabindex属性（Tab键，tabindex属性值为顺序）添加到表单标签上，如label，input等。
    <label for="fname">First name:</label>
    <input type="text" id="fname" name="fname" value="" accesskey="f" tabindex="1">
    或：<label for="name">姓名(<u>N</u>)：</label><input type="text" id="name" accesskey="n">
    <input type="radio" id="man" name="gender" value="1"><label for="man" accesskey="m">男(<u>M</u>)</label>
    <input type="radio" id="woman" name="gender" value="2"><label for="woman" accesskey="w">女(<u>W</u>)</label>

button标签
    按钮:在button元素内你可以放置内容, 像文本(text)或者图片(images). 这是这个元素和input元素按钮的区别.
    button相对于input提供了更多的功能与更丰富的内容. button将按钮文字单独出来, 并且可以在button内添加图片, 赋予文字和图片更多选择的样式, 使生硬的按钮变得更生动.
    并且使用button标签将比input按钮来得更有语义化, 简单的从字面意思也可以理解.
    <button>
        <img src="images/click.gif"/>Click Me!
    </button>

输入框禁输中文(并禁止粘贴)
<input type="text" name="textfield" οnpaste="return false;" style="ime-mode:disabled">

DIV滚动条
<div style="width:300;height:200;overflow-x:hidden;overflow-y:scroll">
<div style="width:300;height:200;overflow:auto;">