快速回顾-CSS

2024/11/18 10:30:07 来源：https://blog.csdn.net/code_stream/article/details/141784579 浏览: 次关键词：快速回顾-CSS
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS66</title><style>/* 选择器 *//* h4 {color: red;}.classSelector {color: blue;}#idSelector {color: green;} *//* 类选择器分配样式 *//* .purple {color: purple;}.pink {color: pink;}.red {color: red;} *//* 布局 */.inline {display: inline;}.block {display: block;background-color: pink;width: 400px;height: 100px;}.inline-block {display: inline-block;width: 260px;}.none {display: none;}</style>
</head><body><!-- 选择器 --><!-- <h4>元素选择器</h4><p class="classSelector">类选择器</p><p id="idSelector">id选择器</p> --><!-- 类选择器分配样式 --><!-- <p class="purple">我希望这段文字是紫色的</p><p class="pink">我希望这段文字是粉红的</p><p class="red">我希望这段文字是红色的</p> --><!-- 布局 --><div>我独占一行</div><div>我独占一行</div><div class="inline">我被取消了独占一行</div><div class="inline">我被取消了独占一行</div><div class="inline">我被取消了独占一行</div><div class="inline">我被取消了独占一行</div><div class="inline">我被取消了独占一行</div><div class="inline">我被取消了独占一行</div><div class="inline">我被取消了独占一行</div><div class="inline">我被取消了独占一行</div><hr><span>我不独占一行</span><span>我不独占一行</span><span class="block">我被执行了独占一行</span><span class="block">我被执行了独占一行</span><span class="block">我被执行了独占一行</span><span class="block">我被执行了独占一行</span><hr><div class="inline-block">我不独占一行，且可以调节宽高</div><div class="inline-block">我不独占一行，且可以调节宽高</div><hr><div class="none">你看不到我</div><hr><div class="flex"><div class="item">项目</div><div class="item">项目</div><div class="item">项目</div></div></body></html>
快速回顾-CSS

最新新闻

热搜词
