学习完html,css,js,jq之后做网页心得

  经过5天的快速学习之后，我开始学着做网页了，有一些心得体会，在这里记录一下。

  快速学习只是为了知道在真正实战的时候，你可以知道你想要的东西到底在哪里，这样就可以快速地进行查找到你所需要的东西。快速学习不是为了将所有你看到的东西全部都记住，而是有一个大概的印象。在真正实战的时候确实是这样的：在实战做网页的过程中，我基本都是一边做一遍查的，有时候连网页的背景都要查一下怎么调大小。但是我可以很清楚的知道他们在w3school的哪里，这样我在做的时候并没有费很大的功夫。

  在做网页的时候，首先接触的是bootstrap。这是一个很好的网站：因为如果靠自己的力量是做不出一个很优秀的网页的，如果只是自己写css，当然可以做，但是这个很费时间的。所以我在做的时候，用的是bootstrap的模板。以此为依据进行创造。我觉得在别人写的基础上把他转化成你自己想要的也是一个挑战。

  我做的第一个页面是登录界面，使用的bootstrap的登录模板。在修改的时候用到了火狐的调试器（就是在网页上按F12会出现一个-界面），里面的查看器是一个很好的工具。因为根据这个工具，一切的网页在你眼中都是“可见”的，你可以在右边看到他的css样式，可以在上面进行修改来看看能否达到你想要的效果，这个可谓是做网页的神器。下面就写一下用调试器的心得吧。

  在做登录界面的时候，我借鉴了西工大翱翔门户的登录界面的样式。然后在西工大的登录界面上用调试器看一下它的css的样式是什么样的，然后打开西工大的css复制了head-top-box的css然后把它加到我自己的css文件中，然后将html也一并复制，但是你会发现它的位置是不对的，这是因为我的网页和西工大的网页的body大小是不一样的，所以导致了它的位置是不一样的。但是如果你改你自己的body的大小，然后把head-box调到了顶部，但是这是时候会发现登录界面的位置就被确定死了，这个是有就不能改body了。你要改的是head-box-top的参数。我在改的时候用的是position，改成absolute然后在慢慢调整。然后就是登录框的调整了，用的是同样的方法，如果遇到不能修改的地方（就是修改css文件的参数不起作用{具体原因我感觉是应为文件的路径问题，调试器会告诉你你要修改的css的路径，如果修改的不是这个路径，那么实际上是没有作用的}），那么在这个时候，可以点调试器右边的元素，在那里面改参数，实际上是用内联的方法修改参数。当然如果你可以准确的找到所对应的css文件，那么你是可以在里面修改的。但是你会发现在txt里面看css简直就是一种煎熬。还好在txt里面可以用查找(CTRL+F)然后把页面上的你要修改的地方的名字复制并进行查找，一般都可以找到，然后修改就行了，如果不行，就用上面的方法，用内联来改。修改到合适的时候就可以复制粘贴，是复制到你的html的相应的地方。

  做完登陆界面之后，我在网上找了一个css3的模板，然后做了主页面，css3的动画很炫酷，就是用ul做了一本书然后实现了翻书的效果，真的被惊艳到了。只有深入学习才能自己做自己想要的效果吧，要不然永远都是用别人的，这不是我的风格。

  做完主页面之后然后做了一个点歌的页面。这个只有导航栏是用的bootstrap的模板，剩下的都是自己做的，也是我经过前面两个页面之后自己独立做的一个网页。歌单我用的是表格，但是一般的歌单用的都是ul，然后在li里面加一个div，然后完成一个歌单。但是我开始并没有这样写，在修改的时候就发现了问题，不能整体进行改动，只能一个一个进行修改，这也就是为什么一般歌曲网站用的都是ul吧。还有就是修改hover。说实话，Bootstrap的hover是真的不好看，尤其是有下划线。但是我碰到的问题是，hover是写在less文件里面的，可是我在修改less文件的时候不起作用。于是只能骚操作了。我在自己的html文件中写了hover的格式，然后在每一个后面加上一个!importan，表示相同文件的时候这个是最重要的，也就是优先用你写的style。然后就可以修改颜色和去掉下划线了。还有就是如果用背景图片的话，我是直接在body里面使用的，这样做是不好的。但是如果非要在body里面写的话，大小不够的话，可以使用badckground-attachment:fixed来进行固定，这样不管怎么滑动都是可以的了。还有一点就是可以用background-position的百分比来进行定位，这个是用在页面的高度如果比较大的时候，这个时候如果使用center来定位的话其实不是在你视线的中间而是在整个页面的中间，这个时候可以用background-position:50% 0%来定位。

  在做网页的时候主要都是靠调试器。真的很好用，很适合初学者快速入门。