欢迎您的访问
专注架构,Java,数据结构算法,Python技术分享

HTML/CSS页面Demo1

HTML文件:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抗疫战役</title>
    <link rel="stylesheet", href="style.css">
    
</head>
<body>
    <article class="maincon">
        <header>
            <h1>疫情肆虐时,祖国是每位海外同胞坚强后盾 </h1>
            <time>2020-04-04</time>
        </header>

        <p>
            4月3日,一架飞机稳稳降落在中国济南遥墙国际机场,180余名防护严密的在英中国留学生平安归国。这是中国驻英国大使馆组织包机,接回在英未成年留学生的首次航班。国内千万颗牵挂着海外学子的心,也随着航班的落地慢慢安定。
        </p>
        <p>
            “别慌!祖国与你同在。”面对约140万名分布在不同国家和地区的中国海外留学人员,外交部指示280多个驻外使领馆全面动员起来,同当地中国留学人员建立并保持密切联系,及时了解他们的诉求和困难,帮助他们解决所面临的各种实际问题。这样的举措无疑是将留学生们放在“心尖上”,也再一次印证了电影《战狼2》中的那句“中华人民共和国公民:当你在海外遭遇危险,不要放弃!请记住,在你身后,有一个强大的祖国!”。
        </p>

        <img src="1000.png"></img>

        <p>
            山川异域,骨肉相连。一份份“健康包”,一场场防疫讲座,一架架归国包机,是祖国对海外同胞的真情牵挂,也是祖国对海外同胞的爱心守护。在这场全球大流行的疫情中,不论你身在何处,别慌,祖国与你同在!
        </p>

        <footer>这是一个尾部区域</footer>
    </article>
</body>
</html>

style.css内容

body{
    background-color: white;
    margin: 0;
}

.maincon{
    background-color: wheat;
    width: 70%;
    min-width: 500px;
    border: 3px rgba(0, 0, 0, 0.8) solid;
    margin: 30px auto;
    padding: 30px;
    
    border-radius: 10px;

    font-size: 20px;
    line-height: 2;
}

.maincon > header{
    padding-bottom: 10px;
    border-bottom: 2px rgba(0, 0, 0, 0.8) dotted;
}

.maincon time{
    color: rgba(0, 0, 0, 0.8);
}

.maincon h1{
    font-size: 2em;
}

.maincon img{
    text-align: center;
    width: 40%;
}

.maincon footer{
    text-align: center;
    font-size: 15px;
    border-top: 2px rgba(0, 0, 0, 0.8) dotted;
    padding-top: 20px;
}

赞(0) 打赏
版权归原创作者所有,任何形式转载请联系作者;码农code之路 » HTML/CSS页面Demo1

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