利用HTML5与CSS实现新闻网页设计

实现代码 (内容因为敏感原因所以有修改)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一手消息</title>
    <!--内嵌样式:写在style标签中(可以写在页面任何位置,但通常约定写在head标签中)-->

<!--CSS盒子:页面中所有的元素(标签),都可以看做是一个盒子,由盒子将页面中的元素包含在一个矩形区域内,通过盒子的视角更方便的进行页面布局
盒子模型的组成:内容区域、内边距区域、边框区域、外边距区域-->
<!--布局标签:div span这两个布局标签没有实际语义-->
<!--div标签:
一行只显示一个
宽度默认是父元素的宽度,高度默认由内容展开
可以设置宽高-->
<!--span标签:
一行可以显示多个
宽度和高度默认由内容撑开
不可以设置宽高-->
    <style>
        h1{
            color: #4D4F53;
        }
        a{
            color: black;
           /*去除下划线   none:默认定义标准文本*/
           /*text-decoration 字体修饰*/
            text-decoration: none;
        }
        p{
            text-indent: 35px;/*设置首行缩进*/
            line-height: 35px;/*设置行高*/
        }
        #plast{
            text-align: right;/*对齐方式*/
            color: gray;
        }
        #center{
            width:65%;
            /*margin: 0% 17.5% 0% 17.5%;外边距 上右下左*/
            margin: 0 auto;/*只设置两个值的话,第一个代表上下 第二个代表左右 auto浏览器自动计算外边距*/
        }
    </style>


<!--    外嵌样式:写在一个单独的.css文件中(需要通过Link标签在网页中引入-->
<!--    <link rel="stylesheet" href="color.css">-->
</head>
<body>

<div id="center">

<!--绝对网站路径-->
<!--<img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png" alt="图标" width="50" height="50">消息>正文-->
<img src="../resources/image/news_logo.png" alt="图标"> <a href="http://gov.sina.com.cn/" target="_blank">消息</a>>正文

<!--想要控制修改字体的颜色,需要利用CSS样式控制-->
<!--行内样式:写在标签的style属性中(不推荐)  <h1 style="xxx:xxx;xxx:xxx;">中国新闻网</h1>-->
<!--<h1 style="color: red">第一手消息</h1>-->

<h1>第一手消息</h1>

<hr>
<span>2023年03月02日 21:50</span>  
<a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">央视</a>
<hr>

<video src="http://news.sina.com.cn/gov/xlxw/2023-03-03/doc-imyipzuy7321600.shtml?hasPlayedTime=0.518546" controls width="800px" height=""></video>
<!--在HTML中无论输入多少个空格都只会显示一个,可以使用空格占位符&nbsp;-->
<p>
    <strong>消息</strong>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</p>
<p>
    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</p>
<img src="../resources/image/2.jpg" width="800px">
<p>
    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</p>
<img src="../resources/image/3.jpg" width="800px" >
<p>
    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</p>
<p>
    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</p>
<p id="plast">
    责任编辑:xxx
</p>
</div>

</body>
</html>

猜你喜欢

转载自blog.csdn.net/m0_59800431/article/details/129720927