Laravel  
laravel
文档
数据库
架构
入门
php技术
    
Laravelphp
laravel / php / java / vue / mysql / linux / python / javascript / html / css / c++ / c#

css2

作者:你忘我亡   发布日期:2026-03-16   浏览:50

/* CSS2 示例代码 */

/* 选择器示例 */
body {
    background-color: #f0f0f0; /* 设置页面背景颜色 */
}

h1 {
    color: #333; /* 设置标题文本颜色 */
    text-align: center; /* 居中对齐标题 */
}

p {
    font-family: Arial, sans-serif; /* 设置段落字体 */
    line-height: 1.6; /* 设置行高 */
}

/* 盒模型示例 */
.box {
    width: 200px; /* 设置宽度 */
    height: 100px; /* 设置高度 */
    padding: 10px; /* 内边距 */
    border: 1px solid #ccc; /* 边框 */
    margin: 20px; /* 外边距 */
}

/* 定位示例 */
.positioned {
    position: absolute; /* 绝对定位 */
    top: 50px; /* 距离顶部50px */
    left: 100px; /* 距离左边100px */
}

/* 浮动示例 */
.float-left {
    float: left; /* 向左浮动 */
    width: 100px;
    height: 100px;
    background-color: #ccc;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both; /* 清除浮动 */
}

解释说明:

  1. 选择器body, h1, p 是常见的 HTML 元素选择器,用于选择特定的 HTML 元素并应用样式。
  2. 盒模型.box 类展示了如何使用 width, height, padding, border, 和 margin 来控制元素的尺寸和间距。
  3. 定位.positioned 类使用了 position: absolute 来绝对定位元素,并通过 topleft 属性指定位置。
  4. 浮动.float-left 类展示了如何使用 float 属性使元素向左浮动,而 .clearfix 类则展示了如何清除浮动以避免布局问题。

以上代码是 CSS2 中常用的一些特性和属性的示例。

上一篇:css加粗样式怎么写

下一篇:css好看艺术字样式

大家都在看

css好看的字体

css 红色

css 瀑布流布局grid

css盒子

css三种引入方式

换行 css

css文字超长省略号

css图片铺满整个背景

css背景图铺满

css 渐变字体

Laravel PHP 深圳智简公司。版权所有©2023-2043 LaravelPHP 粤ICP备2021048745号-3

Laravel 中文站