接着昨天的写，居然有圆友找到了网站原网址，这里也一并弄出来了，发现他们做出来其实和原型图还有一点差异呢：
http://www.tmtpost.com/
原型图今天我们要做的是这张图，我在威客上面找了好久，终于找到一张较合适的图呀，今天我们就来无偿奉献下吧，有图有真相，先上图吧！！
这里也对自己提出要求，希望做出来的页面与设计图完全一致，但估计有点玄，希望大致一致吧，于是我们开始动手吧！
开始切图第一步，让我们先把背景图给搞下来吧，这个尺寸与大小我感觉应该合适吧。
第二步，将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 DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>title>
5 <link href="css/style.css" rel="stylesheet" type="text/css" />
6 head>
7 <body>
8 <header id="header">
9 <h1 class="logo">
10 <img src="images/logo.gif" />
11 h1>
12 <div class="header_tools">
13 <a href="Javascript:'">登陆a> / <a href="Javascript:'">注册a> <span><i class="rss">i> 订阅span>
14 <span><i class="save">i> 收藏span> <span><i class="like">i> 投稿通道span>
15 div>
16 <div class="search">
17 <input type="text" placeholder="请输入关键字" class="noborder" />
18 <span class="search_bt">搜索span>
19 div>
20 <nav class="nav">
21 <ul>
22 <li><a href="Javascript:'">首 页a><i>i>li>
23 <li><a href="Javascript:'">观 点a><i>i>li>
24 <li><a href="Javascript:'">深 度a><i>i>li>
25 <li><a href="Javascript:'">作 者a><i>i>li>
26 <li><a href="Javascript:'">标 签a><i>i>li>
27 <li><a href="Javascript:'">钛爱铂a><i>i>li>
28 <li><a href="Javascript:'">我的钛度a><i>i>li>
29 ul>
30 nav>
31 <div class="top_show">
32 <div class="fl">当前位置：<a href="Javascript:'">首 页a>div>
33 <div class="fr">热门：<a href="Javascript:'">新媒体a> <a href="Javascript:'">一周策划a> <a href="Javascript:'">新创业者说a> <a href="Javascript:'">妙史a> <a href="Javascript:'">钛能吐槽a>div>
34 <div class="clear">div>
35 div>
36 header>
37 <section id="main">
38 section>
39 <aside id="aside">
40 aside>
41 <footer id="footer">
42 footer>
43 body>
44 html>
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; color: #8c8b8b; }
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; }
25
26 #header { width: 1000px; margin: 0 auto; height: 160px; position: relative; }
27 .logo { display: inline-block; margin-top: 14px; }
28 .header_tools { display: inline-block; position: absolute; top: 10px; right: 0; }
29 .header_tools a { color: #8c8b8b; }
30 .header_tools span { display: inline-block; padding-left: 22px; position: relative; }
31
32 .header_tools i { display: inline-block; width: 20px; height: 20px; position: absolute; background: url("../images/icons.gif") no-repeat; left: 0; top: -4px; }
33 .header_tools .rss { background-position: -2px -2px;}
34 .header_tools .save { background-position: -22px -1px;}
35 .header_tools .like { background-position: -42px 0;}
36
37 .search { position: absolute; right: 0; top: 55px; }
38 .search input { width: 175px; height: 25px; line-height: 25px; background-color: #b6b6b6; }
39 .search_bt { text-indent: -99999px; display: inline-block; background: #5f5f5f url("../images/icons.gif") -2px -34px; width: 27px; height: 25px; float: right; cursor: pointer; margin-left: -2px; }
40 .nav { height: 38px; background: #707070 url("../images/bg_title.gif"); margin-top: 10px; }
41 .nav li{ display: inline-block; width: 92px; text-align: center; position: relative; }
42 .nav a{ color: White; font-size: 14px; font-weight: bold; line-height: 38px; }
43 .nav i{ display: inline-block; height: 38px; width: 2px; line-height: 38px; position: absolute; right: 0; background: -moz-linear-gradient(left, #acabab, #686868); }
44 .top_show { margin: 7px 0 14px;}
45 .top_show a{ color: #308ddb;}
PS：背景我本来想用渐变的，但是米有成功。。。。导航上的分割符就用了渐变啦。。。
第三步布局主体部分
我们看到主体部分还是很长的，主体是个标准的两列布局，我们还是使用float算了。。。于是就这个样子啦：
我们这里先做左边的东西，先来一个框吧：
光是左边还是不好，我们在右边也来一个呗，我们注意到左边有个比较通用的盒子模型，于是我们上手吧：
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; color: #666666; }
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 .fontb { font-weight: bold; }
17 .textl { text-align: left;}
18 .textr { text-align: right;}
19 .mtb2 { margin: 2px 0;}
20 .mtb4 { margin: 4px 0;}
21 .mtb6 { margin: 6px 0;}
22
23 .mt8 { margin-top: 8px; }
24 .mt12 { margin-top: 12px; }
25 .mt15 { margin-top: 15px; }
26 .mb10 { margin-bottom: 10px; }
27 .pd10 { padding: 10px;}
28 .pdtb5 { padding-top: 5px; padding-bottom: 5px; }
29 .pdtb10 { padding-top: 10px; padding-bottom: 10px; }
30 .pdlr5 { padding-left: 5px; padding-right: 5px; }
31 .pdlr10 { padding-left: 10px; padding-right: 10px; }
32
33 .wraper { width: 960px; margin: 0 auto;}
34
35 #header { position: relative; }
36 .logo { display: inline-block; margin-top: 14px; }
37 .header_tools { display: inline-block; position: absolute; top: 10px; right: 0; }
38 .header_tools a { color: #8c8b8b; }
39 .header_tools span { display: inline-block; padding-left: 22px; position: relative; }
40
41 .header_tools i { display: inline-block; width: 20px; height: 20px; position: absolute; background: url("../images/icons.gif") no-repeat; left: 0; top: -4px; }
42 .header_tools .rss { background-position: -2px -2px;}
43 .header_tools .save { background-position: -22px -1px;}
44 .header_tools .like { background-position: -42px 0;}
45
46 .search { position: absolute; right: 0; top: 55px; }
47 .search input { width: 175px; height: 25px; line-height: 25px; background-color: #b6b6b6; }
48 .search_bt { text-indent: -99999px; display: inline-block; background: #5f5f5f url("../images/icons.gif") -2px -34px; width: 27px; height: 25px; float: right; cursor: pointer; margin-left: -2px; }
49 .nav { height: 38px; background: #707070 url("../images/bg_title.gif"); margin-top: 10px; }
50 .nav li{ display: inline-block; width: 88px; text-align: center; position: relative; }
51 .nav a{ color: White; font-size: 14px; font-weight: bold; line-height: 38px; }
52 .nav i{ display: inline-block; height: 38px; width: 2px; line-height: 38px; position: absolute; right: 0; background: -moz-linear-gradient(left, #acabab, #686868); }
53 .top_show { margin: 7px 0 14px;}
54 .top_show a{ color: #308ddb;}
55
56 #main { width: 650px; }
57 .box_top { background:white; padding: 20px 16px; }
58 .box_top h2 { color: #636f76; font-size: 22px; }
59 .box_top p { margin: 10px 0 10px;}
60 .box_top .img { width: 612px; height: 318px;}
61 .box_top a { color: #308DDB; }
62
63
64 #aside { float: right; width: 290px; }
65 .box { background:white; }
66 .box .header{ background: #707070 url("../images/bg_title.gif"); height: 36px; line-height: 36px; color: White; font-size: 14px; padding: 0 10px; }
67 .box .main{ padding: 0 10px; }
68 .box .list { line-height: 20px; padding: 1px; }
69 .box .list li{ margin-bottom: 6px; }
70 .box .split { border-bottom: 1px dotted #cccccc; padding-bottom: 5px; }
71 .box .list h3 { line-height: 26px; }
72 .box .list img { float: left; padding: 0 12px 0 0; }
73 .box .pager { text-align: center; padding-bottom: 10px; }
74 .box .pager a { background: -moz-linear-gradient(top, #fafafa, #e7e7e7) ; display: inline-block; border: 1px solid #cdcdcd; padding: 6px 10px; border-radius: 5px; }
75
76
77 #footer { height: 100px;}
HTML
1 DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>title>
5 <link href="css/style.css" rel="stylesheet" type="text/css" />
6 head>
7 <body>
8 <div class="wraper">
9 <header id="header">
10 <h1 class="logo">
11 <img src="images/logo.gif" />
12 h1>
13 <div class="header_tools">
14 <a href="Javascript:'">登陆a> / <a href="Javascript:'">注册a> <span><i class="rss">i>
15 订阅span> <span><i class="save">i>收藏span> <span><i class="like">i>投稿通道span>
16 div>
17 <div class="search">
18 <input type="text" placeholder="请输入关键字" class="noborder" />
19 <span class="search_bt">搜索span>
20 div>
21 <nav class="nav">
22 <ul>
23 <li><a href="Javascript:'">首 页a><i>i>li>
24 <li><a href="Javascript:'">观 点a><i>i>li>
25 <li><a href="Javascript:'">深 度a><i>i>li>
26 <li><a href="Javascript:'">作 者a><i>i>li>
27 <li><a href="Javascript:'">标 签a><i>i>li>
28 <li><a href="Javascript:'">钛爱铂a><i>i>li>
29 <li><a href="Javascript:'">我的钛度a><i>i>li>
30 ul>
31 nav>
32 <div class="top_show clear">
33 <div class="fl">
34 当前位置：<a href="Javascript:'">首 页a>div>
35 <div class="fr">
36 热门：<a href="Javascript:'">新媒体a> <a href="Javascript:'">一周策划a> <a href="Javascript:'">
37 新创业者说a> <a href="Javascript:'">妙史a> <a href="Javascript:'">钛能吐槽a>div>
38 <div class="clear">
39 div>
40 div>
41 header>
42 <aside id="aside">
43 <div class="box">
44 <h2 class="header">
45 特色专栏h2>
46 <div class="main">
47 <ul class="list">
48 <li>
49 <img src="pics/aside01.png" />
50 <h3>
51 创业者法律课堂--创投法务后花园h3>
52 创业者法律课堂由商律师事务所推出，和创业者分享创业法律... li>
53 <li class="split ">
54 <h3>
55 商场无姐妹，一场忽视“敬业竟...h3>
56 肥而缺乏实际经营管理能力，在一次酒会上认识了静，静的虚情假意让菲儿放下了戒备，合约过于疏忽各种细节，叔叔确实不想抄了。。。li>
57 <li>
58 <img src="pics/aside02.png" />
59 <h3>
60 创业者法律课堂h3>
61 创业者法律课堂由商律师事务所推出，和创业者分享创业法律... li>
62 <li class="split ">
63 <h3>
64 商场无姐妹，一场忽视“敬业竟...h3>
65 肥而缺乏实际经营管理能力，在一次酒会上认识了静，静的虚情假意让菲儿放下了戒备，合约过于疏忽各种细节，叔叔确实不想抄了。。。li>
66 ul>
67 <div class="pager">
68 <a href="Javascript:'"><--上一篇>
69 <a href="Javascript:'">下一篇-->a>
70 div>
71 div>
72 div>
73 <div class="clear">
74 div>
75 aside>
76 <section id="main">
77 <div class="box_top">
78 <h2>
79 "虚拟运营商"英国样板解剖：乐购乐购！h2>
80 <p>
81 身处一个移动电话渗透率高达180%以上的成熟市场，美工零售巨头Tesco（乐购）的电信子公司，却通过零售商特有优势实现了持续的逆势增长...p>
82 <div class="img">
83 <img src="pics/01.png" />
84 div>
85 <div class="mtb4 textr pdlr10">
86 标签：<a href="Javascript:'">头条a>,<a href="Javascript:'">投稿a>,<a href="Javascript:'">电商a>,<a
87 href="Javascript:'">虚拟运营商a> 评论：（<a href="Javascript:'">12a>） 2013年04月18日8:31
88 <a class="fontb" href="Javascript:'">【前往头条】a>div>
89 div>
90 section>
91 div>
92 <footer id="footer">
93 footer>
94 body>
95 html>
上面右边小图标还没加上呢，于是我们给他加上吧，应该是绝对定位了。
好，接着左边往下做吧，最后写着写着，居然就写完了。。。。
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; font-family: "微软雅黑",Tahoma,Verdana,Geneva,sans-serif; color: #666666; word-break: break-all; word-wrap: break-word; }
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 .poa { position: absolute; }
12 .por { position: relative; }
13 .noborder { border: 0 none; }
14 .clear { clear: both; }
15 .fl { float: left; }
16 .fr { float: right; }
17 .fn { float: none; }
18 .fontb { font-weight: bold; }
19 .textl { text-align: left;}
20 .textc { text-align: center;}
21
22 .textr { text-align: right;}
23 .mtb2 { margin: 2px 0;}
24 .mtb4 { margin: 4px 0;}
25 .mtb6 { margin: 6px 0;}
26
27 .mt8 { margin-top: 8px; }
28 .mt12 { margin-top: 12px; }
29 .mt15 { margin-top: 15px; }
30 .mt10 { margin-top: 10px; }
31
32 .mb10 { margin-bottom: 10px; }
33 .pd10 { padding: 10px;}
34 .pdb10 { padding-bottom: 10px;}
35
36 .pdtb5 { padding-top: 5px; padding-bottom: 5px; }
37 .pdtb10 { padding-top: 10px; padding-bottom: 10px; }
38 .pdlr5 { padding-left: 5px; padding-right: 5px; }
39 .pdlr10 { padding-left: 10px; padding-right: 10px; }
40 .backwhite { background-color: White; }
41 .boxborder { border: 1px solid #c9c9c9;}
42 .bordersolid { border-style: solid;}
43 .button { background: -moz-linear-gradient(top, #fafafa, #e7e7e7); background: -webkit-linear-gradient(top, #fafafa, #e7e7e7); background: -o-linear-gradient(top, #fafafa, #e7e7e7); background: linear-gradient(top, #fafafa, #e7e7e7); display: inline-block; border: 1px solid #cdcdcd; padding: 4px 10px; border-radius: 5px;}
44
45
46 .wraper { width: 960px; margin: 0 auto;}
47
48 #header { position: relative; }
49 .logo { display: inline-block; margin-top: 14px; }
50 .header_tools { display: inline-block; position: absolute; top: 10px; right: 0; }
51 .header_tools a { color: #8c8b8b; }
52 .header_tools span { display: inline-block; padding-left: 22px; position: relative; }
53
54 .header_tools i { display: inline-block; width: 20px; height: 20px; position: absolute; background: url("../images/icons.gif") no-repeat; left: 0; top: -4px; }
55 .header_tools .rss { background-position: -2px -2px;}
56 .header_tools .save { background-position: -22px -1px;}
57 .header_tools .like { background-position: -42px 0;}
58
59 .search { position: absolute; right: 0; top: 55px; }
60 .search input { width: 175px; height: 25px; line-height: 25px; background-color: #b6b6b6; }
61 .search_bt { text-indent: -99999px; display: inline-block; background: #5f5f5f url("../images/icons.gif") -2px -34px; width: 27px; height: 25px; float: right; cursor: pointer; margin-left: -2px; }
62 .nav { height: 38px; background: #707070 url("../images/bg_title.gif"); margin-top: 10px; }
63 .nav li{ display: inline-block; width: 88px; text-align: center; position: relative; }
64 .nav a{ color: White; font-size: 14px; font-weight: bold; line-height: 38px; }
65 .nav i{ display: inline-block; height: 38px; width: 2px; line-height: 38px; position: absolute; right: 0; background: -moz-linear-gradient(left, #acabab, #686868); background: linear-gradient(left, #acabab, #686868); background: -webkit-linear-gradient(left, #acabab, #686868); background: -o-linear-gradient(left, #acabab, #686868);}
66 .top_show { margin: 7px 0 14px;}
67 .top_show a{ color: #308ddb;}
68
69 #main { width: 650px; float: left; }
70 .box_top { background: white; padding: 20px 16px; border: 1px solid #c9c9c9;}
71 .box_top h2 { color: #636f76; font-size: 22px; }
72 .box_top p { margin: 10px 0 10px;}
73 .box_top .img { width: 612px; height: 318px;}
74 .box_top a { color: #308DDB; }
75
76 .box_img { var cpro_id = "u6885494";
![[c++基础]STL](https://img.php1.cn/3c972/1edc8/c5a/a04ecc977fd8ed28.jpeg)
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有