图片 2

两底角微卷起的投影效果,ajax在谷歌浏览器传入中文乱码的情况

.curved_box {      display: inline-block;      *display: inline;      width: 200px;      height: 248px;      margin: 20px;      background-color: #fff;      border: 1px solid #eee;      -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.06) inset;      -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;      position: relative;      *zoom: 1;  }    .curved_box:before {      -webkit-transform: skew(-15deg) rotate(-6deg);      -moz-transform: skew(-15deg) rotate(-6deg);      transform: skew(-15deg) rotate(-6deg);      left: 15px;  }    .curved_box:after {      -webkit-transform: skew(15deg) rotate(6deg);      -moz-transform: skew(15deg) rotate(6deg);      transform: skew(15deg) rotate(6deg);      right: 15px;  }    .curved_box:before, .curved_box:after {      width: 75%;      height:50%;      content: ' ';      -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);      -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);      position: absolute;      bottom: 10px;      z-index: -1;  }

<div class="curved_box"></div>

图片 1

有运营同学反映,后台编辑的一个中文显示名称,前台乱码了,于是乎~~

关键思路是以下三块:

lollytin
是一款帮助制作Bootstrap3主题的在线工具,虽然现在仍旧是Beta版本,但是已经非常不错了。

先看代码是否get请求没转码:

.curved_box:before;

.curved_box:after;

{content: ' '}

curved_box,  curved_box:before,  curved_box:after一共三个,

curved_box:before,  curved_box:after位于curved_box的“下面”(z-index: -1);


1.设伪类before和after,结合content属性。就相当于(注意是相当于,不是真的,可以这样理解)创建了两个盒子,其内容是content里面的内容,现在为空"".

2.定义这两个“盒子”的:

  置位:(position: absolute;z-index: -1;bottom: 10px;)

  形状:(transform: skew(15deg) rotate(6deg);box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);)

  大小:(width: 75%; height:50%;)

以下是效果图:

主要功能:

  • 通过拖拽来生成主题
  • 支持拖拽页头,页脚,内容,幻灯,地图,表单,画廊,服务和产品等模块
  • 支持生成javascript插件
  • 导出为HTML
  • 支持下载项目相关文件js,css等
$.ajax({
 type: 'POST',
 url: '/admin/updatedisplayname}',
 data: {displayName:displayName},
 success: function(res){
  alert(1);
 },
 error: function() {
  alert(2);
 },
 dataType: 'json'
})

图片 2

相关截图:

图片 3

阅读原文:超棒的在线Bootstrap主题编辑工具 – lollytin


这段代码不管怎么看,也没有问题,post请求过去的,应该不会存在乱码问题,自己测了下,修改回去了,没乱码(火狐)

 (大家可以试着改变:width: 75%; height:50%; 这两个属性值,就会发现下面确实有两个“盒子”,或者删除一个“盒子”curved_box:before的所有样式);

这是before,after,content的详解文章

奇怪~

发表评论

电子邮件地址不会被公开。 必填项已用*标注

标签:
网站地图xml地图