如何使用materializeCSS

时间：2017-03-12 15:30:19

标签： html materialize

这是一个两部分问题。我试图模仿这个模型。

enter image description here

我不太确定如何进行文本的轻微左对齐以及在灰色圆圈区域添加圆形图像。目前，我在这方面的代码如下所示：

<div class="index-banner color2">
    <div class="section">
      <div class="row">
        <div class="col s12 center">
          <h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
            <p class="left-align light">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque id nunc nec volutpat. Etiam pellentesque tristique arcu, non consequat magna fermentum ac. Cras ut ultricies eros. Maecenas eros justo, ullamcorper a sapien id, viverra ultrices eros. Morbi sem neque, posuere et pretium eget, bibendum sollicitudin lacus. Aliquam eleifend sollicitudin diam, eu mattis nisl maximus sed. Nulla imperdiet semper molestie. Morbi massa odio, condimentum sed ipsum ac, gravida ultrices erat. Nullam eget dignissim mauris, non tristique erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
          </div>
        <div class="row center">
          <a href="HackPrep.html" class="btn-large waves-effect waves-light green lighten-1" >HackPrep</a>
          <span class="divider2"/>
          <a href="Hackathons.html" class="btn-large waves-effect waves-light green lighten-1">Hackathons</a>
        </div>
      </div>
    </div>
  </div>

看起来像这样：

enter image description here

如何让它看起来远离模型？ （忽略字体颜色和大小）

1 个答案:

答案 0 :(得分：0)

以完整页面模式运行以下代码段。

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet"/>
<div class="index-banner color2">
    <div class="section">
      <div class="row">
        <div class="col l8 s12 center">
          <h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
            <p class="left-align light ">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque id nunc nec volutpat. Etiam pellentesque tristique arcu, non consequat magna fermentum ac. Cras ut ultricies eros. Maecenas eros justo, ullamcorper a s;</p>
          
        <div class="row center">
          <a href="HackPrep.html" class="btn-large waves-effect waves-light green lighten-1" >HackPrep</a>
          <span class="divider2"/>
          <a href="Hackathons.html" class="btn-large waves-effect waves-light green lighten-1">Hackathons</a>
        </div>
        </div>
        <div class="col l4 s12 center"><img src="https://dummyimage.com/200x200/000/fff" class="circle">
        </div>
      </div>
    </div>
  </div>

相关问题
最新问题