原始代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>First landing page</title>
<link rel="stylesheet" href="css/semantic.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<div class="ui fixed inverted menu">
<a href="#" class="item">Home</a>
<a href="#" class="item">About</a>
<a href="#" class="item">Other</a>
</div> <div class="ui vertical basic segment">
<div class="ui image">
<img src="data:images/banner.jpg" alt="" />
</div>
</div> <div class="ui vertical segment">
<div class="ui grid"> <div class="ten wide column">
<div class="ui image">
<img src="data:images/devices2.png" alt="" />
</div>
</div> <div class="six wide column">
<h2 class="u1 header">
<i class="icon star"></i>
This is title
</h2> <p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p> </div>
</div>
</div> <div class="ui vertical very padded inverted segment">
<div class="ui grid"> <div class="four wide column">
<div class="ui vertical inverted text menu">
<div class="item">
<h4 class="ui inverted header">Company</h4>
</div>
<div class="item">
Address:CN
</div>
<div class="item">
Fax:010-66666
</div>
<div class="item">
Tel:010-66666
</div>
</div>
</div> <div class="four wide column">
<div class="ui vertical inverted text menu">
<div class="item">
<h4 class="ui inverted header">Company</h4>
</div>
<div class="item">
Address:CN
</div>
<div class="item">
Fax:010-66666
</div>
<div class="item">
Tel:010-66666
</div>
</div>
</div> <div class="four wide column">
<div class="ui vertical inverted text menu">
<div class="item">
<h4 class="ui inverted header">Company</h4>
</div>
<div class="item">
Address:CN
</div>
<div class="item">
Fax:010-66666
</div>
<div class="item">
Tel:010-66666
</div>
</div>
</div> <div class="four wide column">
<div class="ui vertical inverted text menu">
<div class="item">
<h4 class="ui inverted header">Company</h4>
</div>
<div class="item">
Address:CN
</div>
<div class="item">
Fax:010-66666
</div>
<div class="item">
Tel:010-66666
</div>
</div>
</div> </div>
</div> </body>
</html>

1.header部分

(1)10mins图标

    <div class="ui vertical segment">

      <div class="ui inverted menu">
<div class="ui image">
<img src="data:images/tenlogo.png" alt="" />
</div>
</div> </div>

  

  

(2).login按钮

    <div class="ui vertical  segment">

      <div class="ui inverted menu">
<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 button">Login</button>
</div>
</div> </div>

  

  • 靠右menu

   <div class="right menu">

  

  • button样式

            <button type="button" name="button" class="ui red circular button">Login</button>

  

  (3)大标题,二级标题,按钮

      <h1 class="ui header">这是大标题的位置
<p class="sub header">
这是二级标题的位置
</p>
<button type="button" name="button" class="ui red circular button">注册一个</button>
</h1>

    

  • 居中显示

  <h1 class="ui center aligned header">

    

(4)初步完成

    

  <div class="ui vertical basic segment">

      <div class="ui inverted menu">

        <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 red circular button">Login</button>
</div>
</div> </div> <h1 class="ui center aligned header">这是大标题的位置
<p class="sub header">
这是二级标题的位置
</p>
<button type="button" name="button" class="ui red circular button">注册一个</button>
</h1> </div>
  • 消除线条

<div class="ui vertical basic segment">

  

2.定制自己的样式

  (1)创建css

    <link rel="stylesheet" href="custom.css" media="screen" title="no title" charset="utf-8">

  (2)添加背景图像

.ui.vertical.basic.segment{
height: 700px;
background: url('images/banner.png');
background-size: cover;
background-repeat: no-repeat;
}

  

  •  .添加小名

    <div class="ui vertical basic segment masterheader">
