element网站模板（elementbases模板）

本文目录一览：

• 1、html 初学者 网站模板
• 2、如何制作网站？
• 3、有做网页的大神吗，可以帮我修改一下这个网页么
• 4、AE下载了一个带element效果的模板，C4D文件也给了，但是进去以后没有他放到3D模型
• 5、如何将网站模板里的几个不同公司的logo图片，做成向左间歇式的滑动，不同公司的logo图片是在友情链接里面
• 6、饿了么基于Vue2.0的通用组件开发之路

html 初学者 网站模板

!DOCTYPE html

html

head

meta charset="UTF-8"

title/title

style

body{

height:500px;

background: linear-gradient(#A6CADE,#F8C6F8) no-repeat;

}

ul,li,div {

padding:0;margin:0;

}

.container{

width: 500px;

margin:0 auto;

}

#tab-con div{

display: none;

width:500px;

height:282px;

}

#tab-con div img{

width: 100%;

height:100%;

}

#tab-con div.active{

display: block;

}

#tab-list ul li{

float:left;

list-style: none;

}

#tab-list ul li a{

display: block;

width:70px;

text-align: center;

text-decoration: none;

color:#000;

background: #D6D6D1;

}

#tab-list ul li.active a{

color:#fff;

background:#f96302;

}

/style

/head

body

div class="container"

div id="tab-con"

div class="active"img src="img/test1.jpg"/div

divimg src="img/test2.jpg"/div

divimg src="img/test3.jpg"/div

div图片4/div

div图片5/div

div图片6/div

div图片7/div

/div

div id="tab-list"

ul

lia href="javascript:;"首页/a/li

lia href="javascript:;"美食/a/li

lia href="javascript:;"交通/a/li

lia href="javascript:;"图片4/a/li

lia href="javascript:;"图片5/a/li

lia href="javascript:;"图片6/a/li

lia href="javascript:;"图片7/a/li

/ul

/div

/div

script

var tablist = document.getElementById('tab-list').getElementsByTagName('li');

var tabcon = document.getElementById('tab-con').getElementsByTagName('div');

for(var i = 0; itablist.length; i++){

tablist[i].onclick = function(){

starttab(this);

};

};

function starttab(obj){

for(var i = 0; itablist.length; i++){

if(tablist[i] == obj){

tablist[i].className = "active";

tabcon[i].className = "active";

}else{

tablist[i].className = "";

tabcon[i].className = "";

};

};

};

/script

/body

/html

如何制作网站？

1) asp 看别人的代码然后根据他的流程自己学者模仿一个

2) Frontpage就可以了

3) 我用了两三天吧,但是我当时是学会了VB的

4) 不涉及算法 最难的是版面设计

5) 看别人的代码然后根据他的流程自己学者模仿一个

技术要求：

（1） 基本知识：知道B/S模式工作原理，有B/S模式的概念。

（2） 开发环境：会使用IIS、FrontPage（或Dreamweaver）写静态和动态的网页，会调试。

（3） HTML：能读懂HTML代码，知道各个标签的含义（html, head, body, title, script, a, front, div, table, thead, tbody, tr, td, th, img, input, button, select, option, textarea, meta）。不需要会手工编写，但能在用工具软件编完的代码视图基础上添加、删除、修改HTML代码。最好能够连CSS也会用。参见《XML编程技术大全》选修课课本2、3章或其他书籍。建议研究、修改一下XML选修课课件的代码。

（4） ASP：能用ASP进行结构化编程（顺序、循环、选择结构）。能知道ASP程序要在HTML代码的什么位置添加。能运用ASP语法。能使用request和session操纵信息。能使用response对象的redirect、write、end方法。能够把从一个网页提交的数据在下一网页得到并显示出来。使用ADODB组件读写、编历数据库。

（5） JavaScript：能够把一下内容运用在HTML标记的onclick属性中：window.open、window.close、innerHTML、getElementByID、getElementByName、history.go、history.back。

