用实例详细讲解将PSD转成HTMLCSS

2024-01-13 20:30
文章标签 讲解 css 实例 html 详细 frontend 转成 psd

本文主要是介绍用实例详细讲解将PSD转成HTMLCSS，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！




将PSD转成一个静态的html/css对一些朋友来说是一个很大的困扰。这个教程通过对一个完整实例的详细讲解，来教大家如何将psd转成html/css，以及JS插件的使用，制作完成的html/css页面兼容各种主流浏览器。

我们将设计页面分成基本的5个部分，每一个部分都有自己的容器wrapper和内容。基本的流程是先编写Html代码，然后通过编写CSS来还原psd设计稿。

photography-psd-template-thumb.png (221.95 KB, 下载次数: 96)

下载附件  保存到图库

2011-3-30 15:43 上传


1. 我们需要从PSD文件得到什么？

如下图，我们只需要从这个psd文件得到4个非常基本的东西。推荐内容(featured)的背景、底部背景、欢迎文字（Welcome）、推荐图片的框（少女面部图的白色透明边框）。其余的部分我们只需要通过CSS生成或者在html里嵌入相应图片。

下图红线圈起来的地方，就是我们需要从psd获取的内容。本部分内容需要读者具备一定的Photoshop的基础知识和操作能力。
你可以借助Photoshop的切片工具或者自己手动切片，并将其保存成相应的图片格式。

photography-psd-slices-thumb.jpg (42.91 KB, 下载次数: 33)

下载附件  保存到图库

2011-3-30 15:50 上传


2.设置站点

为一个网站设置良好的开发环境是非常重要的，我已经创建了一个非常基本的文件夹结构来建立这个网站，下面是文件夹结构设置，也可称之为模板。

文件夹结构下面这个文件夹结构是由html文件、CSS文件、js等文件组成，你可以根据自己的需要调整文件夹结构。

folder-structure.png (4 KB, 下载次数: 14)

下载附件  保存到图库

2011-3-30 15:51 上传



  • 根目录

    • 这是放置index首页文件的地方
    • 这是网站的顶级目录
  • JavaScript 文件夹

    • 这是放置JS文件或者js框架jquery的地方
    • 我们在这个教程用到的jquery插件Nivo-Slider（做推荐内容）也放在这个文件夹里
  • 样式（Styles ）文件夹

    • 这里是存放css文件的地方，网页所要用到的图片放在另一个独立的文件夹，图片文件夹还包括两个子文件夹:
    • Images: 这是我们存放推荐内容部分的图片以及网站展示的图片的地方
    • Template: 这是存放和网页设计样式相关图片的地方，比如说底部背景图
具体文件的放置

将index.html文件放置在根目录，这个文件也是我们编写html代码的文件。
将jquery插件Nivo-Slider里面的三个文件jQuery-1.4.2.min.js和HTML5-Shiv.js以及Nivo-Slider.min.js放到Javascript文件夹。
将两个css文件，reset.css和global.css放到样式文件夹。
这样我们的文件夹结构设置就差不多完成了。

3.编写HTML代码

1）编写首页Html文件

将psd转换成html/css的工作流程是先编写出html文件，随后再编写css，并加入js动态效果。
下面我们会一步步讲解html的编写，先编写出大概完整的框架，代码如下：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <!-- Site Title -->
  5. <title>PSD to HTML: A Photography Site</title>

  7. <!-- Meta Data -->
  8. <meta charset="UTF-8" />
  9. </head>
  10. <body>

  12. </body>
  13. </html>
复制代码

2）编写html文件的head部分

下面我们要开始为刚才的html文件添加细节。首先是head部分，在head部分我们要添加一些meta信息，这样有利于搜索引擎读取。

我们增加了keywords、authors、description、copyright等meta信息，并把语言编码设置为utf-8。代码如下:
  1. <meta name="keywords" content="photography, commercials, exposure videos, senior pictures">
  2. <meta name="description" content="Your company description.">
  3. <meta name="author" content="TutToaster.com/authors/CodyRobertson">
  4. <meta name="copyright" content="Copyright 2010 TutToaster.com">
  5. <meta name="robots" content="follow, index">
复制代码

现在要开始在html载入一些必须js和css的文件，以便让这些文件起作用，同时为了考虑到浏览器的兼容性，还增加了一些相应的判断条件。具体代码如下：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <!-- Site Title -->
  5. <title>PSD to HTML: A Photography Site</title>

  7. <!-- Meta Data -->
  8. <meta charset="UTF-8" />
  9. <meta name="keywords" content="photography, commercials, exposure videos, senior pictures">
  10. <meta name="description" content="Your company description.">
  11. <meta name="author" content="TutToaster.com/authors/CodyRobertson">
  12. <meta name="copyright" content="Copyright 2010 TutToaster.com">
  13. <meta name="robots" content="follow, index">

  15. <!-- Site Theme Styling -->
  16. <link rel="stylesheet" href="style/reset.css" />
  17. <link rel="stylesheet" href="style/global.css" />

  19. <!--[if lt IE 9]>
  20. <script type="text/javascript" src="javascript/HTML5-Shiv.js"></script>
  21. <![endif] -->
  22. </head>
  23. <body>

  25. <!-- jQuery and Nivo Slider -->
  26. <script type="text/javascript" src="javascript/jQuery-1.4.2.min.js"></script>
  27. <script type="text/javascript" src="javascript/Nivo-Slider.min.js"></script>
  28. </body>
  29. </html>
复制代码

3）编写html的body部分

body部分是html文件的主要部分，网页上显示主要是body部分的内容，我们会将这个网页的布局分成以下5个部分：header、featured、status、content、footer。我们为每个部分增加一个div并在每个部分的内部加一个类名为container的div。
  1. <div id="header">
  2. <div class="container">

  4. </div>
  5. </div>
  6. <div id="featured">
  7. <div class="container">

  9. </div>
  10. </div>
  11. <div id="status">
  12. <div class="container">

  14. </div>
  15. </div>
  16. <div id="cotent">
  17. <div class="container">

  19. </div>
  20. </div>
  21. <div id="footer">
  22. <div class="container">

  24. </div>
  25. </div>

复制代码

04）编写#header部分

这个网页的header部分主要由两部分组成，一个是logo，另一个是导航栏。logo是简单div，而导航栏则是列表ul。
  1. <!-- Logo -->
  2. <h1 id="logo">YourLogo</h1>

  4. <!-- Navigation Menu -->
  5. <ul id="menu">
  6. <li class="active"><a href="#">HOME</a></li>
  7. <li><a href="#">PHOTOGRAPHY</a></li>
  8. <li><a href="#">COMMERCIALS</a></li>
  9. <li><a href="#">SPORTS</a></li>
  10. <li><a href="#">EXPOSURE VIDEOS</a></li>
  11. <li><a href="#">CONTACT</a></li>
  12. </ul>
复制代码

05）编写#featured部分

网页的#featured是我们放置推荐内容的部分，这部分也有两部分组成，一个是欢迎文字（welcome），另一个滑动图片Slider。

Welcome区域

welcome区域是一个id为welcome的div，由标题文字和描述文字组成，标题文字h2的显示用图片来代替。描述的文字用p标签包起来。
  1. <div id="welcome">
  2. <h2>Welcome</h2>
  3. <p>Welcome to Your Site! We are a full service production company, and are a one-stop shop for your production needs. We love interacting with people and have a passion for creating a product that wows! As a husband and wife team and graduates of Specs Howard School of Broadcast Arts, we love to learn new things and are continually striving to perfect our craft.</p>
  4. <p>Whether it be Family Photographs, a College Sports Exposure Video, Senior Pictures, or Video Editing, we do it all! Thanks for stopping by and feel free to look around!!!</p>
  5. </div>

复制代码

Slider区域

slider区域由一个透明边框和几张滑动图片组成。滑动图片放在class为slides的列表里边。

  1. <div id="slider">
  2. <div id="frame"> </div>
  3. <ul class="slides">
  4. <li><img src="style/images/slider-placeholder.png" /></li>
  5. <li><img src="style/images/slider-placeholder2.png" /></li>
  6. <li><img src="style/images/slider-placeholder.png" /></li>
  7. <li><img src="style/images/slider-placeholder2.png" /></li>
  8. </ul>
  9. </div>
复制代码

完整的#featured部分的代码

下面是完整的#featured部分的代码，读者可以参照对比查看。

  1. <div id="featured">
  2. <div class="container">
  3. <!-- Welcome Text/Site Welcome -->
  4. <div id="welcome">
  5. <h2>Welcome</h2>
  6. <p>Welcome to Your Site! We are a full service production company, and are a one-stop shop for your production needs. We love interacting with people and have a passion for creating a product that wows! As a husband and wife team and graduates of Specs Howard School of Broadcast Arts, we love to learn new things and are continually striving to perfect our craft.</p>
  7. <p>Whether it be Family Photographs, a College Sports Exposure Video, Senior Pictures, or Video Editing, we do it all! Thanks for stopping by and feel free to look around!!!</p>
  8. </div>

  10. <!-- Nivo-Slider -->
  11. <div id="slider">
  12. <div id="frame"> </div>
  13. <ul class="slides">
  14. <li><img src="style/images/slider-placeholder.png" /></li>
  15. <li><img src="style/images/slider-placeholder2.png" /></li>
  16. <li><img src="style/images/slider-placeholder.png" /></li>
  17. <li><img src="style/images/slider-placeholder2.png" /></li>
  18. </ul>
  19. </div>
  20. </div>
  21. </div>
复制代码

6）编写#status部分

这部分非常简单，由一段文字和一个按钮组成。

  1. <div id="status">
  2. <div class="container">
  3. <span>I am currently accepting new projects/appointmentsat this time.</span>
  4. <button>Hire Me</button>
  5. </div>
  6. </div>
复制代码

7）编写#content部分

在psd文件中，你可以看到#content部分的内容会比较多一点，所以我将它按上下分成两个部分。

第一部分

在psd文件中，你可以看到，第一部分由两块区域组成，这两块区域各占据了50%的宽度，一个区域是About Us，另一个区域是What others think，两个区域都有一个标题和一些文字描述。

  1. <div id="about_us">
  2. <h3>A little about us...</h3>
  3. <p>We are a full service production companel that company that is your one stop needs, weither it be family photographs, a college sport exposure video, senior pictures or.</p>
  4. </div>
  5. <div id="others_say">
  6. <h3>What others think...</h3>
  7. <p>When I first came to Johnny for a first time job I was a bit nervous n how the service would be, but after the first job and how smooth it went i’ll never go anywhere else.
  8. <br /><cite>- Cody Robertson (<a href="#">Website</a>)</cite>
  9. </p>
  10. </div>

复制代码

第二部分

第二部分是由四个各占据25%宽度的小区域组成，这些小区域是由一些预览图、标题和文字组成。

  1. <ul id="services">
  2. <!-- Photography -->
  3. <li>
  4. <img src="style/images/service_preview_1.gif" alt="placeholder" />
  5. <h4>Photography</h4>
  6. <p>Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel, semper a, posuere in, orci. Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel.</p>
  7. </li>

  9. <!-- Commercials -->
  10. <li>
  11. <img src="style/images/service_preview_2.gif" alt="placeholder" />
  12. <h4>Commercials</h4>
  13. <p>Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel, semper a, posuere in, orci. Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel.</p>
  14. </li>

  16. <!-- Sports -->
  17. <li>
  18. <img src="style/images/service_preview_3.gif" alt="plceholder" />
  19. <h4>Sports</h4>
  20. <p>Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel, semper a, posuere in, orci. Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel.</p>
  21. </li>

  23. <!-- Exposure Videos -->
  24. <li>
  25. <img src="style/images/service_preview_1.gif" alt="placeholder" />
  26. <h4>Exposure Videos</h4>
  27. <p>Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel, semper a, posuere in, orci. Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel.</p>
  28. </li>
  29. </ul>
复制代码

8）编写#footer部分

现在是#footer部分的编写，包含一些联系信息和版权信息等。

  1. <ul id="footer-widgets">
  2. <li>
  3. <h5>Contact Us</h5>
  4. <ul>
  5. <li>3352 Streetname rd.</li>
  6. <li>Commerce Township, MI, 48382.</li>
  7. <li> </li>
  8. <li>Tell: (248)838-9823</li>
  9. <li>Fax: (248)942-2342</li>
  10. <li>Email: johnnywaller@me.com</li>
  11. </ul>
  12. </li>
  13. <li>
  14. <h5>Services</h5>
  15. <ul>
  16. <li><a href="#">Home</a></li>
  17. <li><a href="#">Photography</a></li>
  18. <li><a href="#">Commercials</a></li>
  19. <li><a href="#">Sports</a></li>
  20. <li><a href="#">Exposure Videos</a></li>
  21. <li><a href="#">Contact</a></li>
  22. </ul>
  23. </li>
  24. <li>
  25. <h5>About Johnny</h5>
  26. <p>Hey, my name is Johnny, this is a quick little one or two sentences about how im awesome and you should pay me money to do stuff for you!</p>
  27. </li>
  28. <li>
  29. <h5>About Amber</h5>
  30. <p>Hey, my name is Amber, this is a quick little one or two sentences about how im awesome and you should pay me money to do stuff for you!</p>
  31. </li>
  32. </ul>

  34. <!-- Positioning Fix -->
  35. <br class="clear" />
  36. <br /><br />

  38. <!-- Copyright -->
  39. <div id="copyright">
  40. <span>&copy; Copywright 2010 TutToaster.com. All Rights Reserved.</span>
  41. <a href="#">Back to top</a>
  42. </div>
复制代码
Html最终显示结果下图是我们编写好的html文件的最终显示结果，下面还有一份完整的html的代码，方便读者阅读对比。

ps.jpg (27.7 KB, 下载次数: 19)

下载附件  保存到图库

2011-3-30 16:14 上传

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <!-- Site Title -->
  5. <title>PSD to HTML: A Photography Site</title>

  7. <!-- Meta Data -->
  8. <meta charset="UTF-8" />
  9. <meta name="keywords" content="photography, commercials, exposure videos, senior pictures">
  10. <meta name="description" content="Your company description.">
  11. <meta name="author" content="TutToaster.com/authors/CodyRobertson">
  12. <meta name="copyright" content="Copyright 2010 TutToaster.com">
  13. <meta name="robots" content="follow, index">

  15. <!-- Site Theme Styling -->
  16. <link rel="stylesheet" href="style/reset.css" />
  17. <link rel="stylesheet" href="style/global.css" />

  19. <!--[if lt IE 9]>
  20. <script type="text/javascript" src="javascript/HTML5-Shiv.js"></script>
  21. <![endif] -->
  22. </head>
  23. <body>
  24. <div id="header">
  25. <div class="container">
  26. <!-- Logo -->
  27. <h1 id="logo">YourSite Title</h1>

  29. <!-- Navigation Menu -->
  30. <ul id="menu">
  31. <li class="active"><a href="#">HOME</a></li>
  32. <li><a href="#">PHOTOGRAPHY</a></li>
  33. <li><a href="#">COMMERCIALS</a></li>
  34. <li><a href="#">SPORTS</a></li>
  35. <li><a href="#">EXPOSURE VIDEOS</a></li>
  36. <li><a href="#">CONTACT</a></li>
  37. </ul>
  38. </div>
  39. </div>
  40. <div id="featured">
  41. <div class="container">
  42. <!-- Welcome Text/Site Welcome -->
  43. <div id="welcome">
  44. <h2>Welcome</h2>
  45. <p>Welcome to Johnny Waller Productions! We are a full service production company, and are a one-stop shop for your production needs. We love interacting with people and have a passion for creating a product that wows! As a husband and wife team and graduates of Specs Howard School of Broadcast Arts, we love to learn new things and are continually striving to perfect our craft.</p>
  46. <p>Whether it be Family Photographs, a College Sports Exposure Video, Senior Pictures, or Video Editing, we do it all! Thanks for stopping by and feel free to look around!!!</p>
  47. </div>

  49. <!-- Nivo-Slider -->
  50. <div id="slider">
  51. <div id="frame"> </div>
  52. <ul class="slides">
  53. <li><img src="style/images/slider-placeholder.png" /></li>
  54. <li><img src="style/images/slider-placeholder2.png" /></li>
  55. </ul>
  56. </div>
  57. </div>
  58. </div>
  59. <div id="content">
  60. <!-- Working Status -->
  61. <div id="status">
  62. <div class="container">
  63. <span id="avalibility">I am currently accepting new projects/appointmentsat this time.</span>
  64. <button>Hire Me</button>
  65. </div>
  66. </div>

  68. <div class="container" id="main">
  69. <!-- About Us/What They Say -->
  70. <div id="about_us">
  71. <h3>A little about us...</h3>
  72. <p>We are a full service production companel that company that is your one stop needs, weither it be family photographs, a college sport exposure video, senior pictures or.</p>
  73. </div>
  74. <div id="others_say">
  75. <h3>What others think...</h3>
  76. <p>When I first came to Johnny for a first time job I was a bit nervous n how the service would be, but after the first job and how smooth it went i’ll never go anywhere else.
  77. <br /><cite>- Cody Robertson (<a href="#">Website</a>)</cite>
  78. </p>
  79. </div>

  81. <!-- Clear Fix -->
  82. <br class="clear" />

  84. <!-- Services -->
  85. <ul id="services">
  86. <!-- Photography -->
  87. <li>
  88. <img src="style/images/service_preview_1.gif" alt="placeholder" />
  89. <h4>Photography</h4>
  90. <p>Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel, semper a, posuere in, orci. Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel.</p>
  91. </li>

  93. <!-- Commercials -->
  94. <li>
  95. <img src="style/images/service_preview_2.gif" alt="placeholder" />
  96. <h4>Commercials</h4>
  97. <p>Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel, semper a, posuere in, orci. Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel.</p>
  98. </li>

  100. <!-- Sports -->
  101. <li>
  102. <img src="style/images/service_preview_3.gif" alt="plceholder" />
  103. <h4>Sports</h4>
  104. <p>Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel, semper a, posuere in, orci. Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel.</p>
  105. </li>

  107. <!-- Exposure Videos -->
  108. <li>
  109. <img src="style/images/service_preview_1.gif" alt="placeholder" />
  110. <h4>Exposure Videos</h4>
  111. <p>Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel, semper a, posuere in, orci. Praesent imperdiet nulla at tortor. Phasellus non lectus eget massa rhoncus consequat. Donec lectus ligula, posuere vel.</p>
  112. </li>
  113. </ul>
  114. </div>
  115. </div>
  116. <div id="footer">
  117. <div class="container">
  118. <!-- Footer Widgets -->
  119. <ul id="footer-widgets">
  120. <li>
  121. <h5>Contact Us</h5>
  122. <ul>
  123. <li>3352 Streetname rd.</li>
  124. <li>Commerce Township, MI, 48382.</li>
  125. <li> </li>
  126. <li>Tell: (248)838-9823</li>
  127. <li>Fax: (248)942-2342</li>
  128. <li>Email: johnnywaller@me.com</li>
  129. </ul>
  130. </li>
  131. <li>
  132. <h5>Services</h5>
  133. <ul>
  134. <li><a href="#">Home</a></li>
  135. <li><a href="#">Photography</a></li>
  136. <li><a href="#">Commercials</a></li>
  137. <li><a href="#">Sports</a></li>
  138. <li><a href="#">Exposure Videos</a></li>
  139. <li><a href="#">Contact</a></li>
  140. </ul>
  141. </li>
  142. <li>
  143. <h5>About Johnny</h5>
  144. <p>Hey, my name is Johnny, this is a quick little one or two sentences about how im awesome and you should pay me money to do stuff for you!</p>
  145. </li>
  146. <li>
  147. <h5>About Amber</h5>
  148. <p>Hey, my name is Amber, this is a quick little one or two sentences about how im awesome and you should pay me money to do stuff for you!</p>
  149. </li>
  150. </ul>

  152. <!-- Positioning Fix -->
  153. <br class="clear" />
  154. <br /><br />

  156. <!-- Copyright -->
  157. <div id="copyright">
  158. <span>&copy; Copywright 2010 TutToaster.com. All Rights Reserved.</span>
  159. <a href="#">Back to top</a>
  160. </div>
  161. </div>
  162. </div>

  164. <!-- jQuery and Nivo Slider -->
  165. <script type="text/javascript" src="javascript/jQuery-1.4.2.min.js"></script>
  166. <script type="text/javascript" src="javascript/Nivo-Slider.min.js"></script>
  167. </body>
  168. </html>

复制代码

4.为HTML编写CSS样式

我们将css文件分成两个，一个是css重置文件，css reset可以让html元素在各个浏览器上有相同的显示效果，有关于css的重置（css reset）读者可以去查阅相关的资料，这里的CSS reset文件的代码主要来自于雅虎的YUI reset。另一个文件css文件是这个网页的样式。

1）Reset.css
  1. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
  2. margin:0;
  3. padding:0;
  4. }
  5. table {
  6. border-collapse:collapse;
  7. border-spacing:0;
  8. }
  9. fieldset,img {
  10. border:0;
  11. }
  12. address,caption,cite,code,dfn,em,strong,th,var {
  13. font-style:normal;
  14. font-weight:normal;
  15. }
  16. ol,ul {
  17. list-style:none;
  18. }
  19. caption,th {
  20. text-align:left;
  21. }
  22. h1,h2,h3,h4,h5,h6 {
  23. font-size:100%;
  24. font-weight:normal;
  25. }
  26. q:before,q:after {
  27. content:'';
  28. }
  29. abbr,acronym { border:0;
  30. }
复制代码

2）基本的样式

首先我们要为网页做一些基本的css样式，包括文字字体、基本结构等。下面开始设置背景色、字体、去掉超链接的下划线以及一些容器的尺寸。
  1. body {
  2. background: #F2F2F2;
  3. font: 10px Verdana;
  4. }

  6. a {
  7. text-decoration: none;
  8. }

  10. p, span {
  11. line-height: 20px;
  12. }

  14. #header, #featured, #content, #footer {
  15. overflow: hidden;
  16. }

  18. .container {
  19. margin: 0 auto;
  20. width: 1024px;
  21. }

  23. .clear {
  24. clear: both;
  25. }

复制代码

现在的css样式效果如下：

ps2.jpg (28.2 KB, 下载次数: 3)

下载附件  保存到图库

2011-3-30 16:19 上传



3）编写#header的样式
现在开始为header部分编写样式，将header部分的高设为68px，背景为灰色，2px的下边框。

通过将logo文字的text-indent设为-9999px，可以让图像来代替文字的显示。然后我们为导航栏设置左浮动（float：left），让它变成横向导航。通过增加一个.active来编写导航栏当前页的样式。
  1. #header {
  2. background: #171717;
  3. border-bottom: 2px solid #252525;
  4. height: 68px;
  5. }

  7. #header #logo {
  8. float: left;
  9. text-indent: -9999px;
  10. }

  12. #header ul {
  13. float: right;
  14. height: 68px;
  15. padding: 17px 0;
  16. }

  18. #header ul li {
  19. color: #D1D1D1;
  20. display: block;
  21. float: left;
  22. font: bold 10px Verdana;
  23. padding: 10px 15px;
  24. }

  26. #header ul li a {
  27. color: #D1D1D1;
  28. text-decoration: none;
  29. }

  31. #header ul li a:hover {
  32. color: #FFF;
  33. }

  35. #header ul li:hover a {
  36. color: #FFF;
  37. }

  39. #header ul li.active {
  40. background: #252525;
  41. border-radius: 2px;
  42. -webkit-border-radius: 2px;
  43. -moz-border-radius: 2px;
  44. -o-border-radius: 2px;
  45. }

  47. #header ul li.active a {
  48. color: #FFF;
  49. }

  51. #header ul li:last-child {
  52. padding: 10px 0 10px 15px;
  53. }

复制代码

现在的css样式效果如下：

ps3.jpg (28.34 KB, 下载次数: 1)

下载附件  保存到图库

2011-3-30 16:20 上传


4）编写#featured部分样式
我们为featured部分添加相应的背景，这个背景设为水平居中，这样即使图片比一些屏幕分辨率大，也能居中显示。然后我们要将welcome部分的文字设为不可见，这样我们就可以用图像来代替它。
同时为welcome下的文字加一些css3的属性，文字阴影。

  1. #featured {
  2. background: #476D13 url('layout/header.png') no-repeat center top;
  3. height: 290px;
  4. }

  6. #featured #welcome {
  7. float: left;
  8. width: 440px;
  9. }

  11. #featured #welcome h2 {
  12. background: url('layout/welcome.png') no-repeat left top;
  13. line-height: 57px;
  14. padding: 0 0 20px;
  15. text-indent: -9999px;
  16. }

  18. #featured #welcome p {
  19. color: #FFF;
  20. font: 10px Verdana;
  21. line-height: 20px;
  22. margin: 15px 0;
  23. text-shadow: 0px 1px 0px #3F6211;
  24. -webkit-text-shadow: 0px 1px 0px #3F6211;
  25. -moz-text-shadow: 0px 1px 0px #3F6211;
  26. -o-text-shadow: 0px 1px 0px #3F6211;
  27. }

复制代码

5）编写#slider 的样式

slider部分样式编写也比较简单，我们将slider的overflow设为hidden，这样超出slider区域部分的内容就不会显示出来。边框的部分用绝对定位的方式（position：absolute），将透明的边框覆盖在slider的图片上。
  1. #featured #slider {
  2. float: right;
  3. position: relative;
  4. width: 512px;
  5. overflow: hidden;
  6. }

  8. #slider #frame {
  9. background: transparent url('layout/frame.png') no-repeat center top;
  10. height:300px;
  11. position: absolute;
  12. top: 0;
  13. left: 0;
  14. width: 512px;
  15. z-index: 100;
  16. }

复制代码

现在的css样式效果如下图：

ps5.jpg (33.67 KB, 下载次数: 3)

下载附件  保存到图库

2011-3-30 16:21 上传


6）编写#status样式
这个部分只是一段文字和一个按钮，因为#featured部分有一个40px的margin，所以我们要为#status加一个-40px的margin来抵消它。

按钮的制作是用了一些css的属性，这样一些不支持css3的浏览器将会显示不同的效果，如果需要所有浏览器显示相同效果，可以考虑用图片。具体代码如下:
  1. #status {
  2. background: #F1EEEE;
  3. border-bottom: 1px solid #DCDEDE;
  4. margin: -40px 0 0;
  5. padding: 20px 0;
  6. }

  8. #status span {
  9. color: #CCC9C9;
  10. font: bold 20px Verdana;
  11. line-height: 50px;
  12. }

  14. #status button {
  15. background-color: #E9E5E5;
  16. background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFF), to(#E9E5E5));
  17. background: -moz-linear-gradient(top, #FFF 0%, #E9E5E5 100%);
  18. filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#FFFFFF', endColorstr='#E9E5E5'); /* IE6 & IE7 */
  19. -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#FFFFFF', endColorstr='#E9E5E5')"; /* IE8 */
  20. border: 1px solid #D9D9D9;
  21. box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  22. -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  23. -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  24. -o-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  25. color: #333;
  26. float: right;
  27. font: bold 20px Verdana;
  28. height: 50px;
  29. line-height: 30px;
  30. width: 175px;
  31. }

  33. #status button:hover {
  34. background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#E9E5E5), to(#FFF));
  35. background: -moz-linear-gradient(top, #E9E5E5 0%, #FFF 100%);
  36. }

复制代码

现在css样式效果如下：

ps6.jpg (33.42 KB, 下载次数: 2)

下载附件  保存到图库

2011-3-30 16:22 上传


7）编写#content第一部分的样式

#content的第一部分由两个各占据50%宽度的div组成，标题部分文字大小我们设为20px并且设为粗体、斜体，让它更为突出：
  1. #content #about_us, #content #others_say {
  2. float: left;
  3. padding: 20px 0 30px;
  4. width: 50%;
  5. }

  7. #content #about_us h3, #content #others_say h3 {
  8. color: #474747;
  9. font: bold italic 20px Verdana;
  10. line-height: 40px;
  11. }

  13. #content #others_say p cite {
  14. font: bold italic 10px Verdana;
  15. padding: 0 0 0 60px;
  16. }

  18. #content #others_say p cite a {
  19. color: #000;
  20. }

复制代码

8）编写#content第二部分的样式
第二部分的四块区域每个大概占据23%左右的宽度，这样我们就能为各区域之间增加一些margin，同时由于我们为图片加了1px的边框，所以宽度要计算好。同时最后一块区域的右边距要设为0。
  1. #content ul li {
  2. float: left;
  3. margin: 0 28px 0 0;
  4. width: 235px;
  5. }

  7. #content ul li img {
  8. background: #F1EEEE;
  9. border: 1px solid #DCDEDE;
  10. padding: 5px;
  11. }

  13. #content ul li h4 {
  14. color: #474747;
  15. font: bold 14px Verdana;
  16. line-height: 30px;
  17. }

  19. #content ul li:last-child {
  20. margin: 0;
  21. }

复制代码

现在的css样式效果如下：

ps8.jpg (34.33 KB, 下载次数: 2)

下载附件  保存到图库

2011-3-30 16:23 上传


9）编写#footer的样式
footer部分只是一些简单的css属性，比如背景、填充（padding）、颜色等。
  1. #footer {
  2. background: #171717 url('layout/footer.png') no-repeat center top;
  3. height: 250px;
  4. }

  6. #footer ul {
  7. padding: 40px 0 0;
  8. }

  10. #footer ul li {
  11. float: left;
  12. margin: 0 28px 0 0;
  13. width: 235px;
  14. }

  16. #footer ul li h5 {
  17. color: #CCCDD2;
  18. font: bold 14px Verdana;
  19. padding: 0 0 10px;
  20. }

  22. #footer ul li p {
  23. color: #7E7E7E;
  24. font: bold 11px Verdana;
  25. line-height: 20px;
  26. }

  28. #footer ul li ul {
  29. margin: 0;
  30. padding: 0;
  31. }

  33. #footer ul li ul li {
  34. color: #7E7E7E;
  35. font: bold 11px Verdana;
  36. line-height: 20px;
  37. }

  39. #footer ul li ul li a {
  40. color: #7E7E7E;
  41. }

  43. #footer ul li ul li a:hover {
  44. color: #9E9E9E;
  45. }

  47. #footer ul li:last-child {
  48. margin: 0;
  49. }

  51. #footer #copyright {
  52. border-top: 1px solid #424242;
  53. font-size: 11px;
  54. width: 100%;
  55. }

  57. #footer #copyright span {
  58. color: #424242;
  59. float: left;
  60. line-height: 30px;
  61. }

  63. #footer #copyright a {
  64. color: #63961A;
  65. float: right;
  66. line-height: 30px;
  67. }

复制代码

现在的css样式效果如下图。基本的CSS样式已经编写完成，这是css样式的最终效果。

ps9.jpg (36.99 KB, 下载次数: 9)

下载附件  保存到图库

2011-3-30 16:24 上传



5.为HTML的js动态效果添加样式
现在我们要开始为滑动图片slider部分增加一些样式。图片的滑动我们用到了nivo-slider这个插件，这个插件自身带有默认的css样式，我们只需要把它默认的css样式添加到我们的css样式文件即可。如果有兴趣的话，也可以自己更改里面的css样式。
nivo-slider默认的css样式如下，我们把它复制到我们的css文件的最后面。
  1. /*
  2. * jQuery Nivo Slider v2.1
  3. * http://nivo.dev7studios.com
  4. *
  5. * Copyright 2010, Gilbert Pellegrom
  6. * Free to use and abuse under the MIT license.
  7. * http://www.opensource.org/licenses/mit-license.php
  8. *
  9. * March 2010
  10. */

  12. /* The Nivo Slider styles */
  13. .nivoSlider {
  14. position:relative;
  15. }
  16. .nivoSlider img {
  17. position:absolute;
  18. top:0px;
  19. left:0px;
  20. }
  21. /* If an image is wrapped in a link */
  22. .nivoSlider a.nivo-imageLink {
  23. position:absolute;
  24. top:0px;
  25. left:0px;
  26. width:100%;
  27. height:100%;
  28. border:0;
  29. padding:0;
  30. margin:0;
  31. z-index:60;
  32. display:none;
  33. }
  34. /* The slices in the Slider */
  35. .nivo-slice {
  36. display:block;
  37. position:absolute;
  38. z-index:50;
  39. height:100%;
  40. }
  41. /* Caption styles */
  42. .nivo-caption {
  43. position:absolute;
  44. left:0px;
  45. bottom:0px;
  46. background:#000;
  47. color:#fff;
  48. opacity:0.8; /* Overridden by captionOpacity setting */
  49. width:100%;
  50. z-index:89;
  51. }
  52. .nivo-caption p {
  53. padding:5px;
  54. margin:0;
  55. }
  56. .nivo-caption a {
  57. display:inline !important;
  58. }
  59. .nivo-html-caption {
  60. display:none;
  61. }
  62. /* Direction nav styles (e.g. Next & Prev) */
  63. .nivo-directionNav a {
  64. position:absolute;
  65. top:45%;
  66. z-index:99;
  67. cursor:pointer;
  68. }
  69. .nivo-prevNav {
  70. left:0px;
  71. }
  72. .nivo-nextNav {
  73. right:0px;
  74. }
  75. /* Control nav styles (e.g. 1,2,3...) */
  76. .nivo-controlNav a {
  77. position:relative;
  78. z-index:99;
  79. cursor:pointer;
  80. }
  81. .nivo-controlNav a.active {
  82. font-weight:bold;
  83. }

复制代码

插入Java Script语句来调用插件我们需要在html里面加入一段js语句来调用这个插件，记住这个语句要放在导入Nivo-slider.min.js之后。至于具体的一些选项，读者可以到这个插件的官网查询相应的文档。
  1. <script type="text/javascript">
  2. $(window).load(function() {
  3. // Slider
  4. $('#slider .slides').nivoSlider({
  5. effect: 'random',
  6. directionNav: false,
  7. controlNav: false
  8. });
  9. });
  10. </script>

复制代码

总结
经过漫长的操作，终于完成了将psd转成html/css的过程，现在读者应该对这个工作的流程有一个系统的了解，转换psd到html/css的工作包括psd图片的切片、html和css文件的编写、js插件的使用等。现在你可以开始尝试做一个网页，相信很快就会懂得如何转换psd到html/css。

这篇关于用实例详细讲解将PSD转成HTMLCSS的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/602691。

相关文章

Oracle Expdp按条件导出指定表数据的方法实例

Oracle Expdp按条件导出指定表数据的方法实例

《OracleExpdp按条件导出指定表数据的方法实例》：本文主要介绍Oracle的expdp数据泵方式导出特定机构和时间范围的数据,并通过parfile文件进行条件限制和配置,文中通过代码介绍... 目录1.场景描述 2.方案分析3.实验验证 3.1 parfile文件3.2 expdp命令导出4.总结
阅读更多...
React实现原生APP切换效果

React实现原生APP切换效果

《React实现原生APP切换效果》最近需要使用Hybrid的方式开发一个APP,交互和原生APP相似并且需要IM通信,本文给大家介绍了使用React实现原生APP切换效果,文中通过代码示例讲解的非常... 目录背景需求概览技术栈实现步骤根据 react-router-dom 文档配置好路由添加过渡动画使用
阅读更多...
SpringBoot集成SOL链的详细过程

SpringBoot集成SOL链的详细过程

《SpringBoot集成SOL链的详细过程》Solanaj是一个用于与Solana区块链交互的Java库,它为Java开发者提供了一套功能丰富的API,使得在Java环境中可以轻松构建与Solana... 目录一、什么是solanaj?二、Pom依赖三、主要类3.1 RpcClient3.2 Public
阅读更多...
手把手教你idea中创建一个javaweb(webapp)项目详细图文教程

手把手教你idea中创建一个javaweb(webapp)项目详细图文教程

《手把手教你idea中创建一个javaweb(webapp)项目详细图文教程》：本文主要介绍如何使用IntelliJIDEA创建一个Maven项目,并配置Tomcat服务器进行运行,过程包括创建... 1.启动idea2.创建项目模板点击项目-新建项目-选择maven，显示如下页面输入项目名称，选择
阅读更多...
Python基于火山引擎豆包大模型搭建QQ机器人详细教程(2024年最新)

Python基于火山引擎豆包大模型搭建QQ机器人详细教程(2024年最新)

《Python基于火山引擎豆包大模型搭建QQ机器人详细教程(2024年最新)》：本文主要介绍Python基于火山引擎豆包大模型搭建QQ机器人详细的相关资料,包括开通模型、配置APIKEY鉴权和SD... 目录豆包大模型概述开通模型付费安装 SDK 环境配置 API KEY 鉴权Ark 模型接口Prompt
阅读更多...
在 VSCode 中配置 C++ 开发环境的详细教程

在 VSCode 中配置 C++ 开发环境的详细教程

《在VSCode中配置C++开发环境的详细教程》本文详细介绍了如何在VisualStudioCode（VSCode）中配置C++开发环境,包括安装必要的工具、配置编译器、设置调试环境等步骤,通... 目录如何在 VSCode 中配置 C++ 开发环境：详细教程1. 什么是 VSCode？2. 安装 VSCo
阅读更多...
Spring Boot 中整合 MyBatis-Plus详细步骤(最新推荐)

Spring Boot 中整合 MyBatis-Plus详细步骤(最新推荐)

《SpringBoot中整合MyBatis-Plus详细步骤(最新推荐)》本文详细介绍了如何在SpringBoot项目中整合MyBatis-Plus,包括整合步骤、基本CRUD操作、分页查询、批... 目录一、整合步骤1. 创建 Spring Boot 项目2. 配置项目依赖3. 配置数据源4. 创建实体类
阅读更多...
MySQL的索引失效的原因实例及解决方案

MySQL的索引失效的原因实例及解决方案

《MySQL的索引失效的原因实例及解决方案》这篇文章主要讨论了MySQL索引失效的常见原因及其解决方案,它涵盖了数据类型不匹配、隐式转换、函数或表达式、范围查询、LIKE查询、OR条件、全表扫描、索引... 目录1. 数据类型不匹配2. 隐式转换3. 函数或表达式4. 范围查询之后的列5. like 查询6
阅读更多...
python与QT联合的详细步骤记录

python与QT联合的详细步骤记录

《python与QT联合的详细步骤记录》：本文主要介绍python与QT联合的详细步骤,文章还展示了如何在Python中调用QT的.ui文件来实现GUI界面,并介绍了多窗口的应用,文中通过代码介绍... 目录一、文章简介二、安装pyqt5三、GUI页面设计四、python的使用python文件创建pytho
阅读更多...
SpringBoot整合InfluxDB的详细过程

SpringBoot整合InfluxDB的详细过程

《SpringBoot整合InfluxDB的详细过程》InfluxDB是一个开源的时间序列数据库,由Go语言编写,适用于存储和查询按时间顺序产生的数据,它具有高效的数据存储和查询机制,支持高并发写入和... 目录一、简单介绍InfluxDB是什么？1、主要特点2、应用场景二、使用步骤1、集成原生的Influ
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2