6.定制10MINS首页1

原始代码

<!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的更多相关文章

7 定制10MINs首页2
1.添加 <div class="ui basic segment"> <h1 class="ui center aligned header" ...
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应用该应用包括以下两个部分: 一个可以让公众用户进行投票和查看投票结果的站 ...

随机推荐

【Microsoft Azure学习之旅】消息服务Service Bus的学习笔记及Demo示例
今年项目组做的是Cloud产品,有幸接触到了云计算的知识,也了解并使用了当今流行的云计算平台Amazon AWS与Microsoft Azure.我们的产品最初只部署在AWS平台上,现在产品决定同时支 ...
sharepoint2010的几个类型字段赋值和取值的方法
1.日期类型查询,需要转换,方法如下: //转换时间 string startdate = SPUtility.CreateISO8601DateTimeFromSystemDateTime(Date ...
JavaScript 数组排序（从大到小，从小到大）
1.数组的从大到小排序 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
oracle自动异地备份数据库
需求:实现oracle自动异地备份数据库分析:1.oracle备份数据库 2.自动备份(定时) 3.非本地备份(因为如果备份到本地的话,如果硬件设备损坏可能导致数据丢失) 知识点:1.备 ...
笨办法学Python（九）
习题 9: 打印,打印,打印 # Here's some new strange stuff, remember type it exactly. days = "Mon Tue Wed T ...
增量数据同步中间件DataLink分享（已开源）
项目介绍名称: DataLink['deitə liŋk]译意: 数据链路,数据(自动)传输器语言: 纯java开发(JDK1.8+)定位: 满足各种异构数据源之间的实时增量同步,一个分布式.可扩展 ...
解决Jenkins的错误“The Server rejected the connection: None of the protocols were accepted”
1. 配置节点,配置好节点后,在节点机上运行已下载文件,双击执行,提示"The Server rejected the connection: None of the protocols w ...
Jenkins添加项目说明，增加项目描述
背景:往往正常Jenkins上呈现的内容,太过简短,不易直观看了解项目是干嘛的,如下面的内容: 解决方案,使用插件,Extra Columns Plugin 安装成功后配置,需要结合自定义视图使用,新 ...
引用类型(三)：Function类型
一. Function类型函数实际上是对象.每个函数都是Function类型都实例,而且都与其他引用类型一样具有属性和方法.由于函数是对象,因此函数名实际上也是一个指向函数对象都指针.1.函数通常是使 ...
MAC卸载/删除 Parallels Desktop虚拟机的方法
一些MAC用户在自己的电脑上安装了虚拟机之后,想要将它卸载,但是不知道该怎么做.今天小编就为大家带来了这个问题的解决方法. 解决方案(删除/卸载虚拟机 (VM): 1.启动Parallels Desk ...

6.定制10MINS首页1

原始代码

1.header部分

（1）10mins图标

（2）.login按钮

靠右menu

button样式

（3）大标题，二级标题，按钮

居中显示

（4）初步完成

消除线条

2.定制自己的样式

（1）创建css

（2）添加背景图像

.添加小名

（3）10mins背景修改，修改按钮

（4）内部收紧

（5）.修改大标题

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

修改按钮

（6）初步完成header修改

3. footer样式

（1）red样式

（2）修改字体颜色

4.初步完成header和footer

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

随机推荐

热门专题

　　（3）大标题，二级标题，按钮

　　（1）创建css

　　（2）添加背景图像

　.添加小名

　　（3）10mins背景修改，修改按钮

　　（4）内部收紧

　　（5）.修改大标题

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

　　修改按钮

　　（6）初步完成header修改

　　（1）red样式

　　（2）修改字体颜色