个人练习小览---《xx机构手机页面广告》

其他 2018-07-16 04:45:31 阅读次数: 0

这应该是我接触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在火狐浏览器来查看的，这是一个静态的广告网页。


猜你喜欢

转载自blog.csdn.net/qq_35281096/article/details/81041203
今日推荐
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
周排行
女程序员是这样被恶搞的
B/S 和 C/S 的优缺点
vector一直申请会怎样？
座头鲸识别比赛(Humpback Whale Identification)总结
Linux高性能服务器编程——I/O复用 select
Mysql连接数据库（当包使用）
通过URI获取的文件路径为null的解决方法
1022-Primes on Interval(素数筛选+二分查找) ZCMU
Python出现： TypeError: expected string or buffer
bzoj2434: [Noi2011]阿狸的打字机 ac自动机+树状数组
每日归档
更多
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022