2023面试高手

这个屌丝很懒，什么也没留下！

热门标签

初学者使用html制作的一个新闻页面_html新闻网页设计

作者：2023面试高手 | 2024-04-03 11:33:42

踩

html新闻网页设计

一些会运用到的知识：

新闻图示

代码如下：

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中，如下图所示。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/355356?site