1.

  1.     <div class="ui inverted red basic segment">
  2.       <h3 class="ui header">
  3.         呈现给您最简洁有趣的知识是我们认为最有趣的事情</h3>
  4.     </div>

　　

  1.       <h3 class="ui center aligned header">
  2.         呈现给您最简洁有趣的知识是我们认为最有趣的事情</h3>

　　

2.

  1.     <div class="ui inverted red basic segment">
  2.       <h3 class="ui header">
  3.         呈现给您最简洁有趣的知识是我们认为最有趣的事情</h3>
  4.  
  5.         <div class="ui grid">
  6.           <div class="four wide column">
  7.             <div class="ui circular inverted segment">
  8.  
  9.             </div>
  10.           </div>
  11.         </div>
  12.  
  13.     </div>

　　

3.

  1.           <div class="four wide column">
  2.             <div class="ui circular inverted segment">
  3.               <i class="icon red circular star"></i>
  4.               <h4 class="ui header">首席执行官</h4>
  5.               <p class="sub header">alex</p>
  6.             </div>
  7.           </div>

　　

4.

  1.     <div class="ui inverted red basic segment people-say">
  2.       <h3 class="ui header">
  3.         呈现给您最简洁有趣的知识是我们认为最有趣的事情</h3>
  1. .ui.inverted.red.basic.segment.people-say{
  2.     background: url('images/people-say.png');
  3.     background-size: cover;
  4.     background-repeat: no-repeat;
  5. }

5.

  1.             <div class="ui circular inverted segment">
  2.               <i class="icon red circular star"></i>
  3.               <h4 class="ui header">首席执行官</h4>
  4.               <p class="sub header">alex</p>
  5.             </div>
  6.           </div>

　　

  1. .ui.circular.inverted.segment{
  2.   background: url('images/profile.png');
  3.   background-size: cover;
  4.   background-repeat: no-repeat;
  5. }

　　

6.没有反应。检查bug

  1. .ui.circular.inverted.segment >　.ui.header {
  2.   position: absolute;
  3. }

　　没有反应。检查bug

  1.               <h4 class="ui header">首席执行官CHO
  2.                 <p class="sub header">alex</p>
  3.               </h4>

　　

7.

  1.             <div class="ui circular inverted segment">
  2.               <i class="icon red circular star"></i>
  3.               <h4 class="ui header ">
  4.                 首席执行官CHO
  5.                 <p class="sub header">alex</p>
  6.               </h4>
  7.             </div>

　　

  1. .ui.circular.inverted.segment > .ui.header{
  2.   position: absolute;
  3. }

　　

8.

  1. .ui.circular.inverted.segment > .ui.header{
  2.   position: absolute;
  3.   top: 50%;
  4.   left:50%;
  5.   transform: translate(-50%,-50%);
  6. }

　　

  1. .ui.circular.inverted.segment > .ui.header{
  2.   position: absolute;
  3.   top: 110%;
  4.   left:50%;
  5.   transform: translate(-50%,-50%);
  6. }

　　

  1. .ui.circular.inverted.segment > .ui.header{
  2.   position: absolute;
  3.   top: 110%;
  4.   left:50%;
  5.   transform: translate(-50%,-50%);
  6.   width: 200px;
  7. }

　　

  1.               <h4 class="ui inverted header ">
  2.                 首席执行官CHO
  3.                 <p class="sub header">alex</p>

　　

  1. .ui.circular.inverted.segment > .ui.inverted.header{
  2.   position: absolute;
  3.   top: 110%;
  4.   left:50%;
  5.   transform: translate(-50%,-50%);
  6.   width: 200px;
  7. }

　　

9.

  1.         <i class="icon red inverted circular star"></i>

　　

