第四课 开发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 属性,列表如下:

  

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

时间: 2024-08-07 00:12:59

第四课 开发uehtml官网响应式静态页面的相关文章

开发“小米商城官网首页”(静态页面)

一,项目题目:开发"小米商城官网首页"(静态页面) 二,项目需求 1.熟练运用所学知识还原小米商城官网首页静态页面 * 不需要做动态效果,只实现静态页面, 后期学完js再回来实现动态效果 三,项目布局 四,效果对比 目前的官网图片和小编做的图片对比 官网图片 小编做的效果图 五,代码附上 链接:https://pan.baidu.com/s/1EVyF8RIgRXFvEIHQf42Pow 密码:zqs4 index.html <!DOCTYPE html> <html

如何评价苹果中国官网 iOS 8 介绍页面的文案「开发者的大事、大快所有人心的大好事」?[转自知乎]

在什么是「苹果式中文」答案中,小七得出了这个结论: 「苹果式中文」是指句子结构破碎,经常缺乏主语,滥用排比,顶真,偏正短语,和不恰当四字词的广告文体. (有关什么是苹果式中文,小七原来贴错地方了TAT,具体分析请移步:什么是「苹果式中文」?) 那么作为广告翻译,苹果做得如何呢? 首先,有个翻译的概念需要向大家普及: 很多知友提出文案有明显的翻译腔,这个说法其实不准够确啊,有关什么是翻译腔,我的分析请移步:什么是「翻译腔」?「翻译腔」是好是坏? 在这里节选原文一段补充说明: 3. 明明能说中文,非

带你玩转JavaWeb开发之五-如何完成响应式开发页面

响应式页面开发 使用BootStrap开发一个响应式的页面出来 响应式开发就是同一个页面在PC端与手机端Pad端显示不同的效果,以给用户更好的体验 需求分析 开发一套页面,让用户能够在PC端, Pad端, 手机端同时正常显示啊,并且不能够影响显示效果 技术分析 BootStap概述 什么是BootStrap BootStrap有什么作用 什么是响应式 BootStrap的中文网 http://www.bootcss.com 下载BootStrap BootStrap结构 全局CSS bootSt

谷歌Web中文开发手册:3响应式

https://developers.google.com/web/fundamentals/getting-started/your-first-multi-screen-site/responsive (译者注:全部按照教程的代码,并不能实现代码,我调试之后发了全部代码出来.ps:没有使用翻墙工具,谷歌给的例子访问不到.) 每个设备都有自己独特的优势和限制,要让这个网页在众多的不同的显示设备中被接受,作为一名Web开发者,你要尽力让这个页面支持所有设备. 目录: 添加viewport 应用简

使用CSS3的@media来编写响应式的页面

1 @media mediaType and|not|only (media feature) { 2 /*CSS-Code;*/ 3 } 首先要知道,我们为什么要写自适应的页面(响应式页面) [直接看干货] 众所周知,电脑.平板.手机的屏幕是差距很大的,假如在电脑上写好了一个页面,在电脑上看起来不错,但是如果放到手机上的话,那可能就会乱的一塌糊涂,这时候怎么解决呢?以前,可以再专门为手机定制一个页面,当用户访问的时候,判断设备是手机还是电脑,如果是手机就跳转到相应的手机页面,例如百度的就是,手

web多终端开发学习系列(一)--- 响应式布局框架BootStrap学习

最近在温习web的开发,毕业之后就没接触web开发了.当时HTML5在国内貌似还是刚刚起步,能适配HTML5的浏览器很少.移动界面框架也才刚刚开始,记得当时曾经学过sencha touch的移动框架以及jquery mobile框架.这两个框架都对响应式布局进行了不错的适配及实现.响应式布局说白了就是对于多个移动终端只需一个界面即可全部适配,可大大地减少开发的工作量. 最近一年Bootstrap开始广泛地被使用了,基于此框架开发出来的插件数不胜数.所以我花了几天时间学习了下Bootstrap,本

RxJava开发精要3-向响应式世界问好

原文出自<RxJava Essentials> 原文作者 : Ivan Morgillo 译文出自 : 开发技术前线 www.devtf.cn 转载声明: 本译文已授权开发人员头条享有独家转载权,未经同意.不得转载! 译者 : yuxingxin 项目地址 : RxJava-Essentials-CN 向响应式世界问好 在上一章中,我们对观察者模式有个理论上的高速概述.我们也看了从头開始.从列表.或者从已经存在的函数来创建Observables. 在本章中.我们将用我们学到的来创建我们第一个响

关于近段时间web app开发的总结一 响应式布局

近段时间开发web app,以下是一些个人经验. 关于我所用的响应式布局 1,viewport 该meta标签的作用是让当前viewport的宽度等于设备的宽度,同时不允许用户手动缩放.也许允不允许用户缩放不同的网站有不同的要求,但让viewport的宽度等于设备的宽度,这个应该是大家都想要的效果,如果你不这样的设定的话,那就会使用那个比屏幕宽的默认viewport,也就是说会出现横向滚动条. width 设置layout viewport  的宽度,为一个正整数,或字符串"width-devi

前端开发:网格布局--响应式

1.前言 通过前面两章网格布局介绍,知识深度很浅,心里有点不安.不能说对不起支持我的园友(我没有这么高尚),就是觉得应该进一步学习一下“时髦”的东东. 说到网页设计,恐怕不得不提响应式设计.本章我就尝试一下网格布局下的响应式设计. 2.分隔屏幕区间 参考bootstrap3.x栅格系统,展示区间分为四种: 超小屏幕(手机) 小于768px 小屏幕(平板)    大于或等于768px 中等屏幕 (桌面显示器) 大于或等于992px 大屏幕 (大桌面显示器) 大于或等1200px 这样的css代码设