Html 如何通过CSS向网格视图添加边距
Html 如何通过CSS向网格视图添加边距,html,css,Html,Css,*{ 框大小：边框框； } h1{ 文本对齐：居中； 字体系列：无衬线； 字体大小：正常； 垫底：20px； } #第一节{ 右边距：10px； } #第2节{ 右边距：10px； } div div{ 边框：1px实心； 宽度：90%； 背景色：#9E9E9E； 位置：相对位置； 边缘底部：10px； 左边距：自动； 右边距：自动； } div div div div{ 文本对齐：居中； 位置：绝对位置； 右：0； 排名：0； 边际：0px； 字体大小：粗体； } #鸡{ 背景色：#EF9A；
*{
框大小：边框框；
}
h1{
文本对齐：居中；
字体系列：无衬线；
字体大小：正常；
垫底：20px；
}
#第一节{
右边距：10px；
}
#第2节{
右边距：10px；
}
div div{
边框：1px实心；
宽度：90%；
背景色：#9E9E9E；
位置：相对位置；
边缘底部：10px；
左边距：自动；
右边距：自动；
}
div div div div{
文本对齐：居中；
位置：绝对位置；
右：0；
排名：0；
边际：0px；
字体大小：粗体；
}
#鸡{
背景色：#EF9A；
宽度：25%；
边框：1px实心；
}
#牛肉{
背景色：#F44336；
宽度：25%；
边框：1px实心；
颜色：白色；
边框颜色：黑色；
}
#寿司{
背景色：#CDDC39；
宽度：25%；
边框：1px实心；
}
p{
填充：10px；
}
.行{
宽度：100%；
}
@介质（最小宽度：992px）{
.col-lg-1，
.col-lg-2，
.col-lg-3，
.col-lg-4，
.col-lg-5，
.col-lg-6，
.col-lg-7，
.col-lg-8，
.col-lg-9，
.col-lg-10，
.col-lg-11，
.col-lg-12{
浮动：左；
}
.col-lg-1{
宽度：8.33%；
}
.col-lg-2{
宽度：16.66%；
}
.col-lg-3{
宽度：25%；
}
.col-lg-4{
宽度：33.33%；
}
.col-lg-5{
宽度：41.66%；
}
.col-lg-6{
宽度：50%；
}
.col-lg-7{
宽度：58.33%；
}
.col-lg-8{
宽度：66.66%；
}
.col-lg-9{
宽度：74.99%；
}
.col-lg-10{
宽度：83.33%；
}
.col-lg-11{
宽度：91.66%；
}
.col-lg-12{
宽度：100%；
}
}
@介质（最小宽度：767px）和（最大宽度：991px）{
.col-md-1，
.col-md-2，
.col-md-3，
.col-md-4，
.col-md-5，
.col-md-6，
.col-md-7，
.col-md-8，
.col-md-9，
.col-md-10，
.col-md-11，
.col-md-12{
浮动：左；
}
.col-md-1{
宽度：8.33%；
}
.col-md-2{
宽度：16.66%；
}
.col-md-3{
宽度：25%；
}
.col-md-4{
宽度：33.33%；
}
.col-md-5{
宽度：41.66%；
}
.col-md-6{
宽度：50%；
}
.col-md-7{
宽度：58.33%；
}
.col-md-8{
宽度：66.66%；
}
.col-md-9{
宽度：74.99%；
}
.col-md-10{
宽度：83.33%；
}
.col-md-11{
宽度：91.66%；
}
.col-md-12{
宽度：100%；
}
}
模块2的作业解决方案
我们的菜单
鸡
同一天，我们要与精英们共同努力，为劳动和财富创造暂时的机会。乌特埃尼姆酒店
牛肉
同一天，我们要与精英们共同努力，为劳动和财富创造暂时的机会。乌特埃尼姆酒店
寿司
同一天，我们要与精英们共同努力，为劳动和财富创造暂时的机会。乌特埃尼姆酒店
显示：flex*{
框大小：边框框；
}
h1{
文本对齐：居中；
字体系列：无衬线；
字体大小：正常；
垫底：20px；
}
#第一节{
右边距：10px；
}
#第2节{
右边距：10px；
}
div div{
边框：1px实心；
宽度：90%；
背景色：#9E9E9E；
位置：相对位置；
边缘底部：10px；
左边距：自动；
右边距：自动；
}
div div div div{
文本对齐：居中；
位置：绝对位置；
右：0；
排名：0；
边际：0px；
字体大小：粗体；
}
#鸡{
背景色：#EF9A；
宽度：自动；
边框：1px实心；
}
#牛肉{
背景色：#F44336；
宽度：25%；
边框：1px实心；
颜色：白色；
边框颜色：黑色；
}
#寿司{
背景色：#CDDC39；
宽度：25%；
边框：1px实心；
}
p{
填充：10px；
}
.行{
宽度：100%；
显示器：flex；
}
@介质（最小宽度：992px）{
.col-lg-1，
.col-lg-2，
.col-lg-3，
.col-lg-4，
.col-lg-5，
.col-lg-6，
.col-lg-7，
.col-lg-8，
.col-lg-9，
.col-lg-10，
.col-lg-11，
.col-lg-12{
浮动：左；
}
.col-lg-1{
宽度：8.33%；
}
.col-lg-2{
宽度：16.66%；
}
.col-lg-3{
宽度：25%；
}
.col-lg-4{
宽度：33.33%；
}
.col-lg-5{
宽度：41.66%；
}
.col-lg-6{
宽度：50%；
}
.col-lg-7{
宽度：58.33%；
}
.col-lg-8{
宽度：66.66%；
}
.col-lg-9{
宽度：74.99%；
}
.col-lg-10{
宽度：83.33%；
}
.col-lg-11{
宽度：91.66%；
}
.col-lg-12{
宽度：100%；
}
}
@介质（最小宽度：767px）和（最大宽度：991px）{
.col-md-1，
.col-md-2，
.col-md-3，
.col-md-4，
.col-md-5，
.col-md-6，
.col-md-7，
.col-md-8，
.col-md-9，
.col-md-10，
.col-md-11，
.col-md-12{
浮动：左；
}
.col-md-1{
宽度：8.33%；
}
.col-md-2{
宽度：16.66%；
}
.col-md-3{
宽度：25%；
}
.col-md-4{
宽度：33.33%；
}
.col-md-5{
宽度：41.66%；
}
.col-md-6{
宽度：50%；
}
.col-md-7{
宽度：58.33%；
}
.col-md-8{
宽度：66.66%；
}
.col-md-9{
宽度：74.99%；
}
.col-md-10{
宽度：83.33%；
}
.col-md-11{
宽度：91.66%；
}
.col-md-12{
宽度：100%；
}
}
模块2的作业解决方案
我们的菜单
鸡
同一天，我们要与精英们共同努力，为劳动和财富创造暂时的机会。乌特埃尼姆酒店
牛肉
同一天，我们要与精英们共同努力，为劳动和财富创造暂时的机会。乌特埃尼姆酒店
寿司
同一天，我们要与精英们共同努力，为劳动和财富创造暂时的机会。乌特埃尼姆酒店
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.header {
border: 1px solid red;
padding: 15px;
}
.menu {
width: 25%;
float: left;
padding: 15px;
border: 1px solid red;
}
.main {
width: 75%;
float: left;
padding: 15px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="header">
<h1>Chania</h1>
</div>
<div class="menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="main">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
<p>Resize the browser window to see how the content respond to the resizing.</p>
</div>
</body>
</html>
* {
框大小：边框框；
}
.标题{
边框：1px纯红；
填充：15px；
}
.菜单{
宽度：25%；
浮动：左；
填充：15px；
边框：1px纯红；
}
梅因先生{
宽度：75%；
浮动：左；
填充：15px；
边框：1px纯红；
}
夏尼亚
- 航班