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应用该应用包括以下两个部分: 一个可以让公众用户进行投票和查看投票结果的站 ...

随机推荐

hibernate_HelloWorld
环境准备 1.下载 hibernate 3.3.2: 2.下载 hibernate 3.4.0: 3.注意阅读 hibernate compatibility matrix(hibernate 网站, ...
NFS笔记（一）NFS服务器工作原理及详细配置
一.NFS工作原理 1.什么是NFS服务器 NFS就是Network File System的缩写,它最大的功能就是可以通过网络,让不同的机器.不同的操作系统可以共享彼此的文件. NFS服务器可以让P ...
Python基础学习之语句和语法
语句和语法 python语句中有一些基本规则和特殊字符: 井号键“#”表示之后的字符为python注释: 三引号(‘‘‘ ’’’)可以多行注释换行“\n”是标准的行分隔符(通常一个语句一行): 反斜 ...
CRM WebClient UI里的文件是如何上传到Netweaver后台的
使用Chrome开发者工具调试CRM WebClient UI里附件上传的功能: 从本地选择一个文件,断点触发: 前端取得用户选中上传的文件名: Jerry.txt 点Attach按钮后,触发ABAP ...
Ubuntu 18.04 一键安装深度截图工具 Deepin Screenshot
一直在寻找Linux下的截图软件,终于发现了Deepin ScreenShot,其功能齐全,界面美观,唯一的缺点需要自己配置快捷键(后面会讲). 安装直接在Ubuntu商店搜索“深度截图”,点击“安 ...
Rich feature hierarchies for accurate object detection and semantic segmentation(RCNN)
https://zhuanlan.zhihu.com/p/23006190?refer=xiaoleimlnote http://blog.csdn.net/bea_tree/article/deta ...
DECODE函数简介
在上一篇bolg中讲到ORACLE优化的时候提到DECODE()函数,以前自己用的也比较少,上网查了一下,还挺好用的一个函数,写下来希望对朋友们有帮助哈! https://www.cnblogs.co ...
Python 初始—(高阶函数)
变量可以指向函数,函数的参数能接收变量, 将函数通过参数进行传递 def SetAbs(a,b,abs){ return abs(a)+abs(b) }
【赛时总结】◇赛时·V◇ Codeforces Round #486 Div3
◇赛时·V◇ Codeforces Round #486 Div3 又是一场历史悠久的比赛,老师拉着我回来考古了……为了不抢了后面一些同学的排名,我没有做A题 ◆ 题目&解析 [B题]Subs ...
linux数据库copy方法
相信大多数程序员都会遇到数据库copy的问题,下面就总结几种常见的方法,针对有mysql基础的同学参考方法一:利用sqlyog的copy database的功能,如图这种最简单,速度比较慢: 方法 ...

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）修改字体颜色