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
 
 
 
 

web前端的更多相关文章

  1. Web前端需要熟悉大学里【高大上】的计算机专业课吗?

    作为一名刚刚大学毕业,进入新的学习阶段的研究生,我必须说大学的专业课非常重要!不管你信不信,事实就是如此! 一.大学学习的专业课非常重要,它决定了我们能走到什么高度 前端的发展非常快,我常常觉得刚刚关 ...

  2. web前端开发分享-目录

    1. web前端开发分享-css,js入门篇 2. web前端开发分享-css,js进阶篇 3. web前端开发分享-css,js提高篇 4. web前端开发分享-css,js工具篇 5. web前端 ...

  3. Web前端温故知新-CSS基础

    一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...

  4. web前端的春天 or 噩梦

    「 微信应用号可以做什么」 简单说,微信"小程序"可以为开发者提供基于微信的表单.导航.地图.媒体和位置等开发组件,让他们在微信的网页里构建一个 HTML 5 应用.同时微信还开放 ...

  5. Web 前端开发精华文章推荐(jQuery、HTML5、CSS3)【系列十二】

    2012年12月12日,[<Web 前端开发人员和设计师必读文章>系列十二]和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HT ...

  6. 也许你需要点实用的-Web前端笔试题

    之前发的一篇博客里没有附上答案,现在有空整理了下发出来,希望能帮助到正在找工作的你,还是那句话:技术只有自己真正理解了才是自己的东西,共勉. Web前端笔试题 Html+css 1.对WEB标准以及w ...

  7. 用grunt搭建web前端开发环境

    1.前言 本文章旨在讲解grunt入门,以及讲解grunt最常用的几个插件的使用. 2.安装node.js Grunt和所有grunt插件都是基于nodejs来运行的,如果你的电脑上没有nodejs, ...

  8. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

  9. [转载]Web前端开发工程师编程能力飞升之路

    [背景] 如果你是刚进入web前端研发领域,想试试这潭水有多深,看这篇文章吧:如果你是做了两三年web产品前端研发,迷茫找不着提高之路,看这篇文章吧:如果你是四五年的前端开发高手,没有难题能难得住你的 ...

  10. web前端开发中常用的尺寸和位置

    我们在日常web前端开发过程中,会经常用到各种尺寸和位置.通常是js做动画的时候.轮播图,滚屏动画,粒子,碰撞检测,拖拽,滚动加载等等.这里我将常用的尺寸和位置的获取进行总结,不包括canvas,SV ...

随机推荐

  1. 解决服务器SID引起虚拟机不能加入AD域用户,无法远程登录的问题

    最近在公司搭建AD域控制器,发现无法在计算机真正添加域用户,也就是添加的用户虽然可以在本地登录,但是无法远程登录,尝试多种方法都无法解决,而最终原因居然是虚拟机导致的服务器的SID冲突.本文记录下该问 ...

  2. 打印发现function toUpperCase() { [native code] }

    var s='hello' undefined s.toUpperCase function toUpperCase() { [native code] } s.toUpperCase() " ...

  3. Json.NET读取和写入Json文件

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  4. iOS开发需要哪些图片?

    1.产品设计图 可以以6的长宽比 750*1134来设计.这些图片用于描述app是什么样子的,这是app开发人员的开发参考. 2.产品切图 将设计师将设计稿切成可以用来开发的图 颜色值 iOS颜色值取 ...

  5. Android 学习心得 TextView 添加垂直滚动条

    XMl文件中: 添加android:scrollbars="vertical" 添加android:maxLines="10"  //设置一页最多显示10行 a ...

  6. AtomicInteger源码注释

    AtomicInteger源码 在java.util.concurrent.atomic包下提供了大量的原子类,这里以AtomicInteger源码为例,添加了一些注释,个人理解,供参考: 其中比较重 ...

  7. IoC容器Autofac(5) - Autofac在Asp.net MVC Filter中的应用

    Autofac结合EF在MVC中的使用,上一篇IoC容器Autofac(4) - Autofact + Asp.net MVC + EF Code First(附源码)已经介绍了.但是只是MVC中Co ...

  8. 从零自学Hadoop(06):集群搭建

    阅读目录 序 集群搭建 监控 系列索引 本文版权归mephisto和博客园共有,欢迎转载,但须保留此段声明,并给出原文链接,谢谢合作. 文章是哥(mephisto)写的,SourceLink 序 上一 ...

  9. Android 通过Uri获取Bitmap对象

    (转自:http://blog.sina.com.cn/s/blog_5de73d0b0100zfm8.html) private Bitmap getBitmapFromUri(Uri uri) { ...

  10. logback配置详解1

    一:根节点<configuration>包含的属性: scan: 当此属性设置为true时,配置文件如果发生改变,将会被重新加载,默认值为true. scanPeriod: 设置监测配置文 ...