第一个网站首页__第七天

请各位读者添加一下作者的微信公众号，以后有新的文章，将在微信公众号直接推送给各位，非常感谢。

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

个人博客地址：http://blog.csdn.net/mr_lp
里面有专栏，专门介绍从零基础，如何一步步学习 H5。

二维码.jpg

关注.gif

阶段测试--映纷创意首页

今日制作一个网站首页。

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

今日制作效果图：

主页.png

今日制作网站逻辑概念：

屏幕快照 2016-03-15 14.15.21.png

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

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

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

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

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

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

头部

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

            ![](images/title2.png)
            

                
HOME
                
WORK
                
CONTACT
                
JOIN US
            
        

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

  

            -
            

                

                    ![](images/banner.jpg)
                    

                        优酷2014全视频之夜
                    
                    

                        
 ・ 
                        
 . 
                        
 ・ 
                        
 ・ 
                        
 ・ 
                        
 ・ 
                    
                

                

                    

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

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

  

                    

                    

                        ![](images/1.jpg)
                        ![](images/2.jpg)
                        ![](images/3.jpg)
                        ![](images/4.jpg)
                        ![](images/5.jpg)
                        ![](images/6.jpg)
                        ![](images/7.jpg)
                        ![](images/8.jpg)
                        ![](images/9.jpg)
                        ![](images/10.jpg)
                        ![](images/11.jpg)
                        ![](images/12.jpg)
                        ![](images/13.jpg)
                        ![](images/14.jpg)
                    
                

咱们的小界面部分。

                

                    ![](images/news1.png)
                    
吴亦凡 -- 器官的纷争
                
                

                    ![](images/news2.png)
                    
联想企业业务
                
                

                    ![](images/news3.png)
                    
ME
                
                

                    ![](images/news4.png)
                    
聚划算《世界聚在眼前》
                
                

                    ![](images/news5.png)
                    
头条号
                
                

                    ![](images/news1.png)
                    
吴亦凡 -- 器官的纷争
                
                

                    ![](images/news2.png)
                    
联想企业业务
                
                

                    ![](images/news3.png)
                    
ME
                
                

                    ![](images/news4.png)
                    
聚划算《世界聚在眼前》
                
                

                    ![](images/news5.png)
                    
头条号
                
            
        

CSS代码

/*===========================================================*/
/*                            内容区域                        */
/*===========================================================*/
.content{
  width: 70%;
  height: 1620px;
  margin: auto;
}
/*banner、公司介绍、合作企业*/
/*设置具体图片距离顶部标题栏的距离*/
.content_top{
  width: 100%;
  height: 690px;
  margin-top: 130px;
}
/*横幅*/
.content_banner{
  width: 100%;
  height: 490px;
}
/*设置标题栏下 图片的 尺寸*/
.content_banner .img_bannder{
  width: 100%;
  height: 420px;
  /*position: relative;*/
}
/*设置提示语大小颜色*/
.banner_title_bg{
  margin-top: -3px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 5px 0px;
}
.xiaodiandian{
  margin-top: 10px;
  text-align: center;
}
.dian{
  display: inline;
}
/*公司介绍*/
/*设置公司介绍所占得位置大小*/
.content_introduce{
  width: 100%;
  height: 80px;
}
.line{
  margin: 0px 10px;
  background-color: gray;
  height: 1px;
  /*透明Opacity：调整元素透明度；*/
  opacity: 0.1;
}
/*设置介绍文字的样式*/
.introduce{
  padding: 10px;
  font-size: 13px;
  color: darkgray;
  line-height: normal;
}
/*合作企业底部图片大小*/
.content_company{
  width: 100%;
  height: 100px;
}
div.company_logo{
  text-align: center;
}
div.company_logo img{
  width: 60px;
  height: 38px;
  /*需要注意：当设置属性为四个时， 属性分别对应 上 右 下 左 */
  padding: 10px 10px 0px 10px;
}
/*===========================================================*/
/*                          视频展示                          */
/*===========================================================*/
/*首先设置每一个视频图片居中*/
.content_bottom{
  width: 100%;
  height: 830px;
  text-align: center;
}
/*接下来来规定一下图片的位置尺寸*/
.news_item{
  /*这里设置 28% 主要是因为想一行 放入三列 28% * 3 = 84% 具体看实际情况而定*/
  width: 28%;
  height: 150px;
  float: left;
  text-align: center;
  margin: 20px;
  background-color: white;
  /*设置圆角 3 px 像素*/
  border-radius: 3px;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}
