分类目录归档：DIV+CSS

层叠样式表布局

swiper滑动门插件中文网

https://www.swiper.com.cn/

Swiper 根据宽度响应式的显示不同的个数

var swiper = new Swiper('.swiper-container', {
  slidesPerView: "auto",
  spaceBetween: 40,
  breakpointsInverse: true,
  breakpoints: { 
    //当宽度大于等于320
    320: {
      slidesPerView: 2,
      spaceBetween: 10
    },
   //当宽度大于等于480
    480: { 
      slidesPerView: 3,
      spaceBetween: 20
    },
    //当宽度大于等于640
    640: {
      slidesPerView: 4,
      spaceBetween: 30
    }
  }
})

如何使用CSS在鼠标悬停时缩放图像？

.geeks {

width: 300px;

height: 300px;

overflow: hidden;

margin: 0 auto;

}

.geeks img {

width: 100%;

transition: 0.5s all ease-in-out;

}

.geeks:hover img {

transform: scale(1.5);

}

js 替换中文字符串【】等特殊中文符号的方法 replace() （实用）

最近碰到一个js替换（移除）字符串中的中文字符以及特殊的中文字符 “【” 和 “】” 等
搜罗之下没有找到可行的解决办法：经过摸索实测以下方法有效
如

var foo = ‘【你好】,【世界】’;
//想要替换foo中的【】为指定字符串或者空，可以使用unicode的方法
foo= foo.replace(/\u3010/g,””);// \u3010 指的是【的unicode编码
foo= foo.replace(/\u3011/g,””);// \u3011 指的是】的unicode编码

关于以上的【】等特殊符号的unicode的编码的转换可以
去unicode编码转换

http://tool.chinaz.com/tools/unicode.aspx

页面进行转换获取

以上代码运行的结果是
你好,世界

css如何让不确定宽度的div水平居中

最近有2个同学都问到了一个类似的问题：就是不确定宽度的div如何只用css实现水平居中。所以就选择这个问题来写一下解决方法！

很多时候我们在布局的时候无法确定div的宽度，所以无法用 margin:0 auto;来实现水平居中，那么问题来了：不确定宽度的div，如何用css水平居中？

html代码如下：

</div>

假设分页数目不确定，可能是2页，也有可能是5页等！

css代码如下：

.pages{ float: left; position: relative; left: 50% }

.pages span{ float: left; position: relative; left: -50%}

对父元素设置float：left，相对定位position：relative；left：50%；子元素float：left，相对定位position：relative；不过left：-50%

demo图：

代码很简单，原理也不难理解，轻松实现不确定宽度的div水平居中！

网页制作中html5和微信小程序切图的区别

在做html5切图和小程序切图的时候，有哪些区别？其实本质差不多，小程序的样式文件wxss 对css做了少许改变，小程序的wxml则是 xml的基础上做了小许改变，所以如果你对html5/css3足够了解的话，在小程序代码中看到大量的html5的影子。

但是需要了解html5和微信小程序的不同切图的规则。

一、微信小程序和HTML5的标签区别：

网页制作中html5和微信小程序切图的区别

二、wxss 选择器

HTML5 微信小程序

div（标签选择器） view、text、icon、input、image、navigator（标签选择器）

class(类选择器) class

id(id选择器)（效率最高） id(效率最高)

element,element(层级选择器) element,element(层级选择器)

：after（伪类选择器）：after ：before

：frist-child等：frist-child等(不建议（工具过滤易导致页面错乱）)

.class .class .class .class(不建议（工具过滤易导致页面错乱）)

群组选择器群组选择器

后代选择器后代选择器

三、placeholder的区别

小程序中可以直接给placeholder添加样式

四、自适应区别

1、我们用html5写自适应的话需要用到百分比或是函数计算比例，但小程序可以让我们避免了这个麻烦，我们可以用rpx，在ipoone6的开发环境下，1rpx=0.5px;我们采用这个单位就可以在完成后，省掉兼容的一部分问题了。（当然我这里面没有考虑到）

2、这里有个开发中可能遇到的坑，由于背景图是全覆盖的，所以这里可以在wxss文件中添加语句：.indexBox{height:100%;} page{height:100%} 都需要设置，要不然没法自适应，注意大小写。

建材网站建设解决方案

如何定位和展现建材企业的网络形象？让消费者能有全面清晰的认知？

