11.21

最新推荐文章于 2024-10-16 16:26:58 发布

Qing_Ze

最新推荐文章于 2024-10-16 16:26:58 发布

阅读量82

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/Qing_Ze/article/details/134646924

版权

<!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>

         img {

        width: 400px;

         height: 250px;

        border: 4px solid orange;

         }

        .so1:hover {

         opacity: 0.5;

         }

        div {position: absolute;

         background-image: url(./云计算/arr.png);

         background-repeat: no-repeat;

         background-position: 50%;

         top: 40%;

         right: 40%;

         }

        </style>

</head>

<body>

    <div ><img src= "./云计算/sed.jpg" class="so1"></div>

</body>

</html>

<!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>
        a{
           
            text-decoration: none;
            color: black;
        }
        ul li{
            text-align: center;
            list-style: none;
            display: inline-block;
            width: 200px;
            height: 20px;
            border: 1px solid black;
        }
        .bot{
            position: relative;
        }
        .bot .img1{
            position: absolute;
            left: 30%;
            bottom: -140px;
            opacity: 0;
        }
        .bot:hover .img1{
            opacity: 1;
        }

        
    </style>
</head>
<body>
    <ul>
        <li><a href="#">我要投资</a></li>
        <li><a href="#">平台介绍</a></li>
        <li><a href="#">个人专区</a></li>
        <li class="bot"><a href="#" >手机微金所
            <img src="./云计算/code.jpg" alt="" class="img1">
        </a></li>
        <li><a href="#">个人中心</a></li>
    </ul>
</body>
</html>

1】权重：相同权重下，算最后一个
2】标签选择器：0001
3】Class：0010
4】Id：0100
5】伪类选择器：0010
6】包含选择器：权重之和
7】属性选择器：0010
8】伪元素选择器：0001
9】内联式选择器：1000

10】字体相关样式
Font-style：改文字格式//
Font-weight：改粗细
Font-size：改文字大小
Font-family：改字体
连写格式：粗细格式大小/行高字体

11】文本相关样式
Text-indent:字号大小；（无法自适应）
Text-indent：2em；（可以自适应）
Text-align：center：居中 right：居右
Line-height:行高

12】文本装饰
Text-decoration：none（清除下划线） line-through（文字被横线清除）
Color：#（十六进制三原色）rgb（函数更改颜色）rgba（，，，1）
Opacity：调整透明度0~1之间靠近1越实心

13】无序列表
<ul> <li>
List-style-type:none (空，啥也没有) cycle（空心圆）
List-style-image:url (地址)
List-style-position:inside (控制标识符在哪)

14】Background-color:背景颜色
Background-image：url{ 。。/ }导入背景图片
Background-repeat：no-repeat ( 不做重复 )
repeat-y铺满y轴
Background-position：left （左上角）直接输入像素，则定位到那个位置
Background-position：fixed(固定在此位置)
Background-size：cover强行铺满
文字方向direction
15】隐藏元素
Display：none 全隐藏
Visibility：hiddn 隐藏但空间保留
Opacity：透明度隐藏
行内元素转成块文件，才能改长宽高
Display:inline-block 行转成块文件

16】边框
Border-width 边框宽度
Border-style 边框样式
Border-color 边框颜色
（注意，三个同时设）
连写形式
Border：宽度样式颜色
Border-radius：边框弧度比如50%或者像素

17】表格
border-collapes:collapes
取消单元格间隙

18】文本域
Textarea{ resize:none} 格式确定
Div{
Cursor：鼠标样式}
定义子代父代之后再用
子代，父代的绝对定位Position:absolute
Top:距离顶部数值像素
Right：0距离右侧距离为0
在父级定位position：relative
子代z-index优先显示

19】固定定位
Positon：fixed
20】粘性定位
Position：sticky