网页开发鼠标滑过内容上移

前端开发需要英语吗 前端 开发软件 学软件开发还是前端好

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>鼠标滑过内容上移</title>
    <style>
        ul,
        li,
        i,
        div,
        h3,
        p,
        label {
            margin: 0;
            padding: 0;
        }
        .ul1 li {
            position: relative;
            width: 250px;
            height: 200px;
            list-style: none;
            overflow: hidden;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.0980392);
            color: #93999f;
            cursor: pointer;
            border-radius: 5px;
        }
        .ul1 i {
            display: block;
            width: 250px;
            height: 150px;
            background: #bce8f1;
        }
        .ul1 div {
            width: 250px;
            height: 144px;
        }
        .ul1 div .label1 {
            position: absolute;
            top: 130px;
            background: white;
            transition: all 0.5s;
        }
        .ul1 li:hover {
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.298039);
        }
        .ul1 li:hover .label1 {
            top: 100px;
        }
        .ul1 div h3 {
            font-size: 14px;
            margin-top: 33px;
            color: #444;
        }
        .ul1 div p {
            height: 40px;
            font-size: 12px;
        }
        .ul1 .label2 {
            position: absolute;
            width: 250px;
            bottom: 0;
            height: 20px;
            background: white;
        }
        .color-red {
            color: red;
        }
        .r {
            float: right
        }
    </style>
</head>
<body>
    <ul class=”ul1″>
        <li>
            <i></i>
            <div>
                <label class=”label1″>
                    <h3> 组件方式开发 web App全站 </h3>
                    <p> 用HTML5/CSS3/js流行技术,以组件式开发WebApp全站。</p>
                </label>
                <label class=”label2″>
                    <span class=”l color-red”>¥78.00</span>
                    <span class=”r”>1878人在学</span>
                </label>
            </div>
        </li>
    </ul>
</body>
</html>

前端开发学习视频 企业版前端开发工具 web前端开发在线视频

» 本文来自:前端开发者 » 《网页开发鼠标滑过内容上移》
» 本文链接地址:https://www.rokub.com/5400.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!