ue 新建html,第四课开发uehtml官网响应式静态页面(示例代码)

概况：整站布局、头部菜单响应式设置、最新消息模块变化、内容模块四三二响应式变化。

伪类选择器：

E:nth-of-type(n) 表示E父元素中的第n个字节点，且类型为E

E:nth-last-of-type(n)表示E父元素中的第n个字节点，且类型为E,从后向前计算

只匹配在下标出现的选择器

E:nth-child(n) 表示E父元素中的第n个字节点

p:nth-child(odd){background:red}/*匹配奇数行*/

p:nth-child(even){background:red}/*匹配偶数行*/

p:nth-child(2n){background:red}

E:nth-last-child(n) 表示E父元素中的第n个字节点，从后向前计算

选择器需要与元素下标完全匹配

E:first-child 表示E元素中的第一个子节点

E:last-child 表示E元素中的最后一个子节点

E:first-of-type 表示E父元素中的第一个子节点且节点类型是E的

E:last-of-type 表示E父元素中的最后一个子节点且节点类型是E的

E:only-child表示E元素中只有一个子节点。注意：子节点不包含文本节点

E:only-of-type 表示E的父元素中只有一个子节点，且这个唯一的子节点的类型必须是E。注意：子节点不包含文本节点

Bootstrap:简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。(http://www.bootcss.com/)

使用方法：官网下载引入项目即可使用，注意如果需要根据需求修改bootstrap源码，可以下载用于生产环境的bootstrap。

可以参考官网全局CSS样式来了解和使用bootstrap。

本节主要是使用到bootstrap的响应式工具。

在布局的时候，可以根据网站具体的布局需求来决定使用.container (固定宽度)或 .container-fluid (100% 宽度)，如果是通栏类，则使用.container-fluid，如果是固定宽度的则使用.container，可以根据具体的需求来修改源码页面宽度的临界点。

响应式工具：

通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容。

从 v3.2.0 版本起，形如 .visible-*-* 的类针对每种屏幕大小都有了三种变体，每个针对 CSS 中不同的 display 属性，列表如下：

可以根据元素是行内元素、块级元素还是行内块级元素来运用。

ue 新建html,第四课开发uehtml官网响应式静态页面(示例代码)相关推荐

几个比较好的IT站和开发库官网
几个比较好的IT站和开发库官网 1.IT技术.项目类网站 (1)首推CodeProject,一个国外的IT网站,官网地址为:http://www.codeproject.com,这个网站为程序开发者提 ...
[导入]Asp.net 2.0 自定义控件开发[创建自定义浮动菜单FloadMenu控件][示例代码下载]...
Asp.net 2.0 自定义控件开发[创建自定义浮动菜单FloadMenu控件][示例代码下载] 文章来源:http://blog.csdn.net/chengking/archive/2007/0 ...
USB2.0学习笔记连载（四）:安装Cypress官网套件
上一篇博客大概讲了一下USB通用驱动程序的解析.笔者使用Cypress官网给定的资料去完成USB驱动开发.官网资料地址:http://www.cypress.com/?rID=14321 下载如下图的 ...
前端-查询参考资料网站/软件/移动端、jQuery开发插件官网
1. ECharts(数据可视化模板) https://echarts.apache.org/zh/index.html 2. CanIuse网站-用于判断技术能在哪些浏览器使用的兼容性(绿色表示 ...
前端开发性能优化-Vue响应式优化
vue 开发里面数据响应相关优化在Vue开发中,经常会有加载大量数据的场景,如果按照原本的流程加载,Vue会对data中的数据设置数据响应式,有时候根本不需要进行响应式,仅仅是对其进行展示,这时候就 ...
嗖嗖嗖主题网外贸企业主题制作视频教程--第四讲 Wordpress首页模板文件index.php静态页面完善
第四讲 Wordpress首页模板文件index.php静态页面完善
ios架构与开发第五课 BFF、MVVM和响应式编程
15 跨平台架构:如何设计 BFF 架构系统? 上一模块,我和你介绍了iOS 工程化实践中的基础组件设计, 接下来这部分,我们将进入核心内容:移动端系统架构的设计与实现. 首先请你想一想:如果没有一套 ...
移动Web开发--学习笔记三响应式项目实战（微金所）
响应式项目实战(微金所) 响应式项目开发流程选择一种屏幕格式进行开发相应功能模块完成后,测试是否响应式效果确保响应式效果满足要求进行下一个功能模块开发使用自定义字体图标创建自己的字体图标h ...
Flutter开发之官网的第一个例子实现（46)
参考: 编写您的第一个 Flutter App Flutter开发我的收藏列表准备数据:列表数据使用数组存储,选中的数据可以使用Set存储(因为set可以自动去重). 界面列表:使用ListView ...
前端开发——移动端及响应式布局解决办法总结（适配）
问题分析:前端开发一个产品(网站.系统.APP等)会遇到的一个难点就是适配问题,比如开发一个网站,你在一个页面开发的时候从视觉看起来没什么异样,换个不同分别率的设备,电脑,手机等,发现样式全乱了,这个 ...

ue 新建html,第四课开发uehtml官网响应式静态页面(示例代码)

ue 新建html,第四课开发uehtml官网响应式静态页面(示例代码)相关推荐

最新文章

热门文章

ue 新建html,第四课 开发uehtml官网响应式静态页面(示例代码)

ue 新建html,第四课 开发uehtml官网响应式静态页面(示例代码)相关推荐

最新文章

热门文章

ue 新建html,第四课开发uehtml官网响应式静态页面(示例代码)

ue 新建html,第四课开发uehtml官网响应式静态页面(示例代码)相关推荐