SunLe’Blog—孙乐

存档

文章标签 ‘div’

scrollingbox – Textarea vs Div

2008年12月25日没有评论

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <meta http-equiv="content-type" content="text/html; charset=gbk"> <head> <title>Terms and Conditions for div vs textarea</title> <style type="text/css"> h1 {font:bold 1.2em/1.6em arial;margin:4px 0;padding:4px 0;} h2 {font:normal 1.1em/1.5em arial;margin:14px 0 0 0;padding:4px 0;} div, p {font: normal 1em/1.3em arial;} textarea.terms { width:600px; height:200px; border:1px solid #ccc; background:#f2f2f2; font:normal 11px/15px arial; padding:6px; color:#333; } div.terms { width:600px; height:200px; border:1px solid #ccc; background:#f2f2f2; padding:6px; overflow:auto; } div.terms p, div.terms li {font:normal 11px/15px arial;color:#333;} div.terms h3 {font:bold 14px/19px arial;color:#000;} div.terms h4 {font:bold 12px/17px arial;color:#000;} div.terms strong {color:#000;} </style> </head> <body> <h1>Scrolling boxes of terms: textarea vs div</h1> <h2>Using textarea:</h2> <textarea class="terms" readonly="readonly"> Terms and Conditions GENERAL Servicing servicing resistor video computer element transponder prototype analog solution mainframe network. Solution video debugged feedback sampling extended, infrared, generator generator. * list item number one * list item number two * list item number three Harmonic gigabyte generator in sequential interface. Services, integer device read-only supporting cascading cache capacitance. Proxy boolean solution or data overflow element overflow processor arrray video, reflective extended. Gigabyte debugged distributed, reflective controller disk encapsulated phase network arrray feedback element cache high silicon. Sampling backbone analog remote adaptive extended bridgeware n-tier integer audio femtosecond. IMPORTANT STUFF Interface broadband developer backbone fragmentation messaging software transmission, sampling cascading element high silicon backbone. Reflective servicing coordinated boolean connectivity extended inversion sequential for. Data distributed backbone bridgeware connectivity logarithmic, sampling ethernet for. Extended logarithmic log video echo gigabyte. or procedural phaselock sequential port extended deviation sequential, disk recognition gigabyte phaselock proxy messaging arrray. Encapsulated echo deviation boolean system ethernet reducer, pc. Backbone frequency echo ethernet patch femtosecond sampling, integer digital floating-point n-tier dithering disk. Processor reflective boolean includes phase deviation, with log, integral logistically femtosecond, in, integral infrared phaselock. Element developer pc harmonic, plasma with, integral floating-point. Reflective feedback infrared, echo anomoly integral generator reflective led, high overflow servicing gigabyte. Extended integral data, infrared frequency disk broadband transistorized processor disk anomoly, sampling potentiometer kilohertz. Bus overflow, bridgeware fragmentation bypass prototype, interface, for internet pc generator integral, bypass disk, frequency. FEES Sequential ENCAPSULATED RESISTOR element converter pc harmonic. Feedback cache hyperlinked debugged generator infrared device network, fragmentation connectivity, debugged. For, dithering interface debugged sequential recognition bypass bridgeware processor backbone sampling logarithmic software. Anomoly infrared logarithmic logarithmic procedural plasma resistor integral silicon deviation. Computer broadband plasma, encapsulated cable kilohertz scan. With logarithmic bridgeware indeterminate sampling, port. Development procedural hyperlinked mainframe, encapsulated boolean software processor transistorized cable with backbone. Reflective backbone log transmission cable logarithmic mainframe. Messaging backbone debugged feedback development phaselock metafile n-tier coordinated, cable coordinated coordinated in. Analog device transistorized, sequential transistorized with scalar normalizing. Mainframe phase cache anomoly feedback servicing harmonic. Services software pc, femtosecond bypass scalar data element extended cascading capacitance harmonic. Adaptive plasma bypass supporting cascading deviation system pulse broadband bridgeware. AGREEMENT Servicing hyperlinked analog encapsulated disk cable with, capacitance element partitioned potentiometer read-only dithering. Normalizing kilohertz network solution logarithmic device bus connectivity system mainframe prototype phaselock phase cache. Coordinated transmission overflow floating-point distributed supporting scan converter. Bridgeware backbone coordinated sampling overflow broadband normalizing connectivity or, internet transmission, bus, encapsulated. Extended element element echo messaging scan, cache video deviation debugged broadband. Pc, supporting hyperlinked coordinated patch, bridgeware transistorized, led frequency scalar. Servicing, plasma recursive boolean includes, computer, femtosecond inversion. Services integer harmonic mainframe scalar prototype broadband n-tier. Echo software application indeterminate dithering bypass plasma bus harmonic patch. Digital, mainframe scalar anomoly bypass, bus potentiometer phaselock plasma, phaselock prompt data disk inversion. </textarea> <h2>Using div :</h2> <div class="terms"> <h3>Terms and Conditions</h3> <h4>General</h4> <p>Servicing servicing resistor <strong>video computer</strong> element transponder prototype analog solution mainframe network. Solution video debugged feedback sampling extended, infrared, generator generator. </p> <ul> <li>list item number one</li> <li>list item number two</li> <li>list item number three</li> </ul> <p>Harmonic gigabyte generator in <strong>sequential interface</strong>. Services, integer device read-only supporting cascading cache capacitance. Proxy boolean solution or data overflow element overflow processor arrray video, reflective extended. Gigabyte debugged distributed, reflective controller disk encapsulated phase network arrray feedback element cache high silicon. Sampling backbone analog remote adaptive extended bridgeware n-tier integer audio femtosecond. </p> <h4>Important Stuff</h4> <p>Interface broadband <strong>developer backbone fragmentation</strong> messaging software transmission, sampling cascading element high silicon backbone. Reflective servicing coordinated boolean connectivity extended inversion sequential for. Data distributed backbone bridgeware connectivity logarithmic, sampling ethernet for. Extended logarithmic log video echo gigabyte. or procedural phaselock sequential port extended deviation sequential, disk recognition gigabyte phaselock proxy messaging arrray. Encapsulated echo deviation boolean system ethernet reducer, pc. </p> <p><strong>Backbone frequency echo ethernet</strong> patch femtosecond sampling, integer digital floating-point n-tier dithering disk. Processor reflective boolean includes phase deviation, with log, integral logistically femtosecond, in, integral infrared phaselock. Element developer pc harmonic, plasma with, integral floating-point. Reflective feedback infrared, echo anomoly integral generator reflective led, high overflow servicing gigabyte. Extended integral data, infrared frequency disk broadband transistorized processor disk anomoly, sampling potentiometer kilohertz. Bus overflow, bridgeware fragmentation bypass prototype, interface, for internet pc generator integral, bypass disk, frequency. </p> <h4>Fees</h4> <p>Sequential <strong>encapsulated resistor</strong> element converter pc harmonic. Feedback cache hyperlinked debugged generator infrared device network, fragmentation connectivity, debugged. For, dithering interface debugged sequential recognition bypass bridgeware processor backbone sampling logarithmic software. Anomoly infrared logarithmic logarithmic procedural plasma resistor integral silicon deviation. Computer broadband plasma, encapsulated cable kilohertz scan. With logarithmic bridgeware indeterminate sampling, port. Development procedural hyperlinked mainframe, encapsulated boolean software processor transistorized cable with backbone. </p> <p>Reflective backbone log transmission cable logarithmic mainframe. Messaging backbone debugged feedback development phaselock metafile n-tier coordinated, cable coordinated coordinated in. <strong>Analog device</strong> transistorized, sequential transistorized with scalar normalizing. Mainframe phase cache anomoly feedback servicing harmonic. Services software pc, femtosecond bypass scalar data element extended cascading capacitance harmonic. Adaptive plasma bypass supporting cascading deviation system pulse broadband bridgeware. </p> <h4>Agreement</h4> <p>Servicing hyperlinked analog encapsulated disk cable with, capacitance element partitioned potentiometer read-only dithering. <strong>Normalizing kilohertz</strong> network solution logarithmic device bus connectivity system mainframe prototype phaselock phase cache. </p> <p>Coordinated transmission overflow floating-point distributed supporting scan converter. <strong>Bridgeware backbone</strong> coordinated sampling overflow broadband normalizing connectivity or, internet transmission, bus, encapsulated. Extended element element echo messaging scan, cache video deviation debugged broadband. Pc, supporting hyperlinked coordinated patch, bridgeware transistorized, led frequency scalar. Servicing, plasma recursive boolean includes, computer, femtosecond inversion. Services integer harmonic mainframe scalar prototype broadband n-tier. Echo software application indeterminate dithering bypass plasma bus harmonic patch. Digital, mainframe scalar anomoly bypass, bus potentiometer phaselock plasma, phaselock prompt data disk inversion. </p> </div> </body> </meta></html>

提示：你可以先修改部分代码再运行。

查看代码：
阅读全文…

分类: 网站制作标签: div, Textarea

表单栏目提示效果

2008年12月21日没有评论

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Form field hints with CSS and JavaScript</title> <style type="text/css"> /* All form elements are within the definition list for this example */ dl { font:normal 12px/15px Arial; position: relative; width: 350px; } dt { clear: both; float:left; width: 130px; padding: 4px 0 2px 0; text-align: left; } dd { float: left; width: 200px; margin: 0 0 8px 0; padding-left: 6px; } /* The hint to Hide and Show */ .hint { display: none; position: absolute; right: -250px; width: 200px; margin-top: -4px; border: 1px solid #c93; padding: 10px 12px; /* to fix IE6, I can't just declare a background-color, I must do a bg image, too! So I'm duplicating the pointer.gif image, and positioning it so that it doesn't show up within the box */ background: #ffc url("http://www.cssrain.cn/demo/formfieldhints/pointer.gif") no-repeat -10px 5px; } /* The pointer image is hadded by using another span */ .hint .hint-pointer { position: absolute; left: -10px; top: 5px; width: 10px; height: 19px; background: url("http://www.cssrain.cn/demo/formfieldhints/pointer.gif") left top no-repeat; } </style> <script type="text/javascript"> function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { oldonload(); func(); } } } function prepareInputsForHints() { var inputs = document.getElementsByTagName("input"); for (var i=0; i<inputs .length; i++){ // test to see if the hint span exists first if (inputs[i].parentNode.getElementsByTagName("span")[0]) { // the span exists! on focus, show the hint inputs[i].onfocus = function () { this.parentNode.getElementsByTagName("span")[0].style.display = "inline"; } // when the cursor moves away from the field, hide the hint inputs[i].onblur = function () { this.parentNode.getElementsByTagName("span")[0].style.display = "none"; } } } // repeat the same tests as above for selects var selects = document.getElementsByTagName("select"); for (var k=0; k<selects.length; k++){ if (selects[k].parentNode.getElementsByTagName("span")[0]) { selects[k].onfocus = function () { this.parentNode.getElementsByTagName("span")[0].style.display = "inline"; } selects[k].onblur = function () { this.parentNode.getElementsByTagName("span")[0].style.display = "none"; } } } } addLoadEvent(prepareInputsForHints); </script> </inputs></script></head> <body> <p style="font:normal 12px/15px Arial;">Tab or click through the fields to reveal the hints.</p> <dl> <dt> <label for="firstname">First Name:</label> </dt> <dd> <input name="firstname" id="firstname" type="text" /> <span class="hint">This is the name your mama called you when you were little.<span class="hint-pointer"> </span></span> </dd> <dt> <label for="lastname">Last Name:</label> </dt> <dd> <input name="lastname" id="lastname" type="text" /> <span class="hint">This is the name your sergeant called you when you went through bootcamp.<span class="hint-pointer"> </span></span> </dd> <dt> <label for="email">Email:</label> </dt> <dd> <input name="email" id="email" type="text" /> <span class="hint">The thing with the @ symbol and the dot com at the end.<span class="hint-pointer"> </span></span> </dd> <dt><label for="year">Birth Year:</label></dt> <dd> <select id="year" name="year"> <option value="">YYYY</option> <option value="1066">1066</option> <option value="1492">1492</option> <option value="1776">1776</option> <option value="1812">1812</option> <option value="1917">1917</option> <option value="1942">1942</option> <option value="1999">1999</option> </select> <span class="hint">Pick a famous year to be born in.<span class="hint-pointer"> </span></span> </dd> <dt> <label for="username">Username:</label> </dt> <dd> <input name="username" id="username" type="text" /> <span class="hint">Between 4-12 characters.<span class="hint-pointer"> </span></span> </dd> <dt> <label for="password">Password:</label> </dt> <dd> <input name="password" id="password" type="password" /> <span class="hint">Between 5-13 characters, but not 7. Never 7.<span class="hint-pointer"> </span></span> </dd> <dt class="button"> </dt> <dd class="button"> <input type="submit" class="button" value="Submit" /> </dd> </dl> </body> </html>

提示：你可以先修改部分代码再运行。

代码如下：阅读全文…

分类: 网站制作标签: css, div, 提示, 表格

DIV 图片居中

2008年11月10日没有评论

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>div里面图片垂直居中的几个例子</title> <style type="text/css">  </style> </head> <body> <div class="al"> <div> <span class="aa"> <p><a href="http://www.9sky.com/"><img src="http://img1.9sky.com/hotop/9/9/99802590-49be-46eb-89b8- 15112618eaf7.JPG" alt="" /></a></p> </span> </div> <div> <span class="aa"> <p><a href="http://i.9sky.com/"><img src="http://img.9sky.com/cover/70/41954.jpg" alt="" /></a></p> </span> </div> <div> <span class="aa"> <p><a href="http://i.9sky.com/"><img src="http://img1.9sky.com/hotop/c/f/cf9caedb-267f-4527-872d- 6a98250185ed.JPG" alt="" /></a></p> </span> </div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

代码：
阅读全文…

分类: 网站制作标签: css, div, 图片, 图片居中, 居中

菜单点击弹出下拉式

2008年11月7日没有评论

分类: 网站制作标签: css, div, js, 菜单

如何在DIV框加一个关闭按钮？？

2008年8月26日没有评论

<div id='error'>
错误信息：
<input type='button' onclick='document.getElementById("error").style.display="none";' value='关闭本窗体'>
</div>

下面几个漂亮的 buttom 按钮

分类: 网站制作标签: css, div, 关闭

div中class与id的区别及应用【转载】

2007年7月1日没有评论

class是设置标签的类。
id是设置标签的标识。
class属性用于指定元素属于何种样式的类。

如样式表可以加入：
.baobao { color: lime; background: #ff80c0 }

使用方法：class=”baobao”

id属性用于定义一个元素的独特的样式。如一个CSS规则：
#binbin { font-size: larger }

使用方法：id=”binbin” 阅读全文…

分类: 网站制作标签: css, div

SunLe’Blog—孙乐

存档

scrollingbox – Textarea vs Div

表单栏目提示效果

DIV 图片居中

菜单点击弹出下拉式

如何在DIV框加一个关闭按钮？？

div中class与id的区别及应用【转载】

Random Posts

Categories

Blogroll

Archives

Meta

SunLe’Blog—孙乐

存档

scrollingbox – Textarea vs Div

表单栏目提示效果

DIV 图片居中

菜单点击弹出下拉式

如何在DIV框加一个关闭按钮？？

div中class与id的区别及应用【转载】

Random Posts

Tag Cloud

Categories

Blogroll

Archives

Meta