上机练习1：

CSS:

*{margin:0px;padding:0px;font-size:12px;}#pruduce{width:947px;background-color:#F2F2F2;}.top{height:55px;background:url(../images/top.jpg) no-repeat 10px 10px;}.main{text-align:center;height:309px;}.box{width:300px;height:285px;border:1px solid #999;margin:0px 6px;float:left;cursor:pointer;}dl{padding-top:3px;}dd{line-height:30px;}div.btprice_1{height:50px;background:#FFF2CE url(../images/bt1.jpg) no-repeat 5px 4px;}div.btprice_2{height:50px;background:#FFF2CE url(../images/bt2.jpg) no-repeat 5px 4px;}div.btprice_3{height:50px;background:#FFF2CE url(../images/bt3.jpg) no-repeat 5px 4px;}.hoverstyle{background-color:#D51938;color:#fff;}

HTML:

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8">
<title>今日团购模块 </title><link rel="stylesheet" href="css/shopping.css">
</head>
<body>
<div id="pruduce"><div class="top"></div><div class="main"><div class="box"><dl><dt><img src="data:images/pic1.jpg" /></dt><dd>[包邮]亮点可移动儿童防身高帖（每个ID限20）</dd></dl> <div class="btprice_1"></div></div><div class="box"><dl><dt><img src="data:images/pic2.jpg" /></dt><dd>[包邮]韩国泡温泉游泳衣价达玛分教保守纤瘦大胸泳装</dd> </dl> <div class="btprice_2"></div></div><div class="box"><dl><dt><img src="data:images/pic3.jpg" /></dt><dd>[包邮]贵人鸟运动透气跑鞋P23423(每个限购5件)</dd></dl> <div class="btprice_3"></div></div></div>
</div>
</body>
<script src="js/jquery-1.12.4.js"></script>
<script>$(function(){$(".box dl").hover(function(){$(this).addClass("hoverstyle");},function(){$(this).removeClass("hoverstyle");})})
</script>
</html>

上机练习2：

CSS:

* {margin: 0;padding: 0;line-height: 22px;font-family: "Arial", "微软雅黑";
}#chat {margin: 3px auto 0 auto;width: 436px;border: 1px #999999 solid;
}.chatBody {width: 100%;height: 220px;overflow: auto;
}.chatText {border: none;width: 100%;height: 50px;
}.btn {text-align: right;
}.btn span {display: inline-block;padding: 0 10px;height: 25px;overflow: hidden;color: #ffffff;border-radius: 5px;background-color: #069dd5;font-size: 12px;margin-right: 3px;cursor: pointer;
}.a {word-break: break-all;background-color: darkgray;border-radius: 5px;
}

HTML:

<!DOCTYPE html>
<html><head lang="en"><meta charset="UTF-8"><title>QQ简易聊天框</title><link rel="stylesheet" href="css/chat.css">
</head><body><section id="chat"><div class="chatBody"></div><div><img src="data:images/icon.jpg"></div><textarea class="chatText"></textarea><div class="btn"><span>关闭(C)</span><span id="send">发送(S)</span></div></section>
</body>
<script src="js/jquery-1.12.4.js"></script>
<script>$(function () {var uName = new Array("时尚伊人", "六月奇迹", "松松");var headImg = ["images/head01.jpg", "images/head02.jpg", "images/head03.jpg"];$(".btn #send").click(function () {var txt_value = $(".chatText").val();if (txt_value == "") {alert("输入框不能为空！");} else {var iNum = Math.floor(Math.random() * 3);var headStr = "<div><img src=" + headImg[iNum] + ">"+uName[iNum]+"</div>";var userName = "<p>" + $(".chatText").val() + "</p>";var currentStr = "<section>" + headStr + userName  + "</section>"var str=$(".chatBody").html();$(".chatBody").html(str+currentStr);$(".chatBody p").addClass("a")$(".chatText").val("");}});})
</script></html>

