应用css完成的小案例

最新推荐文章于 2024-09-14 17:04:32 发布

Ray-Li

最新推荐文章于 2024-09-14 17:04:32 发布

阅读量58

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_74417484/article/details/130716448

版权

一、完成一个简易登录框
效果如下：
在这里插入图片描述
可以通过自己爱好去调整代码（如有考虑不周敬请指正）
实现代码：
html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>
<form>
<div>
    <h3>请注册</h3>
    <span class="op1">已有帐号？</span><a href="#">请登录</a><br>
<!--    在文本框前面加提示信息-->
    <label for="user">用户名</label>
    <input type="text"class="op2" placeholder="请输入用户名" id="user"><br>
    <label for="u-phone">手机号</label>
    <select name="" id="">
        <optgroup>
            <option value="">+86</option>
        </optgroup>
    </select>
    <input type="text" id="u-phone" placeholder="请输入手机号"><br>
<!--    记得加分号-->
    <label for="psw">密&emsp;码</label>
    <input type="password"class="op2"id="psw"placeholder="请输入密码"><br>

    <label for="yzm">验证码</label>
    <input type="text" id="yzm">
    <button>获取验证码</button>
    <br>
    <input type="checkbox" class="op1" id="yd">
    <label for="yd" class="op1">阅读并接受协议</label>
    <br>
    <input type="submit" class="op3">
</div>    
</form>
</body>
</html>

css部分：

div{
    border: solid;
    margin: 0 auto;
    width: 500px;
    border-radius: 10px;
    padding: 20px;
}
.op1{
    color: gray;
    font-size: 10px;
}
a{
    text-decoration: none;

}
a:link{
    color: blue;
}
a:hover{
    color: red;
}
a:active{
    color: green;
}
a:visited{
    color: gray;
}
.op3{
    width: 500px;
    height: 30px;
    background-color: #87ceeb;
    border: none;
    border-radius: 10px;
}
.op2{
    width: 400px;
    height: 30px;
    margin-bottom: 10px;
}
div input{
    margin-bottom: 10px;
}

对于输入框长度的微调可以通过控制台实现

二、简易导航栏
效果：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            border-bottom: solid orange 2px;
            position: relative;
        }
        .father{
            display: block;
            clear: both;
            content: "";
            height: 30px;
        }
    ul>li{
        list-style: none;
        float: left;
        /*background: gray;*/
        width: 75px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        margin: 10px;
    }
    li:hover{
        background: rgba(0,0,0,0.3);
    }
    input{
        width: 500px;
        height: 30px;
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        background-image: url("搜索.png");
        background-repeat: no-repeat;
        background-size: 30px 30px;
        border-radius: 10px;
    }
    </style>
</head>
<body>
<div>
    <ul class="father">
        <li>首页</li>
        <li>个人中心</li>
        <li>视频</li>
        <li>图片</li>
        <li>文章</li>
    </ul>
    <input type="text">
</div>
</body>
</html>

三、网页上的商品展示
效果：
在这里插入图片描述
想要展示什么直接把图片链接放到src里面就行，然后想增加多少就加div里面包着img标签就行了，父级盒子高度会自适应增加；
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father{
            width: 992px;
            background: skyblue;
            margin: 0 auto;
        }
        .father:after{
            display: block;
            clear: both;
            content: "";
        }
        .father>div{
            width: 234px;
            height: 300px;
            background: orange;
            float: left;
            border: gray solid 1px;
            margin-left: 10px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<div class="father">
    <div><img src="" alt=""></div>
    <div><img src="" alt=""></div>
    <div><img src="" alt=""></div>
    <div><img src="" alt=""></div>
    <div><img src="" alt=""></div>
    <div><img src="" alt=""></div>
    <div><img src="" alt=""></div>
    <div><img src="" alt=""></div>
</div>
</body>
</html>

四、静态轮播图
效果：
在这里插入图片描述
代码：

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>静态轮播图</title>
    <link rel="stylesheet" href="轮播图.css">
</head>
<body>
<div>
    <ur class="img">
        <li class="show"><img src="../../imgs/ml1.jpg" alt=""></li>
        <li><img src="../../imgs/car.jpg" alt=""></li>
        <li><img src="../../imgs/ML3.jpg" alt=""></li>
        <li><img src="../../imgs/R-C.jpg" alt=""></li>
        <li><img src="../../imgs/zgq.jpg" alt=""></li>

    </ur>
    <ur class="sign">
        <li class="left">&lt;</li>
        <li class="right">&gt;</li>
    </ur>
    <ur class="round">
        <li class="clicked"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ur>
</div>
</body>
</html>

css部分：

div{
    width: 700px;
    height: 400px;
    margin: 0 auto;
    border: 1px solid black;
    position: relative;
}

.img>li{
    list-style: none;
    display: none;
}
.img>li>img{
    width: 700px;
    height: 400px;

}
.sign>li{
    list-style: none;
    position: absolute;
    color: white;
    top: 50%;
    transform: translateY(-25px);
    text-align: center;
    /*background-color: gray;*/
    line-height: 50px;
}
.left{
    width: 50px;
    height: 50px;
    left: 0;
}
.right{
    width: 50px;
    height: 50px;
    right: 0;
}
.right:hover{
    background-color: gray;
}
.left:hover{
    background-color: gray;
}
.round{
    position: absolute;
    bottom: 0;
    left: 50%;
}
.round>li{
    float: left;
    width: 10px;
    height: 20px;
    transform: translateX(-50px);
    margin-left: 5px;
}
.round>li:hover{
    color: white;
}
.img li.show{
    display: block;
}
.round li.clicked{
    color: white;
}

五、视频的幕布
效果：
未悬浮时：
图片摘自网上
鼠标悬浮时：
播放按钮来自阿里矢量图库
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 350px;
            height: 200px;
            margin:0 auto;
            border: solid gray 1px;
            position: relative;
        }
        img{
            width: 100%;
            height: 100%;
        }
        .box1{
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.3) url("播放.png") no-repeat center;
            position: absolute;
            display: none;  /*未悬浮时隐藏元素*/
        }
        .box:hover .box1{
            display: block;   /*设置成块级元素的同时显示出来*/
        }
    </style>
</head>
<body>
<div class="box">
    <div class="box1"></div>
    <img src="速度与激情.png" alt="">
</div>
</body>
</html>