HTML5 / CSS3 – NAVIGATION自我疑惑和解答

1、现在的主流网页的尺寸是多少?

PC的屏幕宽度,一般都在1000像素以上(目前主流宽度是1366×768),有的还达到了2000像素。手机的屏幕比较小,宽度通常在600像素以下。因此现在,要在大小迥异的屏幕上,都呈现出满意的效果,并不是一件容易的事。

即使专业地接触前端已经一年半了,在这个问题上我开始一直被困扰着。通过这次,很想能够寻找出一个答案。

观察过很多个网站,是采用不同的设备用不同的网页代码,但是这样维护起来就相当于要维护好几个网站。如果一次性做出来,不是更省心吗?

下面,说几种我找到的解决方法:

(1)宽度:使用%取代px等方式定义宽度

(2)字体:使用em取代px

(3)定位:多使用灵活的浮动float

(4)图片:采用max-width和%形式来显示,这样就可以自己适应屏幕的大小了。

2、body里面框个的作用是什么?

暂时理解为定位整个页面,防止有意想不到的问题。

但是暂时没有碰到过因为不加而产生的问题,我也没有办法通过实际去理解。希望各位有经验的大神指点一下。

3、css结构里,让所有浏览器都支持的代码真的好用吗?

其实网络上有很多种兼容各种浏览器的方法,特别是ie6\ie7\ie8的。但是各个浏览器的兼容效果始终是有所差异的,如果都要兼容起来,恐怕是一门大学问。

我们可以在最基础上提前预防。

但是很多时候,都是根据碰见了哪个问题,再针对问题进行一一解决。我个人比较赞同这种方式,因为有些为了兼容性而写的代码,如果有效性不够高,可能会限制到正常写代码的效果。

4、html5里的具体作用是什么?现在有多少浏览器支持?效果是怎样?

标签是 HTML 5 中的新标签。

主流浏览器效果:在IE6/IE7/IE8上并不能识别,需要进行JavaScript处理。因此,为了保证兼容,还是要在其内部写一个



类似的html5的新标签汇总:

  • 定义页面或区段的头部;
  • 定义页面或区段的尾部;
  • 定义页面或区段的导航区域;
  • 页面的逻辑区域或内容组合;
  • 定义正文或一篇完整的内容;
  • 定义补充或相关内容;

5、重新认识absolute的作用。(绝对定位)

生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

6、重新认识relative的作用。(相对定位)

生成相对定位的元素,相对于其正常位置进行定位。

因此,”left:20″ 会向元素的 LEFT 位置添加 20 像素。

7、display:inline;对

的作用效果?

display 属性规定元素应该生成的框的类型。

display:inline;的作用:使段落生出行内框。对于

来说,使它们在同一行。

8、为什么要-webkit--moz--o-前缀?具体含义是什么?

针对不同浏览器,CSS有一些前缀,如:

Chrome:-webkit-(最新版的Chrome已经没有采用webkit内核了,但是Safari一直是采用的webkit,并且几乎所有的移动浏览器都使用webkit) 
Firefox:-moz-( Firefox 3.6 – Firefox 15需要加 ) 
IE:-ms-(没有必要添加,因为从来没有一个稳定的ie支持) 
Opera:-o-(低于Opera 12.10的版本,可不加)

为什么要加这些前缀呢?

浏览器使用前缀来尝试一些新属性、值和选择器,即便它们还没有最终定稿——这是一个好的测试方法,在必要时也可以对它们进行修正或者重新定义。如果浏览器一上来就直接使用标准属性,那它们就会被直接锁定在这个特性的实现上而不易变更。

9、visibility的作用是什么?

visibility:元素是否可见。

浏览器情况:所有主流浏览器都支持 visibility 属性。

值的使用方法:

(1)visible:默认值。元素是可见的。

(2)hidden:元素是不可见的。

10、»是什么?

显示为:»

11、怎么让wordpress导航自动居中?因为它的宽度会根据内容而变化。

这是一个值得研究的问题,今天好困- -先睡觉了哦~下次专门发篇文章解决这个问题,会给链接地址的。

时间: 2024-08-03 13:07:45

HTML5 / CSS3 – NAVIGATION自我疑惑和解答的相关文章

献给网页设计师的HTML5/CSS3/JS便捷工具

  是时候为网页设计师的来一组便捷的辅助工具了.日新月异的网页技术革新催生了大量的设计与开发工具,HTML5/CSS3几乎成了设网页设计师的必修课,而强大的JS也为网页提供了更多的可能性.尤其是HTML5,作为一门极为有用且实用的标记语言,它赋予网页设计师创造更优秀网页的可能. 这也是为什么,身为网页设计师的你需要不停地了解最新的技术趋势和新兴工具,这些全新的库.框架.插件和技术能让你的网页如虎添翼. HTML5使得设计师和开发者在各个不同领域都比之前更强大了.快速,漂亮,安全,响应式,这些特性

