前端初识css、字符串函数、地址栏参数获取、本地存储

1、移动端点击默认背景颜色

-webkit-tap-highlight-color:transparent;

移动端meta标签快捷键

meta:vp 按tab

2、<p contenteditable='true'>这是一段可以编辑的文字</p>

3、字符串函数

1>全局下的-符号 替换成/  str.replace(/-/g,'/')

2>全局下的换行符转化成<br>  str.replace(/\n/g,'<br>')

3>str.substring(开始位置,结束位置) 负数另说      eg:var str='name=testhhh';str.substring(0,str.indexOf('='))  结果为:键值name

4>substr()和substring的区别:

    eg: str='www.baidu.com'

str.substring(1,5) 从第一个字符到第五个字符之前 返回‘ww.b’

str.substr(1,5) 从第二个字符开始,截取五个字符 返回‘ww.ba’

5>slice()和substring()区别:

        一个参数时  str.slice(3)  从第四个开始,截取到最后 返回‘baidu.com’

6>split()

eg:str="https://baidu.com?id=2"

str.split("?") 以?为分隔线,分割返回为数组

4、地址栏常用 

1>location.href  当前url

2>location.search  eg:?name=test  当前url的参数部分

3>location.search.slice(1)  同上eg 则为参数部分 不包含?

4>location.hash    eg:#code        锚点

5、本地存储

1>存储到本地 localStorage.setItem('key值','value值')

2>获取本地存储key的value值  localStorage.getItem('key值')

6、CSS

1>input的placeholder颜色

input::-webkit-input-placeholder{color:#eee}

2>文本溢出显示省略号 ***宽高必须设

单行文本溢出显示省略号:{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

多行文本溢出显示省略号:{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}

3>div盒子内纯数字、英文自动换行 word-break:break-word;

4>select去除默认箭头,并换为某图片

select{

  /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/

  border: solid 1px #000;

outline: none;

  /*很关键:将默认的select选择框样式清除*/

  appearance:none;

  -moz-appearance:none;

  -webkit-appearance:none;

  /*在选择框的最右侧中间显示小箭头图片*/

  background: url(../images/bottoman.png) no-repeat 96.9%;

  /*为下拉小箭头留出一点位置,避免被文字覆盖*/

  padding-right: 14px;

}

/*清除ie的默认选择框样式清除,隐藏下拉箭头*/

.distpicker select::-ms-expand,.zcdist select::-ms-expand { display: none; }

5>左右模块宽度为50%,加上边框会掉下去

解:给左右模块加box-sizing:border-box

6>如何让Chrome浏览器支持小于12px的文字

span {font-size:12px;display:inline-block;-webkit-transform:scale(0.8)

6>pre标签换行对齐

white-space:pre-wrap; /* css3.0 */

white-space:-moz-pre-wrap; /* Firefox */

white-space:-pre-wrap; /* Opera 4-6 */

white-space:-o-pre-wrap; /* Opera 7 */

word-wrap:break-word; /* Internet Explorer 5.5+ */

text-align: justify;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容