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>

View Code

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

View Code

转载于:https://www.cnblogs.com/venicid/p/8075784.html

8 定制10MINs 3相关推荐

  1. 『PyTorch』第十一弹_torch.optim优化器 每层定制参数

    一.简化前馈网络LeNet 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 im ...

  2. 一站式智能芯片定制技术

    一站式智能芯片定制技术 从55nm到5nm先进工艺,拥有创纪录(> 200次流片)和年10万片FinFET晶圆授权量产的骄人业绩,并且成功率高达100%.15年以来,先进工艺产品交付纪录持续行业 ...

  3. 先进一站式IP及定制

    先进一站式IP及定制 芯动科技15年来立足中国本土,目前已实现从130nm到5nm工艺高速混合电路IP核全覆盖,且所有IP均自主可控,一站式赋能国产芯片发展. 提供经过批量生产验证或硅验证的IP产品, ...

  4. CodeGen融合核心扩展定制文件

    CodeGen融合核心扩展定制文件 融合核心定制文件 Harmony核心环境的各个方面都可以通过创建一个定制文件来定制,该文件是一个名为Harm的JSON文件onyCoreCustomization. ...

  5. 定制语音代理（智能体）的背后是什么？

    定制语音代理(智能体)的背后是什么? What's behind the move to custom voice agents? 自动化是未来的发展方向.生活在一个现在的时代,希望所有的事情都能迅速 ...

  6. java 启动参数_网红框架SpringBoot2.x之定制参数浅析（一）

    我们都知道,SpringBoot框架最吸引人的地方之一就是他针对各种框架组件集成都提供了缺省的配置,"零配置"集成和开发是它的终极目标.理论上你不做任何特殊配置,都可以启动项目. ...

  7. python建站与java建站有何不同_详解模板建站和定制建站的不同之处

    很多新手在建站前,都拿不准到底是使用模板建站好,还是找外包团队定制开发好.这两种建站方法差异还是蛮大的,下面就给大家说说模板和定制的几个主要不同之处,你可以根据这些来判断适合自己的建站方式: 1.制作 ...

  8. (广州)软件开发定制服务,工作流引擎 OA 库存管理系统

    本人专注于工作流的研究设计同时提供软件开发定制服务,工作流引擎 OA系统 库存管理系统 如果有机会合作共事请联系:15817167503(本人在广州) QQ:1311663711 加时请注明软件定制 ...

  9. 以实例说明如何使用C#从数据库中提取数据，按要求自动生成定制的Excel表格

    最近因为需要学习了一下使用C#操作Excel表格,现在把我使用C#如何定制表格的过程提供给需要的兄弟: /*从数据库提取数据*/ string strconn="packet size=40 ...

最新文章

  1. oracle的全文索引
  2. 今夜，我又坐在电脑面前想你
  3. java的函数库_Dagli首页、文档和下载 - Java 机器学习函数库
  4. html课表插件,课程表插件Timetables(原创)
  5. union 和 union all 有什么不同?
  6. 核心动画--基本动画
  7. php 读写远程文件内容,php获取远程文件内容的函数
  8. XUL Tutorial(一)
  9. Android开发笔记（十八）书籍翻页动画PageAnimation
  10. Golang的time包的应用
  11. 晶圆级封装行业调研报告 - 市场现状分析与发展前景预测
  12. [leetcode]Symmetric Tree
  13. 今天二月二龙抬头：除了理发 各地还有哪些习俗？
  14. Solidworks二次开发环境搭建(Net)
  15. 抑制广播风暴 各种发包
  16. web项目js调用斑马打印机打印二维码
  17. VS Code 常用必备插件
  18. 霹雳吧啦wz学习笔记1_卷积神经网络
  19. iphonex 序列号_iPhoneX如何查看手机序列号？三种查看方法全教给你！
  20. matlab 图像 放大缩小,图像的放大与缩小（MATLAB 代码）

热门文章

  1. csv导入mysql phpmyadmin_关于mysql：使用phpMyAdmin导入大型csv文件
  2. 乐橙等待登录返回超时_等待登录返回超时什么意思
  3. 计算机三大科学理论是,近代科学最伟大的三大理论：进化论、量子论和计算论...
  4. Java中Double除保留后小数位的几种方法
  5. CentOS下配置redis允许远程连接
  6. Android开发笔记（一百四十四）高仿支付宝的头部伸缩动画
  7. P3175 [HAOI2015]按位或
  8. 自动化测试的理想境界：AppCrawler自动遍历工具
  9. TensorBoard：嵌入可视化
  10. Ripple(Glance)