设置元素的 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>
