这应该是我接触HTML的第一个能看的作品,完成时间是2016年的12月份
index.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/normalize.css">
<title>首页</title>
</head>
<body>
<header class="page01">
<img src="images/logo(1).png">
<h1>2016年成年学历报考咨询</h1>
<h2>自考|成人教育|远程教育</h2>
<ul>
<li><a href="#"> 报名科目</a></li>
<li><a href="#"> 报名时间</a></li>
<li><a href="#"> 考试科目</a></li>
<li><a href="#"> 如何缴费</a></li>
</ul>
<div class="btn">
<a href="#">新版报考资讯</a>
</div>
</header>
<section class="page02">
<h1>2016年成年学历报考考试时间(一览表)</h1>
<h2>自考|成人教育|远程教育</h2>
<ul>
<li><a href="#"> 四川省高等教育自学考试 8月报名开始</a></li>
<li><a href="#"> 四川省成人考试 8月报名开始</a></li>
<li><a href="#"> 成都市成人函授教育 8月报名开始</a></li>
</ul>
<div class="btn">
<a href="#">点击查询</a>
</div>
<p>*10月9号开始报名*</p>
<img src="images/nh.png">
</section>
<section class="page03">
<h1>2016年成人学历考试解析</h1>
<ul>
<li><a href="#"> 高等教育自学考试:科目学分制。选择题,填空题,简答题。满分100分,60分及格。</a></li>
<li><a href="#"> 成人高考:入学考试和分数化档。入学测试计算机,数学,英语,期中考试按分数化档。</a></li>
<li><a href="#"> 成人函授教育及电大:入学测试和科目学分制。入学测试计算机,数学;科目满分100分,60分及格。</a></li>
</ul>
<div class="btn">
<a href="#">点击查询</a>
</div>
<img src="images/nh2.png">
</section>
<section class="page04">
<h1>免费资料与题库领取</h1>
<h2>可咨询老师免费申请相关资料</h2>
<h3>四川省历年自考试题及答案分析</h3>
<h3>函授教育及电大题海题库</h3>
<h3>2016年学籍考生备考指导资料</h3>
<div class="btn">
<a href="#">点击申请资料</a>
</div>
<img src="images/nhxf.png">
</section>
<section class="page05">
<h1>免费学历报考指导咨询</h1>
<h2>高起专|高起本|专升本</h2>
<ul>
<li><a href="#"> 自考报考一对一老师预约指导 8月报名开始</a></li>
<li><a href="#"> 函授教育一对一老师预约指导</a></li>
<li><a href="#"> 成人高考一对一老师预约指导</a></li>
</ul>
<div class="btn">
<a href="#">点击预约</a>
</div>
<img src="images/nh3z.png">
</section>
<section class="page06">
<h1>0基础学本科常见问题</h1>
<ul>
<li><a href="#"> 1:那种承认学历含金量高?认可度高?</a></li>
<li><a href="#"> 2:自考学历通过率高吗?难吗?</a></li>
<li><a href="#"> 1:那种承认学历含金量高?认可度高?</a></li>
<li><a href="#"> 2:自考学历通过率高吗?难吗?</a></li>
<li><a href="#"> 1:那种承认学历含金量高?认可度高?</a></li>
<li><a href="#"> 2:自考学历通过率高吗?难吗?</a></li>
<li><a href="#"> 1:那种承认学历含金量高?认可度高?</a></li>
<li><a href="#"> 2:自考学历通过率高吗?难吗?</a></li>
</ul>
<div class="btn">
<a href="#">免费回电解答</a>
</div>
</section>
</body>
</html>
这里是对应的CSS
body,html{
font-family: "微软雅黑";
font-size: 20px;
}
header{
max-width: 32rem;
min-width: 15rem;
margin: auto;
}
section{
max-width: 32rem;
min-width: 15rem;
margin: auto;
}
a{
text-decoration: none;
}
img{
border: none;
vertical-align: middle;
}
.page01{
text-align: center;
overflow: hidden;
background:#f5f5f5;
}
.page01 img{
display: block;
width: 20%;
margin:auto;
}
.page01 h1{
font-size: 1.1rem;
color: #14798d;
}
.page01 h2{
font-size: 1rem;
color: #ff0000;
font-weight: normal;
line-height: 1rem;
}
.btn{
margin: 1.5rem 3.05rem 1.5rem 3.05rem;
text-align: center;
}
.btn a{
font-size: 1rem;
color: #ffffff;
background-color: #de0060;
padding: 1.25rem 2.55rem;
text-decoration: none;
display: inline-block;
border-radius: 0.3rem;
}
.page01 ul{
padding: 0;
font-size: 0rem;
text-align: center;
width: 12.85rem;
margin: auto;
}
.page01 ul li{
list-style: none;
display: inline-block;
margin-bottom: 0.375rem;
}
.page01 ul li a{
display: block;
width: 12.85rem;
height: 2rem;
background-color: #be1010;
color: #ffffff;
font-size: 0.65rem;
text-align: center;
line-height: 2rem;
}
.page01 ul li:nth-child(2n) a{
background-color: #3874fe;
}
.page02{
text-align: center;
overflow: hidden;
background:#f5f5f5;
}
.page02 h1{
font-size: 1.1rem;
color: #14798d;
}
.page02 h2{
font-size: 1rem;
color: #ff0000;
font-weight: normal;
line-height: 1rem;
}
.page02 ul{
padding: 0;
font-size: 0rem;
text-align: center;
width: 12.85rem;
margin: auto;
}
.page02 ul li{
list-style: none;
display: inline-block;
margin:0.4rem auto 0.4rem auto;
}
.page02 ul li a{
display: block;
width: 12.85rem;
height: 2rem;
background-color: #d6e2fd;
color: #000000;
font-size: 0.65rem;
text-align: center;
line-height: 2rem;
}
.page02 ul li:nth-child(3){
margin-bottom: -1rem;
}
.page02 p{
width: 90%;
margin: -1rem auto auto auto;
font-size: 0.7rem;
color: #000000;
line-height: 1.1rem;
}
.page02 img{
width:60%;
}
.page03{
text-align: center;
overflow: hidden;
background:#f5f5f5;
}
.page03 h1{
font-size: 1.1rem;
color: #14798d;
}
.page03 ul{
padding: 0;
font-size: 0.65rem;
text-align: center;
width: 12.85rem;
margin: auto;
}
.page03 ul li{
list-style: none;
display: inline-block;
margin:0.4rem auto 0.4rem auto;
}
.page03 ul li a{
display: block;
width: 12.85rem;
background-color: #62cf38;
color: #ffffff;
font-size: 0.65rem;
text-align: center;
line-height: 2rem;
}
.page03 ul li:nth-child(2) a{
background-color: #11c8ea;
}
.page03 ul li:nth-child(3) a{
background-color: #ff8106;
margin-bottom: -1rem;
}
.page03 img{
width:40%;
}
.page04{
text-align: center;
overflow: hidden;
background:#f5f5f5;
}
.page04 h1{
font-size: 1.1rem;
color: #14798d;
}
.page04 h2{
font-size: 1rem;
color: #ff0000;
font-weight: normal;
line-height: 1rem;
}
.page04 h3{
font-size: 1rem;
color: #000000;
font-weight: normal;
line-height: 2.5rem;
}
.page04 img{
width:60%;
}
.page05{
text-align: center;
overflow: hidden;
background:#f5f5f5;
}
.page05 h1{
font-size: 1.1rem;
color: #14798d;
}
.page05 h2{
font-size: 1rem;
color: #ff0000;
font-weight: normal;
line-height: 1rem;
}
.page05 ul{
padding: 0;
font-size: 0rem;
text-align: center;
width: 12.85rem;
margin: auto;
}
.page05 ul li{
list-style: none;
display: inline-block;
margin:0.4rem auto 0.4rem auto;
}
.page05 ul li a{
display: block;
width: 12.85rem;
height: 2rem;
background-color: #f3f3f3;
color: #000000;
font-size: 0.65rem;
text-align: center;
line-height: 2rem;
}
.page05 ul li:nth-child(3){
margin-bottom: -1rem;
}
.page05 img{
width:30%;
}
.page06{
text-align: center;
overflow: hidden;
background:#f4efe9;
}
.page06 h1{
font-size: 1.1rem;
color: #14798d;
}
.page06 ul{
padding: 0;
font-size: 0rem;
text-align: center;
width: 12.85rem;
margin: auto;
}
.page06 ul li{
width: 13.25rem;
height: 2.4rem;
list-style: none;
display: inline-block;
margin:0.4rem auto 0.4rem auto;
background-color: #ededed;
}
.page06 ul li a{
display: block;
width: 90%;
height: 80%;
margin:0.4rem auto 0.4rem auto;
background-color: #f3f3f3;
color: #000000;
font-size: 0.65rem;
text-align: center;
line-height: 2rem;
}
.page06 img{
width:60%;
}
部分展示大概是这个样子的:
用的是iPhone6在火狐浏览器来查看的,这是一个静态的广告网页。