.ui.vertical.basic.segment.masterheader{
height: 700px;
background: url('images/banner.png');
background-size: cover;
background-repeat: no-repeat;
}

    

  (3)10mins背景修改,修改按钮

    <div class="ui inverted menu text">
      <button type="button" name="button" class="ui inverted circular button">Login</button>

    

  (4)内部收紧

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

  

  (5).修改大标题

      <h1 class="ui center aligned header masterslogan">
.ui.center.aligned.header.masterslogan{
font-size: 50px;
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
}

  •   修改大标题颜色:尽量使用ui自带的格式

      <h1 class="ui center inverted aligned header masterslogan">
.ui.center.inverted.aligned.header.masterslogan{
  •   修改按钮

  <button type="button" name="button" class="ui red circular button">注册一个</button>
.ui.red.circular.button{
width: 220px;
}

  (6)初步完成header修改

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

    

3. footer样式

  (1)red样式

    <div class="ui vertical very padded red segment">

  (2)修改字体颜色

      <h3 class="ui header logo">Muguacoding</h3>

  

.ui.header.logo{
font-size: 30px;
color: rgb(128, 131, 136)
}

4.初步完成header和footer

<!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"> <div class="ui grid"> <div class="ten wide column">
<div class="ui image">
<img src="data:images/devices2.png" alt="" />
</div>
</div> <div class="six wide column">
<h3 class="ui header">
<i class="ui icon book"></i>
This title</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
</p>
</div> </div> </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)
}

      

6.定制10MINS首页1的更多相关文章

  1. 7 定制10MINs首页2

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

  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. 跨平台移动开发phonegap/cordova 3.3全系列教程-helloworld

    1.    建立专案(cordova) 打开cmd命令行 cordova create ACESMobile aces.mobile ACES cd aces mobile 如图 2.    安装插件 ...

  2. DOM对象和js对象以及jQuery对象的区别

    DOM对象和js对象以及jQuery对象的区别 DOM对象和js对象以及jQuery对象的区别 一.DOM对象 文档对象模型简称DOM,是W3C组织推荐的处理可扩展置标语言的标准编程接口. DOM实际 ...

  3. DIV命名规范

    DIV命名规范 企业DIV使用频率高的命名方法 网页内容类 --- 注释的写法: /* Footer */ 内容区/* End Footer */ 摘要: summary 箭头: arrow 商标:  ...

  4. WINCC runtime连接SIMOTION simulator SIMOSIM

    测试使用的软件版本 TIA Portal V14sp1 Windows7 sp1 (professional) Scout 5.1(integrated in TIA 集成项目) VMware wor ...

  5. 如何在windows下运行Linux命令?(转载)

    在windows上可以运行或使用linux下面的命令吗?可以,小编今天就来分享怎么样让Windows支持Linux命令,做这些安装和设置后,就可以非常方便的在windows系统中使用linux下面的命 ...

  6. 使用函数BAPISDORDER_GETDETAILEDLIST读取S/4HANA中Sales Order行项目数据

    事务码MM03查看物料主数据,如下图所示的行项目数据,包含物料ID,描述信息,数量,单价等等: 使用如下代码进行行项目读取: DATA: ls_read TYPE order_view, lt_ite ...

  7. Java中调用MatLab返回值

    当在Java中使用MatLab函数时,由于语言语法的不同,Matlab返回多个数据时,想在Java中获取到并进行使用.查阅了网上资料,翻箱倒柜加上自己实战,得出方法如下: 如MatLab函数返回的是N ...

  8. IOS 计算文字尺寸(UILabel)

    方式1 :普通用法 #define  MJNameFont [UIFont systemFontOfSize:14] /** * 计算文字尺寸 * * @param text 需要计算尺寸的文字 * ...

  9. robotframework实战一

    1.环境 1.Robotframework 安装环境,见以下帖子,只要保证python安装成功,安装了python的pip,就可以使用pip一路安装下去了.以下帖子也有基础的操作,帖子路径 http: ...

  10. vue中css动画原理

    显示原理: <transition name='fade'> <div v-if='show'>hello world</div> </transition& ...