CSS基础，扩展选择器，属性，盒子模型，用户注册页面美化

zhangsan3333

已于 2023-05-12 20:31:28 修改

阅读量73

点赞数

文章标签： css css3 前端

于 2023-05-12 17:41:34 首次发布

aaa

本文链接：https://blog.csdn.net/djydjy3333/article/details/130647382

版权

CSS基础，扩展选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css选择器</title>
    <style>
        #div1{
            color: red;
        }
        #div2{
            color: red;
        }

        .cls1{
            color: blue;
        }

        div{
            color: green;
        }
        /*3种扩展选择器*/
        /*并选择器,div和p都包括*/
        div,p{
            color: #2aabd2;
        }
        /*子选择器*/
        div p {
            color: #1b6d85;
        }
         /*父选择器，p标签父元素div加边框*/
        div > p{
            border: 1px solid;
        }
/*      属性选择器：选择元素名称，属性名=属性值的元素
        元素名称[属性名="属性值"]{}
        */

        input[type='text']{
            border: 5px solid;
        }
    /*伪类选择器：选择一些元素具有的状态
    元素：状态{}
    如a标签的状态：link，visited，active，hover
    */
        a:link{
            color: pink;
        }
        a:hover{
            color: green;
        }
        a:active{
            color: yellow;
        }
        a:visited{
            color: red;
        }

    </style>
</head>
<!--
优先级：id选择器>类选择器>元素(标签)选择器
-->
<body>
<div id ="div1">塞尔达</div>
<div class ="cls1">塞尔达</div>
<div >塞尔达</div>
<div id ="div2" class ="cls1" >塞尔达</div>
<div >旷野之息</div>
<p class="cls1">王国之泪</p>
<hr color="yellow">
<div>
    <p>传智播客</p>
</div>
<div>传智播客</div>
<p>黑马程序员</p>

<input type="text">
<input type="password">

<br>
<a href="www.baidu.com">官网</a>
</body>
</html>

在这里插入图片描述

CSS属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css</title>
    <style>
        p {
            color: #ff0000;
            font-size: 30px;
            text-align: center;
            line-height: 300px;
            /*
                        border 边框
            */
            border: 1px solid red;
        }

        div {
            border: 1px solid blue;
            height: 200px;
            width: 200px;
            background: url("img/按钮.jpg") no-repeat center;
        }
    </style>
</head>
<body>
<p>你好呀</p>
<div>荷兰</div>
</body>
</html>

在这里插入图片描述

CSS盒子模型

根据视角不同分为内外边距
外边距：margin
内边距：padding
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css</title>

    <!--
        外边距：margin
        内边距：padding ，默认内边距会影响盒子大小
     -->
    <style>

        div {
            border: 1px solid blue;
            width: 100px;
        }

        .div1 {
            width: 100px;
            height: 100px;
            /*   margin: 50px;*/
            /*让小正方形居中*/
        }

        .div2 {
            width: 200px;
            height: 200px;
            padding: 50px;
            /*
                        设置盒子属性，让height和width就是最终盒子大小
            */
            box-sizing: border-box;
        }

        /*
                float left左浮动
    */
        .div3{
            float: left;
        }
        .div4{
            float: left;
        }
        .div5{
            float: right;
        }


    </style>
</head>
<body>
<div class="div2">
    <div class="div1">荷兰</div>
</div>

<div class="div3">aaa</div>
<div class="div4">bbb</div>
<div class="div5">ccc</div>
</body>
</html>

在这里插入图片描述

用户注册页面美化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <style>
        /*      外边距：margin
                内边距：padding ，默认内边距会影响盒子大小,需要box-sizing: border-box固定住*/

        * {
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }

        body {
            background: url("img/fengjing.jpg") no-repeat center;
        }

        .rg_layout {
            width: 900px;
            height: 500px;
            border: 8px solid #EEEEEE;
            background: white;
            margin: auto;
            margin-top: 15px;

        }

        .rg_left {
            border: 1px solid red;
            float: left;
            margin: 16px;
        }

        /*父选择器，.rg_left处理*/
        .rg_left > p:first-child {
            color: #FFd026;
            font-size: 20px;
        }

        .rg_left > p:last-child {
            color: #a6a6a6;
            font-size: 20px;
        }

        .rg_center {
            border: 1px solid red;
            float: left;
            width: 450px;
        }

        .rg_right {
            border: 1px solid red;
            float: right;
            margin: 15px;
        }

        .rg_right > p:first-child {
            font-size: 15px;
        }

        .rg_right p a {
            color: deeppink;
        }

        .td_left {
            width: 100px;
            text-align: right;
            height: 45px;
        }

        .td_right {
            padding-left: 30px;
        }

        #username, #password, #email, #name, #tel, #birthday, #checkcode {
            width: 251px;
            height: 32px;
            border: 1px solid gray;
            border-radius: 5px;
            padding-left: 15px;
        }

        #checkcode {
            width: 110px;
        }

        #img_check {
            height: 30px;
            vertical-align: middle;
        }

        #btn_sub {
            width: 150px;
            height: 40px;
            background-color: orange;
            border: 1px solid orange;
            border-radius: 5px;
        }
    </style>
</head>
<body>
<div class="rg_layout">
    <div class="rg_left">
        <p>新用户注册</p>
        <p>USER REGISTER</p>
    </div>
    <div class="rg_center">
        <div class="rg_form">
            <form action="#" method="post">
                <table>
                    <tr>
                        <td class="td_left"><label for="username">用户名</label></td>
                        <td class="td_right"><input type="text" name="username" id="username" placeholder="输入用户名"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="password">密码</label></td>
                        <td class="td_right"><input type="password" name="password" id="password" placeholder="输入密码">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="email">email</label></td>
                        <td class="td_right"><input type="email" name="email" id="email" placeholder="输入邮箱"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="name">姓名</label></td>
                        <td class="td_right"><input type="text" name="name" id="name" placeholder="输入姓名"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="tel">手机号</label></td>
                        <td class="td_right"><input type="text" name="tel" id="tel" placeholder="输入电话"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label>性别</label></td>
                        <td class="td_right"><input type="radio" name="gender" value="male">男
                            <input type="radio" name="gender" value="female">女
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="birthday">出生日期</label></td>
                        <td class="td_right"><input type="date" name="birthday" id="birthday"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="checkcode">验证码</label></td>
                        <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="输入验证码">
                            <img id="img_check" src="img/按钮.jpg" height="60" width="80">
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center"><input type="submit" id="btn_sub" value="注册"></td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
    <div class="rg_right">
        <p>已有账号<a href="www.baidu.com">立即登录</a></p>
    </div>
</div>
</body>
</html>