HTML新浪新闻-页面布局（盒子模型）
一、盒子模型
1、页面中所有元素（标签）都可以看作是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局
2、盒子模型的组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）（从内到外的边框依次是）
3、布局标签：实际开发网页中，会大量频繁使用div和span这两个没有语义的布局标签。
①div标签的特点：
- 一行只显示一个（独占一行）
- 宽度默认是父元素的宽度，高度默认由内容撑开
- 可以设置宽高（width、height）
②span标签的特点：
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高（width、height）
二、盒子代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子模型</title>
<style>
div{
width: 200px;
height: 200px;
box-sizing:border-box;/* 指定width和height为盒子的高和宽 */
background-color:aquamarine;/* 背景色 */
padding:20px 20px 20px 20px;/* 内边距：上 右 下 左 ，上下左右都是一样的，可以简写为一个20px*/
border:10px solid red; /* 边框：宽度 线条类型 颜色 */
margin:30px ;/* 外边距：上 右 下 左 ;外边距不计算在盒子之内*/
}
</style>
</head>
<body>
<div>
A A A A A A A A A A A A A A A A A A A A A A A A
</div>
</body>
</html>
三、新浪界面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>焦点访谈：中国底气 新思想夯实大国粮仓</title>
</head>
<style>
h1{
color:rgb(82,82,82);
}
#time{
color:rgb(181,181,181);
font-size:20px;
}
a{
color:rgb(0,0,0);
text-decoration:none;
}
p{
text-indent:35px;
line-height: 40px;
}
#plast{
text-align:right;
}
#center{
width:65%;/* 正文部分的宽度占整个页面的65% */
/* margin:0% 17.5% 0% 17.5%; *//* 要想使页面居中，需要调整外边距，上右下左 */
margin:0 auto;/* 如果只写两个值，第一个值是上下，第二个值是左右，auto表示自动调整 */
}
</style>
<!-- 要布局正文的内容，需要使用<div>标签把正文包裹起来 -->
<div id="center">
<!-- 给他定义一个id,然后再去style里面使用id选择器 -->
<body>
<img src="./Picture/xinlanglogo.png" > <a href="https://news.sina.com.cn/" target="_blank">新浪政务</a> >正文
<h1>焦点访谈：中国底气 新思想夯实大国粮仓</h1>
<hr>
<span class="cls" id="time">2023年03月02日21：50 </span> <span> <a href="https://tv.cctv.com/" target="_blank">央视网</a> </span>
<hr>
<video src="https://v.jstv.com/a/20250204/1738671008455.shtml" controls="controls" width="950px"></video>
<audio src="https://699pic.com/music/sound-4802.html" controls></audio>
<p>
<strong>当地时间5月8日上午</strong>，俄罗斯总统普京同A在莫斯科克里姆林宫举行会谈。在庄严的迎宾曲中，A和普京分别从乔治大厅两侧沿红地毯健步走到大厅中央。新华社记者 黄敬文 摄
</p>
<img src="https://k.sinaimg.cn/n/news/crawl/147/w550h397/20250508/bc8e-18c41ebadb35e178110f8a1911b8487c.jpg/w700d1q75cms.jpg?by=cms_fixed_width">
<p>
普京在乔治大厅为A举行隆重欢迎仪式。在庄严的迎宾曲中，A和普京分别从乔治大厅两侧沿红地毯健步走到大厅中央，亲切握手合影。军乐团奏中俄两国国歌。
</p>
<img src="https://k.sinaimg.cn/n/news/crawl/202/w550h452/20250508/c2ac-c1dde386c2caf4d2ad6efdbc05ef01c8.jpg/w700d1q75cms.jpg?by=cms_fixed_width">
<p>
A强调，今年是中国人民抗日战争、苏联伟大卫国战争暨世界反法西斯战争胜利80周年。80年前，中俄两国人民付出巨大牺牲，赢得伟大胜利，为维护世界和平和人类进步事业作出彪炳史册的历史贡献。当前，面对国际上的单边主义逆流和强权霸凌行径，中方将同俄方一道，肩负起作为世界大国和联合国安理会常任理事国的特殊责任，挺膺担当，共同弘扬正确二战史观，维护联合国权威和地位，坚定捍卫二战胜利成果，坚决捍卫中俄两国及广大发展中国家权益，携手推动平等有序的世界多极化、普惠包容的经济全球化。
</p>
<p>
普京表示，俄中关系建立在相互平等、相互尊重基础上，不针对第三方，不受一时一事影响。坚定不移推动俄中关系发展、扩大互利合作是俄方战略选择。俄方坚定奉行一个中国原则，在台湾问题上始终支持中方立场。俄方愿同中方保持密切高层交往，加强贸易、投资、能源、农业、科技等领域务实合作，深化教育、文化、青年、旅游等人文交流，拓展远东地区合作内涵。加征高关税违背常理，也不合法，只会反噬自身。双方要加强在联合国、上海合作组织、金砖国家等多边框架内的协调和配合，支持世界多极化进程，共同反对单边主义，反对滥施制裁，反对集团对抗，维护国际社会共同利益。
</p>
<p id = "plast">
责任编辑：刘光博
</p>
</div>
</body>
</html>
浙公网安备 33010602011771号