HTML美化页面（下）

@Camelus

已于 2022-08-14 13:40:03 修改

阅读量3.2k

点赞数 4

文章标签：前端 css 前端框架

于 2022-04-14 15:06:46 首次发布

本文链接：https://blog.youkuaiyun.com/m0_61506558/article/details/124154940

版权

本文介绍了HTML中表格的边框处理，包括如何合并边框，以及文字样式的设置，如大小、颜色、位置、字体等。此外，还讲解了鼠标的形状设计，如不同类型的光标形状。最后，简述了元素的定位方式，包括浮动定位和垂直对齐。这些基础知识对于网页设计和前端开发至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当多个行元素内块在一行时，可以控制对齐方式

浮动定位

1.表格的边框处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
  <style type="text/css">
    table{
      width:300px;
      height:200px;
      text-align:center;
    }
    table,td,th{
      border:1px solid red;
      /*合并二个表格相邻的边框*/
      border-collapse:collapse;
    }

  </style>
</head>
<body>
      <table>
        <tr><th>id</th><th>姓名 </th><th>年龄</th><th>性别 </th></tr>
        <tr><td>1</td><td>袁世龙</td><td>18</td><td>男</td></tr>
        <tr><td>2</td><td>金友鑫</td><td>19</td><td>男</td></tr>
        <tr><td>3</td><td>董恒</td><td>  16</td><td>男</td></tr>
      </table>
</body>
</html>

文字相关的样式

——文字大小

font-size:单位；

——字体颜色

color:颜色值

——文字的横向位置

text-align: left/center/right;

——文字斜体

font-style:oblique;

——文字加粗

font-weight:bold;

——文字修饰

test-decoration:

        ——underline : 下划线

        ——overline : 上划线

        ——line-throught:删除线

——文本行高****

line-height: 长度

我们通常使用行高来完成垂直居中的操作

——字体设计

font-family:字体名称

安装字体：

@font-face{

font-family:字体名称；

src:url("字体路径");

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style type = "text/css">
    div{
      width:200px;
      height:200px;
      border:2px solid red;
      margin-top: 10px;
      text-align:center;
    }
    .div1{
      padding-top:89px;
      padding-bottom:90px;
    }
    .div2{
      line-height: 200px;
    }
  </style>
</head>
<body>
      <div class="div1">金友鑫</div>
      <div class="div2">金友鑫</div>
      <div class="div3">金友鑫</div>
      <div class="div4">金友鑫</div>
      <div class="div5">金友鑫</div>

</body>
</html>

鼠标的形状设计

用于控制光标移到某元素上时光标形状

cursor :

取值：

—— default: 默认鼠标形状，根据应用场景自动变化

——pointer:手指形状，常用于提示用户点击

——text: 焦距形状（可输入的 I 字形）

——wait :等待

——help:帮助

——progress:进行中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div{
      width:100px;
      height:100px;
      border:2px solid red;
      margin-top:10px;
    }
    .div1{
      cursor:pointer;
    }
    .div2{
      cursor:text;
    }
    .div3{
      cursor:progress;
    }
    .div4{
      cursor:wait;
    }
    .div5{
      cursor:help;
    }
  </style>
</head>
<body>
    <div class ="div1" ></div>
    <div class ="div2" ></div>
    <div class ="div3" ></div>
    <div class ="div4" ></div>
    <div class ="div5" ></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
  <style type="text/css">
    ul li{
     /* list-style-type:none;*/
     /* list-style-type:circle;*/
      list-style-type:square;
    }
    ol li{
      list-style-type:lower-roman;
    }
  </style>
</head>
<body>
<ul>
      <li>1111111</li>
      <li>2222222</li>
      <li>3333333</li>
      <li>4444444</li>
      <li>5555555</li>
</ul>
      <ol>
        <li>1111111</li>
        <li>2222222</li>
        <li>3333333</li>
        <li>4444444</li>
        <li>5555555</li>
      </ol>


</body>
</html>

定位

默认元素分三类

1.块元素 block

独占一行，可以调整宽高，多个块元素之间从上到下排列

2.行内块元素，inline-block

与其他内块元素或行内元素共用一行空间，从左至右排列，一排满自动换行

3.行内元素 inline

与其他行内块元素或行内块元素共享一行空间，从左至右排列，一行排满自动换行

可以通过display样式修改元素的分类

——none: 隐藏的元素，不显示

——inline: 调整为行内块元素

——inline-block:调整为内块元素

——block : 调整为块元素

当多个行元素内块在一行时，可以控制对齐方式

vertical-align

- top:设置元素的顶端与行中最高的元素顶端对齐

-text-top:设置元素的顶端与父元素字体顶端对齐

-middle:把此元素放在父元素的中部

浮动定位

可以调整元素漂浮显示在父元素的左或右

格式：

float: left/right;

清楚浮动：

控制某个元素的指定方向不允许出现浮动

clear: left/right/both;

这三种定位，都是通过如下四个样式来完成定位的：

left:长度；

top:长度；

right:长度；

bottom:长度；

在相对定位中，上面的四个样式，表示：

元素相对原来的位置的某方向偏移值

例如：

当指定left:10px ,则表示向右移动10个像素

当指定left:-10px,则表示向左移动10个像素

在绝对定位中，上述四个样式表示

距离body的边界的某个方向的距离

特殊：如果这个元素的某个上层元素是绝对定位或固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .top{
            background-color:#dddd;
            color:#666;
        }
        body{
            margin: 0px;
        }
        .top_content{
            width:1000px;
            margin: 0 auto;
        }
        .top_content_left{
            width:30%;
        }
        .top_content_right{
            width:70%;
        }
        .top_content_left>img{
            width:21px;
            height:21px;
            margin-top:12px;
        }
        .top_content>div{
            display: inline-block;
        }
        .top_content_right li{
            display:inline-block;
            margin-left:5px;
            margin-right:5px;
        }
    </style>
</head>
<body>
    <div class="top">
        <div class="top_content">
            <div class ="top_content_left">
                <img
                    src="https://i03piccdn.sogoucdn.com/71821b739b986bd5">
                    <span> 南京 </span>
            </div><div class = "top_content_right">
            <ul>
                <li class="li1">欢迎</li><li>我的订单</li><li>我的百度</li><li>百度会员</li><li>百度等级</li><li class="li2">充值中心</li>
            </ul>
        </div>
        </div>
    </div>

</body>
</html>