意时网单页制作

<!DOCTYPE html>

<html lang="en">

<head>

<title>Document</title>

<style>

*{margin:0;padding:0;}

body{overflow:hidden;}

h1{

position:fixed;

left:20px;/*相对于浏览器左边距离*/

top:20px;/*相对于浏览器上边距离*/

}

#nav{

width:360px;

height:40px;

background-color:#3c3c3c;

position:fixed;

top:20px;

right:20px;

border-radius:20px;

}

#nav ul li a{

color:#ccc;

text-decoration:none;

cursor:pointer;

font-size:14px;

text-align:center;

font-family:"微软雅黑";

background-color:red;

width:100px;

height:40px;

display:block;/*以块元素显示*/

float:left;

line-height:40px;

}//看作盒子

#nav .first{

margin-left:20px;

}

#nav ul li a span{

display:block;

width:1px;

height:12px;

background:red;

float:left;

margin-top:9px;

}//设置宽高度展示|,同一行一般用span

#nav .last{

background-image:url("images/icon_buy.png") ;

background-repeat:no-repeat;

background-position:10px center;/*背景定位:第一个值 水平 第二个值 垂直*/

width:134px;

}

#banner{

width:100%;

height:880px;

position:relative;

}

#banner ul{

width:100%;//是浏览器宽度的5倍,出现滚动条

height:800px;

background:#0000ff;

left:0;/*特效就是去改变left值*/

right:0;

z-index:-1;

}

#banner ul li{

width:20%;

height:880px;

float:left;

}

#banner .btn{

width:71px;

height:82px;

position:absolute;

top:390px;

cursor:pointer;

}

#banner .btn-l{

left:20px;

background:url(images/but-icon.png);

opacity:0.5;

}

#banner .btn-r{

right:20px;

background:url(images/but-icon.png) right;

}

</style>

</head>

<body>

<h1><img src="imges/logo.png" /></h1>

<div id="nav">

<ul>

<li><a class="first" href="">关于我们<span></span></a></li>//可以点击用a标签

<li><a href="">联系我们<span></span></a></li>

<li><a href="" class="last">购买鳗鱼</a></li>

<ul>

</div>

<div id="banner">

<ul>

<li style="background:url("image/pic1.jpg") center top"></li>    //背景颜色居中

<li style="background:url("image/pic2.jpg") center top"></li>

<li style="background:url("image/pic3.jpg") center top"></li>

<li style="background:url("image/pic4.jpg") center top"></li>

<li style="background:url("image/pic5.jpg") center top"></li>

</ul>

</div>

<div class="btn btn-l’"></div>

<div class="btn btn-r"></div>

//两个在一起<>

<script src="js/jquery-1.11.1.min.js"></script>

<script>

var i=0;//点击次数

$(".btn-l").click(function(){

i++;

if(i>4){

i=4;

}

$("ul").animate((left:-i*100‘%‘),500)//有过程的动叫做动画

});

if(i==4){

$(‘.btn-l‘).css("opacity":"0.5");//

}else{

$(‘.btn-l‘).css("opacity":"1");

}

$(".btn-r").click(function(){

i--;

if(i<0){

i=0;

}

$("ul").animate((left:-i*100‘%‘),500)//有过程的动叫做动画

});

$(‘.btn‘).click(function(){

if(i==4){

$(‘.btn-r‘).css("opacity":"0.5");//暗

}else{

$(‘.btn-r‘).css("opacity":"1");

}

});

//触屏事件

</script>

<!--

1.浏览器空白区域就是我们的body

2.h1标签(整个页面只能出现一个h1,logo,标题,关系到seo优化)

3.img插入图片标签 src="图片地址"    (绝对路径,相对路径,域名路径)

4.固定定位:把创建出来的东西固定到浏览器窗口

5.行内样式:不能控制宽高度,上下外边距块元素,一行放置多个块元素

6.触屏事件

7.onclick是js的,click是jq的

-->

</body>

时间: 2024-10-13 02:59:00

意时网单页制作的相关文章

dedecms另一种单页制作方法

第三步都是往[高级选项]右边的[栏目内容]里面添加内容就可以了,至于调用的标签也可以在上面看到,我就不多说了.

单页营销网站关键词keyword和描述description写法

