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

随机推荐

redis在Windows下以后台服务一键搭建哨兵(主从复制)模式(多机)
redis在Windows下以后台服务一键搭建哨兵(主从复制)模式(多机) 一.概述此教程介绍如何在windows系统中多个服务器之间,布置redis哨兵模式(主从复制),同时要以后台服务的模式运行 ...
IIS 发表web 之后，访问注册表项失败得问题
错误: 对注册表项“HKEY_LOCAL_MACHINE\SOFTWARE\xx\xxxx\xxxxx”的访问被拒绝. 解决办法: 打开IIS,找到应用程序池,然后找到自己web使用得程序池,右键高级 ...
必须夸夸Sublime，大文件打开
今天有个问题的事情日志文件67.8M大文件打开问题开始: 1.vscode必须挨批:直接就给个错误the file cannt be displayed in the editor because i ...
ubuntu linux double tab
在terminal中,输入部分指令,再按两下Tab键,可以显示以相关的指令
mysql主从分离
1.工具: 两台机器 master:192.168.0.1 slave:192.168.0.2 2.master的配置找到mysql的配置文件,一般centos的是/etc/my.cnf,ubunt ...
Selenium入门18 断言
自动化测试需对比实际结果与预期结果,给出测试结论. 1 条件判断 if ...else... 2 assert ... #coding:utf-8 #断言 from selenium import w ...
POJ-3349 Snowflake Snow Snowflakes---最小表示法
题目链接: https://vjudge.net/problem/POJ-3349 题目大意: 每个雪花都有六个分支,用六个整数代表,这六个整数是从任意一个分支开始,朝顺时针或逆时针方向遍历得到的.输 ...
[Linux发行版] 常见Linux系统下载(转)
本专题页汇总最受欢迎的Linux发行版基本介绍和下载地址,如果您是一位刚接触Linux的新手,这里的介绍可能对您有所帮助,如果您是以为Linux使用前辈,也可以在评论处留下您宝贵意见和经验,以便让更多 ...
Centos下Yum安装PHP5.5,5.6
默认的版本太低了,手动安装有一些麻烦,想采用Yum安装的可以使用下面的方案: 1.检查当前安装的PHP包 yum list installed | grep php 如果有安装的PHP包,先删除他们 ...
window7配置python3.3 + django + apache24 + mod_wsgi
window7安装配置python3.3 + django + apache24 + mod_wsgi 1.下载版本的时候要对应 2.apache24 别放系统盘, 不然权限很麻烦 3.django ...

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