CSS3_综合案例 | 综合案例

综合案例
设置元素的 width，还可以利用 left 和 right
为了防止图片太小，background-size: 100% 100%;
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8" />

        <title></title>

        <link rel="stylesheet" type="text/css" href="./css/index.css" />

        <script type="text/javascript" src="./js/kjfFunctions.js"></script>

        <script type="text/javascript" src="./js/index.js"></script>

        <style type="text/css">

            * {

                margin: 0;

                padding: 0;

            }

            html,body{

                height: 100%;

            }

            header {

                position: absolute;

                top: 0px;

                left: 0px;

                right: 0px;

                height: 130px;

                padding: 8px 15px;

                background-color: rgba(0, 0, 0, 0.7);

                display: flex;

                justify-content: space-between;

            }

            #we_are {

                display: flex;

                align-items: center;

                transform: skewY(20deg) translate(40px, 10px);

                font-size: 48px;

                color: #a798f5;

            }

            #we_are::after {

                content:"Venom";

                transform-origin: left top;

                transform: skewX(-20deg) translateX(40px) rotateZ(-20deg);

                color: #7375b9;

                font-size: 96px;

                text-shadow: 0 0 30px #82def3;

            }

            header ul {

                list-style: none;

                display: flex;

                flex-flow: 0;

                align-grow: 1;

                align-items: center;

            }

            a {

                color: #7375b9;

            }

            a:hover {

                font-size: 24px;

                text-shadow: 0 0 4px #82def3;

            }

            a:active {

                font-size: 18px;

                text-shadow: 0 0 2px #82def3;

            }

            header ul li {

                width: 85px;

                height: 35px;

                margin-right: 10px;

                display: flex;

                align-items: center;

                justify-content: center;

                font-size: 16px;

                border: 1px solid #fff;

                border-radius: 10px;

            }

            header ul li:last-child {

                margin-right: 0px;

            }

            article ul li a img {

                width: 120px;

                height: 80px;

            }

            article {

                width: 100%;

                height: 100%;

                background: url(./img/venomBg.jpg) no-repeat;

                background-size: 100% 100%;

                display: flex;

                justify-content: flex-start;

            }

            article ul {

                list-style: none;

                padding-top: 146px;

                padding-left: 292px;

                display: flex;

                flex-direction: column;

            }

            article ul li{

                width: 200px;

                height: 200px;

                display: flex;

                justify-content: center;

                align-items: center;

            }

            article ul li a{

                color: #000;

                display: flex;

                flex-direction: column;

                justify-content: center;

                align-items: center;

            }

        </style>

    </head>

    <body>

        <header>

            <div id="we_are">

                We are

            </div>

            <ul>

                <li><a href="javascript:;">毒液</a></li>

                <li><a href="javascript:;">屠杀</a></li>

                <li><a href="javascript:;">嚎叫</a></li>

            </ul>

        </header>

        <article>

            <ul>

                <li><a href="javascript:;">

                    <img src="./img/venom1.jpg"/>

                    毒液的味道

                </a></li>

                <li><a href="javascript:;">

                    <img src="./img/venom2.png"/>

                    暴虐

                </a></li>

                <li><a href="javascript:;">

                    <img src="./img/venom3.png"/>

                    Spider

                </a></li>

                <li><a href="javascript:;">

                    <img src="./img/venom6.png"/>

                   埃迪·布洛克

                </a></li>

            </ul>

        </article>

    </body>

</html>