web前端

readonly="true"  不能写入字
maxlength="10" 最多输入10个字
ist-style:none 去掉padding值
overflow: scroll; 出现滚动条
background-origin:content-box; 定位背景图片的位置

在 body 元素中设置两个背景图像:

body { background-image:url(img_flwr.gif),url(img_tree.gif); }

设置透明:
filter: alpha(opacity=70);
opacity: 0.7;
设置文字与文字之间的间隙
letter-spacing: 5px;
设置单词与单词之间的间隙
word-spacing:5px ;
设置去掉button按钮在ios上的默认样式
-webkit-appearance: none;
可以使用 transition-duration 属性来设置 "hover" 效果的速度:
transition-duration: 0.1s;
鼠标放上去变为小手:
cursor:pointer;
把点击button按钮时显示的阴影去掉
-webkit-tap-highlight-color:rgba(255,255,255,0);
禁止textarea缩放

resize:none;

select标签属性:
1 multiple 设置多选选择框
2 size 设置多选选择框显示的行数
3 options获取所有的option元素
4 selectedIndex 获取选中项的索引
5 selected 设置选中项
HTML <textarea> 标签的 wrap 属性
wrap 属性

通常情况下,当用户在输入文本区域中键入文本后,浏览器会将它们按照键入时的状态发送给服务器。只有用户按下 Enter 键的地方生成换行。

如果您希望启动自动换行功能(word wrapping),请将 wrap 属性设置为 virtual 或 physical。当用户键入的一行文本长于文本区的宽度时,浏览器会自动将多余的文字挪到下一行,在文字中最近的那一点换行。

wrap="virtual" 将实现文本区内的自动换行,以改善对用户的显示,但在传输给服务器时,文本只在用户按下 Enter 键的地方进行换行,其他地方没有换行的效果。

wrap="physical" 将实现文本区内的自动换行,并以这种形式传送给服务器,就像用户真的那样键入的。因为文本要以用户在文本区内看到的效果传输给服务器,因为使用自动换行是非常有用的方法。

如果把 wrap 设置为 off,将得到默认的动作。

适应手机端:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
做手机端页面body必须设置
不允许用户执行选中的操作
-webkit-user-select: none;
旋转屏幕的时候禁止调整文字大小
-webkit-text-size-adjust: none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
 
用来跳转到指定页面或者是获取当前页面的地址
location.href;
设置或者是获取锚点链接(以#开头)
location.hash;
给当前地址栏设置参数或者是获取当前地址栏的参数(以?号开头)
location.search;
html5
弹性盒:(谷歌)
display: -webkit-box;
-webkit-box-orient: vertical;垂直
display: -webkit-box;
-webkit-box-orient: horizontal;水平(默认)
-webkit-box-flex: 1;自动占满剩余的空间
overflow: scroll;加滚动条
弹性盒水平垂直都居中
-webkit-box-pack:center;
-webkit-box-align:center;
 
iscroll4默认情况下阻止浏览器的默认行为,在iscroll滚动的区域a标签input标签等会失效,需要我们重写方法来判断一下
iscroll5已经修正了浏览器的的默认行为,如果不是a标签input标签等它才会阻止浏览器的默认行为
 
flex-direction 顺序指定了弹性子元素在父容器中的位置。
flex-direction的值有:
row:横向从左到右排列(左对齐),默认的排列方式。
row-reverse:反转横向排列(右对齐,从后往前排,最后一项排在最前面。
column:纵向排列。
column-reverse:反转纵向排列,从后往前排,最后一项排在最上面。
 
justify-content 属性
内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐。
justify-content 语法如下:
justify-content: flex-start | flex-end | center | space-between | space-around
各个值解析:
flex-start:
弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线,而后续弹性项依次平齐摆放。
flex-end:
弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线,而后续弹性项依次平齐摆放。
center:
弹性项目居中紧挨着填充。(如果剩余的*空间是负的,则弹性项目将在两个方向上同时溢出)。
space-between:
弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项,则该值等同于flex-start。否则,第1个弹性项的外边距和行的main-start边线对齐,而最后1个弹性项的外边距和行的main-end边线对齐,然后剩余的弹性项分布在该行上,相邻项目的间隔相等。
space-around:
弹性项目平均分布在该行上,两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项,则该值等同于center。否则,弹性项目沿该行分布,且彼此间隔相等(比如是20px),同时首尾两边和弹性容器之间留有一半的间隔(1/2*20px=10px)。
 
在css文件中引入公共样式:
@import url("reset.css");
 
调整背景图大小:
background-size:宽 高
自动换算padding和margin值:
-webkit-box-sizing: border-box;
调整背景图片位置
background-position: 左右 上下;
 
border-radius可以同时设置1到4个值。如果设置1个值,表示4个圆角都使用这个值。如果设置两个值,表示左上角和右下角使用第一个值,右上角和左下角使用第二个值。如果设置三个值,表示左上角使用第一个值,右上角和左下角使用第二个值,右下角使用第三个值。如果设置四个值,则依次对应左上角、右上角、右下角、左下角(顺时针顺序)。
 
文字超出隐藏并显示省略号
overflow: hidden; /*自动隐藏文字*/
text-overflow: ellipsis;/*文字隐藏后添加省略号*/
white-space: nowrap;/*强制不换行*/
width: 20rem;/*不允许出现半汉字截断*/
 
滚动条进行隐藏:
overflow-y:auto;
&::-webkit-scrollbar{
width:0px;
}
 
 
 

placeholder是css3中表单元素input的一个占位符,适用于高级浏览器或者手机端的输入框的默认提示内容,通过下面几行代码就可以设置一个兼容的placeholder文字颜色。

修改所有的input

::-webkit-input-placeholder {
color: red;
}
:-moz-placeholder {/* Firefox 18- */
color: red;
}
::-moz-placeholder{/* Firefox 19+ */
color: red;
}
:-ms-input-placeholder {
color: red;
}

修改某个标签

#myInput::-webkit-input-placeholder {
color: red;
}
#myInput:-moz-placeholder {
color: red;
}
#myInput:-ms-input-placeholder {
color: red;
}
css旋转动画:
@-webkit-keyframes mycss{
0%{
background: #b7d2ff;
-webkit-transform:rotate(0deg)
}
25%{
background: blue;
-webkit-transform:rotate(72deg)
}
}
@keyframes(关键帧)作为CSS3动画的一部分,其该紧跟一个标识符(由开发者自定),此标识符将在其他CSS代码中引用。在@keyframes和标识符之后,就是一系列的动画规则(就像普通的CSS代码中声明的style规则)了。这一系列动画规则用大括号括起来隔开,然后再嵌在@keyframes之后的大括号里,类似其他@语法规则。
webkit表示这个动画效果只适用于webkit内核的浏览器,labelON就是这个动画里面关键帧的名字。
 
transform:rotate(45deg)(旋转45度,deg是degree的缩写,意为角度;当然这只是一个单位,还有别的单位,但不常用;你也可以直接采用数字而不用单位,这个数字会被自动转换为角度)
 
参考网址:http://www.cnblogs.com/happyPawpaw/archive/2012/09/12/2681348.html
 
 
 
 
上一篇:hdu Examining the Rooms


下一篇:浅谈DevExpress<一>:换肤