wangeditor如何获取内容样式_在页面排版中,你遇到过哪些问题,又是如何解决的呢?...

65c6fa9f83384862c251d96e2fb81c95.gif

点击上方蓝字关注我们!

bc38211e3ce2bbc06a5c613d3ccc664d.gif

导语

当我们根据设计师设计的网页设计图进行排版制作的过程中,或多或少会有一些版式,美观度,显示,功能,效果上的问题出现,那当这些问题出现的时候,我们该如何去处理解决呢?小编呢,在页面排版的过程中也遇到过一些问题,下面就来看看我是如何解决的,看看你在排版的时候有没有遇到过这些问题,说不定对你有帮助哟。 1452fafee56389d8ef03eed1c7e7d430.gif

1、input 显示历史搜索记录

当我们页面中有留言的时候,我们肯定要用到表单,可是有些浏览器有保留历史搜索记录的功能,而有的时候我们不想让我们的信息保留在输入框中(如图),那我们应该怎么办呢? f491218ed9c3f87953229b711532cfd3.png 遇到这种情况,我们可以在输入框添加一个属性autocomplete="off"(当这个属性值为off的时候,我们的历史记录就不会显示了)

2、select 样式兼容

002021e2e2acb91dd92f3dc861de6660.png e85ec320b665d645572c542b4491f6a9.png 当我们使用select这个标签的时候觉得自带的下拉箭头不好看想换一个,然而加了背景图片之后自带的箭头还是显示,那我们怎么让这个自带的下拉箭头消失呢,我有好办法哟。我们可以用样式清除。select::-ms-expand { display: none; }
select { 
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none; 
} 这样我们就可以设计新的下拉箭头图标放上去了,是不是很方便呢。

3、弹出框不滚动

在页面中我们会做弹出框的效果,如果内容超出了弹出框的高度,肯定要设置弹出框滚动,不然就会有内容看不到,可是有的时候会遇到弹出框内容不滚动的情况 d7fdeae84f6ba520be3c792237d9ce13.png 那我们在弹出框的样式中加入-webkit-overflow-scrolling : touch;就可以了。

4、移动端点击有底色

当我们做移动端的网站时,手指点击跳转的时候总有一个灰色的底色,显得不是很美观,如何去掉移动端点击的底色呢,只要在body样式里面加上一句就能解决了。body {
  -webkit-tap-highlight-color:transparent;
}

5、表单获取焦点样式

input 获取焦点时,有背景色,字要变成白色的 1a35779ee8365b2ec5814302cf5ee568.png902e33bd580409a9b010cf44108adea7.png input:focus::-webkit-input-placeholder {
   color: #fff;
}

6、表单placeholder不兼容

IE9以下input不显示框内placeholder的文字,我们可以用另一种方法就可以解决这一问题。value="输入您要搜索的关键字"  οnfοcus="if(value == '输入您要搜索的关键字') { value = '' }" οnblur="if(value == '') { value = '输入您要搜索的关键字' }" daf9468ce035a5b4d8a774fe216d28ff.png1944825f5d7b63dfa072ab52f8750514.png

7、文字阴影不兼容

我们在使用文字阴影的时候可能在IE下是不兼容的,这个时候我们可以用两段文字来代替阴影或者下面这种方法都是可以的哦。

    我是一个使用*content*属性生产的静态文字

8、移动端字号异常 

我们在做响应式的时候如果遇到移动端字号变大,类似table这种 912ef3a8575cab7f918a553945d0e25e.png -webkit-text-size-adjust: none;  样式加上这个 就好了哟。

9、inline-block布局小问题

当我们给两个li添加display:inline-block,并设置百分比浮动居左的时候,你会发现这两个li不在同一行显示 c8283d6b0df0d9656047233b683c74a6.png 可以在ul层级样式上加font-size:0;然后必须设置li 里面的一切标签的font-size,不然字会不显示哦。ul{
    font-size:0;
}
li{
    display:inline-block;
    width:50%;
} 以上就是小编在排版过程中遇到的一些问题,童靴们对你们有帮助吗,如果你还有其他的问题解决不了的,也可以来问小编哦, 说不定我就能帮到你呢。 94672b51a2d5e8b3a20694d48e1798ae.gif 43dcdbb8c174dcffa77642b07eaf47b5.gif留言板 2a2353b868a8f39c00a13e536072d3b5.png扫码关注我们

收获更多精彩内容

长按识别关注

来都来了,点个在看再走吧~~~

00e8a6793e17388917fe2601a58b3dc0.gif
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值