CSS盒子模型

最新推荐文章于 2024-10-08 17:57:19 发布

十三三三三i

最新推荐文章于 2024-10-08 17:57:19 发布

阅读量61

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/hu20210623/article/details/119486381

版权

本文详细解析了HTML、CSS和JavaScript在创建会员登录界面中的应用，包括基本布局、外边距调整、圆角边框设计以及阴影效果的实现。通过实例展示了如何使用居中、边框样式和CSS3特性提升用户体验。

摘要由CSDN通过智能技术生成

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

    <style>

        body{
            /*body总有一个默认的外边距  margin:0 常见初始化操作*/
            margin: 0;
            padding: 0;
            text-decoration: none;

        }

        #box{
            /*border: 粗细，样式，颜色;*/
            width:300px;
            border: 1px solid red;
        }
        h2{
            font-size: 16px;
            background: #FF0000;
            line-height: 35px;
            margin-top: 13px;
        }

        form{
            background: coral;
        }

        div:nth-of-type(1) input{
            border: 2px solid black;
        }
        div:nth-of-type(2) input{
            border: 2px dashed black;
        }
        div:nth-of-type(3) input{
            border: 2px solid black;
        }


    </style>
</head>
<body>

<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>用户名：</span>
            <input type="text">
        </div>
        <div>
            <span>密码：</span>
            <input type="text">
        </div>
        <div>
            <span>邮箱：</span>
            <input type="text">
        </div>
    </form>


</div>

</body>
</html>

外边距

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

  <style>
    /*外边距的妙用：居中元素
    margin：0 auto
    */
    #box{
      /*border: 粗细，样式，颜色;*/
      width:300px;
      border: 1px solid red;
      margin: 0 auto;
    }
    h2{
      font-size: 16px;
      background: #FF0000;
      line-height: 35px;
      margin-top: 0px;
    }

    form{
      background: coral;
    }
    input{
      border: 1px solid black;
    }
    div:nth-of-type(1){
      /*内边距 padding*/
      padding: 10px 0 10px 0;
    }




  </style>
</head>
<body>
<div id="box">
  <h2>会员登录</h2>
  <form action="#">
    <div>
      <span>用户名：</span>
      <input type="text">
    </div>
    <div>
      <span>密码：</span>
      <input type="text">
    </div>
    <div>
      <span>邮箱：</span>
      <input type="text">
    </div>
  </form>


</div>

</body>
</html>

圆角边框

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

  <style>
    /*border-radius: 位置顺序为 左上 右上 右下 左下 顺时针*/
    /*圆圈：圆角 = 图形半径*/
    div{
      width: 100px;
      height: 100px;
      border: 5px solid pink;
      border-radius: 50px 25px 15px 5px;
    }
  </style>
</head>
<body>

<div></div>

</body>
</html>

阴影

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

  <style>
    div{
      width: 200px;
      height: 200px;
      border: 5px solid hotpink;
      box-shadow: 5px 5px 50px aqua;
    }

    img{
      border-radius: 300px;
      box-shadow: 10px 10px 100px hotpink;
    }
  </style>

</head>
<body>

<div></div>

<img src="images/touxiang.png" alt="">

</body>
</html>