前端网页开发实例入门

网页实例

1.使用jQuery提高开发效率
1)什么是jQuery
jQuery 是一个 JavaScript 库，是一个“写的更少，但做的更多”的轻量级 JavaScript 库，
jQuery 极大地简化了 JavaScript 编程
2)如何在HTML页面中使用jQuery

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){$("a").click(function(){alert("Hello World");});
});
<a>点击这里</a>

3)如何使用jQuery选择器获得页面元素对象

<a>点我，我就消失</a>
<p id="jQuery110">我的ID是jQuery110</p>
<p class="nice">我的class是nice</p>
<p class="nice">我的class是nice</p>
<p>段落</p>
<script type="text/javascript">
$(document).ready(function(){//隐藏当前元素$("a").click(function(){$(this).hide();});$("#jQuery110").hide();//隐藏id=jQuery110的元素$("p.nice").hide();//隐藏class=nice的所有段落$("p").hide();//隐藏所有段落
});
</script>

jQuery选择器分为：基本选择器、属性选择器、层级选择器、基本过滤选择器等等
基本选择器的使用

改变 id=jQuery110 的元素的背景色为红色
$("#jQuery110").css("backgroundColor", "red");
改变所有class=nice的元素背景色为红色
$(“.nice").css("backgroundColor", "red");
改变所有段落的背景色为 #00FAFB，字体颜色为红色
$("p").css({"backgroundColor": "#00FAFB", "color": "red"});
改变所有元素的背景色为红色
$(“*").css("backgroundColor", "red");
改变所有<div>元素和 id=jQuery110 的元素的背景色为红色
$(“div,#jQuery110”).css("backgroundColor", “red");

属性选择器的使用

//显示所有含有id属性的元素
$("[id]").show(3000);
//显示所有属性title的值是imoracle的元素
$("[title='imoracle']").show(3000);
//显示所有属性title的值不是imoracle的元素
$("[title!='imoracle']").show(3000);
//显示所有属性title的值以"im"开始的元素
$("[title^='im']").show(3000);
//显示所有属性title的值以"wdp"结束的元素
$("[title$='wdp']").show(3000);
//显示所有属性title的值中含有"oracle"的元素
$("[title*='oracle']").show(3000);
//显示所有属性title的值中含有"oracle"且属性id的值是"oracleWDP"的元素
$("[id='oracleWDP'][title*='oracle']").show(3000);

层级选择器的使用

<form><label>Name:</label><input name="name" /><fieldset><label>Newsletter:</label><input name="newsletter" /></fieldset>
</form>
<input name="none" />$(document).ready(function(){//匹配表单中所有的子级input元素//结果：<input name="name" />$("form > input");//匹配所有跟在 label后面的input元素//结果：<input name="name" />// <input name="newsletter" />$("label + input");//找到所有与表单同辈的 input元素//结果：<input name="none" />$("form ~ input");
});

基本过滤选择器的使用

//获取第一个 div 元素
$("div:first")
//获取id不为 me 的所有p元素
$("p:not('#me')")
//获取索引值为偶数的tr元素
$(“tr:even")
//获取索引值大于 2 且为奇数的 div 元素
$(“div:gt(2):odd")
//获取所有的标题元素
$(":header“)
使用jquery实现表格的隔行变色
$("tr:even").css({"background-color": "#cccccc"});
4)jQuery实例
实现动态添加和删除文件上传域
<!DOCTYPE html>
<html><head><meta  charset="utf-8"><title>about</title><script type="text/javascript" src="js/jquery-1.8.3.js"></script><script type="text/javascript">$(function(){$('.add').live('click',function(){var div_html = '<div>'+$(this).parents('div').html()+'</div>';$(this).parents('div').after(div_html);})$('.del').live('click',function(){var var_index = $(this).parents('div').index();if(var_index > 0){$(this).parents('div').remove();}});});</script></head><body><form><div><input type='file' name='file' /><input type='button' class='add' value='增加' /><input type='button' class='del' value='删除' /></div></form></body>
</html>

2.HTML5的新特性

要使用声明才是html5
在页面上添加视频

<video width="320" height="240" controls><source src="video/movie.mp4" type="video/mp4">
</video>

1）在页面上增加音频

<audio controls>
<source src="video/music.mp3" type="audio/mpeg">
</audio>

2）input元素的类型
date或datetim-local实现日期控件

<input type="date" name="birthday">
<input type="datetime-local" name=" birthday">

使用email实现提交时验证邮箱的合法性

<form action="">email: <input type="email" name="mymail"><input type="submit" value="注册">
</form>

使用number实现数字的输入

<form action="">
数量 ( 1 到 6 之间): <input type="number" name="mynumber" min="1" max="6" required><input type="submit" value="提交">
</form>

使用url实现url验证

<input type="url" name="myurl">

使用datalist实现输入域的选项列表

<form action="">浏览器类型<input list="browsers" name="browser"><datalist id="browsers"><option value="Internet Explorer"><option value="Firefox"><option value="Chrome"><option value="Opera"><option value="Safari"></datalist><input type="submit" value="提交">
</form>

3.网站的页面分析和设计UI user interface 用户界面

1）Bootstrap
bootstrap是快速开发Web应用程序的前端工具包。它是一个CSS和HTML的集合，它使用了最新的浏览器技术，给你的Web开发提供了时尚的版式，表单，buttons，表格，网格系统等等
1)Bootstrap的特点 a)内置的样式很漂亮，而且很多。给人一种简约而不简单的感觉每个属性都有值
b)bootstrap是基于jquery的,有很多很多插件 1）Bootstrap的中文网
a)https://www.bootcss.com/从网上上可以下载BootStrap b)下载后的文件结构

使用Bootstrap

将下载后的文件导入页面

<!DOCTYPE html>
<html><head><meta  charset="utf-8"><title>about</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"><script type="text/javascript" src="js/bootstrap.js"> </script><script type="text/javascript" src="js/jquery-1.11.0.js"> </script><link rel="stylesheet"  href="css/bootstrap.css"/></head><body><div class="btn-group" role="group"><button type="button" class="btn btn-default">Left</button><button type="button" class="btn btn-default">Middle</button><button type="button" class="btn btn-default">Right</button></div></body>
</html>

5）Bootstrap的栅格系统

Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列，Bootstrap中的栅格系统叫做布局，它就是通过一系列的行（row）与列（column）的组合创建页面布局，然后你的内容就可以放入到你创建好的布局当中

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>about</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"><script type="text/javascript" src="js/bootstrap.js"> </script><script type="text/javascript" src="js/jquery-1.11.0.js"> </script><link rel="stylesheet" href="css/bootstrap.css" /></head><body><div class="container"><h1>一行多列</h1><div class="row"><div class="col-xs-4"><h2 class="page-header">区域一</h2><p>Bootstrap has a few easy ways to quickly get started</p></div><div class="col-xs-4"><h2 class="page-header">区域二</h2><p>If you work with Bootstrap's uncompiled source code</p></div><div class="col-xs-4"><h2 class="page-header">区域三</h2><p>Within the download you'll find the following directories and files</p></div></div></div></body>
</html>

container:用container包裹页面上的内容即可实现居中对齐
col-xs-4:这个类通过"-"分为三个部分，第三个部分的数字作为一个泛指，它的范围是1到12，就是可以把一个区域分为12个栏，这个要和row类联合使用

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>about</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><script type="text/javascript" src="js/bootstrap.js"> </script><script type="text/javascript" src="js/jquery-1.11.0.js"> </script><link rel="stylesheet" href="css/bootstrap.css" /></head><body><div class="container"><h1>多行</h1><div class="row"><div class="col-xs-8">.col- xs -8</div><div class="col-xs-4">.col- xs -4</div></div><div class="row"><div class="col-xs-4">.col- xs -4</div><div class="col-xs-4">.col- xs -4</div><div class="col-xs-4">.col- xs -4</div></div><div class="row"><div class="col-xs-6">.col- xs -6</div><div class="col-xs-6">.col- xs -6</div></div></div></div></body>
</html>

6）使用Bootstap创建按钮

<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">链接</button>

7）使用Bootstap创建导航
普通导航

<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>

胶囊式标签页

<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>

8）参考api文档使用Bootstap创建其他的特效：分页、进度条、下拉菜单、面板，字体图标（需要在网站加入fonts字体文件夹）等等

9）网站页面分析和设计
a) 实现页面有5个部分组成，分别使用5个div来实现，也可以使用栅格系统的行来实现，我们可以认为是5个页面

