前端|刷题，巩固基础的好方法 css|html|前端

前言有时候当我们在学习一门技术时，明明在听老师讲课的时候已经懂了，跟着老师的节奏也能完成学习任务，但是当自己在设计一个程序的时候，要么是无从下手，要么是 bug 百出，但就是不知道哪里出错了，如何去调试。
那么问题出在哪呢？在我学习的过程中，常常会犯一些很基础、眼高手低的错误，我觉得归根结底是自己在课后的反思太少，当学完一个知识点的时候不会去亲自敲出来，而是模棱两可的过去了，长时间下来明明什么都学了，但是什么都不会，这就很焦虑了哈。。。
后来就在课本上找练习题做，但是答案就很不友好，仿佛看到了高中数学答案的“略”。。。

文章图片

这个时候，刷题网站就是一个很棒的选择，因为在刷题网站上我们可以通过补全代码或者编写一段和自己学习过程中所用到的相关函数的程序，来检验自己的不足在哪里，并且每当自己完成一个题目后，成就感也就上来啦！

文章图片

简单介绍刷题网站百度一下就有很多，只要肯亲手实践，相信我们会最大程度的利用好这些平台，去提升自己的技能！
有一个是我最开始用的刷题网站也是迄今为止也还在用的网站：牛客

https://www.nowcoder.com/exam/oj?page=1&tab=HTML%2FCSS&topicId=260&fromPut=pc_csdncpt_wlxfd_qianduan

我最开始利用牛客刷的是前端和数据库方面的题目，感觉还挺不错的，而且它将难易和题目类型写的很清楚，这样刷着刷着就上头了，很过瘾。而且在里面也有讨论交流区，当我们在遇到困难或者有独特的解题思路的时候都可以发表出来，毕竟，一群人，想法更多，走的也更远！
这是在线编程里面的HTML/CSS

文章图片

我们可以根据自己的需求去选择相应的题目，方便巩固练习。

文章图片

初次尝试后，真的会越做越上瘾，主要是可以用多种方法去解决问题，赞

文章图片

学练结合下面是我在牛客上做的练习和总结：
基础部分
form表单，很基础的啦，对于初学者来说是很不错的练习！

文章图片

``

加粗文字

文章图片
这个题目有多种方法，我们用js的方法实现一下：

let p = document.getElementsByTagName("p")[0]; //下标为0，获取p 中第一个元素 p.innerHTML = p.innerText.replace("牛客网", "牛客网"); //利用strong标签对文本进行加粗替换

进阶部分
CSS中的盒子模型

文章图片

type="text/css"> /*补全代码*/ .box{ height:100px; //盒子的高 width:100px; //盒子的宽 padding:20px; //盒子内间距 margin:10px; //盒子外间距 border:red 1px solid; //边框颜色大小类型为实线 }

字体颜色

文章图片

CSS 样式既可以作为单独的文件（.css类型的文件）引入到 HTML 文档中，也可以直接写在 HTML 文档中，大致分为如下四种方法：
行内样式：使用 HTML 标签的 style 属性定义 CSS 样式；
内嵌样式：使用 < style> 标签在 HTML 文档头部（和之间）定义 CSS 样式；
链接式：使用标签引入外部 CSS 样式表文件。
导入式：使用 @import 命令导入外部 CSS 样式表文件。

可以利用CSS中的选择器完成字体颜色的更改，当然如果想进一步尝试的话，利用js也是可以的：

let head = document.head; let style = document.createElement("style"); //创建一个style元素节点 style.type = "text/css"; style.innerHTML = "p{color:rgb(255,0,0); }"; //利用rgb 中的取值不同来将字体改为红色 head.appendChild(style);

【前端|刷题，巩固基础的好方法】CSS制作一个圣诞树

文章图片

type="text/css"> .topbranch { width: 0px; height: 0px; /* * TODO: 上枝叶效果 */ float: left; border-bottom: 100px solid green; border-top: 100px solid transparent; border-left:100px solid transparent; border-right:100px solid transparent; margin-left: 100px; } .middleBranch { width: 0px; height: 0px; /* * TODO: 中枝叶效果 */ border-top: 200px solid transparent; border-bottom: 200px solid green; border-left:200px solid transparent; border-right:200px solid transparent; } .base { /* * TODO: 树干效果 */ float: left; height: 200px; width: 70px; background-color: gray; margin-left: 165px; } class="topbranch"> class="middleBranch"> class="base">