2016.3.15第一个网站首页第七天_html/css_WEB-ITnose
程序员文章站
2022-05-04 10:23:03
...
个人博客地址: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 部分结束的时候统一贴出来,大家稍安勿躁。
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),将信息与内容进行动态视觉化创意呈现。并由动画导演、设计师、插画师、三维艺术家共同协作完成。服务的范围包括广告、影视、交互、新媒体等。
创建了引导图之后,还需要创建下方的赞助商图标。
咱们的小界面部分。
下一篇: python实现进程间通信简单实例
推荐阅读
-
网站首页这个meta是做什么的呢?_html/css_WEB-ITnose
-
关于一道div+css 网站首页布局的课后作业_html/css_WEB-ITnose
-
关于一道div+css 网站首页布局的课后作业_html/css_WEB-ITnose
-
网站首页的色彩怎样搭配,有没有一些规范?_html/css_WEB-ITnose
-
求简单中文网站首页源码,我正在学习前台_html/css_WEB-ITnose
-
有个问题 网站首页是要简洁大气还是要内容丰富_html/css_WEB-ITnose
-
2016.3.15第一个网站首页第七天_html/css_WEB-ITnose
-
11-页面布局网站首页设计实例终极版(仿csdn首页)_html/css_WEB-ITnose
有个问题 网站首页是要简洁大气还是要内容丰富_html/css_WEB-ITnose
某网站静态首页的实现小结_html/css_WEB-ITnose