今天没有去学习新的知识点，而是自己动手复习了一遍如何搭建静态网页首页。
把一张psd图片转化成pc端静态网页。
1、首先设置确定好中心样式
/* 中心板式 */
.logo-warp,.banner-warp,.content-warp,.main-warp,.new-warp,.bottom-warp{
width: 1086px;
margin: 0px auto;
}2、根据psd图片确定几个大的div分布，直接上代码
<body>
<div class="logo">
<div class="logo-warp">
<!-- logo图片 -->
<div class="logoimg">
<img src="image/logo.png" >
</div>
<!-- 右边导航栏 -->
<div class="nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>PROTFOLIO</li>
<li>SERVICE</li>
<li>NEWS</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</div>
<div class="banner">
<div class="banner-warp">
<img src="image/banner.png" >
<!-- 小按钮 -->
<ul>
<li></li>
<li class="can"></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class="content">
<div class="content-warp">
<div class="fuwu">
<p><img class="img01" src="image/img02.png" ></p>
<span>服务范围</span>
<p><img class="img02" src="image/img02.png" ></p>
<span id="our">
our services
</span>
</div>
<div class="content-img">
<dl>
<dt><img src="image/web1.png" ></dt>
<dd>1.web design</dd><br />
<dd>企业品牌网站设计/手机网站制作<br /> 动画网站创意设计</dd>
</dl>
<dl>
<dt><img src="image/graphic1.png" ></dt>
<dd>2.graphic design</dd><br />
<dd>标志logo设计/产品宣传册设计<br /> 企业广告/海报设计</dd>
</dl>
<dl>
<dt><img src="image/e-bussiness1.png" ></dt>
<dd>3.e-business plan</dd><br />
<dd>淘宝/天猫装修设计及运营推广<br /> 企业微博、微信营销</dd>
</dl>
<dl>
<dt><img src="image/mail1.png" ></dt>
<dd>4.mailboxagents</dd><br />
<dd>腾讯/网易企业邮箱品牌代理<br /> 个性化邮箱定制开发</dd>
</dl>
</div>
</div>
</div>
<div class="main">
<div class="main-warp">
<div class="kehu">
<p><img class="img01" src="image/img02.png" ></p>
<span>{ 客户案例 }</span>
<p><img class="img02" src="image/img02.png" ></p>
<br>
<span id="our01">
With the best professional technology, to design the best innovative web site
</span>
</div>
<div class="mainimg">
<img src="image/8549.png" >
<img src="image/6750.png" >
<img src="image/6226.png" >
</div>
<div class="yuan">
view more
</div>
</div>
</div>
<div class="news">
<div class="new-warp">
<div class="fuwu">
<p><img class="img01" src="image/img02.png" ></p>
<span>最新资讯</span>
<p><img class="img02" src="image/img02.png" ></p>
<span id="our">
TEH LATEST NEWS
</span>
</div>
<div class="case">
<div class="case-left">
<img src="image/xs1.png" >
</div>
<div class="case-right">
<div class="right-top">
<div class="box1">
09<br /><span>Jan</span>
</div>
<div class="box2">网站排名进入前三的技巧说明<br />
<span class="fon">很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎<br />
首页，更不用说进首页前三了。那么网站优...</span>
</div>
<div class="box1">
08<br /><span>Jan</span>
</div>
<div class="box2">flash网站制作的优缺点<br />
<span class="fon">虽然HTML5程序语言出现，大有逐渐代替Flash网站制作的意味,
但是过于生硬的HTML5动画效果，始终...</span>
</div>
</div>
<div class="right-bottom">
<div class="box1">
07<br /><span>Jan</span>
</div>
<div class="box2">做个网站多少钱？<br />
<span class="fon">“做个网站多少钱？”很多客户打电话过来直接第一句就抛出来的问题。这好比买辆车多少钱，你是要...</span>
</div>
<div class="box1">
06<br /><span>Jan</span>
</div>
<div class="box2">哪些网站优化手法属于网站过度优化<br />
<span class="fon">大部分人都想让自己的网站，一夜之间出现在搜索引擎首页，独占鳌头。但是事实告诉我们罗马不是一...</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bottom">
<div class="bottom-warp">
<span>Copyright 2006- 2014 Bowenshangmei Culture All Rights Reserved</span>
<span>Home | About | Portfolio | Contact</span>
</div>
</div>
</body>emmm，我果然还是个小菜鸟，做个静态页面也花了挺长时间，还是要多练呀！！！
101
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
