CSS课堂案例2

最新推荐文章于 2024-08-09 11:41:07 发布

一只小白657

最新推荐文章于 2024-08-09 11:41:07 发布

阅读量64

点赞数

分类专栏：学习案例

本文链接：https://blog.csdn.net/weixin_45139556/article/details/120804592

版权

寒潮预警江南北部最低气温大风降温防御指南

关键词由CSDN通过智能技术生成

学习案例专栏收录该内容

17 篇文章 0 订阅

订阅专栏

新闻页面

制作页面整体分成两步

搭建HTML结构页面
修改CSS样式

HTML文件：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>天气预警</title>
    <link rel="stylesheet" href="14_2-综合案例样式.css">
</head>
<body>
    <h1>寒潮蓝色预警：江南北部最低气温将降至10℃左右 </h1>

    <div class="gay">2021-10-16 18:16:31 来源： 
        <a href="http://baidu.com.cn">中国天气网</a> 
        <input type="text" name="chaxuntiaojian" value="请输入查询条件" class="search">
        <button class="btn">搜索</button>
    </div>
    
    <hr>

    <h4>中国天气网讯 中央气象台10月16日18时继续发布寒潮蓝色预警：</h4>

    <p>受强冷空气影响，10月16日20时至18日08时，辽宁东部、吉林东部、黄淮、江淮东部、江南中东部等地的部分地区将有大风降温天气，风力有4～6级，阵风7～8级；辽宁东部、吉林东部、黄淮大部、江淮东部、江南东部、广东东北部等地气温下降6～10℃，其中，山东西南部、浙江西南部、福建西北部等地部分地区降温10℃以上。</p>

    <p>冷空气影响过后，北方地区最低气温出现在17日早晨，最低气温0℃线将位于北京南部、河北中部、山东西北部、山西南部、陕西北部一带；南方地区最低气温出现在18日早晨，江南北部最低气温将降至10℃左右。</p>

    <p class="pic">
        <img src="img/weather.png">
    </p>

    <p>防御指南：

    <ol>
        <li>人员要注意添衣保暖；在生产上做好对大风降温天气的防御准备；</li>
        <li>门窗、围板、棚架、临时搭建物等易被大风吹动的搭建物固紧, 妥善安置易受大风影响的室外物品；</li>
        <li>应到避风场所避风，通知户外作业人员注意安全；</li>
        <li>留意有关媒体报道大风降温的最新信息，以便采取进一步措施；</li>
        <li>交通、公安等部门要按照职责做好道路结冰应对准备工作。</li>
    </ol>
    <footer>编辑：黄涛</footer>
</body>
</html>

body {
    font: 16px/28px 'Microsoft YaHei';
}

h1 {
    /*文字不加粗*/
    font-weight: 400;
    /*文字居中*/
    text-align: center;
}

.gay {
    color: #888;
    text-align: center;
}

a {
    text-decoration: none;
}

.search {
    color: #166;
    width: 170px;
    height: 17px;
}

.btn {
    font-weight: 700;
}

p {
    text-indent: 2em;
}

.pic {
    /*想要图片居中显示，就让他的父亲p标签添加水平居中的代码*/
    text-align: center;
}


footer {
    font-size: 12px;
    color: #888;
    text-align: right;
}

实现的效果

综合案例
注意

首先都过对<body>标签的样式设置，来确立整个页面整体的文字样式
想要图片居中显示，可以把图片放在一个p或者div标签中，通过设置属性text-align: center;让父标签居中显示，来达到效果
宽度width、高度height、文字大小text-size、首行缩进text-indent要注意有单位

一只小白657

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS课堂案例2

新闻页面制作页面整体分成两步搭建HTML结构页面修改CSS样式HTML文件：<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>天气预警</title> <link rel="stylesheet" href="14_2-综合案例样式.css"></head><body&g
复制链接

扫一扫