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>
CSS3_综合案例

推荐阅读
