学成网在线PSD素材四个文件_学成在线图片素材,学成在线素材资源-CSDN文库

共13个文件

png：7个

psd：4个

html：1个

需积分: 50 14 浏览量 2020-06-10 23:05:32 上传评论 3 收藏 17.68MB RAR 举报

在IT行业中，前端开发是一项至关重要的技能，而CSS切图是前端开发中的基础步骤之一。本文将详细讨论“学成网在线PSD素材四个文件”这一资源，以及它如何帮助前端开发者进行CSS切图练习。 PSD文件是Adobe Photoshop的原生格式，用于保存具有完整图层、蒙版、通道、文字等信息的图像设计。在这个压缩包中，包含了四个PSD文件，分别是“学成在线职业规划.psd”、“学成在线首页.psd”、“学成在线课程列表页.psd”和“学成在线课程介绍页.psd”。这些文件显然是针对学成网这个在线教育平台的设计稿，涵盖了网站的主要页面：首页、职业规划页面、课程列表页面以及课程详情页面。对于前端开发者来说，使用PSD文件进行切图练习是非常有益的。切图是指将设计师制作的视觉稿转化为可编程的网页元素，包括图片、按钮、布局结构等。这一过程通常涉及到以下步骤： 1. **打开PSD文件**：使用Adobe Photoshop或其他支持PSD格式的软件，如GIMP，打开设计稿，了解各个图层的组成和结构。 2. **分析设计**：理解每个元素的位置、大小、颜色、边距、字体等设计细节，这有助于准确地复现设计。 3. **切片**：利用Photoshop的切片工具，将设计稿按照网页元素进行切割，每个切片代表网页上的一个独立部分。 4. **导出资源**：将切片导出为适合网页的格式，如JPEG、PNG或SVG，同时可能需要导出透明背景的图片或者只包含文字的矢量图形。 5. **编写CSS**：根据切图结果，编写CSS代码来定义元素的样式，包括位置、尺寸、颜色、边距、背景图片等属性。 6. **HTML布局**：在HTML文件中创建对应的标记结构，将切图的图片和CSS样式应用到页面上，实现与设计稿一致的视觉效果。学成网的这些PSD素材为开发者提供了一个真实的项目环境，可以锻炼实际工作中所需的各种技能，比如理解和还原设计、优化图片资源、响应式布局等。通过这样的练习，开发者可以提高自己的工作效率，更好地理解设计师的意图，并且提升与设计团队的协作能力。此外，了解“学成网”和“学成在线”这两个标签，意味着这些素材可能是针对一个在线教育平台的，因此在实际切图过程中还需要考虑教育类网站的特点，如清晰的信息架构、易用性、课程展示方式等，这些都是前端开发者在实践中需要关注的要点。这个素材包为前端开发者提供了宝贵的实践机会，不仅可以提升切图技巧，还能加深对网页设计和用户体验的理解。同时，它也反映了在线教育领域中网页设计的风格和需求，对于想要涉足这个领域的开发者来说，是一份极好的学习资料。

资源推荐

资源详情

资源评论

收起资源包目录

学成网在线教育.rar （13个子文件）

学成网在线教育

PSD文件

学成网课程列表页.psd 18.07MB

学成网首页.psd 30.41MB

学成网课程介绍页.psd 25.56MB

学成网职业规划.psd 16.28MB

web

images

logo-s.png 5KB

ling_06.png 1KB

logo_03.png 6KB

tou_03.png 3KB

search_06.png 1KB

banner_03.png 331KB

icon1.png 50KB

style.css 8KB