（别看上面的要求很多，但是学起来很快的。按照（1）～（5）的顺序学，我没说的不作要求，重在实践！先期比较苦，但有成效。）

我有当时我们做的一个新闻发布系统，教程，小作业和一些有用的资料，你可以留下你的邮箱，我发给你。

有做网页的大神吗，可以帮我修改一下这个网页么

你得给出视频地址啊

一般来讲像是优酷、乐视在视频播放页面播放器下端有“复制地址”选项，选择iframe开头的HTML代码，复制一下。

新建play.js，(如果导入了jquery就更方便了，百度能搜索到click方法) 内容为：

function playVideo(){ //时间不多，代码很简陋

    document.getElementById('body').innerHTML="iframe.......就是你复制的那些东西/iframe"+document.getElementById('body').innerHTML;//可以加一些css啊之类的 这里你需要把body的id修改为"body"才可以

    //如果导入了jQuery还可以用fadeIn()和fadeOut()之类的方法优化界面

}

并在head部分导入。修改按钮GALLERY的HTML代码：input type="button" onclick="playVideo();" class="someclass" blablabla / 或者 a href="javascript:void(0);" onclick="playVideo();" andsomethingelsesometext/a，看模板里它用的是按钮还是锚文本了。然后试试效果吧。

AE下载了一个带element效果的模板，C4D文件也给了，但是进去以后没有他放到3D模型

你要装 3D element, Trapcode Particular 2, Optical Flares 插件

你看看文件包里有没有名字带pre-rendered的文件 打开那个

如何将网站模板里的几个不同公司的logo图片，做成向左间歇式的滑动，不同公司的logo图片是在友情链接里面

友情链接滚动特效 带控制按钮

title友情链接滚动特效 带控制按钮/title

style

