前端网页项目-学成在线案例

典型的企业级网站
目的是为了整体感知企业级网站布局流程，复习以前知识

准备素材和工具：

学成在线PSD源文件
开发工具=PS（切图）/cutterman插件+vscode（代码）+chrome（测试）

案例准备工作：

创建study目录文件夹（用于存放我们这个页面的相关内容）
用vscode打开这个目录文件夹
Study目录内新建images文件夹，用于保存图片
新建首页文件index.html（以后我们的网站首页统一规定为index.html）
新建style.css样式文件，采用外链接样式表
将样式引入到我们的HTML页面文件中
样式表写入清除内外边距的样式，来检测样式是否引入成功

Css属性书写顺序：

建议遵循以下顺序：

布局定位属性：display/position/float/clear/visibility/overflow（建议display第一个写，毕竟关系到模式）
自身属性：width/height/margin/padding/border/background
文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-word
其他属性（css3）：content/cursor/border-radius/box-shadow/text-shadow/background:liner-gradient…

页面布局的整体思路：

为了提高网页制作的效率，布局通常有以下的整体思路：

必须确定页面的版心（可视区），我们测量可得知
分析页面的行模块，以及每个行模块中的列模块，页面布局第一准则
一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置，页面布局第二准则
制作html结构，我们还是遵循，先有结构，后有样式的原则，结构永远最重要
先理清楚布局结构，再写代码尤为重要，这需要我们多写多积累

头部制作：

导航栏注意点：

实际开发中，我们不会直接用链接a而是用li包含链接（li+a）的做法

li+a语义更清晰，一看这就是有条例的列表型内容
如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险）从而影响网站排名。

注意：

1.让导航栏一行显示，给li加浮动，因为li是块级元素，需要一行显示。

2.这个nav导航栏可以不给宽度，将来可以继续添加其余文字

3.因为导航栏里面文字不一样多，所以最好给链接a左右padding撑开盒子，而不是指定宽度。

Banner制作：

精品推荐小模块：

Footer：

链接：https://pan.baidu.com/s/1GUBzAgyZkzVP1mx4PEP0JQ
提取码：avdv

前端网页项目-学成在线案例相关推荐

CSS浮动/常见网页布局/清除浮动/学成在线案例
CSS 04 1. 浮动(float) 1.1 传统网页布局的三种方式网页布局的本质--用 CSS 来摆放盒子. 把盒子摆放到相应位置. CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列 ...
9.----------------------------------------------------------------------------------------【学成在线案例】
文章目录 [学成在线案例]前端小抄(9) 一.准备素材和工具二.案例准备工作三.CSS属性书写顺序四.页面布局分析五.确定版心六.头部制作七.banner 制作八.精品推荐小模块九.精 ...
页面显示格式化的时间、倒计时效果、学成在线案例（创建、添加节点）、学生信息表（重点）、5秒钟之后跳转页面（location.href应用）、学生信息表(页面刷新数据不丢失)（重点）——API练习案例
目录 1. 页面显示格式化的时间 2. 倒计时效果 3. 学成在线案例(创建节点.添加节点) 4.学生信息表案例(重点) 5. 5秒钟之后跳转页面(location.href的应用) 6. 学生信息表 ...
Day07——PS相关操作、学成在线案例
文章目录一.PS 操作 1.1 基本操作 1.2 常见的图片格式 1.3 PS切图 1.3.1 图层切图 1.3.2 切片切图 1.3.3 PS 插件切图二.学成在线案例 2.1 准备素材和工具 ...
CSS浮动、PS切图、学成在线案例前期准备
传统网页布局的三种方式网页布局的本质--用CSS来摆放盒子,把盒子摆放到相应位置 CSS提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序): 普通流(标准流) 浮动定位标准流所谓标准流 ...
黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程（学成在线）
一.基础班学习路线三.CSS基础 1.PS切图常见的图片格式 2.学成在线案例案例准备工作 CSS属性书写顺序页面布局整体思路 header区域制作 logo区域制作导航栏nav区域制作搜 ...
pink老师课程-学成在线案例资料
哔哩哔哩里面pink老师课程那里实操. 代码和图片在末尾总结 1.代码HTML结构要清晰,最好做好注释标明模块的开始和结束如:  <!--1.头部结束 ...
黑马程序员-学成在线案例-版权部份
黑马程序员-学成在线案例-版权部份一.设置大盒子因为上一层盒子没有设置高度且所有子集都浮动了,所以必须先清除上一标签的浮动.即添加clearfixcss 标签再设置一个版心wrapper css ...
学成在线案例——黑马程序员pink老师\思路讲解\完整源代码
本文为跟随B站黑马程序员pink老师学习CSS时所写,文章讲解了学成在线首页的制作思路,并贴出了源代码,作为学习笔记分享给大家如有错误,欢迎指出.如有侵权,联系删除文章目录 1. 案例准备工作 2 ...

前端网页项目-学成在线案例

前端网页项目-学成在线案例相关推荐

最新文章

热门文章