Web前端实战案例
制作404页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录和注册页面设计</title>
<style>
/*通配选择器*/
*{
margin: 0;
padding: 0;
}
.box{
font-family: "Microsoft YaHei UI";
font-size: 80px;
color: #f1ebe5;
/*字体阴影*/
text-shadow: 0 8px 9px #c4b59d,0px -2px 1px rgba(255,46,108,0.73);
/*设置字体加粗*/
font-weight: bold;
text-align: center;
padding: 20px 100px;
/*设置颜色渐变*/
background: linear-gradient(to bottom,#0dc418 0%,#5dc4a3 100%);
}
h1{
border-bottom: 1px solid #fff;
}
h2{
font-size:20px ;
}
input{
background-color: #20a7ff;
border-radius: 10px;
border:0;
height: 30px;
width: 80px;
padding: 5px;
color: white;
}
</style>
</head>
<body>
<div class="box">
<h1>404</h1>
<h2>抱歉...你找的页面不存在了</h2>
<input type="button" value="返回首页"/>
<input type="button" value="联系管理"/>
</div>
</body>
</html>
注释：linear-gradient(direction, color-stop1, color-stop2, ...)：颜色渐变函数
计算借贷支出金额
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自动计算借贷支出金额</title>
<style>
</style>
</head>
<body bgcolor="white">
<!--表单取名-->
<form name="loandata">
<table>
<!--第一行的的文本占三列-->
<tr><td colspan="3"><b>输入贷款信息:</b></td> </tr>
<tr>
<td>(1)</td>
<td>贷款总额:</td>
<!--onchange事件会在域的内容改变时发生，也可用于单选框或复选框改变后触发的事件-->
<td><input type="text" name="principal" size="12" onchange="calculate()"/></td>
</tr>
<tr>
<td>(2)</td>
<td>年利率(%):</td>
<td><input type="text" name="interest" size="12" onchange="calculate()"/></td>
</tr>
<tr>
<td>(3)</td>
<td>借款期限(年):</td>
<td><input type="text" name="years" size="12" onchange="calculate()"/></td>
</tr>
<tr><td colspan="3"><input type="button" value="计算" onclick="calculate()"/></td></tr>
<tr><td colspan="3"><b>输出还款信息:</b></td> </tr>
<tr>
<td>(4)</td>
<td>每月还款金额:</td>
<td><input type="text" name="payment" size="12"/></td>
</tr>
<tr>
<td>(5)</td>
<td>还款总金额:</td>
<td><input type="text" name="total" size="12"/></td>
</tr>
<tr>
<td>(6)</td>
<td>还款总利息:</td>
<td><input type="text" name="totalinterest" size="12"/></td>
</tr>
</table>
</form>
</body>
<script>
function calculate() {
//贷款总额
//把年利率从百分比换成十进制，转换成月利率
//还款月数
//获取文本框的值
var principal=document.loandata.principal.value;
var interest=document.loandata.interest.value/100/12;
var payments=document.loandata.years.value*12;
//计算月支付额
var x=Math.pow(1+interest,payments);
var monthly=(principal*x*interest)/(x-1);
//检查结果是否是无穷大的数
if(!isNaN(monthly)&&(monthly!=Number.POSITIVE_INFINITY)&&(monthly!=Number.NEGATIVE_INFINITY)){
document.loandata.payment.value=round(monthly);
document.loandata.total.value=round(monthly*payments);
document.loandata.totalinterest.value=round(monthly*payments)-principal;
}
else {
document.loandata.payment.value="";
document.loandata.total.value="";
document.loandata.totalinterest.value="";
}
}
function round(x) {
return Math.round(x*100)/100;
}
</script>
</html>
注释：
- 通过文本框的名字获取其值或向文本框传递值
- 获取
input文本框的值的方法：.value、document.getElementById("idName").value、$("#idName").val()、$("input[id='idName']").val()、$("#idName").attr("value")、$("input[id='idName']").attr("value") Math.pow(X,Y)函数：返回X的Y次幂的值，若结果为虚数或负数则返回NaN，若结果过大则返回Number.POSITIVE_INFINITY或Number.NEGATIVE_INFINITYisNaN()：检查参数是否为非数字值，返回值为布尔类型Math.round()：把参数四舍五入为最接近的整数
制作二级关联菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>制作二级关联菜单</title>
<style>
</style>
</head>
<body onfocus="ChangeCity">
<h3>选择省份及城市</h3>
<form name="frm">
<p>省份:
<select name="optProvince" size="1" onchange="ChangeCity()">
<option>--请选择--</option>
<option>河南省</option>
<option>河北省</option>
<option>浙江省</option>
</select>
</p>
<p>城市:
<select name="optCity" size="1">
<option>--请选择--</option>
</select>
</p>
</form>
</body>
<script>
var aCity=[["--请选择--"],["--请选择--","郑州市","洛阳市","开封市","南阳市","周口市"],["--请选择--","石家庄市","秦皇岛市","张家口市"],["--请选择--","杭州市","嘉兴市","温州市"]];
function ChangeCity() {
var i,iProvinceIndex;
iProvinceIndex=document.frm.optProvince.selectedIndex;
iCityCount=0;
while (aCity[iProvinceIndex][iCityCount]!=null){
iCityCount++;
}
document.frm.optCity.length=iCityCount;
for (i=0;i<=iCityCount;i++){
document.frm.optCity[i]=new Option(aCity[iProvinceIndex][i]);
}
document.frm.optCity.focus();
}
</script>
</html>
注释：
标签：表单适宜添加name，可以方便获取、使用标签：下拉列表，标签用于定义列表中的可用选项，相关语法资料selectedIndex：设置或返回下拉列表中被选选项的索引号，若允许多重选择，则仅返回第一个被选选项的索引号- 下拉列表可以通过
标签的name属性以及索引添加option,语法：optionName[i]=new Option(content) focus()：为下拉列表设置焦点
制作缩进的二级菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>制作伸缩的二级菜单</title>
<style>
/*一级菜单风格设置*/
body{
background-color: #eed0e0;
}
/*id选择器*/
#navigation{
width: 200px;
font-family: Arial;
}
/*子选择器*/
#navigation>ul>li{
border-bottom: 1px solid #AD9F9F;
}
#navigation>ul>li>a{
display: block;
padding: 5px 5px 5px 0.5em;
/*链接去除下划线*/
text-decoration: none;
border-left: 12px solid #711111;
}
#navigation>ul>li>a:link,#navigation>ul>li>a:visited{
background-color: #c11136;
color: #FFFFFF;
}
#navigation>ul>li>a:hover{
background-color: #880020;
color: #f00;
}
h1{
color: red;
background-color: #49ff01;
text-align: center;
padding: 20px;
}
img{
float: left;
border: 2px #F00 solid;
margin: 5px;
}
/*二级子菜单风格设置*/
/*包含选择器*/
#navigation ul li ul{
margin: 0px;
padding: 0px;
}
#navigation ul li ul li{
border-top: 1px solid #ED9F9F;
}
#navigation ul li ul li a{
display: block;
padding: 3px 3px 3px 0.5em;
text-decoration: none;
border-left: 28px solid #a71f1f;
border-right: 1px solid #711515;
}
#navigation ul li ul li a:link,#navigation ul li ul li a:visited{
background-color: #e85070;
color: #FFF;
}
#navigation ul li ul li a:hover{
background-color: #c2425d;
color: #ffff00;
}
#navigation ul li ul.myHide{
display: none;
}
#navigation ul li ul.myShow{
display: block;
}
</style>
</head>
<body>
<div id="navigation">
<ul id="listUL">
<li>
<a href="#">个人中心</a>
<ul>
<li><a href="#">个人资料</a> </li>
<li><a href="#">与我相关</a> </li>
<li><a href="#">好友动态</a> </li>
</ul>
</li>
<li>
<a href="#">我的主页</a>
<ul>
<li><a href="#">日志</a></li>
<li><a href="#">相册</a></li>
<li><a href="#">状态</a></li>
</ul>
</li>
<li>
<a href="#">留言板</a>
</li>
<li>
<a href="#">应用中心</a>
<ul>
<li><a href="#">游戏</a></li>
<li><a href="#">音乐</a></li>
</ul>
</li>
<li>
<a href="#">更多</a>
</li>
</ul>
</div>
</body>
<script src="jQuery.js"></script>
<script>
function change() {
var SecondDiv=this.parentNode.getElementsByTagName("ul")[0];
/*通过CSS交替更换实现隐显*/
if (SecondDiv.className=="myHide"){
SecondDiv.className="myShow";
}
else {
SecondDiv.className="myHide";
}
}
window.onload=function () {
var Ul=document.getElementById("listUL");
var aLi=Ul.childNodes;
var A;
for (var i=0;i<aLi.length;i++){
if (aLi[i].tagName=="LI"&&aLi[i].getElementByTagName("ul").length){
A=aLi[i].firstChild;
A.onclick=change;
}
}
}
</script>
</html>
注释：
>标签：子选择器，样式效果仅作用于第一个子元素标签：包含选择器，作用于所有子元素border:solid：边框样式（border-style），选项有：dotted：点状，solid：实线，double：双线，dashed：虚线display属性：规定元素生成的框的属性，常用属性值：none：元素不会被显示；block：块级元素；inline：内联元素parentNode：返回指定结点的父节点getElementsByTagName方法：返回带有指定标签名的对象的集合window.onload：用于在网页加载完毕后立刻执行的操作childNodes：返回指定结点的子节点tagName：获取元素的标签名
Cookie应用实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cookie实例</title>
<script>
//设置cookie值的函数，创建一个函数用于存储访问者的名字
function setCookie(cname,cvalue,exdays) {
//获取本地时间
var d=new Date();
//设置记录的过期时间
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires="expires="+d.toUTCString();
document.cookie=cname+"="+cvalue+";"+expires;
}
function getCookie(cname) {
var name=cname+"=";
var ca=document.cookie.split(';');
for (var i=0;i<ca.length;i++){
var c=ca[i].trim();
if (c.indexOf(name)==0){
return c.substring(name.length,c.length);
}
}
return "";
}
function checkCookie() {
var user=getCookie("username");
if (user!=""){
alert("再次欢迎您:"+user);
}
else {
user=prompt("请输入您的姓名:","");
if (user!=""&&user!=null){
setCookie("username",user,30);
}
}
}
</script>
</head>
<body onload="checkCookie()">
</body>
</html>
注释：
Date()：Date对象用于处理日期和时间，对象会自动将当前日期和时间保存为初始值getTime()：Date对象方法，返回1970年1月1日至今的毫秒数setTime()：Date对象方法，以毫秒设置Date对象toUTCString：根据世界时，把Date对象转换成字符串
文件引入
项目的CSS文件与HTML文件以及图片文件不在同一个文件夹中，但是这些文件夹在同一个文件夹中，引入方式如下
<link rel="icon" href="../img/favicon.ico"/>
<link rel="stylesheet" href="../css/firstPage.css">
注释：../表示返回上一级目录访问
设置网页图标
<link rel="icon" href="../favicon.ico">
CSS选择器
：定义导航链接的部分，如果文档中有前后按钮，则应该放到标签中:link：未被访问的链接的样式:visited：已被访问的链接的样式:hover：鼠标浮动在上面的样式:active：作用于活动链接
HTML标签
：规定文档的主要内容
CSS属性
transition:设置完成过度效果的显示时间opacity:设置div元素的不透明级别，0为完全透明，1为完全不透明visibility：规定元素是否可见overflow：规定当内容溢出元素框时发生的事件position：规定属性的定位类型z-index：设置元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面，可设置为负值，该属性尽在定位元素的上奏效top：属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。如果 “position” 属性的值为 “static”，那么设置 “top” 属性不会产生任何效果。alt：属于box-sizing：允许以特定的方式定义匹配某个元素的特定属性
10.@media：用于针对不同的媒体类型定义不同的样式，可以针对不同的屏幕尺寸设置不同的样式，适用于响应式页面的制作，重置浏览器大小的过程中页面会根据浏览器的大小重新渲染画面!important： 元素样式优先级background-position：设置背景图像的起始位置touch-action：用于指定某个区域是否允许用户自己操作，属性值：auto：有浏览器决定进行哪些操作none：不进行任何操作manipulatio：浏览器只允许进行滚动和持续缩放操作table-layout：设置表格单元格、行、列的算法规则，属性值：automatic：列宽度由单元格内容设定fixed：列宽由表格宽度和列宽度设定inherit：规定应该从父元素继承 table-layout 属性的值。