web程序设计（３）——使用CSS设计新闻网页

最新推荐文章于 2024-07-25 18:31:14 发布

My_summers

最新推荐文章于 2024-07-25 18:31:14 发布

阅读量6.1k

点赞数 10

分类专栏： Web 文章标签： css html

本文链接：https://blog.csdn.net/weixin_44164249/article/details/103927489

版权

Web 专栏收录该内容

12 篇文章 4 订阅

订阅专栏

实验要求

1、使用html构造一张新闻网页；
2、使用CSS对新闻网页的内容的样式进行设置：
新闻标题按照“红橙黄绿蓝紫”的方式显示标题；
新闻有主标题和新闻来源信息，主标题与副标题使用不同的字体于不同大小显示；
段落的行高设置为2em,首行缩进；
使用本节课所学的选择符，对新闻段落中某些重要信息使用加黑或是彩色文字显示。

实验目的

熟悉掌握CSS样式的使用

实验内容

打开visual studio core，创建一个文件夹。在文件夹中增添html文件，记得加上后缀名.html
打出‘！’+tab键，使用emmet插件进行自动补齐
写‘title标签，命名网页名
写标题‘h1’—“新浪新闻网页”，使用后代选择器’>’设置每个字的颜色，并设置text-align使标题‘h1’居中

<h1><red>新</red><orange>浪</orange><yellow>的</yellow><green>新</green><qing>闻</qing><blue>网</blue><purple>页</purple></h1>
CSS:
         h1>red{color: red}
        h1>orange{color: orange}
        h1>yelllow{color: yellow}
        h1>green{color: green}
        h1>qing{color: greenyellow}
        h1>blue{color: blue}
        h1>purple{color: purple}
        h1{
            text-align: center;
            font-size: 40px;
        }

在这里插入图片描述

设置二级标题和小标题，使用id选择器设置字体（font-family），字体大小(font-size)，文本居中（text-align）等,发现两个标题离得太远，所以设置行高（line-height）使两个标题紧凑一些。“收藏本文”格式特殊且不需要大量应用，所以直接用行内样式设置字体颜色，加下划线。
HTML：

 <div >
        <p id='title01'>如果一个月就是世界末日 政府应该立即公布消息</p>
        <p id='title02'>2019年8月8日 四川大学 江安校区 评论中大奖（12人参与） <u style="color: blue">收藏本文</u></p>
        </div>
CSS:
#title01{
                font-size: 25px;
                text-align: center;
                line-height: 1px;     
                font-family: serif;  
        }
        #title02{
            font-size: 10px;
            text-align: center;
            line-height: 1px; 
            font-family:fantasy
        }

效果图：
（1）行高设置前：
在这里插入图片描述

（2）行高设置后：
在这里插入图片描述
5. 设置新闻内容的样式，将所有内容加入

中，用class选择器设置内容板块，运用盒子模型使这一整个内容板块可以和网页边界留空。
Html:

 <div class="main">
            <p class="content">
                首先，跟您方确认一下<strong>定义</strong>，世界末日，即指人类毫无生还希望的那一天，不存在解决危机的可能性。在政府确认消息的第一时间，就应该把
                这个消息公布给民众。
            </p>
< /div >

CSS:

.main
        {
            padding: 25px;
            margin: 25px;
            width: 90%;
            border-top-style: solid;
            position:relative;
        }

6.利用类型选择设置段落样式，首行缩进两个相对字符长度（em）,text-align选择justify,其他文字样式同上
CSS：

.content{
            text-indent: 2em;
            text-align:justify;
            line-height: 2em;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 15px
        }

7.使用后代选择器将段落的重点词句标出，如粗体（font-weight），颜色（color），斜体（font-style）等
CSS：

p>strong
        {
            font-weight: 700;
        }
        p>red{color: red}
        p>xie
        {
            font-style:oblique;
            font-weight:600;
        }

实验效果

在这里插入图片描述