<div id="page1" style="background-color: #304760; height: 1000px;">
</div>
<div id="page2" style="background-color:#F17C72; height: 1000px;">
</div>
<div id="page3" style="background-color:#32AC97; height: 1000px;">
</div>
<div id="page4" style="background-color:#7F4C76; height: 1000px;">
</div>
<div id="page5" style="background-color:#3697CC; height: 1000px;">
</div>

b) 对第一个页面进行分析又分为上部为头部分，显示图片和导航，接下的下面显示文字部分，再下面为点击的切换的图标部分，最下面为图片显示，所以该部分分为

<!-- 第一页的头 -->
<div id="headerdiv">
</div>
<!-- 文字切换区域 -->
<div id="textDiv">
</div>
<!-- 文字切换的图标区域 -->
<div style="margin-left: 45%;margin-top: 180px;float: left;">
</div>
<!--图片显示区域 -->
<div style="float: left;margin-top: 100px;margin-left: 41%;">
</div>

样式为：

#headerdiv {width: 100%;height: 100px;/*position: fixed; 头部悬停*/
}
#textDiv {width: 50%;height: 200px;margin-left: 25%;margin-top: 150px;float: left;font-size: 48px;font-weight: bold;color: white;text-align: center;
}

c)对头部分进行分析分为左右结构，左边放图片，右边放导航

 <!-- 第一页的头 --><div id="headerdiv"><!-- 头部分的图片 --><div id="divimg" class="floatLeft"><img src="img/logo.png"/></div><!-- 头部分的胶囊式标签页 --><div id="selected" class="floatLeft"><ul id="butUL" class="nav nav-pills"><li id="li1" class="active"><a href="#" onclick="goToByScroll('page1')">Home</a></li><li id="li2"><a href="#" onclick="goToByScroll('page2')">About</a></li><li id="li3"><a href="#" onclick="goToByScroll('page3')">Services</a></li><li id="li4"><a href="#" onclick="goToByScroll('page4')">Clients</a></li><li id="li5"><a href="#" onclick="goToByScroll('page5')">Contacts</a></li></ul></div></div>
