使用html5和css3的网站有哪些

html-css010

使用html5和css3的网站有哪些,第1张

html5一些新标签用的网站不多,大多数网站没有更换html5的新标签多数还是html4标签。但是这点换不换html5新标签其实对网站前端的影响不是特别大。所以现在基本上大多都是html4+CSS3的组合!

用html5+css3的网站大多是一些开发者自己开发的博客,只有这类开发者才会去不断尝试新东西。例如这两个网站就是:http://www.yangqq.com/http://geekhelp.cn 就是标准的html5+CSS3构建的前端页面!

国内使用html5+css3制作的网站并不是特别多,大部分是使用了animation.css或者类似的css文件,这种文件集成了很多css编写的动画函数,只需要我们引用或者js触发某个事件的时候引用即可达到效果,html5+css3的网站有:

html5中国论坛(部分标签使用了html5的新标签)

各大浏览器官方网站的主页(大部分使用css3+javascript效果实现)。

可以参考国外的网站模板,国外模板大部分使用html5+css3编写。

第一种:用vw和vh,

1vw 的意思就是把屏幕的宽分成一百分后中的一分,也就是1%

vh 指高度,同上。

第二种:用bootstrap吧,bootstrap是一款CSS框架插件,自适应上做的很好,

比如,我们做一个DIV,让电脑端显示为三列,手机端显示一列,可以这样:

<div calss="row">

    <div class="col-md-3 col-12">第一列</div>

    <div class="col-md-3 col-12">第二列</div>

    <div class="col-md-3 col-12">第三列</div>

</div>

row表示行,col表示列,

col-md-3 表示在屏幕宽大于768时,分成12列中的三列,

col-12 表示屏幕宽在小于576时,分成12列,占全12列,也就是表示一整行的意思,

另外还有其它的单位,如 sm lg xl 等,都表示不同浏览器的宽度。

希望以帮助到你!