最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【整理】用什么技术实现公司网站官网首页H5页面

工作和技术 crifan 3198浏览 0评论

已经去看了:

【记录】用sxl上线了制作的公司主页

这种的,算是单页面,或者不复杂的,HTML5页面

想要搞清楚实现这样的页面所用的主流的技术,都有哪些

html5 homepage design

html5 homepage example

html5 homepage templates

html5 homepage code

Best HTML5 Websites | Web Design Inspiration

HTML Responsive Web Design

HTML5 UP! Responsive HTML5 and CSS3 Site Templates

貌似模板很多,比如:

Helios | HTML5 UP

就可以在此基础上修改,变成自己要的。

Telephasic | HTML5 UP

Strongly Typed | HTML5 UP

Dopetrope | HTML5 UP

和上面类似。

这个背景一直在滚动的,有点炫酷:

Aerial | HTML5 UP

Miniport | HTML5 UP

Stellar | HTML5 UP

是我希望的效果:顶部几个按钮,点击后,跳转到对应的位置

另外参考:

去搜:

html page-site

也能找到很多模板

One Page HTML Templates

也算知道了:

这类公司主页的页面,往往是单页面的,可以被叫做:

One Page HTML Template

一些demo:

Avilon Bootstrap Template

Mate – Parallax Website Template

Comply – Bootstrap 4 Multipurpose Template

都挺不错的

Law — Free Multi-Purpose One Page Bootstrap 4 Theme by ProBootstrap.com

18 Best HTML5 One Page Website Templates 2017 – Colorlib

里面的页面模板都是 多个页面 多个链接的 复杂的

-》等有需要的话,可以好好去找找

比如:

Jevelin Multi-Purpose Premium Responsive WordPress Theme Preview – ThemeForest

中间带 slide 轮播图

App Landing Page Preview – ThemeForest

底部有水波纹

Kwoon – Multipurpose Single/Multi-page Template Preview – ThemeForest

轮播图:

公司业绩:

团队介绍:

特点介绍:

客户评论:testimonials

更多其他功能模块:

包括顶部Headers的布局和样式:

和整体页面的布局:

-》

Onepage

其他模版也是多功能的:

Crexis | Multi-Purpose One & Multi Page Theme Preview – ThemeForest

Oshine

里面也是典型的公司的主页:

团队,产品,客户等等

Volar | One Page Minimal Parallax Template Preview – ThemeForest

这里面的demo,鼠标移动上去后,可以从上到下滚动快速预览整个页面效果

-》

Volar

这个动画效果不错

这个团队介绍也有点意思:

Hygge – Multipurpose Single/Multi Page Template Preview – ThemeForest

Engage – Creative Multipurpose HTML Theme Preview – ThemeForest

-》

里面有不同类型的模板

http://themes-lab.com/engage/homepage-corporate

http://themes-lab.com/engage/homepage-business

Pofo – Creative Agency, Corporate and Portfolio Multi-purpose Template Preview – ThemeForest

-》

POFO – Creative Agency, Corporate and Portfolio Multi-purpose Template

团队介绍:

 

Blanka HTML

后续可以去找更多的,合适的,公司主页,单页面,html5的模板

TODO:

1.再去看看:

16 amazing HTML examples | Creative Bloq

2.和google搜:

html5 homepage templates

看看还有哪些模板

3.再去看看:

HTML5 UP! Responsive HTML5 and CSS3 Site Templates

虽然模板数量不是太多,但是足够简单方便,且可以免费下载

4.关于如何自己设计,可以学习:

How to Code a Homepage Template with HTML5 and CSS3 — Medialoot

页面结构设计

Page Structure and Site Design | Web Style Guide 3

HTML Tutorial for Beginners 101 (Including HTML5 Tags) – WebsiteSetup

5.关于html5本身:

新增功能的demo

HTML5 Demos and Examples

转载请注明:在路上 » 【整理】用什么技术实现公司网站官网首页H5页面

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
87 queries in 0.849 seconds, using 22.15MB memory