/*设置背景图片*/
.news_item img{
  width: 100%;
  height: 78%;
  border-radius: 3px;
}
/*设置图片文字*/
.news_item p{
  text-align: center;
  padding: 5px;
  color: rgba(0, 0, 0, 0.5);
}
/*设置鼠标放上去，透明度降低*/
a:hover{
  opacity: 0.5;
}

这时候应该就已经设置完主体和头部了，那我们离完成也就不远了。
我们继续来设置我们的文章结尾。

            

                

                    

                        ![](images/contact1.jpg)
                        ![](images/contact2.jpg)
                        ![](images/contact3.jpg)
                    
                    

                        

                    
                    

                        ![](images/footer_logo.jpg)
                        
Infini Studio | 映纷创意
                        
北京市朝阳北路107号院
                        
Email:[email protected]
                        
QQ:7585917
                        
weibo:@InfiniStudio
                    
                
            
        

CSS 代码部分

/*===========================================================*/
/*                            尾部                            */
/*===========================================================*/
/*设置尾部距离*/
.footer{
  width: 100%;
  height: 215px;
  background-color: rgb(224, 224, 224);
  margin-bottom: 40px;
}
/*更改尾部图片大小*/
.footer img{
  width: 36px;
  height: 30px;
  margin-top: 5px;
}
/*更改文字大小*/
.footer p{
  color: gray;
  padding: 3px 0px;
  font-size: 15px;
}
table{
  width: 100%;
}
td.one{
  width: 48%;
  text-align: right;
  /*设置元素的垂直对齐方式*/
  vertical-align: top;
}
td.two{
  width: 1%;
  text-align: center;
  height: 100%;
}
.vertical_line{
  margin-top: 5px;
  height: 195px;
  width: 1px;
  background-color: gray;
  opacity: 0.2;
}
td.three{
  width: 48%;
  text-align: left;
}
img.footer_logo{
  margin-top: -10px;
  width: 145px;
  height: 60px;
}

这时候，咱们的界面首页就基本完成了，但是还是有非常多的功能需要优化，但是咱们现在所学习的水平有限，等咱们技术好一点了，我会带着大家，用更高级的方式，从新制作一次这个界面。
欢迎大家留言挖坟。

今天就到这里，欢迎大家跟着我，每天10分钟，一起学习 H5.

HTML 代码：

    
        
        
        
    
    

        

            ![](images/title2.png)
            

                
HOME
                
WORK
                
CONTACT
                
JOIN US
            
        

        

            -
            

                

                    ![](images/banner.jpg)
                    

                        优酷2014全视频之夜
                    
                    

                        
 ・ 
                        
 . 
                        
 ・ 
                        
 ・ 
                        
 ・ 
                        
 ・ 
                    
                

                

                    

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

                

                    

                    

                        ![](images/1.jpg)
                        ![](images/2.jpg)
                        ![](images/3.jpg)
                        ![](images/4.jpg)
                        ![](images/5.jpg)
                        ![](images/6.jpg)
                        ![](images/7.jpg)
                        ![](images/8.jpg)
                        ![](images/9.jpg)
                        ![](images/10.jpg)
                        ![](images/11.jpg)
                        ![](images/12.jpg)
                        ![](images/13.jpg)
                        ![](images/14.jpg)
                    
                
            

            

                

                    ![](images/news1.png)
                    
吴亦凡 -- 器官的纷争
                
                

                    ![](images/news2.png)
                    
联想企业业务
                
                

                    ![](images/news3.png)
                    
ME
                
                

                    ![](images/news4.png)
                    
聚划算《世界聚在眼前》
                
                

                    ![](images/news5.png)
                    
头条号
                
                

                    ![](images/news1.png)
                    
吴亦凡 -- 器官的纷争
                
                

                    ![](images/news2.png)
                    
联想企业业务
                
                

                    ![](images/news3.png)
                    