上机练习3：

CSS:

* {margin: 0;padding: 0;font-family: "Arial", "宋体";
}ul,
li {list-style: none;
}.bbs {margin: 0 auto;width: 600px;position: relative;
}header {padding: 5px 0;border-bottom: 1px solid #cecece;
}header span {display: inline-block;width: 220px;height: 50px;color: #fff;background: #009966;font-size: 18px;font-weight: bold;text-align: center;line-height: 50px;border-radius: 8px;cursor: pointer;
}.post {position: absolute;background: #ffffff;border: 1px #cccccc solid;width: 500px;left: 65px;top: 70px;padding: 10px;font-size: 14px;z-index: 999999;display: none;
}.post .title {width: 450px;height: 30px;line-height: 30px;display: block;border: 1px #cecece solid;margin-bottom: 10px;
}.post select {width: 200px;height: 30px;
}.post .content {width: 450px;height: 200px;display: block;margin: 10px 0;border: 1px #cecece solid;
}.post .btn {width: 160px;height: 35px;color: #fff;background: #009966;border: none;font-size: 14px;font-weight: bold;text-align: center;line-height: 35px;border-radius: 8px;cursor: pointer;
}.bbs {width: 600px;
}.bbs ul li {width: 600px;height: 80px;border-bottom: 1px #CCCCCC dashed;color: #666;font-size: 12px;
}.bbs ul li img {width: 50px;height: 50px;float: left;border-radius: 50px;margin: 15px 0px;
}.bbs ul li h1 {width: 530px;padding-left: 20px;color: #000;padding-top: 15px;font-size: 20px;height: 30px;line-height: 30px;float: left;
}.bbs ul li p {width: 530px;padding-left: 20px;height: 20px;line-height: 20px;float: left;
}.bbs ul li p span {margin-left: 20px;
}

HTML:

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>课工场论坛列表</title><link href="css/bbs.css" rel="stylesheet">
</head>
<body>
<div class="bbs"><header><span>我要发帖</span></header><section><ul></ul></section><div class="post"><input class="title" placeholder="请输入标题（1-50个字符）">所属版块：<select><option>请选择版块</option><option>电子书籍</option><option>新课来了</option><option>新手报到</option><option>职业规划</option></select><textarea class="content"></textarea><input class="btn" value="发布"></div>
</div>
</body>
<script src="js/jquery-1.12.4.js"></script>
<script>$(document).ready(function() {//单击我要发帖var i=0;$("header").click(function(){if(i>0){$(".post").hide();i=0;}else{$(".post").show(); i=1;}});//点击发布$(".btn").click(function(){//1.创建livar $li=$("<li></li>");//2.创建imgvar tou=new Array("tou01.jpg","tou02.jpg","tou03.jpg","tou04.jpg");var r=parseInt(Math.random()*tou.length);//随机数0 1 2 3var $img=$("<img src=images/"+tou[r]+" />");$li.append($img);//3.创建h1var $h1=$("<h1>"+$(".title").val()+"</h1>");$li.append($h1);//4.创建pvar date=new Date();//年var year=date.getFullYear();//月var month=date.getMonth()+1;//日var day=date.getDate();//时var hour=date.getHours();//分var minute=date.getMinutes();//秒var second=date.getSeconds();//时间var time=year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second; //版块信息+发布时间var $p=$("<p>版块："+$("select").val()+"<span> 发布时间："+time+"</span></p>");$li.append($p);$(".bbs ul").prepend($li);//插入到前面$(".post").hide();$(".title,.content").val("");$("select").find("option").eq(0).prop("selected",true);});});</script>
</html>

上机练习4：

CSS:

*{margin:0px;padding:0px;font-size:12px;
}
#bodyDiv{position:relative;background:#FFF url(../images/bg.jpg) no-repeat;width:1016px;height:1176px;margin:0 auto;
}.search{position:absolute;left:125px;top:258px;height:24px;line-height:24px;width:325px;color:#999;
}.tab{position:absolute;left:276px;top:397px;}
#tab_bg{width: 700px;height: 36px;line-height: 36px;cursor: pointer;
}
.tab_bg0 {background: url(../images/news_bghover.gif) 0px 0px;}
.tab_bg1 {background: url(../images/news_bghover.gif) 0px -36px;}
.tab_bg2 {background: url(../images/news_bghover.gif) 0px -72px;}
.tab_bg3 {background: url(../images/news_bghover.gif) 0px -108px;}
.tab_bg4 {background: url(../images/news_bghover.gif) 0px -144px;}
a{color:#000;text-decoration:none;
}
.tab_common {width: 140px;height: 36px;line-height: 36px;float: left;text-align: left;cursor: pointer;text-indent: 40px;
}.tab_current {width: 140px;height: 36px;line-height: 36px;float: left;text-align: left;cursor: pointer;color: #ffffff;text-indent: 40px;
}
.tab_current a{color:#fff;}.jiejue2{position:absolute;left:817px;top:750px;
}
/*nav*/
#nav{position:absolute;top:366px;left:26px;
}
#nav ul{list-style:none;
}
#nav ul li{display:block;width:196px;line-height:30px;border-bottom:1px solid #999;
}
#nav ul li div.first{text-indent:20px;border-bottom:1px solid #999;
}
#nav ul.second{display:none;
}#nav ul.second li{display:block;width:166px;padding-left:30px;height:30px;line-height:30px;border:none;
}

