发表于： 2021-02-10 15:36:13
1 1262
Css任务三
注意点
eturnButton 要设置 overflow: hidden; 从而让div设置浮动后下一个div换行
.gameDes 要设置高度，从而不管左右怎么拉，随着文字由一行变为两行，总高度还是那么高
代码-float
magicmirror.css
body {
background-color: #68CDD6;
}
p {
color: #FFFFFF;
font-size: 1rem;
line-height: 1.8rem;
font-weight: bold
}
/* 返回按钮 */
.returnButton {
/* 上下 左右 */
margin: 2% 2%;
overflow: hidden;
}
.returnButton img {
float: left;
}
/* 葡萄藤logo */
.brand {
margin-top: 80px;
margin-bottom: 80px;
}
/* 文字描述 */
.gameDes {
margin-left: 10%;
margin-right: 10%;
height: 100px;
text-align: left;
}
/* 底部两个Logo */
.codeBottom {
margin: 80px 10%;
}
/* 让图片左右显示 */
.codeBottom div {
display: inline-block;
}
.codeBottom div:nth-child(1) {
float: left;
}
.codeBottom div:nth-child(2) {
float: right;
}
magicmirror.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/common.css" />
<link rel="stylesheet" href="css/magicmirror.css" />
<title>魔镜</title>
</head>
<body>
<!-- 返回标识 -->
<div class="returnButton">
<img src="img/return.png" alt="返回标识" />
</div>
<!-- 葡萄藤标识 -->
<div class="brand">
<img src="img/brand.png" alt="葡萄藤标识" />
</div>
<!-- 中间文字 -->
<div class="gameDes">
<p>葡萄藤轻游戏专注于桌游领域，提供在线杀人游戏，捉鬼，炸狼堡等多种聚会游戏，以线下聚会桌游道具为主。</p>
</div>
<!-- 底部俩标签 -->
<div class="codeBottom">
<div>
<img src="img/code1.png" alt="标识1" />
<p>人员</p>
</div>
<div>
<img src="img/code2.png" alt="标识2" />
<p>葡萄藤</p>
</div>
</div>
</body>
</html>
代码-flex
magicmirror2.html
不变
magicmirror2.css
body {
background-color: #68CDD6;
}
p {
color: #FFFFFF;
font-size: 1rem;
line-height: 1.8rem;
font-weight: bold
}
/* 返回按钮 */
.returnButton {
display: flex;
margin: 10px;
}
/* 葡萄藤logo */
.brand {
margin: 80px 0;
}
/* 文字描述 */
.gameDes {
margin-left: 10%;
margin-right: 10%;
height: 100px;
text-align: left;
}
/* 底部两个Logo */
.codeBottom {
display: flex;
margin: 40px 10%;
justify-content:space-between;
}
返回列表
评论