7 定制10MINs首页2

1.添加

    <div class="ui basic segment">

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

    </div>

      <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">

线

  <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>

添加背景图像

.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>

7 定制10MINs首页2的更多相关文章

6.定制10MINS首页1
原始代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...
8 定制10MINs 3
1. <div class="ui inverted red basic segment"> <h3 class="ui header"> ...
Python自学日志_2017/9/05
9月5日今天早晨学习了网易云课程<Python做Web工程师课程>提前预习课程<学会开发静态网页>.轻松的完成了第五节课的两个实战作业--感觉自己这几天的功夫没有白费,总算学会 ...
SpringBoot第四集：静态资源与首页定（2020最新最易懂）
SpringBoot第四集:静态资源与首页定(2020最新最易懂) 问题 SpringBoot构建的项目结构如下:没有webapp目录,没有WEB-INF等目录,那么如果开发web项目,项目资源放在那 ...
“全能”选手—Django 1.10文档中文版Part3
Django 1.10官方文档的入门教程已经翻译完毕,后续的部分将不会按照顺序进行翻译,而是挑重点的先翻译. 有兴趣的可以关注我的博客. 第一部分传送门第二部分传送门第四部分传送门 3.2 模型和 ...
mediawiki 的使用
首先,程序里会先加载 includes/DefaultSettings.php,然后再加载 LocalSettings.php,这样定义一些权限.其中 DefaultSettings.php 是默认的 ...
Part 7：自定义admin站点--Django从入门到精通系列教程
该系列教程系个人原创,并完整发布在个人官网刘江的博客和教程所有转载本文者,需在顶部显著位置注明原作者及www.liujiangblog.com官网地址. Python及Django学习QQ群:453 ...
Django学习笔记（2）——模型，后台管理和视图的学习
一:Web投票示例本节我们首先从全局范围再复习一下Django的概念,让自己对Django的设计理念, 功能模块,体系架构,基本用法有初步的印象. Django初始的详细博客内容:请点击我该应用包 ...
第一个Django应用
Django教程:http://www.liujiangblog.com/course/django/2 第一个Django应用该应用包括以下两个部分: 一个可以让公众用户进行投票和查看投票结果的站 ...

随机推荐

KinSlideshow焦点图轮播插件
KinSlideshow默认设置效果代码: *焦点图显示的标题为 img 中 alt 属性中的文字 *当只有一张图片时不显示按钮,但也会有无缝切换效果 * jquery ..以上版本 jvascrip ...
关于form的action路径填写
一:可以是相对路径: 1.action="<%=request.getContextPath() %>/html/index.html" <%=request. ...
zabbix web端有数据但是没有图形
zabbix web端有数据但是没有图形我遇到的情况是,在配置 zabbix 网站目录时,修改了zabbix 目录的所有者和所属组,以使得 zabbix/conf/zabbix.conf.php 文 ...
带来全新的网络格局---html5
自从HTML5诞生之后,就是开始建立了一个标准的原则,那就是所有的技术它必须是面向开放,并不能有专利的一个存在,在整个期间Opera捐献了css技术,而google的话则是给开发者提供了视频的webM ...
西门子 SINAMICS S120 Web server 用户名和默认密码
sinamics web server可以通过浏览器查看驱动器故障等信息,是一个比较方便的辅助工具. 1. 一般用户 SINAMICS 密码无 2. 管理员 Administrator 密码 Adm ...
如何用代码填充S/4HANA销售订单行项目的数量字段
我的任务是用代码生成S/4HANA销售订单(Sales Order)的行项目,并且填充对应的quantity(数量)值. 最开始我用了下面的代码,把quantity的值写入item字段target_q ...
腾讯CodeStar第二季前端突击队腐蚀的画解法步骤笔记
所有题目地址:http://codestar.alloyteam.com/q2 本题内容:http://www.cnblogs.com/yedeying/p/3617593.html 腐蚀的画涉及到的 ...
POJ-2377 Bad Cowtractors---最大生成树
题目链接: https://vjudge.net/problem/POJ-2377 题目大意: 给一个图,求最大生成树权值,如果不连通输出-1 思路: kruskal算法变形,sort按边从大到小排序 ...
CKEditor4x word导入不保存格式的解决方案
后台上传文档时,目前功能都通过word直接复制黏贴实现,之前和word控件朋友一起测试找个问题,原始代码CK4.X没有找个问题. 第一时间排查config.js的配置发现端倪,测试解决! 由于配合ck ...
javaweb基础(39)_数据库连接池
一.应用程序直接获取数据库连接的缺点用户每次请求都需要向数据库获得链接,而数据库创建连接通常需要消耗相对较大的资源,创建时间也较长.假设网站一天10万访问量,数据库服务器就需要创建10万次连接,极大 ...

7 定制10MINs首页2

7 定制10MINs首页2的更多相关文章

随机推荐

热门专题