Html 响应性网页设计-元素之间的间隙
我试图通过使用Html 响应性网页设计-元素之间的间隙,html,css,flexbox,responsive,semantics,Html,Css,Flexbox,Responsive,Semantics,我试图通过使用框大小：border-box创建一个响应性强的web 我知道，大多数（如果不是所有的话）的语义标签都在左边。 在我的例子中，我将两个部分分开，每个部分的宽度为60%，另一部分的宽度为40% 左侧浮动。旁边的保持在右侧 我遇到的问题是部分。上部分和旁边的之间的间隙。右列 如果我把放在部分和部分之间的旁边是合乎逻辑的 我也试过把放在一边。右列先写，然后再写部分。。但是，我不希望在断点处首先显示旁白。现在我知道可以用flexbox重新排列所有元素，但我对flexbox还不够自信 第二个问
框大小：border-box创建一个响应性强的web
我知道，大多数（如果不是所有的话）的语义标签都在左边。
在我的例子中，我将两个部分分开，每个部分的宽度为60%，另一部分的宽度为40%
左侧浮动。旁边的保持在右侧
我遇到的问题是部分。上部分
和旁边的之间的间隙。右列
如果我把放在部分和部分之间的旁边
是合乎逻辑的
我也试过把放在一边。右列先写，然后再写部分。。但是，我不希望在断点处首先显示旁白。现在我知道可以用flexbox重新排列所有元素，但我对flexbox还不够自信
第二个问题是，有没有办法使部分。较低的sec
100%高度在页脚之间不留任何间隙，反之亦然，侧边。右栏
？
响应性试验
*{
保证金：0；
填充：0；
框大小：边框框；
}
导航{
背景色：#EEE；
浮动：左；
填充：20px；
宽度：100%；
}
导航ul{
列表样式类型：无；
文本对齐：居中；
}
李国荣{
显示：内联；
文本转换：大写；
}
.左{
背景色：#2196F3；
填充：20px；
浮动：左；
宽度：13.5%；
}
梅因先生{
背景色：#f1f1；
填充：20px；
浮动：左；
宽度：55%；
}
.对{
背景色：#4CAF50；
填充：20px；
浮动：左；
宽度：31.5%；
}
第1.2节{
背景颜色：灰色；
浮动：左；
填充：10px；
宽度：60%；
文本对齐：居中；
身高：100%；
轮廓：1px纯红；
}
第1.2节{
背景色：青色；
浮动：左；
填充：10px；
宽度：60%；
文本对齐：居中；
身高：100%；
轮廓：1px纯红；
}
靠边站{
显示器：flex；
弯曲方向：柱反向；
背景颜色：绿色；
浮动：对；
文本对齐：居中；
轮廓：1px纯红；
宽度：40%；
}
旁白{
填充：10px；
}
文章{
背景颜色：金色；
显示器：flex；
弯曲方向：立柱；
}
#第1条{
利润率：10px；
填充：10px；
}
#第1条p{
文本对齐：左对齐；
}
#第1-W条{
文本转换：大写；
字号：4em；
字体大小：粗体；
浮动：左；
右边距：5px；
线高：0.8em；
}
页脚{
浮动：左；
颜色：白色；
背景色：海军蓝；
填充：10px；
宽度：100%；
文本对齐：居中；
}
@媒体屏幕和屏幕（最大宽度：800px）{
.左、.主、.右{
宽度：100%；
}
第1.2节{
宽度：100%；
}
第1.2节{
宽度：100%；
}
靠边站{
宽度：100%；
}
}
左
主要
对
突发新闻
头条新闻
新闻内容
新闻内容
新闻内容
新闻内容
新闻内容
聚光灯
意见
新闻内容
新闻内容
新闻内容
新闻内容
新闻内容
新闻内容
新闻内容
新闻内容
新闻内容
新闻内容
新闻内容
新闻内容
新闻内容
新闻内容
新闻内容
新闻内容
新闻内容
新闻内容
新闻内容
新闻内容
新闻内容
新闻内容
新闻内容
右边的东西
右边的东西
右边的东西
右边的东西
“火车教父”
从莫斯科到北京的跨蒙古人
80年代《环球》的作者
火车这是一次精彩的旅程，
充满了迷人的遭遇
只能在火车上发生
具有别致独特的情节剧风格
法国女人，我对面的女士猛地拉开头顶的窗户，然后坐了下来
退后，不要对任何人发牢骚，而是用一把扇子扇风
巴黎比赛的副本。一股松树的香味飘进马车和一辆马车
火车咔嗒咔嗒地向南开往贝兹，微风吹拂着我的额头。接近
透过窗户，我向下望去，看到了一片沙土和碧水
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Test</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav{
background-color: #EEE;
float: left;
padding: 20px;
width: 100%;
}
nav ul{
list-style-type: none;
text-align: center;
}
nav ul li{
display: inline;
text-transform: uppercase;
}
.left{
background-color: #2196F3;
padding: 20px;
float: left;
width: 13.5%;
}
.main{
background-color: #f1f1f1;
padding: 20px;
float: left;
width: 55%;
}
.right{
background-color: #4CAF50;
padding: 20px;
float: left;
width: 31.5%;
}
section.upper-sec{
background-color: grey;
float: left;
padding: 10px;
width: 60%;
text-align: center;
height: 100%;
outline: 1px solid red;
}
section.lower-sec{
background-color: teal;
float: left;
padding: 10px;
width: 60%;
text-align: center;
height: 100%;
outline: 1px solid red;
}
aside.right-col {
display: flex;
flex-direction: column-reverse;
background-color: green;
float: right;
text-align: center;
outline: 1px solid red;
width: 40%;
}
aside p{
padding: 10px;
}
article{
background-color: gold;
display: flex;
flex-direction: column;
}
#art1{
margin: 10px;
padding: 10px;
}
#art1 p{
text-align: left;
}
#art1-W{
text-transform: uppercase;
font-size: 4em;
font-weight: bold;
float: left;
margin-right: 5px;
line-height: 0.8em;
}
footer{
float: left;
color: white;
background-color: navy;
padding: 10px;
width: 100%;
text-align: center;
}
@media screen and (max-width: 800px){
.left, .main, .right{
width: 100%;
}
section.upper-sec{
width: 100%;
}
section.lower-sec{
width: 100%;
}
aside.right-col{
width: 100%;
}
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Test1</a></li>
<li><a href="#">Test2</a></li>
<li><a href="#">Test3</a></li>
</ul>
</nav>
<div class="left">
<p>left</p>
</div>
<div class="main">
<p>main</p>
</div>
<div class="right">
<p>right</p>
</div>
<section class="upper-sec">
<h1>Breaking News</h1>
<h5>Headliner</h5>
<p> News content </p>
<p> News content </p>
<p> News content </p>
<p> News content </p>
<p> News content </p>
</section>
<section class="lower-sec">
<h1>Spotlight</h1>
<h5>Opinion</h5>
<p>News content</p>
<p>News content</p>
<p>News content</p>
<p>News content</p>
<p>News content</p>
<p>News content</p>
<p>News content</p>
<p>News content</p>
<p>News content</p>
<p>News content</p>
<p>News content</p>
<p>News content</p>
<p>News content</p>
<p>News content</p>
<p>News content</p>
<p>News content</p>
<p>News content</p>
<p>News content</p>
<p>News content</p>
<p>News content</p>
<p>News content</p>
<p>News content</p>
<p>News content</p>
</section>
<aside class="right-col">
<p> Something on the right </p>
<p> Something on the right </p>
<p> Something on the right </p>
<p> Something on the right </p>
<article id="art1">
<h1>‘The Godfather of trains’</h1>
<h5>the Trans-Mongolian from Moscow to Beijing</h5>
<p>For the author of Around the World in 80
Trains this was a standout journey,
full of captivating encounters that
could only happen on a train</p>
<p><span id="art1-W">W</span> ith the air of melodrama unique to chic
French women, the lady opposite me yanked open the overhead window then sat
back down, grumbling to no one in particular and fanning herself with a
copy of Paris Match. An aroma of pine filtered into the carriage and a
breeze cooled my brow as the train clattered south to Béziers. Edging up to
the window, I looked down to where a curl of sand and green water had
appeared, an oasis where children bobbed about in dinghies and leapt off
limestone rocks. This was the essence of why I love train travel: it allows
me to see what’s behind the trees in the Massif Central; to smell the
coconut being fried in huts in Kerala; and to spot rainbows hovering in the
spray of Niagara Falls.</p>
</article>
</aside>
<footer>
<p>News & Media Limited or its affiliated companies. All rights reserved.</p>
</footer>
</body>
</html>