20个九月最新的HTML5/CSS3优秀网站

  今天来一组酷炫的HTML5 – CSS3 优秀网站,无论是网站主题(反战.捍卫人权.肯德基老爷爷的美好晚年等)还是动效视觉,都非常值得体验.周末休息下,来点轻松的吧 The Generations Relay 2014年是华沙起义70周年,华沙博物馆邀请了在那场战斗有代表性的12个组织参加这个"薪火相传"的活动,组织里的年轻人庄严宣誓,他们将承担起建造一个自由.爱.诚实.谦虚.友善.保护弱者.有责任感的世界这个任务. Nike – Geç Kendini 耐克2015年夏季的女装的

提高开发速度的HTML5/CSS3框架

Perkins是个HTML5/CSS3框架,能让设计师提高开发速度. 整个框架带有一个简单的模板,其中包含了大多数的HTML的标签样式,以及一些网页上常见的,如导航条.圆角等等.模板中元素的样式也设计得相当好看,此外还带有一套图标. 兼容性: 所有主流浏览器 网站: http://p.erkins.com/ 官方下载: http://code.google.com/p/perkins-less/downloads/list

HTML5/CSS3的开发框架:实用HTML5和CSS3框架

文章简介:所有的开发人员都应该注意了,你们绝对应该看看这篇文章,帮助你快速创建HTML5/CSS3的开发框架.可能你也看到过其它的框架,但是你应该看看这些框架,因为你以前可能没用过他们中的大部分.看看最新的实用HTML5和CSS3框架吧! 所有的开发人员都应该注意了,你们绝对应该看看这篇文章,帮助你快速创建HTML5/CSS3的开发框架.可能你也看到过其它的框架,但是你应该看看这些框架,因为你以前可能没用过他们中的大部分.看看最新的实用HTML5和CSS3框架吧!希望你们喜欢! 1.HTML5b

HTML5 CSS3简明教程

Web 设计师可以使用HTML4和CSS2.1完成一些很酷的东西.我们可以在不使用陈旧的基于table布局的基础上完成文档逻辑结构并创建内容丰富的网站.我们可以在不使用内联<font>和<br>标签的基础上对网站添加漂亮而细腻的风格样式.事实上,我们目前的设计能力已经让我们远离了那个可怕的浏览器战争时代.专有协议和那些充满闪动.滚动和闪烁的丑陋网页. 虽然我们现在已经普遍使用了HTML4和CSS2.1,但是我们还可以做得更好!我们可以重组我们代码的结构并能让我们的页面代码更富有语义

提供超多HTML5+CSS3响应式网页模版免费下载的酷站

  今天介绍的HTML5 UP! 提供大量的HTML5 模版,而且这些模版都支持响应式网页设计 ,有了它我们就不用从无到有.从头到尾来打造一个网站,而是直接就现有的样版去做修改或调整,让建网站难度降低许多,也减少花费的时间和开支.来收! 因为自适应网页设计在开发上较为繁琐,一般很少免费提供下载的网站,但 HTML5 UP! 收录一系列共 28 种网页设计,通通都是 HTML5+CSS3 并有响应式设计 功能,网站采用的授权方式为 Creative Commons 姓名标示 3.0,也就是说你可以

10个便利的HTML5/CSS3框架

来源:GBin1.com 所有的开发人员都应该注意了,你们绝对应该看看这篇文章,帮助你快速创建HTML5/CSS3的开发框架.可能你也看到过其它的框架,但是你应该看看这些框架,因为你以前可能没用过他们中的大部分. 看看最新的实用HTML5和CSS3框架吧!希望你们喜欢! 1. HTML5boilerplate H5BP 带给你非常漂亮的文档,一个网站优化的编译脚本,还有一个自定义的boilerplate编译器.除此之外,我们还支持lighttd,Google App Engine和NodeJS以

实例:html5.js 让HTML5+CSS3制作的网站兼容ie6,7,8浏览

今天下载了html5.js插件,然后用html5+css3制作了个简单的网页布局,测试一下这个html5.js插件是否可以兼容ie6,7,8浏览器.做好之后用IETester在IE6.7.8这3个版本测试了一下,的确可行.这样也为以后用html5+css3建设网站提供了可行性. ie678浏览器演示效果 HTML5代码效果图 CSS3效果图 下载:html5+css3兼容ie678浏览器案例

08. Web大前端时代之:HTML5+CSS3入门系列 ~ QQ空间时间轴

Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html  大前端系列,主要就是使用CSS3.0来实现,注释我已经打在代码里面了,直接看代码就可以了,后面会说一下CSS3.0系列,这个就当一个引入吧:   简单版本: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content=&q