ME
                
                

                    ![](images/news4.png)
                    
聚划算《世界聚在眼前》
                
                

                    ![](images/news5.png)
                    
头条号
                
            
        

        

            

                

                    

                        ![](images/contact1.jpg)
                        ![](images/contact2.jpg)
                        ![](images/contact3.jpg)
                    
                    

                        

                    
                    

                        

                        
Infini Studio | 映纷创意
                        
北京市朝阳北路107号院
                        
Email:[email protected]
                        
QQ:7585917
                        
weibo:@InfiniStudio
                    
                
            
        

    

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;

}
/*===========================================================*/
/*                            内容区域                        */
/*===========================================================*/
.content{
  width: 70%;
  height: 1620px;
  margin: auto;
}
/*banner、公司介绍、合作企业*/
/*设置具体图片距离顶部标题栏的距离*/
.content_top{
  width: 100%;
  height: 690px;
  margin-top: 130px;
}
/*横幅*/
.content_banner{
  width: 100%;
  height: 490px;
}
/*设置标题栏下 图片的 尺寸*/
.content_banner .img_bannder{
  width: 100%;
  height: 420px;
  /*position: relative;*/
}
/*设置提示语大小颜色*/
.banner_title_bg{
  margin-top: -3px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 5px 0px;
}
.xiaodiandian{
  margin-top: 10px;
  text-align: center;
}
.dian{
  display: inline;
}
/*公司介绍*/
/*设置公司介绍所占得位置大小*/
.content_introduce{
  width: 100%;
  height: 80px;
}
.line{
  margin: 0px 10px;
  background-color: gray;
  height: 1px;
  /*透明Opacity：调整元素透明度；*/
  opacity: 0.1;
}
/*设置介绍文字的样式*/
.introduce{
  padding: 10px;
  font-size: 13px;
  color: darkgray;
  line-height: normal;
}
/*合作企业底部图片大小*/
.content_company{
  width: 100%;
  height: 100px;
}
div.company_logo{
  text-align: center;
}
div.company_logo img{
  width: 60px;
  height: 38px;
  /*需要注意：当设置属性为四个时， 属性分别对应 上 右 下 左 */
  padding: 10px 10px 0px 10px;
}
/*===========================================================*/
/*                          视频展示                          */
/*===========================================================*/
/*首先设置每一个视频图片居中*/
.content_bottom{
  width: 100%;
  height: 830px;
  text-align: center;
}
/*接下来来规定一下图片的位置尺寸*/
.news_item{
  /*这里设置 28% 主要是因为想一行 放入三列 28% * 3 = 84% 具体看实际情况而定*/
  width: 28%;
  height: 150px;
  float: left;
  text-align: center;
  margin: 20px;
  background-color: white;
  /*设置圆角 3 px 像素*/
  border-radius: 3px;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}
/*设置背景图片*/
.news_item img{
  width: 100%;
  height: 78%;
  border-radius: 3px;
}
/*设置图片文字*/
.news_item p{
  text-align: center;
  padding: 5px;
  color: rgba(0, 0, 0, 0.5);
}
/*设置鼠标放上去，透明度降低*/
a:hover{
  opacity: 0.5;
}
/*===========================================================*/
/*                            尾部                            */
/*===========================================================*/
/*设置尾部距离*/
.footer{
  width: 100%;
  height: 215px;
  background-color: rgb(224, 224, 224);
  margin-bottom: 40px;
}
/*更改尾部图片大小*/
.footer img{
  width: 36px;
  height: 30px;
  margin-top: 5px;
}
/*更改文字大小*/
.footer p{
  color: gray;
  padding: 3px 0px;
  font-size: 15px;
}
table{
  width: 100%;
}
td.one{
  width: 48%;
  text-align: right;
  /*设置元素的垂直对齐方式*/
  vertical-align: top;
}
td.two{
  width: 1%;
  text-align: center;
  height: 100%;
}
.vertical_line{
  margin-top: 5px;
  height: 195px;
  width: 1px;
  background-color: gray;
  opacity: 0.2;
}
td.three{
  width: 48%;
  text-align: left;
}
img.footer_logo{
  margin-top: -10px;
  width: 145px;
  height: 60px;
}