新闻页面制作

明天…ling

已于 2024-02-08 20:46:29 修改

阅读量872

点赞数 23

文章标签：前端 html css html5

于 2024-02-06 22:14:34 首次发布

本文链接：https://blog.csdn.net/2303_79252611/article/details/136061912

版权

本文介绍了HTML的基本标签如div、p、标题标签以及CSS的使用，展示了如何在HTML文档中设置样式、定位元素和使用id/class。还通过实例讲解了body和head元素的作用，以及文本格式化的方法。

摘要由CSDN通过智能技术生成

一、必备知识

一定要知道div是指的一块区域标签，而p指的是一个段落标签。

h1一级标题，h2二级标题，h3三级标题.......

sub作用定义下标文本。

二、敲代码（核心)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻页面</title>
    <style>
        #quyu1{
            background-color: white;
            width: 415px;
            height: 280px;
            float: left;
        }
        #quyu2{
            width: 269px;
            height: 300px;
            float: left;
        }#quyu3{
            width: 300px;
            height: 300px;
            float: left;
        }
    </style>
</head>
<body>
   
    <div id="hander">
        <h2 style="color:rgb(67,114,196);font-size: 30px ;">重庆新闻
        <sub>
            <font size="5" color="#cecece">LOCAL NEWS</font>
            <img src="..\寒假作业\箭头.png" alt="" width="20" height="20"><hr>
        </sub></h2>
    </div>
    <div id="quyu1">
        <ul>
            <b><li><h3 style="color:rgb(67,114,196) ;">重庆交2023发展"成绩单"</h3></li>
            <li>党建统领"三网融合"网格员为企纾困为民解忧作用凸</li>
            <li>铜梁龙亮相中国驻英国大使馆龙年"欢乐春节"启动仪</li>
            <li>世界500强德国利勃海尔机床落户永川</li>
            <li>重庆首个房地产"白名单"项目贷款落地</li>
            <li>日均客流量达2.2万人次春节临近长江重庆段客流增</li>
            <li>旅行过年春节吃喝玩乐"提前订"热度高涨</li>
            <li>最新消息：重庆4日停运列车增加6趟</li></b>
        </ul>
      </div>
        <div id="quyu2">
            <h3 style="color:rgb(67,114,196) ;">|新闻图片</h3>
            <img src="..\寒假作业\新闻图片.jpg" alt="">
            <p>2024新春川渝十大精品旅游线路出炉  </p>
        </div>
      <div id="quyu3">
        <h3 style="color:rgb(67,114,196) ;">|新闻资讯</h3>
            <p><b>
                5家企业被授予重庆市市长质量管理奖<br>
                重庆3个城市更新典型案例获全国推广<br>
                重庆交通的"成绩单""路线图"<br>
                川渝特高压工程铜梁1000千伏变电站完<br>
                龙年年夜饭吐露满满烟火气餐厅预订率<br>
                耍起来！重庆.铜梁第十届龙灯艺术节2<br>
                重庆疾控发布2月健康风险提示这些病要<br>
            </p></b>
      </div>
</body>
</html>

注意位置，哪些是在body中，哪些放在head中。

在我看来，Body就像一个空白的一个页面，要我们在这上页面上给它增加文字，增加图片。

而head就像手一样，我们人工手动的给它,增加一些颜色(color),宽度(width),高度(hight)......

***成果如下图***

可能与参考图还有一定的差距，还需要继续努力。加油！

三、分析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>控制文本</title>
    <style>
        #one{
            text-indent: 2em;
            text-align: center;
            text-transform: lowercase;
        }
    </style>
</head>
<body>
    <p id="one">这是一个段落标签This is string ASCII</p>
    <p>这是一个段落标签This is string ASCII</p>
</body>
</html>

uppercase全大写 none默认 capitalize每个单词首大写 lowerc全小写

都是可以在head中，也就是title下，例外的增加设置。

id说的通俗一点，就是给予一个身份，就像我们的ID身份证一样，给他一个名字，然后在这个名字上增加色彩，增加bub。