HTML美化页面（下）

目录

1.表格的边框处理

文字相关的样式

鼠标的形状设计

定位

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

浮动定位

---

1.表格的边框处理

    
    
  


      

        
id
姓名 
年龄
性别 
        
1
袁世龙
18
男
        
2
金友鑫
19
男
        
3
董恒
  16
男
      

文字相关的样式

——文字大小

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("字体路径");

}

    
    
  


      
金友鑫
      
金友鑫
      
金友鑫
      
金友鑫
      
金友鑫

鼠标的形状设计

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

cursor        :

        取值：

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

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

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

——wait :等待 

——help:帮助

——progress:进行中

    
    
  



      
1111111
      
2222222
      
3333333
      
4444444
      
5555555

      

        
1111111
        
2222222
        
3333333
        
4444444
        
5555555
      

定位

默认元素分三类

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的边界 的某个方向的距离

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

    
    
    


    

        

            

                
                     南京 
            

            

                
欢迎
我的订单
我的百度
百度会员
百度等级
充值中心