|
|
7分28秒
本视频采用html5方式播放，如无法正常播放，请将浏览器升级至最新版本，推荐火狐，chrome，360浏览器
如果装有迅雷，播放视频呈现直接下载状态，请调整 迅雷系统设置-基本设置-启动-监视全部浏览器 (去掉这个选项)
步骤
1
:
效果
步骤
2
:
布局
步骤
3
:
纯html
步骤
4
:
加上样式
步骤
5
:
样式讲解
步骤
6
:
再整合在一起
");
window.frames["iframe_show3149"].document.write(decodeHtml($("textarea#stepcodeTextarea3149").val()));
window.frames["iframe_show3149"].document.close();
$(window.frames["iframe_show3149"]).load(function(){
$("#iframe_show3149").height($("#iframe_show3149").contents().find("body").height()+showittryitheight);
});
$("#iframe_show3149").height($("#iframe_show3149").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>
div.searchDiv{
background-color: #C40000;
width: 400px;
margin: 50px auto;
padding: 1px;
height: 40px;
display: block;
}
div.searchDiv input{
width: 275px;
border: 1px solid transparent;
height: 36px;
margin: 1px;
outline:none;
}
div.searchDiv button{
width: 110px;
border: 1px solid transparent;
background-color: #C40000;
color: white;
font-size: 20px;
font-weight: bold;
}
div.searchBelow{
margin-top: 3px;
margin-left: -20px;
}
div.searchBelow span{
color: #999;
}
div.searchBelow a{
padding: 0px 20px 0px 20px;
font-size: 14px;
}
img.logo{
position: absolute;
left: 0px;
top: 30px;
z-index:-1;
}
body{
font-size:12px;
font-family:Arial;
}
a{
color:#999;
}
a:hover{
text-decoration:none;
color:#C40000;
}
</style>
<div>
<a href="#nowhere"> <img class="logo" src="http://127.0.0.1/tmall../../../img/site/logo.gif"
id="logo">
</a>
<div class="searchDiv">
<input type="text" placeholder="时尚男鞋 太阳镜 " name="keyword">
<button class="searchButton" type="submit">搜索</button>
<div class="searchBelow">
<span> <a href="#nowhere"> 平衡车 </a> <span>|</span>
</span> <span> <a href="#nowhere"> 扫地机器人 </a> <span>|</span>
</span> <span> <a href="#nowhere"> 原汁机 </a> <span>|</span>
</span> <span> <a href="#nowhere"> 冰箱 </a></span>
</div>
</div>
</div>
<div style="height:50px"></div>
<!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>
div.searchDiv{
background-color: #C40000;
width: 400px;
margin: 50px auto;
padding: 1px;
height: 40px;
display: block;
}
div.searchDiv input{
width: 275px;
border: 1px solid transparent;
height: 36px;
margin: 1px;
outline:none;
}
div.searchDiv button{
width: 110px;
border: 1px solid transparent;
background-color: #C40000;
color: white;
font-size: 20px;
font-weight: bold;
}
div.searchBelow{
margin-top: 3px;
margin-left: -20px;
}
div.searchBelow span{
color: #999;
}
div.searchBelow a{
padding: 0px 20px 0px 20px;
font-size: 14px;
}
img.logo{
position: absolute;
left: 0px;
top: 30px;
z-index:-1;
}
body{
font-size:12px;
font-family:Arial;
}
a{
color:#999;
}
a:hover{
text-decoration:none;
color:#C40000;
}
</style>
<div>
<a href="#nowhere"> <img class="logo" src="http://127.0.0.1/tmall../../../img/site/logo.gif"
id="logo">
</a>
<div class="searchDiv">
<input type="text" placeholder="时尚男鞋 太阳镜 " name="keyword">
<button class="searchButton" type="submit">搜索</button>
<div class="searchBelow">
<span> <a href="#nowhere"> 平衡车 </a> <span>|</span>
</span> <span> <a href="#nowhere"> 扫地机器人 </a> <span>|</span>
</span> <span> <a href="#nowhere"> 原汁机 </a> <span>|</span>
</span> <span> <a href="#nowhere"> 冰箱 </a></span>
</div>
</div>
</div>
<div style="height:50px"></div>
");
window.frames["iframe3149"].document.write(decodeHtml(code3149));
window.frames["iframe3149"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe3149"]).load(function(){
$("#iframe3149").height($("#iframe3149").contents().find("body").height()+showittryitheight);
});
$("#iframe3149").height($("#iframe3149").contents().find("body").height()+showittryitheight);
alreadyWriteCode3149 = code3149;
$("#rendering3149").hide();
$("#rendered3149").show();
}
var tRereshRetry2DemoPanel3149 = setInterval(rereshRetry2DemoPanel3149,1000);
var binded3149 = false;
$("textarea#stepcodeTextarea3149").keyup(function(){
if(!binded3149){
$(window).bind('beforeunload',function(){
binded3149 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code3149 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code3149!=newCode){
// window.frames["iframe3149"].document.write("
");
// window.frames["iframe3149"].document.write(decodeHtml($("textarea#stepcodeTextarea3149").val()));
// window.frames["iframe3149"].document.close();
// $(window.frames["iframe3149"]).load(function(){
// $("#iframe3149").height($("#iframe3149").contents().find("body").height()+showittryitheight);
// });
// code3149 = newCode;
// }
});
$(".tryButton3149").click(function(){
$("#tryDiv3149").show();
$("#stepcodeTextarea3149").focus();
$("#stepcodeTextarea3149").height(200);
$("#iframe3149").height(0);
window.frames["iframe3149"].document.write("
");
window.frames["iframe3149"].document.write(decodeHtml($("textarea#stepcodeTextarea3149").val()));
window.frames["iframe3149"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe3149"]).load(function(){
$("#iframe3149").height($("#iframe3149").contents().find("body").height()+showittryitheight);
});
$("#iframe3149").height($("#iframe3149").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor3149.focus();
editor3149.setSize(null, "250");
$("#rendering3149").hide();
$("#rendered3149").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 editor3149 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea3149"), {
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);
}
}
});
editor3149.on("change",function(doc){
if(!binded3149){
$(window).bind('beforeunload',function(){
binded3149 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code3149 = newCode;
$("textarea#stepcodeTextarea3149").val(newCode);
if(alreadyWriteCode3149!=code3149){
lastModifedTime3149 = new Date().getTime();
$("#rendering3149").show();
$("#rendered3149").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor3149 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor3149.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv3149").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
搜索栏所在的div是一个居中的div
这个居中的div，包含一个子div，其中是 平衡车 | 扫地机器人 | 原汁机 | 冰箱 等信息
左侧的图片使用绝对定位的方式，这样就可以很方便的做到图片和搜索栏div水平放置的效果
");
window.frames["iframe_show3151"].document.write(decodeHtml($("textarea#stepcodeTextarea3151").val()));
window.frames["iframe_show3151"].document.close();
$(window.frames["iframe_show3151"]).load(function(){
$("#iframe_show3151").height($("#iframe_show3151").contents().find("body").height()+showittryitheight);
});
$("#iframe_show3151").height($("#iframe_show3151").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>
<div>
<a href="#nowhere"> <img class="logo" src="http://127.0.0.1/tmall../../../img/site/logo.gif"
id="logo">
</a>
<div class="searchDiv">
<input type="text" placeholder="时尚男鞋 太阳镜 " name="keyword">
<button class="searchButton" type="submit">搜索</button>
<div class="searchBelow">
<span> <a href="#nowhere"> 平衡车 </a> <span>|</span>
</span> <span> <a href="#nowhere"> 扫地机器人 </a> <span>|</span>
</span> <span> <a href="#nowhere"> 原汁机 </a> <span>|</span>
</span> <span> <a href="#nowhere"> 冰箱 </a></span>
</div>
</div>
</div>
<div style="height:50px"></div>
<!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>
<div>
<a href="#nowhere"> <img class="logo" src="http://127.0.0.1/tmall../../../img/site/logo.gif"
id="logo">
</a>
<div class="searchDiv">
<input type="text" placeholder="时尚男鞋 太阳镜 " name="keyword">
<button class="searchButton" type="submit">搜索</button>
<div class="searchBelow">
<span> <a href="#nowhere"> 平衡车 </a> <span>|</span>
</span> <span> <a href="#nowhere"> 扫地机器人 </a> <span>|</span>
</span> <span> <a href="#nowhere"> 原汁机 </a> <span>|</span>
</span> <span> <a href="#nowhere"> 冰箱 </a></span>
</div>
</div>
</div>
<div style="height:50px"></div>
");
window.frames["iframe3151"].document.write(decodeHtml(code3151));
window.frames["iframe3151"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe3151"]).load(function(){
$("#iframe3151").height($("#iframe3151").contents().find("body").height()+showittryitheight);
});
$("#iframe3151").height($("#iframe3151").contents().find("body").height()+showittryitheight);
alreadyWriteCode3151 = code3151;
$("#rendering3151").hide();
$("#rendered3151").show();
}
var tRereshRetry2DemoPanel3151 = setInterval(rereshRetry2DemoPanel3151,1000);
var binded3151 = false;
$("textarea#stepcodeTextarea3151").keyup(function(){
if(!binded3151){
$(window).bind('beforeunload',function(){
binded3151 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code3151 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code3151!=newCode){
// window.frames["iframe3151"].document.write("
");
// window.frames["iframe3151"].document.write(decodeHtml($("textarea#stepcodeTextarea3151").val()));
// window.frames["iframe3151"].document.close();
// $(window.frames["iframe3151"]).load(function(){
// $("#iframe3151").height($("#iframe3151").contents().find("body").height()+showittryitheight);
// });
// code3151 = newCode;
// }
});
$(".tryButton3151").click(function(){
$("#tryDiv3151").show();
$("#stepcodeTextarea3151").focus();
$("#stepcodeTextarea3151").height(200);
$("#iframe3151").height(0);
window.frames["iframe3151"].document.write("
");
window.frames["iframe3151"].document.write(decodeHtml($("textarea#stepcodeTextarea3151").val()));
window.frames["iframe3151"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe3151"]).load(function(){
$("#iframe3151").height($("#iframe3151").contents().find("body").height()+showittryitheight);
});
$("#iframe3151").height($("#iframe3151").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor3151.focus();
editor3151.setSize(null, "250");
$("#rendering3151").hide();
$("#rendered3151").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 editor3151 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea3151"), {
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);
}
}
});
editor3151.on("change",function(doc){
if(!binded3151){
$(window).bind('beforeunload',function(){
binded3151 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code3151 = newCode;
$("textarea#stepcodeTextarea3151").val(newCode);
if(alreadyWriteCode3151!=code3151){
lastModifedTime3151 = new Date().getTime();
$("#rendering3151").show();
$("#rendered3151").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor3151 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor3151.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv3151").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
");
window.frames["iframe_show3152"].document.write(decodeHtml($("textarea#stepcodeTextarea3152").val()));
window.frames["iframe_show3152"].document.close();
$(window.frames["iframe_show3152"]).load(function(){
$("#iframe_show3152").height($("#iframe_show3152").contents().find("body").height()+showittryitheight);
});
$("#iframe_show3152").height($("#iframe_show3152").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>
div.searchDiv{
background-color: #C40000;
width: 400px;
margin: 50px auto;
padding: 1px;
height: 40px;
display: block;
}
div.searchDiv input{
width: 275px;
border: 1px solid transparent;
height: 36px;
margin: 1px;
outline:none;
}
div.searchDiv button{
width: 110px;
border: 1px solid transparent;
background-color: #C40000;
color: white;
font-size: 20px;
font-weight: bold;
}
div.searchBelow{
margin-top: 3px;
margin-left: -20px;
}
div.searchBelow span{
color: #999;
}
div.searchBelow a{
padding: 0px 20px 0px 20px;
font-size: 14px;
}
img.logo{
position: absolute;
left: 0px;
top: 30px;
z-index:-1;
}
body{
font-size:12px;
font-family:Arial;
}
a{
color:#999;
}
a:hover{
text-decoration:none;
color:#C40000;
}
</style>
<div>
<a href="#nowhere"> <img class="logo" src="http://127.0.0.1/tmall../../../img/site/logo.gif"
id="logo">
</a>
<div class="searchDiv">
<input type="text" placeholder="时尚男鞋 太阳镜 " name="keyword">
<button class="searchButton" type="submit">搜索</button>
<div class="searchBelow">
<span> <a href="#nowhere"> 平衡车 </a> <span>|</span>
</span> <span> <a href="#nowhere"> 扫地机器人 </a> <span>|</span>
</span> <span> <a href="#nowhere"> 原汁机 </a> <span>|</span>
</span> <span> <a href="#nowhere"> 冰箱 </a></span>
</div>
</div>
</div>
<div style="height:50px"></div>
<!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>
div.searchDiv{
background-color: #C40000;
width: 400px;
margin: 50px auto;
padding: 1px;
height: 40px;
display: block;
}
div.searchDiv input{
width: 275px;
border: 1px solid transparent;
height: 36px;
margin: 1px;
outline:none;
}
div.searchDiv button{
width: 110px;
border: 1px solid transparent;
background-color: #C40000;
color: white;
font-size: 20px;
font-weight: bold;
}
div.searchBelow{
margin-top: 3px;
margin-left: -20px;
}
div.searchBelow span{
color: #999;
}
div.searchBelow a{
padding: 0px 20px 0px 20px;
font-size: 14px;
}
img.logo{
position: absolute;
left: 0px;
top: 30px;
z-index:-1;
}
body{
font-size:12px;
font-family:Arial;
}
a{
color:#999;
}
a:hover{
text-decoration:none;
color:#C40000;
}
</style>
<div>
<a href="#nowhere"> <img class="logo" src="http://127.0.0.1/tmall../../../img/site/logo.gif"
id="logo">
</a>
<div class="searchDiv">
<input type="text" placeholder="时尚男鞋 太阳镜 " name="keyword">
<button class="searchButton" type="submit">搜索</button>
<div class="searchBelow">
<span> <a href="#nowhere"> 平衡车 </a> <span>|</span>
</span> <span> <a href="#nowhere"> 扫地机器人 </a> <span>|</span>
</span> <span> <a href="#nowhere"> 原汁机 </a> <span>|</span>
</span> <span> <a href="#nowhere"> 冰箱 </a></span>
</div>
</div>
</div>
<div style="height:50px"></div>
");
window.frames["iframe3152"].document.write(decodeHtml(code3152));
window.frames["iframe3152"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe3152"]).load(function(){
$("#iframe3152").height($("#iframe3152").contents().find("body").height()+showittryitheight);
});
$("#iframe3152").height($("#iframe3152").contents().find("body").height()+showittryitheight);
alreadyWriteCode3152 = code3152;
$("#rendering3152").hide();
$("#rendered3152").show();
}
var tRereshRetry2DemoPanel3152 = setInterval(rereshRetry2DemoPanel3152,1000);
var binded3152 = false;
$("textarea#stepcodeTextarea3152").keyup(function(){
if(!binded3152){
$(window).bind('beforeunload',function(){
binded3152 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code3152 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code3152!=newCode){
// window.frames["iframe3152"].document.write("
");
// window.frames["iframe3152"].document.write(decodeHtml($("textarea#stepcodeTextarea3152").val()));
// window.frames["iframe3152"].document.close();
// $(window.frames["iframe3152"]).load(function(){
// $("#iframe3152").height($("#iframe3152").contents().find("body").height()+showittryitheight);
// });
// code3152 = newCode;
// }
});
$(".tryButton3152").click(function(){
$("#tryDiv3152").show();
$("#stepcodeTextarea3152").focus();
$("#stepcodeTextarea3152").height(200);
$("#iframe3152").height(0);
window.frames["iframe3152"].document.write("
");
window.frames["iframe3152"].document.write(decodeHtml($("textarea#stepcodeTextarea3152").val()));
window.frames["iframe3152"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe3152"]).load(function(){
$("#iframe3152").height($("#iframe3152").contents().find("body").height()+showittryitheight);
});
$("#iframe3152").height($("#iframe3152").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor3152.focus();
editor3152.setSize(null, "250");
$("#rendering3152").hide();
$("#rendered3152").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 editor3152 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea3152"), {
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);
}
}
});
editor3152.on("change",function(doc){
if(!binded3152){
$(window).bind('beforeunload',function(){
binded3152 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code3152 = newCode;
$("textarea#stepcodeTextarea3152").val(newCode);
if(alreadyWriteCode3152!=code3152){
lastModifedTime3152 = new Date().getTime();
$("#rendering3152").show();
$("#rendered3152").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor3152 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor3152.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv3152").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
等下同学们自己做的时候，就一点一点的把样式放上去，观察变化，确认每个样式的用处。
完了之后，再自己从零开始，不看答案设计一遍，做出来，就可以很好的把本知识点的内容消化掉了。
不要着急，慢工出细活，花这些时间是非常值得的
");
window.frames["iframe_show3154"].document.write(decodeHtml($("textarea#stepcodeTextarea3154").val()));
window.frames["iframe_show3154"].document.close();
$(window.frames["iframe_show3154"]).load(function(){
$("#iframe_show3154").height($("#iframe_show3154").contents().find("body").height()+showittryitheight);
});
$("#iframe_show3154").height($("#iframe_show3154").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>
div.searchDiv{
background-color: #C40000;
width: 400px;
margin: 50px auto;
padding: 1px;
height: 40px;
display: block;
}
div.searchDiv input{
width: 275px;
border: 1px solid transparent;
height: 36px;
margin: 1px;
outline:none;
}
div.searchDiv button{
width: 110px;
border: 1px solid transparent;
background-color: #C40000;
color: white;
font-size: 20px;
font-weight: bold;
}
div.searchBelow{
margin-top: 3px;
margin-left: -20px;
}
div.searchBelow span{
color: #999;
}
div.searchBelow a{
padding: 0px 20px 0px 20px;
font-size: 14px;
}
img.logo{
position: absolute;
left: 0px;
top: 30px;
z-index:-1;
}
body{
font-size:12px;
font-family:Arial;
}
a{
color:#999;
}
a:hover{
text-decoration:none;
color:#C40000;
}
</style>
<div>
<a href="#nowhere"> <img class="logo" src="http://127.0.0.1/tmall../../../img/site/logo.gif"
id="logo">
</a>
<div class="searchDiv">
<input type="text" placeholder="时尚男鞋 太阳镜 " name="keyword">
<button class="searchButton" type="submit">搜索</button>
<div class="searchBelow">
<span> <a href="#nowhere"> 平衡车 </a> <span>|</span>
</span> <span> <a href="#nowhere"> 扫地机器人 </a> <span>|</span>
</span> <span> <a href="#nowhere"> 原汁机 </a> <span>|</span>
</span> <span> <a href="#nowhere"> 冰箱 </a></span>
</div>
</div>
</div>
<div style="height:50px"></div>
<!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>
div.searchDiv{
background-color: #C40000;
width: 400px;
margin: 50px auto;
padding: 1px;
height: 40px;
display: block;
}
div.searchDiv input{
width: 275px;
border: 1px solid transparent;
height: 36px;
margin: 1px;
outline:none;
}
div.searchDiv button{
width: 110px;
border: 1px solid transparent;
background-color: #C40000;
color: white;
font-size: 20px;
font-weight: bold;
}
div.searchBelow{
margin-top: 3px;
margin-left: -20px;
}
div.searchBelow span{
color: #999;
}
div.searchBelow a{
padding: 0px 20px 0px 20px;
font-size: 14px;
}
img.logo{
position: absolute;
left: 0px;
top: 30px;
z-index:-1;
}
body{
font-size:12px;
font-family:Arial;
}
a{
color:#999;
}
a:hover{
text-decoration:none;
color:#C40000;
}
</style>
<div>
<a href="#nowhere"> <img class="logo" src="http://127.0.0.1/tmall../../../img/site/logo.gif"
id="logo">
</a>
<div class="searchDiv">
<input type="text" placeholder="时尚男鞋 太阳镜 " name="keyword">
<button class="searchButton" type="submit">搜索</button>
<div class="searchBelow">
<span> <a href="#nowhere"> 平衡车 </a> <span>|</span>
</span> <span> <a href="#nowhere"> 扫地机器人 </a> <span>|</span>
</span> <span> <a href="#nowhere"> 原汁机 </a> <span>|</span>
</span> <span> <a href="#nowhere"> 冰箱 </a></span>
</div>
</div>
</div>
<div style="height:50px"></div>
");
window.frames["iframe3154"].document.write(decodeHtml(code3154));
window.frames["iframe3154"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe3154"]).load(function(){
$("#iframe3154").height($("#iframe3154").contents().find("body").height()+showittryitheight);
});
$("#iframe3154").height($("#iframe3154").contents().find("body").height()+showittryitheight);
alreadyWriteCode3154 = code3154;
$("#rendering3154").hide();
$("#rendered3154").show();
}
var tRereshRetry2DemoPanel3154 = setInterval(rereshRetry2DemoPanel3154,1000);
var binded3154 = false;
$("textarea#stepcodeTextarea3154").keyup(function(){
if(!binded3154){
$(window).bind('beforeunload',function(){
binded3154 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code3154 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code3154!=newCode){
// window.frames["iframe3154"].document.write("
");
// window.frames["iframe3154"].document.write(decodeHtml($("textarea#stepcodeTextarea3154").val()));
// window.frames["iframe3154"].document.close();
// $(window.frames["iframe3154"]).load(function(){
// $("#iframe3154").height($("#iframe3154").contents().find("body").height()+showittryitheight);
// });
// code3154 = newCode;
// }
});
$(".tryButton3154").click(function(){
$("#tryDiv3154").show();
$("#stepcodeTextarea3154").focus();
$("#stepcodeTextarea3154").height(200);
$("#iframe3154").height(0);
window.frames["iframe3154"].document.write("
");
window.frames["iframe3154"].document.write(decodeHtml($("textarea#stepcodeTextarea3154").val()));
window.frames["iframe3154"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe3154"]).load(function(){
$("#iframe3154").height($("#iframe3154").contents().find("body").height()+showittryitheight);
});
$("#iframe3154").height($("#iframe3154").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor3154.focus();
editor3154.setSize(null, "250");
$("#rendering3154").hide();
$("#rendered3154").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 editor3154 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea3154"), {
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);
}
}
});
editor3154.on("change",function(doc){
if(!binded3154){
$(window).bind('beforeunload',function(){
binded3154 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code3154 = newCode;
$("textarea#stepcodeTextarea3154").val(newCode);
if(alreadyWriteCode3154!=code3154){
lastModifedTime3154 = new Date().getTime();
$("#rendering3154").show();
$("#rendered3154").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor3154 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor3154.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv3154").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
代码高亮插件双击即可选中，不过部分同学反应，通过代码高亮插件复制的代码无法在IDEA里正常显示，这里提供TEXTAREA的方式，方便复制，谢谢
1. 自行完成练习
根据练习目标尽量自己实现代码效果，期间会碰到疑问，难题，和自己不懂的地方，这些都是必要的过程
2. 带着疑问查看答案
完成过程中，碰到无法解决的问题，带着疑问，查看答案，分析答案的解决思路
3. 查看答案讲解视频
依然有不明白的地方，点开视频讲解，带着疑问，听视频讲解有问题的部分
4. 再做一遍
理解后，再从头做一遍，把有疑问的地方都捋清楚
5. 总结
最后再总结一遍，总结思路，总结解决办法，以后遇到类似的问题，怎么处理
HOW2J公众号，关注后实时获知布最新的教程和优惠活动，谢谢。
提问之前请登陆
|
