最近要做一个网站,大概就是一个小游戏的网站,要做一个游戏列表,这个样式我自己感觉我写的太丑了,
也搭配不出好看的颜色,背景图片也怪怪的,大概要求是这样的
上面 三个X 是这个游戏的标题,下面红色阴影是游戏简介,
当鼠标在img图片上时,显示这个简介(也可以没有这个)
img是游戏图片
大概布局是这样
这个应该怎么写,让页面美观整洁?可以私信我
flex 布局 整点动画吧 会好些 ,如果是游戏类的话 可以参考下4399那种
你这要的是设计稿....不是css...我感觉
<!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;
}
.box {
display: flex;
width: 100%;
/* height: 400px; */
justify-content: space-around;
background: blue;
flex-wrap: wrap;
}
.box>.list-item {
width: 32%;
height: 100%;
background: white;
margin: 20px 0;
}
.list-item img {
width: 100%;
height: 200px;
margin: 30px auto;
display: block;
}
.list-item .title {
font-size: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<div class="list-item">
<p class="title">王者荣耀</p>
<div class="gameBox">
<p>《王者荣耀》是由腾讯游戏天美工作室群开发并运行的一款运营在Android、IOS、NS平台上的MOBA类国产手游,于2015年11月26日在Android、iOS平台上正式公测,游戏前期使用名称有《英雄战迹》、《王者联盟》。《传说对决》(Arena Of Valor),即《王者荣耀》的欧美版本于2018年在任天堂Switch平台发售。 [1]
王者荣耀中的玩法以竞技对战为主,玩家之间进行1VS1、3VS3、5VS5等多种方式的PVP对战,还可以参加游戏的冒险模式,进行PVE的闯关模式,在满足条件后可以参加游戏的排位赛等,是属于推塔类型的游戏。
</p>
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fzkres1.myzaker.com%2F202110%2F615d7753b15ec03a1072d375_1024.jpg&refer=http%3A%2F%2Fzkres1.myzaker.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658918850&t=2405be485b2e2d737b1cd2255909ff0e" alt="">
</div>
</div>
<div class="list-item">
<p class="title">王者荣耀</p>
<div class="gameBox">
<p>《王者荣耀》是由腾讯游戏天美工作室群开发并运行的一款运营在Android、IOS、NS平台上的MOBA类国产手游,于2015年11月26日在Android、iOS平台上正式公测,游戏前期使用名称有《英雄战迹》、《王者联盟》。《传说对决》(Arena Of Valor),即《王者荣耀》的欧美版本于2018年在任天堂Switch平台发售。 [1]
王者荣耀中的玩法以竞技对战为主,玩家之间进行1VS1、3VS3、5VS5等多种方式的PVP对战,还可以参加游戏的冒险模式,进行PVE的闯关模式,在满足条件后可以参加游戏的排位赛等,是属于推塔类型的游戏。
</p>
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fzkres1.myzaker.com%2F202110%2F615d7753b15ec03a1072d375_1024.jpg&refer=http%3A%2F%2Fzkres1.myzaker.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658918850&t=2405be485b2e2d737b1cd2255909ff0e" alt="">
</div>
</div>
<div class="list-item">
<p class="title">王者荣耀</p>
<div class="gameBox">
<p>《王者荣耀》是由腾讯游戏天美工作室群开发并运行的一款运营在Android、IOS、NS平台上的MOBA类国产手游,于2015年11月26日在Android、iOS平台上正式公测,游戏前期使用名称有《英雄战迹》、《王者联盟》。《传说对决》(Arena Of Valor),即《王者荣耀》的欧美版本于2018年在任天堂Switch平台发售。 [1]
王者荣耀中的玩法以竞技对战为主,玩家之间进行1VS1、3VS3、5VS5等多种方式的PVP对战,还可以参加游戏的冒险模式,进行PVE的闯关模式,在满足条件后可以参加游戏的排位赛等,是属于推塔类型的游戏。
</p>
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fzkres1.myzaker.com%2F202110%2F615d7753b15ec03a1072d375_1024.jpg&refer=http%3A%2F%2Fzkres1.myzaker.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658918850&t=2405be485b2e2d737b1cd2255909ff0e" alt="">
</div>
</div>
<div class="list-item">
<p class="title">王者荣耀</p>
<div class="gameBox">
<p>《王者荣耀》是由腾讯游戏天美工作室群开发并运行的一款运营在Android、IOS、NS平台上的MOBA类国产手游,于2015年11月26日在Android、iOS平台上正式公测,游戏前期使用名称有《英雄战迹》、《王者联盟》。《传说对决》(Arena Of Valor),即《王者荣耀》的欧美版本于2018年在任天堂Switch平台发售。 [1]
王者荣耀中的玩法以竞技对战为主,玩家之间进行1VS1、3VS3、5VS5等多种方式的PVP对战,还可以参加游戏的冒险模式,进行PVE的闯关模式,在满足条件后可以参加游戏的排位赛等,是属于推塔类型的游戏。
</p>
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fzkres1.myzaker.com%2F202110%2F615d7753b15ec03a1072d375_1024.jpg&refer=http%3A%2F%2Fzkres1.myzaker.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658918850&t=2405be485b2e2d737b1cd2255909ff0e" alt="">
</div>
</div>
<div class="list-item">
<p class="title">王者荣耀</p>
<div class="gameBox">
<p>《王者荣耀》是由腾讯游戏天美工作室群开发并运行的一款运营在Android、IOS、NS平台上的MOBA类国产手游,于2015年11月26日在Android、iOS平台上正式公测,游戏前期使用名称有《英雄战迹》、《王者联盟》。《传说对决》(Arena Of Valor),即《王者荣耀》的欧美版本于2018年在任天堂Switch平台发售。 [1]
王者荣耀中的玩法以竞技对战为主,玩家之间进行1VS1、3VS3、5VS5等多种方式的PVP对战,还可以参加游戏的冒险模式,进行PVE的闯关模式,在满足条件后可以参加游戏的排位赛等,是属于推塔类型的游戏。
</p>
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fzkres1.myzaker.com%2F202110%2F615d7753b15ec03a1072d375_1024.jpg&refer=http%3A%2F%2Fzkres1.myzaker.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658918850&t=2405be485b2e2d737b1cd2255909ff0e" alt="">
</div>
</div>
<div class="list-item">
<p class="title">王者荣耀</p>
<div class="gameBox">
<p>《王者荣耀》是由腾讯游戏天美工作室群开发并运行的一款运营在Android、IOS、NS平台上的MOBA类国产手游,于2015年11月26日在Android、iOS平台上正式公测,游戏前期使用名称有《英雄战迹》、《王者联盟》。《传说对决》(Arena Of Valor),即《王者荣耀》的欧美版本于2018年在任天堂Switch平台发售。 [1]
王者荣耀中的玩法以竞技对战为主,玩家之间进行1VS1、3VS3、5VS5等多种方式的PVP对战,还可以参加游戏的冒险模式,进行PVE的闯关模式,在满足条件后可以参加游戏的排位赛等,是属于推塔类型的游戏。
</p>
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fzkres1.myzaker.com%2F202110%2F615d7753b15ec03a1072d375_1024.jpg&refer=http%3A%2F%2Fzkres1.myzaker.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658918850&t=2405be485b2e2d737b1cd2255909ff0e" alt="">
</div>
</div>
</div>
</body>
<script>
</script>
</html>
用flex布局 。样式自己可以调