CSS js

<!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;‘>&nbsp;&nbsp;<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&nbsp;&nbsp;<span class=‘yellow‘>margin-right</span>:<input type=‘text‘ id=‘mr‘>px&nbsp;&nbsp;<span class=‘yellow‘>margin-top</span>:<input type=‘text‘ id=‘mt‘>px&nbsp;&nbsp;<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&nbsp;&nbsp;<span class=‘blue‘>padding-right</span>:<input type=‘text‘ id=‘pr‘>px&nbsp;&nbsp;<span class=‘blue‘>padding-top</span>:<input type=‘text‘ id=‘pt‘>px&nbsp;&nbsp;<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&nbsp;&nbsp;<span class=‘yellow‘>height</span>:<input type=‘text‘ id=‘height‘>px&nbsp;&nbsp;<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&nbsp;&nbsp;<span class=‘blue‘>right</span>:<input type=‘text‘ id=‘right‘>px&nbsp;&nbsp;<span class=‘blue‘>top</span>:<input type=‘text‘ id=‘top‘>px&nbsp;&nbsp;<span class=‘blue‘>bottom</span>:<input type=‘text‘ id=‘bottom‘>px<br><br>  

<span class=‘yellow‘>background-color</span>:#<input type=‘text‘ id=‘backgroundcolor‘>&nbsp;&nbsp; 

<span class=‘yellow‘>background-image</span>:url(../images/<input type=‘text‘ id=‘backgroundimage‘>.jpg) &nbsp;&nbsp;

<span class=‘yellow‘>background-repeat</span>:<input type=‘radio‘ value=‘‘ checked  name=‘background_repeat‘>空&nbsp;<input type=‘radio‘ id=‘repeat-x‘ value=‘repeat-x‘ name=‘background_repeat‘>repeat-x&nbsp;<input type=‘radio‘ value=‘repeat-y‘ id=‘repeat-y‘ name=‘background_repeat‘>repeat-y&nbsp;<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‘>空&nbsp;<input type=‘radio‘ value=‘left top‘ name=‘background_position‘>left top&nbsp;<input type=‘radio‘ value=‘left bottom‘ name=‘background_position‘>left bottom&nbsp;<input type=‘radio‘ value=‘right top‘ id=‘repeat‘ name=‘background_position‘>right top&nbsp;<input type=‘radio‘ value=‘right top‘ name=‘background_position‘>right top<br><br> 

<input type=‘radio‘ value=‘left center‘ name=‘background_position‘>left center&nbsp;<input type=‘radio‘ value=‘right center‘ name=‘background_position‘>right center&nbsp;<input type=‘radio‘ value=‘top center‘ id=‘repeat‘ name=‘background_position‘>top center&nbsp;<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&nbsp;&nbsp;<span class=‘blue‘>color</span>:#<input type=‘text‘ id=‘color‘>&nbsp;&nbsp;<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‘>空&nbsp;<input type=‘radio‘ id=‘absolute‘ value=‘absolute‘ name=‘position‘>absolute&nbsp;<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‘>空&nbsp;<input type=‘radio‘ id=‘hidden‘ value=‘hidden‘ name=‘overflow‘>hidden&nbsp;<input type=‘radio‘ value=‘auto‘ id=‘auto‘ name=‘overflow‘>auto&nbsp;&nbsp;

<span class=‘blue‘>overflow-x</span>:<input type=‘radio‘ id=‘hiddenx‘ value=‘‘ checked  name=‘overflowx‘>空&nbsp;<input type=‘radio‘ id=‘hiddenx‘ value=‘hidden‘  name=‘overflowx‘>hidden&nbsp;<input type=‘radio‘ id=‘autox‘ value=‘scroll‘ name=‘overflowx‘>scroll&nbsp;&nbsp;

<span class=‘blue‘>overflow-y</span>:<input type=‘radio‘ id=‘hiddenx‘ value=‘‘ checked  name=‘overflowy‘>空&nbsp;<input type=‘radio‘ id=‘hiddeny‘ value=‘hidden‘  name=‘overflowy‘>hidden&nbsp;<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‘>空&nbsp;<input type=‘radio‘ value=‘center‘ id=‘tacenter‘ name=‘textalign‘>center&nbsp;<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‘>空&nbsp;<input type=‘radio‘ value=‘left‘ id=‘fleft‘ name=‘float‘>left&nbsp;<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‘>空&nbsp;<input type=‘radio‘ id=‘heiti‘ value=‘黑体‘ name=‘font_family‘>黑体&nbsp;<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‘>空&nbsp;<input type=‘radio‘ id=‘normal‘ value=‘normal‘ name=‘font_weight‘>normal&nbsp;<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&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <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>

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。