rrkelee
V2EX  ›  V2EX

v2ex 扁平化 css

  •  1
     
  •   rrkelee · Oct 24, 2015 · 6339 views
    This topic created in 4029 days ago, the information mentioned may be changed or developed.

    *{
    border-radius:0 !important;
    box-shadow:none !important;
    background-image:none !important;
    }

    35 replies  •  2016-11-22 13:44:13 +08:00
    DIYgod
    DIYgod
    Oct 24, 2015
    1
    有理有据令人信服
    zrp1994
    zrp1994
    Oct 24, 2015
    2
    233333
    早起笑出声
    offer
    offer
    Oct 24, 2015
    3
    我想把楼主拍成扁平化。
    WildCat
    WildCat
    Oct 24, 2015 via iPhone
    4
    说得好我竟无言以对
    qbeenslee
    qbeenslee
    Oct 24, 2015 via iPhone
    5
    真是大道至简
    x86
    x86
    Oct 24, 2015
    6
    还蛮好看的
    DiagnosticError
    DiagnosticError
    Oct 24, 2015
    7
    已用
    des
    des
    Oct 24, 2015 via Android
    8
    @DIYgod 头像感觉好眼熟……
    DIYgod
    DIYgod
    Oct 24, 2015
    9
    @des 岁纳京子酱
    demo
    demo
    Oct 24, 2015
    10
    感觉回到了 IE7 的时代
    Smilecc
    Smilecc
    Oct 24, 2015
    11
    有理有据,令人信服,还真的挺好看的。。。
    Smilecc
    Smilecc
    Oct 24, 2015
    12
    @des 岁纳京子小时候,然后加了个圣诞帽
    h404bi
    h404bi
    Oct 24, 2015
    13
    直接明了,哈哈。
    然后访问些特别的节点就纯黑了 /go/bf3
    rrkelee
    rrkelee
    OP
    Oct 24, 2015
    14
    @h404bi 加一句
    #Wrapper{
    background-color:#e2e2e2
    }
    yemoluo
    yemoluo
    Oct 24, 2015
    15
    很好看
    Hello1995
    Hello1995
    Oct 24, 2015
    16
    个人偏好:
    .avatar {
    border-radius:50% !important;
    }
    kslr
    kslr
    Oct 24, 2015
    17
    你头像是钢琴家的主人公么
    rrkelee
    rrkelee
    OP
    Oct 24, 2015
    18
    @kslr 是的。
    jas0ndyq
    jas0ndyq
    Oct 24, 2015 via iPhone
    19
    新一期的程序员幽默
    a154312237
    a154312237
    Oct 24, 2015
    20
    @Livid 要不要打死楼主
    R18
    R18
    Oct 24, 2015
    21
    咋不在垲垲的群里玩了
    rrkelee
    rrkelee
    OP
    Oct 24, 2015
    22
    @R18 我在呀,只是不怎么说话。默默地看你们装逼 。
    huangtao728
    huangtao728
    Oct 24, 2015
    23
    有种在学校机房 IE6 上看 V2 的感觉...
    不过还挺好看的。
    sox
    sox
    Oct 24, 2015
    24
    搭车出史上最好看的 V2EX 自定义 CSS

    @import url('https://raw.avosapps.com/api/code/1X7h56B/raw?type=text/css');
    wavingclear
    wavingclear
    Oct 24, 2015
    25
    前两句已用,第三句杀伤力太强……
    AirSc
    AirSc
    Oct 24, 2015
    26
    这里需要一个截图。

    tobyxdd
    tobyxdd
    Oct 24, 2015
    27
    好看!
    lcxz
    lcxz
    Oct 24, 2015
    28
    简约 V2EX css


    Showfom
    Showfom
    PRO
    Oct 24, 2015
    29
    分享一下我的

    Bottom{box-shadow:0 0 4px rgba(0,0,0,0.14), 0 4px 8px rgba(0,0,0,0.28);}#Main .box:nth-child(-2n+4):not(.transparent){box-shadow:0 0 6px rgba(0,0,0,.16),0 6px 12px rgba(0,0,0,.32);}#Search div{background-image:none!important;border-image-repeat:repeat;border-image-slice:27 27 27 50;border-image-source:url( http://ki.ki.ki/kiki/2014/11/06/e114698d598aae747512c0ded89e0ce0.png);border-image-width:27px 27px 27px 50px;width:auto!important;}#Search input{transition:width .2s cubic-bezier(.4,0,.2,1);width:100px;}#Search input:focus{width:200px;}#Top{background-color:#4285f4;background-image:none;box-shadow:0 0 4px rgba(0,0,0,0.14), 0 4px 8px rgba(0,0,0,0.28);width:100%;}#Top .content{width:100%;}#Top a{color:#fff;font-size:14px;font-weight:700;outline:none;}#Top td:nth-child(1){left:10px;position:absolute;}#Top td:nth-child(1) a{background-image:url( http://ki.ki.ki/kiki/2014/11/06/3b36fb01e9465d183395f698d38c7e58.png);background-size:94px 30px;display:inline-block;height:30px;width:94px;}#Top td:nth-child(1) img{display:none;}#Top td:nth-child(2){position:absolute;right:10px;top:7px;}#Top td:nth-child(3){display:flex;text-align:left;width:970px;margin:6px auto;}#Wrapper{background-color:#ECEFF1;background-image:none;margin-top:10px;}.box,a.tab_current:link,a.tab_current:visited,a.tab_current:active,a.count_livid:link,a.count_livid:active,.vote:link,.vote:visited,.vote{border-radius:0;}.box:not(.transparent){border-bottom:none;box-shadow:0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.24);}.cell{border-bottom:1px solid #e5e5e5;}.collapsed{display:block;}.mll{background-color:#f6f6f6;border-bottom:1px solid #e5e5e5!important;margin-left:-10px;margin-top:-10px;width:660px;transition:background-color .2s cubic-bezier(.4,0,.2,1);border-style:none none solid!important;padding:10px;}.mll,.ml,.mle{border-radius:0;box-shadow:none!important;resize:none!important;}.mll:focus{background-color:#fff;}#topic_form{margin:-10px;}#topic_form td{padding:0;}#topic_form input[type=submit]{margin:10px;}#topic_title,#topic_content{border:none;border-bottom:1px solid #e5e5e5;width:660px!important;padding:10px;}.sl{border-radius:0;box-shadow:none!important;}.super.button{background-color:#78909c;background-image:none;border:none!important;border-radius:2px;box-shadow:0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24);color:#fff!important;display:inline-block;font-size:13px;font-weight:700;height:32px;line-height:30px;outline:none;text-shadow:none!important;transition:box-shadow .2s cubic-bezier(.4,0,.2,1),background-color .2s cubic-bezier(.4,0,.2,1);padding:0 16px;}.super.button:focus{background-color:#546e7a;box-shadow:0 0 6px rgba(0,0,0,.16),0 6px 12px rgba(0,0,0,.32);outline:none;transition:none;}.super.button:hover{background-color:#607d8b;box-shadow:0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28);transition:none;}.tag:link,.tag:visited,img.avatar{border-radius:2px;}.topic_buttons{background:#eee;border-radius:0;}a.balance_area:link,a.balance_area:visited,.balance_area{background:none repeat scroll 0 0 #f5f5f5!important;border-radius:0!important;}a.tb:hover{background-color:#ccc;border-radius:0;}balance_area:hover{background:none repeat scroll 0 0 #f9f9f9;}body{background-color:#ECEFF1;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif!important;min-width:1200px;}
    arfaWong
    arfaWong
    Oct 24, 2015
    30
    搜索框都看不到了
    kokdemo
    kokdemo
    Oct 24, 2015
    31
    ……看到这个想起来那段时间各种魔改 css 的东西了……

    https://github.com/kokdemo/v2ex.k
    haopic
    haopic
    Nov 22, 2016
    33
    @lcxz 求你的 V2EX 的自定义样式!
    lcxz
    lcxz
    Nov 22, 2016
    34
    @haopic

    #Bottom{border:none;}#Bottom>.content>.inner>.sep10{height:15px;}#Bottom>.content>.inner>.sep20{height:15px;}#Main{margin:0 279px 0 0;}#Main>.box.transparent{border:2px dashed #ccc;}#Main>.box>#Tabs{padding:25px 13px 0px 13px;}#Main>.box>#TopicsNode{margin-top:25px;}#Main>.box>.cell.item>table>tbody>tr>td:nth-child(4)>a{background:#d5d5d5;color:#fff;}#Main>.box>.cell.item>table>tbody>tr>td:nth-child(4)>a:visited{background:#f1f1f1;color:#d5d5d5;}#Main>.box>.cell.item>table>tbody>tr>td>span:nth-child(1)>a{color:#666;font-size:15px;}#Main>.box>.cell>.fr{position:relative;}#Main>.box>.cell>.fr>.tag{background:#eee;border:none;border-radius:100px;color:#999;}#Main>.box>.cell>.fr>a[href='#']{bottom:20px;margin-left:310px;position:fixed;}#Main>.box>.cell>.topic_content{letter-spacing:0.2px;line-height:1.8;}#Main>.box>.cell>.topic_content>.markdown_body{color:#666;}#Main>.box>.cell>.topic_content>.markdown_body>h2{border-bottom:1px dotted #ccc;font-weight:bold;margin-top:20px;}#Main>.box>.cell>.topic_content>h3{letter-spacing:0.2px;line-height:1.8;}#Main>.box>.header{border:None;overflow:none;padding:30px 20px 0px 20px;}#Main>.box>.header>.fr{right:20px;top:0px;transition:opacity 0.5s;}#Main>.box>.header>.fr:hover{opacity:1;}#Main>.box>.header>.fr>a>img{border-radius:5px;}#Main>.box>.inner:last-child{padding:10px 20px;}#Main>.box>.topic_buttons{background:#fafafa;color:#999;margin:15px 0 0 0;padding:5px 10px;}#Main>.box>.topic_buttons>a{color:#999;}#Main>.box>.topic_buttons>a.tb:hover{color:#000;}#Main>.box>.topic_buttons>div>a{color:#999;}#Main>.box>.topic_buttons>div>a:hover{color:#000;}#Main>.box>div.cell.item[style='border-top-left-radius:3px;border-top-right-radius:3px;']{margin-top:10px;}#Main>div.box:nth-child(2)>.cell{border:None;padding:15px 20px 5px 20px;}#Main>div.box:nth-child(2)>div[id^='n_']{border-bottom:1px solid #eee;padding:15px 20px 8px 20px;}#Main>div.box:nth-child(2)>div[id^='n_']>table>tbody>tr>td>a.node{background:none;color:#ccc;text-decoration:line-through;}#Main>div.box:nth-child(2)>div[id^='n_']>table>tbody>tr>td>div.payload{background:none;color:#999;letter-spacing:0.2px;line-height:1.6;}#Main>div.box:nth-child(2)>div[id^='n_']>table>tbody>tr>td>span.fade>a[href^='/t/']{font-weight:bold;}#Main>div.box:nth-child(4){margin:6px 0;}#Main>div.box:nth-child(8){margin-top:6px;}#Main>div.box>.cell.item{border-bottom:1px solid #f5f5f5;padding:10px 20px;}#Main>div.box>div.cell>div.reply_content{color:#999;font-size:10px;line-height:150%;margin-top:-8px;padding:0px 20px 5px 30px;text-align:left;}#Main>div.box>div.dock_area{background:#fff;margin-top:10px;}#Main>div.box>div.dock_area>table>tbody>tr>td>span.gray,#Main>div.box>div.dock_area>table>tbody>tr>td>span.gray>a{color:#666;font-size:13px;font-weight:bold;letter-spacing:0.5px;line-height:1.4;}#Main>div.box>div.inner{margin:0px;padding:0px;}#Main>div.box>div.inner>div.reply_content{border-bottom:1px solid #eee;color:#999;font-size:12px;line-height:150%;margin-bottom:10px;padding:0px 20px 15px 30px;text-align:left;}#Main>div.sep20{height:10px;}#Main>div:nth-child(2)>div:nth-child(2)[style='background-color:#f9f9f9;padding:10px 10px 10px 20px;']{background:#fff;border-bottom:3px solid #eee;border-radius:0px;margin:0px;padding:10px 20px 22px 20px;}#Main>div:nth-child(2)>div:nth-child(2)[style='background-color:#f9f9f9;padding:10px 10px 10px 20px;']>a{color:#c5c5c5;}#Main>div:nth-child(2)>div:nth-child(2)[style='background-color:#f9f9f9;padding:10px 10px 10px 20px;']>div>a{color:#c5c5c5;}#Rightbar{-moz-transition:opacity 1s,height 1s;-o-transition:opacity 1s,height 1s;-webkit-transition:opacity 1s,height 1s;margin-right:0px;overflow:hidden;transition:opacity 1s,height 1s;}#Rightbar div:nth-child(2) .cell:first-child table:nth-child(1) tr td:nth-child(1) img.avatar{-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;height:80px;max-height:80px;max-width:80px;width:80px;}#Rightbar:hover div.box{opacity:1;}#Rightbar>.box>.cell:first-child>table:first-child{color:#333;margin:0 auto;padding:30px 0 30px 0;width:auto;}#Rightbar>.box>.cell:first-child>table:nth-child(3)>tbody>tr>td:nth-child(2){border:none;}#Rightbar>.box>.cell:first-child>table>tbody>tr>td[width='10']{display:none;}#Rightbar>.box>.cell:first-child>table>tbody>tr>td[width='auto']{display:none;}#Rightbar>.box>div.cell[style='padding:5px;']>table>tbody>tr>td[width='10']{color:#666;font-size:13px;font-weight:bold;padding-right:5px;padding-top:3px;text-align:right;width:50%;}#Rightbar>.box>div.cell[style='padding:5px;']>table>tbody>tr>td[width='10']:before{content:'CREATE';}#Rightbar>.box>div.cell[style='padding:5px;']>table>tbody>tr>td[width='32']{display:none;}#Rightbar>.box>div.cell[style='padding:5px;']>table>tbody>tr>td[width='auto']{text-align:left;}#Rightbar>.box>div.cell[style='padding:5px;']>table>tbody>tr>td[width='auto']>a{color:#000;}#Rightbar>.box>div:nth-child(3)>div>a{padding:5px 0px 5px 10px;}#Rightbar>div.box{-moz-transition:opacity 0.5s;-o-transition:opacity 0.5s;-webkit-transition:opacity 0.5s;opacity:0;}#Rightbar>div.box:nth-child(2){opacity:1;}#Rightbar>div.sep20{height:10px;}#Rightbar>div:nth-child(2)>div:nth-child(1){border:none;}#Rightbar>div:nth-child(2)>div:nth-child(2){border:none;}#Rightbar>div:nth-child(2)>div:nth-child(2)>table>tbody>tr>td:nth-child(1),#Rightbar>div:nth-child(2)>div:nth-child(2)>table>tbody>tr>td:nth-child(2){display:none;}#Rightbar>div:nth-child(2)>div:nth-child(2)>table>tbody>tr>td:nth-child(3){background:#fafafa;border-radius:100px;padding:8px 20px;text-align:center;}#Rightbar>div:nth-child(2)>div:nth-child(3){padding:35px 0;}#Rightbar>div>div>table>tbody>tr>td[width='48']>a>img{max-height:100px;max-width:100px;}#Top{background:#fff;border:none;border-left:none;border-right:none;border-top:none;box-shadow:none;}#Top:hover .content>div>table>tbody>tr>td[width='110']{}#Top:hover .content>div>table>tbody>tr>td[width='570']{}#Top:hover .content>div>table>tbody>tr>td[width='auto']{}#Top>.content>div>table{position:relative;}#Top>.content>div>table>tbody>tr>td>a{color:#666;font-size:12px;text-shadow:none;}#Top>.content>div>table>tbody>tr>td>a:hover{color:#000;}#Top>.content>div>table>tbody>tr>td[width='110']{left:0px;}#Top>.content>div>table>tbody>tr>td[width='570']{left:120px;opacity:1;padding:0px;position:absolute;top:7px;width:auto;}#Top>.content>div>table>tbody>tr>td[width='auto']{opacity:1;position:absolute;right:1px;top:0px;}#Top>div>div>table>tbody>tr>td[width='120']{padding-top:3px;}#Top>div>div>table>tbody>tr>td[width='520']{float:left;margin-top:5px;text-align:left;}#Top>div>div>table>tbody>tr>td[width='520']>a{color:#777;margin-left:8px;}#Top>div>div>table>tbody>tr>td[width='auto']{float:right;margin-top:3px;}#Top>div>div>table>tbody>tr>td[width='auto']>div>form>div{background-size:270px 28px;width:270px;}#TopicsNode>.cell{padding:10px 20px;}#TopicsNode>.cell>table>tbody>tr>td[width='50']>.count_livid{background:#eee;color:#ccc;}#TopicsNode>.cell>table>tbody>tr>td[width='auto']>.item_title>a{color:#666;font-size:15px;}#Wrapper{background-color:#eeecf1;background-image:none;padding-bottom:10px;padding-top:10px;}#Wrapper>.content>#Main>.box>div[id^='r_']{padding:10px 20px;}#Wrapper>.content>#Main>.box>div[id^='r_']>table>tbody>tr>td>div.reply_content{color:#666;}#compose>div.cell>a{margin:5px 1px;padding:5px;}#money>a{background:none;}*{font-family:"Microsoft Yahei";}.box{background:#fff;border-bottom:none;border-radius:0px;box-shadow:none;}.box>.cell:first-child{color:#333;padding:13px 20px;}.box>.cell:first-child>span{color:#888;}.box>.cell>form>#topic_content{width:639px;}.box>.cell>form>#topic_title{margin-top:10px;width:639px;}.box>.cell>form[method="post"][action^="/t/"]{padding:10px 10px;}.box>.cell>form[method="post"][action^="/t/"]>#reply_content{background:#fff;border:1px solid #ddd;color:#333;width:638px;}.cell{border-bottom:1px solid #f5f5f5;}.dark:hover .bigger{color:#ccc;}.dark:hover .fade{color:#666;}.fa.fa-caret-right.gray,.fa.fa-chevron-up,.fa.fa-chevron-down,.fa.fa-tag,.fa.fa-building,.fa.fa-paper-plane,.fa.fa-eye{font-family:"FontAwesome","Microsoft Yahei";}.header{overflow:none;position:relative;}.header>.sep10{height:10px;}.header>div[id^='topic_']{}.header>div[id^='topic_']>a.vote{border:1px solid #eee;color:#ccc;padding:1px 8px;}.header>div[id^='topic_']>a.vote:hover{border:1px solid #ccc;color:#ccc;}.header>h1{color:#333;font-size:20px;font-weight:bold;letter-spacing:0.5px;margin:10px 0 0 0;}.header>small.gray{margin-left:-5px;}.highlight{padding:5px;}.item{background:none;}.no{background:#eee;color:#ccc;padding:5px 5px 3px 5px;}.outdated{border-left:5px solid #ddd;margin:18px 0 0px 0;}.problem{margin:15px 0 0 0;}.sep20{height:5px;}.small.fade>a{background:none;color:#ddd;font-weight:normal;}.small.fade>strong>a{background:none;color:#ddd;font-weight:normal;}.subtle{background:#fff;border-bottom:none;border-left:none;border-top:1px dotted #eee;margin:10px 20px -15px 20px;padding:18px 0;}.super.normal.button{background:#eee;border:none;box-shadow:none;color:#666;padding:5px 15px;text-shadow:none;}.super.normal.button:hover{background:#e5e5e5;color:#333;}a.tab_current:link,a.tab_current:visited,a.tab_current:active{color:#fff;}a.top:hover{color:#fff;text-shadow:1px 1px 0 #111;}a.top:link,a.top:visited,a.top:active{color:#777;font-size:15px;text-shadow:none;}a:link,a:visited,a:active{color:#888;}div[style='position:absolute;margin:-10px -10px 0px 650px;']{display:none;}
    haopic
    haopic
    Nov 22, 2016
    35
    @lcxz 感谢~~
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   2570 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 66ms · UTC 14:48 · PVG 22:48 · LAX 06:48 · JFK 09:48
    ♥ Do have faith in what you're doing.