样式为：
#divimg {margin-left: 20%;padding-top: 30px;/* border: 1px solid red; */
}
.floatLeft {float: left;
}
#selected {width: 40%;margin-left: 20%;padding-top: 30px;/* border: 1px solid red; */
}
ul li a {color: #FFFFFF;font-size: 16px;
}
实现页面切换的js函数：
function goToByScroll(id) {$('html').animate({scrollTop: $("#" + id).offset().top}, 'slow');
}
d)文字切换区域
<!-- 文字切换区域 -->
<div id="textDiv"><p id="p1">Let Us Show You the Way to Success</p><p id="p2" style="display: none;">Interminable Energy for Your Project</p><p id="p3" style="display: none;">We know how to solve your problems!</p><p id="p4" style="display: none;">Make your business a booming one!</p>
</div>

e)文字切换区域的图标

<!-- 文字切换的图标区域 -->
<div style="margin-left: 43%;margin-top: 180px;float: left;"><div class="divselected" onclick="setText(1)"></div><div class="divselected" onclick="setText(2)"></div><div class="divselected" onclick="setText(3)"></div><div class="divselected" onclick="setText(4)"></div>
</div>

使用的样式:

.divselected {width: 32px;height: 32px;margin-right: 25px;background-color: #ADADAD;background-image: url(img/pagination.png);float: left;border-radius: 35px;background-position: -48px, 0px;cursor: pointer;
}
.divselected:hover{background-position: 0px,0px;
}

实现切换的js:

function setText(a) {if (a == 1) {$("#textDiv p").fadeOut(1000);$("#p1").fadeIn(3000);} else if (a == 2) {$("#textDiv p").fadeOut(1000);$("#p2").fadeIn(3000);} else if (a == 3) {$("#textDiv p").fadeOut(1000);$("#p3").fadeIn(3000);} else {$("#textDiv p").fadeOut(1000);$("#p4").fadeIn(3000);}
}