如何表现建材企业的特色和服务品质，以区别于同行，获得更多精准消费者的认可？

如何利用网站与线下销售相结合，将消费者带到网络上，享受更好的服务，并长期粘滞住消费者？

如何通过网络营销带来更多的消费者，形成大面积良好的口碑效应，让消费者安全放心地消费？

建材行业网站建设的服务范围

网站定位分析及建议，包含网站策划布局和结构，形成一整套解决方案；

建材行业网站的形象界面创意设计以及DIV前台结构布局；

系统性的架构策略、程序模块功能分析、运营维护策略、培训及知识转移计划等；

可延展性分析、可扩充性考虑以及系统稳定性分析报告；

网站运营维护方案。根据企业的管理模式，建议网站日常信息提供、审核、发布的一整套运转方案，协助企业高效管理网站；

网站的营销推广计划，网站运维策略及网站价值分析、盈利情况分析等等；

建材网站建设模块设置

项目	模块内容详情
个性化页面建设	建材网站的页面设计应符合产品及其客户的需求：建材的厚重，钢铁的银白，营销的热情等等。建材网站可自由编辑物品上下架、装修、调价及促销广告。
检索	（1）产品搜索：能让顾客按关键字、类别、促销宝贝、品牌、价格区间来组合搜索宝贝。保证每个页面都有搜索条。（2）热门搜索词管理：顾客在搜索条内输入信息时，自动弹出下拉菜单显示热门搜索词。可仿照淘宝。
相关商品	在某件商品描述底部或者侧栏展示相关产品推荐。
购物车	仿照淘宝购物车的方式。进入购物车后，可查看商品单价，可进行商品数量修改、删除。
商品上传	建材网站所有者可进行单件商品上传，也可进行批量上传，上传后的宝贝可进行管理。
商品分类	目前主营产品家居建材、日后产品类型会拓展。所以后台可进行商品大类的新增与管理，并能根据自己需要设置3级子分类。
支付方式	采用支付宝网银在线支付方式，网银在线自动转账支付业务。
流量统计	安装百度统计，cnzz等第三方平台统计代码方便查阅数据。
排行榜	前台首页显示“销售排行榜”和“点击排行版”，为顾客提供购买参考信息。
商品排序	在顾客浏览商品时，可根据价格、新品、销量、人气对商品进行排序。
在线客服	载入QQ做客服沟通工具（QQ必须具备管理员与店铺后台沟通，店铺与买方沟通，商城客服沟通）
订单管理	可浏览、修改、关闭订单的详细信息
库存提醒	可设置当某件商品库存低于多少件时，进行库存提醒。
缺货登记	缺货的商品系统能自动登记，也可人工手动添加。
促销模板	提供多种促销模板以保证建材网站各种促销活动，以下几个必须具备：送、券、礼、分、折、免
可拓展版块	可以随着业务的需求，拓展一些新的版块，如话费充值和买火车票、汽车票等。
友情链接	提供相关网站的友情链接。

点击导航，滑动到网页中的指定位置（JS实现滑动锚点定位）

