HTML5之css简单样式

最新推荐文章于 2024-04-28 14:44:52 发布

我就是DaLing呀！

最新推荐文章于 2024-04-28 14:44:52 发布

阅读量946

点赞数

本文链接：https://blog.csdn.net/weixin_42418774/article/details/89852894

版权

一、盒模型：

代码：

<style>
        .box{
            width: 400px;
            height: 200px;
            background-color: #ccc;
            margin: 200px auto;
        }
        .left{
            width: 200px;
            height: 198px;
            background-color: #4139ff;
            float: left;
            padding-left: 10px;
            border-right:10px solid green;
            box-sizing: border-box;

        }
        .right{
            width: 200px;
            height: 198px;
            background-color: #ff2e19;
            float: left;

        }
    </style>
</head>
<body>
<div class="box">
    <div class="left">哈哈哈哈哈哈哈哈哈哈哈哈哈哈啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>
    <div class="right"></div>
</div>

</body>

效果图:

鼠标上移到盒子上面的效果：

代码：

   <style>     
         
        .items{
            text-align: center;
            image-top:150px;

        }
        .item{
            width: 316px;
            height: 200px;
            display: inline-block;
            margin:0 15px;
            overflow:hidden;
            box-sizing: border-box;  /*让盒子不抖动*/
        }
        .b1{
            background-image: url("../image/1-14.jpg");
        }
        .b2{
            background-image: url("../image/1-18.jpg");
        }
        .b3{
            background-image: url("../image/1-14.jpg");
        }
        /*鼠标上移效果*/
        .item:hover{
            border: 5px solid red
        }
    </style>
<body>
</head>
<div class="items">
    <div class="item b1"></div>
    <div class="item b2"></div>
    <div class="item b3"></div>
</div>
</body>

效果图：

二、阴影：

文字阴影代码加解释：

效果图：

边框阴影代码加解释：

<style>  
 div{
            width: 200px;
            height: 200px;
            background-color: orange;
            margin: 100px auto;
            box-shadow: 5px 5px;
            /*正数阴影在下方向*/
            /*负数阴影在上方向*/
        }
</style>
<body>
<div></div>
</body>

效果图：

三、兄弟伪类：

使用.first +li{

color:blue;

}的时候：

使用.first ~li{

color:pink;

}的时候：

四、机器人案例：

代码和解释：

/*":before" 伪元素可以在元素的内容前面插入新内容。
":after" 伪元素可以在元素的内容之后插入新内容。*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>机器人案例</title>、
    <style>
        *{
            padding: 0;
            margin: 0;
            background-color: #ccc;
        }
        /*红色的大框*/
        .content{
            width: 500px;
            height: 500px;
            border:1px solid red;
            margin:50px auto;
        }
        .an_header{
            width: 250px;
            height: 125px;
            background-color: darkgreen;
            margin: 10px auto;
            /*添加圆角  :左上 右上 左下 右下*/
            border-radius: 125px 125px 0 0;
            position: relative;
            /*	生成相对定位的元素*/
        }
        /*使用伪元素添加眼睛*/
        .an_header::before,
        .an_header::after{
            /*一定要设置content属性*/
            content: "";
            /*如果需要设置宽度就应该转换其为块级元素，它默认是行级元素
            1.float   2.position  3.display:block 三种办法转换*/
            position: absolute;
            /*生成绝对定位的元素*/
            bottom: 40px;
            width: 20px;
            height: 20px;
            border-radius: 10px;
            background-color: white;
        }
        /*把相同的代码进行提取，再重新把不同的代码进行编写；这样大大的减少了代码的冗余*/
        .an_header::after{
           right: 70px;
        }
        .an_header::before{
            left: 70px;
        }
        .an_body{
            width: 250px;
            height: 250px;
            background-color: darkgreen;
            border-radius: 0px 0px 20px 20px;
            margin: 0 auto;
            position: relative;
        }
        .an_body::before,
        .an_body::after{
            content:"";
            position: absolute;
            top: 20px;
            background-color: darkgreen;
            width: 30px;
            height: 180px;
            border-radius: 10px;
        }
        .an_body::before{
            left:-40px;
        }
        .an_body::after{
            right:-40px;
        }
        .an_footer{
            width: 250px;
            height: 100px;
            position: relative;
            margin: 0 auto;
        }
        .an_footer::before,
        .an_footer::after{
            content:"";
            position: absolute;
            top:00px;
            background-color: darkgreen;
            width: 30px;
            height: 90px;
            border-radius: 0px 0px 10px 10px;
        }
        .an_footer::before{
            left: 50px;
        }
        .an_footer::after{
            right: 50px;
        }
    </style>
</head>
<body>
<div class="content">
    <div class="an_header"></div>
    <div class="an_body"></div>
    <div class="an_footer"></div>
</div>
</body>
</html>

效果图：

我就是DaLing呀！

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML5之css简单样式

一、盒模型：代码：<style> .box{ width: 400px; height: 200px; background-color: #ccc; margin: 200px auto; } .left{ ...
复制链接

扫一扫