7 定制10MINs首页2
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的更多相关文章
- 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应用 该应用包括以下两个部分: 一个可以让公众用户进行投票和查看投票结果的站 ...
随机推荐
- nginx的安装及简单负载均衡配置
Nginx 是一个很强大的高性能Web和反向代理服务器,它具有很多非常优越的特性.本人目前所在公司也使用nginx,主要用来做负载均衡服务器.同时也可以作为邮件代理服务器. 1. nginx的安装.本 ...
- ffmpeg：编解码过程，基本用法
1 术语: 什么是影片?其实就是一组(很多张)图片,时间间隔很小的连续展示出来,人们就觉得画面中的人物在动,这就是影片.那电影的实质就是N多张图片的集合.那 每张图片和帧又有什么关系呢?事实上,如果 ...
- AFNetworking 使用总结 （用法+JSON解析
AFNetwork是一个轻量级的网络请求api类库.是以NSURLConnection, NSOperation和其他方法为基础的. 下面这个例子是用来处理json请求的: NSURL *url = ...
- 2.NBU管理NetBackup
2管理NetBackup2.1NetBackup作业任务监视 NetBackup任务监视器可以监视备份.恢复和归档任务的状态,也可以监视NetBackup本身数据库的备份. 2.1.1Activity ...
- 通过WEB网管登录
6.1 通过WEB网管登录简介 S5100-SI/EI系列以太网交换机提供内置的WEB Server,用户可以通过WEB网管终端(PC)登录到交换机上,利用内置的WEB Server以WEB方式直观 ...
- python读取mat文件
一.mat文件 mat数据格式是Matlab的数据存储的标准格式.在Matlab中主要使用load()函数导入一个mat文件,使用save()函数保存一个mat文件.对于文件 load('data.m ...
- MySQL游标(cursor) 定义及使用
概念 游标(Cursor)它使用户可逐行访问由SQL Server返回的结果集. 使用游标(cursor)的一个主要的原因就是把集合操作转换成单个记录处理方式. 用SQL语言从数据库中检索数据后,结果 ...
- 关于Ubuntu 16.04 pip安装Docker-Compose
$ sudo apt-get update 安装pip: $ sudo apt-get install python-pip 卸载旧版本docker-compose: $ sudo pip unins ...
- 谈谈对bug的一点想法，说说做好日志记录的重要性
说起程序猿,总绕不开的一个话题就是bug,估计每个程序猿听到某某测试跑过来一脸淫笑的告诉你这个功能有个bug的时候,总有种恨不得掐死他的想法.其实程序猿跟bug的关系,感觉有点像父亲和儿子的关系,自己 ...
- LNMP+HAProxy+Keepalived负载均衡 - LNMP基础环境准备
环境版本说明: 服务器系统:CentOS 7.5: ``` cat /etc/redhat-release CentOS Linux release 7.5.1804 (Core) # 输出结果 `` ...