HTML代码美化

html-css017

HTML代码美化,第1张

<html>

<head>

<title>你们都</title>

<style>

body{background:url(http://img1.xcarimg.com/b171/s5313/20130625144159802565.jpg) no-repeat center centermargin:0px auto}

.parent { width:980pxheight:50pxmargin:0 autotext-align:center}

.children {display:inline-blockwidth:33%%height:100%%}

*+ html .children { display:inlinezoom:1}

* html .children { display:inlinezoom:1}

</style>

</head>

<script language=\JavaScript\ src=\?getxml=\>

</script>

<BODY onload = \sender(0)\>

<body>

<center>

<h2>当前温度检测</h2>

<div align= center>

<div class=\parent\>

<div class=\children\>温度 : </div>

<div id=\tempId\ class=\children\>00</div>

<div class=\children\>℃</div>

</div>

<br>

<font size= 20 color=blue>

</font>

<form>

<input name=B1 type=submit value=开启>

<input name=B2 type=submit value=关闭>

</form>

</center>

</body>

</html>

文字通过font-familyfont-sizefont-weightcolor等可以美化

按钮要想美化 就给按钮做个背景图片就可以了

希望能帮助你

1.自己写的页面代码,(最好是吧html文件和css文件分开哦,这样浏览器运行的快),简单的自己可以整理好,如果太长了那就按ctrl+a全选,再按ctrl+c复制

2.打开浏览器(要能上网的前提下哦),点百度在搜索栏写“Html在线美化压缩/转js",点击搜索····

3.进入页面后,你可以看到如下面的图片显示的页面,看好上面的网址末尾是html哦,然后将文本框里面的内容删掉,并把你刚才复制的全部代码粘贴到下面的编辑文本框(ctrl+v).

4.复制完后,点击下面的美化,完了之后编辑文本框中显示的代码就是美化后的,你可以继续进行--全选(ctrl+a)--复制(ctrl+c),用这些代码全部替换你原来的代码,你的html代码结构就很清楚了,而且也利于修改啦~~

5.如果你还想修改你的css代码,你可以将如下图所示的地方修改成“css”然后(回车)即可看到如下面所示的图片的页面

6.然后你就按之前说的将你的css代码全部放到这个编辑文本框中,你可以进行文本框下面的操作,不同的操作对应的样式也是不一样的,具体如下图所示喔~~

7.其实”净化“和”整理“是很像的就是最后一个css只是否多个”;“,整理时有分号的,净化是没有的(小伙伴要看仔细咯),如果没有看清楚,可以返回上步仔细看,也可以自己亲自试试