f）显示图片区域

<div style="float: left;margin-top: 60px;margin-left: 38%;"><img src="img/socials.png" />
</div>

g)倒三角形的实现

<div id="page2" style="background-color:#F17C72; height: 1000px;"><div id="san1"></div>
</div>

h)使用样式绘制倒三角形

#san1 {border-top: 50px solid #304760;border-left: 60px solid transparent;border-right: 60px solid transparent;margin-left: 48%;width: 0;height: 0;
}#san2 {width: 0;height: 0;border-left: 60px solid transparent;border-right: 60px solid transparent;border-top: 50px solid #F17C72;margin-left: 48%;
}#san3 {width: 0;height: 0;border-left: 60px solid transparent;border-right: 60px solid transparent;border-top: 50px solid #32AC97;margin-left: 48%;
}#san4 {width: 0;height: 0;border-left: 60px solid transparent;border-right: 60px solid transparent;border-top: 50px solid #7F4C76;margin-left: 48%;
}

i)处理倒三角形在滚动的显示和隐藏

function sanShow(){var h = document.documentElement.scrollTop;/*第一个三角形*/if(h>=(page2.offsetTop-200)){document.getElementById("san1").style.display="none";}else{document.getElementById("san1").style.display="";}/*第二个三角形*/if(h>=(page3.offsetTop-200)){document.getElementById("san2").style.display="none";}else{document.getElementById("san2").style.display="";}/*第三个三角形*/if(h>=(page4.offsetTop-200)){document.getElementById("san3").style.display="none";}else{document.getElementById("san3").style.display="";}if(h>=(page5.offsetTop-200)){document.getElementById("san4").style.display="none";}else{document.getElementById("san4").style.display="";}
}//jquery的语法
// var h = $(document).scrollTop();
// if(h>=($("#page2").offset().top-200)){
//      $("#san1").css("display","none");
//      //$("#san1").hide();
// }else{
//      //$("#san1").css("display","");
//      $("#san1").show();
// }document.onscroll = function() {sanShow();
}
j)处理倒三角形在滚动时导航的变化
function setColor(){var id = "";//获取滚动条的位置var h = document.documentElement.scrollTop;if(h>=0 && h<page2.offsetTop){  id="li1";headerdiv.style.backgroundColor="#304760";}/*第二页*/if(h>=page2.offsetTop && h<page3.offsetTop){    id="li2";headerdiv.style.backgroundColor="#F17C72";}/*第三页*/if(h>=page3.offsetTop && h<page4.offsetTop){id="li3";headerdiv.style.backgroundColor="#32AC97";}/*第四页*/if(h>=page4.offsetTop && h<page5.offsetTop){id="li4";headerdiv.style.backgroundColor="#7F4C76";}/*第五页*/if(h>=page5.offsetTop){id="li5"headerdiv.style.backgroundColor="#3697CC";    }var lis = document.getElementById("butUL").children;for(var i=0;i<lis.length;i++){lis[i].setAttribute("class","");}var liObject = document.getElementById(id);liObject.setAttribute("class","active");//jquery的语法
// var lis = $("#butUL").children();
// for(var i=0;i<lis.length;i++){
//  $(lis[i]).attr("class","");
// }
// var liObject = $("#"+id);
// liObject.attr("class","active");}document.onscroll = function() {sanShow();setColor();
}// jquery的语法
// $(document).scroll(function(){
//  sanShow();
//  setColor();
// });

page2参考代码：

