当前位置：首页 > ds >正文

web复习（五）

ds 2025/8/20 5:57:39

用CSS设置连接与导航菜单

1. 超链接标记

解释

在 HTML 中，<a> 标签用于创建超链接，href 属性指定链接的目标 URL。

示例

<a href="https://www.example.com">访问示例网站</a>

CSS 样式设置

a {text-decoration: none; /* 去掉默认的下划线 */color: #0066cc; /* 设置超链接的颜色 */
}

2. 丰富的超链接特效

解释

使用 CSS 的伪类（:hover、:active、:visited）可以实现丰富的交互效果，如改变超链接的颜色、添加动画等。

示例

a {text-decoration: none;color: #0066cc;transition: color 0.3s ease; /* 平滑过渡效果 */
}a:hover {color: #ff6600; /* 鼠标悬停时颜色变为橙色 */transform: scale(1.05); /* 略微放大 */
}a:active {color: #990000; /* 点击时颜色变为深红色 */
}a:visited {color: #666666; /* 已访问的链接颜色变为灰色 */
}

3. 创建按钮式超链接

解释

将超链接样式化为按钮，提升视觉吸引力和点击区域。

示例

.button-link {display: inline-block; /* 允许设置宽高 */padding: 10px 20px; /* 内边距 */background-color: #0066cc; /* 按钮背景色 */color: white; /* 文字颜色 */text-decoration: none; /* 去掉下划线 */border-radius: 5px; /* 圆角 */font-weight: bold; /* 加粗文字 */transition: background-color 0.3s ease; /* 平滑过渡 */
}.button-link:hover {background-color: #0055aa; /* 悬停时背景色变深 */
}

HTML

<a href="https://www.example.com" class="button-link">点击访问</a>

4. 控制鼠标指针

解释

通过 cursor 属性更改鼠标指针样式，提示用户可交互。

示例

a {cursor: pointer; /* 鼠标指针变为手形 */
}

5. 设置项目列表样式

5.1 列表符号

通过 list-style-type 属性自定义列表符号。

示例

css

ul {list-style-type: square; /* 使用方形符号 */margin-left: 20px; /* 左边距 */
}

HTML

<ul><li>列表项 1</li><li>列表项 2</li><li>列表项 3</li>
</ul>

5.2 图片符号

使用 list-style-image 属性设置自定义图片作为列表符号。

示例

ul.custom-bullet {list-style-image: url('path/to/bullet.png'); /* 自定义符号图片路径 */margin-left: 20px;
}

HTML

<ul class="custom-bullet"><li>自定义符号列表项 1</li><li>自定义符号列表项 2</li><li>自定义符号列表项 3</li>
</ul>

用 CSS 设置表格样式

1. 控制表格

1.1 表格中的标记

表格由 <table>、<tr>（行）、<td>（单元格）、<th>（表头单元格）等标记构成。

示例：

<table><tr><th>表头 1</th><th>表头 2</th></tr><tr><td>单元格 1</td><td>单元格 2</td></tr>
</table>

1.2 设置表格的边框

使用 border 属性设置表格边框。

示例：

table {border: 1px solid #000; /* 表格整体边框 */border-collapse: collapse; /* 边框合并 */
}
td, th {border: 1px solid #000; /* 单元格边框 */
}

1.3 确定表格的宽度

通过 width 属性设置表格宽度。

示例：

table {width: 500px; /* 固定宽度 *//* 或 */width: 100%; /* 自适应父元素宽度 */
}

1.4 合并单元格

使用 rowspan（垂直合并）和 colspan（水平合并）属性。

示例：

<table><tr><th rowspan="2">合并两行的表头</th><th>表头 1</th><th>表头 2</th></tr><tr><td colspan="2">合并两列的单元格</td></tr>
</table>

1.5 其他与表格相关的标记

<caption>：表格标题。
<thead>、<tbody>、<tfoot>：表格分区。

示例：

<table><caption>表格标题</caption><thead><tr><th>表头 1</th><th>表头 2</th></tr></thead><tbody><tr><td>数据 1</td><td>数据 2</td></tr></tbody>
</table>

2. 美化表格

2.1 搭建 HTML 结构

构建基本表格结构。

示例：

<table class="custom-table"><thead><tr><th>表头 1</th><th>表头 2</th><th>表头 3</th></tr></thead><tbody><tr><td>数据 1</td><td>数据 2</td><td>数据 3</td></tr><tr><td>数据 4</td><td>数据 5</td><td>数据 6</td></tr></tbody>
</table>

2.2 整体设置

为表格设置整体样式。

示例：

.custom-table {width: 100%;border-collapse: collapse;font-family: Arial, sans-serif;background-color: #fff;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

2.3 设置单元格样式

美化表头和单元格。

示例：

css

复制

.custom-table th, .custom-table td {padding: 12px 15px;text-align: left;border: 1px solid #ddd;
}.custom-table th {background-color: #f2f2f2;font-weight: bold;
}

2.4 实现斑马纹效果

通过奇偶行设置不同背景色。

示例：

.custom-table tbody tr:nth-child(odd) {background-color: #f9f9f9;
}.custom-table tbody tr:nth-child(even) {background-color: #fff;
}

2.5 设置列样式

为某一列设置特定样式。

示例：

.custom-table td:first-child {font-weight: bold; /* 第一列加粗 */
}

用 CSS 设置表单样式

1. 表单的用途和原理

表单用于收集用户输入，提交至服务器处理。HTML 表单由 <form> 元素及输入控件（如 <input>、<select> 等）组成。

示例：

HTML

<form action="/submit" method="post"><input type="text" name="username"><input type="submit" value="提交">
</form>

2. 表单输入类型

2.1 文本输入框

用于单行文本输入。

示例：

<input type="text" name="username" placeholder="请输入用户名">

2.2 单选按钮

用于选择一个选项。

示例：

HTML

<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女

2.3 复选按钮

用于选择多个选项。

示例：

HTML

<input type="checkbox" name="hobby" value="reading"> 阅读
<input type="checkbox" name="hobby" value="sports"> 运动

2.4 密码输入框

用于密码输入，文本不可见。

示例：

HTML

<input type="password" name="password">

2.5 按钮

用于提交表单或触发事件。

示例：

<input type="submit" value="提交">
<button type="button">普通按钮</button>

2.6 多行文本框

用于多行文本输入。

示例：

<textarea name="message" rows="4" cols="50"></textarea>

2.7 下拉列表和列表框

用于选择一个或多个选项。

示例：

HTML

<select name="city"><option value="beijing">北京</option><option value="shanghai">上海</option>
</select>

3. CSS 与表单

通过 CSS 可美化表单，提升用户体验。

示例：

form {max-width: 400px;margin: 0 auto;padding: 20px;background-color: #f9f9f9;border: 1px solid #ddd;border-radius: 5px;
}input[type="text"], input[type="password"], textarea, select {width: 100%;padding: 10px;margin: 5px 0 15px;border: 1px solid #ddd;border-radius: 4px;box-sizing: border-box;
}input[type="submit"], button {background-color: #4CAF50;color: white;padding: 10px 20px;border: none;border-radius: 4px;cursor: pointer;
}input[type="submit"]:hover, button:hover {background-color: #45a049;
}

查看全文

http://www.xdnf.cn/news/10885.html