Question

我一直在寻找一个100％宽度和高度的CSS网格，边框上没有边距/填充（当我处于常规桌面模式时，我希望某些元素粘在浏览器窗口的左侧和右侧）。我似乎无法找到一个适合我的需求：我检查了bootrstrap，但它似乎太复杂了，因为我只需要制作一个简单的登陆页面

Answer 1

这是您可以使用的基本格式，以及一些快速的CSS / HTML示例。希望这会有所帮助。

在您的身体中，您可以将.sectional类应用于您想要的任何元素。请务必使用.sectional类适当的margin / padding将您的内容提供给任何内容。使用任何颜色名称作为背景颜色和任何使用＆＃39; fc＆＃39;如字体着色。

＆＃13;

<!DOCTYPE html>
<html>
<head>


<meta charset="utf-8">


<title>Example - full width</title>


<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">


<style>

*, html, body           {box-sizing:border-box; -moz-box-sizing:border-box;}
body                    {width:100%; height:100%; margin:0em auto; font-size:100%;}
.sectional              {margin:0px; padding:0em 0em 0em 0em; width:100%; overflow:hidden;}


.black                  {background-color:#000000!important;}
.black-fc               {color:#000000;}
.blue                   {background-color:#0000FF; }
.blue-fc                {color:#0000FF; }
.coral                  {background-color:#FF7F50; }
.coral-fc               {color:#FF7F50; }
.dark-gray              {background-color:#505050!important;}
.dark-gray-fc           {color:#505050;}
.gainsboro              {background-color:#DCDCDC!important;}
.gainsboro-fc           {color:#DCDCDC;}
.midnight               {background-color:#252525!important;}
.midnight-fc            {color:#252525;}
.scarpa-flow            {background-color:#E8E8ED!important;}
.scarpa-flow-fc         {color:#E8E8ED;}
.soft-blueberry         {background-color:#BCC6CF!important;}
.soft-blueberry-fc      {color:#BCC6CF;}
.tomato                 {background-color:#FF6347!important;}
.tomato-fc              {color:#FF6347;}
.white                  {background-color:#FFFFFF!important;}
.white-fc               {color:#FFFFFF;}


.inside                 {width:97%;margin:0em 1.5% 0em 1.5%;}

.align-left             {text-align:left;}
.align-right            {text-align:right;}
.align-center           {text-align:center;}

.pad-vertical           {padding-top:3em;padding-bottom:3em;}

</style>

</head>
<body>



<main class="sectional dark-gray">
  <div class="inside white-fc">
  <h1 class="scarpa-flow-fc">This is some text.</h1>
  <p>This is some paragraph text...</p>
  <p class="coral-fc">This is some more text...</p>
  </div>
</main>


<section class="sectional align-center scarpa-flow">
  <div class="inside midnight-fc">
  <h1 class="blue-fc">This is some text.</h1>
  <p>This is some paragraph text...</p>
  <p class="tomato-fc">This is some more text...</p>
  </div>
</section>


<h2 class="sectional pad-vertical midnight soft-blueberry-fc"><span class="inside">A Section Heading</span></h2>



</body>
</html>

＆＃13;

具有100％w＆amp; h且无边距/填充的响应网格

1 个答案: