初学者使用html制作的一个新闻页面

目录一些会运用到的知识：新闻图示代码如下：Css：中文翻译是层叠样式表（html的化妆师）1.Css的语法2.内部样式表：3.选择器4.Css的属性新闻图示代码如图所示这是一个自己学习看视频后运用的学习笔记一些会运用到的知识：1.图片插入标签：<img src=”图片地址（图片路径）”width=“图片的宽度”height=“图片的高度”>注意点：src必须要有，路径必须...

不会编头发

17400人浏览 · 2022-02-21 16:18:14

不会编头发 · 2022-02-21 16:18:14 发布

一些会运用到的知识：

新闻图示

代码如下：

Css：中文翻译是层叠样式表（html的化妆师）

这是一个自己学习看视频后运用的学习笔记

一些会运用到的知识：

1.图片插入标签：
<img src=”图片地址（图片路径）”width=“图片的宽度”height=“图片的高度”>
注意点：src必须要有，路径必须写对，图片必须在我们的站点里
如果宽高只写一个，是等比例的缩放，如果都写除非你是给定的等比例的值，不然图片就会变形。
2.如何快速复制代码
将代码选中Ctrl+shift+r
3.超链接标签
<a href=”地址”target=“_blank”></a> 默认出来是蓝色文字有一个下划线
  target=“_blank”作用：超链接在新的窗口打开如果不写默认是在当前页面打开超链接
  空连接<a href=”#”></a>（不确定地址时使用）
4.无序列表与有序列表
  无序<ul>

  <li></li>
</ul> 无序列表显示出来的是黑点，有序列表显示的是数字

有序<ol>
  <li></li>
  </ol>

新闻图示

代码如下：

<!Doctype html>
<html>

<head>
    <meta charset=" utf-8">
    <title>标题</title>
    <style>
        #header {
            background-color: white;
            padding: -100px;
        }

        #nav {
            background-color: white;
            height: 300px;
            width: 400px;
            float: left;
        }

        #nav2 {
            width: 310px;
            height: 300px;
            float: left;
        }

        #mav {
            width: 300px;
            height: 400px;
            float: left;
        }
    </style>
</head>

<body>
    <div>
        <div id="header">
            <h2 style="color: rgb(87, 87, 194);font-size:30px;">北京新闻
                <sub>
                    <font size="5" color="#cecece">LOCAL NEWS</font>
                    <img src="a.PNG" width="20" height="20" />
                </sub>
            </h2>
        </div>
    </div>
    <div>
        <div id="nav">
            <ul>
                <li><b>疫情之后的首场重大国际活动为什么是它?</b></li>
                <li>“太热太重了”，开学“第一课”小朋友体验消防员...</li>
                <li>北京植物园3.2公顷海棠结果，公园提醒：可观可...</li>
                <li>顺义这小区楼门上，竟盘踞着马蜂窝！</li>
                <li>北京服务业扩大开放升级4.0版，有哪些冲突？商...</li>
                <li>街头没车押金不退！但是，小黄车却仍在押金扣费......</li>
                <li>“丹宸永固——紫禁城简称六百年"展亮相故宫博物院</li>
                <li>北京将建设全区首个高级别自动驾驶示范区</li>
            </ul>
        </div>
        <div>
            <div id="nav2">
                <h3>新闻图片</h3>
                <img src="pic.jpg">
                <p>“非必要不出校”是否有必要？吴尊友回应</p>
            </div>
            <div id="mav">
                <h3>新闻资讯</h3>
                <ul>
                     <li>北京婴幼儿健康素养核心知识“八知八会”</li>
                    <li>北京升级版电子眼10天抓拍开车看手机和不</li>
                    <li>延庆九眼楼 万里长城中最大空心敌台盛装</li>
                    <li>密云区荣获北京市青少年鑫桥杯“中华魂”主题教</li>
                    <li>2022年冬奥会北京赛区10个场馆年内完工 年...</li>
                    <li>北京旅游必去的三大景点</li>
                    <li>丰台小v蜂再添新成员</li>
                </ul>
            </div>
        </div>
    </div>
