请参照网址"https://www.bjd.com.cn/jbw/news/"的布局,写一个相似的html网页,要求包含该网址中的所有样式和布局,并丰富其排版,给出完整代码
时间: 2023-05-26 18:05:12 浏览: 123
页面表现形式与布局格式==相关html页面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>北京晚报 - 国家重点新闻网站</title>
<style>
html, body {
margin: 0;
padding: 0;
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
}
.header {
height: 55px;
background-color: #333333;
}
.header .container {
width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
}
.header .logo {
font-size: 22px;
color: #ffffff;
text-decoration: none;
cursor: pointer;
}
.header .nav {
font-size: 14px;
color: #cccccc;
text-decoration: none;
cursor: pointer;
margin-left: 30px;
}
.header .nav:hover {
color: #ffffff;
}
.banner {
height: 400px;
background: url('https://picsum.photos/1200/400') no-repeat center center;
background-size: cover;
}
.container {
width: 1200px;
margin: 0 auto;
padding: 30px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.container .left {
flex: 1;
margin-right: 20px;
}
.container .left .title {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
}
.container .left .item {
display: flex;
margin-bottom: 16px;
}
.container .left .item .thumbnail {
width: 120px;
height: 80px;
background: url('https://picsum.photos/120/80') no-repeat center center;
background-size: cover;
margin-right: 10px;
}
.container .left .item .content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-bottom: 10px;
}
.container .left .item .content .title {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
.container .left .item .content .description {
font-size: 14px;
color: #666666;
margin-bottom: 10px;
}
.container .left .item .content .time {
font-size: 14px;
color: #999999;
}
.container .right {
width: 300px;
height: 400px;
background-color: #f4f4f4;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding: 10px;
}
.container .right .title {
font-size: 18px;
font-weight: bold;
margin-bottom: 20px;
}
.container .right .item {
margin-bottom: 16px;
width: 100%;
display: flex;
justify-content: space-between;
}
.container .right .item .thumbnail {
width: 60px;
height: 60px;
background: url('https://picsum.photos/60') no-repeat center center;
background-size: cover;
margin-right: 10px;
}
.container .right .item .content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-bottom: 10px;
}
.container .right .item .content .title {
font-size: 14px;
font-weight: bold;
margin-bottom: 10px;
}
.container .right .item .content .description {
font-size: 12px;
color: #666666;
margin-bottom: 10px;
}
.container .right .item .content .time {
font-size: 12px;
color: #999999;
}
.footer {
height: 100px;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
}
.footer .container {
width: 1200px;
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
}
.footer .nav {
font-size: 14px;
color: #333333;
margin-right: 30px;
text-decoration: none;
}
.footer .nav:hover {
color: #e74c3c;
}
.footer .copy {
font-size: 12px;
color: #999999;
}
</style>
</head>
<body>
<div class="header">
<div class="container">
<a href="#" class="logo">北京晚报</a>
<a href="#" class="nav">首页</a>
<a href="#" class="nav">要闻</a>
<a href="#" class="nav">娱乐</a>
<a href="#" class="nav">体育</a>
<a href="#" class="nav">财经</a>
<a href="#" class="nav">科技</a>
<a href="#" class="nav">女性</a>
<a href="#" class="nav">健康</a>
<a href="#" class="nav">文化</a>
<a href="#" class="nav">汽车</a>
</div>
</div>
<div class="banner"></div>
<div class="container">
<div class="left">
<div class="title">要闻</div>
<div class="item">
<div class="thumbnail"></div>
<div class="content">
<div class="title">这里的标题字数不超过20个</div>
<div class="description">这里显示文章的简短描述,字数不超过30个字</div>
<div class="time">1小时前</div>
</div>
</div>
<div class="item">
<div class="thumbnail"></div>
<div class="content">
<div class="title">这里的标题字数不超过20个</div>
<div class="description">这里显示文章的简短描述,字数不超过30个字</div>
<div class="time">2小时前</div>
</div>
</div>
<div class="item">
<div class="thumbnail"></div>
<div class="content">
<div class="title">这里的标题字数不超过20个</div>
<div class="description">这里显示文章的简短描述,字数不超过30个字</div>
<div class="time">3小时前</div>
</div>
</div>
</div>
<div class="right">
<div class="title">推荐</div>
<div class="item">
<div class="thumbnail"></div>
<div class="content">
<div class="title">这里的标题字数不超过15个</div>
<div class="description">这里显示文章的简短描述,字数不超过20个字</div>
<div class="time">4小时前</div>
</div>
</div>
<div class="item">
<div class="thumbnail"></div>
<div class="content">
<div class="title">这里的标题字数不超过15个</div>
<div class="description">这里显示文章的简短描述,字数不超过20个字</div>
<div class="time">5小时前</div>
</div>
</div>
<div class="item">
<div class="thumbnail"></div>
<div class="content">
<div class="title">这里的标题字数不超过15个</div>
<div class="description">这里显示文章的简短描述,字数不超过20个字</div>
<div class="time">6小时前</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<a href="#" class="nav">关于我们</a>
<a href="#" class="nav">联系我们</a>
<a href="#" class="nav">广告服务</a>
<a href="#" class="nav">人才招聘</a>
<a href="#" class="nav">友情链接</a>
<div class="copy">北京晚报 © 2021-2022</div>
</div>
</div>
</body>
</html>
阅读全文