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

随机推荐

sharepoint 查阅项SPFieldLookup 赋值 .
在项目中,经常会涉及列表或者文档库之间的相互引用,而这个时候我们用的更多的就是查阅项(lookup),以前没有去关注取值或者赋值的问题,今天正好碰到一个Case,就顺道总结一下.我们知道链接和图片的字 ...
CKEditor插件开发
以前做过一个教育项目,是有关在线考试的.其中对编辑器CKEditor做了扩充,增加了插入客观题.主观题.选择题和判断题的功能.这里记述下CKEditor插件开发的过程. CKEditor以前叫FCKE ...
用户管理的设计--4.jquery的ajax实现登录名的校验
页面效果鼠标失去焦点时,不需要刷新页面进行校验,判断登录名是否重复. 实现步骤 1.引入struts2-json-plugin-2.5.10.1插件包 2.页面使用jquery的ajax实现后台校验 ...
Python数字、字符串
1. 数字 byte 在python3中最重要的特性是对文本和二进制数据做了更加清晰的区分,python3不会以任意隐式方式混用字节型和字符型,也因此在python3中不能拼接字符串和字节包(pyth ...
POJ - 3109 Inner Vertices
不存在-1的情况,而且最多一轮就结束了.如果新增加的黑点v0会产生新的黑点v1,那么v0和v1肯定是在一条轴上的,而原来这条轴上已经有黑点了. 离散以后扫描线统计,往线段上插点,然后查询区间上点数. ...
P1151 子数整数
题目描述对于一个五位数a_1a_2a_3a_4a_5a1a2a3a4a5,可将其拆分为三个子数: sub_1=a_1a_2a_3sub1=a1a2a3 sub_2=a_2a_3a_ ...
python spark wingide
Ubuntu 12.04 the system is running in low-graphics mode
1.出现问题如图所示: 2.解决方案: Ctrl + Alt + F1 df -h 输入密码,到了这一步,也是可以使用terminal,那么没有图形界面也是可以的 cd /etc/X11 sudo c ...
Spring 学习之依赖注入
什么是依赖关系? 纵观所有的Java 应用,从基于Applet的小应用到多层次结构的企业级别的应用,他们都是一种典型的依赖性应用,也就是由一些互相协作的对象构成的,Spring把这种互相协作的关系称之 ...
this指向问题（2）
4.显示绑定指的是apply.bind.call (1).apply 和 call 相同点: <1> 这两个方法的用途是在特定的作用域中调用函数,实际上等于设置函数体内 this 对象的 ...

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