2016.3.15__H5页面实战__第七天

本文链接：https://blog.csdn.net/MR_LP/article/details/50896492

如果您觉得这篇文章还不错，可以去H5专题介绍中查看更多相关文章。

个人简书地址：
dhttp://www.jianshu.com/users/5a2fd0b8fb30/latest_articles

这里写图片描述

阶段测试–映纷创意首页

今日制作一个网站首页。

官网地址：http://www.infinistudio.cn/

今日制作效果图：

这里写图片描述

今日制作网站逻辑概念：

这里写图片描述

既然已经分析过了界面要求和逻辑，那么我们来开始制作第一个页面。

首先是通过 Photoshop 去获取咱们网站的具体图标等。

在之后，分别去创建对应的文件夹，内部包含你的 CSS ， images 等文件夹。

创建之后，咱们正式开始今天的代码部分。

警告：以下代码部分，标签内容对应闭合，如果需要复制，请前往文章最底部。

首先咱们先来引入咱们的外部样式表。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="css/layout.css">
    </head>
    <body>
    </body>
</html>

头部

之后咱们来去在 BODY 中创建咱们的首页 logo 还有四个按钮。
为了方便查看，header 部分的 CSS 样式表，会在 header 部分结束的时候统一贴出来，大家稍安勿躁。

<div class="header">
            <a href="#"><img src="images/title2.png"/></a>
            <ul>
                <li><a href="#">HOME</a></li>
                <li><a href="#">WORK</a></li>
                <li><a href="#">CONTACT</a></li>
                <li><a href="#">JOIN US</a></li>
            </ul>
        </div>

Header部分 CSS 代码

/*首先来设置整个界面的文字样式，清除边距*/
*{
  margin: 0px;
  font-size: 17px;
  font-family: "黑体";
}
/*为整个代码区域附上一个灰色的背景色*/
body{
  background-color: rgb(242 , 242, 242);
}
/*===========================================================*/
/*                      头部                                  */
/*===========================================================*/
.header{
  width: 100%;
  height: 113px;
  background-color: rgba(0, 0, 0, 0.5);
  /*元素框从文档流完全删除，并相对于其包含块定位。
  包含块可能是文档中的另一个元素或者是初始包含块。
  元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。
  元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
  不过其包含块是视窗本身.*/
  position: fixed;
  /*设置图片居中*/
  text-align: center;
  /*设置阴影效果 属性分别对应 ： 横向距离 竖向距离 阴影距离 阴影颜色*/
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.5);
}
/*调整头部 logo 尺寸*/
.header img{
  margin: 15px;
  width: 140px;
  height: 55px;
}
ul{
  list-style-type: none;
}
ul a{
  /*text-decoration: underline; 下滑线*/
  /*text-decoration: line-through; 删除线*/

  /*取消a的下滑线*/
  text-decoration: none;
}
a{
  color: rgba(255, 255, 255, 0.5);
}
/*伪类代码 a:hover 当我们的鼠标放在我们的 a 标签上，咱们可以去设置颜色或者大小等*/
a:hover{
  color: white;
}
li{
  /* display 属性规定元素应该生成的框的类型:默认inline。此元素会被显示为内联元素，元素前后没有换行符。*/
  display: inline;
  /*设置边距 属性为两个的时候，第一个属性设置上下高度 第二个属性设置左右宽度*/
  margin: 0px 30px;
  padding:0px 20px;

}

主体

创建了上方的用户 logo 和四个按钮，咱们接下来要开始制作咱们的主体部分了，主体首先是一个用户引导图，下面配上文字和内容，下方还有对应的点。
首先咱们来创建咱们的引导图

  <div class="content">
            -
            <div class="content_top">
                <div class="content_banner">
                    <a href="#" class="img_bannder"><img class="img_bannder" src="images/banner.jpg" alt="" /></a>
                    <p class="banner_title_bg">
                        优酷2014全视频之夜
                    </p>
                    <div class="xiaodiandian">
                        <p class="dian"> ・ </p>
                        <p class="dian"> . </p>
                        <p class="dian"> ・ </p>
                        <p class="dian"> ・ </p>
                        <p class="dian"> ・ </p>
                        <p class="dian"> ・ </p>
                    </div>
                </div>

                <div class="content_introduce">
                    <p class="line"></p>
                    <p class="introduce">&nbsp;&nbsp;&nbsp;&nbsp;Infini Studio (映纷创意)是一家创意设计机构，专注于品质型动画影像的创意与设计。我们使用设计、动画、特效及多种创新形式（Motion Graphic），将信息与内容进行动态视觉化创意呈现。并由动画导演、设计师、插画师、三维艺术家共同协作完成。服务的范围包括广告、影视、交互、新媒体等。</p>
                </div>
        </div>
</div>

创建了引导图之后，还需要创建下方的赞助商图标。

  <div class="content_company">
                    <p class="line"></p>
                    <div class="company_logo">
                        <img src="images/1.jpg"/>
                        <img src="images/2.jpg"/>
                        <img src="images/3.jpg"/>
                        <img src="images/4.jpg"/>
                        <img src="images/5.jpg"/>
                        <img src="images/6.jpg"/>
                        <img src="images/7.jpg"/>
                        <img src="images/8.jpg"/>
                        <img src="images/9.jpg"/>
                        <img src="images/10.jpg"/>
                        <img src="images/11.jpg"/>
                        <img src="images/12.jpg"/>
                        <img src="images/13.jpg"/>
                        <img src="images/14.jpg"/>
                    </div>
                </div>

咱们的小界面部分。

<div class="content_bottom">
                <div</