$(function () {

//获取城市模块到顶部的距离

var city_top = $(‘#city_top’).offset().top;

$(‘.city_li’).click(function () {

$(‘html,body’).animate({scrollTop:city_top},500);

})

</script>

宝塔官方的教程使用的是阿里云的主账号 AccessKeyId。本文所讲述的是通过 RAM 访问管理新建子帐号 AccessKey，对官方教程进行一定的补充。

定时备份到 OSS 的好处：异地容灾备份，一旦机器出现毁灭性故障，网站数据不会丢失。
阿里云 OSS：提供高可用的数据储存服务。

宝塔官方的教程（https://www.bt.cn/bbs/thread-1061-1-1.html）使用的是阿里的主账号 AccessKeyId。而主账号的 AccessKeyId 具有账户的完全控制权限，如果泄露了有很大的安全问题。本文所讲述的是通过 RAM 访问管理新建子帐号 AccessKey，对官方教程进行一定的补充。

一、阿里云的配置

登陆主账号，前往 OSS 资源管理平台。

1.1 新建一个Bucket

名称随便写，地域最好选择离你服务器最近的节点。
Tips: 阿里 OSS 储存的费用：
1, 中国大陆无免费额度，按量计费，可以买储存包抵扣。
2, 中国大陆以外地区总共有 5GB 免费储存额度，超出部分按量计费，可以买储存包抵扣。
3, 只是用于备份的话不会产生公网流量的计费。
注意 OSS 的访问权限为私有，落地加密最好开启一下，聊胜于无也不收费。其他功能都不需要开启。

1.2 新建用户组

鼠标移动到头像处，在展开菜单中打开 RAM 访问管理页面：

新建一个用户组：

创建成功后点击新增用户组后面的“添加权限”，并在系统策略中搜索OSS，添加AliyunOSSFullAccess和AliyunOSSReadOnlyAccess权限，并保存。

1.3 创建用户

创建一个用户，记得勾选编程访问!!!!

创建成功后保存展示的子用户AsscessKey ID和AccessKey Secret到安全的地方，然后将这个用户添加到我们上一步新建的用户组中。如果您有多台服务器需要开启OSS备份功能，请为每一台机器建立一个子用户，并加入到我们建立的用户组中。

至此，阿里云的子用户和用户权限已经配置完成。

二、宝塔面板设置

1. 登陆宝塔面板，在软件管理中安装阿里云 OSS（免费）
2. 点击程序末尾的 “设置”，在如下页面填写您的 OSS 信息。
OSS 信息的填写可以参考宝塔官方教程，这里的 AccessKey ID 和 AccessKey Secret 我们填写刚才所记录的子用户密钥。
如果你有多台服务器需要备份，保存路径建议重命名一下，让每台路径不相同，方便后续的文件查找与管理。

3.最后在每台服务器的计划任务中配置定时备份网站到阿里云OSS即可。
建议的网站备份时间: 每三天一次，深夜进行。保留2份及以上。
建议的数据库备份时间：每天一次，深夜进行。保留5份及以上。

以后每当某台服务器不再计划使用时，您应该前往阿里云控制台停用相关的 AccessKey 或者删除相关的子账户。这样做既能保证安全，也不会影响其他机器自动备份的进行。

某个js启蒙写法

$(document).ready(function() {
// 兼容菜单
$(".head .nav_xl_a").click(function () {
    if ($(".nav_xl_a").hasClass("a1")) {
        $(".nav_xl_a").removeClass("a1");
        $(".nav_xl").css("height","0px");
        $(".nav_xl ul").removeClass("l1");
    } else {
        $(".nav_xl_a").addClass("a1");
        $(".nav_xl").css("height","100vh");
        $(".nav_xl").css("background","black");
        $(".nav_xl ul").addClass("l1");
    }
    return false;
});
$(".head .nav_xl .ceng").click(function () {
    $(".nav_xl").css("height","0%");
    $(".nav_xl_a").removeClass("a1")
    $(".nav_xl ul").removeClass("l1");
    $(".page_nav_xl").removeClass("page_nav_hover").find('ul').stop(true,true).slideUp();
});

// 兼容菜单下拉
$('.page_nav_xl').click(function() {
    if($(this).hasClass("page_nav_hover"))
    {$(this).removeClass("page_nav_hover").find('ul').stop(true,true).slideUp();}
    else
    {$(this).addClass("page_nav_hover").find('ul').stop(true,true).slideDown();}
});

//底部二维码
$('.footer .media .wx').hover(function(){
    $(this).find('.code').stop(true,true).fadeIn();
},function(){
    $(this).find('.code').stop(true,true).fadeOut();
});
});

index.min.js 下载

一个内容管理系统CMS的技术分享中心-ShuoHi CMS

分享，收集一切有意思 ShuoHi CMS

分类目录归档：DIV+CSS

swiper滑动门插件中文网

Swiper 根据宽度响应式的显示不同的个数

如何使用CSS在鼠标悬停时缩放图像？

js 替换中文字符串【】等特殊中文符号的方法 replace() （实用）

css如何让不确定宽度的div水平居中

网页制作中html5和微信小程序切图的区别

一、微信小程序和HTML5的标签区别：

二、wxss 选择器

三、placeholder的区别

四、自适应区别

建材网站建设解决方案

点击导航，滑动到网页中的指定位置（JS实现滑动锚点定位）

宝塔官方的教程使用的是阿里云的主账号 AccessKeyId。本文所讲述的是通过 RAM 访问管理新建子帐号 AccessKey，对官方教程进行一定的补充。

一、阿里云的配置

1.1 新建一个Bucket

1.2 新建用户组

1.3 创建用户

二、宝塔面板设置

某个js启蒙写法