index.html 6KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css" /> </head> <body>   <header>  <nav>  <div class="logo"> <img src="images/logo_03.png" alt=""> </div>  <div class="navbar"> <ul> <li><a href="#">首页</a></li> <li><a href="#">课程</a></li> <li><a href="#">职业规划</a></li> </ul> </div>  <div class="personal"> <a href="#">个人中心 <img src="images/ling_06.png" alt=""></a> <a href="#"><img src="images/tou_03.png" > 刘德华</a> </div>  <div class="search"> <form action=""> <input type="text" placeholder="请输入关键词">  <input type="submit" value=""> </form> </div> </nav> </header>  <div class="banner"> <div class="banner-in container">  <div class="slidebar"> <ul> <li><a href="#">前端开发 <span>></span> </a></li> <li><a href="#">后端开发 <span>></span> </a></li> <li><a href="#">移动开发 <span>></span> </a></li> <li><a href="#">人工智能 <span>></span> </a></li> <li><a href="#">商业预测 <span>></span> </a></li> <li><a href="#">云计算&大数据 <span>></span> </a></li> <li><a href="#">运维&从测试 <span>></span> </a></li> <li><a href="#">UI设计 <span>></span> </a></li> <li><a href="#">产品 <span>></span> </a></li> </ul> </div>  <dl class="timetable"> <dt>我的课程表</dt> <dd> <h4>继续学习程序语言设计</h4> <p>正在学习-使用对象</p> </dd> <dd> <h4>继续学习程序语言设计</h4> <p>正在学习-使用对象</p> </dd> <dd> <h4>继续学习程序语言设计</h4> <p>正在学习-使用对象</p> </dd> <dd> <a href="#">全部课程</a> </dd> </dl> <ul class="circle"> <li class="current"></li>  <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div> <div class="recommend container">  <a href="#">精品推荐</a> <a href="#">Jquery</a> <a href="#">Spart</a> <a href="#">MySql</a> <a href="#">javaWeb</a> <a href="#">MySql</a> <a href="#">javaWeb</a> <a href="#">修改兴趣</a> </div>  <div class="recom-products container"> <div class="recom-hd"> <h4>精品推荐</h4> <a href="#">查看全部</a> </div> <div class="recom-bd clearfix"> <ul> <li> <img src="images/icon1.png" alt=""> <h5>Think PHP 5.0 博客系统实战项目演练</h5> <p><span>高级</span> • 1125人在学习</p> </li> <li> <img src="images/icon1.png" alt=""> <h5>Think PHP 5.0 博客系统实战项目演练</h5> <p><span>高级</span> • 1125人在学习</p> </li> <li> <img src="images/icon1.png" alt=""> <h5>Think PHP 5.0 博客系统实战项目演练</h5> <p><span>高级</span> • 1125人在学习</p> </li> <li> <img src="images/icon1.png" alt=""> <h5>Think PHP 5.0 博客系统实战项目演练</h5> <p><span>高级</span> • 1125人在学习</p> </li> <li> <img src="images/icon1.png" alt=""> <h5>Think PHP 5.0 博客系统实战项目演练</h5> <p><span>高级</span> • 1125人在学习</p> </li> <li> <img src="images/icon1.png" alt=""> <h5>Think PHP 5.0 博客系统实战项目演练</h5> <p><span>高级</span> • 1125人在学习</p> </li> <li> <img src="images/icon1.png" alt=""> <h5>Think PHP 5.0 博客系统实战项目演练</h5> <p><span>高级</span> • 1125人在学习</p> </li> <li> <img src="images/icon1.png" alt=""> <h5>Think PHP 5.0 博客系统实战项目演练</h5> <p><span>高级</span> • 1125人在学习</p> </li> <li> <img src="images/icon1.png" alt=""> <h5>Think PHP 5.0 博客系统实战项目演练</h5> <p><span>高级</span> • 1125人在学习</p> </li> <li> <img src="images/icon1.png" alt=""> <h5>Think PHP 5.0 博客系统实战项目演练</h5> <p><span>高级</span> • 1125人在学习</p> </li> </ul> </div> </div>  <footer> <div class="container footer-in"> <div class="footer-l"> <img src="images/logo-s.png" height="43" width="197" alt=""> <p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br /> © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p> <a href="#">下载APP</a> </div> <div class="footer-r"> <dl> <dt>关于学成网</dt> <dd><a href="#">关于</a></dd> <dd><a href="#">管理团队</a></dd> <dd><a href="#">工作机会</a></dd> <dd><a href="#">客户服务</a></dd> <dd><a href="#">帮助</a></dd> </dl> <dl> <dt>关于学成网</dt> <dd><a href="#">关于</a></dd> <dd><a href="#">管理团队</a></dd> <dd><a href="#">工作机会</a></dd> <dd><a href="#">客户服务</a></dd> <dd><a href="#">帮助</a></dd> </dl> <dl> <dt>关于学成网</dt> <dd><a href="#">关于</a></dd> <dd><a href="#">管理团队</a></dd> <dd><a href="#">工作机会</a></dd> <dd><a href="#">客户服务</a></dd> <dd><a href="#">帮助</a></dd> </dl> </div> </div> </footer> </body> </html>

评论收藏

内容反馈