<!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
相关推荐
越努力越幸运6612 小时前
多模态代码调试实战：Gemini3.5 精准捕获 HTML 隐性语法用户09262928314514 小时前
CSS 代码调试总踩坑？Gemini 3.5 精准定位修复zzzzzz3102 天前
当甲方说'logo放大的同时再缩小一点'时，我用 AI 把这个需求做出来了闪闪发光得欧2 天前
前端提效新思路：Gemini 3.5 自动化定位 CSS 异常anOnion4 天前
构建无障碍组件之Menu Button pattern米丘5 天前
微前端之 Web Components 完全指南用户059540174466 天前
AI Agent记忆测试踩坑实录：Mock骗了我一周，Mem0+pytest一招破局Darling噜啦啦7 天前
CSS 3D 变换与 Flex 布局实战：从零打造旋转立方体用户059540174467 天前
把待办应用从Electron换成Tauri，内存占用狂降90%，打包体积仅5MB小月土星7 天前
CSS 3D 从入门到炫技：手把手教你写一个旋转立方体