效果图如下
代码如下
<!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>
*{
padding: 0;
margin: 0;
border: 0;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
font-family: PingFang SC,Hiragino Sans GB,Arial,Microsoft YaHei,Verdana,Roboto,Noto,Helvetica Neue,sans-serif!important;
}
html,body{
/* width: 100%; */
/* height: 100%; */
}
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行,其他浏览器不执行*/
}
.box{
position: relative;
margin: 0 auto;
width: 1186px;
height: 843px;
background-color: #b6ddce;
font-weight: bold;
}
.content{
position: absolute;
width: 1135px;
height: 797px;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
border:10px solid #5c8d89 ;
border-radius: 20px;
}
.title{
float: left;
height: 669px;
width: 115px;
margin-left: 63px;
margin-top:52px;
padding-top: 95px;
padding-left: 20px;
letter-spacing: 20px;
background-color: #5c8d89;
border-radius: 9px;
writing-mode: vertical-lr;
color: #f3f5f7;
font-size: 50px;
}
.table{
float: left;
width: 800px;
height: 680px;
margin-left :70px ;
margin-top: 45px;
font-size: 25px;
}
.table div,li{
border-radius: 15px;
}
.info div{
float: left;
width: 376px;
height: 87px;
background-color: #fff;
color: #a7d7c5;
font-weight: bold;
text-align: center;
line-height: 87px;
}
.schedule{
margin-right: 40px;
}
.week{
height: 77px;
background-color: #5c8d89;
margin-top: 30px;
padding-left: 15px;
margin-bottom: 33px;
}
.week li{
float: left;
list-style-type: none;
line-height: 77px;
margin: 0 50px;
font-style: italic;
color: #fff;
}
.course li{
float: left;
list-style-type: none;
height: 450px;
width: 150px;
margin-right: 11px;
background-color: #fff;
}
.course li:last-child{
margin-right: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="content">
<div class="title">咔咔学院课程表</div>
<div class="table">
<div class="info clearfix">
<div class="schedule">CLASS SCHEDULE</div>
<div class="name">NAME ______________</div>
</div>
<div class="week">
<ul>
<li>Mon</li>
<li>Tue</li>
<li>Wed</li>
<li>Tours</li>
<li>Fri</li>
</ul>
</div>
<div class="course">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>