10

  1. .icon.red.inverted.circular.star{
  2.   position: absolute;
  3.   left:100%;
  4.   top:100%;
  5.   transform:translate(-100%,-100%);
  6. }

　　

  1. .four.wide.column{
  2.   position: relative;
  3. }

　　

  1. .ui.circular.inverted.segment{
  2.   background: url('images/profile.png');
  3.   background-size: cover;
  4.   background-repeat: no-repeat;
  5.   width: 120px;
  6.   height: 120px;
  7.   position: absolute;
  8.   left: 50%;
  9.   transform: translate(-50%,-50%);
  10. }

　　

  1. .ui.inverted.red.basic.segment.people-say > .ui.grid{
  2.   position: relative;
  3.   top:50%;
  4.   transform: translate(0,-50%);
  5. }

　　

  1. .ui.center.aligned.header{
  2.   position: relative;
  3.   top: 20%;
  4.   transform: translate(0,-50%);
  5. }

  1.         <button type="button" name="button" class="ui red circular inverted button">成为讲师</button>

　　

  1. .ui.inverted.red.basic.segment.people-say > .ui.grid{
  2.   position: relative;
  3.   top:50%;
  4.   transform: translate(0,-50%);
  5. }

　　

  1.         <button type="button" name="button" class="ui red circular inverted button">成为讲师</button>

　　

  1. .ui.inverted.red.basic.segment.people-say > .ui.red.circular.button{
  2.   position: absolute;
  3.   top: 100%;
  4.   left:50%;
  5.   transform: translate(-50%,-50%);
  6.   background: white;
  7. }

　　

　　

  1. .ui.inverted.red.basic.segment.people-say{
  2.     height: 450px;
  3.     background: url('images/people-say.png');
  4.     background-size: cover;
  5.     background-repeat: no-repeat;
  6.     margin-bottom: 200px;
  7. }

　　

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title>10Mins</title>
  6.     <link rel="stylesheet" href="css/semantic.css" media="screen" title="no title" charset="utf-8">
  7.     <link rel="stylesheet" href="custom.css" media="screen" title="no title" charset="utf-8">
  8.   </head>
  9.   <body>
  10.  
  11.     <div class="ui vertical basic segment masterheader">
  12.  
  13.       <div class="ui inverted menu text">
  14.  
  15.         <div class="ui image">
  16.           <img src="data:images/tenlogo.png" alt="" />
  17.         </div>
  18.  
  19.         <div class="right menu">
  20.           <div class="item">
  21.             <button type="button" name="button" class="ui inverted circular button">Login</button>
  22.           </div>
  23.         </div>
  24.  
  25.       </div>
  26.  
  27.       <h1 class="ui center inverted aligned header masterslogan">
  28.         让你的生活不再无趣发现新意
  29.       <p class="sub header">
  30.         一个简洁、实用的技能学习平台
  31.       </p>
  32.       <button type="button" name="button" class="ui red circular button">注册一个</button>
  33.       </h1>
  34.  
  35.     </div>
  36.  
  37.     <div class="ui basic segment recommended">
  38.       <h1 class="ui center aligned header">十分钟学会一门技能?</h1>
  39.  
  40.       <div class="ui three column grid">
  41.         <div class="column">
  42.  
  43.           <div class="ui inverted segment card-view" style="background: url('images/1.jpg');background-size: cover;background-repeat: no-repeat;">
  44.  
  45.             <h3 class="ui header title">Title's here</h3>
  46.             <h4>Username</h4>
  47.             <div class="ui divider"></div>
  48.             <div class="ui red circular label">
  49.               40%get√
  50.             </div>
  51.             <span>
  52.               <i class="icon unhide"></i>
  53.             </span>
  54.  
  55.           </div>
  56.  
  57.         </div>
  58.  
  59.         <div class="column">
  60.           <div class="ui inverted segment card-view" style="background: url('images/2.jpg');background-size: cover;background-repeat: no-repeat;">
  61.             <h3 class="ui header title">Title's here</h3>
  62.             <h4 class="ui header">Username</h4>
  63.             <div class="ui divider"></div>
  64.             <div class="ui red circular label">
  65.               40%get√
  66.             </div>
  67.             <span>
  68.               <i class="icon unhide"></i>
  69.             </span>
  70.           </div>
  71.         </div>
  72.  
  73.         <div class="column">
  74.           <div class="ui inverted segment card-view" style="background: url('images/3.jpg');background-size: cover;background-repeat: no-repeat;">
  75.             <h3 class="ui header title">Title's here</h3>
  76.             <h4>Username</h4>
  77.             <div class="ui divider"></div>
  78.             <div class="ui red circular label">
  79.               40%get√
  80.             </div>
  81.             <span>
  82.               <i class="icon unhide"></i>
  83.             </span>
  84.           </div>
  85.         </div>
  86.  
  87.       </div>
  88.  
  89.       <div class="ui three column grid">
  90.         <div class="column">
  91.  
  92.           <div class="ui inverted segment card-view" style="background: url('images/4.jpg');background-size: cover;background-repeat: no-repeat;">
  93.  
  94.             <h3 class="ui header title">Title's here</h3>
  95.             <h4>Username</h4>
  96.             <div class="ui divider"></div>
  97.             <div class="ui red circular label">
  98.               40%get√
  99.             </div>
  100.             <span>
  101.               <i class="icon unhide"></i>
  102.             </span>
  103.  
  104.           </div>
  105.  
  106.         </div>
  107.  
  108.         <div class="column">
  109.           <div class="ui inverted segment card-view" style="background: url('images/5.jpg');background-size: cover;background-repeat: no-repeat;">
  110.             <h3 class="ui header title">Title's here</h3>
  111.             <h4 class="ui header">Username</h4>
  112.             <div class="ui divider"></div>
  113.             <div class="ui red circular label">
  114.               40%get√
  115.             </div>
  116.             <span>
  117.               <i class="icon unhide"></i>
  118.             </span>
  119.           </div>
  120.         </div>
  121.  
  122.         <div class="column">
  123.           <div class="ui inverted segment card-view" style="background: url('images/6.jpg');background-size: cover;background-repeat: no-repeat;">
  124.             <h3 class="ui header title">Title's here</h3>
  125.             <h4>Username</h4>
  126.             <div class="ui divider"></div>
  127.             <div class="ui red circular label">
  128.               40%get√
  129.             </div>
  130.             <span>
  131.               <i class="icon unhide"></i>
  132.             </span>
  133.           </div>
  134.         </div>
  135.  
  136.       </div>
  137.  
  138.     </div>
  139.  
  140.     <div class="ui inverted red basic segment people-say">
  141.       <h3 class="ui center aligned header">
  142.         呈现给您最简洁有趣的知识是我们认为最有趣的事情</h3>
  143.  
  144.         <div class="ui grid">
  145.  
  146.           <div class="four wide column">
  147.             <div class="ui circular inverted segment">
  148.               <i class="icon red inverted circular star"></i>
  149.               <h4 class="ui inverted header ">
  150.                 首席执行官CHO
  151.                 <p class="sub header">alex</p>
  152.               </h4>
  153.             </div>
  154.           </div>
  155.  
  156.           <div class="four wide column">
  157.             <div class="ui circular inverted segment">
  158.               <i class="icon red inverted  circular star"></i>
  159.               <h4 class="ui inverted header ">
  160.                 首席执行官CHO
  161.                 <p class="sub header">alex</p>
  162.               </h4>
  163.             </div>
  164.           </div>
  165.  
  166.           <div class="four wide column">
  167.             <div class="ui circular inverted segment">
  168.               <i class="icon red inverted circular star"></i>
  169.               <h4 class="ui inverted header ">
  170.                 首席执行官CHO
  171.                 <p class="sub  header">alex</p>
  172.               </h4>
  173.             </div>
  174.           </div>
  175.  
  176.           <div class="four wide column">
  177.             <div class="ui circular inverted segment">
  178.               <i class="icon red inverted circular star"></i>
  179.               <h4 class="ui inverted  header ">
  180.                 首席执行官CHO
  181.                 <p class="sub header">alex</p>
  182.               </h4>
  183.             </div>
  184.           </div>
  185.  
  186.         </div>
  187.         <button type="button" name="button" class="ui red circular inverted button">成为讲师</button>
  188.     </div>
  189.  
  190.     <div class="ui vertical very padded red segment">
  191.  
  192.       <div class="ui grid">
  193.  
  194.         <div class="four wide column">
  195.         <div class="ui images">
  196.           <img src="data:images/ten_red_logo.png" alt="" />
  197.         </div>
  198.         </div>
  199.  
  200.         <div class="four wide column">
  201.           <div class="ui vertical  text menu">
  202.             <div class="item">
  203.               <h3 class="ui  header">Company</h3>
  204.             </div>
  205.             <div class="item">Tel:010-666666</div>
  206.             <div class="item">Adr:CN</div>
  207.             <div class="item">Fax:010-6666</div>
  208.           </div>
  209.         </div>
  210.  
  211.         <div class="four wide column">
  212.           <div class="ui vertical  text menu">
  213.             <div class="item">
  214.               <h3 class="ui  header">Company</h3>
  215.             </div>
  216.             <div class="item">Tel:010-666666</div>
  217.             <div class="item">Adr:CN</div>
  218.             <div class="item">Fax:010-6666</div>
  219.           </div>
  220.         </div>
  221.  
  222.         <div class="four wide column">
  223.           <div class="ui vertical  text menu">
  224.             <div class="item">
  225.               Designed by venicid
  226.             </div>
  227.             <div class="item">
  228.               <h3 class="ui header logo">Muguacoding</h3>
  229.             </div>
  230.           </div>
  231.         </div>
  232.  
  233.         </div>
  234.       </div>
  235.     </div>
  236.  
  237.   </body>
  238. </html>
  1. .ui.vertical.basic.segment.masterheader{
  2.   height: 700px;
  3.   background: url('images/banner.png');
  4.   background-size: cover;
  5.   background-repeat: no-repeat;
  6.   padding-left: 40px;
  7.   padding-right: 40px;
  8. }
  9.  
  10. .ui.center.inverted.aligned.header.masterslogan{
  11.   font-size: 50px;
  12.   position: absolute;
  13.   top: 50%;
  14.   left:50%;
  15.   transform: translate(-50%,-50%);
  16. }
  17.  
  18. .ui.red.circular.button{
  19.   width: 220px;
  20. }
  21.  
  22. .ui.header.logo{
  23.   font-size: 30px;
  24.   color: rgb(128, 131, 136)
  25. }
  26.  
  27. .ui.inverted.segment.card-view{
  28.   height: 220px;
  29. }
  30.  
  31. .ui.basic.segment.recommended > .ui.center.aligned.header{
  32.   font-size: 50px;
  33.   color: rgb(137, 132, 138);
  34.   margin-top: 40px;
  35.   margin-bottom: 40px;
  36. }
  37.  
  38. .ui.header.title{
  39.   margin-bottom: 100px;
  40. }
  41.  
  42. .ui.inverted.red.basic.segment.people-say{
  43.     height: 450px;
  44.     background: url('images/people-say.png');
  45.     background-size: cover;
  46.     background-repeat: no-repeat;
  47.     margin-bottom: 200px;
  48. }
  49. .ui.center.aligned.header{
  50.   position: relative;
  51.   top: 20%;
  52.   transform: translate(0,-50%);
  53. }
  54.  
  55.   .ui.inverted.red.basic.segment.people-say > .ui.grid{
  56.     position: relative;
  57.     top:50%;
  58.     transform: translate(0,-50%);
  59.   }
  60.  
  61. .four.wide.column{
  62.   position: relative;
  63. }
  64.  
  65. .ui.circular.inverted.segment{
  66.   background: url('images/profile.png');
  67.   background-size: cover;
  68.   background-repeat: no-repeat;
  69.   width: 120px;
  70.   height: 120px;
  71.   position: absolute;
  72.   left: 50%;
  73.   transform: translate(-50%,-50%);
  74. }
  75.  
  76. .ui.circular.inverted.segment > .ui.inverted.header{
  77.   position: absolute;
  78.   top: 110%;
  79.   left:50%;
  80.   transform: translate(-50%,-50%);
  81.   width: 200px;
  82. }
  83.  
  84. .icon.red.inverted.circular.star{
  85.   position: absolute;
  86.   left:100%;
  87.   top:100%;
  88.   transform:translate(-100%,-100%);
  89. }
  90.  
  91. .ui.inverted.red.basic.segment.people-say > .ui.red.circular.button{
  92.   position: absolute;
  93.   top: 100%;
  94.   left:50%;
  95.   transform: translate(-50%,-50%);
  96.   background: white;
  97. }

