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

随机推荐

Struts2_Action和Result总结
Action 1.实现一个Actiond的最常用方式:从ActionSupport继承2.DMI动态方法调用3.通配符配置 *{1}{2}... a) *_*4.接收参数的方法(一般用属性或者Doma ...
Do not set "root" as "NOPASSWD" in sudoers file
cat /etc/sudoers root ALL=(ALL)ALL: ALL do not change it to root ALL=(ALL)NOPASSWD: ALL Since ...
【CCPC-Wannafly Winter Camp Day4 (Div1) C】最小边覆盖（简单题）
点此看题面大致题意: 给你一个边集的子集,问你这可不可能是这张图的最小边覆盖. 大致思路考虑到,如果一条边连接的两个点度数都大于等于$2$,则这条边完全可以删去. 因此,我们只要判断是否存在这 ...
6.Netbackup-Oracle数据库恢复演练报告(下)
1.1 Oracle数据库恢复目录 1 安装新的客户端 2 新建异机恢复文件 3 新建数据库实例 4 建立spfile文件 5 建立数据文件夹 6 启动数据库到nomount状态 7 列出备份信息 ...
GPU计算的后CUDA时代-OpenACC(转)
在西雅图超级计算大会(SC11)上发布了新的基于指令的加速器并行编程标准,既OpenACC.这个开发标准的目的是让更多的编程人员可以用到GPU计算,同时计算结果可以跨加速器使用,甚至能用在多核CPU上 ...
url 解析
最近在做一个单页应用,使用AngularJS来处理一些页内路由(哈希#后的路由变化).自然会要解析URL中的参数.使用AngularJS自带的方法$location.search();可以自动将参数整 ...
修改SVN的地址
方法 1:右键在工作复本的根目录上右键->TortoiseSVN->重新定位 (Relocate),然后修改URL就可以了,但最好先备份一下,据说这样的操作有一定的危险性(至今我没有发现) ...
带有data-ng-bind表达式
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
MySQL自增锁等待问题解决
有网友再群里问:在做基准测试时候,批量插入数据时,有很多自增锁等待,我告诉他解决办法: 1.innodb_autoinc_lock_mode=2 2.innodb_autoextend_increme ...
Servlet学习笔记03——什么是DAO?
1.案例 (1)添加用户 step1.建表 create table t_user( id int primary key auto_increment, username varchar(50) u ...

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