网页设计与制作（项目二--响应式页面制作）
政务网站制作要点
（一 ）响应式的制作
1.排列方式：导航：一行变为两行；水平结构：变成纵向排列；
2.隐藏显示：在某个宽度的时候，特定的标签显示或者隐藏；
3.尺寸变化：典型--->轮播部分，文字、行间距、图片的宽高都会变化以适应屏幕的尺寸；
4.面包（bread）导航，如北京大学的官方网站的导航部分（北京大学官网链接），缩小页面的情况下会出现三层面包导航结构
5.响应式布局：又称“自适应网页设计”，指可以自动识别屏幕宽度并作出相应调整的网页设计。
6.图片的响应式建议宽度100%，和框架一样宽且不要设置高度，保证程正比缩放。
7.浏览器插入img会此
所谓响应式布局就是一个网站能兼容多个终端（PC端、手机端、平板端）
响应式的界面要点：
（1）尺寸改变
（2）排列：水平->垂直
（3）内容取舍：显示--><--隐藏
目的：不用为每个终端做一个特定版本
优点：面对不同分辨率的设备灵活性强；一套页面即可解决多设备显示适应问题，成本较低且易于维护
缺点：兼容各种设备工作量大，开发效率低；代码累赘，会出现隐藏无用的元素加载时间长，多方面因素影响可能达不到好效果
6.媒体查询：
| 物理分辨率 | 逻辑分辨率 |
| 页面上，硬件分辨率 | 程序上，程序分辨率（开发时更注重） |
| iPhone12pro 1170*2530 | iPhone12pro 390*844 |
（二） 企业网站主要内容
1.首页
2.二级页面
3.详情页：点击导航进入进入页面
4.列表页：
5.联系我们
（三）基于重庆市人民政府网站制作的学习
（项目分析）
网站性质：政府门户官网；
作用：政务信息发布、宣传当地文化、政策、便民、办事；
（管理css相关工具）
1.scss:css预编译工具。高效管理和编辑css代码
（scss官网）
scss优势
（1）兼容css:sass完全兼容所有版本的css,可以按照css语法来写没有任何问题；
（2）特性丰富：相比传统css，sass新增了变量、循环、数组、函数等功能特性；
（3）行业认可：很多项目前端样式管理的首选语言，求职中的加分项！
2.Less:基于JavaScript的编译css工具
对于网站的基本要求：
1.字体大小：最小12px 14px 16px ；标题18-24px ；行间距统一
2.图片：必须清高清，不可变形
（四）媒体查询
媒体查询页面，<head></head>之间必须要有meta ,媒体查询是响应式设计的核心。常用的使用方法：
@media 媒体类型 and (媒体特性) { 具体样式 }
@media screen and ( max-width:480px )
{
.ads
{
display:none;
}
}
/* 当屏幕宽度最大为480px时，类为.ads的标签就隐藏 */
1.媒体类型 media type:描述在什么媒体（设备）上使用该样式，响应式布局上一般用all\screen
| 值 | 描述 |
| all | 用于所有设备 |
| screen | 用于电脑屏幕，平板电脑，智能手机等 |
| 用于打印机和打印预览 | |
| speech | 应用于屏幕阅读器等发声设备 |
2.媒体特性 media features:描述了设备或浏览器环境的具体特征，负责查询这些特性是否存在，具体值为多少
每条媒体特性表达式都要用括号括起来
| 名称 | 简介 |
|
max-width min-widtn |
视窗（viewport）的最大/最小宽度，包括纵向滚动条的宽度 |
| orientation |
视窗的旋转方向：portrait处于纵向，即高度>=宽度 landscape处于纵向，即宽度>高度 |
3.逻辑操作符
| 运算符 | 简介 |
| and | 用于将多个媒体查询规则组合成单条媒体查询，当每个查询规则都为真时则该条媒体查询为真，还用于将媒体类型与媒体特征结合在一起 |
| not | 否定媒体查询，若使用not，则必须指定媒体类型 |
| only | 仅在整个查询匹配时才用于应用样式，若使用only，则必须指定媒体类型 |
| ， | 将多个媒体查询合并为一个规则。逗号分隔列表中的每个查询都与其他查询分开处理。因此 ，若列表中任何查询为true则整个media语句均返回true |
网页设计与制作（项目二--响应式页面制作）相关推荐
- HTML实训大作业网页设计：我的简历——响应式个人简历网站模板(1页) HTML+CSS+JavaScript web网页设计制作成品
HTML实训大作业网页设计:我的简历--响应式个人简历网站模板(1页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品 >&g ...
- 阿里百秀响应式页面制作
文章目录 案例:阿里百秀移动端首页 一.技术选型 二.需求分析 1.页面布局分析 2.屏幕划分分析 三.页面制作 1.创建文件夹结构 2.创建html骨架结构 3.引入相关样式文件 4.书写内容 he ...
- java响应式网页设计_基于HTML5的响应式网站的设计与实现(论文).docx
毕业论文 基于HTML5的响应式网站的设计与实现 摘 要 随着网络的发展和普及,各类建站技术的更新与运用,现在搭建一个网站的时间和成本越来越低,使得企业官方网站得到了极大的发展.从早期简单的网页展示, ...
- HTML+CSS简单漫画网页设计成品 大学生个人HTML响应式--(海贼王 6页)
⛵ 源码获取 文末联系 ✈ Web前端开发技术 描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 网页设计作业 | 动漫网页设计 | 动漫网页设计成品 | 动漫 ...
- 【移动端网页布局】移动端网页布局基础概念 ⑧ ( 移动端页面布局方案 | 单独制作的移动端页面 - 主流 | 响应式页面兼容移动端 - 开发难度较大 )
文章目录 一.移动端页面布局方案 1.单独制作的移动端页面 2.响应式页面兼容移动端 一.移动端页面布局方案 移动端页面方案 : 单独制作的移动端页面 : 主流开发方案 , PC 端 与 移动端 访问 ...
- HTML5期末大作业：宠物主题网站设计——酷酷动物主题响应式网页(5页) HTML+CSS+JavaScript...
1.临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? 网页要求的总数量太多? 2.没有合适的模板?等等一系列问题.你想要解决的问题,在这篇博文中基本都能 ...
- HTML5期末大作业：美食主题网站设计——美食零食官网响应式网页设计(6页) HTML+CSS+JavaScript
HTML5期末大作业:美食主题网站设计--美食零食官网响应式网页设计(6页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品 常见网 ...
- 二倍图（物理像素物理像素比，多倍图，背景缩放），移动端开发选择（移动端主流方案【单独制作移动端页面（主流），响应式页面兼容移动端（其次）】，移动端技术解决方案【移动端浏览器，特殊样式】）
二倍图 物理像素&物理像素比 物理像素指的是屏幕显示的最小颗粒,是物理真实存在的,我们开发的1px不一定等于1个物理像素,(PC端相同,移动端不一定相同) PC端和早期手机屏幕是 1CSS像素 ...
- 扫描二维码在移动设备上浏览响应式页面
最近想尝试对一个Ghost博客主题进行移植,因为对一个后端程序员来说,进行前端方面的工作实在是个不小的挑战,而我对CSS更是有种与生俱来的恐惧感,所以我是非常喜欢Bootstrap和Materil ...
最新文章
- pandas dataframe与series
- golang struct 转map 及 map[string]*Struct 初始化和遍历
- android调用另一app的xml,Android 7.0+调用其他App打开文件
- Python-理解装饰器
- python字符串 切片_用于切片字符串的Python程序
- python基础的学习
- iOS 移动端生成工具开发
- 使用Zabbix监控memcached
- DB2添加数据时主键、唯一键冲突的解决方法
- 人物传记——周小川、李稻葵（央行智囊团）
- springboot中的controller注解没有生效
- CustomValidator 的客户端验证
- Python语言三种优点。
- 2022年低压电工考试及低压电工模拟考试题库
- 免费音效素材，拿走不谢。
- 微信H5页面自定义微信分享内容
- windows 批处理(bat) 修改文件md5 值
- 图片里的数学公式转换成word
- 必看！ 为什么“吉祥物”可以提高UI设计以及品牌影响力
- HHL论文第一弹（总结算法基本思想、QRAM制备量子态）