HTML:

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8">
<title> 凡客诚品帮助中心页面</title><link rel="stylesheet" href="css/vancl.css">
</head>
<body>
<div id="bodyDiv"><!-- 输入框 --> <input type="text" value="请输入要查询的问题"  name='search'  class='search'/>  <!-- 左边导航 --><div id='nav'><ul><li><div class='first'>账号管理</div><ul class='second'><li>账号注册</li><li>找回密码</li><li>账户关联登录</li><li>账号常见问题</li></ul></li><li><div class='first'>购物指南</div><ul class='second'><li>购物流程</li><li>服务条款</li><li>积分计划</li><li>取消订单</li></ul></li><li><div class='first'>配送方式</div><ul class='second'><li>国内配送</li><li>订单拆分</li><li>商品验货与签收</li><li>配送常见问题</li></ul></li><li><div class='first'>支付方式</div><ul class='second'><li>在线支付</li><li>货到付款</li><li>VANCL礼品卡</li><li>发票制度</li></ul></li></ul></div><!-- 流程 --><div class="tab"><div id="tab_bg" class="tab_bg0"><div   class="tab_current"><a name="index_gwlc_1" class="track" href="#">1.新用户注册</a></div><div   class="tab_common"><a name="index_gwlc_2" class="track" href="#">2.挑选商品</a></div><div  class="tab_common"><a name="index_gwlc_3" class="track" href="#">3.确认下单</a></div><div  class="tab_common"><a name="index_gwlc_4" class="track" href="#">4.订单跟踪</a></div><div   class="tab_common"><a name="index_gwlc_5" class="track" href="#">5.验货签收</a></div></div></div><!-- 提交问题 --><div class="jiejue2"><h3>这条帮助是否解决了您的问题？</h3><div class="qiehuan"><input name="IsAvail" type="radio" value="1" checked="checked"  /> 已解决<input name="IsAvail" type="radio" value="0"  /> 未解决<input id="ContID" type="hidden" value="1"/></div><div class="wenti" style="display:none"><p>问题没解决？请选择原因:</p><p><select name="TrackID" id="TrackID"  ><option value="1">文字太多，阅读困难</option><option value="2">内容复杂，看不懂</option><option value="3">描述不清楚</option><option value="99">其他原因</option></select></p><div id="TrackContentDiv" style=" display:none;"><p>也可以直接填写原因:</p><p><textarea name="TrackContent" id="TrackContent" cols="45" rows="5"  ></textarea></p></div></div><p class="wenti_result"><a href=""><img src="data:images/submit_bt.jpg"/></a></p> </div> </div>
<script src="js/jquery.js"></script>
<script>$(function(){$("#nav .first").toggle(function(){$(this).siblings().slideDown("slow")},function(){$(this).siblings().slideUp("slow")});$(".search").focus(function(){$(this).val("");});$(".search").blur(function(){$(this).val("请输入要查询的问题");});$(".track").hover(function(){var index =$("#tab_bg div a").index(this);$(".tab #tab_bg").attr("class","tab_bg"+index);});$(".qiehuan input:eq(1)").click(function () {$(".wenti").show();});})
</script>
</body>
</html>

