基础HTML结构和CSS样式

HTML结构

代码包含了几个使用不同CSS类的<div>标签，一个<input>标签以及一个<a>标签。这些元素通过指定的CSS类来应用样式，实现了不同的视觉效果。

CSS样式解析

1. .odiv 类
   • 设置宽度和高度均为200px的方形区域。
   • 红色边框，文字居中显示。
   • line-height 设置为200px，确保文本垂直居中。

.odiv {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    line-height: 200px;
    text-align: center;
}.inp 类

输入框（<input>）水平居中对齐

.inp {
    text-align: center;
}

.dl 类

• 文本首行缩进20em，字符间距20px。

.dl {
    text-indent: 20em;
    letter-spacing: 20px;
}.oa 类和伪类

• 超链接默认无下划线。
• 鼠标悬停时，文本下划线出现

.oa {
    text-decoration: none;
}
.oa:hover {
    text-decoration: underline;
}

.oen 类

控制单词间距为15px。

.oen {
    word-spacing: 15px;
}
.shadow 类

文本阴影效果，红色，偏移0px向下5px，模糊半径1px。

.shadow {
    text-shadow: 0px 5px 1px red;
}
设置文本阴影

.douyin {
    text-shadow: -5px 0px cyan, 5px 0px red;
    
}