当前位置:清晨 » css笔记

  • jq实现图片宽度自适应100%且图片高度等于图片宽度

    2018年12月08日 | 作者: 影子 | 评论数:0

    jq实现图片宽度自适应100%且图片高度等于图片宽度
    使用jq计算出宽度,再设置高度 ;(function($){ $(function(){ var $divWidth = $('xxx').width(); $('img').css({'height':$divWidth}); }) })(jQuery) 或者使用css3 img{width:100vw;height:100vw;}        

    标签:, , ,

  • CSS初始化重置样式

    2018年12月03日 | 作者: 影子 | 评论数:0

    CSS初始化重置样式
    CSS初始化样式是网页兼容各浏览器必备的一些样式. 出名的CSS初始化样式有YUI css reset和Erik Meyer’s CSS Reset。 YUI css reset网址: https://yuilibrary.com/yui/docs/cssreset/ Erik Meyer’s CSS Reset网址: https://meyerweb.com/eric/tools/css/reset/   YUI 3.18.1 (build f7e7bcb) /* YUI 3.18....

    标签:, ,

  • 超宽大图片全屏居中显示的方法

    2018年11月06日 | 作者: 影子 | 评论数:0

    超宽大图片全屏居中显示的方法
    现在很多网站的图片都设计成超宽图片,在小屏显示器上显示,会遇到显示不全,不居中显示的问题。 为了网站的美观和图片达到好的效果,我们要实现在超宽图片全屏居中显示,实现方法如下: <html> <head> <title>超宽图片全屏居中,超出部分自动隐藏</title> <style> .co...

    标签:

  • html特殊字符的html,js,css写法汇总

    2018年09月21日 | 作者: 影子 | 评论数:0

    html特殊字符的html,js,css写法汇总
    ⇠  箭头类 符号 UNICODE 符号 UNICODE HTML JS CSS HTML JS CSS ⇠ &#8672 \u21E0 \21E0 ⇢ &#8674 \u21E2 \21E2 ⇡ &#8673 \u21E1 \21E1 ⇣ &#8675 \u21E3 \21E3 ↞ &#8606 \u219E \219E ↠ &#8608 \u21A0 \21A0 ↟ &#8607 \u219F \219F ↡ &#8609 \u21A1 \21A1 ← &a...

    标签:

  • CSS实现动态边框效果

    2018年09月14日 | 作者: 影子 | 评论数:0

    CSS实现动态边框效果
    CSS实现动态边框效果     html代码 <a href="https://www.shadoweb.cn/news/?type=detail&amp;id=24" target="_blank"><img src="https://www.shadoweb.cn/news/common/upload/2018/08/14/04831T5.jpg" alt="谷歌推ads.txt解决方案,重拳打击虚假广告"><span class="line-effect...

    标签:

  • CSS实现中间向两边滑动下划线效果

    2018年09月11日 | 作者: 影子 | 评论数:0

    CSS实现中间向两边滑动下划线效果
    CSS实现中间向两边滑动下划线效果 html代码 <a class="link" href="https://wdja.cn">WDJA网站内容管理系统</a>   css代码 .link::before { content: ""; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; background-color: #000; visibility...

    标签:

  • CSS实现背景滑动显示的方法

    2018年09月11日 | 作者: 影子 | 评论数:0

    CSS实现背景滑动显示的方法
      html代码   <a href="https://wdja.cn"> <button> 查看详情<span>→</span> </button> </a>     css代码 a { display: block; padding: 8% 0 10%; } a button { overflow: hidden; position: relative...

    标签:

  • 如何解决wow.js与fullpage的兼容性

    2018年05月29日 | 作者: 影子 | 评论数:0

    如何解决wow.js与fullpage的兼容性
    项目需要做到全屏显示的同时还需要做到实时执行动画。但是发现在使用fullpage之后,wow.js不起作用。找了诸多资料,解决方法如下: $('#fullpage').fullpage({ verticalCentered:true, css3:true, paddingTop:70, anchors: ['page1', 'page2', 'page3], scrollBar: true, afterRender: function(){ wow = new ...

    标签:,

  • 使用vertical-align实现input和img对齐

    2017年03月26日 | 作者: 影子 | 评论数:0

    使用vertical-align实现input和img对齐
    将input和img放同一行,img标签总是比input高出一个头,非常难看。之前试过好多方法,都不行。后来在网站搜到最多的就是给img添加一个align="absmiddle"属性,这个方法似乎的确可行,但是不符合HTML标准。后来无意中发现同时给input和img添加vertical-align:middle就行:   input,img{vertical-align:mid...

    标签:

  • css3元素背景半色的实现方法

    -0001年11月30日 | 作者: 影子 | 评论数:0

    css3元素背景半色的实现方法
    css3元素背景半色的实现方法 background: -webkit-linear-gradient(transparent 60%, #ffff66 60%); /* Safari 5.1 to 6.0 */ background: -o-linear-gradient(transparent 60%, #ffff66 60%); /* Opera 11.1 to 12.0 */ background: -moz-linear-gradient(transparent 60%, #ffff66 60%); /* Firefox...

    标签: