牛客前端宝典——刷题 ##Day3

🍀作者简介：在校大学生，为前端方向努力拼搏的一名追梦人。

🍁个人主页：亦世凡华、

🫒系列专栏：牛客前端宝典

🍂想要和博主一起学习前端或想巩固自己知识，可以点击链接：牛客网推开自己的世界之门。

🏍️任性的要求我从来没提过，只想你能每天关注我。

🥥前言：

🏆编程就像我们平常做题一样，如果只是一味的学习不去做题的话所得到的效果微乎其微。因此我也是在网上寻找了很多题库但一直用的不舒心，直到找到了牛客，我才找到了学习做题的乐趣，不仅其能够很系统的将所学知识点梳理学习，也因其代码整洁题解清楚明了让人很快掌握知识。为此我是愿意和大家分享出来，一起学习。

今天我们讲解零基础入门前端类型的题库：点个关注我们继续走下去。

描述1：按要求画一个圆

请将html模块的div元素设置为一个半径是50px的圆，且边框为1px的黑色实线。
要求：
1. 圆角属性仅设置一个值
2. 圆角属性单位请使用px
注意：由于圆角属性设置广泛且都可以实现题目效果，所以请按照要求规范书写。

根据题目要求通过css完成一个半径为50px的圆，在css中通常将圆的直径设置为某个盒子的宽度和高度，再通过border-radius设置盒子四个边角的弧度。border的使用，后期CSS专栏会讲到，如果对CSS不熟悉的人，可以关注一下 CSS专栏，现在。。。解：

描述2：设置盒子宽高

请将html模块类为”box”的div元素宽度和高度都设置为100px，且内间距为20px、外间距为10px。

根据题目所示，只要求设置盒子的内外边距和宽高就行，这没什么说的了，非常简单的进行设置就可以了，如果你还对盒子进行设置还不够了解可以看一下我对浮动的讲解，那里会说到：CSS浮动现在。。。解：

描述3：段落标识

请将下面这句话以段落的形式展示在浏览器中——“牛客网是一个专注于程序员的学习和成长的专业平台。”

根据题目所示，一开始的思路就是把这句话给一个 p 标签包裹起来，解决问题。

但是发现题目上有javascript选项，所有这题应该是通过JS来解决问题。

采用DOM元素的操作方法：

采用DOM节点操作方法：

描述4：设置文字颜色

请使用嵌入样式将所有p标签设置为红色文字

根据题目提示，使用嵌入式样式, style写在这里不符合通常的做法，所决定用JavaScript实现:

描述5：圣诞树

圣诞节来啦！请用CSS给你的朋友们制作一颗圣诞树吧~这颗圣诞树描述起来是这样的：
1. “topbranch”是圣诞树的上枝叶，该上枝叶仅通过边框属性、左浮动、左外边距即可实现。边框的属性依次是：宽度为100px、是直线、颜色为green（未显示的边框颜色都为透明）
2. “middleBranch”是圣诞树的中枝叶，该上枝叶仅通过边框属性即可实现。边框的属性依次是：宽度为200px、是直线、颜色为green（未显示的边框颜色都为透明）
3. “base”是圣诞树的树干，该树干仅通过左外边距实现居中于中枝叶。树干的宽度、高度分别为70px、200px，颜色为gray。
注意：
1. 上枝叶、树干的居中都是通过左外边距实现的
2. 没有显示的边框，其属性都是透明（属性）
3. 仅通过border属性完成边框的所有属性设置
效果如下：

根据题目所示，本题主要考察了border元素和浮动的使用，现在。。。解：

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style 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;
            }
        </style>
    </head>
    <body>
    	<section class="topbranch"></section>
        <section class="middleBranch"></section>
        <section class="base"></section>
    </body>
</html>