网赚妈妈

 找回密码
 立即注册
搜索
查看: 394|回复: 14

[网赚是真的吗] 15个css常用技巧

[复制链接]
  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

    发表于 2018-9-10 20:15:31 | 显示全部楼层 |阅读模式
    C7FWONvwr2q6ocnz.jpg

    相信很多自学的小伙伴都想学习web前端,可以关注小编后私信【学习】可以免费领取学习地址/案例教程/2018最新的一套学习教程,让学习有方向。

    1、三角形列表项目符号

    ul { margin: 0.75em 0; padding: 0 1em; list-style: none;}li:before {  content: ""; border-color: transparent #111; border-style: solid; border-width: 0.35em 0 0.35em 0.45em; display: block; height: 0; width: 0; left: -1em; top: 0.9em; position: relative;}

    2、外部CSS3 盒阴影

    #mydiv {  -webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52); -moz-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52); box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);}

    3、内部CSS3 盒阴影

    #mydiv {  -moz-box-shadow: inset 2px 0 4px #000; -webkit-box-shadow: inset 2px 0 4px #000; box-shadow: inset 2px 0 4px #000;}

    4、CSS3 斑马线

    tbody tr:nth-child(odd) { background-color: #ccc;}

    5、强制出现垂直滚动条

    html { height: 101% }

    6、内容垂直居中

    .container { min-height: 6.5em; display: table-cell; vertical-align: middle;} 

    7、CSS3:全屏背景

    html {  background: url('images/bg.jpg') no-repeat center center fixed;  -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}

    8、锚链接伪类

    a:link { color: blue; }a:visited { color: purple; }a:hover { color: red; }a:active { color: yellow; }

    9、为logo隐藏H1

    h1 { text-indent: -9999px; margin: 0 auto; width: 320px; height: 85px; background: transparent url("images/logo.png") no-repeat scroll;}

    10、自定义文本选择

    ::selection { background: #e2eae2; }::-moz-selection { background: #e2eae2; }::-webkit-selection { background: #e2eae2; }

    11、跨浏览器的透明

    .transparent { filter: alpha(opacity=50); /* internet explorer */ -khtml-opacity: 0.5; /* khtml, old safari */ -moz-opacity: 0.5; /* mozilla, netscape */ opacity: 0.5; /* fx, safari, opera */}

    12、新版清除浮动(2011)

    .clearfix:before, .container:after { content: ""; display: table; }.clearfix:after { clear: both; }/* IE 6/7 */.clearfix { zoom: 1; }

    13、典型的CSS清除浮动

    .clearfix:after { content: ".";  display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }.clearfix { display: inline-block; }html[xmlns] .clearfix { display: block; }* html .clearfix { height: 1%; }

    14、制造模糊文本

    想要让文本模糊?可以使用color透明和text-shadow实现

    .blurry-text { color: transparent; text-shadow: 0 0 5px rgba(0,0,0,0.5);}

    15、CSS:表格列宽自适用

    对于表格,当谈到调整列宽时,是比较痛苦的。然后,这里有一个可以使用的技巧:给td元素添加white-space: nowrap;能让文本正确的换行

    td { white-space: nowrap;}

    对前端有兴趣或者正在学习web前端的小伙伴,可以私信小编【学习】即可免费领取2018最新的一整套系统web前端学习教程!

    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-9-10 20:16:36 | 显示全部楼层
    建议贴个效果图会更好点
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-9-10 20:20:46 | 显示全部楼层
    收藏了
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-9-10 20:25:44 | 显示全部楼层
    学习
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-9-10 20:30:46 | 显示全部楼层
    转发了
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-9-10 20:35:24 | 显示全部楼层
    Java屎壳瑞特[机智]
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-9-10 20:39:36 | 显示全部楼层
    转发了
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-9-10 20:43:42 | 显示全部楼层
    转发了
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-9-10 20:48:29 | 显示全部楼层
    转发了
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    慵懒
    2018-9-19 13:15
  • 签到天数: 16 天

    [LV.4]偶尔看看III

     楼主| 发表于 2018-9-10 20:53:31 | 显示全部楼层
    转发了
    回复 支持 反对

    使用道具 举报

    xml|2.xml|QQ3014497968|文章发布|签到|小黑屋|网赚论坛-致富项目网络赚钱平台 |网站地图

    GMT+8, 2019-10-18 04:33 , Processed in 0.158606 second(s), 15 queries , File On.

    Powered by Discuz! X3.3

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表