HTML常用样式代码收集整理

个人摄影作品展示

  <input type="text" name="textfield">    //文本框

  

<select name="select">

    <option>列表菜单</option>

  </select>

---------------------------------------------------------


--

<base target="_blank">     //本页都这样打开

-----------------------------------------------

打开一个网址

<script>window.open('http://fangnan.net');</script>

--------------------------------------------------------

邮箱链接

mailto:75171653@qq.com?subject=推荐工具@实用查询&body=内


-------------------------------------------

//背景图样式

.unnamed1 {

background-attachment: fixed;

background-image: url(images/index_08.jpg);

background-repeat: no-repeat;

background-position: center top;

}

-----------------------------------------------------

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-


444553540000" width="300" height="80"><param name="movie" 


value="images/zq_2.swf"></param><param name="quality" 


value="high"></param><param name="wmode" 


value="transparent"></param></object>

---------------------------------------

<a target="_blank" onclick="MM_openBrWindow


('images/game.swf','黄金矿


工','toolbar=no,location=no,status=no,menubar=no,scrollba


rs=no,resizable=no,width=800,height=600')">游戏推荐</a>

---------------------------------------------------------


-

<input type="radio" name="radiobutton" 


value="radiobutton" checked>  单选按钮/其中“checked”为


默认行为选中/

<input name="checkbox" type="checkbox" value="checkbox" 


checked>  复选框/其中“checked”为默认行为选中/

<input type="submit" name="Submit" value="提交">  按钮  


<textarea name="textarea" cols="90" rows="3"></textarea> 


文本区域 


style="width:580px;height:50px;border:solid 1px #000000;" 


给文本区域加边框

---------------------------------------------------------


-----

<td style="border:solid 1px #37C5D9;">  定义默认边框宽度


style="border-bottom:1px dotted #FFF"   底部点状线条


<td style="border-top:solid 1px #37C5D9;  定义上边框宽度

           border-bottom:solid 1px #ffffff;  定义下边框宽


           border-right:solid 1px #ffffff;  定义右边框宽


           border-left:solid 1px #ffffff;">   定义左边框


宽度

style="border-top:solid 1px #000000;border-bottom:solid 


1px #000000;border-right:solid 1px #000000;border-


left:solid 1px #000000;"

---------------------------------------------------------


--------------------------

页面顶部空隙

body {

margin-top: 0px;

        margin-left: 0px;

        margin-right: 0px;

        margin-bottom: 0px;

}


<style type="text/css">

<!--

.style1 {font-family: "黑体"}


a{

  color: #000000;       //字体色

  text-decoration:none; //超连接去下划线

}

-->

</style>


<span style="color:#ffffff;"> 文字颜色 </span>

<span class="style1">样式1</span>

-------------------------------------------------------

<STYLE type=text/css>BODY {

BACKGROUND-IMAGE: url(images/bg.gif)

}

</STYLE>

<a href="javascript:window.close();">关闭本窗口</a>

<a href="javascript:doZoom(16)">大字体</a>

<a href="javascript:doZoom(14)">大字体</a>

<a href="javascript:doZoom(12)">大字体</a>

----------------------------------//页面内的滚动条

<div style="width:540px; height:666px; overflow: auto;">

</div>

----------------------------------//文字按钮效果

onmouseover="this.bgColor='#0099FF'" 


onmouseout="this.bgColor='#ffffff'"  

---------------------------------------------------------


----------------------------

<span 


style="position:relative;left:11px;top:12px;>WARRANTY</sp


an> //相对定位字的位置。

type="position:relative;right:1px;left:1px;top:1px;bottom


:1px;"    //同上

<span 


style="position:absolute;left:11px;top:12px;>WARRANTY</sp


an> //绝对定位字的位置。

type="position:absolute;right:1px;left:1px;top:1px;bottom


:1px;"    //同上

---------------------------------------------------------


----------------------

<style type="text/css">

...........

   #right{

    position:relative; top:-414px; //位置:相对的

    font-style:italic; //斜体

       width:150px;

       height:375px;

       float:left;   //浮动在左边

       font-family:tahoma;

       font-size:13px;

       color:#000000;

       font-weight:bold;

       text-align:right;

   }

</style>

需要先:

<div id="right">

内容

</div>

---------------------------------------------------------


-----------


常用字体:arial, verdana, helvetica, sans-serif;

格式1 <td><span class="style1">黑体</span></td>

格式2 <td><strong>加粗</strong></td>

格式3 <td><em>斜体</em></td>


