V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
lingoys
V2EX  ›  分享发现

V2EX 自定义 CSS

  •  1
     
  •   lingoys · 2015-02-14 23:36:28 +08:00 · 3696 次点击
    这是一个创建于 3573 天前的主题,其中的信息可能已经有所发展或是发生改变。

    部分代码来源: http://www.v2ex.com/t/168103
    第一次发帖好紧张 [
    可能好多地方疏忽了,或不好看欢迎拍砖。

    Well 代码:
    ```css
    :root, input, textarea, button {
    -webkit-font-smoothing: antialiased;
    }

    html, body { height: 100%; }
    
    body {
    background: url(https://unsplash.it/1600/900?random) #eee no-repeat fixed center;
    background-size: cover;
    font: 400 18px/1.62 "Georgia", "Xin Gothic", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei", sans-serif
    }
    
    #Top {
    position: fixed;
    top: 0;
    left: 0;
    width: 150px;
    height: 100%;
    box-sizing: border-box;
    padding: 10px 20px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.34);
    }
    
    #Top .content {
    width: 100%;
    margin: 0;
    }
    
    #Top .content table {
    display: block;
    width: 100%;
    }
    
    #Top .content table tbody,
    #Top .content table tbody tr,
    #Top .content table tbody tr td,
    #Top .content table tbody tr td a {
    display: block;
    }
    
    #Top .content table tbody tr td a {
    line-height: 1.2;
    }
    
    #Top .content table tbody tr td {
    width: 100%;
    text-align: left;
    height: 30px;
    }
    
    #Top .content table tbody tr td[align=right] a:first-child {
    margin-top: 40px;
    }
    
    #Search > form > div {
    margin: 20px -20px;
    width: 150px!important;
    height: 30px!important;
    background: transparent!important;
    transition: .3s ease;
    -webkit-transition: .3s ease;
    }
    
    #Search > form > div:hover {
    background: #eee;
    }
    
    #Search > form > div > input {
    padding: 2px 20px;
    width: 100%;
    margin: 0;
    height: 30px;
    border: 1px solid #E7E7E7;
    border-left: 0;
    border-right: 0;
    box-sizing: border-box;
    }
    
    #Wrapper {
    margin-top: -2px!important;
    background: transparent!important;
    }
    
    #Wrapper > .content {
    width: 100%!important;
    padding-left: 170px!important;
    padding-right: 20px!important;
    box-sizing: border-box;
    }
    
    #Main {
    margin-right: 340px;
    margin-left: 50px;
    }
    
    .box {
    color: #222!important;
    background: rgba(255, 255, 255, .97)!important;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, .14)!important;
    border-radius: 0!important;
    border-bottom-color: transparent!important;
    }
    
    .cell {
    border-color: transparent!important;
    }
    
    .cell table tr td:nth-child(3) a[href="/new"] {
        padding: 7px 20px;
        background: #f2f2f2;
        border-radius: 20px;
        margin: 0 78px 0 0;
        float: right;
        margin-bottom: 20px;
    }
    
    .cell table tr td:nth-child(3) a[href="/new"]:hover {
    background: #fff;
    }
    
    .fade {
    color: #ababab!important;
    }
    
    .item_node {
    background: #fdfdfd;
    }
    
    .item_node:hover {
    background: #fff;
    }
    
    .topic_content, .reply_content {
    color: #222!important;
    }
    
    img.avatar {
    border-radius: 50%;
    }
    
    .topic_buttons {
    background: #eee;
    padding: 10px 8px; 
    }
    
    a.balance_area:link, a.balance_area:visited, .balance_area {
    background: #eee;
    }
    
    .mll {
    width: 100%;
    box-sizing: border-box;
    box-shadow: none;
    border-radius: 0;
    }
    
    .mll, .sll, .mle {
    background-color:#fff!important ;
    border-color: #EEEEEE!important;
    }
    
    .normal.button {
    background: #eee!important;
    }
    
    .cell, .header {
    border-color: #eee!important;
    }
    
    .dock_area {
    background: #edf3f5!important;
    }
    
    #Rightbar {
    margin-right: 50px;
    }
    
    #Rightbar div:nth-child(2) .cell:first-child table:nth-child(1) tr td:nth-child(1) {
        text-align:center;
    }
    #Rightbar div:nth-child(2) .cell:first-child table:nth-child(1) tr td:nth-child(2),
    #Rightbar div:nth-child(2) .cell:first-child table:nth-child(1) tr td:nth-child(3),
    .sep20, img[src*="flat_compose.png"] {
        display:none;
    }
    #Rightbar div:nth-child(2) .cell:first-child table:nth-child(1) tr td:nth-child(1) img.avatar {
        width: 80px;
        height: 80px;
        max-width: 80px !important; 
        max-height: 80px !important;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        margin-top: 15px;
    }
    #Rightbar div:nth-child(2) .cell:first-child table:nth-child(3) {
        padding-bottom: 15px;
        padding-top: 15px;
    }
    #Rightbar .box div:nth-child(1) {
        border-bottom:0px;
    }
    
    #Bottom {
     position: absolute;
     z-index: 999;
    width: 100%;
    border: 0;
    color: #fff;
    margin-top: -2px;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .5);
    box-shadow: -1px -1px 3px rgba(0,0,0,.25);
    background: url(https://unsplash.it/1600/900?random) #eee no-repeat fixed center;
    background-size: cover;
    }
    
    #Bottom > .content {
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
    background: rgba(255, 255, 255, .23);
    }
    
    #Bottom .fade,
    #Bottom a{
    color: #fff!important;
    }
    
    // 广告屏蔽 不推荐这么做 [
    #topics_index+div+div, #Rightbar div+div+div+div {
    display:none;
    }
    
    第 1 条附言  ·  2015-02-15 00:55:37 +08:00
    现在你可以直接这样使用: @import url("//mikangchan.b0.upaiyun.com/v2ex.css");
    13 条回复    2015-02-15 09:28:18 +08:00
    mikangchan
        1
    mikangchan  
       2015-02-14 23:44:52 +08:00
    赞赞赞
    mikangchan
        2
    mikangchan  
       2015-02-14 23:44:59 +08:00
    前排跪舔
    Dukec
        3
    Dukec  
       2015-02-14 23:45:02 +08:00
    已用,点个赞。
    yangkeao
        4
    yangkeao  
       2015-02-14 23:46:59 +08:00
    Great,话说我做的时候真的不知道右边怎么处理比较好,你这样看起来很不错~~
    mikangchan
        5
    mikangchan  
       2015-02-14 23:49:12 +08:00
    代码:@import url("//mikangchan.b0.upaiyun.com/v2ex.css");
    oldcai
        6
    oldcai  
       2015-02-14 23:50:59 +08:00
    呀,我上镜了O(∩_∩)O
    楼层和回复的楼层一样。
    lingoys
        7
    lingoys  
    OP
       2015-02-14 23:51:05 +08:00
    @yangkeao 啊,其实我也不知道这么做 [我也是随便乱上的。

    @mikangchan @Dukec 感谢~
    yangkeao
        8
    yangkeao  
       2015-02-15 00:10:43 +08:00
    @lingoys 这么说是因为和我那个好像https://www.v2ex.com/t/170260

    主要是右边,想到一块去了~~~那时我就不知道右边怎么处理,直接display:none了,搞的发帖和提醒都很不方便~~
    lingoys
        9
    lingoys  
    OP
       2015-02-15 00:48:58 +08:00
    ← 于是好冷,果然渣渣么
    shuding
        10
    shuding  
       2015-02-15 00:56:57 +08:00
    赞赞赞!
    lingoys
        11
    lingoys  
    OP
       2015-02-15 01:01:19 +08:00
    @shuding 菊苣乃壕~
    Mihuwa
        12
    Mihuwa  
       2015-02-15 07:36:24 +08:00 via iPhone
    支持。
    sqbing
        13
    sqbing  
       2015-02-15 09:28:18 +08:00
    很不错,提点建议:
    1. 左侧边栏过宽
    2. 搜索栏加个放大镜更直观
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3269 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 12:40 · PVG 20:40 · LAX 04:40 · JFK 07:40
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.