css3网站代码 html5_【实战HTML5与CSS3】用HTML5和CSS3制作页面(上)

前言

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

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

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

原型图

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

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

开始切图

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

第二步,将logo剪切了

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

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

开始布局

第一步,重设浏览器样式

简单css

1 body, ol, ul, h1, h2, h3, h4, h5, h6, p, th, td, dl, dd, form, fieldset, legend, input, textarea, select{margin:0;padding:0; }

2 body{background:#e5e5e5 url("../images/bg_body.gif");font:12px "宋体","Arial Narrow",HELVETICA; }

3 a{color:#2D374B;text-decoration:none; }

4 a:hover{color:#CD0200;text-decoration:underline; }

5 em{font-style:normal; }

6 li{list-style:none outside none; }

7 img{border:0 none;vertical-align:middle; }

8 table{border-collapse:collapse;border-spacing:0; }

9 p{word-wrap:break-word; }

10 .block{display:block; }

11 .noborder{border:0 none; }

12 .clear{clear:both; }

13 .fl{float:left; }

14 .fr{float:right; }

15 .fn{float:none; }

16 .mt8{margin-top:8px; }

17 .mt12{margin-top:12px; }

18 .mt15{margin-top:15px; }

19 .mb10{margin-bottom:10px; }

20 .pd10{padding:10px;}

21 .pdtb5{padding-top:5px;padding-bottom:5px; }

22 .pdtb10{padding-top:10px;padding-bottom:10px; }

23 .pdlr5{padding-left:5px;padding-right:5px; }

24 .pdlr10{padding-left:10px;padding-right:10px; }

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

第二步,开始布局头部

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

头部代码

1

2

3

4

5

6

7

8

9

10

11

12

13 登陆 / 注册 订阅

14 收藏 投稿通道

15

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值