|
|
13分7秒
本视频采用html5方式播放，如无法正常播放，请将浏览器升级至最新版本，推荐火狐，chrome，360浏览器
如果装有迅雷，播放视频呈现直接下载状态，请调整 迅雷系统设置-基本设置-启动-监视全部浏览器 (去掉这个选项)
步骤
1
:
效果
步骤
2
:
布局
步骤
3
:
纯html
步骤
4
:
加上样式
步骤
5
:
样式讲解
步骤
6
:
再整合在一起
");
window.frames["iframe_show3131"].document.write(decodeHtml($("textarea#stepcodeTextarea3131").val()));
window.frames["iframe_show3131"].document.close();
$(window.frames["iframe_show3131"]).load(function(){
$("#iframe_show3131").height($("#iframe_show3131").contents().find("body").height()+showittryitheight);
});
$("#iframe_show3131").height($("#iframe_show3131").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<style>
body{
font-size: 12px;
font-family: Arial;
}
a{
color:#999;
}
.redColor{
color: #C40000 !important;
}
nav.top{
background-color: #f2f2f2;
padding-top: 5px;
padding-bottom: 5px;
border-bottom:1px solid #e7e7e7;
}
nav.top span, nav.top a{
color: #999;
margin: 0px 10px 0px 10px;
}
nav.top a:hover{
color: #C40000;
text-decoration: none;
}
</style>
<nav class="top ">
<a href="#nowhere">
<span class="glyphicon glyphicon-home redColor"></span>
天猫首页
</a>
<span>喵，欢迎来天猫</span>
<a href="#nowhere">请登录</a>
<a href="#nowhere">免费注册</a>
<span class="pull-right">
<a href="#nowhere">我的订单</a>
<a href="#nowhere">
<span class=" glyphicon glyphicon-shopping-cart redColor" ></span>
购物车<strong>0</strong>件</a>
</span>
</nav>
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<style>
body{
font-size: 12px;
font-family: Arial;
}
a{
color:#999;
}
.redColor{
color: #C40000 !important;
}
nav.top{
background-color: #f2f2f2;
padding-top: 5px;
padding-bottom: 5px;
border-bottom:1px solid #e7e7e7;
}
nav.top span, nav.top a{
color: #999;
margin: 0px 10px 0px 10px;
}
nav.top a:hover{
color: #C40000;
text-decoration: none;
}
</style>
<nav class="top ">
<a href="#nowhere">
<span class="glyphicon glyphicon-home redColor"></span>
天猫首页
</a>
<span>喵，欢迎来天猫</span>
<a href="#nowhere">请登录</a>
<a href="#nowhere">免费注册</a>
<span class="pull-right">
<a href="#nowhere">我的订单</a>
<a href="#nowhere">
<span class=" glyphicon glyphicon-shopping-cart redColor" ></span>
购物车<strong>0</strong>件</a>
</span>
</nav>
");
window.frames["iframe3131"].document.write(decodeHtml(code3131));
window.frames["iframe3131"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe3131"]).load(function(){
$("#iframe3131").height($("#iframe3131").contents().find("body").height()+showittryitheight);
});
$("#iframe3131").height($("#iframe3131").contents().find("body").height()+showittryitheight);
alreadyWriteCode3131 = code3131;
$("#rendering3131").hide();
$("#rendered3131").show();
}
var tRereshRetry2DemoPanel3131 = setInterval(rereshRetry2DemoPanel3131,1000);
var binded3131 = false;
$("textarea#stepcodeTextarea3131").keyup(function(){
if(!binded3131){
$(window).bind('beforeunload',function(){
binded3131 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code3131 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code3131!=newCode){
// window.frames["iframe3131"].document.write("
");
// window.frames["iframe3131"].document.write(decodeHtml($("textarea#stepcodeTextarea3131").val()));
// window.frames["iframe3131"].document.close();
// $(window.frames["iframe3131"]).load(function(){
// $("#iframe3131").height($("#iframe3131").contents().find("body").height()+showittryitheight);
// });
// code3131 = newCode;
// }
});
$(".tryButton3131").click(function(){
$("#tryDiv3131").show();
$("#stepcodeTextarea3131").focus();
$("#stepcodeTextarea3131").height(200);
$("#iframe3131").height(0);
window.frames["iframe3131"].document.write("
");
window.frames["iframe3131"].document.write(decodeHtml($("textarea#stepcodeTextarea3131").val()));
window.frames["iframe3131"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe3131"]).load(function(){
$("#iframe3131").height($("#iframe3131").contents().find("body").height()+showittryitheight);
});
$("#iframe3131").height($("#iframe3131").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor3131.focus();
editor3131.setSize(null, "250");
$("#rendering3131").hide();
$("#rendered3131").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor3131 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea3131"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor3131.on("change",function(doc){
if(!binded3131){
$(window).bind('beforeunload',function(){
binded3131 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code3131 = newCode;
$("textarea#stepcodeTextarea3131").val(newCode);
if(alreadyWriteCode3131!=code3131){
lastModifedTime3131 = new Date().getTime();
$("#rendering3131").show();
$("#rendered3131").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor3131 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor3131.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv3131").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
最外面是nav元素，nav元素和div元素一样都是用来进行布局的。 不同之处在于，nav可以更加明确的告诉搜索引擎，这部分内容，是用于导航的，帮助搜索引擎理解你的网页。 然后是连续摆放的超链和span，因为超链和span是 内联元素，不会自动换行，所以这些会自动出现左侧，并且水平摆放。 然后是在右侧放了一个span， 这个span本身是飘在右侧的。 span里放了超链和span，自动进行水平摆放。
这是html的内容没有使用CSS的效果。 1. 为了使用图标，引入了 Bootstrap和 Jquery
<script src="...jquery.min.js"></script>
<link href="...bootstrap.min.css" >
<script src="...bootstrap.min.js"></script>
2. 使用了Bootstrap之后，超链会发生变化 超链会变成浅蓝色，但是并不是天猫的颜色风格 3. 没有背景色和边框 4. 向右飘逸定位使用Bootstrap的pull-right样式，其实这个样式很简单，就是使用的float:right. !important;表示高优先级
.pull-right {
float: right !important;
}
不是说了纯HTML+CSS吗？为什么这就开始用Bootstrap了？使用Bootstrap主要是为了使用其中的 字体图标，以及 轮播和 模态窗口效果。 可以看到Bootstrap自带的超链风格并不是天猫的样式风格，并不能直接拿来使用。 所以接下来，还是会让大家掌握如何使用最基本的CSS去实现天猫的效果，这样才能锻炼硬功夫
");
window.frames["iframe_show3133"].document.write(decodeHtml($("textarea#stepcodeTextarea3133").val()));
window.frames["iframe_show3133"].document.close();
$(window.frames["iframe_show3133"]).load(function(){
$("#iframe_show3133").height($("#iframe_show3133").contents().find("body").height()+showittryitheight);
});
$("#iframe_show3133").height($("#iframe_show3133").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<nav class="top ">
<a href="#nowhere">
<span class="glyphicon glyphicon-home redColor"></span>
天猫首页
</a>
<span>喵，欢迎来天猫</span>
<a href="#nowhere">请登录</a>
<a href="#nowhere">免费注册</a>
<span class="pull-right">
<a href="#nowhere">我的订单</a>
<a href="#nowhere">
<span class=" glyphicon glyphicon-shopping-cart redColor" ></span>
购物车<strong>0</strong>件</a>
</span>
</nav>
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<nav class="top ">
<a href="#nowhere">
<span class="glyphicon glyphicon-home redColor"></span>
天猫首页
</a>
<span>喵，欢迎来天猫</span>
<a href="#nowhere">请登录</a>
<a href="#nowhere">免费注册</a>
<span class="pull-right">
<a href="#nowhere">我的订单</a>
<a href="#nowhere">
<span class=" glyphicon glyphicon-shopping-cart redColor" ></span>
购物车<strong>0</strong>件</a>
</span>
</nav>
");
window.frames["iframe3133"].document.write(decodeHtml(code3133));
window.frames["iframe3133"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe3133"]).load(function(){
$("#iframe3133").height($("#iframe3133").contents().find("body").height()+showittryitheight);
});
$("#iframe3133").height($("#iframe3133").contents().find("body").height()+showittryitheight);
alreadyWriteCode3133 = code3133;
$("#rendering3133").hide();
$("#rendered3133").show();
}
var tRereshRetry2DemoPanel3133 = setInterval(rereshRetry2DemoPanel3133,1000);
var binded3133 = false;
$("textarea#stepcodeTextarea3133").keyup(function(){
if(!binded3133){
$(window).bind('beforeunload',function(){
binded3133 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code3133 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code3133!=newCode){
// window.frames["iframe3133"].document.write("
");
// window.frames["iframe3133"].document.write(decodeHtml($("textarea#stepcodeTextarea3133").val()));
// window.frames["iframe3133"].document.close();
// $(window.frames["iframe3133"]).load(function(){
// $("#iframe3133").height($("#iframe3133").contents().find("body").height()+showittryitheight);
// });
// code3133 = newCode;
// }
});
$(".tryButton3133").click(function(){
$("#tryDiv3133").show();
$("#stepcodeTextarea3133").focus();
$("#stepcodeTextarea3133").height(200);
$("#iframe3133").height(0);
window.frames["iframe3133"].document.write("
");
window.frames["iframe3133"].document.write(decodeHtml($("textarea#stepcodeTextarea3133").val()));
window.frames["iframe3133"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe3133"]).load(function(){
$("#iframe3133").height($("#iframe3133").contents().find("body").height()+showittryitheight);
});
$("#iframe3133").height($("#iframe3133").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor3133.focus();
editor3133.setSize(null, "250");
$("#rendering3133").hide();
$("#rendered3133").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor3133 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea3133"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor3133.on("change",function(doc){
if(!binded3133){
$(window).bind('beforeunload',function(){
binded3133 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code3133 = newCode;
$("textarea#stepcodeTextarea3133").val(newCode);
if(alreadyWriteCode3133!=code3133){
lastModifedTime3133 = new Date().getTime();
$("#rendering3133").show();
$("#rendered3133").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor3133 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor3133.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv3133").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
");
window.frames["iframe_show3134"].document.write(decodeHtml($("textarea#stepcodeTextarea3134").val()));
window.frames["iframe_show3134"].document.close();
$(window.frames["iframe_show3134"]).load(function(){
$("#iframe_show3134").height($("#iframe_show3134").contents().find("body").height()+showittryitheight);
});
$("#iframe_show3134").height($("#iframe_show3134").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<style>
body{
font-size: 12px;
font-family: Arial;
}
a{
color:#999;
}
.redColor{
color: #C40000 !important;
}
nav.top{
background-color: #f2f2f2;
padding-top: 5px;
padding-bottom: 5px;
border-bottom:1px solid #e7e7e7;
}
nav.top span, nav.top a{
color: #999;
margin: 0px 10px 0px 10px;
}
nav.top a:hover{
color: #C40000;
text-decoration: none;
}
</style>
<nav class="top ">
<a href="#nowhere">
<span class="glyphicon glyphicon-home redColor"></span>
天猫首页
</a>
<span>喵，欢迎来天猫</span>
<a href="#nowhere">请登录</a>
<a href="#nowhere">免费注册</a>
<span class="pull-right">
<a href="#nowhere">我的订单</a>
<a href="#nowhere">
<span class=" glyphicon glyphicon-shopping-cart redColor" ></span>
购物车<strong>0</strong>件</a>
</span>
</nav>
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<style>
body{
font-size: 12px;
font-family: Arial;
}
a{
color:#999;
}
.redColor{
color: #C40000 !important;
}
nav.top{
background-color: #f2f2f2;
padding-top: 5px;
padding-bottom: 5px;
border-bottom:1px solid #e7e7e7;
}
nav.top span, nav.top a{
color: #999;
margin: 0px 10px 0px 10px;
}
nav.top a:hover{
color: #C40000;
text-decoration: none;
}
</style>
<nav class="top ">
<a href="#nowhere">
<span class="glyphicon glyphicon-home redColor"></span>
天猫首页
</a>
<span>喵，欢迎来天猫</span>
<a href="#nowhere">请登录</a>
<a href="#nowhere">免费注册</a>
<span class="pull-right">
<a href="#nowhere">我的订单</a>
<a href="#nowhere">
<span class=" glyphicon glyphicon-shopping-cart redColor" ></span>
购物车<strong>0</strong>件</a>
</span>
</nav>
");
window.frames["iframe3134"].document.write(decodeHtml(code3134));
window.frames["iframe3134"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe3134"]).load(function(){
$("#iframe3134").height($("#iframe3134").contents().find("body").height()+showittryitheight);
});
$("#iframe3134").height($("#iframe3134").contents().find("body").height()+showittryitheight);
alreadyWriteCode3134 = code3134;
$("#rendering3134").hide();
$("#rendered3134").show();
}
var tRereshRetry2DemoPanel3134 = setInterval(rereshRetry2DemoPanel3134,1000);
var binded3134 = false;
$("textarea#stepcodeTextarea3134").keyup(function(){
if(!binded3134){
$(window).bind('beforeunload',function(){
binded3134 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code3134 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code3134!=newCode){
// window.frames["iframe3134"].document.write("
");
// window.frames["iframe3134"].document.write(decodeHtml($("textarea#stepcodeTextarea3134").val()));
// window.frames["iframe3134"].document.close();
// $(window.frames["iframe3134"]).load(function(){
// $("#iframe3134").height($("#iframe3134").contents().find("body").height()+showittryitheight);
// });
// code3134 = newCode;
// }
});
$(".tryButton3134").click(function(){
$("#tryDiv3134").show();
$("#stepcodeTextarea3134").focus();
$("#stepcodeTextarea3134").height(200);
$("#iframe3134").height(0);
window.frames["iframe3134"].document.write("
");
window.frames["iframe3134"].document.write(decodeHtml($("textarea#stepcodeTextarea3134").val()));
window.frames["iframe3134"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe3134"]).load(function(){
$("#iframe3134").height($("#iframe3134").contents().find("body").height()+showittryitheight);
});
$("#iframe3134").height($("#iframe3134").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor3134.focus();
editor3134.setSize(null, "250");
$("#rendering3134").hide();
$("#rendered3134").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor3134 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea3134"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor3134.on("change",function(doc){
if(!binded3134){
$(window).bind('beforeunload',function(){
binded3134 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code3134 = newCode;
$("textarea#stepcodeTextarea3134").val(newCode);
if(alreadyWriteCode3134!=code3134){
lastModifedTime3134 = new Date().getTime();
$("#rendering3134").show();
$("#rendered3134").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor3134 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor3134.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv3134").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
等下同学们自己做的时候，就一点一点的把样式放上去，观察变化，确认每个样式的用处。
完了之后，再自己从零开始，不看答案设计一遍，做出来，就可以很好的把本知识点的内容消化掉了。
不要着急，慢工出细活，花这些时间是非常值得的
");
window.frames["iframe_show3136"].document.write(decodeHtml($("textarea#stepcodeTextarea3136").val()));
window.frames["iframe_show3136"].document.close();
$(window.frames["iframe_show3136"]).load(function(){
$("#iframe_show3136").height($("#iframe_show3136").contents().find("body").height()+showittryitheight);
});
$("#iframe_show3136").height($("#iframe_show3136").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<style>
body{
font-size: 12px;
font-family: Arial;
}
a{
color:#999;
}
.redColor{
color: #C40000 !important;
}
nav.top{
background-color: #f2f2f2;
padding-top: 5px;
padding-bottom: 5px;
border-bottom:1px solid #e7e7e7;
}
nav.top span, nav.top a{
color: #999;
margin: 0px 10px 0px 10px;
}
nav.top a:hover{
color: #C40000;
text-decoration: none;
}
</style>
<nav class="top ">
<a href="#nowhere">
<span class="glyphicon glyphicon-home redColor"></span>
天猫首页
</a>
<span>喵，欢迎来天猫</span>
<a href="#nowhere">请登录</a>
<a href="#nowhere">免费注册</a>
<span class="pull-right">
<a href="#nowhere">我的订单</a>
<a href="#nowhere">
<span class=" glyphicon glyphicon-shopping-cart redColor" ></span>
购物车<strong>0</strong>件</a>
</span>
</nav>
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://127.0.0.1/study../../../js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://127.0.0.1/study../../../css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://127.0.0.1/study../../../js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<style>
body{
font-size: 12px;
font-family: Arial;
}
a{
color:#999;
}
.redColor{
color: #C40000 !important;
}
nav.top{
background-color: #f2f2f2;
padding-top: 5px;
padding-bottom: 5px;
border-bottom:1px solid #e7e7e7;
}
nav.top span, nav.top a{
color: #999;
margin: 0px 10px 0px 10px;
}
nav.top a:hover{
color: #C40000;
text-decoration: none;
}
</style>
<nav class="top ">
<a href="#nowhere">
<span class="glyphicon glyphicon-home redColor"></span>
天猫首页
</a>
<span>喵，欢迎来天猫</span>
<a href="#nowhere">请登录</a>
<a href="#nowhere">免费注册</a>
<span class="pull-right">
<a href="#nowhere">我的订单</a>
<a href="#nowhere">
<span class=" glyphicon glyphicon-shopping-cart redColor" ></span>
购物车<strong>0</strong>件</a>
</span>
</nav>
");
window.frames["iframe3136"].document.write(decodeHtml(code3136));
window.frames["iframe3136"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe3136"]).load(function(){
$("#iframe3136").height($("#iframe3136").contents().find("body").height()+showittryitheight);
});
$("#iframe3136").height($("#iframe3136").contents().find("body").height()+showittryitheight);
alreadyWriteCode3136 = code3136;
$("#rendering3136").hide();
$("#rendered3136").show();
}
var tRereshRetry2DemoPanel3136 = setInterval(rereshRetry2DemoPanel3136,1000);
var binded3136 = false;
$("textarea#stepcodeTextarea3136").keyup(function(){
if(!binded3136){
$(window).bind('beforeunload',function(){
binded3136 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code3136 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code3136!=newCode){
// window.frames["iframe3136"].document.write("
");
// window.frames["iframe3136"].document.write(decodeHtml($("textarea#stepcodeTextarea3136").val()));
// window.frames["iframe3136"].document.close();
// $(window.frames["iframe3136"]).load(function(){
// $("#iframe3136").height($("#iframe3136").contents().find("body").height()+showittryitheight);
// });
// code3136 = newCode;
// }
});
$(".tryButton3136").click(function(){
$("#tryDiv3136").show();
$("#stepcodeTextarea3136").focus();
$("#stepcodeTextarea3136").height(200);
$("#iframe3136").height(0);
window.frames["iframe3136"].document.write("
");
window.frames["iframe3136"].document.write(decodeHtml($("textarea#stepcodeTextarea3136").val()));
window.frames["iframe3136"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe3136"]).load(function(){
$("#iframe3136").height($("#iframe3136").contents().find("body").height()+showittryitheight);
});
$("#iframe3136").height($("#iframe3136").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor3136.focus();
editor3136.setSize(null, "250");
$("#rendering3136").hide();
$("#rendered3136").hide();
});
var mixedMode = {
name: "htmlmixed",
scriptTypes: [{matches: /\/x-handlebars-template|\/x-mustache/i,
mode: null},
{matches: /(text|application)\/(x-)?vb(a|script)/i,
mode: "vbscript"}]
};
var editor3136 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea3136"), {
lineNumbers: true,
styleActiveLine: true,
matchBrackets: true,
mode:"text/html",
theme:"eclipse",
selectionPointer: true,
lineWrapping: true,
extraKeys: {
"Alt-/": "autocomplete",
"Ctrl-F": "findPersistent",
"F8": function(cm) {
cm.setOption("fullScreen", !cm.getOption("fullScreen"));
},
"Esc": function(cm) {
if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
}
}
});
editor3136.on("change",function(doc){
if(!binded3136){
$(window).bind('beforeunload',function(){
binded3136 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code3136 = newCode;
$("textarea#stepcodeTextarea3136").val(newCode);
if(alreadyWriteCode3136!=code3136){
lastModifedTime3136 = new Date().getTime();
$("#rendering3136").show();
$("#rendered3136").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor3136 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor3136.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv3136").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
代码高亮插件双击即可选中，不过部分同学反应，通过代码高亮插件复制的代码无法在IDEA里正常显示，这里提供TEXTAREA的方式，方便复制，谢谢
1. 自行完成练习
根据练习目标尽量自己实现代码效果，期间会碰到疑问，难题，和自己不懂的地方，这些都是必要的过程
2. 带着疑问查看答案
完成过程中，碰到无法解决的问题，带着疑问，查看答案，分析答案的解决思路
3. 查看答案讲解视频
依然有不明白的地方，点开视频讲解，带着疑问，听视频讲解有问题的部分
4. 再做一遍
理解后，再从头做一遍，把有疑问的地方都捋清楚
5. 总结
最后再总结一遍，总结思路，总结解决办法，以后遇到类似的问题，怎么处理
HOW2J公众号，关注后实时获知布最新的教程和优惠活动，谢谢。
提问之前请登陆
|