.roun .rounCenter_fh{width:248px;float:left;overflow:hidden;border-left:1px solid #D3D3D3;border-right:1px solid

#D3D3D3;background-color: #FFFFFF;background-position: 193px top; height:133px; padding-top:8px;}

.container, .container img{width:180px; height:50px;}

.index_bank{width:250px; height:60px; background:url(/jscss/demoimg/200910/bank_back.gif) no-

repeat; padding:30px 0 0 15px;}

/style

DIV class="roun right mT8px"

div class="index_bank"

table width="190px" border="0" cellspacing="0" cellpadding="0"

tr

tdinput id="idPre" type="image" src="/jscss/demoimg/200910//bank_btn_left.gif"

onFocus="this.blur()" //td

tddiv class="container" id="idContainer2"

table id="idSlider2" border="0" cellpadding="0" cellspacing="0"

tr

tda href=""img src="/bank1.gif"/a/td

tda href=""img src="/bank2.gif"/a/td

tda href=""img src="/bank3.gif"/a/td

tda href=""img src="/bank4.gif"/a/td

tda href=""img src="/bank5.gif"/a/td

tda href=""img src="/bank6.gif"/a/td

tda href=""img src="/bank7.gif"/a/td

/tr

/table

/div/td

tdinput id="idNext" type="image" src="/jscss/demoimg/200910//bank_btn_right.gif"

onFocus="this.blur()" //td

/tr

/table

/div

script

var $ = function (id) {

return "string" == typeof id ? document.getElementById(id) : id;

};

var Extend = function(destination, source) {

for (var property in source) {

destination[property] = source[property];

}

return destination;

}

var CurrentStyle = function(element){

return element.currentStyle || document.defaultView.getComputedStyle(element, null);

}

var Bind = function(object, fun) {

var args = Array.prototype.slice.call(arguments).slice(2);

return function() {

return fun.apply(object, args.concat(Array.prototype.slice.call(arguments)));

}

}

var Tween = {

Quart: {

easeOut: function(t,b,c,d){

return -c * ((t=t/d-1)*t*t*t - 1) + b;

}

},

Back: {

easeOut: function(t,b,c,d,s){

if (s == undefined) s = 1.70158;

return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;

}

},

Bounce: {

easeOut: function(t,b,c,d){

if ((t/=d)  (1/2.75)) {

return c*(7.5625*t*t) + b;

} else if (t  (2/2.75)) {

return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;

} else if (t  (2.5/2.75)) {

return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;

} else {

return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;

}

}

}

}

//容器对象,滑动对象,切换数量

var SlideTrans = function(container, slider, count, options) {

this._slider = $(slider);

this._container = $(container);//容器对象

this._timer = null;//定时器

this._count = Math.abs(7);//切换数量

this._target = 0;//目标值

this._t = this._b = this._c = 0;//tween参数

this.Index = 0;//当前索引

this.SetOptions(options);

this.Auto = !!this.options.Auto;

this.Duration = Math.abs(this.options.Duration);

this.Time = Math.abs(this.options.Time);

this.Pause = Math.abs(this.options.Pause);

this.Tween = this.options.Tween;

this.onStart = this.options.onStart;

this.onFinish = this.options.onFinish;

var bVertical = !!this.options.Vertical;

this._css = bVertical ? "left" : "left";//方向

//样式设置

var p = CurrentStyle(this._container).position;

p == "relative" || p == "absolute" || (this._container.style.position = "relative");

this._container.style.overflow = "hidden";

this._slider.style.position = "absolute";

this.Change = this.options.Change ? this.options.Change :

this._slider[bVertical ? "offsetHeight" : "offsetWidth"] / this._count;

};

SlideTrans.prototype = {

//设置默认属性

SetOptions: function(options) {

this.options = {//默认值

Vertical: true,//滚动方向，这里是垂直，已固定，且不能修改）

Auto: true,//是否自动

Change: 0,//改变量

Duration: 50,//滑动持续时间

Time: 10,//滑动延时

Pause: 2000,//停顿时间(Auto为true时有效)

onStart: function(){},//开始转换时执行

onFinish: function(){},//完成转换时执行

Tween: Tween.Quart.easeOut//tween算子

};

Extend(this.options, options || {});

},

//开始切换

Run: function(index) {

//修正index

index == undefined  (index = this.Index);

index  0  (index = this._count - 1) || index = this._count  (index = 0);

//设置参数

this._target = -Math.abs(this.Change) * (this.Index = index);

this._t = 0;

this._b = parseInt(CurrentStyle(this._slider)[this.options.Vertical ? "top" : "left"]);

this._c = this._target - this._b;

this.onStart();

this.Move();

},

//移动

Move: function() {

clearTimeout(this._timer);

//未到达目标继续移动否则进行下一次滑动

if (this._c  this._t  this.Duration) {

this.MoveTo(Math.round(this.Tween(this._t++, this._b, this._c, this.Duration)));

this._timer = setTimeout(Bind(this, this.Move), this.Time);

}else{

this.MoveTo(this._target);

this.Auto  (this._timer = setTimeout(Bind(this, this.Next), this.Pause));

}

},

//移动到

MoveTo: function(i) {

this._slider.style[this._css] = i + "px";

},

//下一个

Next: function() {

this.Run(++this.Index);

},

//上一个

Previous: function() {

this.Run(--this.Index);

},

//停止

Stop: function() {

clearTimeout(this._timer); this.MoveTo(this._target);

}

};

var forEach = function(array, callback, thisObject){

if(array.forEach){

array.forEach(callback, thisObject);

}else{

for (var i = 0, len = array.length; i  len; i++) { callback.call(thisObject, array[i], i, array); }

}

}

var st = new SlideTrans("idContainer2", "idSlider2", 3, { Vertical: false });

var nums = [];

forEach(nums, function(o, i){

o.onmouseover = function(){ o.className = "on"; st.Auto = false; st.Run(i); }

o.onmouseout = function(){ o.className = ""; st.Auto = true; st.Run(); }

})

//设置按钮样式

st.onStart = function(){

forEach(nums, function(o, i){ o.className = st.Index == i ? "on" : ""; })

}

$("idNext").onclick = function(){ st.Next(); }

$("idPre").onclick = function(){ st.Previous(); }

st.Run();

/script

饿了么基于Vue2.0的通用组件开发之路

Element：一套通用组件库的开发之路

Element 是由饿了么UED设计、饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库。今天我们要分享的就是开发 Element 的一些心得。

官网：

github：

## 设计目的

大部分项目起源都是源于业务方的需求，Element 也是一样。随着公司业务发展，内部开始衍生出很多后台系统，UED 部门也接到越来越多的设计需求，分析整个过程，我们发现如下问题：

- 日渐增多的后台产品设计需求

- 设计资源有限，没办法支持所有业务线

- 公司内部诸多后台产品使用体验不一致

于是我们决定：

- 设计一套后台支撑框架，提升后台系统的可用性和一致性

- 套用此框架，即使没有设计师参与，也能让产品或开发设计出一套好用的后台系统

## 设计阶段

下面简单说一下设计 Element 经历的几个阶段。

**了解业务并熟悉公司内各后台产品，寻找业务上的共性问题**

设计的目的是为了业务服务。第一步我们从内部系统开始入手，了解公司内部在使用的各种后台系统，将其组件抽象剥离，寻找共性特征。

**专注业务组件设计**

总结了公司不同系统不同组件的使用情况后，我们打算从业务组件入手，因为这部份是由公司特殊需求衍生的解决方案，我们认为解决了这些棘手的问题，也能给其他后台产品带来好的设计引导。

**寻求开发支持**

到这一步，我们开始寻找公司内部的开发团队，并在这时才得知不同团队里使用着不同的前端框架，有 Vue、React、Angular 等等。

**与大前端合作**

大前端作为独立的前端团队，有能力开发底层的工具去服务不同业务，并且 Vue 也是一套年轻且发展方向很好的一个技术栈。UED 与大前端的合作一拍即合。

**方向转变，专注于基础组件**

跟大前端接触后，才发现最开始的方向并不正确，因为业务变化过快，即使有通用的业务组件，也很难跟上需求的变化，而基础组件才是所有开发团队都需要的通用组件。这时候我们开始把方向调整为基础组件的设计。

**组件交互完成，进行视觉封装，并搭建主体网站**

前期的设计工作主要是由交互设计师进行设计，等确认完所有组件的功能和交互后，开始进行视觉阶段，这中间包括制定颜色、字体等各类规范，也同时进行主体网站的设计。

输出 UI Kit 文件，统一设计规范

第一版网站设计，此处的「特殊组件」即业务组件。

**网站二次设计**

第一版网站上线后视觉效果并不好，我们内部进行了调整，再次上线后就是大家现在看到的样子。

设计过程简单来说就经历了这几个阶段，如还有问题可以继续交流，下面进入开发阶段。

## 开发目的

- 后台系统缺乏一套完整的基础组件库

- Vue 在公司内部是一个比较年轻的技术栈，希望做一些基础设施的建设

- 提升公司在技术社区的影响力

## 开发流程

进入开发阶段后，在总体架构方面我们做了一些尝试，下面按照时间顺序分享给大家：

**如何与设计师进行配合**

经过项目初期开发和设计的磨合，我们提炼了一套组件开发流程：

1. 根据交互稿和视觉稿进行开发，期间与设计师保持沟通

2. 开发完成后自测，之后提交设计师验收

3. 设计师提出修改意见，根据意见进行修改

4. 完成组件开发，为网站编写例子和文档

**如何管理多组件项目**

在开发之初，我们就在思考如何降低组件的耦合度，确保组件可以独立工作。这样的目的是可以保证组件可以依赖其他组件、让用户只加载其中几个组件甚至在安装时只安装需要的组件。最先想到的做法是一个组件单独一个仓库，而组件库项目就是把组件作为依赖引入。

但是由于人手不足，这样的机制导致开发太耗时间，每个组件都需要单独维护和打包，同时还要维护组件库项目的各依赖的版本号。我们只能另寻方案。后来参考了

[babel]() 项目的管理方式：所有子项目放在 `packages/`

目录里，一个子项目可以当作一个独立的仓库。通过 [lerna]()

来管理子项目的依赖和发布。

结合自身项目的特点以及 babel 的这套机制，我们重构了目录结构：组件可单独作为一个项目放在 `packages/`，共用函数放在

`src/` 里。最后的打包结果会将整个组件打包成一个文件、组件分别打包成独立文件，同时发布时还将发布组件库和独立组件，满足不同用户的使用需求。

**如何解决自定义主题**

开发一套组件库就离不开定制主题的需求。类名要足够友好，尽量避免存在样式层级嵌套，这样在直接覆盖样式或者单独写一套主题都会方便许多。所以我们采用 BEM 的方式管理类名，同时尽可能将属性值用变量代替，维护一份变量文件便于直接修改变量就能定制一套主题。

考虑到不同用户的使用习惯，我们没有选用 Less 或 Sass 之类的有各自风格的预处理器，而是选用了更接近未来标准的 CSS4

风格的语法，用 PostCSS 和整合了 postcss-bem 和 postcss-cssnext 等插件的

[postcss-salad]() 开发。

为了降低用户自定义主题的上手成本，我们还提供了命令行工具指导用户快速自定义一套主题。

**如何提供一份直观的文档**

文档不仅是让用户看起来直观，也要让编写者写起来直观。所以最简单的方式是用 Markdown

写文档。但是就会产生另一个问题：如何在文档里写可运行的示例？常规的做法是把文档写在 Vue

文件里，这样就可以在里面调用其他组件，但是这样就违背了写「直观」文档的初衷。

经过几番尝试，结合 Vue 的特点。我们写了一套处理 Markdown 文件的 webpack loader，可以将 Markdown 转成 Vue 文件，不仅降低了文档的维护成本，同时也将文档里运行组件示例变成可能。

**多语言官网如何配置和管理**

Element 在立项之初其实并没有考虑国际化的问题。项目开源之后，我们陆续收到了一些外国开发者的反馈，希望能够增加英文文档。不久之后，国内的一个翻译团队主动联系到了我们，为 Element 贡献了整套英文文档。

有了英文文档就需要有英文网站，这就需要对官网的现有结构进行修改和升级；同时为了面向未来，需要官网能够兼容除英语外的其他多语言。为此我们做了以下工作：

1. 路由

官网的路由是根据一个记录了导航信息的 `json` 文件自动生成的。因此需要在这个 `json` 文件中添加对应于其他语言的字段，并且根据新的数据结构修改路由生成的逻辑。

2. 页面

官网中除了文档外，还有一些介绍性质的页面。这些页面中文字比较多，如果人工管理每种语言的页面，若需要修改则必须去每个页面相应的位置进行编辑，有些繁琐。我们的做法是：每个页面对应一个模板，模板中的文字全部抽取到一个语言配置文件中，并且写了一个脚本生成最终的页面。这样在需要修改时，只需在语言配置文件中编辑对应的字段即可。

3. 网站组件

对于 `header` 、`footer` 等通用的页面组件，我们采取了和上面类似的策略。但由于组件内的文字较少，于是没有再使用模板，而是通过路由判断应该显示何种语言。

中英文网站的显示效果

至此，我们也逐渐完善了技术栈。用 ES2015 和 CSS4 作开发语言、Lerna 负责管理组件、用 Karma 搭配 Mocha 和

Chai 等工具在 Travis CI 里做持续集成测试，最后用 Markdown 结合 Vue 写文档。我们甚至还在 CI

里实现了自动部署网站和推送主题仓库代码等功能，提升了不少开发效率。

element网站模板的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于elementbases模板、element网站模板的信息别忘了在易优之家进行查找喔。