8 定制10MINs 3的更多相关文章

  1. 6.定制10MINS首页1

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

  2. 7 定制10MINs首页2

    1.添加 <div class="ui basic segment"> <h1 class="ui center aligned header" ...

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

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

  4. ASP.NET Core应用的错误处理[3]：ExceptionHandlerMiddleware中间件如何呈现“定制化错误页面”

    DeveloperExceptionPageMiddleware中间件利用呈现出来的错误页面实现抛出异常和当前请求的详细信息以辅助开发人员更好地进行纠错诊断工作,而ExceptionHandlerMi ...

  5. Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程（柱状图，南丁格尔图）

    Webstorm+Webpack+echarts   ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...

  6. 标准产品+定制开发:专注打造企业OA、智慧政务云平台——山东森普软件，交付率最高的技术型软件公司

    一.公司简介山东森普信息技术有限公司(以下简称森普软件)是一家专门致力于移动互联网产品.企业管理软件定制开发的技术型企业.公司总部设在全国五大软件园之一的济南齐鲁软件园.森普SimPro是由Simpl ...

  7. Gradle 实现 Android 多渠道定制化打包

    Gradle 实现 Android 多渠道定制化打包 版权声明:本文为博主原创文章,未经博主允许不得转载. 最近在项目中遇到需要实现 Apk 多渠道.定制化打包, Google .百度查找了一些资料, ...

  8. Xamarin+Prism小试牛刀：定制跨平台Outlook邮箱应用(后续)

    在[Xamarin+Prism小试牛刀:定制跨平台Outlook邮箱应用]里面提到了Microsoft 身份认证,其实这也是一大块需要注意的地方,特作为后续补充这些知识点.上章是使用了Microsof ...

  9. Django admin定制化，User字段扩展[原创]

    前言 参考上篇博文,我们利用了OneToOneField的方式使用了django自带的user,http://www.cnblogs.com/caseast/p/5909248.html , 但这么用 ...