实验完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        h1>red{color: red}
        h1>orange{color: orange}
        h1>yelllow{color: yellow}
        h1>green{color: green}
        h1>qing{color: greenyellow}
        h1>blue{color: blue}
        h1>purple{color: purple}
        h1{
            text-align: center;
            font-size: 40px;
        }
        #title01{
                font-size: 25px;
                text-align: center;
                line-height: 1px;     
                font-family: serif;  
        }
        #title02{
            font-size: 10px;
            text-align: center;
            line-height: 1px; 
            font-family:fantasy
        }
        p>collect{color: blue;}
        .content{
            text-indent: 2em;
            text-align:justify;
            line-height: 1em;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 15px
        }
        p>strong
        {
            font-weight: 700;
        }
        p>red{color: red}
        p>xie
        {
            font-style:oblique;
            font-weight:600;
        }
        .main
        {
            padding: 25px;
            margin: 25px;
            width: 90%;
            border-top-style: solid;
            position:relative;
        }
    </style>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>新闻网页</title>
    
</head>
<body>
        <h1><red>新</red><orange>浪</orange><yellow>的</yellow><green>新</green><qing>闻</qing><blue>网</blue><purple>页</purple></h1>
        <div >
        <p id='title01'>如果一个月就是世界末日 政府应该立即公布消息</p>
        <p id='title02'>2019年8月8日 四川大学 江安校区 评论中大奖（12人参与） <u style="color: blue">收藏本文</u></p>
        </div>
        <div class="main">
            <p class="content">
                首先，跟您方确认一下<strong>定义</strong>，世界末日，即指人类毫无生还希望的那一天，不存在解决危机的可能性。在政府确认消息的第一时间，就应该把
                这个消息公布给民众。
            </p>
        <p class='content'>
                从<strong>个人意义</strong>上讲，公布消息可以保证人们的知情权，让他们有选择如何度过自己生命的最后一个月的<red>自由</red>，从而让自己的人生过得更加有意义。
                假设一个人，如果他知道了自己的生命只剩下了短短的一个月，他可能会选择完成自己一直以来想做，却因为种种原因放弃的事情，这使他能够
                完成自己的梦想；他也有可能选择陪自己的家人好友，对他们敞开心扉，说出自己想说却一直没有勇气说出的想法，感情，让自己没有遗憾。当
                然，他也有可能选择什么也不做，就如同每个最平凡的昨天，在平静中迎接死亡。但是，无论什么方式，他们拥有了选择的自由，并为自己的选
                择付出努力，用尽全力达成自己的目标，在生命的最后一个月，人类燃烧自己，为自己的人生画上最完美的句号，可能这并不是别人眼中的完美，
                在他人眼里毫无意义，然而人本来就是为自己而活，正是这不同的选择给予了人类无与伦比的<red>人性光辉</red>，为了保证每个人的选择自由，政府应该
                公布消息。
            </p>
            <p class='content'>
                其次，从<strong>人类文明的意义</strong>来讲，政府公布消息有利于人类文明的展现和保存。追求文明本身的真实。不公布消息，人类文明确实可能会在一片平
                静中湮灭，但是政府有什么权利让人类文明的灭绝一开始就以懦弱的形态接受死亡呢？封锁消息，一开始就将人类意志钉在了耻辱柱上，为何不
                敢展露人性的真实呢？相反，政府公布消息，人类文明在面对死亡的时候究竟会有何伟大的壮举，难道不令人期待吗？正如有人在<xie>唐山大地震</xie>奋
                不顾身救出老师同学，也有人在<xie>烈火</xie>中挽救生命，人类面对死亡的骄傲姿态正是人性的伟大之处。人类当然会恐惧，茫然，扭曲，但这正是人类
                文明的真实啊！我们的文明，本身就是<red>有善有恶</red>，何必伪装？封锁消息无异于是否认人性，丑化人类文明。
            </p>
        </div>
</body>
</html>

My_summers

关注

10
点赞
踩
62

收藏

觉得还不错? 一键收藏
1
评论
web程序设计（３）——使用CSS设计新闻网页

实验要求1、使用html构造一张新闻网页；2、使用CSS对新闻网页的内容的样式进行设置：新闻标题按照“红橙黄绿蓝紫”的方式显示标题；新闻有主标题和新闻来源信息，主标题与副标题使用不同的字体于不同大小显示；段落的行高设置为2em,首行缩进；使用本节课所学的选择符，对新闻段落中某些重要信息使用加黑或是彩色文字显示。实验目的熟悉掌握CSS样式的使用实验内容打开visual stud...
复制链接

扫一扫

专栏目录