文章目录

字体


衬线字体
serif
非衬线字体
sans-serif
等宽字体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体</title>
    <style> .text1{
      /* font-family:serif; */ /* font-family: sans-serif; */ font-family: monospace; } </style>
</head>
<body>
    <div class="text1">华为云</div>
</body>
</html>


文本



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体</title>
    <style> .text1{
      /* font-family:serif; */ /* font-family: sans-serif; */ font-family: monospace; color: aqua; line-height: 50px; direction: ltr; text-indent: 2em; text-decoration: overline; letter-spacing: 10px; text-shadow: 5px 5px 3px red; } </style>
</head>
<body>
    <div class="text1">华为云</div>
</body>
</html>

尺寸

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>尺寸</title>
    <style> .text{
      background: aqua; width: 50px; min-width: 100px; height: 200px; max-height: 100px; } </style>
</head>
<body>
    <div class="text">前端</div>
</body>
</html>

列表


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表样式</title>
    <style> .list1{
      list-style-image: url("logo.png"); list-style-position: inside; list-style-type: square; } .list2{
      list-style: inside lower-alpha ; } </style>
</head>
<body>
    <ul class="list1">
        <li>手机</li>
        <li>笔记本</li>
        <li>智慧屏</li>
    </ul>
    <ul class="list2">
        <li>手机</li>
        <li>笔记本</li>
        <li>智慧屏</li>
    </ul>
</body>
</html>

背景



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景属性</title>
    <style> .bak{
      height: 1000px; background-color: azure; background-image: url("logo.png"); background-repeat: no-repeat; background-position: right top; background-attachment: fixed; } </style>
</head>
<body>
    <div class="bak"></div>
</body>
</html>