HTML+CSS

前言：

关于我是如何进行HTML+CSS方面知识的学习的，在这里我给你们一些建议，就是不管学习什么技术手段，最重要的一点还是要花时间去进行实践。不管你看视频看多少，看文档看多少，这些对于你都是没有什么实际上的提升的，因为你并没有进行实际的操作，你的水平还是停留在理论方面，你还是一个纸老虎。那么问题来了，能不能在不进行打代码的情况下进行学习，我的回答是不能，没有任何程序员能够在不进行实际操作的前提下把自己的技术提升上来的。作为一个编程菜鸟，我认为只要你愿意花时间去进行代码的练习，你的技术就会慢慢的提升上来。不管你信不信，反正我是这么做的。

学习方式：

1、主要是通过对一些复杂网站的仿写来提升自己对于布局的水平
我之前是通过对淘宝和京东的仿写来提升自身的一些布局水平,作品就主要是这两个:[淘宝仿写],(https://download.csdn.net/download/weixin_43636361/18473859),[仿天猫],(https://download.csdn.net/download/weixin_43636361/18474110),主要是这两个.这两个如果都能够快速的布局完成,就说明你的实力有了一定的提升,如果感觉速度不够快,就建议多写几个网站提升一下自己的布局能力.

2、推荐多看下别人写的样式和页面布局,这样有利于提升你的鉴赏能力
多看下别人的写法和思路,开拓出自己的一套模式,大多数人都是沉迷于自己去摸索或者干脆全部都借鉴别人,这些都是我之前所犯过的错误,而且对于我本人来说也是影响挺大的,自行摸索肯定是一件好事,但是往往你会发现人家同样的一个布局,人家几行就搞定了,而自己却要写上一大堆的内容就为了实现一个简单的效果就比如下面的一个小案例:

 <div class="index">
        <div class="box">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>

        * {
            padding: 0;
            margin: 0;
        }

        .index {
            width: 100%;
            height: 100vh;
            background-color: black;
        }

        .box {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }

        .box div {
            width: 24%;
            height: 200px;
            margin-left: 1%;
            margin-top: 25px;
            background-color: while;
        }

        .box div:first-child,
        .box div:nth-child(5),
        .box div:nth-child(9) {
            margin-left: 0;
        }

这个是准备10个白色的盒子,我的意思是让它们每四个为一行,展示出来效果像下图:

为了区分明显,我给他们每个盒子都加了边距margin,但是看起来比较奇怪,因此这里我有需求,就是我想让每一行的第一个盒子和左边没有边距,然后第一行的盒子和上边也不能有边距,那么以我们最普通的写法来说应该是这样来实现的:

 		.box div:first-child,
        .box div:nth-child(5),
        .box div:nth-child(9) {
            margin-left: 0;
        }

        .box div:nth-child(1),
        .box div:nth-child(2),
        .box div:nth-child(3),
        .box div:nth-child(4) {
            margin-top: 0;
        }

这样子就实现了我们的需求,如下图:

目前看来是什么问题都没有,但是如果需求是一行100个盒子的时候,你的样式这样子写,你觉得是不是就非常的麻烦,不可能一个一个的选中元素,再给他去除边距吧,这样子写到什么时候呀,而且代码量非常的大,很难以维护,如果你是经常阅读人家的写法的情况下,你就会发现人家的写法肯定不是这样的,有经验的人总是会总结出一些简单的方式,这里我就提供一种我的比较简单的写法:

		.box div:first-child,
        .box div:nth-child(4n+1) {
            margin-left: 0;
        }

        .box div:nth-child(-n+4) {
            margin-top: 0;
        }

这样子是不是就优雅多了,这也是我看到别人的写法,然后总结出来的一种方式,不管你是100行,1000行,都是一样的意思,无非就是改变一下数字而已,多写多练,自然就会懂一些奇奇怪怪的技巧,大大的增快你的写代码的速度.

3、多练习,多思考
学习本来就没有什么捷径,普通人的差距都是差不多的,当然天才不参与讨论,我们都是差不多的智力,可能你会发现为什么有的人学的比自己快一些,其实都是因为他们有在努力,而你可能一直都只是在说而没有动手实践,刚开始可能你会觉得大家的差距差不多,等过了一段时间,你就会发现你们之间的差距越来越明显,你会抱怨说为什么自己比不上别人,试问,真的是比不上别人吗?

是不是自己的态度问题,是不是自己不够努力,是不是天天只会说而不去做导致的.发现了问题就要去解决它了,而不是一直留着,今天的问题只会是明天你前行的障碍.

学习时间：

这种东西根本就不适合别人推荐,只要你想学,什么时候不是学习的时间呀,只是你想不想学而已.

学习产出：

1、尽量一个星期更新一份总结
2、尽量多思考,多总结