前端学习之样式设计

FED12 圆角边框实现

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

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

FED13 盒子模型设置

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

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

FED74 段落标识

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

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

FED75 文字颜色设置

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

p {color: red;
}

FED76 圣诞树实现

上枝叶(topbranch)实现：

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

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

中枝叶(middleBranch)实现：

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

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

树干(base)实现：

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

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