随着网络的发展,单页营销竞价模式是越来越多人的首选了,单纯的靠竞价付费点击还是很贵的,对于初入此行的新手小菜鸟来说,相当的不划算,极有可能因为大量的投入见不到汇报而选择妥协放弃,做单页营销需要设计好精美的页面,更需要一定的技术沉淀,网站的关键词和描述,都是用meta标签,写到页面代码里面的.虽然百度现在已经不把meta标签内容作为网站优化排名依据,但是,还是要写上,因为访客在百度搜索出你的网站会在缩略图里看到这些描述简介. 1.关键词的写法 关键词是告诉搜索引擎通过哪些词能找到网站,在代码里面,

移动端单页视图库,适用于制作移动Web touchbox

ouchBox 原文:https://github.com/maxzhang/touchbox 移动端单页视图库,适用于制作移动专题 DEMO http://jsbin.com/vatuma/latest 手机扫描下面二维码查看例子: 使用方法 首先,页面必须是下面的结构 <html> // ... <body> <div id="touchBoxCt"> <div> // 子视图1 </div> <div> //

iOS App初次启动时的用户引导页制作实例分享

iOS App初次启动时的用户引导页制作实例分享 作者:老初 字体:[增加 减小] 类型:转载 时间:2016-03-09我要评论 这篇文章主要介绍了iOS App初次启动时的用户引导页制作实例分享,其中判断程序是否是第一次或版本更新以后第一次启动是一个关键点,需要的朋友可以参考下 应用程序APP一般都有引导页,引导页可以作为操作指南指导用户熟悉使用:也可以展现给用户,让用户了解APP的功能作用.引导页制作简单,一般只需要一组图片,再把图片组展现出来就可以了.展示图片组常用UIScrollVie

spa(单页应用)中,使用history模式时,微信长按识别二维码在ios下失效的问题

spa(单页应用,vue)中,使用history模式时,微信长按识别二维码在ios下失效的问题. 触发条件: spa单页应用: 路由模式 history 从其他页面跳转到带有微信二维码识别的页面(不是直接打开该页面) ios版本的微信(实测版本6.5.19) 结果: 二维码长按无法识别,刷新页面后恢复正常,安卓下正常. 解决方案: 1. 进入该页面的方式不使用路由跳转,而改为 <a href="xxx">目标二维码页面</a>的方式: 2. 在beforeCre

基于Redux架构的单页应用开发总结(二)

写在前面 这次重点介绍基于Redux架构的单页应用代码的组织方式 关于less的组织 作为一个后端出身的前端工程师,写简单的css实在没有那种代码可配置和结构化的快感.所以引入less是个不错的选择,无论是针对代码后期的管理,还是提高代码的复用能力. global.less 这个是全局都可以调用的方法库,我习惯把 项目的配色.各种字号.用于引入混出的方法等写在这里,其他container页面通过@import方式引入它,就可以使用里面的东西.不过定义它时要注意以下两点: 第一,这个less里只能

【读书笔记】WebApi 和 SPA(单页应用)--knockout的使用

Web API从MVC4开始出现,可以服务于Asp.Net下的任何web应用,本文将介绍Web api在单页应用中的使用.什么是单页应用?Single-Page Application最常用的定义:一个最初内容只包含html和JavaScript,后续操作通过Restful风格的web服务传输json数据来响应异步请求的一个web应用.SPA的优势就是少量带宽,平滑体验,劣势就是只用JavaScript这些平滑的操作较难实现,不像MVC应用,我们可以异步form,partview.不用担心,我们

单页Html供小孩学习常用汉字

为了检验及帮助小孩学习常用汉字,简单开发本网页应用: 常用汉字是按使用频率排序的,来源于网上: 单页Html 示例效果图: step1.点击 重置-再学一遍 ,数据进行重置: (用到window.localStorage,支持html5的浏览器下次再访问时,可以保留上次的进度) step2.点击下方要学汉字div中的汉字,则标示该汉字已经学习且已经认识,该汉字转入已知汉字: step3.或者 点击上方已知汉字div中的汉字,则标示该汉字并未学习且并不认识,该汉字转入要学汉字: 相应html源码如

Nodejs in Visual Studio Code 13.构建单页应用Scrat示例挖一挖

1.开始 Scrat作者说要搞个很碉堡的示例,果然就搞出来了,如果要学习并使用Scrat,可以从官方示例开始,简直太方便了. 2.Scrat示例 目录 component_modules : 公共组件 components : 系统级组件 server : 一些服务,不用管 views : Scrat.js,Index.html等Scrat框架内容 component.json : Scrat生态组件配置文件  fis-conf.js : FIS配置文件 package.json : Node配