前端学习之样式设计

折翼的恶魔2025-10-12 8:44

FED12 圆角边框实现

设置一个半径为50px的圆，边框为1px黑色实线，宽度和高度为100px：

html 复制代码

div {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    border: 1px solid black;
}

FED13 盒子模型设置

设置类为"box"的div元素宽高为100px，内间距20px，外间距10px：

html 复制代码

div.box {
    width: 100px;
    height: 100px;
    padding: 20px;
    margin: 10px;
}

FED74 段落标识

使用<p>标签包裹文本内容：

html 复制代码

<p>牛客网是一个专注于程序员的学习和成长的专业平台。</p>

FED75 文字颜色设置

通过嵌入样式设置所有<p>标签文字为红色：

html 复制代码

p {
    color: red;
}

FED76 圣诞树实现

上枝叶(topbranch)实现：

通过边框属性创建三角形效果
左浮动和左外边距实现定位

html 复制代码

.topbranch {
    width: 0px;
    height: 0px;
    border: 100px solid transparent;
    border-bottom: 100px solid green;
    float: left;
    margin-left: 100px;
}

中枝叶(middleBranch)实现：

仅通过边框属性创建更大的三角形

html 复制代码

.middleBranch {
    width: 0px;
    height: 0px;
    border: 200px solid transparent;
    border-bottom: 200px solid green;
}

树干(base)实现：

固定宽高的矩形
通过左外边距实现居中

html 复制代码

.base {
    width: 70px;
    height: 200px;
    background-color: gray;
    margin-left: 165px;
}