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>

添加背景图像

.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的更多相关文章

  1. 6.定制10MINS首页1

    原始代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...

  2. 8 定制10MINs 3

    1. <div class="ui inverted red basic segment"> <h3 class="ui header"> ...

  3. Python自学日志_2017/9/05

    9月5日今天早晨学习了网易云课程<Python做Web工程师课程>提前预习课程<学会开发静态网页>.轻松的完成了第五节课的两个实战作业--感觉自己这几天的功夫没有白费,总算学会 ...

  4. SpringBoot第四集:静态资源与首页定(2020最新最易懂)

    SpringBoot第四集:静态资源与首页定(2020最新最易懂) 问题 SpringBoot构建的项目结构如下:没有webapp目录,没有WEB-INF等目录,那么如果开发web项目,项目资源放在那 ...

  5. “全能”选手—Django 1.10文档中文版Part3

    Django 1.10官方文档的入门教程已经翻译完毕,后续的部分将不会按照顺序进行翻译,而是挑重点的先翻译. 有兴趣的可以关注我的博客. 第一部分传送门 第二部分传送门 第四部分传送门 3.2 模型和 ...

  6. mediawiki 的使用

    首先,程序里会先加载 includes/DefaultSettings.php,然后再加载 LocalSettings.php,这样定义一些权限.其中 DefaultSettings.php 是默认的 ...

  7. Part 7:自定义admin站点--Django从入门到精通系列教程

    该系列教程系个人原创,并完整发布在个人官网刘江的博客和教程 所有转载本文者,需在顶部显著位置注明原作者及www.liujiangblog.com官网地址. Python及Django学习QQ群:453 ...

  8. Django学习笔记(2)——模型,后台管理和视图的学习

    一:Web投票示例 本节我们首先从全局范围再复习一下Django的概念,让自己对Django的设计理念, 功能模块,体系架构,基本用法有初步的印象. Django初始的详细博客内容:请点击我 该应用包 ...

  9. 第一个Django应用

    Django教程:http://www.liujiangblog.com/course/django/2 第一个Django应用 该应用包括以下两个部分: 一个可以让公众用户进行投票和查看投票结果的站 ...

随机推荐

  1. 【原创】SQL SERVER 2012安装配置说明(多图详解)

    1. 优先安装软件 1. net framework3.5. 2. 在安装SQL SERVER 2012前需要3.5的支持.在WIN 2012系统可以在系统管理的添加角色和功能中安装,如下将[.NET ...

  2. 西门子(SIEMENS)软件安装时需要重启的解决方法,regedit restart

    打开注册表(regedit) 删除注册表项 HKEY_LOCAL_MACHINE\System\CurrentControlSet\Control\Session Manage\PendingFile ...

  3. April 27 2017 Week 17 Thursday

    Had I not seen the sun, I could have borne the shade. 我本可以忍受黑暗,如果我不曾见过阳光. A poem by Emily Dickinson, ...

  4. April 3 2017 Week 14 Monday

    Don't worry about finding your soul mate. Find yourself. 欲寻佳侣,先觅本心. You may fail to find your soul m ...

  5. *521. Longest Uncommon Subsequence I (bit manipulation 2^n)

    Given a group of two strings, you need to find the longest uncommon subsequence of this group of two ...

  6. 解决Zend加密的PHP页面出现Incompatible file format的问题

    错误如图: 致命错误:不兼容的文件格式可能的原因: 1.文件本身加密的问题,很有可能你用的Zend进行加密了,但是因为版本的问题,很有可能是你的主机上的Zend Optimizer版本太低了.2.文件 ...

  7. percona-toolkit 工具集安装

    下载地址: www.percona.com/downloads/percona-toolkit     安装方法一,源码安装: perl Makefile.PL make:make install   ...

  8. vue.js 错误提示bash: vue: command not found

    在使用 vue init webpack vue-demo 进行demo的下载时,提示vue: command not found,原因是环境变量没有进行配置,所以会出现这个问题,解决办法 找到你安装 ...

  9. 进程—内存描述符(mm_struct)

    http://blog.csdn.net/qq_26768741/article/details/54375524 前言 上一篇我们谈论了task_struct这个结构体,它被叫做进程描述符,内部成员 ...

  10. C. Tanya and Toys_模拟

    C. Tanya and Toys time limit per test 1 second memory limit per test 256 megabytes input standard in ...