个人小作品之某公司首页静态页面的制作


前言


学习了一段时间的html+css,自己来制作个网站首页静态页面来玩玩,检验自己的学习成果。


制作一个静态页面前必备的:

  • html&html5基础(html标签的知识、运用,标签所代表的意义)
  • css&css3基础(css属性基础知识,每个属性所代表的意义)
  • 开发软件(本人用的:Notepad++)
  • 图形处理软件(ps6)用来切图,如切logo、某背景图片、图片等。
  • 五个主要浏览器(Google、火狐、欧朋、苹果、IE)
  • IETester软件(测试不同版本浏览器的兼容性)
  • 搭建一个本地服务器
  • 网上下载一张网站首页psd素材


本作品的完整代码GitHub:查看完整代码点击这里


开始动手



网页素材如下:
个人小作品之某公司首页静态页面的制作_第1张图片


思路:

当我们拿到素材之后,接下来不是马上打开开发软件就开始div、css布局什么的,别慌,我们应该拿着素材分析分析,例如:该网页的分布形式是怎样的?该如何布局?此网页需要用到哪些前端知识,自己可以用画图软件先画画该页面的分布等,通过分析素材,可以将整个页面分成以下几个部分来布局,如:

个人小作品之某公司首页静态页面的制作_第2张图片


如图:整个页面分成三大部分:header头部、content内容部分、footer页脚部分,头部以可以分成header_top、nav导航栏两个部分;内容区域可以分成侧边栏、公司简介、服务范围三部分;页脚一个部分。

对照这个布局就可以简单地敲下代码:



正常书写代码来完成页面的制作。

应该注意的几点:

css部分开头部分应该有reset,每个浏览器都有一些自带的或者共有的默认样式,会造成一些布局上的困扰,css reset的作用就是重置这些默认样式,使样式表现一致,比如 *{margin:0;padding:0}就是一个最简单的css reset

如:
/* css reset */

body,ul,li,p,
h1,h2,h3,h4,
h5,h6,img {
  margin: 0;
  padding: 0;
}


body {
  font-family: "Microsost YaHei", "Sim Sun";
  font-size: 12px;
  color: #000;
}


ul,li {list-style: none;}


a {text-decoration: none; color: #000;}


img {
  border: 0;
  outline: 0;  
}








这段文字的背景不是简单地用图片来实现的,而是使用渐变属性来实现的,而且是透明的线性渐变:linear-gradient(rbga(255, 255, 255, 1))

rgba()有四个值,前三个是颜色值,第四个属性值有"1"和"0"两种,"1"表示不透明渐变,"0"表示透明渐变。


个人小作品之某公司首页静态页面的制作_第3张图片



有相似的地方可以用单独的类表示,用时可以引用这个类就行,这样就减少了代码量、冗余度。
.tongyong {
  height: 30px;
  padding-left: 10px;
  border-bottom: 1px solid #ccdae9;
  font-size: 14px;
  line-height: 30px;
  background: -moz-linear-gradient(to bottom,#cddbea, #f8fafc);
  background: -webkit-linear-gradient(to bottom,#cddbea, #f8fafc);
  background: -mos-linear-gradient(to bottom,#cddbea, #f8fafc);
  background: -o-linear-gradient(to bottom,#cddbea, #f8fafc);
  background: linear-gradient(to bottom,#cddbea, #f8fafc);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#cddbea', endColorstr='#f8fafc'); 
                    

你可能感兴趣的:(个人小作品)