css案例整理-JZTXT

知识体系：

案例整理：

（一）案例一：

（1）需求：实现一个登录界面

（2）知识点：

（①）背景使用背景图片（background：url（"#####"））

（②）登录框应用表单(input),其中， 1.用户名称输入(type=text)

2.密码输入（type=password）

3.登录按键（type=submit）

（③）忘记密码超链接

（④）输入框中提示词（placeholder=“用户名/密码”）

（⑤）整个登录表单在整个页面居中显示（position: absolute;

top: 50%;

margin-top: -200px;）

（⑥）设置不透明度（opacity直接设置会使其中包含的文本一起透明度改变 vs background；rgba（#，#，#，#））

（⑦）登录块使用圆角（border-radius）

（⑧）点击登录后跳转页面（<form action="#####">）

（3）实现效果：

一：（登录界面）

二：（跳转界面点击登录以后）

（4）代码：

<html>

<head>
    <style>
        body {
            background: url("https://img.zcool.cn/community/01f3855d6c7d7da801211f9ebfce8f.jpg@1280w_1l_2o_100sh.jpg");
            background-size: cover;
            background-attachment: fixed; 
           }

        .box {
            position: absolute;
            top: 50%;
            margin-top: -200px;
            left: 50%;
            margin-left: -200px;
            background: rgba(255, 255, 255, 0.4);
            width: 400px;
            height: 400px;
            border-radius: 25px;
            text-align: center;
            padding: 5px 40px;
            box-sizing: border-box;
            
        }

        input{
            background-color: white;
            width: 100%;
            height: 48px;
            margin-bottom: 10px;
            border: none;
            border-bottom: 2px solid silver;
            outline: none;
            font-size: 22px;
        }
        p{
            font-size:20px;
            font-weight: 600;
            text-align: center;
            

        }
        .btn{
            background-color: rgb(161, 223, 223);
            width: 38%;
            height: 48px;
            border-radius:25px;
            margin-top: 40px;
            font-size: 28px;
            font-weight: 600;
            color: aliceblue;

        }
        .btn:hover{
            background-color: rgb(191, 228, 228);
        }
        a{
            color: white;
            margin-left: 0;
        }
    </style>
</head>

<body>

    <div class="box">
        <p class ="p">统一身份认证</p>
        <div class="right">
            <form action="file:///D:/htmlCode/%E4%BB%BF.html">
                <input type="text" name="userid" placeholder="用户名"><!--  用户名   -->
                <br>
                <input type="password" name="psw" placeholder="密码? "><!-- 密码    -->
                <br>
                <a href="href=D:\htmlCode\2作业.html">忘记密码</a><!-- 忘记密码链接    -->
                <br>
                <input type="submit" value="登录"><!-- 登录按钮    -->
            </form>
            
        </div>
        <div></div>
    </div>
    <!-- 登陆框    -->
</body>

</html>

（二）案例二：

（1）需求：仿制W3school主页面

（2）知识点：

（①）网页布局-浮动（float：left）

（②）1导航栏：垂直导航栏（<ul> <li>）

水平导航栏(<ul> <li> 浮动float：left)

2.结合超链接（<a>）

3.以及伪类使用（：hover）

4.链接块级结构显示（display：block）

5.不显示列表符号（text-decoration: none;）

（③）内联框架在当前网页上显示其他的网页（<iframe src="插入的网页地址"></iframe>

<a herf="链接地址" target ="abc">名称</a>）

（3）实现效果：

一：

二：（伪类）

（4）代码：

<html>

<head>
    <style>
        .box1 {
            width: 100%;
            height: 15%;
            background-color: rgb(255, 252, 252);
        }
        .p1 {
            color: rgb(58, 58, 58);
            font-size: 70px;
            font-weight: 70px;

        }
        .p1:hover {
            border-bottom: 3px solid red;
            width: 350px;
        }
        .ul1 {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: rgb(128, 128, 128);
        }
        .li1 {
            float: left;
        }
        li a {
            display: block;
            color: rgb(255, 254, 254);
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
        li a:hover {
            background-color: #111;
            color: white
        }
    </style>
</head>

<body>
    <div class="bigbox">
        <div class="box1">
            <p class="p1"><b color>W3</b>School</p>
        </div>
        <div class="box2">
            <ul class="ul1">
                <li class="li1"><a href="https://www.w3school.com.cn/html/html5_intro.asp">HTML</a></li>
                <li class="li1"><a href="https://www.w3school.com.cn/html/html5_intro.asp">CSS3</a></li>
                <li class="li1"><a href="https://www.w3school.com.cn/html/html5_intro.asp">JS</a></li>
                <li class="li1"><a href="https://www.w3school.com.cn/html/html5_intro.asp">BS5</a></li>
            </ul>
        </div>
        <div>
            <iframe width="18%" height="70%" src="left.html"></iframe>
            <iframe width="80%" height="70%" name="abc"></iframe>
        </div>

    </div>
</body>

</html>