<div id="page2" style="background-color:#F17C72; height: 1000px;"><div id="san1"></div><div style="margin-left: 20%;font-size: 48px;font-weight: bold;color: white;padding-top: 50px;">Only Professional <span style="background-color: rgb(64,224,208);">Services</span> for Our <span style="background-color: rgb(122,55,139);">Clients</span></div><div style="margin-top: 50px;"><p style="padding-left: 27%;" class="p"><a href="#">Click here</a> for more info about this free website templatecreated by TemplateMonster.com</p><p style="padding-left: 27%;" class="p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mollis eratmattis neque facilisis, sit amet ultricies</p></div><!--展示头像图片--><div style="width: 100%; height: 350px;margin-top: 150px;"><div class="headerimage" style="margin-left: 20%;"><img src="img/box_img1.jpg" class="imgs" /><span><center><p class="firstp">Laura Stegner</p></center><center style="margin-top: -13px;"><p style="color: white">senior manager</p></center></span><hr /><img src="img/soc1.png" class="menuBar" /></div><div class="headerimage"><img src="img/box_img2.jpg" class="imgs" /><span><center><p class="firstp">Laura Stegner</p></center><center style="margin-top: -13px;"><p style="color: white">senior manager</p></center></span><hr /><img src="img/soc1.png" class="menuBar" /></div><div class="headerimage"><img src="img/box_img3.jpg" class="imgs" /><span><center><p class="firstp">Laura Stegner</p></center><center style="margin-top: -13px;"><p style="color: white">senior manager</p></center></span><hr /><img src="img/soc1.png" class="menuBar" /></div><div class="headerimage"><img src="img/box_img4.jpg" class="imgs" /><span><center><p class="firstp">Laura Stegner</p></center><center style="margin-top: -13px;"><p style="color: white">senior manager</p></center></span><hr /><img src="img/soc1.png" class="menuBar" /></div></div>
</div>

参考样式为;

.headerimage {float: left;width: 220px;height: 350px;margin-left: 30px;background-color: #e6655e;opacity: 1;border: 4px solid #f4948b;
}
.imgs{width: 140px;height: 140px;margin-left: 36px;margin-top: 20px;border-radius: 70px;
}
.menuBar{margin-left: 30px;margin-top: 10px;
}

k)页面整体效果

前端网页开发实例入门相关推荐

免费的HTML5连载来了《HTML5网页开发实例具体解释》连载（四）HTML5中的FileSystem接口...
HTML 5除了提供用于获取文件信息的File对象外,还加入了FileSystem相关的应用接口. FileSystem对于不同的处理功能做了仔细的分类,如用于文件读取和处理的FileReader和F ...
《HTML5网页开发实例详解》连载（四）HTML5中的FileSystem接口
HTML 5除了提供用于获取文件信息的File对象外,还添加了FileSystem相关的应用接口.FileSystem对于不同的处理功能做了细致的分类,如用于文件读取和处理的FileReader和Fi ...
前端网页开发常用兼容css代码
前端网页开发常用兼容css代码 /* 去除常见标签默认的 margin 和 padding */ body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt ...
web前端网页开发离不开的三要素：HTML、CSS、JavaScript
前端开发是目前高薪岗位之一,是从最开始的页面开发不断发展优化而产生的一个特定的岗位.现在web前端开发一定会用到的三门技术:HTML.CSS.JavaScript.无论是多么炫酷的页面都是这三门技术的 ...
H5网页开发新手入门-H5网页如何适应不同手机屏幕分辨率？
一.问题汇总手机网页怎么制作? 怎么让网页适应不同手机屏幕? H5网页设计到底该设计多大尺寸? rem怎么自适应布局? H5一屛页面如何自适应屏幕? viewport该怎么写? width=devi ...
微信H5手机网页开发—快速入门
序言随着微信(WeChat)的盛行,一个流行的开发工作也随之诞生--微信公众号开发,而其中最主要的部分,当属微信H5网页开发. 虽然网页开发大家并不陌生,但层出不穷的手机型号,导致了微信网页开发中遇 ...
前端网页开发工具Visual Studio Code推荐
前端开发有很多软件可使用,笔者用过Adobe Dreamweaver CS6 ,IntelliJ IDEA ,还有webstrom.但是这些虽然有他们的好处,比如 Dreamweaver 他特有的视图 ...
web前端框架开发实例，html5元素大全
对于很多没有学历优势的人来说,面试大厂是非常困难的,大多数的人毕业只找到一个名不经传的小公司过着三点一线的生活,我也是一样,直到生活上的变故,才让我有了新的想法和目标,因此我这个二本渣渣也奋斗了起来, ...
HTML5前端期末大作业 html css javascript防锤子手机商城官网 web前端网页设计实例企业网站制作
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 游戏. 节日. ...

前端网页开发实例入门

网页实例

前端网页开发实例入门相关推荐

最新文章

热门文章