【免费】pink老师htmlcss学习-学成在线案例_htmlcss常见的网页布局pink老师资源-CSDN文库

共20个文件

png：17个

html：1个

psd：1个

需积分: 0 104 浏览量更新于2023-03-26 收藏 11.2MB ZIP 举报

HTML和CSS是网页设计的基础，它们共同构成了网页的结构和样式。"pink老师htmlcss学习 - 学成在线案例"这个资源包显然是一份用于教学或自我提升的学习材料，其中包含了一系列实例，帮助用户深入理解并掌握HTML和CSS的应用。 `style.css`是CSS（层叠样式表）文件，它是用来控制网页样式的。在HTML中，我们可以链接到外部的CSS文件，如`style.css`，来实现页面的布局和设计。CSS允许我们定义颜色、字体、间距、布局以及元素的显示方式。通过学习`style.css`，你可以了解到如何编写选择器、属性和值，以及如何组织CSS代码以实现响应式设计，即让网页在不同设备和屏幕尺寸上都能良好展示。 `学成网首页.psd`是一个Photoshop文档，通常用于设计网页的视觉稿。PSD文件是Adobe Photoshop的原生格式，它包含了图层、蒙版、文字、形状等设计元素，设计师可以在此基础上构建网页的初始设计。对于学习者来说，分析这个文件可以帮助理解设计师如何构思和构建一个网页的视觉层次，以及如何通过颜色、图像和布局来创建吸引人的用户体验。接下来，`imges`文件夹很可能是存放图片资源的地方。在网页设计中，图片是非常重要的元素，它们可以增强内容的表现力，提供视觉吸引力。学习如何正确地引入和优化图片，如调整大小、压缩以减少加载时间，是HTML和CSS学习过程中的关键部分。 `index.html`是HTML（超文本标记语言）文件，它是网页的主体内容，定义了网页的结构和内容。HTML由一系列标签组成，这些标签告诉浏览器如何呈现文本、图像、链接等元素。`index.html`通常作为网站的主页，因此会包含导航、头部、主体内容和页脚等基本结构。通过研究这个文件，你可以了解如何编写有效的HTML代码，以及如何与CSS配合，将内容与样式结合起来。在这个学习资源包中，你将有机会实践HTML和CSS的结合使用，包括创建元素、添加样式、组织页面结构、导入和处理图片，以及可能的响应式设计。通过分析`style.css`来学习CSS，用`index.html`来巩固HTML基础，并参考`学成网首页.psd`来理解网页设计的视觉原则，最后在`imges`文件夹中管理图片资源。这是一个综合性的学习过程，涵盖了网页开发的关键环节，对于想要提升这方面技能的人来说极具价值。

收起资源包目录

study.zip （20个子文件）

style.css 9KB

学成网首页.psd 26.75MB

index.html 15KB

imges

box2-rightbottom2.png 39KB

box4-bd4.png 32KB

banner.png 374KB

box2-rightbottom4.png 29KB

logo.png 5KB

box2-righttop.png 88KB

search.png 1KB

box-bd2.png 50KB

box3-righttop.png 59KB

box2-left.png 67KB

box3-left.png 56KB

user.png 4KB

box2-rightbottom1.png 39KB

box-bd3.png 57KB

box2-rightbottom3.png 37KB

box-bd1.png 50KB

box-bd4.png 47KB

资源推荐

资源预览

资源评论

