学成在线首页项目(含psd文件)_学成在线psd,学成在线psd源文件资源-CSDN文库

共22个文件

png：13个

jpg：6个

html：1个

5星 · 超过95%的资源需积分: 5 32 浏览量 2022-04-05 17:49:16 上传评论 1 收藏 10.51MB ZIP 举报

"学成在线首页项目(含psd文件)"是一个关于HTML和CSS的应用实例，主要涉及的是构建一个在线学习平台的首页。这个项目不仅包含了完成的HTML和CSS代码，还附带了PSD设计文件，这对于理解网页设计流程以及前端开发与设计协作具有重要价值。 "HTML+CSS制作的静态网页，比较简单"，意味着这个项目是初学者或者中级开发者提升技能的理想资源。HTML（HyperText Markup Language）是网页内容的基础结构语言，用于定义网页的各个元素和布局；CSS（Cascading Style Sheets）则是用于控制网页样式和布局的语言，让网页更具视觉吸引力。这个项目的简单性意味着它可能没有复杂的交互功能，更注重于页面的基本元素展示和基础布局的实现。在HTML部分，开发者可以学习到如何使用各种标签来创建头部、导航、主体内容、侧边栏和页脚等常见的网页结构。例如，`<header>`、`<nav>`、`<main>`、`<aside>` 和 `<footer>` 等语义化标签的使用，以及如何通过`<a>`标签创建链接，通过`<img>`标签插入图片，通过`<div>`和`<span>`进行内容分组和样式控制。在CSS部分，可以了解到如何选择器来选取HTML元素并应用样式，如类选择器、ID选择器、元素选择器等。同时，会接触到盒模型（包括内边距、边框和外边距），布局技术如浮动、定位，以及相对、绝对和固定定位的使用。此外，还会涉及到颜色、字体、背景、边框、过渡、动画等基本样式属性的设置，以及响应式设计，确保网页在不同设备上都能正常显示。 PSD文件的提供，使得开发者有机会学习到网页设计的前期工作，包括如何在Adobe Photoshop中创建和编辑设计图层，理解设计师对颜色、字体、图像和布局的选择，以及如何将这些设计元素转化为实际的HTML和CSS代码。这有助于前端开发者更好地与设计师沟通，理解设计意图，并在实现过程中保持设计的忠实度。这个项目涵盖了HTML和CSS的基础知识，对于想要提升网页设计和开发技能的人来说是一个很好的实践平台。通过这个项目，你可以学习到如何构建一个简洁、易读的静态网页，并理解前端开发与设计之间的协作流程。同时，对于初学者来说，这是一个从理论到实践的良好过渡，能帮助他们逐步掌握网页开发的核心技能。

资源详情

资源评论

资源推荐

收起资源包目录

study.zip （22个子文件）

study

images

bottom04.jpg 8KB

course07.png 33KB

banner2.png 374KB

course02.png 45KB

course04.png 42KB

left.jpg 14KB

course06.png 34KB

bottom03.jpg 12KB

bottom01.jpg 13KB

pic.png 50KB

course03.png 49KB

user.png 4KB

bottom02.jpg 10KB

logo.png 5KB

course01.png 50KB

course05.png 39KB

course08.png 25KB

top.jpg 23KB

btn.png 1KB

index.html 7KB

学成网首页.psd 26.75MB

index.css 5KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>学成在线</title> <link rel="stylesheet" href="./index.css"> </head> <body>  <div class="header wrapper"> <h1><a href="#"><img src="./images/logo.png" alt=""></a></h1>  <div class="nav"> <ul> <li><a href="#">首页</a></li> <li><a href="#">课程</a></li> <li><a href="#">职业规划</a></li> </ul> </div>  <div class="search"> <input type="text" placeholder="请输入关键字"> <button></button> </div>  <div class="user"> <img src="./images/user.png" alt=""> <span>lilei</span> </div> </div>  <div class="banner"> <div class="wrapper"> <div class="left"> <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> <div class="right"> <h2>我的课程表</h2> </div> </div> </div>  <div class="goods wrapper"> <h2>精品推荐</h2> <ul> <li><a href="#">JQuery</a></li> <li><a href="#">JQuery</a></li> <li><a href="#">JQuery</a></li> <li><a href="#">JQuery</a></li> <li><a href="#">JQuery</a></li> <li><a href="#">JQuery</a></li> </ul> <a href="#" class="xingqu">修改兴趣</a> </div>  <div class="box wrapper"> <div class="title"> <h2>精品推荐</h2> <a href="#">查看全部</a> </div> <div class="content clear"> <ul> <li> <a href="#"> <img src="./images/course02.png" alt=""> <h3>Android 网络图片加载框架详解</h3> <p><span>高级</span> • 1125人在学习</p> </a> </li> <li> <a href="#"> <img src="./images/course03.png" alt=""> <h3>Angular 2 最新框架+主流技术+项目实战</h3> <p><span>高级</span> • 1125人在学习</p> </a> </li> <li> <a href="#"> <img src="./images/course04.png" alt=""> <h3>Android Hybrid APP开发实战 H5+原生！</h3> <p><span>高级</span> • 1125人在学习</p> </a> </li> <li> <a href="#"> <img src="./images/course05.png" alt=""> <h3>UGUI 源码深度剖析</h3> <p><span>高级</span> • 1125人在学习</p> </a> </li> <li> <a href="#"> <img src="./images/course06.png" alt=""> <h3>Kami2 首页界面切换效果</h3> <p><span>高级</span> • 1125人在学习</p> </a> </li> <li> <a href="#"> <img src="./images/course07.png" alt=""> <h3>UNITY Profiler 入门</h3> <p><span>高级</span> • 1125人在学习</p> </a> </li> <li> <a href="#"> <img src="./images/course08.png" alt=""> <h3>Cocos</h3> <p><span>高级</span> • 1125人在学习</p> </a> </li> <li> <a href="#"> <img src="./images/course02.png" alt=""> <h3>Android 网络图片加载框架详解</h3> <p><span>高级</span> • 1125人在学习</p> </a> </li> <li> <a href="#"> <img src="./images/course04.png" alt=""> <h3>Android Hybrid APP开发实战 H5+原生！</h3> <p><span>高级</span> • 1125人在学习</p> </a> </li> <li> <a href="#"> <img src="./images/course03.png" alt=""> <h3>Angular 2 最新框架+主流技术+项目实战</h3> <p><span>高级</span> • 1125人在学习</p> </a> </li> </ul> </div> </div>  <div class="footer"> <div class="wrapper"> <div class="left"> <img src="./images/logo.png" alt=""> <p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。 © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号 </p> <a href="#">下载APP</a> </div> <div class="right"> <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> </dl> </div> </div> </div> </body> </html>