Html 将页面分成6页_Html_Css - Fatal编程技术网

Html 将页面分成6页

html css

Html 将页面分成6页,html,css,Html,Css,我目前正在开发我的投资组合上的技能页面，想知道是否有人能解释我如何在页面上有6个部分，顶部有3个部分，底部有3个部分，最好不用创建一个滚动条，并在一个页面上保持良好的刷新效果，但如果没有，那么不用担心。我将在下面提供我的代码和我的页面示例。任何信息都会有很大帮助。先谢谢你页面示例 <!DOCTYPE html> <html> <div class="split left"> <div class="centered"> &l

我目前正在开发我的投资组合上的技能页面，想知道是否有人能解释我如何在页面上有6个部分，顶部有3个部分，底部有3个部分，最好不用创建一个滚动条，并在一个页面上保持良好的刷新效果，但如果没有，那么不用担心。我将在下面提供我的代码和我的页面示例。任何信息都会有很大帮助。先谢谢你

页面示例

    <!DOCTYPE html>
<html>

<div class="split left">
  <div class="centered">
    <img src="Assets/coding.png" alt="Online World">
    <h2>Website Developer</h2>
    <div class="svg-wrapper">
      <svg height="40" width="150" xmlns="http://www.w3.org/2000/svg">
        <rect id="shape" height="40" width="150" />
        <div id="text">
          <a href="web.html"><span class="spot"></span>Learn More</a>
        </div>
      </svg>
  </div>    
  </div>
</div>


  <div class="split center">
      <div class="centered">
        <img src="Assets/technician.png" alt="Online World">
        <h2>ICT Technician</h2>
        <div class="svg-wrapper">
          <svg height="40" width="150" xmlns="http://www.w3.org/2000/svg">
            <rect id="shape" height="40" width="150" />
            <div id="text">
              <a href="web.html"><span class="spot"></span>Learn More</a>
            </div>
          </svg>
      </div>    
      </div>
    </div>

 <div class="split right">
      <div class="centered">
        <img src="Assets/shield.png" alt="Security">
        <h2>Security Analyst</h2>
        <div class="svg-wrapper">
          <svg height="40" width="150" xmlns="http://www.w3.org/2000/svg">
            <rect id="shape" height="40" width="150" />
            <div id="text">
              <a href="web.html"><span class="spot"></span>Learn More</a>
            </div>
    </svg>
  </div>      
</div>

这可以使用引导列分区来完成：

<div class="row">
 <div class="col-md-4">
     <!-- Top Left Block code here -->
 </div>
 <div class="col-md-4">
     <!-- Top Center Block code here -->
 </div>
 <div class="col-md-4">
     <!-- Top right Block code here -->
 </div>
</div>
<div class="row">
 <div class="col-md-4">
     <!-- Bottom Left Block code here -->
 </div>
 <div class="col-md-4">
     <!-- Bottom Center Block code here -->
 </div>
 <div class="col-md-4">
     <!-- Bottom right Block code here -->
 </div>
</div>

借助CSS网格，您可以轻松完成

用类节包装和div中的所有内容

<div class="sections"></div>

您可以使用引导将屏幕分为6个部分。请参阅下面的引导代码


1.
2.
3.
4.
5.
6.

我刚刚编辑了你的代码。您可以根据需要调整容器高度。根据身高，第一部分在顶部，第二部分在底部。在移动设备中，所有内容都将根据您的参考逐一对齐。我希望这对你有用

正文{
保证金：0；
填充：0；
宽度：100%；
身高：100%；
字体大小：继承；
}
.第一节{
宽度：100%；
对齐自我：开始；
}
.第二节{
宽度：100%；
自我对齐：结束；
}
.集装箱{
显示器：flex；
柔性包装：包装；
最小高度：500px；
}
.分开{
颜色：白色；
字体系列：无衬线；
身高：100%；
宽度：33.33%；
显示：内联块；
浮动：左；
文本对齐：居中；
填充：20px0；
}
.左{
左：0；
背景#0F2027；
背景：线性梯度（至底部，#0F2027，#080e10）；
}
.左h2{
颜色：aliceblue；
字体系列：无衬线；
}
.对h2{
颜色：aliceblue；
字体系列：无衬线；
}
.中心{
左：33%；
右：33%；
背景#0F2027；
背景：线性梯度（至底部，#0F2027，#080e10）；
}
.对{
右：0；
背景#0F2027；
背景：线性梯度（至底部，#0F2027，#080e10）；
}
.img{
宽度：150px；
}
@介质（最大宽度：767px）{
.集装箱{
显示：块；
}
.分开{
宽度：100%；
浮动：无
}
}


网站开发者
ICT技术员
安全分析师
网站开发者
ICT技术员
安全分析师

您可以使用引导帮助您吗？手动计算页面的高度？你能提供一些例子吗？你试过谷歌引导吗？我试过，但我有点挣扎，你能帮我吗？我发现html可以做我想做的事情，但是没有css可以配合。顶部有3个部分，底部有3个部分。所以没有连续的列，对吗？我用了这个，我得到了这个作为输出。我没有发现这是在给定的链接上实现的。我把它添加到我的代码中只是为了看看它是否能工作，它出现在页面底部，我想这可能与我的背景有关，但我不确定。不要把你的代码和引导代码混在一起。将所有内部潜水放在引导的内部col div中。一旦div的层次结构正常工作，就检查它，而不是1 2 3。。在div中输入正确的数据。我觉得自己像个白痴：/我已经准确输入了你在答案中添加的内容，我只得到了这个。。所有页面HTML:所有CSS：在回答和发布问题时使用适当的单词。记住。

<div class="sections"></div>

.sections{
display:grid;
grid-template-columns:1fr 1fr 1fr;
}