8-10作业
2018-08-10 本文已影响0人
梵高先生uu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>优设大课堂</title>
<style type="text/css">
*{
padding: 0;
margin:0;
text-decoration: none;
}
.header{
margin:0 auto;
height: 350px;
background-color: skyblue;
}
.daohang{
display: inline-block;
width:100%;
margin:0 auto;
background-color: #2292C2;
}
a:link{
color:#FFFFFF;
}
a:visited{
color: white;
}
a:hover{
background-color: skyblue;
}
a:active{
color:red;
}
.content{
margin:20px 120px;
background-color: #F0F3F6;
height: 1600px;
}
.fangkuang{
margin:20px 200px;
background-color:#F0F3F6;
}
.jiangs{
width: 150px;
height: 200px;
margin:10px 11px;
background-color: yellow;
float: left;
}
.bai{
clear: both;
height: 300px;
width: 100%;
margin:20px 0;
background-color:green;
}
.lianxi{
width: 200px;
height: 100px;
background-color: blue;
margin:10px auto;
}
.youshi{
height: 300px;
width: 100%;
margin:none;
background-color: #F0F3F6;
}
.abc{
margin: 100px 10px;
height: 150px;
width: 150px;
background-color: red;
float: left;
}
.kk{
float: left;
height: 300px;
width: 100%;
background-color: blue;
margin-top: 20px;
}
.aa{
clear: both;
width: 100%;
height: 3px;
}
.lianx{
clear: both;
width: 200px;
height: 100px;
background-color: blue;
margin:20px auto;
}
.chang{
height: 300px;
background-color: blue;
}
.aa1{
height: 400px;
background-color: skyblue;
}
.aaa{
height: 170px;
margin: 10px 200px;
background-color: yellow;
}
.yy{
height: 500px;
background-color: red;
}
.z{
height: 500px;
background-color: yellow;
}
.c{
height: 150px;
background-color: green;
}
.cc{
height: 150px;
background-color: red;
}
.ccc{
height: 200px;
margin:0 80px;
background-color: skyblue;
}
.zz{
height: 200px;
background-color: green;
}
.zzz{
height: 80px;
margin:0 80px;
background-color: blue;
}
</style>
</head>
<body>
<!-- 页头 -->
<div class="header">
<div class="daohang">
<center>
<a href="https://www.uisdc.com/">优设首页</a> 
<a href="https://hao.uisdc.com/">网址导航</a> 
<a href="https://www.uisdc.com/news">优设读报</a> 
<a href="https://uiiiuiii.com/inspiration">找灵感</a> 
<a href="https://www.uisdc.com/about">关于我们</a> 
</center>
</div>
</div>
<div class="content">
<center><h1>热门课程</h1></center><center>Hot Class</center><center><p style="color: #6C6D69;">视觉全能班 / 前端开发 / 交互设计 / 零基础手绘 / 小光老师的手绘课 / 动效设计 / UI设计</p></center>
<div class="fangkuang">
<div class="jiangs"></div>
<div class="jiangs"></div>
<div class="jiangs"></div>
<div class="jiangs"></div>
<div class="jiangs"></div>
<div class="jiangs"></div>
<div class="jiangs"></div>
<div class="jiangs"></div>
<div class="jiangs"></div>
<div class="jiangs"></div>
<div class="jiangs"></div>
<div class="jiangs"></div>
<div class="bai"></div>
<div class="lianxi"></div>
<center><h1>课程优势</h1>Course Advantage</center>
<div class="youshi">
<div class="abc"></div>
<div class="abc"></div>
<div class="abc"></div>
<div class="abc"></div>
</div>
</div>
</div>
<div class="kk"></div>
<div class="aa"></div>
<div class="lianx"></div>
<div class="chang"></div>
<div class="aa1">
<div class="aaa"></div>
<div class="aaa"></div>
</div>
<div class="yy">
<div class="z">
<div class="c"></div>
<div class="cc"></div>
<div class="ccc"></div>
</div>
<div class="zz"></div>
<div class="zzz"></div>
</div>
</body>
</html>
深度截图_20180810081735.png
深度截图_20180810081742.png
深度截图_20180810081749.png
深度截图_20180810081756.png
深度截图_20180810081807.png
深度截图_20180810081816.png
深度截图_20180810081822.png