font-style:italic; //斜体

---------------------------------------------------------


---------------

<table width="500" border="边框" cellspacing="间距" 


cellpadding="填充">

<tr> 行

<td> 列

</td>

</tr>

</table>

    <td colspan="3">合并3列</td>

    <td rowspan="5">合并5行</td>


background="images/terminatorscooter-homepage-.jpg"   背


景图

---------------------------------------------------------


-----------------------------

<div style="margin-top:10px;padding-right:0px;">内容


</div>


class用 .outo{    }

id用#outo{    }

---------------------------------------------------------


---------------------


style="background-repeat:no-repeat;"  //不允许背景图重复


---------------------------------------------------------


------------------

java script


document.writeln(" 网页内容 ");   //java调用程序


<link rel="stylesheet" type="text/css" media="all" 


href="style/global_style.css">  //css应用

---------------------------------------------------------


------------------------

常用字体:arial, verdana, helvetica, sans-serif;

position:relative;right:1px;left:1px;top:1px;bottom:1px; 


//相对定位

position:absolute;right:1px;left:1px;top:1px;bottom:1px; 


//绝对定位


text-decoration:none; //超连接去下划线

text-decoration:underline; //超连接下划线


<td colspan="3">合并3列</td>

<td rowspan="5">合并5行</td>

background="images/…"   背景图

background-repeat:no-repeat;  //不允许背景图重复

document.writeln(" 内容 ");   //java调用程序


<link rel="stylesheet" type="text/css" media="all" 


href="style/global_style.css">

<meta http-equiv="content-type" content="text/html; 


charset=gb2312">


<span style="color:#ffffff;"> 文字颜色 </span>

<span class="style1">黑体</span>


leftmargin=0  //左页边空白

topmargin=0  //顶页边空白

cellpadding=0 //填充

cellspacing=0 //间距

strong //加粗


&bull; //黑色小圈

&oline; //上划线

&larr; //左箭头

&uarr; //上箭头

&rarr; //右箭头

&darr; //下箭头

&harr; //双箭头

---------------------------------------------------------


--------------------

style="background-repeat:no-repeat;"  //不允许背景图片重


复出现

line-height:2px;    //字线高

text-decoration:none; //超链去下划线

<link rel="stylesheet" type="text/css" href="font.css">

style="position:relative; top:1px;" 

<span style="color:#ffffff;font-size:12px;">文字</span>

<span class="header">文字</span>


<meta name="keywords" content="HTML">  //给搜索引擎看要找


的内容名

<meta http-equiv="Content-Type" content="text/html; 


charset=gb2312"> //浏览器用什么编码


class 用 .outo

id    用 #outo

&yen; 元符号


<style type="text/css">

body {margin:0; padding:0px;}  //整个页面边空白和填充

#header {margin: auto; height:70px; background-


color:#d1c9df;}

#content {margin:0 auto; height:400px; background-


color:#336699;}

#content #left {width:20%; height:100%; float:left; 


background-color:#f0f1c6;}

#content #right {height:100%; background-color:#ffffff;}

#footer {margin:0 auto; height:70px; background-


color:#d1c9df;}

</style>



<!-- 跳出页面 -->

<script>function l() 

window.open


("http://sn.bnet.cn/portal/gonggao/gonggao.html","name","


width=400,height=300,border=0,top=0,left=0,") 

setTimeout("l()",5000) 

</script>

<!-- 跳出页面 -->


<SCRIPT LANGUAGE="javascript"> js脚本开始; 

window.open 弹出新窗口的命令; 

'page.html' 弹出窗口的文件名; 

'newwindow' 弹出窗口的名字(不是文件名),非必须,可用


空''代替; 

height=100 窗口高度; 

width=400 窗口宽度; 

top=0 窗口距离屏幕上方的象素值; 

left=0 窗口距离屏幕左侧的象素值; 

toolbar=no 是否显示工具栏,yes为显示; 

menubar,scrollbars 表示菜单栏和滚动栏。 

resizable=no 是否允许改变窗口大小,yes为允许; 

location=no 是否显示地址栏,yes为允许; 

status=no 是否显示状态栏内的信息(通常是文件已经打开),


yes为允许; 

</SCRIPT> js脚本结束 


上一篇: 整体样式表通用代码 下一篇:自己整理的HTML代码

评论

  1. #2

    法伊儿(2018/10/28 11:41:03)
    谢谢分享!

  2. #1

    斯麦岭(2017/08/19 21:02:39)
    谢谢楼主!