CSS基础样式作业
实现下图所示网页：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>我的项目</title>
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
ul>li {
list-style: none;
}
body {
font: 14px/1.5 arial;
text-align: center;
background-color: #fff2e3
}
.btn {
background-color: #72b890;
color: #fff;
margin: 3px;
padding: 6px 14px;
border-radius: 3px;
}
.btn:hover{
opacity: 0.7
}
.btn:active{
opacity: 0
}
.project {
font-size: 42px;
color: #87968e;
margin-top: 30px ;
}
.introduction{
color: #b8c5be;
margin-top:10px;
}
.mi>li,
.view>li {
display: inline-block;
margin-top:40px;
color: #72b890
}
.work-img{
margin-top:40px;
}
.author{
margin:40px;
}
.hr{
color: #72b890;
}
</style>
</head>
<body>
<form action="12323" method="POST">
<h1 class="project">我的项目</h1>
<p class="introduction">一句话项目介绍</p>
<ul class="mi">
<li><a class=btn href="#">项目1</a></li>
<li><a class=btn href="#">项目2</a></li>
<li><a class=btn href="#">项目3</a></li>
<li><a class=btn href="#">项目4</a></li>
<li><a class=btn href="#">项目5</a></li>
</ul>
<img class=work-img src="http://cdn.jscode.me/65d4aba2-a097-4b24-aaa0-ebbaf7eedab2" alt="">
<ul class="view">
<li><a class=btn href="#">查看源码</a></li>
<li><a class=btn href="#">使用说明</a></li>
</ul>
<p class="author">作者：<a class=hr href="#">我</a></p>
</form>
</body>
</html>
网友评论