软件3班20240417-CSDN博客

本文链接：https://blog.csdn.net/2301_80189168/article/details/137854920

在这里插入图片描述

<!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>Document</title>
    <!-- 内嵌式 -->
    <style>
        /* 通配符选择器 */
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        /* div  是系统内置的标签， */
        div{
            /* 标签选择器 */
            color: red;
        }
        .drbgu-ebgjerh{
            /* 类选择器 */
            background-color: aquamarine;
        }
        #myid{
            color: antiquewhite;
        }


    </style>
</head>
<body>
    <div>reugyvbegvb </div>
    <!-- CSS  写在 标签 上    行内式 -->
    <h1 style="color: blue;">登录</h1>
    <!--  -->
    <span class="drbgu-ebgjerh"></span>
    <!-- div#myid     d -->
    <div id="myid">
        hbrt
    </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>Document</title>
    <link rel="stylesheet" href="./my.css">
</head>
<body>
    <div>
        测试内容
    </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>Document</title>
    <style>
        .font{
            color: red;
            font-style: italic;
            /*    i   倾斜     */
            font-size: 32px;
            /* 浏览器  默认  16  px */
            font-weight: bold;
            font-weight: 700;
            /* 字体粗细    没有单位 */
            /* b  加粗 */
            line-height: 1.5;
            /*    px   不推荐    垂直居中   数字  px   单纯是  字体  行高  1.5 */
            font-family: 楷体;
        }
    </style>
</head>
<body>
    <div class="font">言语</div>
    <h3>言语</h3>
</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>Document</title>
    <style>
        .suojin{
            text-indent: 2em;
            /* em   2em   缩进两个字   4em  缩进  四个 */
        }
    </style>
</head>
<body>
    <div class="suojin">

    </div>
    <p class="suojin">由于C++所具有的优势，该项目组的研究人员首先考虑采用C++来编写程序。但对于硬件资源极其匮乏的单片式系统来说，C++程序过于复杂和庞大。另外由于消费电子产品所采用的嵌入式处理器芯片的种类繁杂，如何让编写的程序跨平台运行也是个难题。为了解决困难，他们首先着眼于语言的开发，假设了一种结构简单、符合嵌入式应用需要的硬件平台体系结构并为其制定了相应的规范，其中就定义了这种硬件平台的二进制机器码指令系统（即后来成为“字节码”的指令系统），以待语言开发成功后，能有半导体芯片生产商开发和生产这种硬件平台。对于新语言的设计，Sun公司研发人员并没有开发一种全新的语言，而是根据嵌入式软件的要求，对C++进行了改造，去除了留在C++的一些不太实用及影响安全的成分，并结合嵌入式系统的实时性要求，开发了一种称为Oak的面向对象语言。由于在开发Oak语言时，尚且不存在运行字节码的硬件平台，所以为了在开发时可以对这种语言进行实验研究，他们就在已有的硬件和软件平台基础上，按照自己所指定的规范，用软件建设了一个运行平台，整个系统除了比C++更加简单之外，没有什么大的区别。
    </p>
</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>Document</title>
    <style>
        .mydiv{
            width: 300px;
            height: 300px;
            background-color: beige;
            /* 水平居中 */
            text-align: center;
            /* 垂直    行高   ==   height*/
            line-height: 300px;
            /* 块级  盒子  居中   */
            margin: 0 auto;

        }
        .test{
            /* 去掉下划线 */
            text-decoration: none;
            /* text-decoration: underline;
            text-decoration: overline;
            text-decoration: line-through; */
        }
        a:hover{
            /* 伪类选择器 */
            color: red;
        }
    </style>
</head>
<body>
    <div class="mydiv">测试</div>
    <a href="#" class="test"> 百度</a>
    <span class="mydiv">测试</span>

</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>Document</title>
    <style>
        .mydiv{
            width: 200px;
            height: 200px;
            background-color: aqua;
            padding: 10px;
        }
        .myspan{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }


    </style>
</head>
<body>
    <!-- 
            盒子  模型  ：  标签 =  元素  =  盒子
            i ib u  p  都是 盒子
        行内元素  ：设置宽高  不生效
        块级元素、行内块   ：  设置  宽高 生效


     -->
     <div class="mydiv"></div>
     <span class="myspan">ewrfguoier </span>

</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>Document</title>
    <style>
        .mydiv{
            width: 200px;
            height: 200px;
            background-color: aqua;
            padding: 10px;
        }
        .myspan{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }


    </style>
</head>
<body>
    <!-- 
            盒子  模型  ：  标签 =  元素  =  盒子
            i ib u  p  都是 盒子
        行内元素  ：设置宽高  不生效
        块级元素、行内块   ：  设置  宽高 生效


     -->
     <div class="mydiv"></div>
     <span class="myspan">ewrfguoier </span>

</body>
</html>

*{
    /* 去内外边距   盒子 自适应 */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* 版心 */
.wrapper{
    width: 1200px;
    margin: 0 auto;
    background-color: pink;
}
li{
    list-style: none;
}
a{
    text-decoration: none;
    color: #333333;
}
.nav{
    height: 42px;
}
/* 后代选择器 */
.nav li{
    /*    指哪打哪    不会作用于所有的 li   仅作于   
    nav  里面的  li
    */
    float: left;
    /* 左浮动   浮动  针对  （块级） */
    overflow: hidden;
    /* 清楚浮动影响 */
    width: 220px;
    height: 42px;
    /* background-color: aqua; */
    margin-right: 20px;
    text-align: center;
    line-height: 42px;


}
.nav li:nth-last-child(){
    margin-right: 0;
}
.nav a:hover{
    color: red;
}