ACCP 8.0 jQuery 第八章上机练习相关推荐

计算机应用基础实验指导实验八,计算机应用基础第八章上机实验
计算机应用基础第八章上机实验 (28页) 本资源提供全文预览,点击全文预览即可全文预览,如果喜欢文档就下载吧,查找使用更方便哦! 14.90 积分第八章上机实验n 实验一键盘指法练习 n 实验二 ...
北大青鸟 accp 4.0：面试中说错减分的一句话
北大青鸟 accp 4.0:面试中说错减分的一句话来源:[url]http://www.accp-teem.com.cn/ArticleView/2007-7-19/Article_View_119 ...
ACCP S1 SQL第十一章上机练习
上机1 select GradeId,sum(ClassHour) as 总学时数 from Subject group by GradeId order by sum(ClassHour)selec ...
HTML 第一学期-第八章上机练习+课后练习(简答题)
上机练习4 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF- ...
北大自考java上机_ACCP8.0 S1 java全部上机答案+示例+课后作业
[实例简介] 北大青鸟ACCP8.0最新课程S1,使用使Java理解程序逻辑的课后上机示例代码答案参考 [实例截图] [核心代码] 01.JAVALogic └── 01.JAVA Logic └── ...
c语言第八章上机答案,C语言程序设计上机指导第8章答案.doc
C语言程序设计上机指导第8章答案上机报告课程名称计算机程序设计基础(C语言) 专业班级姓名学号上机题目函数调用程序设计实验室机房同组人数1实验时间年月日成绩指导教师一. ...
Css2.0+Css3.0+jQuery手册 chm
找了很久都没找到Css2.0的手册,不是要注册就是要积分,故留此存档压缩文件包含Css2.0.Css3.0.jQuery1.4 三个手册,都是包含索引的下载地址:点此下载转载于:https:// ...
jQuery 3.0的domManip浅析
domManip 这个函数的历史由来已久,从 jQuery 1.0 版本开始便存在了,一直到最新的 jQuery 版本.可谓是元老级工具函数. domManip 的主要功能是为了实现 DOM 的插入和 ...
Python 【第八章】：JavaScript 、Dom、jQuery
JavaScript 放置位置 body内部最下面,这样可以避免javascript链接失效时,长时间加载不到页面html内容变量: var a =123 局部变量 a = 123 全局变量作用域 ...

ACCP 8.0 jQuery 第八章上机练习

上机练习1：

CSS:

HTML:

上机练习2：

CSS:

HTML:

上机练习3：

CSS:

HTML:

上机练习4：

ACCP 8.0 jQuery 第八章上机练习相关推荐

最新文章

热门文章

ACCP 8.0 jQuery 第八章 上机练习

上机练习1：

CSS:

HTML:

上机练习2：

CSS:

HTML:

上机练习3：

CSS:

HTML:

上机练习4：

ACCP 8.0 jQuery 第八章 上机练习相关推荐

最新文章

热门文章

ACCP 8.0 jQuery 第八章上机练习

ACCP 8.0 jQuery 第八章上机练习相关推荐