|
|
步骤
1
:
line-height方式
步骤
2
:
内边距方式
步骤
3
:
table方式
");
window.frames["iframe_show3074"].document.write(decodeHtml($("textarea#stepcodeTextarea3074").val()));
window.frames["iframe_show3074"].document.close();
$(window.frames["iframe_show3074"]).load(function(){
$("#iframe_show3074").height($("#iframe_show3074").contents().find("body").height()+showittryitheight);
});
$("#iframe_show3074").height($("#iframe_show3074").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<style>
#d {
line-height: 100px;
}
div{
border:solid 1px lightskyblue;
}
</style>
<div id="d">line-height 适合单独一行垂直居中</div>
<style>
#d {
line-height: 100px;
}
div{
border:solid 1px lightskyblue;
}
</style>
<div id="d">line-height 适合单独一行垂直居中</div>
");
window.frames["iframe3074"].document.write(decodeHtml(code3074));
window.frames["iframe3074"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe3074"]).load(function(){
$("#iframe3074").height($("#iframe3074").contents().find("body").height()+showittryitheight);
});
$("#iframe3074").height($("#iframe3074").contents().find("body").height()+showittryitheight);
alreadyWriteCode3074 = code3074;
$("#rendering3074").hide();
$("#rendered3074").show();
}
var tRereshRetry2DemoPanel3074 = setInterval(rereshRetry2DemoPanel3074,1000);
var binded3074 = false;
$("textarea#stepcodeTextarea3074").keyup(function(){
if(!binded3074){
$(window).bind('beforeunload',function(){
binded3074 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code3074 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code3074!=newCode){
// window.frames["iframe3074"].document.write("
");
// window.frames["iframe3074"].document.write(decodeHtml($("textarea#stepcodeTextarea3074").val()));
// window.frames["iframe3074"].document.close();
// $(window.frames["iframe3074"]).load(function(){
// $("#iframe3074").height($("#iframe3074").contents().find("body").height()+showittryitheight);
// });
// code3074 = newCode;
// }
});
$(".tryButton3074").click(function(){
$("#tryDiv3074").show();
$("#stepcodeTextarea3074").focus();
$("#stepcodeTextarea3074").height(200);
$("#iframe3074").height(0);
window.frames["iframe3074"].document.write("
");
window.frames["iframe3074"].document.write(decodeHtml($("textarea#stepcodeTextarea3074").val()));
window.frames["iframe3074"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe3074"]).load(function(){
$("#iframe3074").height($("#iframe3074").contents().find("body").height()+showittryitheight);
});
$("#iframe3074").height($("#iframe3074").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor3074.focus();
editor3074.setSize(null, "250");
$("#rendering3074").hide();
$("#rendered3074").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 editor3074 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea3074"), {
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);
}
}
});
editor3074.on("change",function(doc){
if(!binded3074){
$(window).bind('beforeunload',function(){
binded3074 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code3074 = newCode;
$("textarea#stepcodeTextarea3074").val(newCode);
if(alreadyWriteCode3074!=code3074){
lastModifedTime3074 = new Date().getTime();
$("#rendering3074").show();
$("#rendered3074").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor3074 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor3074.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv3074").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
借助设置相同的上下内边距，实现垂直居中效果，可以用在多行文本上
");
window.frames["iframe_show3077"].document.write(decodeHtml($("textarea#stepcodeTextarea3077").val()));
window.frames["iframe_show3077"].document.close();
$(window.frames["iframe_show3077"]).load(function(){
$("#iframe_show3077").height($("#iframe_show3077").contents().find("body").height()+showittryitheight);
});
$("#iframe_show3077").height($("#iframe_show3077").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<style>
#d {
padding: 30 0;
}
div{
border:solid 1px lightskyblue;
}
</style>
<div id="d">多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 </div>
<style>
#d {
padding: 30 0;
}
div{
border:solid 1px lightskyblue;
}
</style>
<div id="d">多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 </div>
");
window.frames["iframe3077"].document.write(decodeHtml(code3077));
window.frames["iframe3077"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe3077"]).load(function(){
$("#iframe3077").height($("#iframe3077").contents().find("body").height()+showittryitheight);
});
$("#iframe3077").height($("#iframe3077").contents().find("body").height()+showittryitheight);
alreadyWriteCode3077 = code3077;
$("#rendering3077").hide();
$("#rendered3077").show();
}
var tRereshRetry2DemoPanel3077 = setInterval(rereshRetry2DemoPanel3077,1000);
var binded3077 = false;
$("textarea#stepcodeTextarea3077").keyup(function(){
if(!binded3077){
$(window).bind('beforeunload',function(){
binded3077 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code3077 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code3077!=newCode){
// window.frames["iframe3077"].document.write("
");
// window.frames["iframe3077"].document.write(decodeHtml($("textarea#stepcodeTextarea3077").val()));
// window.frames["iframe3077"].document.close();
// $(window.frames["iframe3077"]).load(function(){
// $("#iframe3077").height($("#iframe3077").contents().find("body").height()+showittryitheight);
// });
// code3077 = newCode;
// }
});
$(".tryButton3077").click(function(){
$("#tryDiv3077").show();
$("#stepcodeTextarea3077").focus();
$("#stepcodeTextarea3077").height(200);
$("#iframe3077").height(0);
window.frames["iframe3077"].document.write("
");
window.frames["iframe3077"].document.write(decodeHtml($("textarea#stepcodeTextarea3077").val()));
window.frames["iframe3077"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe3077"]).load(function(){
$("#iframe3077").height($("#iframe3077").contents().find("body").height()+showittryitheight);
});
$("#iframe3077").height($("#iframe3077").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor3077.focus();
editor3077.setSize(null, "250");
$("#rendering3077").hide();
$("#rendered3077").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 editor3077 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea3077"), {
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);
}
}
});
editor3077.on("change",function(doc){
if(!binded3077){
$(window).bind('beforeunload',function(){
binded3077 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code3077 = newCode;
$("textarea#stepcodeTextarea3077").val(newCode);
if(alreadyWriteCode3077!=code3077){
lastModifedTime3077 = new Date().getTime();
$("#rendering3077").show();
$("#rendered3077").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor3077 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor3077.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv3077").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
首先通过display: table-cell;把div用单元格的形式显示，然后借用单元格的垂直居中vertical-align: middle; 来达到效果。
这样对图片也可以居中，上一步 line-height就不能对图片居中。
");
window.frames["iframe_show3075"].document.write(decodeHtml($("textarea#stepcodeTextarea3075").val()));
window.frames["iframe_show3075"].document.close();
$(window.frames["iframe_show3075"]).load(function(){
$("#iframe_show3075").height($("#iframe_show3075").contents().find("body").height()+showittryitheight);
});
$("#iframe_show3075").height($("#iframe_show3075").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<style>
#d {
display: table-cell;
vertical-align: middle;
height:200px;
}
div{
border:solid 1px lightskyblue;
}
</style>
<div id="d">
<img src="http://127.0.0.1/example.gif">
</div>
<style>
#d {
display: table-cell;
vertical-align: middle;
height:200px;
}
div{
border:solid 1px lightskyblue;
}
</style>
<div id="d">
<img src="http://127.0.0.1/example.gif">
</div>
");
window.frames["iframe3075"].document.write(decodeHtml(code3075));
window.frames["iframe3075"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe3075"]).load(function(){
$("#iframe3075").height($("#iframe3075").contents().find("body").height()+showittryitheight);
});
$("#iframe3075").height($("#iframe3075").contents().find("body").height()+showittryitheight);
alreadyWriteCode3075 = code3075;
$("#rendering3075").hide();
$("#rendered3075").show();
}
var tRereshRetry2DemoPanel3075 = setInterval(rereshRetry2DemoPanel3075,1000);
var binded3075 = false;
$("textarea#stepcodeTextarea3075").keyup(function(){
if(!binded3075){
$(window).bind('beforeunload',function(){
binded3075 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code3075 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code3075!=newCode){
// window.frames["iframe3075"].document.write("
");
// window.frames["iframe3075"].document.write(decodeHtml($("textarea#stepcodeTextarea3075").val()));
// window.frames["iframe3075"].document.close();
// $(window.frames["iframe3075"]).load(function(){
// $("#iframe3075").height($("#iframe3075").contents().find("body").height()+showittryitheight);
// });
// code3075 = newCode;
// }
});
$(".tryButton3075").click(function(){
$("#tryDiv3075").show();
$("#stepcodeTextarea3075").focus();
$("#stepcodeTextarea3075").height(200);
$("#iframe3075").height(0);
window.frames["iframe3075"].document.write("
");
window.frames["iframe3075"].document.write(decodeHtml($("textarea#stepcodeTextarea3075").val()));
window.frames["iframe3075"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe3075"]).load(function(){
$("#iframe3075").height($("#iframe3075").contents().find("body").height()+showittryitheight);
});
$("#iframe3075").height($("#iframe3075").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor3075.focus();
editor3075.setSize(null, "250");
$("#rendering3075").hide();
$("#rendered3075").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 editor3075 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea3075"), {
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);
}
}
});
editor3075.on("change",function(doc){
if(!binded3075){
$(window).bind('beforeunload',function(){
binded3075 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code3075 = newCode;
$("textarea#stepcodeTextarea3075").val(newCode);
if(alreadyWriteCode3075!=code3075){
lastModifedTime3075 = new Date().getTime();
$("#rendering3075").show();
$("#rendered3075").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor3075 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor3075.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv3075").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
代码高亮插件双击即可选中，不过部分同学反应，通过代码高亮插件复制的代码无法在IDEA里正常显示，这里提供TEXTAREA的方式，方便复制，谢谢
1. 自行完成练习
根据练习目标尽量自己实现代码效果，期间会碰到疑问，难题，和自己不懂的地方，这些都是必要的过程
2. 带着疑问查看答案
完成过程中，碰到无法解决的问题，带着疑问，查看答案，分析答案的解决思路
3. 查看答案讲解视频
依然有不明白的地方，点开视频讲解，带着疑问，听视频讲解有问题的部分
4. 再做一遍
理解后，再从头做一遍，把有疑问的地方都捋清楚
5. 总结
最后再总结一遍，总结思路，总结解决办法，以后遇到类似的问题，怎么处理
HOW2J公众号，关注后实时获知布最新的教程和优惠活动，谢谢。
提问之前请登陆
|