</body>

</html>
<!-- ctrl + k + 0 --折叠>
<!-- ctrl + k + c --添加注释>
<!-- ctrl + k + u --删除注释>

这是代码所需的图片，图片必须在我们所需的站点里

对于这段代码有一些不足：1.北京新闻和文本距离太远
2.文本的字没在一条线上，对不齐。希望以后可以改进。

Css：中文翻译是层叠样式表（html的化妆师）

1.Css的语法

Css的语法由选择器和声明组成，其中声明又包括属性和属性值

选择器{属性：属性值；}

注意点：属性和属性值用冒号连接分号结束，一个选择器可以有多个属性，不分先后顺序

2.内部样式表：

放在head与head之间用style去包裹

<style>

Css的语法

</style>

3.选择器

标签选择器

语法：Html的标签{属性：属性值；}

作用：针对这个标签进行化妆，只要body里边存在的这个标签都会生效

注意：body里边必须存在这个标签

class选择器（类选择器）

语法：.class名称{属性：属性值；}

作用：用来区分标签（一个页面中如果存在多个这样的标签，每一个都不一样的显示效果可以用类名来区分）

注意：起名时最好不要使用中文，不要以数字开头，可以使用数字、字母、下划线的组合，最好不要使用关键字（html的标签），起名时最好结构化语义化：例如头部top head

Body的标签里面想要给谁使用这个名字就在对应的标签里面写<h1 class=”clas名称”></h1>

伪类选择器

鼠标悬停效果选择器：hover{属性：属性值；}

4.Css的属性

文字的大小font-size
宽度width
高度 height
背景颜色background
水平居中text-align：center
行高line-height（值与height相同就可以实现一行文字垂直方向的居中）
文字颜色color:英文单词、六个十六进制数（0-f任意六个数就是一种颜色）
首行缩进text-indent：2em 首行缩进2个字
词间距word-spacing
去掉超链接的下划线text-decoration：none
外边距margin
添加下划线text-decoration：underline

新闻图示

代码如图所示

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>标题</title>
    <style>
    div {width: 500px;}

    h2{
        width: 200px;
       height: 50px;
       background-color: #808080;
       font-size: 25px;
       color: #ffffff;
       text-align: center;
       line-height: 50px;
    }

    p{
     font-size: 20px;
     text-indent: 2em;
    }

    span{
        color: #ff0000;
    }
</style>
</head>

<body>
    <div>
        <h2> 千峰简介</h2>
        <p>
            <b>北京千锋互联科技有限公司（简称千锋）</b>
            成立于2011年1月。公司总部位于北京，目前已在
            <span>深圳、上海、郑州、广州、大连、武汉、成都、西安、杭州、青岛、重庆、长沙、哈尔滨、南京、太原</span>
            建立分公司。
        </p>
        <p>千锋旗下现有<b>教育培训、人才服务、项目研发、创业孵化</b> 等业务。 教育培训业务主要为大学生、企业提供技术培训服务；人才服务业务主要为企业提供优秀的互联网研发人才；
            项目研发业务主要为企业提供APP解决方案及APP项目研发； 创业孵化业务为有创业梦想的学员设立，为其提供创业辅导及天使投资等服务。
        </p>
        <p>千锋秉承着<span> “用良心做教育”</span> 的理念踏踏实实的做事， <span>创办7年，现已成为业内口碑好、规模大、教学强的移动互联网研发培训机构。</span> 目前累计与国内
            <b>超过8200多家</b> IT相关企业建立人才输送合作，与 <b>562所大学</b>
            建立实训就业合作，每年为中国IT企业输送上万名移动开发工程师。计划未来5年内实现年营收过10亿，为中国教育行业贡献一份力量。
        </p>
    </div>
</body>

</html>

代码太长的话，我们也可以写一个css样式通过link标签放在head中，如下图所示。