课堂笔记 HTML

HTML5 常见简单布局

 

界面见下图↓

 

以下为代码

<!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>
        .box{
            /* 盒子模型 */
            width: 300px;
            height: 300px;
            background-color: aqua;
            padding: 20px;
            border: 20px solid cornflowerblue;
            margin: 20px;   /* 上右下左 默认和对位一样 */
            /* 所有除了内容的外部都可以分别指定上下左右 */ 
            /* box-sizing: border-box; */
            display: inline-block;
            overflow: hidden;   /* 内容溢出父容器的处理方式 */
            outline: 5px solid blue;
            box-shadow: gray 10px 10px 10px;
            border-radius: 50px; /* 圆角半径 */
            opacity: 1.0; /* 透明度 1为不透明 0全透明 */


            /* 内容 */
            color: rgb(2, 61, 138);
            color: rgba(0, 0, 0, 0.9);
            text-align: center; /*居中对齐*/
            line-height: 300px;  /*垂直对齐*/
            text-shadow: black 3px 3px 10px;
            text-decoration: underline; /* 下划线 */
            font-size: 30px;   /* 大小 */
            font-weight: 700;  /* 字重 */
            font-family: fantasy; /* 字体 */
            
    
            /* 变形 */
            /* transform: translate(50px,50px);    */
            /* 位移 */
            /* transform: scale(1.2,1.2);    */
             /* 放大 */
            /* transform: rotate(90deg);   */
            /* 旋转 */
            /* transform: skew(30deg,30deg); */
             /* 拉伸 */

            /* 动画 */
            transition:  1.0s;
            

            

        }
        /* 伪元素 */
            /* 伪类 */
            .box:hover{
                width: 500px;
            }
            .box:active{
                background-color: coral;
            }
            /*伪标签*/
            .box::before{
                content: '价格';
            }
            .box::after{
                content: '元';
            }


    </style>
</head>
<body>
    <div class="box" >div</div>
    
</body>
</html>

 

posted @ 2021-07-22 20:12  Kianas  阅读(54)  评论(0)    收藏  举报