V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
Newyorkcity
V2EX  ›  问与答

请教前端的前辈们, HTML/CSS 如何进一步修炼呢?看书上给的代码(这本书主要讲的是 JS CSS/HTML 都是提供好的)觉得它生成的网页很不错,但一看 CSS 代码就觉得“哇,这怎么写出来的。。”

  •  
  •   Newyorkcity · 2017-08-16 13:45:40 +08:00 · 1486 次点击
    这是一个创建于 2664 天前的主题,其中的信息可能已经有所发展或是发生改变。

    那个网页的本来目的是教 JS 本地存储的 API 用的 能够在网页上贴便签,关掉来下次还能看见
    那个便签蛮好看的(颜色啊大小啊),角度略略有一点倾斜,然后鼠标悬停上去旋转角度会变化,并且会放大一些,挺动态。
    然后我去看 CSS 代码。。

    	-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
    	-moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
    	-o-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
    	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
    	-webkit-transition: all 0.5s ease-in;
    	-moz-transition: all 0.5s ease-in;
    	-o-transition: all 0.5s ease-in;
    	-ms-transition: all 0.5s ease-in;
    

    出现了很多这种内容,我也去网上查了一下自己设置一下看看。。
    然而我发现这个单个设置起来效果不是很明显,怎么说呢,感觉很难像其他 CSS 属性一样多用几次明白效果,记住了,以后就会用了,很玄学。。不知道这些内容自己该怎么去精通。
    emmm 还有一个问题就是发现自己虽然初步入门了 HTML/CSS,了解和背下了许多属性,然而还是有很多属性可能不算常用,但一旦用得好效果就很不错……可这些零零碎碎的属性能怎么办呢?就像背单词一样把它们也都背下来吗?
    谢谢!~

    8 条回复    2017-08-16 19:51:06 +08:00
    lwbjing
        1
    lwbjing  
       2017-08-16 13:53:32 +08:00
    多练... 找不同的结构、效果练...
    不用硬背,先熟悉一遍,把一些属性都了解一下,
    当你开始写的时候,比如你要圆角,你该用什么,你要其它的效果该怎么样。。
    hardensky
        2
    hardensky  
       2017-08-16 13:54:11 +08:00
    前端东西本来就很杂很多 记不清楚具体属性名或者用法也没关系,知道有这回事就行了 需要的时候能通过搜索引擎拾起来就行了

    不过楼主发的这个还算常用了,多看看 MDN 吧
    jy02534655
        3
    jy02534655  
       2017-08-16 15:33:00 +08:00
    这样的写就是为了处理兼容问题呀,不用记那么多,记住其中没前缀的那个用法就行了。你看他们的值都是一样的,你要是会用 sass 或者 less 可以写一个宏来处理这个的,比如说

    @mixin box-shadow($h-shadow,$v-shadow,$blur,$spread,$shadow-color) {
    $value: $h-shadow $v-shadow $blur $spread $shadow-color;
    -webkit-box-shadow: $value;
    -moz-box-shadow: $value;
    -ms-box-shadow: $value;
    box-shadow: $value;
    }

    然后
    @include box-shadow(0, 1px, 8px, 0,#f2f2f2);
    这样调用就不麻烦

    还有现在很多效果网上都有生成器,比如 http://code.ciaoca.com/想要什么效果直接用他提供的生成器生成一个就行了,不用考虑那么多...
    sivacohan
        4
    sivacohan  
       2017-08-16 15:53:08 +08:00 via Android
    你这都是带前缀的。
    你那个总共有四种前缀。
    第一次写的时候先写一种前缀的。写好了再去看兼容性。逐个加上去。
    以后写多了,这种固定的就直接复制粘贴再简单修改一下。
    等写的更多了,就有 less,sass 等预编译机制了。
    ipwx
        5
    ipwx  
       2017-08-16 16:12:13 +08:00
    推荐你用一些现代的打包工具。比如 webpack + postcss-loader + autoprefixer 可以自动加上必要的前缀。你只要写 box-shadow 就行了。
    Corbusier
        6
    Corbusier  
       2017-08-16 16:16:18 +08:00 via iPhone
    @ipwx 才开始学布局和样式怎么会用打包工具啊,哈哈。直接写,只用 chrome 测就行
    lneoi
        7
    lneoi  
       2017-08-16 16:19:27 +08:00
    去掉前缀实际上就两句。前端这东西跟写字一样,多用。没用就忘记了。一句一个效果,脑子里记住几个常用的组合,就能出来一些常用的效果了
    Newyorkcity
        8
    Newyorkcity  
    OP
       2017-08-16 19:51:06 +08:00
    @lwbjing
    @hardensky
    @jy02534655
    @sivacohan
    @ipwx
    @Corbusier
    @lneoi
    谢谢几位的建议!~
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2621 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 10:10 · PVG 18:10 · LAX 02:10 · JFK 05:10
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.