随机推荐

  1. git 获取领先落后的命令

    git --git-dir=/data/usr/local/gerrit-site/git/aixuexi-admin.git rev-list --left-right --count master ...

  2. Spring配置文件详细分析

    XML Schema命名空间作用: 1.避免命名冲突,像Java中的package一样 2.将不同作用的标签分门别类(像Spring中的tx命名空间针对事务类的标签,context命名空间针对组件的标 ...

  3. Spring Boot入门程序

    创建第一个Spring Boot的入门程序. 带你一步一步的,搭建第一个Spring Boot 的入门程序,并成功运行,通过实践过程,初步认识和了解如何使用Spring Boot 创建应用程序. 一. ...

  4. 笨办法学Python（十二）

    习题 12:提示别人 当你键入 raw_input() 的时候,你需要键入 ( 和 ) 也就是“括号(parenthesis)”.这和你格式化输出两个以上变量时的情况有点类似,比如说 "%s ...

  5. 从windows CMD 命令行(CMD promp)运行Docker

    英文原帖 Running Docker from Windows CMD prompt https://medium.com/@neil.avery_68603/running-docker-from ...

  6. Java解析html页面,获取想要的元素

    背景:通过接口访问数据,获取的内容是个标准的html格式,使用jsoup的方式获取页面元素值 先推荐比较好的博客:http://www.open-open.com/jsoup/. 单个案例比较不错 h ...

  7. 2017.10.3 JDBC访问数据库的建立过程

    1·JDBC访问数据库,其访问流程: (1)注册驱动 (2)建立连接(Connection) (3)创建数据库操作对象用于执行SQL语句 (4)执行语句 (5)处理执行结果 (6)释放资源 2·注册驱 ...

  8. B3942 Censoring

    爆炸入口 有一个S串和一个T串,长度均小于1,000,000,设当前串为U串,然后从前往后枚举S串一个字符一个字符往U串里添加,若U串后缀为T,则去掉这个后缀继续流程. 这道题确乎是个很好的联系kmp ...

  9. checkboxlist如何配置数据源？

    在做项目中,通常checkboxlist中的checkitems不是固定的,需要绑定可变的数据源,把数据添加到list集合中,代码如下 DataSet myData = new DataSet(); ...

  10. springboot整合activiti报错[processes/]不存在解决方案

    springboot整合activiti时,启动抛异常 nested exception is java.io.FileNotFoundException: class path resource [ ...