前端技术

前端技术:HTML CSS js/jQuery

  • CSS修改swiper幻灯片 - 状态圆点变长条修改

    CSS修改swiper幻灯片 - 状态圆点变长条修改

     在之前发布过关于swiper的文章《swiper幻灯片自定义切换三角特效》主要分享的是切换按钮的特效CSS,本文来介绍下swiper幻灯片插件的状态圆点样式改变!因为swiper幻灯插件都有默认的CSS,所以要添加CSS的时候是覆盖添加,添加的一定要显示在swiper自带CSS的下方方可生效!swiper默认的状态圆点状态图:要最终实现的效果如下:只需要改变和覆盖CSS样式即可:使用google chrome右键检查,获知....

  • CSS 中间文字、两侧居中横线(使用伪类before,after)

    CSS 中间文字、两侧居中横线(使用伪类before,after)

    中间文字 两边横线 CSS样式写法两边文字、中间横线的CSS写法本文再介绍一种关于文字与横线的关系,中间文字,两侧横线,主要方法:CSS伪类before,after制作左右横线中间文字效果HTML:<div class="container">     <h3 class="title">Welcome&nb...

    CSS学习 1个月前 164 0
  • 两边文字、中间横线的CSS写法

    两边文字、中间横线的CSS写法

    关于文字与横线之间的关系,之前写过一篇:CSS,中间文字 两边横线 CSS样式写法 如上图,本文要分享的是两边文字、中间横线的CSS写法,比较简单:HTML:<div class="title">    <span class="name"><i class="iconfont ...

    CSS学习 1个月前 127 0 横线
  • CSS修改swiper幻灯片自定义切换剪头特效(背景图、位置、背景色、尺寸)

    CSS修改swiper幻灯片自定义切换剪头特效(背景图、位置、背景色、尺寸)

    《zblog模板最好用的幻灯片(轮播、焦点图)特效代码》之前发布的幻灯片特效,推荐SuperSlide和swiper,今天来分享下老白常用的swiper自定义特效,包括切换大于号小于号,包括幻灯片文字标题:先看默认状态下的swiper幻灯片特效:一、改变剪头背景图片:其中左右切换三角都是使用背景图片制作的,而下方图片则是通过增加CSS去改变背景图片,以及切换圆点特效:CSS:/*slider*/ #slider{width:&nb...

    网页特效 1个月前 122 0 幻灯片swiper
  • CSS 多行文本最后省略号“...” /多行文本最后一行超出的部分隐藏并显示省略号的方法

    CSS 多行文本最后省略号“...” /多行文本最后一行超出的部分隐藏并显示省略号的方法

    网上很多的解决方法是针对一行超出部分,隐藏并显示省略号的,代码如下:overflow:hidden; white-space:norwrap; text-overflow:hidden;针对webkit浏览器,多行显示时可以通过以下css代码实现,但对于非webkit浏览器,这种写法没有效了。display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-or...

    CSS学习 2个月前 133 0 省略号
  • 用google JS实现让网页自动生成二维码

    用google JS实现让网页自动生成二维码

    首先,这种生成二维码用的是google,国内不可用,但还是分享出来学习下!这个实现二维码生成功能的是引用谷歌google的JS来实现的,可以兼容几乎所有浏览器,包括动态和静态网页,具有加载速度快的特点!可以使用手机浏览器,如UC,QQ浏览器,或手机软件我查查,魔码,微信等扫描就可以打开对应网页网址。<script>// <![CDATA[ thisURL = document.URL...

    网页特效 2个月前 208 0 二维码
  • 在企业站联系我们模板网页文件中加入动态地图显示方法!

    在企业站联系我们模板网页文件中加入动态地图显示方法!

    最近在做的事情是给一个刚起步的公司做一个官网来展示其企业相关的信息及产品信息。其中碰到一个需求就是在介绍企业的各种联系方式时需要在页面上给出一个在线的地图,地图上能够标示出企业的位置。如果让人从0开始我觉得没几个人能搞出来吧,不过百度地图开放平台提供了强大的工具帮助我们实现这个需求。按照下述几个步骤,你就能轻松地在自己的网页上嵌入一个百度地图啦(这里假设大家都有baidu账号了,没有的话赶紧注册吧)step1:获取密钥为了统一平台服务的...

    网页特效 2个月前 200 0 地图企业站
  • CSS,中间文字 两边横线 CSS样式写法

    CSS,中间文字 两边横线 CSS样式写法

    在项目中遇到过中间文字,两边横线的布局,如下图:两边横线我们可以使用标签的上边框或者下边框,然后对中间的文字使用 vertical-align 属性来控制。<div class="order">      <span style="white-space:pre">  &n...

    CSS学习 2个月前 434 0 横线
  • CSS 贯穿文字一条横线(类似删除线)

    CSS 贯穿文字一条横线(类似删除线)

    要在文字中间实现有一条横线的效果可以使用CSS中CSS text-decoration 属性就可以达到效果。CSS text-decoration 属性相关介绍及事例:浏览器支持:所有主流浏览器都支持 text-decoration 属性。定义、用法和说明:text-decoration 属性规定添加到文本的修饰。CSS text-decoration 属性的值:A、none    默认。定义标准的文本。B...

    CSS学习 2个月前 266 0 横线
  • JavaScript 模块化入门Ⅰ:理解模块

    JavaScript 模块化入门Ⅰ:理解模块

    作为一名JS初学者。假如你听到了一些诸如“模块化构建&模块化载入” “Webpack&Browserify” 或者 “AMD&CMD”之类的术语,肯定瞬间就凌乱了。JavaScript的模块化听起来挺深奥,可其实理解它对开发者来说特别实用。 在这篇文章里,我会尽量深入浅出地把这些深奥的术语翻译成浅显易懂的人话(加上一些代码示例)。希望你多少能从中学到点东西。 为了避免长篇大论,整个内容会分为两...

    js/jQuery 2个月前 153 0 模块化