“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 16 天，点击查看活动详情”

FED12 按要求写一个圆

描述

请将html模块的div元素设置为一个半径是50px的圆，且边框为1px的黑色实线。
要求：

圆角属性仅设置一个值
圆角属性单位请使用px
注意：由于圆角属性设置广泛且都可以实现题目效果，所以请按照要求规范书写。

 <style type="text/css">
            div{
                width:100px;
                height:100px;
                border-radius:50px;
                border:1px #000 solid ;
            }
  </style>

FED13 设置盒子宽高

描述

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

<style type="text/css">
            div{
                height:100px;
                width:100px;
                padding:20px;
                margin:10px
            }
        </style>

FED74 段落标识

描述

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

DOM元素操作法

//1.获取元素
let bd = document.querySelector('body');
//2.设置元素内容
bd.innerHTML = '<p>牛客网是一个专注于程序员的学习和成长的专业平台。</p>'

DOM节点操作法

//1. 创建元素节点
let p = document.createElement('p');
//2. 创建文本节点
let text = document.createTextNode('牛客网是一个专注于程序员的学习和成长的专业平台。');
//3. 给元素p添加文本节点
p.appendChild(text);
//4. 将p元素节点追加为body元素的子节点
document.body.appendChild(p);

FED75 设置文字颜色

描述

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

<p style="color:red">欢迎来到牛客网</p>
<p style="color:red">在这里，我们为你提供了IT名企的笔试面试题库</p>
<p style="color:red">在这里，我们以题会友</p>

CSS 样式代码插入的形式基本可以分为以下3种：内联式、嵌入式和外部式三种。

也可以用DOM实现代码

// JavaScript
let pArr = document.getElementsByTagName('p')
for(let i = 0; i < pArr.length; i++){
    pArr[i].style.color = 'red'
}
// jQuery
$('p').css('color','red')

FED76 圣诞树

描述

圣诞节来啦！请用CSS给你的朋友们制作一颗圣诞树吧~这颗圣诞树描述起来是这样的：

"topbranch"是圣诞树的上枝叶，该上枝叶仅通过边框属性、左浮动、左外边距即可实现。边框的属性依次是：宽度为100px、是直线、颜色为green（未显示的边框颜色都为透明）
"middleBranch"是圣诞树的中枝叶，该上枝叶仅通过边框属性即可实现。边框的属性依次是：宽度为200px、是直线、颜色为green（未显示的边框颜色都为透明）
"base"是圣诞树的树干，该树干仅通过左外边距实现居中于中枝叶。树干的宽度、高度分别为70px、200px，颜色为gray。
注意：
上枝叶、树干的居中都是通过左外边距实现的
没有显示的边框，其属性都是透明（属性）
仅通过border属性完成边框的所有属性设置

效果如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            .topbranch {
                width: 0px;
                height: 0px;
                float:left;
                border-left:100px solid transparent;
                border-right:100px solid transparent;
                border-top:100px solid transparent;
                border-bottom:100px solid green;
                 margin-left: 100px;
            }
            .middleBranch{
                width: 0px;
                height: 0px; 
                border-left:200px solid transparent;
                border-right:200px solid transparent;
                border-top:200px solid transparent;
                border-bottom:200px solid green;
                
            }
            .base {
                width: 70px;
                height: 200px;
                margin-left: 165px;
                background-color:gray;
            }
        </style>
    </head>
    <body>
    	<section class="topbranch"></section>
        <section class="middleBranch"></section>
        <section class="base"></section>
    </body>

牛客CSS习题2