7 定制10MINs首页2

于 2017-12-20 16:09:00 发布
阅读量70 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： ui
原文链接：http://www.cnblogs.com/venicid/p/8074315.html
本文介绍了一种使用HTML和CSS实现的三栏式布局方法，包括如何设置背景图片、使用不同标签如div、h3等进行页面元素组织，并通过样式调整达到美观效果。

1.添加

    <div class="ui basic segment">
      <h1 class="ui center aligned header">十分钟学会一门技能?</h1>
    </div>

 

2

      <div class="ui three column grid">
        <div class="column">
          <div class="ui inverted segment">
          </div>
        </div>

        <div class="column">
          <div class="ui inverted segment">
          </div>
        </div>

        <div class="column">
          <div class="ui inverted segment">
          </div>
        </div>

      </div>

　　

分3栏

      <div class="ui three column grid">
        <div class="column">

　　

3.

　　

 

 

线

  <div class="ui divider"></div>

　　

label

  <div class="ui label">
              40%get√
  </div>

　

          <div class="ui red circular label">
              40%get√
            </div>

　　

图标

<i class="icon unhide"></i>

　　

 

span标签

            <span>
              10
              <i class="icon unhide"></i>
            </span>

　　

单栏目

        <div class="column">
          <div class="ui inverted segment">
            <h3>Title's here</h3>
            <h4>Username</h4>
            <div class="ui divider"></div>
            <div class="ui red circular label">
              40%get√
            </div>
            <span>
              10
              <i class="icon unhide"></i>
            </span>

          </div>
        </div>

 

 

 

<div class="ui three column grid">
        <div class="column">
          
          <div class="ui inverted segment">
            <h3>Title's here</h3>
            <h4>Username</h4>
            <div class="ui divider"></div>
            <div class="ui red circular label">
              40%get√
            </div>
            <span>
              10
              <i class="icon unhide"></i>
            </span>
          </div>
          
        </div>

        <div class="column">
          
          <div class="ui inverted segment">
            <h3>Title's here</h3>
            <h4>Username</h4>
            <div class="ui divider"></div>
            <div class="ui red circular label">
              40%get√
            </div>
            <span>
              10
              <i class="icon unhide"></i>
            </span>
          </div>
          
        </div>


        <div class="column">
          
          <div class="ui inverted segment">
            <h3>Title's here</h3>
            <h4>Username</h4>
            <div class="ui divider"></div>
            <div class="ui red circular label">
              40%get√
            </div>
            <span>
              10
              <i class="icon unhide"></i>
            </span>
          </div>
          
        </div>

      </div>
View Code

 

 

 添加背景图像

.ui.inverted.segment.card-view{
  height: 220px;
  background: url('images/1.jpg');
  background-size: cover;
  background-repeat: no-repeat;
}

　　

 

style样式

　　　　

　　　　 

 

        <div class="column">
          <div class="ui inverted segment card-view" style="background: url('images/2.jpg');background-size: cover;background-repeat: no-repeat;">
            <h3>Title's here</h3>
            <h4>Username</h4>
            <div class="ui divider"></div>
            <div class="ui red circular label">
              40%get√
            </div>
            <span>
              10
              <i class="icon unhide"></i>
            </span>
          </div>
        </div>

　　

.ui.inverted.segment.card-view{
  height: 220px;
}

　　

 

css样式

 

 

    <div class="ui basic segment recommended">
      <h1 class="ui center aligned header">十分钟学会一门技能?</h1>

　　

.ui.basic.segment.recommended > .ui.center.aligned.header{
  font-size: 50px;
  color: rgb(137, 132, 138);
  margin-top: 40px;
  margin-bottom: 40px;
}

　　

　　　　

 

 

  <h3 class="ui header title">Title's here</h3>

 

.ui.header.title{
  margin-bottom: 100px;
}

　　

 

<div class="ui basic segment recommended">
      <h1 class="ui center aligned header">十分钟学会一门技能?</h1>

      <div class="ui three column grid">
        <div class="column">

          <div class="ui inverted segment card-view" style="background: url('images/1.jpg');background-size: cover;background-repeat: no-repeat;">

            <h3 class="ui header title">Title's here</h3>
            <h4>Username</h4>
            <div class="ui divider"></div>
            <div class="ui red circular label">
              40%get√
            </div>
            <span>
              10
              <i class="icon unhide"></i>
            </span>

          </div>

        </div>

        <div class="column">
          <div class="ui inverted segment card-view" style="background: url('images/2.jpg');background-size: cover;background-repeat: no-repeat;">
            <h3 class="ui header title">Title's here</h3>
            <h4 class="ui header">Username</h4>
            <div class="ui divider"></div>
            <div class="ui red circular label">
              40%get√
            </div>
            <span>
              10
              <i class="icon unhide"></i>
            </span>
          </div>
        </div>


        <div class="column">
          <div class="ui inverted segment card-view" style="background: url('images/3.jpg');background-size: cover;background-repeat: no-repeat;">
            <h3 class="ui header title">Title's here</h3>
            <h4>Username</h4>
            <div class="ui divider"></div>
            <div class="ui red circular label">
              40%get√
            </div>
            <span>
              10
              <i class="icon unhide"></i>
            </span>
          </div>
        </div>

      </div>

      <div class="ui three column grid">
        <div class="column">

          <div class="ui inverted segment card-view" style="background: url('images/4.jpg');background-size: cover;background-repeat: no-repeat;">

            <h3 class="ui header title">Title's here</h3>
            <h4>Username</h4>
            <div class="ui divider"></div>
            <div class="ui red circular label">
              40%get√
            </div>
            <span>
              10
              <i class="icon unhide"></i>
            </span>

          </div>

        </div>

        <div class="column">
          <div class="ui inverted segment card-view" style="background: url('images/5.jpg');background-size: cover;background-repeat: no-repeat;">
            <h3 class="ui header title">Title's here</h3>
            <h4 class="ui header">Username</h4>
            <div class="ui divider"></div>
            <div class="ui red circular label">
              40%get√
            </div>
            <span>
              10
              <i class="icon unhide"></i>
            </span>
          </div>
        </div>


        <div class="column">
          <div class="ui inverted segment card-view" style="background: url('images/6.jpg');background-size: cover;background-repeat: no-repeat;">
            <h3 class="ui header title">Title's here</h3>
            <h4>Username</h4>
            <div class="ui divider"></div>
            <div class="ui red circular label">
              40%get√
            </div>
            <span>
              10
              <i class="icon unhide"></i>
            </span>
          </div>
        </div>

      </div>

    </div>
View Code

 

 

转载于:https://www.cnblogs.com/venicid/p/8074315.html

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值