实现效果图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 为父容器整个新闻块设置宽高,清除浮动带来的影响 */
#news {
width: 560px;
height: 600px;
border: 1px solid black;
}
.nav {
width: 520px;
height: 30px;
list-style: none;
/* 取消列表项目标记 */
}
/* 选取有序列表(<ol>)中的列表项(<li>),整个html文件里所有的ol里的li */
ol>li {
width: 130px;
height: 30px;
float: left;
/* <ol>中的列表项目li左浮动 */
}
ol>li>a {
text-decoration: none;
/* 取消超链接标签文本修饰下划线 */
font-size: 18px;
/* 超链接标签中的文本设置字体大小 */
color: #aaa;
}
ol>li>.present {
color: #6495ef;
/* 为<ol>中当前浏览的导航条设置颜色 */
}
ul>li {
line-height: 35px;
/* 为<ul>中的项目列表li设置行高 */
}
.image {
/* 文本团片实现居中用这个 */
text-align: center;
/* 垂直局中,你得自己算填冲的量 */
padding: 5px;
}
.bigimage{
width: 535px;
height: 310px;
border: 1px solid black;
margin: 0 auto;
}
</style>
</style>
</head>
<body>
<body>
<!-- 父容器#news里包含三个子元素块ol、div、ul -->
<div id="news">
<ol class="nav">
<!-- 在有序列表的每个列表项目li里嵌套超链接标签,并为第一个<a>添加类名,在CSS中设置特定样式 -->
<li><a class="present" href="http://news.baidu.com/" target="_blank">头条</a></li>
<li><a class="present" href="http://news.baidu.com/" target="_blank">新闻</a></li>
<li><a class="present" href="http://news.baidu.com/" target="_blank">娱乐</a></li>
<li><a class="present" href="https://www.csdn.net/" target="_blank">csdn</a></li>
<!-- 此处省略雷同代码 -->
</ol>
<div class="bigimage">
<div class="image">
<!-- 在div块元素中嵌入一张图片,并设置宽高 -->
<img src="./images/富士山.jpg" alt="" width="525" height="300">
</div>
</div>
<ul>
<!-- 为有序列表中的每个列表项目li里加入新闻文本 -->
<li>一年一度的富士山爆发活动即将开始了</li>
<li>震惊!富士山上出现一巨人</li>
<li>巨人出现了,怪兽还会远吗?</li>
<li>巨人手上拿着铁锹,他要干什么?</li>
<li>巨人阻值富士山爆发</li>
<!-- 此处省略雷同代码 -->
</ul>
</div>
</body>
</body>
图片