<!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="style.css"> </head> <body>   <div class="header w">  <div class="logo"> <img src="imges/logo.png" alt=""> </div>  <ul class="nav"> <li><a href="#">首页</a></li> <li><a href="#">课程</a></li> <li><a href="#">职业规划</a></li> </ul>  <div class="search"> <input class="input" type="text" value="请输入关键词"> <button class="button" type="submit"> </div>  <div class="user"> <div class="circle"></div> <a href="#">qq-leishui</a> </div> </div>    <div class="banner">  <div class="w"> <div class="subnav"> <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="course"> <h3>我的课程表</h3> <li class="first"> <h4>继续学习程序语言设计</h4> <p>正在学习-使用对象</p> </li> <li> <h4>继续学习程序语言设计</h4> <p>正在学习-使用对象</p> </li> <li> <h4>继续学习程序语言设计</h4> <p>正在学习-使用对象</p> </li> <li class="button"><button>全部课程</button></li> </div> </div> </div>    <div class="goods w">  <h3>精品推荐</h3>  <ul class="goods-item"> <li>|</li> <li><a href="#">JQuery</a></li> <li>|</li> <li><a href="#">Spark</a></li> <li>|</li> <li><a href="#">MySQL</a></li> <li>|</li> <li><a href="#">JavaWeb</a></li> <li>|</li> <li><a href="#">MySQL</a></li> <li>|</li> <li><a href="#">JavaWeb</a></li> </ul>  <div class="mod"><a href="#">修改兴趣</a></div> </div>   <div class="box w">  <div class="box-title"> <h3>精品推荐</h3> <a href="#">查看全部</a> </div>  <ul class="box-bd"> <li> <img src="imges/box-bd1.png"> <h4>Think PHP 5.0 博客系统实战项目演练</h4> <p>高级<span> · 1125人在学习</span></p> </li> <li> <img src="imges/box-bd2.png"> <h4>Android 网络图片加载框架详解</h4> <p>高级<span> · 1125人在学习</span></p> </li> <li> <img src="imges/box-bd3.png"> <h4>Angular 2 最新框架+主流技术+项目实战</h4> <p>高级<span> · 1125人在学习</span></p> </li> <li> <img src="imges/box-bd4.png"> <h4>Android Hybrid APP开发实战 H5+原生！</h4> <p>高级<span> · 1125人在学习</span></p> </li> <li class="final"> <img src="imges/box-bd4.png"> <h4>Android Hybrid APP开发实战 H5+原生！</h4> <p>高级<span> · 1125人在学习</span></p> </li> <li> <img src="imges/box-bd1.png"> <h4>Think PHP 5.0 博客系统实战项目演练</h4> <p>高级<span> · 1125人在学习</span></p> </li> <li> <img src="imges/box-bd2.png"> <h4>Android 网络图片加载框架详解</h4> <p>高级<span> · 1125人在学习</span></p> </li> <li> <img src="imges/box-bd3.png"> <h4>Angular 2 最新框架+主流技术+项目实战</h4> <p>高级<span> · 1125人在学习</span></p> </li> <li> <img src="imges/box-bd4.png"> <h4>Android Hybrid APP开发实战 H5+原生！</h4> <p>高级<span> · 1125人在学习</span></p> </li> <li class="final"> <img src="imges/box-bd4.png"> <h4>Android Hybrid APP开发实战 H5+原生！</h4> <p>高级<span> · 1125人在学习</span></p> </li> </ul> </div>  <div class="box2 w"> <div class="box2-title"> <h3>编程入门</h3> <ul class="box2-nav"> <li><a href="#">热门</a></li> <li><a href="#">初级</a></li> <li><a href="#">中级</a></li> <li><a href="#">高级</a></li> </ul> <a href="#">查看全部</a> </div> <div class="box2-bd"> <div class="box2-left"> <div> <h4>PHP入门:<br>基础语法到实际运用</h4> <p>零基础入门：语法与界</p> <p>进阶：网络与数据缓存</p> <p>界面到数据存储</p> </div> </div> <div class="box2-right"> <div class="right-top"></div> <ul class="right-bottom"> <li> <img src="imges/box2-rightbottom1.png" alt=""> <h4>Android Hybrid APP开发实战 H5+原生！</h4> <p>高级<span> · 1125人在学习</span></p> </li> <li> <img src="imges/box2-rightbottom2.png" alt=""> <h4>Kami2首页界面切换效果<br>&ensp;</h4> <p>高级<span>1125人在学习</span></p> </li> <li> <img src="imges/box2-rightbottom3.png" alt=""> <h4>Unity Profiler入门<br>&ensp;</h4> <p