综合案例
- 设置元素的 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>