请问如何用css实现下面的效果图？
想问一下有没有人会用css和html做上面所示的网页图？.,)$
更新一下，已完成全部代码
代码如下
<!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>
div+flex布局就行 ,很基础的布局 就是样式 加的多一点
<!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>课程表</title>
<style>
* {
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.box {
background: #BCDFD2;
}
.content {
display: flex;
justify-items: center;
border: 10px solid #6E9D96;
padding: 40px;
border-radius: 10px;
height: 500px;
align-items: center;
}
.left {
color: white;
font-size: 30px;
font-weight: 900;
width: 50px;
height: 500px;
background: #6E9D96;
display: flex;
align-items: center;
text-align: center;
border-radius: 10px;
}
.right {
width: 500px;
height: 500px;
margin-left: 30px;
}
.rtop{
display: flex;
width: 100%;
justify-content:space-between;
height: 12%;
}
.rtop div{
width: 45%;
background: white;
height: 100%;
text-align: center;
}
.rmiddle{
background:#6E9D96 ;
height: 10%;
width: 100%;
margin: 4% 0
}
.rmiddle ul{
display: flex;
justify-content: space-around;
}
.rbottom{
height: 70%;
width: 100;
}
.rbottom ul{
display: flex;
justify-content: space-around;
width: 100%;
height:100%;
}
.rbottom ul li{
width: 19%;
background: white;
height: 100px;
height: 100%;
}
</style>
</head>
<body>
<div class="box">
<div class="content">
<div class="left">
卡卡学院课程表
</div>
<div class="right">
<div class="rtop">
<div>CLASS SCHEDULE</div>
<div>
<span>NAME</span>
<span>5555</span>
</div>
</div>
<div class="rmiddle">
<ul>
<li>Mon</li>
<li>Mon</li>
<li>Mon</li>
<li>Mon</li>
<li>Mon</li>
</ul>
</div>
<div class="rbottom">
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>