在拉钩学习的笔记（三）PC端静态网页应用开发

最新推荐文章于 2024-09-13 11:02:21 发布

可爱丶妖小妖

最新推荐文章于 2024-09-13 11:02:21 发布

阅读量222

点赞数 1

分类专栏：在拉钩学习的笔记文章标签： html5 css css3

本文链接：https://blog.csdn.net/Yao_Huang_/article/details/120314010

版权

在拉钩学习的笔记专栏收录该内容

32 篇文章 4 订阅

订阅专栏

1、开发流程：需求分析；整体规划；界面设计；前端程序设计；前后端系统整合；测试验收。
2、页面开发常见概念和布局流程
版心：指网页中主要内容所在的区域，一般在浏览器窗口水平居中显示，从而让用户的视线更集中。常见的版心宽度值包括960px、980px、1000px；1200px。制作方法：使用标准流中的margin居中方法
页面布局流程：1、确定页面版心（可视区域）；2、分析页面中的行模块，以及每行模块中的列模块；3、制作HTML页面，CSS文件；4、CSS初始化，然后运用盒模型的原理，通过DIV+CSS布局来控制网页的各个模块
常见的几种布局类型：一列固定宽度且居中；两列左窄右宽型；通栏平均分布型
更多情况一个网页可能同时包含2个以上的布局类型
3、head 内部配置
文件结构：css文件夹、images文件夹和index.html
<head>标签的内部配置
<title>网页标题
标签页icon图标：图标的文件名要求以favicon.ico命名，文件需与index.html文件同级储存；使用方法：通过link标签引用<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
CSS分级引入：css常见的分层组织：清除默认样式，网站的公共样式，每个页面独有的样式
清除默认样式：所有网站都能使用；自己工作中积累或使用网络上已有资源；命名习惯reset.css；引用时必须作为第一层引入；reset文件写完后不允许再次更改
公共样式：单独的一个网站所有的页面、几个页面；从设计图中观察，找到所有页面或者多个页面的公共部分；命名习惯common.css或者模块名.css；多个网站页面公共部分书写完成后不允许更改，注意类名一般不要在其他css文件中再使用；一般在reset.css后面，单独样式文件前引入
页面独有样式：单独的一个HTML页面；页面独有其他页面没有的样式；一般文件名与html文件名保持一致如index，如果拆分更细致可以使用多个单词的拼写例如index_banner.css等；在所有公共样式后面引入；注意单独样式文件去层叠公共样式，注意选择器权重
4、header区域
herder：网页顶部结构常用命名，通常包含logo、导航nav等内容
布局类型：通栏背景，内部包含版心居中的主要内容，内容包含左右浮动的两部分
整体结构：100%的div>版心的div
logo：使用h1>a结构，适当添加SEO搜索的关键字
nav导航：常用ul>li>a列表结构搭建
5、search区域
search：搜索框部分
布局类型：通栏背景，内部包含居中的主要内容
搜索框区域表单：需要添加<form>标签，保证数据能够提交数据库
补充：文本框<input>标签可以通过一个placeholder属性，设置默认提示文本，点击文本框输入文字后，placeholder属性内容自动消失
6、content区域
content：网页的主要内容区域，用于展示更多的产品、信息等
布局类型：通栏，底部设置边框，内容为版心居中
content内容包括四个部分：.main主要区域列表焦点图、.hot_recruit热门职位、.hot_company热门公司、.hot_links热门链接
7、.main部分
布局类型：左窄右宽的两列布局，通过浮动实现
aside：侧边栏常用命名，整体为无序列表结构，表现为特殊的下拉菜单效果，鼠标移上<li>后显示内部子级元素。下拉菜单的列表中，推荐使用自定义列表结构搭建
注意：测槟榄aside这种结构中的数据可能动态发生变化的，我们需要搭建好HTML结构和正确的CSS样式，让HTML结构足够清晰，方便后期后端人员传入数据
banner：焦点图部分为滚动轮播效果，点击滚动特效待后期JavaScript制作
布局方式：整体使用定位制作
8、.hot-recurit部分
热门职位部分是一种tab选项卡结构，并且跟后面的热门公司和热门链接有类似的结构和样式，需要谨慎提取公共样式，通过公共类名设置CSS，热门职位独有的样式需要使用单独的类名设置，避免影响其他两个部分。
布局类型：tab栏选项卡结构，整体为上下对齐的版心结构。
标题部分：浮动制作，当前展示的部分标签使用current的类名进行标记，设置特殊样式。
详细内容布局类型：平均腹分布型，使用浮动制作。
补充：多余的文字显示成...省略号形式，通过三行代码实现。
补充：多余文字显示省略号...
white-space:nowrap; 文字不换行
overflow:hidden; 超出部分隐藏
text-overflow:ellipsis; 溢出显示小圆点
9、footer区域
footer：页面底部的常用名
布局类型；通栏背景，内部包含版心居中的主要内容，内容包含左、右浮动两部分
其他登录方式部分：左浮动，注意其中的鼠标移上显示定位元素效果
其他链接服务部分：使用自定义列表制作结构
vertical-align:middle; 垂直居中对齐
10、copyright区域
版权区域一般是一些文字性信息，样式较为简单。
布局类型：通栏背景，内部包含版心居中的主要内容，主要内容包含左、右浮动的两部分
11、backtop区域
返回顶部设置，通常使用<a>进行结构搭建。
定位方法：固定定位，位置保持与版心固定的位置，避免由于分辨率不同元素位置差异太大，
动画效果：后期使用JavaScript实现
12、快速搭建公共结构
首页制作完毕后，分析与其他页面的共同之处，按照模块进行拆分复制选择
方法：直接复制index.html文件，删除不需要的结构，保留公司页需要的公共部分，同时删除不需要的css文件引入的<link>标签，保留所需要的公共样式文件
注意：记得更改nav导航中的当前选中的class
公共结构搭建完成后，可以继续书写公司页面独有的结构和样式