在页面中以标准流的形式添加两个盒子,第一个盒子设置宽度和高度,第一个盒子包括内容极其盒子加上定位,为什么第二个盒子设置width:100%呈现的页面效果不是width:100%,而是与第一个盒子同一个宽度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>故乡报刊</title>
<link rel="stylesheet" href="../css/style.css" />
<link rel="stylesheet" href="../css/fourth.css" />
<link rel="stylesheet" href="../font/iconfont.css" />
<script src="../font/iconfont.js"></script>
</head>
<body>
<header>
<div class="nav">
<div class="logo">
<img src="../images/logo.png" alt="" />
</div>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">故乡历史</a></li>
<li><a href="#">故乡风俗</a></li>
<li><a href="#">故乡报刊</a></li>
<li><a href="#">故乡建筑</a></li>
<li><a href="#">故乡美食</a></li>
<li><a href="#">访客留言</a></li>
</ul>
</nav>
</div>
</header>
<div class="img">
<img src="../images/banner.jpg" alt="" />
</div>
<div class="line">故乡报刊</div>
<div class="center">
<img src="../images/magazine.jpg" alt="" />
<div class="text_magazine">
<p>
《读者》杂志发行量从创刊时月发行量3万册,到2006年月平均发行量898万册,稳居中国期刊排名第一,亚洲期刊排名第一,世界综合性期刊排名第四。同时,《读者》杂志行销世界90多个国家和地区,在美国、日本、澳大利亚、新加坡等国家和香港等地区拥有众多读者。可以说,有华人的地方就有《读者》。《读者》被誉为“中国人的心灵读本”“中国期刊第一品牌”。
</p>
<p>
《读者》杂志创办于1981年,原名《读者文摘》。1982年初,美国《读者文摘》来函指出:甘肃人民出版社使用《读者文摘》中文名是不正当的,不符合国际权协定。中美两家《读者文摘》长达数年的版权之争从此开始。后为化解与美国《读者文摘》发生的版权纠纷,1993年3月号《读者文摘》刊登征名启事,在读者中引起强烈反响,最后采用“读者”一名。1993年第7期,《读者文摘》正式改名为《读者》。
</p>
<span> <a href="http://www.baidu.com" target="_blank">More</a></span>
</div>
<div class="column">
<h3>主要栏目</h3>
<p>文苑:卷首语、文苑、书林一叶、幽默小品、原创精品</p>
<p>人物:人物、名人轶事</p>
<p>社会:杂谈随感、话题</p>
<p>生活:心理人生、经营之道、理财</p>
<p>文明:在海外、他山石、历史一叶、文化茶座、人与自然、影像</p>
<p>家园:人与自然、生物世界</p>
<p>点滴:言论、漫画与幽默、意林、点滴</p>
<p>互动:智趣、读者•作者•编者</p>
<p>艺术:封面、美术插页、歌曲</p>
</div>
</div>
<div class="section">
<div class="section_text">
<h2>读者</h2>
<ul>
<li>
<div class="icon-x">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-baokanzazhi"></use>
</svg>
</div>
<h3>办刊宗旨</h3>
<div class="icon_text">
<p>博采中外</p>
<p>荟萃精华</p>
<p>启迪思想</p>
<p>开阔眼界</p>
</div>
</li>
<li>
<div class="icon-x">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-baokanzazhi"></use>
</svg>
</div>
<h3>办刊理念</h3>
<div class="icon_text">
<p>高雅</p>
<p>清新</p>
<p>隽永</p>
</div>
</li>
<li>
<div class="icon-x">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-geren"></use>
</svg>
</div>
<h3>办刊对象</h3>
<div class="icon_text">
<p>社会各界群众</p>
<p>青年</p>
<p>知识界</p>
</div>
</li>
</ul>
</div>
</div>
<div class="line">关于读者</div>
<div class="time">
<div class="time-axis">
<div class="left">
<span class="dot"></span>
<span class="jiantou"></span>
<div class="con">2013年9月,获得“2013年度中国邮政发行报刊百强排行榜”第一名。</div>
</div>
<div class="right">
<span class="dot"></span>
<span class="jiantou"></span>
<div class="con">2015年,获得“最受海外机构用户青睐的中国期刊发行排行”第一名。</div>
</div>
<div class="left">
<span class="dot"></span>
<span class="jiantou"></span>
<div class="con">2018年9月,获得“2018年度中国邮政发行报刊百强排行榜”第四名。</div>
</div>
<div class="right">
<span class="dot"></span>
<span class="jiantou"></span>
<div class="con">]2019年6月,获得“2018数字阅读影响力期刊TOP100”海外榜单第一名,中国国内榜单第二名。</div>
</div>
</div>
<footer>
<div class="footer">
<img src="../images/logo.png" alt="">
<ul>
<li>
<span class="iconfont icon-dingwei1"></span>地址:甘肃省兰州市XXX街XX大厦
</li>
<li>
<span class="iconfont icon-dianhua"></span>联系方式:189XXXX8924
</li>
<li>
<span class="iconfont icon-youjian"></span>邮箱:18919168924@163.com
</li>
<li>
<span class="iconfont icon-fangkuang"></span>Copyright© 2022 GaoXupeng. All rights
</li>
</ul>
</div>
<div class="return">
<nav>
<p>
<a href="#">首页</a><em>|</em>
<a href="#">故乡历史</a><em>|</em>
<a href="#">故乡资源</a><em>|</em>
<a href="#">故乡风俗</a><em>|</em>
<a href="#">故乡报刊</a><em>|</em>
<a href="#">故乡建筑</a><em>|</em>
<a href="#">故乡美食</a>
</p>
</nav>
</div>
</footer>
</body>
</html>
.img {
/* margin: 0 auto; */
width: 1519px;
height: 648px;
background-color: #b1bbf9;
}
.img img {
width: 1519px;
height: 648px;
}
.line {
padding: 0 20px 0;
margin: 85px 465px;
line-height: 1px;
font-size: 30px;
font-family: simsun;
color: #3F4E61;
text-align: center;
border-left: 200px solid #d6dde7;
border-right: 200px solid #d6dde7;
}
.center {
margin: 0 auto;
width: 1200px;
height: 335px;
/* background-color: orchid; */
}
.center img {
float: left;
margin-left: 65px;
margin-top: 50px;
width: 185px;
height: 230px;
}
.center .text_magazine {
float: left;
margin-left: 40px;
width: 435px;
height: 320px;
/* background-color: orange; */
}
.center .text_magazine span {
display: block;
margin-top: 12px;
text-align: center;
line-height: 35px;
width: 65px;
height: 40px;
background-color: #9d6e51;
}
.text_magazine p {
text-align: justify;
font-family: simsun;
}
.center .text_magazine span a {
color: #ffffff;
}
.center .column {
float: left;
margin-left: 15px;
width: 438px;
height: 320px;
/* background-color: indianred; */
border-left: 3px solid #9d6e51;
}
.center .column h3 {
margin-left: 20px;
font-size: 25px;
font-family: simsun;
}
.center .column p {
margin-bottom: 8px;
margin-left: 20px;
line-height: 24px;
font-size: 14px;
font-family: simsun;
width: 95%;
height: 25px;
background-color: #9d6e51
}
.section {
width: 100%;
height: 400px;
background-color: #ddd37e;
}
.section_text {
margin: 0 auto;
width: 1200px;
height: 400px;
background-color: indianred;
}
.section_text h2 {
font-size: 35px;
font-family: simsun;
color: #ffffff;
text-align: center;
line-height: 90px;
}
.section_text ul {
margin-left: 188px;
margin-top: 22px;
width: 810px;
height: 265px;
/* background-color: yellow; */
}
.section_text ul li {
float: left;
margin-left: 80px;
width: 170px;
height: 240px;
/* background-color: orange; */
}
.section_text ul li .icon-x {
margin-left: 45px;
margin-top: 20px;
text-align: center;
line-height: 70px;
font-size: 40px;
width: 80px;
height: 80px;
background-color: violet;
border-radius: 50%;
}
.section_text ul li .icon-x .icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
.section_text ul li h3 {
text-align: center;
line-height: 50px;
font-family: simsun;
}
.icon_text {
text-align: center;
font-size: 16px;
font-family: simsun;
color: #ffffff;
width: 170px;
height: 86px;
/* background-color: greenyellow; */
}
.time{
margin: 0 auto;
width: 1519px;
height: 330px;
/* background-color: #b1bbf9; */
}
.time-axis {
width: 804px;
height: 330px;
/* border: 2px solid red; */
margin: 0 auto;
}
.time-axis .left {
position: relative;
float: left;
width: 400px;
/* height: 300px; */
/* background-color: yellowgreen; */
border-right: 4px solid #b1bbf9;
}
.time-axis .right {
position: relative;
float: right;
width: 400px;
/* height: 300px; */
/* background-color: cornflowerblue; */
border-left: 4px solid #b1bbf9;
}
.time-axis .dot {
position: absolute;
top: 50%;
margin-top: -7px;
display: block;
width: 10px;
height: 10px;
background-color: red;
border-radius: 7px;
border: 2px solid #b1bbf9;
}
.time-axis .left .dot {
right: -9px;
}
.time-axis .right .dot {
left: -9px;
}
.time-axis .jiantou {
position: absolute;
top: 50%;
margin-top: -10px;
display: block;
border: 10px solid transparent;
}
.time-axis .left .jiantou {
right: -1px;
border-left: 10px solid yellow;
}
.time-axis .right .jiantou {
left: 0px;
border-right: 10px solid yellow;
}
.time-axis .con {
padding: 15px;
margin-right: 20px;
font-size: 18px;
font-family: simsun;
/* height: 200px; */
background-color: #fff;
border-radius: 10px;
}
.time-axis .left .con {
margin-right: 20px;
}
.time-axis .right .con {
margin-left: 20px;
}
footer {
width: 100%;
height: 310px;
background-color: #3f4e61;
}
.footer {
position: relative;
margin: 0 auto;
width: 1200px;
height: 270px;
/* background-color: cornflowerblue; */
}
.footer img {
margin-top: 110px;
width: 329px;
height: 70px;
}
.footer ul {
position: absolute;
left: 420px;
top: 82px;
color: #fff;
font-family: simsun;
width: 350px;
/* background-color: #ddd37e; */
}
.footer ul li {
float: left;
height: 35px;
}
.footer span {
display: block;
float: left;
padding: 0 8px 0 0;
}
.return {
height: 50px;
background-color: #26395b;
}
.return nav {
margin: 0 auto;
width: 1200px;
height: 50px;
}
.return p {
line-height: 50px;
text-align: center;
height: 50px;
}
.return p a {
padding: 0 0 0 20px;
font-size: 15px;
font-family: simsun;
color: #fff;
}
.return p em {
font-style: normal;
margin-left: 15px;
color: #fff;
}
.return p a:hover {
color: #ddd37e;
}
![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/497374323166130.png "#left")