|
|
| 关键字 |
简介 |
示例代码 |
|
border-style
|
边框风格
|
示例代码
|
|
border-color
|
边框颜色
|
示例代码
|
|
border-width
|
边框宽度
|
示例代码
|
|
border
|
都放在一起
|
示例代码
|
|
border-top
|
只有一个方向有边框
|
示例代码
|
|
border-top，border-left
|
有交界的边都有边框
|
示例代码
|
div
span
|
块级元素和内联元素的边框区别
|
示例代码
|
|
练习-表格斑马线
|
示例代码
|
|
答案-表格斑马线
|
示例代码
|
|
|
练习-美人尖
|
示例代码
|
|
|
答案-美人尖
|
示例代码
|
|
|
练习-断线下划线
|
示例代码
|
|
|
答案-断线下划线
|
示例代码
|
示例
1
:
边框风格
示例
2
:
边框颜色
示例
3
:
边框宽度
示例
4
:
都放在一起
示例
5
:
只有一个方向有边框
示例
6
:
有交界的边都有边框
示例
7
:
块级元素和内联元素的边框区别
示例
8
:
练习-表格斑马线
示例
9
:
答案-表格斑马线
示例
10
:
练习-美人尖
示例
11
:
答案-美人尖
示例
12
:
练习-断线下划线
示例
13
:
答案-断线下划线
属性： border-style
solid: 实线
dotted:点状
dashed:虚线
double:双线
");
window.frames["iframe_show474"].document.write(decodeHtml($("textarea#stepcodeTextarea474").val()));
window.frames["iframe_show474"].document.close();
$(window.frames["iframe_show474"]).load(function(){
$("#iframe_show474").height($("#iframe_show474").contents().find("body").height()+showittryitheight);
});
$("#iframe_show474").height($("#iframe_show474").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<style>
.solid{
border-style:solid;
}
.dotted{
border-style:dotted;
}
.dashed{
border-style:dashed;
}
.double{
border-style:double;
}
</style>
<div> 默认无边框div </div>
<div class="solid"> 实线边框 </div><br/>
<div class="dotted"> 点状边框 </div> <br/>
<div class="dashed"> 虚线边框 </div> <br/>
<div class="double"> 双线边框 </div> <br/>
<style>
.solid{
border-style:solid;
}
.dotted{
border-style:dotted;
}
.dashed{
border-style:dashed;
}
.double{
border-style:double;
}
</style>
<div> 默认无边框div </div>
<div class="solid"> 实线边框 </div><br/>
<div class="dotted"> 点状边框 </div> <br/>
<div class="dashed"> 虚线边框 </div> <br/>
<div class="double"> 双线边框 </div> <br/>
");
window.frames["iframe474"].document.write(decodeHtml(code474));
window.frames["iframe474"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe474"]).load(function(){
$("#iframe474").height($("#iframe474").contents().find("body").height()+showittryitheight);
});
$("#iframe474").height($("#iframe474").contents().find("body").height()+showittryitheight);
alreadyWriteCode474 = code474;
$("#rendering474").hide();
$("#rendered474").show();
}
var tRereshRetry2DemoPanel474 = setInterval(rereshRetry2DemoPanel474,1000);
var binded474 = false;
$("textarea#stepcodeTextarea474").keyup(function(){
if(!binded474){
$(window).bind('beforeunload',function(){
binded474 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code474 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code474!=newCode){
// window.frames["iframe474"].document.write("
");
// window.frames["iframe474"].document.write(decodeHtml($("textarea#stepcodeTextarea474").val()));
// window.frames["iframe474"].document.close();
// $(window.frames["iframe474"]).load(function(){
// $("#iframe474").height($("#iframe474").contents().find("body").height()+showittryitheight);
// });
// code474 = newCode;
// }
});
$(".tryButton474").click(function(){
$("#tryDiv474").show();
$("#stepcodeTextarea474").focus();
$("#stepcodeTextarea474").height(200);
$("#iframe474").height(0);
window.frames["iframe474"].document.write("
");
window.frames["iframe474"].document.write(decodeHtml($("textarea#stepcodeTextarea474").val()));
window.frames["iframe474"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe474"]).load(function(){
$("#iframe474").height($("#iframe474").contents().find("body").height()+showittryitheight);
});
$("#iframe474").height($("#iframe474").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor474.focus();
editor474.setSize(null, "250");
$("#rendering474").hide();
$("#rendered474").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 editor474 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea474"), {
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);
}
}
});
editor474.on("change",function(doc){
if(!binded474){
$(window).bind('beforeunload',function(){
binded474 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code474 = newCode;
$("textarea#stepcodeTextarea474").val(newCode);
if(alreadyWriteCode474!=code474){
lastModifedTime474 = new Date().getTime();
$("#rendering474").show();
$("#rendered474").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor474 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor474.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv474").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
属性：border-color
值：red,#ff0000,rgb(255,0,0)
");
window.frames["iframe_show475"].document.write(decodeHtml($("textarea#stepcodeTextarea475").val()));
window.frames["iframe_show475"].document.close();
$(window.frames["iframe_show475"]).load(function(){
$("#iframe_show475").height($("#iframe_show475").contents().find("body").height()+showittryitheight);
});
$("#iframe_show475").height($("#iframe_show475").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<style>
.red{
border-style:solid;
border-color:red;
}
</style>
<div> 默认无边框div </div>
<div class="red"> 实线红色边框 </div><br/>
<style>
.red{
border-style:solid;
border-color:red;
}
</style>
<div> 默认无边框div </div>
<div class="red"> 实线红色边框 </div><br/>
");
window.frames["iframe475"].document.write(decodeHtml(code475));
window.frames["iframe475"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe475"]).load(function(){
$("#iframe475").height($("#iframe475").contents().find("body").height()+showittryitheight);
});
$("#iframe475").height($("#iframe475").contents().find("body").height()+showittryitheight);
alreadyWriteCode475 = code475;
$("#rendering475").hide();
$("#rendered475").show();
}
var tRereshRetry2DemoPanel475 = setInterval(rereshRetry2DemoPanel475,1000);
var binded475 = false;
$("textarea#stepcodeTextarea475").keyup(function(){
if(!binded475){
$(window).bind('beforeunload',function(){
binded475 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code475 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code475!=newCode){
// window.frames["iframe475"].document.write("
");
// window.frames["iframe475"].document.write(decodeHtml($("textarea#stepcodeTextarea475").val()));
// window.frames["iframe475"].document.close();
// $(window.frames["iframe475"]).load(function(){
// $("#iframe475").height($("#iframe475").contents().find("body").height()+showittryitheight);
// });
// code475 = newCode;
// }
});
$(".tryButton475").click(function(){
$("#tryDiv475").show();
$("#stepcodeTextarea475").focus();
$("#stepcodeTextarea475").height(200);
$("#iframe475").height(0);
window.frames["iframe475"].document.write("
");
window.frames["iframe475"].document.write(decodeHtml($("textarea#stepcodeTextarea475").val()));
window.frames["iframe475"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe475"]).load(function(){
$("#iframe475").height($("#iframe475").contents().find("body").height()+showittryitheight);
});
$("#iframe475").height($("#iframe475").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor475.focus();
editor475.setSize(null, "250");
$("#rendering475").hide();
$("#rendered475").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 editor475 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea475"), {
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);
}
}
});
editor475.on("change",function(doc){
if(!binded475){
$(window).bind('beforeunload',function(){
binded475 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code475 = newCode;
$("textarea#stepcodeTextarea475").val(newCode);
if(alreadyWriteCode475!=code475){
lastModifedTime475 = new Date().getTime();
$("#rendering475").show();
$("#rendered475").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor475 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor475.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv475").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
");
window.frames["iframe_show476"].document.write(decodeHtml($("textarea#stepcodeTextarea476").val()));
window.frames["iframe_show476"].document.close();
$(window.frames["iframe_show476"]).load(function(){
$("#iframe_show476").height($("#iframe_show476").contents().find("body").height()+showittryitheight);
});
$("#iframe_show476").height($("#iframe_show476").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<style>
.red{
border-style:solid;
border-color:red;
border-width:1px;
}
.default{
border-style:solid;
border-color:red;
}
</style>
<div> 默认无边框div </div>
<div class="red"> 实线红色细边框 </div><br/>
<div class="default"> 实线红色默认宽度边框 </div><br/>
<style>
.red{
border-style:solid;
border-color:red;
border-width:1px;
}
.default{
border-style:solid;
border-color:red;
}
</style>
<div> 默认无边框div </div>
<div class="red"> 实线红色细边框 </div><br/>
<div class="default"> 实线红色默认宽度边框 </div><br/>
");
window.frames["iframe476"].document.write(decodeHtml(code476));
window.frames["iframe476"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe476"]).load(function(){
$("#iframe476").height($("#iframe476").contents().find("body").height()+showittryitheight);
});
$("#iframe476").height($("#iframe476").contents().find("body").height()+showittryitheight);
alreadyWriteCode476 = code476;
$("#rendering476").hide();
$("#rendered476").show();
}
var tRereshRetry2DemoPanel476 = setInterval(rereshRetry2DemoPanel476,1000);
var binded476 = false;
$("textarea#stepcodeTextarea476").keyup(function(){
if(!binded476){
$(window).bind('beforeunload',function(){
binded476 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code476 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code476!=newCode){
// window.frames["iframe476"].document.write("
");
// window.frames["iframe476"].document.write(decodeHtml($("textarea#stepcodeTextarea476").val()));
// window.frames["iframe476"].document.close();
// $(window.frames["iframe476"]).load(function(){
// $("#iframe476").height($("#iframe476").contents().find("body").height()+showittryitheight);
// });
// code476 = newCode;
// }
});
$(".tryButton476").click(function(){
$("#tryDiv476").show();
$("#stepcodeTextarea476").focus();
$("#stepcodeTextarea476").height(200);
$("#iframe476").height(0);
window.frames["iframe476"].document.write("
");
window.frames["iframe476"].document.write(decodeHtml($("textarea#stepcodeTextarea476").val()));
window.frames["iframe476"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe476"]).load(function(){
$("#iframe476").height($("#iframe476").contents().find("body").height()+showittryitheight);
});
$("#iframe476").height($("#iframe476").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor476.focus();
editor476.setSize(null, "250");
$("#rendering476").hide();
$("#rendered476").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 editor476 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea476"), {
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);
}
}
});
editor476.on("change",function(doc){
if(!binded476){
$(window).bind('beforeunload',function(){
binded476 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code476 = newCode;
$("textarea#stepcodeTextarea476").val(newCode);
if(alreadyWriteCode476!=code476){
lastModifedTime476 = new Date().getTime();
$("#rendering476").show();
$("#rendered476").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor476 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor476.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv476").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
");
window.frames["iframe_show477"].document.write(decodeHtml($("textarea#stepcodeTextarea477").val()));
window.frames["iframe_show477"].document.close();
$(window.frames["iframe_show477"]).load(function(){
$("#iframe_show477").height($("#iframe_show477").contents().find("body").height()+showittryitheight);
});
$("#iframe_show477").height($("#iframe_show477").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<style>
.red{
border:1px dotted LightSkyBlue;
}
</style>
<div> 默认无边框div </div>
<div class="red"> 点状天蓝色细边框 </div><br/>
<style>
.red{
border:1px dotted LightSkyBlue;
}
</style>
<div> 默认无边框div </div>
<div class="red"> 点状天蓝色细边框 </div><br/>
");
window.frames["iframe477"].document.write(decodeHtml(code477));
window.frames["iframe477"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe477"]).load(function(){
$("#iframe477").height($("#iframe477").contents().find("body").height()+showittryitheight);
});
$("#iframe477").height($("#iframe477").contents().find("body").height()+showittryitheight);
alreadyWriteCode477 = code477;
$("#rendering477").hide();
$("#rendered477").show();
}
var tRereshRetry2DemoPanel477 = setInterval(rereshRetry2DemoPanel477,1000);
var binded477 = false;
$("textarea#stepcodeTextarea477").keyup(function(){
if(!binded477){
$(window).bind('beforeunload',function(){
binded477 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code477 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code477!=newCode){
// window.frames["iframe477"].document.write("
");
// window.frames["iframe477"].document.write(decodeHtml($("textarea#stepcodeTextarea477").val()));
// window.frames["iframe477"].document.close();
// $(window.frames["iframe477"]).load(function(){
// $("#iframe477").height($("#iframe477").contents().find("body").height()+showittryitheight);
// });
// code477 = newCode;
// }
});
$(".tryButton477").click(function(){
$("#tryDiv477").show();
$("#stepcodeTextarea477").focus();
$("#stepcodeTextarea477").height(200);
$("#iframe477").height(0);
window.frames["iframe477"].document.write("
");
window.frames["iframe477"].document.write(decodeHtml($("textarea#stepcodeTextarea477").val()));
window.frames["iframe477"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe477"]).load(function(){
$("#iframe477").height($("#iframe477").contents().find("body").height()+showittryitheight);
});
$("#iframe477").height($("#iframe477").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor477.focus();
editor477.setSize(null, "250");
$("#rendering477").hide();
$("#rendered477").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 editor477 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea477"), {
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);
}
}
});
editor477.on("change",function(doc){
if(!binded477){
$(window).bind('beforeunload',function(){
binded477 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code477 = newCode;
$("textarea#stepcodeTextarea477").val(newCode);
if(alreadyWriteCode477!=code477){
lastModifedTime477 = new Date().getTime();
$("#rendering477").show();
$("#rendered477").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor477 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor477.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv477").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
通过制定位置，可以只给一个方向设置边框风格，颜色和宽度
border-top-style:solid;
border-top-color:red;
border-top-width: 50px;
top,bottom,left,right 分别对应上下左右
");
window.frames["iframe_show3084"].document.write(decodeHtml($("textarea#stepcodeTextarea3084").val()));
window.frames["iframe_show3084"].document.close();
$(window.frames["iframe_show3084"]).load(function(){
$("#iframe_show3084").height($("#iframe_show3084").contents().find("body").height()+showittryitheight);
});
$("#iframe_show3084").height($("#iframe_show3084").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<style>
div{
width:150px;
height:150px;
border-top-style:solid;
border-top-color:red;
border-top-width: 50px;
background-color:lightgray;
}
</style>
<div>
只有上面有边框
</div>
<style>
div{
width:150px;
height:150px;
border-top-style:solid;
border-top-color:red;
border-top-width: 50px;
background-color:lightgray;
}
</style>
<div>
只有上面有边框
</div>
");
window.frames["iframe3084"].document.write(decodeHtml(code3084));
window.frames["iframe3084"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe3084"]).load(function(){
$("#iframe3084").height($("#iframe3084").contents().find("body").height()+showittryitheight);
});
$("#iframe3084").height($("#iframe3084").contents().find("body").height()+showittryitheight);
alreadyWriteCode3084 = code3084;
$("#rendering3084").hide();
$("#rendered3084").show();
}
var tRereshRetry2DemoPanel3084 = setInterval(rereshRetry2DemoPanel3084,1000);
var binded3084 = false;
$("textarea#stepcodeTextarea3084").keyup(function(){
if(!binded3084){
$(window).bind('beforeunload',function(){
binded3084 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code3084 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code3084!=newCode){
// window.frames["iframe3084"].document.write("
");
// window.frames["iframe3084"].document.write(decodeHtml($("textarea#stepcodeTextarea3084").val()));
// window.frames["iframe3084"].document.close();
// $(window.frames["iframe3084"]).load(function(){
// $("#iframe3084").height($("#iframe3084").contents().find("body").height()+showittryitheight);
// });
// code3084 = newCode;
// }
});
$(".tryButton3084").click(function(){
$("#tryDiv3084").show();
$("#stepcodeTextarea3084").focus();
$("#stepcodeTextarea3084").height(200);
$("#iframe3084").height(0);
window.frames["iframe3084"].document.write("
");
window.frames["iframe3084"].document.write(decodeHtml($("textarea#stepcodeTextarea3084").val()));
window.frames["iframe3084"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe3084"]).load(function(){
$("#iframe3084").height($("#iframe3084").contents().find("body").height()+showittryitheight);
});
$("#iframe3084").height($("#iframe3084").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor3084.focus();
editor3084.setSize(null, "250");
$("#rendering3084").hide();
$("#rendered3084").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 editor3084 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea3084"), {
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);
}
}
});
editor3084.on("change",function(doc){
if(!binded3084){
$(window).bind('beforeunload',function(){
binded3084 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code3084 = newCode;
$("textarea#stepcodeTextarea3084").val(newCode);
if(alreadyWriteCode3084!=code3084){
lastModifedTime3084 = new Date().getTime();
$("#rendering3084").show();
$("#rendered3084").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor3084 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor3084.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv3084").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
比如上和左就是有交界的，而上和下就没有交界
当有交界的边同时出现边框的时候，就会以倾斜的形式表现交界线。
");
window.frames["iframe_show3085"].document.write(decodeHtml($("textarea#stepcodeTextarea3085").val()));
window.frames["iframe_show3085"].document.close();
$(window.frames["iframe_show3085"]).load(function(){
$("#iframe_show3085").height($("#iframe_show3085").contents().find("body").height()+showittryitheight);
});
$("#iframe_show3085").height($("#iframe_show3085").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<style>
div.lefttop{
width:150px;
height:150px;
border-top-style:solid;
border-top-color:red;
border-top-width: 50px;
border-left-style:solid;
border-left-color:blue;
border-left-width: 50px;
background-color:lightgray;
}
div.alldirection{
width:150px;
height:150px;
border-top-style:solid;
border-top-color:red;
border-top-width: 50px;
border-left-style:solid;
border-left-color:blue;
border-left-width: 50px;
border-bottom-style:solid;
border-bottom-color:green;
border-bottom-width: 50px;
border-right-style:solid;
border-right-color:yellow;
border-right-width: 50px;
background-color:lightgray;
}
</style>
<div class="lefttop">
左边和上边都有边框
</div>
<br>
<div class="alldirection">
四边都有边框
</div>
<style>
div.lefttop{
width:150px;
height:150px;
border-top-style:solid;
border-top-color:red;
border-top-width: 50px;
border-left-style:solid;
border-left-color:blue;
border-left-width: 50px;
background-color:lightgray;
}
div.alldirection{
width:150px;
height:150px;
border-top-style:solid;
border-top-color:red;
border-top-width: 50px;
border-left-style:solid;
border-left-color:blue;
border-left-width: 50px;
border-bottom-style:solid;
border-bottom-color:green;
border-bottom-width: 50px;
border-right-style:solid;
border-right-color:yellow;
border-right-width: 50px;
background-color:lightgray;
}
</style>
<div class="lefttop">
左边和上边都有边框
</div>
<br>
<div class="alldirection">
四边都有边框
</div>
");
window.frames["iframe3085"].document.write(decodeHtml(code3085));
window.frames["iframe3085"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe3085"]).load(function(){
$("#iframe3085").height($("#iframe3085").contents().find("body").height()+showittryitheight);
});
$("#iframe3085").height($("#iframe3085").contents().find("body").height()+showittryitheight);
alreadyWriteCode3085 = code3085;
$("#rendering3085").hide();
$("#rendered3085").show();
}
var tRereshRetry2DemoPanel3085 = setInterval(rereshRetry2DemoPanel3085,1000);
var binded3085 = false;
$("textarea#stepcodeTextarea3085").keyup(function(){
if(!binded3085){
$(window).bind('beforeunload',function(){
binded3085 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code3085 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code3085!=newCode){
// window.frames["iframe3085"].document.write("
");
// window.frames["iframe3085"].document.write(decodeHtml($("textarea#stepcodeTextarea3085").val()));
// window.frames["iframe3085"].document.close();
// $(window.frames["iframe3085"]).load(function(){
// $("#iframe3085").height($("#iframe3085").contents().find("body").height()+showittryitheight);
// });
// code3085 = newCode;
// }
});
$(".tryButton3085").click(function(){
$("#tryDiv3085").show();
$("#stepcodeTextarea3085").focus();
$("#stepcodeTextarea3085").height(200);
$("#iframe3085").height(0);
window.frames["iframe3085"].document.write("
");
window.frames["iframe3085"].document.write(decodeHtml($("textarea#stepcodeTextarea3085").val()));
window.frames["iframe3085"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe3085"]).load(function(){
$("#iframe3085").height($("#iframe3085").contents().find("body").height()+showittryitheight);
});
$("#iframe3085").height($("#iframe3085").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor3085.focus();
editor3085.setSize(null, "250");
$("#rendering3085").hide();
$("#rendered3085").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 editor3085 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea3085"), {
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);
}
}
});
editor3085.on("change",function(doc){
if(!binded3085){
$(window).bind('beforeunload',function(){
binded3085 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code3085 = newCode;
$("textarea#stepcodeTextarea3085").val(newCode);
if(alreadyWriteCode3085!=code3085){
lastModifedTime3085 = new Date().getTime();
$("#rendering3085").show();
$("#rendered3085").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor3085 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor3085.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv3085").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
示例
7
:
块级元素和内联元素的边框区别
顶
折
可以看到，块级元素div默认是占用100%的宽度
常见的块级元素有div h1 p 等
而内联元素span的宽度由其内容的宽度决定
常见的内联元素有 a b strong i input 等
");
window.frames["iframe_show478"].document.write(decodeHtml($("textarea#stepcodeTextarea478").val()));
window.frames["iframe_show478"].document.close();
$(window.frames["iframe_show478"]).load(function(){
$("#iframe_show478").height($("#iframe_show478").contents().find("body").height()+showittryitheight);
});
$("#iframe_show478").height($("#iframe_show478").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<style>
.red{
border:1px solid red;
}
</style>
<div> 默认无边框div </div>
<div class="red"> 实线红色细边框 </div><br/>
<span class="red"> 实线红色细边框 </span><br/>
<style>
.red{
border:1px solid red;
}
</style>
<div> 默认无边框div </div>
<div class="red"> 实线红色细边框 </div><br/>
<span class="red"> 实线红色细边框 </span><br/>
");
window.frames["iframe478"].document.write(decodeHtml(code478));
window.frames["iframe478"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe478"]).load(function(){
$("#iframe478").height($("#iframe478").contents().find("body").height()+showittryitheight);
});
$("#iframe478").height($("#iframe478").contents().find("body").height()+showittryitheight);
alreadyWriteCode478 = code478;
$("#rendering478").hide();
$("#rendered478").show();
}
var tRereshRetry2DemoPanel478 = setInterval(rereshRetry2DemoPanel478,1000);
var binded478 = false;
$("textarea#stepcodeTextarea478").keyup(function(){
if(!binded478){
$(window).bind('beforeunload',function(){
binded478 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code478 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code478!=newCode){
// window.frames["iframe478"].document.write("
");
// window.frames["iframe478"].document.write(decodeHtml($("textarea#stepcodeTextarea478").val()));
// window.frames["iframe478"].document.close();
// $(window.frames["iframe478"]).load(function(){
// $("#iframe478").height($("#iframe478").contents().find("body").height()+showittryitheight);
// });
// code478 = newCode;
// }
});
$(".tryButton478").click(function(){
$("#tryDiv478").show();
$("#stepcodeTextarea478").focus();
$("#stepcodeTextarea478").height(200);
$("#iframe478").height(0);
window.frames["iframe478"].document.write("
");
window.frames["iframe478"].document.write(decodeHtml($("textarea#stepcodeTextarea478").val()));
window.frames["iframe478"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe478"]).load(function(){
$("#iframe478").height($("#iframe478").contents().find("body").height()+showittryitheight);
});
$("#iframe478").height($("#iframe478").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor478.focus();
editor478.setSize(null, "250");
$("#rendering478").hide();
$("#rendered478").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 editor478 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea478"), {
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);
}
}
});
editor478.on("change",function(doc){
if(!binded478){
$(window).bind('beforeunload',function(){
binded478 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code478 = newCode;
$("textarea#stepcodeTextarea478").val(newCode);
if(alreadyWriteCode478!=code478){
lastModifedTime478 = new Date().getTime();
$("#rendering478").show();
$("#rendered478").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor478 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor478.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv478").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
");
window.frames["iframe_show2939"].document.write(decodeHtml($("textarea#stepcodeTextarea2939").val()));
window.frames["iframe_show2939"].document.close();
$(window.frames["iframe_show2939"]).load(function(){
$("#iframe_show2939").height($("#iframe_show2939").contents().find("body").height()+showittryitheight);
});
$("#iframe_show2939").height($("#iframe_show2939").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<style>
table{
border-collapse:collapse;
width:90%;
}
tr.odd{
background-color:#f8f8f8;
}
tr.head{
border-bottom-width: 2px;
}
tr{
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: lightgray;
height:35px;
}
td{
width:25%;
text-align:center;
}
</style>
<table>
<tr class="head">
<td>id</td>
<td>名称</td>
<td>血量</td>
<td>伤害</td>
</tr>
<tr class="odd">
<td>1</td>
<td>gareen</td>
<td>340</td>
<td>58</td>
</tr>
<tr class="even">
<td>2</td>
<td>teemo</td>
<td>320</td>
<td>76</td>
</tr>
<tr class="odd">
<td>3</td>
<td>annie</td>
<td>380</td>
<td>38</td>
</tr>
<tr class="even">
<td>4</td>
<td>deadbrother</td>
<td>400</td>
<td>90</td>
</tr>
</table>
<style>
table{
border-collapse:collapse;
width:90%;
}
tr.odd{
background-color:#f8f8f8;
}
tr.head{
border-bottom-width: 2px;
}
tr{
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: lightgray;
height:35px;
}
td{
width:25%;
text-align:center;
}
</style>
<table>
<tr class="head">
<td>id</td>
<td>名称</td>
<td>血量</td>
<td>伤害</td>
</tr>
<tr class="odd">
<td>1</td>
<td>gareen</td>
<td>340</td>
<td>58</td>
</tr>
<tr class="even">
<td>2</td>
<td>teemo</td>
<td>320</td>
<td>76</td>
</tr>
<tr class="odd">
<td>3</td>
<td>annie</td>
<td>380</td>
<td>38</td>
</tr>
<tr class="even">
<td>4</td>
<td>deadbrother</td>
<td>400</td>
<td>90</td>
</tr>
</table>
");
window.frames["iframe2939"].document.write(decodeHtml(code2939));
window.frames["iframe2939"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2939"]).load(function(){
$("#iframe2939").height($("#iframe2939").contents().find("body").height()+showittryitheight);
});
$("#iframe2939").height($("#iframe2939").contents().find("body").height()+showittryitheight);
alreadyWriteCode2939 = code2939;
$("#rendering2939").hide();
$("#rendered2939").show();
}
var tRereshRetry2DemoPanel2939 = setInterval(rereshRetry2DemoPanel2939,1000);
var binded2939 = false;
$("textarea#stepcodeTextarea2939").keyup(function(){
if(!binded2939){
$(window).bind('beforeunload',function(){
binded2939 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code2939 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code2939!=newCode){
// window.frames["iframe2939"].document.write("
");
// window.frames["iframe2939"].document.write(decodeHtml($("textarea#stepcodeTextarea2939").val()));
// window.frames["iframe2939"].document.close();
// $(window.frames["iframe2939"]).load(function(){
// $("#iframe2939").height($("#iframe2939").contents().find("body").height()+showittryitheight);
// });
// code2939 = newCode;
// }
});
$(".tryButton2939").click(function(){
$("#tryDiv2939").show();
$("#stepcodeTextarea2939").focus();
$("#stepcodeTextarea2939").height(200);
$("#iframe2939").height(0);
window.frames["iframe2939"].document.write("
");
window.frames["iframe2939"].document.write(decodeHtml($("textarea#stepcodeTextarea2939").val()));
window.frames["iframe2939"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe2939"]).load(function(){
$("#iframe2939").height($("#iframe2939").contents().find("body").height()+showittryitheight);
});
$("#iframe2939").height($("#iframe2939").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor2939.focus();
editor2939.setSize(null, "250");
$("#rendering2939").hide();
$("#rendered2939").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 editor2939 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea2939"), {
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);
}
}
});
editor2939.on("change",function(doc){
if(!binded2939){
$(window).bind('beforeunload',function(){
binded2939 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code2939 = newCode;
$("textarea#stepcodeTextarea2939").val(newCode);
if(alreadyWriteCode2939!=code2939){
lastModifedTime2939 = new Date().getTime();
$("#rendering2939").show();
$("#rendered2939").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor2939 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor2939.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv2939").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
请先登录
在查看答案前，尽量先自己完成，碰到问题再来查看答案，收获会更多
");
window.frames["iframe_show3086"].document.write(decodeHtml($("textarea#stepcodeTextarea3086").val()));
window.frames["iframe_show3086"].document.close();
$(window.frames["iframe_show3086"]).load(function(){
$("#iframe_show3086").height($("#iframe_show3086").contents().find("body").height()+showittryitheight);
});
$("#iframe_show3086").height($("#iframe_show3086").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<style>
div{
width:0px;
height:0px;
border-top-style:solid;
border-top-color:red;
border-top-width: 10px;
border-left-style:solid;
border-left-color:white;
border-left-width: 10px;
border-bottom-style:solid;
border-bottom-color:white;
border-bottom-width: 10px;
border-right-style:solid;
border-right-color:white;
border-right-width: 10px;
}
</style>
<div >
</div>
<style>
div{
width:0px;
height:0px;
border-top-style:solid;
border-top-color:red;
border-top-width: 10px;
border-left-style:solid;
border-left-color:white;
border-left-width: 10px;
border-bottom-style:solid;
border-bottom-color:white;
border-bottom-width: 10px;
border-right-style:solid;
border-right-color:white;
border-right-width: 10px;
}
</style>
<div >
</div>
");
window.frames["iframe3086"].document.write(decodeHtml(code3086));
window.frames["iframe3086"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe3086"]).load(function(){
$("#iframe3086").height($("#iframe3086").contents().find("body").height()+showittryitheight);
});
$("#iframe3086").height($("#iframe3086").contents().find("body").height()+showittryitheight);
alreadyWriteCode3086 = code3086;
$("#rendering3086").hide();
$("#rendered3086").show();
}
var tRereshRetry2DemoPanel3086 = setInterval(rereshRetry2DemoPanel3086,1000);
var binded3086 = false;
$("textarea#stepcodeTextarea3086").keyup(function(){
if(!binded3086){
$(window).bind('beforeunload',function(){
binded3086 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code3086 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code3086!=newCode){
// window.frames["iframe3086"].document.write("
");
// window.frames["iframe3086"].document.write(decodeHtml($("textarea#stepcodeTextarea3086").val()));
// window.frames["iframe3086"].document.close();
// $(window.frames["iframe3086"]).load(function(){
// $("#iframe3086").height($("#iframe3086").contents().find("body").height()+showittryitheight);
// });
// code3086 = newCode;
// }
});
$(".tryButton3086").click(function(){
$("#tryDiv3086").show();
$("#stepcodeTextarea3086").focus();
$("#stepcodeTextarea3086").height(200);
$("#iframe3086").height(0);
window.frames["iframe3086"].document.write("
");
window.frames["iframe3086"].document.write(decodeHtml($("textarea#stepcodeTextarea3086").val()));
window.frames["iframe3086"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe3086"]).load(function(){
$("#iframe3086").height($("#iframe3086").contents().find("body").height()+showittryitheight);
});
$("#iframe3086").height($("#iframe3086").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor3086.focus();
editor3086.setSize(null, "250");
$("#rendering3086").hide();
$("#rendered3086").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 editor3086 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea3086"), {
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);
}
}
});
editor3086.on("change",function(doc){
if(!binded3086){
$(window).bind('beforeunload',function(){
binded3086 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code3086 = newCode;
$("textarea#stepcodeTextarea3086").val(newCode);
if(alreadyWriteCode3086!=code3086){
lastModifedTime3086 = new Date().getTime();
$("#rendering3086").show();
$("#rendered3086").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor3086 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor3086.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv3086").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
请先登录
在查看答案前，尽量先自己完成，碰到问题再来查看答案，收获会更多
");
window.frames["iframe_show3091"].document.write(decodeHtml($("textarea#stepcodeTextarea3091").val()));
window.frames["iframe_show3091"].document.close();
$(window.frames["iframe_show3091"]).load(function(){
$("#iframe_show3091").height($("#iframe_show3091").contents().find("body").height()+showittryitheight);
});
$("#iframe_show3091").height($("#iframe_show3091").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<style>
table{
width:100%;
}
table td{
text-align:center;
}
table tr.rowborder td{
background-color: #b2d1ff;
border-right: 2px solid #fff;
height: 3px;
}
</style>
<table>
<tr>
<td>商品</td>
<td>数量</td>
<td>价格</td>
<td>小记</td>
</tr>
<tr class="rowborder">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<style>
table{
width:100%;
}
table td{
text-align:center;
}
table tr.rowborder td{
background-color: #b2d1ff;
border-right: 2px solid #fff;
height: 3px;
}
</style>
<table>
<tr>
<td>商品</td>
<td>数量</td>
<td>价格</td>
<td>小记</td>
</tr>
<tr class="rowborder">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
");
window.frames["iframe3091"].document.write(decodeHtml(code3091));
window.frames["iframe3091"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe3091"]).load(function(){
$("#iframe3091").height($("#iframe3091").contents().find("body").height()+showittryitheight);
});
$("#iframe3091").height($("#iframe3091").contents().find("body").height()+showittryitheight);
alreadyWriteCode3091 = code3091;
$("#rendering3091").hide();
$("#rendered3091").show();
}
var tRereshRetry2DemoPanel3091 = setInterval(rereshRetry2DemoPanel3091,1000);
var binded3091 = false;
$("textarea#stepcodeTextarea3091").keyup(function(){
if(!binded3091){
$(window).bind('beforeunload',function(){
binded3091 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code3091 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code3091!=newCode){
// window.frames["iframe3091"].document.write("
");
// window.frames["iframe3091"].document.write(decodeHtml($("textarea#stepcodeTextarea3091").val()));
// window.frames["iframe3091"].document.close();
// $(window.frames["iframe3091"]).load(function(){
// $("#iframe3091").height($("#iframe3091").contents().find("body").height()+showittryitheight);
// });
// code3091 = newCode;
// }
});
$(".tryButton3091").click(function(){
$("#tryDiv3091").show();
$("#stepcodeTextarea3091").focus();
$("#stepcodeTextarea3091").height(200);
$("#iframe3091").height(0);
window.frames["iframe3091"].document.write("
");
window.frames["iframe3091"].document.write(decodeHtml($("textarea#stepcodeTextarea3091").val()));
window.frames["iframe3091"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe3091"]).load(function(){
$("#iframe3091").height($("#iframe3091").contents().find("body").height()+showittryitheight);
});
$("#iframe3091").height($("#iframe3091").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor3091.focus();
editor3091.setSize(null, "250");
$("#rendering3091").hide();
$("#rendered3091").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 editor3091 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea3091"), {
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);
}
}
});
editor3091.on("change",function(doc){
if(!binded3091){
$(window).bind('beforeunload',function(){
binded3091 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code3091 = newCode;
$("textarea#stepcodeTextarea3091").val(newCode);
if(alreadyWriteCode3091!=code3091){
lastModifedTime3091 = new Date().getTime();
$("#rendering3091").show();
$("#rendered3091").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor3091 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor3091.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv3091").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
请先登录
在查看答案前，尽量先自己完成，碰到问题再来查看答案，收获会更多
代码高亮插件双击即可选中，不过部分同学反应，通过代码高亮插件复制的代码无法在IDEA里正常显示，这里提供TEXTAREA的方式，方便复制，谢谢
1. 自行完成练习
根据练习目标尽量自己实现代码效果，期间会碰到疑问，难题，和自己不懂的地方，这些都是必要的过程
2. 带着疑问查看答案
完成过程中，碰到无法解决的问题，带着疑问，查看答案，分析答案的解决思路
3. 查看答案讲解视频
依然有不明白的地方，点开视频讲解，带着疑问，听视频讲解有问题的部分
4. 再做一遍
理解后，再从头做一遍，把有疑问的地方都捋清楚
5. 总结
最后再总结一遍，总结思路，总结解决办法，以后遇到类似的问题，怎么处理
HOW2J公众号，关注后实时获知布最新的教程和优惠活动，谢谢。
提问之前请登陆
|
Or
姿势不对,事倍功半!