【实战HTML5与CSS3】用HTML5和CSS3制作页面(上)

简介:
前言

周一离职并且入职了,于是开始了做新项目,那天我问了下前端大哥,我们做的项目需要兼容哪些浏览器,他说需要兼容IE9以上与chrome,ff,我一下就诡异的笑了。。。。

这不是HTML5与CSS3项目的温床吗?这次真的捡到宝了,再也不用担心IE678的问题了,可以肆意的使用最新的技术了。

紧接着问题也来了,我现在需要切图了,对于我这种前端,css一直是短板,更何况切图!!!说实话我还真没有完整的切一张图来试试,于是今天让我们来试试吧!!!

原型图

今天我们要做的是这张图,我在威客上面找了好久,终于找到一张较合适的图呀,今天我们就来无偿奉献下吧,有图有真相,先上图吧!!



这里也对自己提出要求,希望做出来的页面与设计图完全一致,但估计有点玄,希望大致一致吧,于是我们开始动手吧!

开始切图

第一步,让我们先把背景图给搞下来吧,这个尺寸与大小我感觉应该合适吧。



第二步,将logo剪切了



第三步,我们看看会用到哪些小图标,先全部给抠下来吧,暂时只弄了这么多需要再弄吧:



我PS水平更加水到没边了,完全初学水平,暂时就这样吧。。。

开始布局

第一步,重设浏览器样式

简单css
于是我们的界面变成了这个样子了:


第二步,开始布局头部

他这个是典型的两栏布局,所以我们先做头好了。

头部代码
css代码


PS:背景我本来想用渐变的,但是米有成功。。。。导航上的分割符就用了渐变啦。。。

第三步布局主体部分

我们看到主体部分还是很长的,主体是个标准的两列布局,我们还是使用float算了。。。于是就这个样子啦:



我们这里先做左边的东西,先来一个框吧:



光是左边还是不好,我们在右边也来一个呗,我们注意到左边有个比较通用的盒子模型,于是我们上手吧:

 

CSS
HTML
结语

好了,今天时间不早了,暂时做到这个程度,明天将它结束吧。

源码下载:http://files.cnblogs.com/yexiaochai/16%E5%B8%83%E5%B1%80.zip

 




本文转自叶小钗博客园博客,原文链接:http://www.cnblogs.com/yexiaochai/archive/2013/05/04/3059375.html,如需转载请自行联系原作者
相关文章
|
11天前
|
前端开发 JavaScript 开发工具
【HTML/CSS】入门导学篇
【HTML/CSS】入门导学篇
21 0
|
1天前
|
数据采集 前端开发 网络协议
如何使用代理IP通过HTML和CSS采集数据
如何使用代理IP通过HTML和CSS采集数据
|
6天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
15 1
|
6天前
|
PHP
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
|
12天前
|
JSON JavaScript 前端开发
js是什么、html、css
js是什么、html、css
|
14天前
|
XML 前端开发 JavaScript
css和html
【4月更文挑战第7天】css和html
12 0
|
30天前
|
前端开发 容器 内存技术
使用CSS3画出一个叮当猫HTML源码
本文教程介绍了如何使用CSS3绘制叮当猫,通过HTML结构和CSS样式逐步构建叮当猫的各个部位,如头部、脸部、脖子、身体、手脚等。代码示例展示了如何利用渐变、边框、阴影和定位技巧实现三维效果和细节特征。此外,还添加了眼珠的动画效果,让叮当猫的眼睛能够转动。整个过程适合对CSS3感兴趣的读者参考学习,以提升动态图形创作技能。
16 0
使用CSS3画出一个叮当猫HTML源码
|
前端开发
|
1月前
|
XML 编解码 前端开发
编程笔记 html5&css&js 033 HTML SVG
编程笔记 html5&css&js 033 HTML SVG