标签：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>css</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <script type="text/javascript" src="http://luxury.bjhoutai.com/js/jquery-1.8.2.min.js"></script>
</head>
<style>
*{padding:0px; margin:0px; line-height:20px; font-family:"微软雅黑"; color:#444;font-weight:bold}
body{padding:5px 30px 0px;}
input{ width:40px;}
.blue{color:blue}
.yellow{color:yellow}
.black{color:black}
textarea{border:1px solid #000; width:80%; padding:5px; }
</style>
<body style=‘text-align:center; background:#999‘>
<span class=‘blue‘>margin</span>:<input type=‘text‘ id=‘margin‘ style=‘width:100px;‘> <span class=‘blue‘>padding</span>:<input type=‘text‘ id=‘padding‘ style=‘width:100px;‘><br><br>
<span class=‘yellow‘>margin-left</span>:<input type=‘text‘ id=‘ml‘>px <span class=‘yellow‘>margin-right</span>:<input type=‘text‘ id=‘mr‘>px <span class=‘yellow‘>margin-top</span>:<input type=‘text‘ id=‘mt‘>px <span class=‘yellow‘>margin-bottom</span>:<input type=‘text‘ id=‘mb‘>px<br><br>
<span class=‘blue‘>padding-left</span>:<input type=‘text‘ id=‘pl‘>px <span class=‘blue‘>padding-right</span>:<input type=‘text‘ id=‘pr‘>px <span class=‘blue‘>padding-top</span>:<input type=‘text‘ id=‘pt‘>px <span class=‘blue‘>padding-bottom</span>:<input type=‘text‘ id=‘pb‘>px<br><br>
<span class=‘yellow‘>width</span>:<input type=‘text‘ id=‘width‘>px <span class=‘yellow‘>height</span>:<input type=‘text‘ id=‘height‘>px <span class=‘yellow‘>line-height</span>:<input type=‘text‘ id=‘lineheight‘>px<br><br>
<span class=‘blue‘>left</span>:<input type=‘text‘ id=‘left‘>px <span class=‘blue‘>right</span>:<input type=‘text‘ id=‘right‘>px <span class=‘blue‘>top</span>:<input type=‘text‘ id=‘top‘>px <span class=‘blue‘>bottom</span>:<input type=‘text‘ id=‘bottom‘>px<br><br>
<span class=‘yellow‘>background-color</span>:#<input type=‘text‘ id=‘backgroundcolor‘>
<span class=‘yellow‘>background-image</span>:url(../images/<input type=‘text‘ id=‘backgroundimage‘>.jpg)
<span class=‘yellow‘>background-repeat</span>:<input type=‘radio‘ value=‘‘ checked name=‘background_repeat‘>空 <input type=‘radio‘ id=‘repeat-x‘ value=‘repeat-x‘ name=‘background_repeat‘>repeat-x <input type=‘radio‘ value=‘repeat-y‘ id=‘repeat-y‘ name=‘background_repeat‘>repeat-y <input type=‘radio‘ value=‘repeat‘ id=‘repeat‘ name=‘background_repeat‘>repeat<input type=‘radio‘ value=‘no-repeat‘ name=‘background_repeat‘>no-repeat<br><br>
<span class=‘blue‘>background-position</span>:<input type=‘radio‘ value=‘‘ checked name=‘background_position‘>空 <input type=‘radio‘ value=‘left top‘ name=‘background_position‘>left top <input type=‘radio‘ value=‘left bottom‘ name=‘background_position‘>left bottom <input type=‘radio‘ value=‘right top‘ id=‘repeat‘ name=‘background_position‘>right top <input type=‘radio‘ value=‘right top‘ name=‘background_position‘>right top<br><br>
<input type=‘radio‘ value=‘left center‘ name=‘background_position‘>left center <input type=‘radio‘ value=‘right center‘ name=‘background_position‘>right center <input type=‘radio‘ value=‘top center‘ id=‘repeat‘ name=‘background_position‘>top center <input type=‘radio‘ value=‘bottom center‘ name=‘background_position‘>bottom center<br><br>
<span class=‘blue‘>font-size</span>:<input type=‘text‘ id=‘fontsize‘>px <span class=‘blue‘>color</span>:#<input type=‘text‘ id=‘color‘> <span class=‘blue‘>text-indent</span>:<input type=‘text‘ id=‘textindent‘>em<br><br>
<span class=‘yellow‘>position</span>:<input type=‘radio‘ id=‘hiddenx‘ value=‘‘ checked name=‘position‘>空 <input type=‘radio‘ id=‘absolute‘ value=‘absolute‘ name=‘position‘>absolute <input type=‘radio‘ value=‘relative‘ id=‘relative‘ name=‘position‘>relative<br><br>
<span class=‘blue‘>overflow</span>:<input type=‘radio‘ id=‘hiddenx‘ value=‘‘ checked name=‘overflow‘>空 <input type=‘radio‘ id=‘hidden‘ value=‘hidden‘ name=‘overflow‘>hidden <input type=‘radio‘ value=‘auto‘ id=‘auto‘ name=‘overflow‘>auto
<span class=‘blue‘>overflow-x</span>:<input type=‘radio‘ id=‘hiddenx‘ value=‘‘ checked name=‘overflowx‘>空 <input type=‘radio‘ id=‘hiddenx‘ value=‘hidden‘ name=‘overflowx‘>hidden <input type=‘radio‘ id=‘autox‘ value=‘scroll‘ name=‘overflowx‘>scroll
<span class=‘blue‘>overflow-y</span>:<input type=‘radio‘ id=‘hiddenx‘ value=‘‘ checked name=‘overflowy‘>空 <input type=‘radio‘ id=‘hiddeny‘ value=‘hidden‘ name=‘overflowy‘>hidden <input type=‘radio‘ id=‘autoy‘ value=‘scroll‘ name=‘overflowy‘>scroll<br><br>
<span class=‘yellow‘>text-align</span>:<input type=‘radio‘ id=‘hiddenx‘ value=‘‘ checked name=‘textalign‘>空 <input type=‘radio‘ value=‘center‘ id=‘tacenter‘ name=‘textalign‘>center <input type=‘radio‘ value=‘right‘ id=‘taright‘ name=‘textalign‘>right<br><br>
<span class=‘blue‘>float</span>:<input type=‘radio‘ id=‘hiddenx‘ value=‘‘ checked name=‘float‘>空 <input type=‘radio‘ value=‘left‘ id=‘fleft‘ name=‘float‘>left <input type=‘radio‘ value=‘right‘ id=‘fright‘ name=‘float‘>right<br><br>
<span class=‘yellow‘>font-family</span>:<input type=‘radio‘ value=‘‘ checked name=‘font_family‘>空 <input type=‘radio‘ id=‘heiti‘ value=‘黑体‘ name=‘font_family‘>黑体 <input type=‘radio‘ value=‘微软雅黑‘ id=‘weiruanyahei‘ name=‘font_family‘>微软雅黑<br><br>
<span class=‘blue‘>font-weight</span>:<input type=‘radio‘ value=‘‘ checked name=‘font_weight‘>空 <input type=‘radio‘ id=‘normal‘ value=‘normal‘ name=‘font_weight‘>normal <input type=‘radio‘ value=‘blod‘ id=‘bold‘ name=‘font_weight‘>bold<br><br>
<span class=‘black‘>border</span>:<input type=‘type‘ id=‘border_w‘>px #<input type=‘type‘ id=‘border_color‘><input type=‘radio‘ checked id=‘solid‘ value=‘solid‘ name=‘border‘>solid<input type=‘radio‘ id=‘dashed‘ value=‘dashed‘ name=‘border‘>dashed <input type=‘radio‘ value=‘all‘ checked name=‘border_4‘ >all<input type=‘radio‘ value=‘top‘ name=‘border_4‘>top<input type=‘radio‘ value=‘bottom‘ name=‘border_4‘>bottom<input type=‘radio‘ value=‘left‘ name=‘border_4‘>left<input type=‘radio‘ value=‘right‘ name=‘border_4‘>right
<div style=‘clear:both;height:10px;‘></div>
<textarea id=‘resault‘></textarea>
<script language="javascript">
function replaceAll(obj,str1,str2){
var result = obj.replace(eval("/"+str1+"/gi"),str2);
return result;
}
$(document).keyup(function(event){
var text = ‘‘;
if(event.keyCode == 13) {
if($("#border_w").val()!=‘‘){
if($("#border_color").val()!=‘‘){
if($("input[name=‘border‘]:checked").val()!=‘‘){
if($("input[name=‘border_4‘]:checked").val()!=‘‘){
if($("input[name=‘border_4‘]:checked").val() == ‘all‘){
text = text + ‘border:‘ + $("#border_w").val() + ‘px #‘ + $("#border_color").val() + ‘ ‘ +$("input[name=‘border‘]:checked").val()+‘;‘;
}else if($("input[name=‘border_4‘]:checked").val() == ‘top‘){
text = text + ‘border-top:‘ + $("#border_w").val() + ‘px #‘ + $("#border_color").val() + ‘ ‘ +$("input[name=‘border‘]:checked").val()+‘;‘;
}else if($("input[name=‘border_4‘]:checked").val() == ‘bottom‘){
text = text + ‘border-bottom:‘ + $("#border_w").val() + ‘px #‘ + $("#border_color").val() + ‘ ‘ +$("input[name=‘border‘]:checked").val()+‘;‘;
}else if($("input[name=‘border_4‘]:checked").val() == ‘left‘){
text = text + ‘border-left:‘ + $("#border_w").val() + ‘px #‘ + $("#border_color").val() + ‘ ‘ +$("input[name=‘border‘]:checked").val()+‘;‘;
}else if($("input[name=‘border_4‘]:checked").val() == ‘right‘){
text = text + ‘border-right:‘ + $("#border_w").val() + ‘px #‘ + $("#border_color").val() + ‘ ‘ +$("input[name=‘border‘]:checked").val()+‘;‘;
}
}
}
}
}
var mrt={
"margin":$(‘#margin‘).val(),
"padding":$(‘#padding‘).val(),
"margin_left":$(‘#ml‘).val(),
"margin_right":$(‘#mr‘).val(),
"margin_top":$(‘#mt‘).val(),
"margin_bottom":$(‘#mb‘).val(),
"padding_left":$(‘#pl‘).val(),
"padding_right":$(‘#pr‘).val(),
"padding_top":$(‘#pt‘).val(),
"padding_bottom":$(‘#pb‘).val(),
"background_color":$(‘#backgroundcolor‘).val(),
"width":$(‘#width‘).val(),
"height":$(‘#height‘).val(),
"line_height":$(‘#lineheight‘).val(),
"background_image":$(‘#backgroundimage‘).val(),
"font_size":$(‘#fontsize‘).val(),
"color":$(‘#color‘).val(),
"text_indent":$(‘#textindent‘).val(),
"position":$("input[name=‘position‘]:checked").val(),
"font_weight":$("input[name=‘font_weight‘]:checked").val(),
"font_family":$("input[name=‘font_family‘]:checked").val(),
"overflow":$("input[name=‘overflow‘]:checked").val(),
"overflow_x":$("input[name=‘overflowx‘]:checked").val(),
"overflow_y":$("input[name=‘overflowy‘]:checked").val(),
"text_align":$("input[name=‘textalign‘]:checked").val(),
"float":$("input[name=‘float‘]:checked").val(),
"background_repeat":$("input[name=‘background_repeat‘]:checked").val(),
"background_position":$("input[name=‘background_position‘]:checked").val(),
"left":$(‘#left‘).val(),
"right":$(‘#right‘).val(),
"top":$(‘#top‘).val(),
"bottom":$(‘#bottom‘).val()
};
for(var key in mrt){
if(mrt[key] != ‘‘){
if(key == ‘background_position‘ || key == ‘background_repeat‘ || key == ‘padding‘ || key == ‘margin‘ || key == ‘float‘ || key == ‘font_weight‘ || key == ‘font_family‘ || key == ‘text_indent‘ || key == ‘position‘ || key == ‘overflow‘ || key == ‘overflow_x‘ || key == ‘overflow_y‘ || key == ‘text_align‘ || key == ‘background_image‘ || key == ‘background_color‘ || key == ‘color‘){
if(key == ‘background_image‘){
text = text+replaceAll(key,"_","-")+‘:‘+‘url(../images/‘+mrt[key]+‘.jpg);‘;
}
else if(key == ‘font_family‘){
text = text+replaceAll(key,"_","-")+‘:"‘+mrt[key]+‘";‘
}
else if(key == ‘text_indent‘){
text = text+replaceAll(key,"_","-")+‘:‘+mrt[key]+‘em;‘
}
else{text = text+replaceAll(key,"_","-")+‘:‘+mrt[key]+‘;‘}
}
else{text = text+replaceAll(key,"_","-")+‘:‘+mrt[key]+‘px;‘;}
}
}
$(‘#resault‘).html(text);
$(‘#resault‘).focus();
}
if(event.keyCode == 27) {
location.reload();
}
});
</script>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/mrt-yyy/p/4449836.html
