当前位置:Gxlcms > html代码 > 2016.3.15第一个网站首页第七天_html/css_WEB-ITnose

2016.3.15第一个网站首页第七天_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:12人阅读

个人博客地址: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 部分结束的时候统一贴出来,大家稍安勿躁。

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

  
-

.

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

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

  

咱们的小界面部分。

吴亦凡 -- 器官的纷争

联想企业业务

ME

聚划算《世界聚在眼前》

头条号

吴亦凡 -- 器官的纷争

联想企业业务

ME

聚划算《世界聚在眼前》

头条号

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;}

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

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 代码:

                                            
  • HOME
  • WORK
  • CONTACT
  • JOIN US
-

.

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

吴亦凡 -- 器官的纷争

联想企业业务

ME

聚划算《世界聚在眼前》

头条号

吴亦凡 -- 器官的纷争

联想企业业务

ME

聚划算《世界聚在眼前》

头条号

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;}

人气教程排行