前端学习笔记之HTML5、CSS3新特性小练习 3.13

最新推荐文章于 2024-04-05 01:17:25 发布

Terry-98

最新推荐文章于 2024-04-05 01:17:25 发布

阅读量455

点赞数 3

文章标签：前端 html5 学习

本文链接：https://blog.csdn.net/qq_36450483/article/details/123462252

版权

1 消失的边界线

目标实现效果：

看看上图，经常会在一些导航栏中见到，要求每行中最后一列的右边框消失，如何在所有浏览器中最便捷优雅的实现，当我们学习了C3的选择器，我们就能够实现。

代码：

<!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>
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            width: 190px;
            height: 100px;
            background-color: #abc;
            margin: 200px auto;
            overflow: hidden;
        }
        ul li{
            
            float: left;
            width: 60px;
            list-style: none;
            font-size: 18px;
            margin-bottom: 10px;
            border-right: 1px solid black;
            line-height: 25px;
            text-align: center;
        }
        ul li:nth-child(3n){
            border-right:0;
        }
    </style>
</head>
<body>
    <ul>
        <li>请求</li>
        <li>我我</li>
        <li>任然</li>
        <li>涛涛</li>
        <li>应用</li>
        <li>uu</li>
        <li>以</li>
    </ul>
</body>
</html>

2 京东商品列表

目标实现效果：

本人思路：定义一个大盒子box，从上往下分别排列1到5号盒子。此案例的制作，结合了之前学习的知识点，是个比较综合的案例。

代码：

<!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>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 170px;
            height: 265px;
            /* background-color: #abc; */
            margin: 100px auto;

        }
        .pic{
            width: 170px;
            height:173px;
            /* background-color: #bbf; */
        }
        .pic img{
            width: 100%;
        }
        .content{
            font-size: 7.5px;
            padding: 0 8px;
            color: #666;
        }
        .price{
                height: 26px;
                /* background-color: #aaa; */
        }
        .price em{
            color: red;
            font-size: 16px;
            padding: 0 10px;
            font-style: normal;
        }
        .price del{
            color: #a4a4a4;
            font-size: 10px;
            font-weight: 600;
        }
        .num{
            height: 16px;
            /* background-color: red; */
        }
        .num .bar{
            float: left;
            width: 77px;
            height: 8px;
            /* background-color: yellow; */
            margin: 0 5px;
            border: 1px solid #b1191a;
            border-radius: 4px;
        }
        .num .bar-in{
            width: 87%;
            height: 8px;
            background-color: #f24349;
            transition: width .5s;
        }
        .num .bar-in:hover{
            width: 100%;
        }
        .num p{
            float: left;
            font-size: 7px;
            color: #666;
        }
        .num em{
            color: red;
        }
        .button{
            display: block;
            width: 170px;
            height: 30px;
            background-color: #b1191a ;
            text-align: center;
            text-decoration: none;
            line-height: 30px;
            font-size: 12px;
            color: white;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="pic">
            <img src="mobile.jpg" alt="">
        </div>
        <div class="content">Apple苹果iPhone 6s Plus（A1699）32G 金色 移动联通电信5G手机</div>
        <p class="price">
            <em>¥6088</em><del>¥6988</del>
        </p>
        <div class="num">
            <p>已售87%</p>
            <div class="bar">
                <div class="bar-in"></div>
            </div>
            <p>剩余<em>29</em>件</p>
        </div>
        
        <a href="#" class="button">立即抢购</a>
    </div>
</body>
</html>

3 小米logo样式

实现目标样式：

转变为

当鼠标移入到logo上的时候，左侧会滑出一个小房子，当鼠标移出logo的时候，恢复成原来的样子，并且中间的切换是有动画的

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .header-logo {
            position: relative;
        }
        /* 设置a标签的样式 */
        
        .logo {
            display: block;
            width: 55px;
            height: 55px;
            overflow: hidden;
            background-color: #ff6700;
            text-align: left;
            text-indent: -9999em;
        }
        /* mi logo的样式 */
        
        .logo::before {
            /* 定位 */
            position: absolute;
            /* 伪元素必须要设置content属性 */
            content: '';
            /* 左偏移 */
            left: 0;
            /* 上偏移 */
            top: 0;
            width: 55px;
            height: 55px;
            /* 设置过渡 */
            transition: all .3s;
            /* 背景图片 */
            background: url(./images/mi-logo.png) no-repeat center center;
            /* 透明度 */
            opacity: 1;
        }
        /* mi home 的样式 */
        
        .logo::after {
            position: absolute;
            content: '';
            left: 0;
            top: 0;
            width: 55px;
            height: 55px;
            transition: all .3s;
            background: url(./images/mi-home.png) no-repeat center center;
            margin-left: -55px;
            opacity: 0;
        }
        /* 鼠标移入 让mi logo 往右侧进行滑动 */
        
        .logo:hover::before {
            opacity: 0;
            margin-left: 55px;
        }
        /* 鼠标移入 让mi home 回到盒子中间 */
        
        .logo:hover::after {
            opacity: 1;
            margin-left: 0;
        }
    </style>
</head>

<body>
    <div class="header-logo">
        <a href="" class="logo" title="小米官网">小米官网</a>
    </div>
</body>

</html>