辛苦老师帮检查下作业

来源：3-3 编程练习

小银

2022-11-25 00:54:19

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
li{
list-style: none;
}

/* html,body{
            width: 100%;
        } */


header {
/* position: fixed;
            top: 0;
            left: 0; */
/* 为啥宽度是980？—————————— */
width: 100%;
/* 对父容器设置弹性布局，子元素就会默认  水平排列 */
display: flex;
/* 子项目间设置  相等间距 */
justify-content: space-around;
/* 子元素  垂直居中， 在父容器中设置 */
align-items: center;
background-color: rgb(0, 0, 0);
height: 80px;
}

/* img的百分比是相对于父容器logo的，所以父容器需先设宽，子容器的百分比宽度才生效 */
/* header .logo {
            height: 100%;
        }
        header .logo img{
            height: 100%;
        } */

header .nav {
/* 对父容器设置弹性布局，子元素就会默认水平排列， */
/* justify-content: space-between 设置子元素之间相等间距 ，前提给个宽度才能生效*/
display: flex;
width: 350px;
justify-content: space-between;
color: rgb(255, 255, 255);
font-size: 28px;
}

header .login {
display: flex;
/* width: 140px; */
/* 流体布局 ，不写死宽度，相对于父容器*/
width: 14%;
/* 设置子元素之间的间距 ，前提给个宽度才能生效*/
justify-content: space-between;
/* 为啥子元素input 能继承了父容器的高呢？ ——————————*/
height: 36px;
}
header .login input{
/* width: 60px; */
/* 不写死宽度，用padding撑起宽高，用字号内容撑起宽高 */
padding: 5px 8px 5px 8px;
font-size: 20px;
background-color: rgb(255, 160, 35);
color: rgb(255, 255, 255);
border-radius: 4px;
/* 去边线 */
border: none;
cursor:pointer;
}

.main-layout{
width: 100%;
/* background-color: rgb(168, 168, 168); */
}
.main-layout .main{
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
padding: 20px;
}
.main-layout .main .main-item{
box-sizing: border-box;
width: 48.93%;
padding: 20px;
background-color: rgb(155, 225, 245);
margin-bottom: 20px;
border-radius: 10px;

display: flex;
justify-content: space-between;
align-items: center;
}

.main-item-btn{
padding: 8px 12px;
border: none;
border-radius: 3px;
font-size: 20px;
background-color: rgb(248, 173, 75);
color: #ffffff;
font-weight: bold;

}

.main-layout .main .main-item:nth-child(2n+1){
margin-right: 20px;
}


.main-item .main-item-info p{
height: 40px;
line-height: 40px;
font-size: 16px;
}






</style>
</head>

<body>
<header>
<div class="logo">
<img src="http://climg.mukewang.com/59feb59700019dab01910057.png" alt="">
</div>
<ul class="nav">
<li>课程</li>
<li>路径</li>
<li>猿问</li>
<li>手记</li>
</ul>
<div class="login">
<input type="button" value="登录">
<input type="button" value="注册">
</div>
</header>

<main class="main-layout">
<ul class="main">
<li class="main-item">
<div class="main-item-info">
<p class="name">《前端小白入门手册》</p>
<p class="info">使用人群：没有任何前端基础的小白</p>
<p class="price">$499</p>
</div>
<button class="main-item-btn" >加入购物车</button>
</li>
<li class="main-item">
<div class="main-item-info">
<p class="name">《前端小白入门手册》</p>
<p class="info">使用人群：没有任何前端基础的小白</p>
<p class="price">$499</p>
</div>
<button class="main-item-btn" >加入购物车</button>
</li>
<li class="main-item">
<div class="main-item-info">
<p class="name">《前端小白入门手册》</p>
<p class="info">使用人群：没有任何前端基础的小白</p>
<p class="price">$499</p>
</div>
<button class="main-item-btn" >加入购物车</button>
</li>
<li class="main-item">
<div class="main-item-info">
<p class="name">《前端小白入门手册》</p>
<p class="info">使用人群：没有任何前端基础的小白</p>
<p class="price">$499</p>
</div>
<button class="main-item-btn" >加入购物车</button>
</li>
</ul>
</main>



</body>

</html>

写回答

1回答