请老师检查

首页课程实战体系课手记专栏慕课教程

请老师检查

来源：2-17 自由编程

慕UI4313976

2021-03-03 21:20:17

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        img,
        button {
            display: block;
        }

        .content-wrap {
            width: 100%;
            min-width: 1200px;
            margin: 0 auto;
        }

        .content-wrap img,
        .content-wrap div {
            float: left;
            width: 25%;
            height: 380px;
        }

        .content-wrap div {
            background-color: #07cbc9;
        }

        .content-wrap div p:nth-child(1) {
            padding: 20px 20px 0 20px;
            font-size: 24px;
            color: #fff;
        }

        .content-wrap div p:nth-child(2) {
            margin-top: 30px;
            margin-bottom: 20px;
            padding: 0px 20px;
            font-size: 16px;
            color: #fff;
        }

        .content-wrap div p:nth-child(3) {
            margin-bottom: 30px;
            padding: 0px 20px;
            font-size: 14px;
            color: gray;
        }

        .content-wrap div button {
            width: 138px;
            height: 40px;
            border: none;
            background-color: #000;
            color: white;
            cursor: pointer;
            margin: 0 auto;
        }

        .content-wrap div button:hover {
            background-color: #fff;
            color: #000;
        }
        .spec1{
            position: relative;
        }
        .spec1::before{
            content:" ";
            width: 0;
            height: 0;
            border: 20px solid transparent;
            border-right-color: #07cbc9;
            position: absolute;
            top:50%;
            margin-top: -20px;
            left:-40px;
        }
        .spec2{
            position: relative;
        }
        .spec2::before{
            content:" ";
            width: 0;
            height: 0;
            border: 20px solid transparent;
            border-left-color: #07cbc9;
            position: absolute;
            top:50%;
            margin-top: -20px;
            right:-40px;
        }
    </style>
</head>

<body>

    <div class="content-wrap">
        <img src="./img/b1.jpg" alt="">
        <div class="spec1">
            <p>Library</p>
            <p>lorem ipsum is simply dummy text of the printing and typesetting industry</p>
            <p>lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknow printer took
                a galley of type and scrambled it to make a tyoe specimen bool.</p>
            <button>EXPLORE</button>
        </div>
        <img src="./img/b2.jpg" alt="">
        <div class="spec1">
            <p>Library</p>
            <p>lorem ipsum is simply dummy text of the printing and typesetting industry</p>
            <p>lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknow printer took
                a galley of type and scrambled it to make a tyoe specimen bool.</p>
            <button>EXPLORE</button>
        </div>
        <div class="spec2">
            <p>Library</p>
            <p>lorem ipsum is simply dummy text of the printing and typesetting industry</p>
            <p>lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknow printer took
                a galley of type and scrambled it to make a tyoe specimen bool.</p>
            <button>EXPLORE</button>
        </div>
        <img src="./img/b3.jpg" alt="">
        <div class="spec2">
            <p>Library</p>
            <p>lorem ipsum is simply dummy text of the printing and typesetting industry</p>
            <p>lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknow printer took
                a galley of type and scrambled it to make a tyoe specimen bool.</p>
            <button>EXPLORE</button>
        </div>
        <img src="./img/b4.jpg" alt="">
    </div>

</body>

</html>

写回答

1回答

好帮手慕夭夭

好帮手慕夭夭

2021-03-04

已采纳

同学你好，做的挺不错的，不过有一个样式优化的小建议，如下：

鼠标移入按钮时，建议改成背景色透明，并设置一个边框效果更好看，如下：

祝学习愉快~

0

0 学习 · 15276 问题

相似问题

老师，麻烦检查一下有错误没

回答 1

请老师检查

回答 1

请老师检查

回答 1

请老师检查

回答 1

请老师检查

回答 1

打开慕课网App查看更多内容