当前位置:清晨 » css笔记

  • css中设置display:inline-block造成换行间距的解决方法

    2019年07月12日 | 作者: 影子 | 评论数:0

    css中设置display:inline-block造成换行间距的解决方法
    原因   因要做导航菜单,logo也同在一行,使用display:inline-block进行操作.出现间距,常用方法无法清除. 经过网上查询,使用了一个最简单的方法. 在上级元素中设置 font-size:0;/*清除使用inline-block造成换行符间隙*/ -webkit-text-size-adjust:none;/*清除换行间隔*/   然后子级元素记得设置文字大...

    标签:

  • CSS3 box-sizing 属性

    2019年07月06日 | 作者: 影子 | 评论数:0

    CSS3 box-sizing 属性
    Internet Explorer、Opera 以及 Chrome 支持 box-sizing 属性。 Firefox 支持替代的 -moz-box-sizing 属性。   兼容性写法   box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webkit-box-sizing:border-box; /* Safari */

    标签:

  • 背景透明文字不透明的例子

    2019年07月05日 | 作者: 影子 | 评论数:0

    背景透明文字不透明的例子
      背景透明文字不透明的例子   <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>背景透明,文字不透明</title> <style> *{ padding: 0; margin: 0; } body{ padding: 50px; background: url(img/bg.png) 0 0 re...

    标签:

  • 网页灰色代码 网页去除彩色代码 网页黑白代码

    2019年05月06日 | 作者: 影子 | 评论数:0

    网页灰色代码 网页去除彩色代码 网页黑白代码
    使用方法: html{ filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: url("d...

    标签:

  • 背景透明,内容不透明的方法

    2019年01月07日 | 作者: 影子 | 评论数:0

    背景透明,内容不透明的方法
    background-color:rgba(0,0,0,0.2); filter:Alpha(opacity=20); *zoom:1;     IE6 IE7 IE8 IE9 标准浏览器 rgba ✘ ✘ ✘ ✔ ✔ filter : Alpha ✔ ✔ ✔ ✔ ✘   或者使用两个标签,绝对定位的方式实现

    标签:

  • 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;}        

    标签:, , ,

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

    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...

    标签: