前端入门练习之将psd文件转换为HTML文件

附上psd文件

1.用Photoshop打开psd文件，按下ctrl+alt+d将文件放大，观察页面布局

2.对psd文件进行切图，切除自己需要的logo或图片

（1）按住快捷键v,出现选择工具，点击要切图的地方，自动选中图层，右键选择“转换为智能对象”

（2）按住快捷键M，出现选框工具，框选要切出的部分，按CTRL+c,然后按CTRL+n点击确定，在新建的图层中点击按下CTRL+v

（3）选择文件->存储为web格式文件（ALt+Shift+Ctrl+s）,图片存储为jpg格式，logo或小图标存储为png-24格式。

3.打开编辑器sublime text3（或其它），新建文件夹practice并新建如下几个文件

3.编写reset.css初始化样式

body,div,ul,li,a,p,h1,h2,h3,h4,h5,h6,dl,dd,dt,input,form,textarea{margin:0;padding:0;font-family:Microsoft YaHei,'宋体' , Tahoma, Helvetica, Arial, \5b8b\4f53 , sans-serif;
}
ul,ol,li{list-style: none;
}
a{text-decoration: none;display: block;
}
img{border: none;display: block;
}
/* 清除浮动 */
.clearfloat:before,.clearfloat:after{display: table;content: "";
}
.clearfloat:after{clear: both;
}
.clearfloat{zoom:1;
}
/* 清除浮动的另一种方式
.clearfloat:after{display: block;clear:both;content: "";visible:hidden;height:0;
}
.clearfloat{zoom:1;
}*/

4.编写html结构

观察psd文件可发现整个页面可分为6大块，可用6个div来布局，其中页面头和尾可作为其它页面公共的，因此，采用语义化的html进行命名，结构如下：

<!DOCTYPE html>
<html>
<head><link rel="stylesheet" href="css/reset.css"><link rel="stylesheet" href="css/commen.css"><link rel="stylesheet" href="css/index.css"><title>imooc practice</title>
</head>
<body><div class="public-header"></div><div class="index-banner"></div><div class="index-list"></div><div class="index-panel"></div><div class="index-panel"></div><div class="public-footer"></div>
</body>
</html>

5.根据psd样式编写css样式，先写公共的头尾，然后再写内容体并填充结构

HTML代码如下：

<!DOCTYPE html>
<html>
<head><link rel="stylesheet" href="css/reset.css"><link rel="stylesheet" href="css/comment.css"><link rel="stylesheet" href="css/index.css"><title>imooc practice</title>
</head>
<body><div class="public-header"><div class="public-container clearfloat"><div class="header-logo"><a href=""></a></div><ul class="header-nav"><li class="item"><a href="">Our story</a></li><li class="item"><a href="">Menu</a></li><li class="item"><a href="">Reservations</a></li><li class="item"><a href="">News</a></li><li class="item"><a href="">Rviews</a></li></ul></div></div><div class="index-banner"><img src="img/demo1.jpg"alt="banner" class="index-banner-bg"><div class="index-banner-text"><div class="text-logo"></div><p class="text-info"><i class="line line-l"></i><span class="text">resto restaurant home page website template</span><i class="line line-r"></i></p></div></div><div class="index-menu"><div class="menu-tips">The Menu</div><div class="public-container menu-list"><ul class="clearfloat"><li class="menu-item clearfloat"><a href="" class="title"><h4>Voluptate cillum fugiat.</h4><p class="comment">Cheese, tomato, mushrooms, onions.</p></a><div class="line"></div><div class="price">$50</div></li> <li class="menu-item clearfloat"><a href="" class="title"><h4>Voluptate cillum fugiat.</h4><p class="comment">Cheese, tomato, mushrooms, onions.</p></a><div class="line"></div><div class="price">$50</div></li> <li class="menu-item clearfloat"><a href="" class="title"><h4>Voluptate cillum fugiat.</h4><p class="comment">Cheese, tomato, mushrooms, onions.</p></a><div class="line"></div><div class="price">$50</div></li><li class="menu-item clearfloat"><a href="" class="title"><h4>Voluptate cillum fugiat.</h4><p class="comment">Cheese, tomato, mushrooms, onions.</p></a><div class="line"></div><div class="price">$50</div></li><li class="menu-item clearfloat"><a href="" class="title"><h4>Voluptate cillum fugiat.</h4><p class="comment">Cheese, tomato, mushrooms, onions.</p></a><div class="line"></div><div class="price">$50</div></li><li class="menu-item clearfloat"><a href="" class="title"><h4>Voluptate cillum fugiat.</h4><p class="comment">Cheese, tomato, mushrooms, onions.</p></a><div class="line"></div><div class="price">$50</div></li><li class="menu-item clearfloat"><a href="" class="title"><h4>Voluptate cillum fugiat.</h4><p class="comment">Cheese, tomato, mushrooms, onions.</p></a><div class="line"></div><div class="price">$50</div></li><li class="menu-item clearfloat"><a href="" class="title"><h4>Voluptate cillum fugiat.</h4><p class="comment">Cheese, tomato, mushrooms, onions.</p></a><div class="line"></div><div class="price">$50</div></li></ul></div><a href="" class="menu-more-btn">load more <span> |</span><span class="icon"></span></a></div><div class="index-panel public-container"><div class="index-panel-header clearfloat"><h3>Featured Dishes</h3><div class="line"></div><div class="btn-group"><a href="" class="btn active"></a><a href="" class="btn"></a><a href="" class="btn"></a><a href="" class="btn"></a></div></div><div class="index-panel-body index-food-list"><ul class="clearfloat"><li class="food-item"><a href=""><img src="img/demo2.jpg"alt="" class="banner"><div class="foodname"><span class="price">$30</span>Fugiat nulla sint </div><div class="star-bar"><span class="star"></span><span class="star"></span><span class="star"></span><span class="star"></span><span class="star nostar"></span></div></a></li><li class="food-item"><a href=""><img src="img/demo3.jpg"alt="" class="banner"><div class="foodname"><span class="price">$30</span>Fugiat nulla sint </div><div class="star-bar"><span class="star"></span><span class="star"></span><span class="star"></span><span class="star"></span><span class="star nostar"></span></div></a></li><li class="food-item"><a href=""><img src="img/demo4.jpg"alt="" class="banner"><div class="foodname"><span class="price">$30</span>Fugiat nulla sint </div><div class="star-bar"><span class="star"></span><span class="star"></span><span class="star"></span><span class="star"></span><span class="star nostar"></span></div></a></li><li class="food-item"><a href=""><img src="img/demo5.jpg"alt="" class="banner"><div class="foodname"><span class="price">$30</span>Fugiat nulla sint </div><div class="star-bar"><span class="star"></span><span class="star"></span><span class="star"></span><span class="star"></span><span class="star nostar"></span></div></a></li></ul></div></div><div class="index-panel public-container"><div class="index-panel-header clearfloat"><h3>The Gallery</h3><div class="line"></div></div><div class="index-panel-body index-pics  clearfloat"><div class="pic-col"><a href=""><img src="img/demo6.jpg" alt=""></a></div><div class="pic-col"><a href=""><img src="img/demo7.jpg" alt=""></a></div><div class="pic-col"><a href=""><img src="img/demo8.jpg" alt=""></a></div></div></div><div class="public-footer"><div class="public-container"><div class="footer-col"><p>New York Resterrant<br>3926 Anmoore Road<br>New York, NY 10014<a href="tel:718-749-1714">718-749-1714</a></p></div><div class="footer-col"><p>France Restaurant<br>68, rue  de la Couronne<br>75002 PARIS<a href="tel:02.94.23.69.56">02.94.23.69.56</a></p></div><div class="footer-col"><p>Blog<br>Careers<br>NPrivacy Policy<a href="tel:Contact">Contact</a></p></div><div class="footer-col"><div class="footer-logo"><a href=""></a></div><p>© All Rights Reserved 2014.<br>Find  More at  <a href="">Pixelhint.com</a></p></div></div></div>
</body>
</html>

css代码如下：

/*
* @Author: fuxiaohui
* @Date:   2018-04-18 10:43:18
* @Last Modified by:   fuxiaohui
* @Last Modified time: 2018-04-18 15:54:24
*/
body,div,ul,li,a,p,h1,h2,h3,h4,h5,h6,dl,dd,dt,input,form,textarea{margin:0;padding:0;font-family:Microsoft YaHei,'宋体' , Tahoma, Helvetica, Arial, \5b8b\4f53 , sans-serif;
}
ul,ol,li{list-style: none;
}
a{text-decoration: none;display: block;color: #fff;
}
img{border: none;display: block;
}
/* 清除浮动 */
/* .clearfloat:before,.clearfloat:after{display: table;content: "";
}
.clearfloat:after{clear: both;
}
.clearfloat{zoom:1;
} */
/* 清除浮动的另一种方式*/
.clearfloat:after{display: block;clear:both;content: "";visible:hidden;height:0;
}
.clearfloat{zoom:1;
}

.public-header{

   height: 110px;
}
.public-header .header-logo{float: left;margin-top: 40px;
}
.public-header .header-logo a{width: 180px;height: 54px;background: url("../img/index-header-logo.jpg") no-repeat;
}
.public-header .header-nav{float: right;margin-top: 50px;
}
.public-header .header-nav .item{float: left;font-size: 14px;padding-left: 50px;color: #3b3b3b;
}
.public-header .header-nav .item a{color: #000;
}
.public-container{position: relative;margin: 0 auto;width: 1100px;
}
.public-footer{height: 318px;background: #3b3b3b;
}
.public-footer .footer-col{width: 230px;float: left;margin:100px 60px 0 0;font-size: 16px;color: #fff;line-height: 1.8;
}
.public-footer .footer-col:last-child{margin-right: 0;
}
.public-footer .footer-col .footer-logo a{width: 182px;height:55px;margin-top: -16px;background: url("../img/index-footer-logo.png") no-repeat;
}
/*
* @Author: fuxiaohui
* @Date:   2018-04-18 10:42:28
* @Last Modified by:   fuxiaohui
* @Last Modified time: 2018-04-19 10:09:43
*/
.index-banner{position: relative;background: #b3b3b3;
}
.index-banner-bg{height: 570px;width: 100%;overflow: hidden;
}
.index-banner-text{position: absolute;top: 200px;left: 50%;margin-left: -388px;text-align: center;
}
.index-banner-text .text-logo{width: 776px;height: 117px;background: url(../img/text-logo.png) no-repeat;
}
.index-banner-text .text-info{color: #fff;margin-top: 17px;
}
.index-banner-text  .text-info .line{display: inline-block;width: 40px;border-top: 1px solid #fff;vertical-align: middle;
}
/* .index-banner-text  .text-info .line-l{margin-right: 26px;
}
.index-banner-text  .text-info .line-r{margin-left: 26px;
} */
.index-banner-text  .text-info .text{margin:0 26px;
}
/* 菜单 */
.index-menu{position: relative;border-top: 4px solid #f34949;
}
.index-menu .menu-tips{position: absolute;left:50%;top: 0;  margin-left: -78px;width: 156px;height: 75px;text-align: center;line-height: 65px;color: #fff;background: #f34949;}
.index-menu .menu-tips:after{/* 实现不规则图形 */position: absolute;content: "";left: 0;bottom: 0;   width: 0;height: 0;border-left: 78px solid transparent;/* 画出三角 */border-right: 78px solid transparent;border-bottom: 10px solid #fff;
}
.index-menu .menu-list{margin-top:150px; color: #555;overflow: hidden;
}
.index-menu .menu-item ul{width: 1200px;
}
.index-menu .menu-item{float: left;width: 520px;margin-bottom: 56px;
}
.index-menu .menu-item:nth-child(odd){margin-right:60px;
}
.index-menu .menu-item:nth-child(even){margin-left:580px; margin-top: -102px;
}
.index-menu .menu-item .title,.index-menu .menu-item .line{float: left;
}
.index-menu .menu-item .price{float: right;
}
.index-menu .menu-item .title{width:230px;color: #555;text-overflow:ellipsis;overflow: hidden;white-space: nowrap;}.index-menu .menu-item .comment{margin-top:4px;color: #b7b7b7;font-size: 12px;
}
.index-menu .menu-item .line{margin-top: 10px;width: 182px;border-top: 1px solid #e3e1e1;
}
.menu-more-btn{margin: 0 auto;width: 133px;height: 32px;/* padding-left: 16px; */text-align: center;border: 1px solid #d7d5d5;font-size: 14px;line-height: 32px;color: #b7b7b7;
}
.menu-more-btn span{margin-left:8px;
}
.menu-more-btn .icon{display: inline-block;width: 11px;height: 7px;margin-left: 12px;background: url(../img/index-btn-icon.gif) no-repeat;}
.index-panel{margin-top: 200px;
}
.index-panel .index-panel-header h3{float: left;font-size: 20px;color: #3b3b3b;font-weight: normal;margin-right: 48px;
}
.index-panel-header .line{float: left;margin-top: 10px;width: 200px;border-top: 1px solid #e5e3e3;
}
.index-panel-header .btn-group{font-size: 0;/* 行内元素有默认间距 ，为了解除间距*/float: right;
}
.index-panel-header .btn{display: inline-block;margin-left: 11px;width: 9px;height:9px;background-color: #dedede;border-radius: 50%;
}
.index-panel-header .active{background: #9b9b9b;
}
.index-panel-body{margin-top: 70px;
}
.index-food-list{overflow: hidden;
}
.index-food-list ul{width: 1160px;
}
.index-food-list .food-item{float: left;width: 230px;margin-right: 60px;
}
.index-food-list .food-item .banner{margin-bottom: 30px;height: 202px;
}
.index-food-list .food-item .foodname{color: #555;margin-bottom: 10px;
}
.index-food-list .food-item .foodname .price{float:  right;
}
.index-food-list .food-item .star{display: inline-block;width: 12px;height: 13px;margin-right: 5px;background: url("../img/index-star.png") no-repeat;
}
.index-food-list .food-item .nostar{background-position: 0 -11px;
}
.index-pics{margin-top: 130px;margin-bottom: 200px;
}
.index-pics .pic-col{float: left;height: 380px;
}

前端入门练习之将psd文件转换为HTML文件相关推荐

php生成图片文件流,php如何将base64数据流文件转换为图片文件?
2017-03-07 在开发中,自己遇到一个前端在上传图片的时候,使用的base64数据流文件显示的图片. 也就是说 ***image/后面的jpg是我们的图片文件格式,(base64,)后面的很大一 ...
语音amr文件转换为mp3文件
1.安卓前端生成amr语音文件,经过base64加密变成加密字符串 2.把加密后的字符串解密成amr文件生成amr文件目录 String fileUrl = System.getProperty ...
swftools工具将pdf文件转换为swf文件
开发客户网站时遇到了一个需求,客户要求后台上传pdf文件,前台能以翻书的形式直接访问. 首先想到的是使用js解决,用户访问前端页面时,php将文件路径发送给js,让js呈现出来翻书的效果.在网上百度了 ...
swftools工具将pdf文件转换为swf文件文字丢失
开发客户网站时遇到了一个需求,客户要求后台上传pdf文件,前台能以翻书的形式直接访问. 首先想到的是使用js解决,用户访问前端页面时,php将文件路径发送给js,让js呈现出来翻书的效果.在网上百度了 ...
python批量pdf转word,python批量实现Word文件转换为PDF文件
本文为大家分享了python批量转换Word文件为PDF文件的具体方法,供大家参考,具体内容如下 1.目的通过万能的Python把一个目录下的所有Word文件转换为PDF文件. 2.遍历目录作者总 ...
Python Qt GUI设计：将UI文件转换为Python文件的三种妙招（基础篇—2）
目录 1.创建项目 2.将.ui文件生成.py文件 2.1.Eric 6编译 2.2.Python命令行编译 2.3.脚本编译 3.界面.逻辑分离思想在开始本文之前提醒各位朋友,Python记得安装 ...
python npy文件_python实现npy格式文件转换为txt文件操作
如下代码会将npy的格式数据读出,并且输出来到控制台: import numpy as np ##设置全部数据,不输出省略号 import sys np.set_printoptions(thresh ...
GDCM：将PAPYRUS 3.0文件转换为dcm文件的的测试程序
GDCM:将PAPYRUS 3.0文件转换为dcm文件的测试 GDCM:将PAPYRUS 3.0文件转换为dcm文件的测试 GDCM:将PAPYRUS 3.0文件转换为dcm文件的测试 #includ ...
GDCM：DICOM文件转换为QImage文件的测试程序
GDCM:DICOM文件转换为QImage文件的测试程序 GDCM:DICOM文件转换为QImage文件的测试程序 GDCM:DICOM文件转换为QImage文件的测试程序 #include &quo ...

前端入门练习之将psd文件转换为HTML文件

前端入门练习之将psd文件转换为HTML文件

4.编写html结构

前端入门练习之将psd文件转换为HTML文件相关推荐

最新文章

热门文章