<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.frontSty{
font-size: 50px;
/* 加粗效果 */
font-weight: 700; /* 400-normal 正常 ; 700-bold 加粗*/
/* 是否倾斜效果 italic-倾斜 normal-正常*/
font-style: normal;
}
.mydiv2{
height: 50px;
background-color: beige;
line-height: 50px; /*行高和div高度保持一致 形成垂直居中的效果,但是只能用于单行文字*/
}
.mydiv3{
font-family: '楷体';
}
.mydiv4{
/* 复合属性 依次是 是否倾斜 加粗 大小/行距 字体 注意：字号和字体必须写否则不生效 */
font: normal 700 30px/2 '楷体';
}
</style>
</head>
<body>
<div class="frontSty"> 测试字体样式</div>
<div class="mydiv2">定位</div>
<div class="mydiv3">字体测试</div>
<div class="mydiv4">字体复合属性 font 测试</div>
<div>
<!-- 测试居中效果 -->
<div style="width: 100px; text-align: center; background-color: aqua;">居中</div>
<div style="width: 100px; text-align: right; background-color: aqua;">居右</div>
<div style="width: 100px; text-align: left; background-color: aqua;">居左</div>
</div>
<div>
<!-- 去除效果 -->
<div style="text-decoration: none;">测试下划线</div>
<!-- 下划线 -->
<div style="text-decoration: underline;">测试下划线</div>
<!-- 删除线 -->
<div style="text-decoration: line-through;">测试下划线</div>
<!-- 上划线 -->
<div style="text-decoration: overline;">测试下划线</div>
</div>
</body>
</html>css+html案例
星空2026-03-27 10:58
相关推荐
এ慕ོ冬℘゜3 小时前
纯 CSS 实现自定义 Switch 开关（商品上下架滑块）并不喜欢吃鱼5 小时前
二.前端web开发:零基础吃透 CSS 核心知识思码梁田5 小时前
CSS display 属性：从元素类型转换到隐藏元素的实用指南weipt6 小时前
springboot项目运行的几种方式用户0595401744620 小时前
把AI对话记忆存储测试从手工改成Playwright+pytest，覆盖率从20%提到96%，回归时间缩短90%醉城夜风~1 天前
CSS盒模型（Box Model）呼噜想睡觉1 天前
Flex弹性布局AI行业学习1 天前
Claude Code + cc-switch + Git + Node.js 全套下载+安装+配置完整版并不喜欢吃鱼1 天前
一.前端web开发:零基础吃透 HTML5 核心知识用户059540174461 天前
「记仇」记忆存储测试踩坑实录：用 Pytest+Docker 把 BUG 扼杀在凌晨 3 点前