8 定制10MINs 3
1.
<div class="ui inverted red basic segment">
<h3 class="ui header">
呈现给您最简洁有趣的知识是我们认为最有趣的事情</h3>
</div>
<h3 class="ui center aligned header">
呈现给您最简洁有趣的知识是我们认为最有趣的事情</h3>
2.
<div class="ui inverted red basic segment">
<h3 class="ui header">
呈现给您最简洁有趣的知识是我们认为最有趣的事情</h3> <div class="ui grid">
<div class="four wide column">
<div class="ui circular inverted segment"> </div>
</div>
</div> </div>
3.
<div class="four wide column">
<div class="ui circular inverted segment">
<i class="icon red circular star"></i>
<h4 class="ui header">首席执行官</h4>
<p class="sub header">alex</p>
</div>
</div>
4.
<div class="ui inverted red basic segment people-say">
<h3 class="ui header">
呈现给您最简洁有趣的知识是我们认为最有趣的事情</h3>
.ui.inverted.red.basic.segment.people-say{
background: url('images/people-say.png');
background-size: cover;
background-repeat: no-repeat;
}
5.
<div class="ui circular inverted segment">
<i class="icon red circular star"></i>
<h4 class="ui header">首席执行官</h4>
<p class="sub header">alex</p>
</div>
</div>
.ui.circular.inverted.segment{
background: url('images/profile.png');
background-size: cover;
background-repeat: no-repeat;
}
6.没有反应。检查bug
.ui.circular.inverted.segment > .ui.header {
position: absolute;
}
没有反应。检查bug
<h4 class="ui header">首席执行官CHO
<p class="sub header">alex</p>
</h4>
7.
<div class="ui circular inverted segment">
<i class="icon red circular star"></i>
<h4 class="ui header ">
首席执行官CHO
<p class="sub header">alex</p>
</h4>
</div>
.ui.circular.inverted.segment > .ui.header{
position: absolute;
}
8.
.ui.circular.inverted.segment > .ui.header{
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
}
.ui.circular.inverted.segment > .ui.header{
position: absolute;
top: 110%;
left:50%;
transform: translate(-50%,-50%);
}
.ui.circular.inverted.segment > .ui.header{
position: absolute;
top: 110%;
left:50%;
transform: translate(-50%,-50%);
width: 200px;
}
<h4 class="ui inverted header ">
首席执行官CHO
<p class="sub header">alex</p>
.ui.circular.inverted.segment > .ui.inverted.header{
position: absolute;
top: 110%;
left:50%;
transform: translate(-50%,-50%);
width: 200px;
}
9.
<i class="icon red inverted circular star"></i>
10
.icon.red.inverted.circular.star{
position: absolute;
left:100%;
top:100%;
transform:translate(-100%,-100%);
}
.four.wide.column{
position: relative;
}
.ui.circular.inverted.segment{
background: url('images/profile.png');
background-size: cover;
background-repeat: no-repeat;
width: 120px;
height: 120px;
position: absolute;
left: 50%;
transform: translate(-50%,-50%);
}
.ui.inverted.red.basic.segment.people-say > .ui.grid{
position: relative;
top:50%;
transform: translate(0,-50%);
}
.ui.center.aligned.header{
position: relative;
top: 20%;
transform: translate(0,-50%);
}
<button type="button" name="button" class="ui red circular inverted button">成为讲师</button>
.ui.inverted.red.basic.segment.people-say > .ui.grid{
position: relative;
top:50%;
transform: translate(0,-50%);
}
<button type="button" name="button" class="ui red circular inverted button">成为讲师</button>
.ui.inverted.red.basic.segment.people-say > .ui.red.circular.button{
position: absolute;
top: 100%;
left:50%;
transform: translate(-50%,-50%);
background: white;
}
.ui.inverted.red.basic.segment.people-say{
height: 450px;
background: url('images/people-say.png');
background-size: cover;
background-repeat: no-repeat;
margin-bottom: 200px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>10Mins</title>
<link rel="stylesheet" href="css/semantic.css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="custom.css" media="screen" title="no title" charset="utf-8">
</head>
<body> <div class="ui vertical basic segment masterheader"> <div class="ui inverted menu text"> <div class="ui image">
<img src="data:images/tenlogo.png" alt="" />
</div> <div class="right menu">
<div class="item">
<button type="button" name="button" class="ui inverted circular button">Login</button>
</div>
</div> </div> <h1 class="ui center inverted aligned header masterslogan">
让你的生活不再无趣发现新意
<p class="sub header">
一个简洁、实用的技能学习平台
</p>
<button type="button" name="button" class="ui red circular button">注册一个</button>
</h1> </div> <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>
<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>
<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>
<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>
<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>
<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>
<i class="icon unhide"></i>
</span>
</div>
</div> </div> </div> <div class="ui inverted red basic segment people-say">
<h3 class="ui center aligned header">
呈现给您最简洁有趣的知识是我们认为最有趣的事情</h3> <div class="ui grid"> <div class="four wide column">
<div class="ui circular inverted segment">
<i class="icon red inverted circular star"></i>
<h4 class="ui inverted header ">
首席执行官CHO
<p class="sub header">alex</p>
</h4>
</div>
</div> <div class="four wide column">
<div class="ui circular inverted segment">
<i class="icon red inverted circular star"></i>
<h4 class="ui inverted header ">
首席执行官CHO
<p class="sub header">alex</p>
</h4>
</div>
</div> <div class="four wide column">
<div class="ui circular inverted segment">
<i class="icon red inverted circular star"></i>
<h4 class="ui inverted header ">
首席执行官CHO
<p class="sub header">alex</p>
</h4>
</div>
</div> <div class="four wide column">
<div class="ui circular inverted segment">
<i class="icon red inverted circular star"></i>
<h4 class="ui inverted header ">
首席执行官CHO
<p class="sub header">alex</p>
</h4>
</div>
</div> </div>
<button type="button" name="button" class="ui red circular inverted button">成为讲师</button>
</div> <div class="ui vertical very padded red segment"> <div class="ui grid"> <div class="four wide column">
<div class="ui images">
<img src="data:images/ten_red_logo.png" alt="" />
</div>
</div> <div class="four wide column">
<div class="ui vertical text menu">
<div class="item">
<h3 class="ui header">Company</h3>
</div>
<div class="item">Tel:010-666666</div>
<div class="item">Adr:CN</div>
<div class="item">Fax:010-6666</div>
</div>
</div> <div class="four wide column">
<div class="ui vertical text menu">
<div class="item">
<h3 class="ui header">Company</h3>
</div>
<div class="item">Tel:010-666666</div>
<div class="item">Adr:CN</div>
<div class="item">Fax:010-6666</div>
</div>
</div> <div class="four wide column">
<div class="ui vertical text menu">
<div class="item">
Designed by venicid
</div>
<div class="item">
<h3 class="ui header logo">Muguacoding</h3>
</div>
</div>
</div> </div>
</div>
</div> </body>
</html>
.ui.vertical.basic.segment.masterheader{
height: 700px;
background: url('images/banner.png');
background-size: cover;
background-repeat: no-repeat;
padding-left: 40px;
padding-right: 40px;
}
.ui.center.inverted.aligned.header.masterslogan{
font-size: 50px;
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
}
.ui.red.circular.button{
width: 220px;
}
.ui.header.logo{
font-size: 30px;
color: rgb(128, 131, 136)
}
.ui.inverted.segment.card-view{
height: 220px;
}
.ui.basic.segment.recommended > .ui.center.aligned.header{
font-size: 50px;
color: rgb(137, 132, 138);
margin-top: 40px;
margin-bottom: 40px;
}
.ui.header.title{
margin-bottom: 100px;
}
.ui.inverted.red.basic.segment.people-say{
height: 450px;
background: url('images/people-say.png');
background-size: cover;
background-repeat: no-repeat;
margin-bottom: 200px;
}
.ui.center.aligned.header{
position: relative;
top: 20%;
transform: translate(0,-50%);
}
.ui.inverted.red.basic.segment.people-say > .ui.grid{
position: relative;
top:50%;
transform: translate(0,-50%);
}
.four.wide.column{
position: relative;
}
.ui.circular.inverted.segment{
background: url('images/profile.png');
background-size: cover;
background-repeat: no-repeat;
width: 120px;
height: 120px;
position: absolute;
left: 50%;
transform: translate(-50%,-50%);
}
.ui.circular.inverted.segment > .ui.inverted.header{
position: absolute;
top: 110%;
left:50%;
transform: translate(-50%,-50%);
width: 200px;
}
.icon.red.inverted.circular.star{
position: absolute;
left:100%;
top:100%;
transform:translate(-100%,-100%);
}
.ui.inverted.red.basic.segment.people-say > .ui.red.circular.button{
position: absolute;
top: 100%;
left:50%;
transform: translate(-50%,-50%);
background: white;
}
8 定制10MINs 3的更多相关文章
- 6.定制10MINS首页1
原始代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...
- 7 定制10MINs首页2
1.添加 <div class="ui basic segment"> <h1 class="ui center aligned header" ...
- Python自学日志_2017/9/05
9月5日今天早晨学习了网易云课程<Python做Web工程师课程>提前预习课程<学会开发静态网页>.轻松的完成了第五节课的两个实战作业--感觉自己这几天的功夫没有白费,总算学会 ...
- ASP.NET Core应用的错误处理[3]：ExceptionHandlerMiddleware中间件如何呈现“定制化错误页面”
DeveloperExceptionPageMiddleware中间件利用呈现出来的错误页面实现抛出异常和当前请求的详细信息以辅助开发人员更好地进行纠错诊断工作,而ExceptionHandlerMi ...
- Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程（柱状图，南丁格尔图）
Webstorm+Webpack+echarts ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...
- 标准产品+定制开发:专注打造企业OA、智慧政务云平台——山东森普软件，交付率最高的技术型软件公司
一.公司简介山东森普信息技术有限公司(以下简称森普软件)是一家专门致力于移动互联网产品.企业管理软件定制开发的技术型企业.公司总部设在全国五大软件园之一的济南齐鲁软件园.森普SimPro是由Simpl ...
- Gradle 实现 Android 多渠道定制化打包
Gradle 实现 Android 多渠道定制化打包 版权声明:本文为博主原创文章,未经博主允许不得转载. 最近在项目中遇到需要实现 Apk 多渠道.定制化打包, Google .百度查找了一些资料, ...
- Xamarin+Prism小试牛刀：定制跨平台Outlook邮箱应用(后续)
在[Xamarin+Prism小试牛刀:定制跨平台Outlook邮箱应用]里面提到了Microsoft 身份认证,其实这也是一大块需要注意的地方,特作为后续补充这些知识点.上章是使用了Microsof ...
- Django admin定制化，User字段扩展[原创]
前言 参考上篇博文,我们利用了OneToOneField的方式使用了django自带的user,http://www.cnblogs.com/caseast/p/5909248.html , 但这么用 ...
随机推荐
- 最小正子序列（序列之和最小，同时满足和值要最小）(数据结构与算法分析——C语言描述第二章习题2.12第二问)
#include "stdio.h" #include "stdlib.h" #define random(x) (rand()%x) void creat_a ...
- python模块详解 shelve
shelve模块是一个简单的k,v 将内存数据通过文件持久化的模块,可以持久化任何pickle可以支持的python数据.简单的说对 pickle的更上一层的封装. 写文件 import shelve ...
- 如何提升SharePoint 2010的性能
文章来自: http://www.chinaemail.com.cn/server/xtfl/Exchange/201109/66466.html SharePoint是微软历史上销售量增长最快的产品 ...
- CKEditor插件开发
以前做过一个教育项目,是有关在线考试的.其中对编辑器CKEditor做了扩充,增加了插入客观题.主观题.选择题和判断题的功能.这里记述下CKEditor插件开发的过程. CKEditor以前叫FCKE ...
- Azure 3月新公布（二）
Azure 3月新发布:HDInsight 的 Apache Hadoop 以及 ExpressRoute 超高性能网关层正式发布,SQL Database Premium RS 层发布公共预览版 A ...
- 笨办法学Python（七）
习题 7: 更多打印 现在我们将做一批练习,在练习的过程中你需要键入代码,并且让它们运行起来.我不会解释太多,因为这节的内容都是以前熟悉过的.这节练习的目的是巩固你学到的东西.我们几个练习后再见.不要 ...
- Git-实验报告
“Git 实战教程”实验报告 基本用法(下) 二.比较内容 1.比较提交 - Git Diff git diff命令的作用是比较修改的或提交的文件内容. 如何查看缓存区内与上次提交之间的差别呢?需要使 ...
- S/4HANA和CRM Fiori应用的搜索分页实现
在我的博客Paging Implementation in S/4HANA for Customer Management 我介绍了S/4HANA for Customer Management里采用 ...
- OpenGL进阶演示样例1——动态画线（虚线、实线、颜色、速度等）
用OpenGL动态绘制线段.事实上非常easy,但到如今为止.网上可參考资料并不多. 于是亲自己主动手写一个函数,方便动态绘制线段.代码例如以下: #include<GL/glu ...
- 网格中的BFS，逆向(POJ2049)
题目链接:http://poj.org/problem?id=2049 解题报告: 网格中的BFS,最主要的是边界问题. 1.这里在左右,上下两个方向上,分别判断墙,和门,细节是,向上有t个墙,for ...