|
|
| 关键字 |
简介 |
示例代码 |
|
background-color
|
背景颜色
|
示例代码
|
|
background-image:url(imagepath);
|
图片做背景
|
示例代码
|
|
url(background.jpg)
|
本地测试
|
示例代码
|
|
background-repeat
|
背景重复
|
示例代码
|
|
background-size: contain
|
背景平铺
|
示例代码
|
示例
1
:
背景颜色
示例
2
:
图片做背景
示例
3
:
本地测试
示例
4
:
背景重复
示例
5
:
背景平铺
属性名background-color 颜色的值可以采用3种方式 1. 预定义的颜色名字 比如red,gray,white,black,pink，参考 颜色速查手册2. rgb格式 分别代表红绿蓝的比例 rgb(250,0,255) 即表示红色是满的，没有绿色，蓝色是满的，即红色和蓝色混合在一起：紫色 3. 16进制的表示 #00ff00 等同于 rgb(0,255,0)
");
window.frames["iframe_show461"].document.write(decodeHtml($("textarea#stepcodeTextarea461").val()));
window.frames["iframe_show461"].document.close();
$(window.frames["iframe_show461"]).load(function(){
$("#iframe_show461").height($("#iframe_show461").contents().find("body").height()+showittryitheight);
});
$("#iframe_show461").height($("#iframe_show461").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<style>
p.gray {background-color: gray;}
h1 {background-color: transparent}
h2 {background-color: rgb(250,0,255)}
h3 {background-color: #00ff00}
</style>
<p class="gray">灰色</p>
<h1>透明背景，默认即透明背景</h1>
<h2>紫色</h2>
<h3>绿色背景</h3>
<style>
p.gray {background-color: gray;}
h1 {background-color: transparent}
h2 {background-color: rgb(250,0,255)}
h3 {background-color: #00ff00}
</style>
<p class="gray">灰色</p>
<h1>透明背景，默认即透明背景</h1>
<h2>紫色</h2>
<h3>绿色背景</h3>
");
window.frames["iframe461"].document.write(decodeHtml(code461));
window.frames["iframe461"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe461"]).load(function(){
$("#iframe461").height($("#iframe461").contents().find("body").height()+showittryitheight);
});
$("#iframe461").height($("#iframe461").contents().find("body").height()+showittryitheight);
alreadyWriteCode461 = code461;
$("#rendering461").hide();
$("#rendered461").show();
}
var tRereshRetry2DemoPanel461 = setInterval(rereshRetry2DemoPanel461,1000);
var binded461 = false;
$("textarea#stepcodeTextarea461").keyup(function(){
if(!binded461){
$(window).bind('beforeunload',function(){
binded461 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code461 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code461!=newCode){
// window.frames["iframe461"].document.write("
");
// window.frames["iframe461"].document.write(decodeHtml($("textarea#stepcodeTextarea461").val()));
// window.frames["iframe461"].document.close();
// $(window.frames["iframe461"]).load(function(){
// $("#iframe461").height($("#iframe461").contents().find("body").height()+showittryitheight);
// });
// code461 = newCode;
// }
});
$(".tryButton461").click(function(){
$("#tryDiv461").show();
$("#stepcodeTextarea461").focus();
$("#stepcodeTextarea461").height(200);
$("#iframe461").height(0);
window.frames["iframe461"].document.write("
");
window.frames["iframe461"].document.write(decodeHtml($("textarea#stepcodeTextarea461").val()));
window.frames["iframe461"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe461"]).load(function(){
$("#iframe461").height($("#iframe461").contents().find("body").height()+showittryitheight);
});
$("#iframe461").height($("#iframe461").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor461.focus();
editor461.setSize(null, "250");
$("#rendering461").hide();
$("#rendered461").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 editor461 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea461"), {
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);
}
}
});
editor461.on("change",function(doc){
if(!binded461){
$(window).bind('beforeunload',function(){
binded461 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code461 = newCode;
$("textarea#stepcodeTextarea461").val(newCode);
if(alreadyWriteCode461!=code461){
lastModifedTime461 = new Date().getTime();
$("#rendering461").show();
$("#rendered461").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor461 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor461.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv461").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
");
window.frames["iframe_show462"].document.write(decodeHtml($("textarea#stepcodeTextarea462").val()));
window.frames["iframe_show462"].document.close();
$(window.frames["iframe_show462"]).load(function(){
$("#iframe_show462").height($("#iframe_show462").contents().find("body").height()+showittryitheight);
});
$("#iframe_show462").height($("#iframe_show462").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<style>
div#test
{
background-image:url(/study/background.jpg);
width:200px;
height:100px;
}
</style>
<div id="test">
这是一个有背景图的DIV
</div>
<style>
div#test
{
background-image:url(/study/background.jpg);
width:200px;
height:100px;
}
</style>
<div id="test">
这是一个有背景图的DIV
</div>
");
window.frames["iframe462"].document.write(decodeHtml(code462));
window.frames["iframe462"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe462"]).load(function(){
$("#iframe462").height($("#iframe462").contents().find("body").height()+showittryitheight);
});
$("#iframe462").height($("#iframe462").contents().find("body").height()+showittryitheight);
alreadyWriteCode462 = code462;
$("#rendering462").hide();
$("#rendered462").show();
}
var tRereshRetry2DemoPanel462 = setInterval(rereshRetry2DemoPanel462,1000);
var binded462 = false;
$("textarea#stepcodeTextarea462").keyup(function(){
if(!binded462){
$(window).bind('beforeunload',function(){
binded462 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code462 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code462!=newCode){
// window.frames["iframe462"].document.write("
");
// window.frames["iframe462"].document.write(decodeHtml($("textarea#stepcodeTextarea462").val()));
// window.frames["iframe462"].document.close();
// $(window.frames["iframe462"]).load(function(){
// $("#iframe462").height($("#iframe462").contents().find("body").height()+showittryitheight);
// });
// code462 = newCode;
// }
});
$(".tryButton462").click(function(){
$("#tryDiv462").show();
$("#stepcodeTextarea462").focus();
$("#stepcodeTextarea462").height(200);
$("#iframe462").height(0);
window.frames["iframe462"].document.write("
");
window.frames["iframe462"].document.write(decodeHtml($("textarea#stepcodeTextarea462").val()));
window.frames["iframe462"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe462"]).load(function(){
$("#iframe462").height($("#iframe462").contents().find("body").height()+showittryitheight);
});
$("#iframe462").height($("#iframe462").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor462.focus();
editor462.setSize(null, "250");
$("#rendering462").hide();
$("#rendered462").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 editor462 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea462"), {
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);
}
}
});
editor462.on("change",function(doc){
if(!binded462){
$(window).bind('beforeunload',function(){
binded462 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code462 = newCode;
$("textarea#stepcodeTextarea462").val(newCode);
if(alreadyWriteCode462!=code462){
lastModifedTime462 = new Date().getTime();
$("#rendering462").show();
$("#rendered462").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor462 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor462.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv462").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
在本地测试的时候，请先从右侧下载图片
不要写成 background-image:url(/study/background.jpg);
而是写成 background-image:url(background.jpg);
并且把图片和html文件放在同一个目录下
background-repeat属性
值可以选
repeat; 水平垂直方向都重复
repeat-x; 只有水平方向重复
repeat-y; 只有垂直方向重复
no-repeat; 无重复
");
window.frames["iframe_show464"].document.write(decodeHtml($("textarea#stepcodeTextarea464").val()));
window.frames["iframe_show464"].document.close();
$(window.frames["iframe_show464"]).load(function(){
$("#iframe_show464").height($("#iframe_show464").contents().find("body").height()+showittryitheight);
});
$("#iframe_show464").height($("#iframe_show464").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<style>
div#norepeat
{
background-image:url(/study/background_small.jpg);
width:200px;
height:100px;
background-repeat: no-repeat;
}
div#repeat-x
{
background-image:url(/study/background_small.jpg);
width:200px;
height:100px;
background-repeat: repeat-x;
}
</style>
<div id="norepeat">
背景不重复
</div>
<div id="repeat-x">
背景水平重复
</div>
<style>
div#norepeat
{
background-image:url(/study/background_small.jpg);
width:200px;
height:100px;
background-repeat: no-repeat;
}
div#repeat-x
{
background-image:url(/study/background_small.jpg);
width:200px;
height:100px;
background-repeat: repeat-x;
}
</style>
<div id="norepeat">
背景不重复
</div>
<div id="repeat-x">
背景水平重复
</div>
");
window.frames["iframe464"].document.write(decodeHtml(code464));
window.frames["iframe464"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe464"]).load(function(){
$("#iframe464").height($("#iframe464").contents().find("body").height()+showittryitheight);
});
$("#iframe464").height($("#iframe464").contents().find("body").height()+showittryitheight);
alreadyWriteCode464 = code464;
$("#rendering464").hide();
$("#rendered464").show();
}
var tRereshRetry2DemoPanel464 = setInterval(rereshRetry2DemoPanel464,1000);
var binded464 = false;
$("textarea#stepcodeTextarea464").keyup(function(){
if(!binded464){
$(window).bind('beforeunload',function(){
binded464 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code464 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code464!=newCode){
// window.frames["iframe464"].document.write("
");
// window.frames["iframe464"].document.write(decodeHtml($("textarea#stepcodeTextarea464").val()));
// window.frames["iframe464"].document.close();
// $(window.frames["iframe464"]).load(function(){
// $("#iframe464").height($("#iframe464").contents().find("body").height()+showittryitheight);
// });
// code464 = newCode;
// }
});
$(".tryButton464").click(function(){
$("#tryDiv464").show();
$("#stepcodeTextarea464").focus();
$("#stepcodeTextarea464").height(200);
$("#iframe464").height(0);
window.frames["iframe464"].document.write("
");
window.frames["iframe464"].document.write(decodeHtml($("textarea#stepcodeTextarea464").val()));
window.frames["iframe464"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe464"]).load(function(){
$("#iframe464").height($("#iframe464").contents().find("body").height()+showittryitheight);
});
$("#iframe464").height($("#iframe464").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor464.focus();
editor464.setSize(null, "250");
$("#rendering464").hide();
$("#rendered464").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 editor464 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea464"), {
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);
}
}
});
editor464.on("change",function(doc){
if(!binded464){
$(window).bind('beforeunload',function(){
binded464 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code464 = newCode;
$("textarea#stepcodeTextarea464").val(newCode);
if(alreadyWriteCode464!=code464){
lastModifedTime464 = new Date().getTime();
$("#rendering464").show();
$("#rendered464").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor464 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor464.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv464").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
属性：background-size
值：contain
");
window.frames["iframe_show504"].document.write(decodeHtml($("textarea#stepcodeTextarea504").val()));
window.frames["iframe_show504"].document.close();
$(window.frames["iframe_show504"]).load(function(){
$("#iframe_show504").height($("#iframe_show504").contents().find("body").height()+showittryitheight);
});
$("#iframe_show504").height($("#iframe_show504").contents().find("body").height()+showittryitheight);
setTimeout(function(){
},500);
});
<style>
div#contain
{
background-image:url(/study/background_small.jpg);
width:200px;
height:100px;
background-size: contain;
}
</style>
<div id="contain">
背景平铺，通过拉伸实现，会有失真
</div>
<style>
div#contain
{
background-image:url(/study/background_small.jpg);
width:200px;
height:100px;
background-size: contain;
}
</style>
<div id="contain">
背景平铺，通过拉伸实现，会有失真
</div>
");
window.frames["iframe504"].document.write(decodeHtml(code504));
window.frames["iframe504"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe504"]).load(function(){
$("#iframe504").height($("#iframe504").contents().find("body").height()+showittryitheight);
});
$("#iframe504").height($("#iframe504").contents().find("body").height()+showittryitheight);
alreadyWriteCode504 = code504;
$("#rendering504").hide();
$("#rendered504").show();
}
var tRereshRetry2DemoPanel504 = setInterval(rereshRetry2DemoPanel504,1000);
var binded504 = false;
$("textarea#stepcodeTextarea504").keyup(function(){
if(!binded504){
$(window).bind('beforeunload',function(){
binded504 = true;
return "xxxx";
});
}
var newCode = $(this).val()
code504 = newCode;
/*below code is replaced by function rereshRetry2DemoPanel()*/
// if(code504!=newCode){
// window.frames["iframe504"].document.write("
");
// window.frames["iframe504"].document.write(decodeHtml($("textarea#stepcodeTextarea504").val()));
// window.frames["iframe504"].document.close();
// $(window.frames["iframe504"]).load(function(){
// $("#iframe504").height($("#iframe504").contents().find("body").height()+showittryitheight);
// });
// code504 = newCode;
// }
});
$(".tryButton504").click(function(){
$("#tryDiv504").show();
$("#stepcodeTextarea504").focus();
$("#stepcodeTextarea504").height(200);
$("#iframe504").height(0);
window.frames["iframe504"].document.write("
");
window.frames["iframe504"].document.write(decodeHtml($("textarea#stepcodeTextarea504").val()));
window.frames["iframe504"].document.close();
//load和下面的非load必需并存，因为如果代码用到了jquery就必须使用load的方式
$(window.frames["iframe504"]).load(function(){
$("#iframe504").height($("#iframe504").contents().find("body").height()+showittryitheight);
});
$("#iframe504").height($("#iframe504").contents().find("body").height()+showittryitheight);
this.scrollIntoView(true);
editor504.focus();
editor504.setSize(null, "250");
$("#rendering504").hide();
$("#rendered504").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 editor504 = CodeMirror.fromTextArea(document.getElementById("stepcodeTextarea504"), {
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);
}
}
});
editor504.on("change",function(doc){
if(!binded504){
$(window).bind('beforeunload',function(){
binded504 = true;
return "xxxx";
});
}
var newCode = doc.getValue();
code504 = newCode;
$("textarea#stepcodeTextarea504").val(newCode);
if(alreadyWriteCode504!=code504){
lastModifedTime504 = new Date().getTime();
$("#rendering504").show();
$("#rendered504").hide();
}
// alert(doc.getValue());
});
$(".CodeMirror").addClass("form-control");
// var editor504 = CodeMirror.fromTextArea(, {
// lineNumbers: true,
// styleActiveLine: true,
// matchBrackets: true,
// theme:"eclipse",
// });
editor504.on("change",function(doc){
// alert(doc.getValue());
});
$("#tryDiv504").hide();
});
$("div.codemirrorTips span").addClass("glyphicon glyphicon-asterisk");
1. 双击选中单词
2. 三击选中整行
3. CTRL+F 查找
4. F8 全屏编辑，再次点击恢复
|
|
渲染中
渲染完成
|
代码高亮插件双击即可选中，不过部分同学反应，通过代码高亮插件复制的代码无法在IDEA里正常显示，这里提供TEXTAREA的方式，方便复制，谢谢
1. 自行完成练习
根据练习目标尽量自己实现代码效果，期间会碰到疑问，难题，和自己不懂的地方，这些都是必要的过程
2. 带着疑问查看答案
完成过程中，碰到无法解决的问题，带着疑问，查看答案，分析答案的解决思路
3. 查看答案讲解视频
依然有不明白的地方，点开视频讲解，带着疑问，听视频讲解有问题的部分
4. 再做一遍
理解后，再从头做一遍，把有疑问的地方都捋清楚
5. 总结
最后再总结一遍，总结思路，总结解决办法，以后遇到类似的问题，怎么处理
HOW2J公众号，关注后实时获知布最新的教程和优惠活动，谢谢。
提问之前请登陆
|
