DIV+css完美实现Textarea效果_建站学-个人建站指南,网页制作,网站设计,网站制作教程

用CSS实现一个Textarea的功能和效果，简直一模一样，不信你运行一下看效果，当初我一眼没有看出来是用CSS代码实现的，尤其是滚动条功能，佩服作者的水平哦，CSS水平真不错

<!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"> <meta http-equiv="content-type" content="text/html; charset=gbk"> <head> <title>DIV+css完美仿真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>这可是用DIV实现的哦！</h1> <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>大家都见到很多网站有这种功能吧？就是点击登录后网页并没有刷新，但却弹出一个登录框，输入帐号后又紧接着不刷新网页就可登录，这种功能对提高用户体验非常有用，现在做了一个简单点的登录框，主要是使用了jQuery框架，个人感觉这是个AJAX最好用的框架。</p> <h4>Fees</h4> <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. Services software pc, femtosecond bypass scalar data element extended cascading capacitance harmonic. </p> </div> </body> </html>

[ 提示：你可先修改部分代码，再按Ctrl+A 全部选择 ]

(责任编辑：admin)

搜索

热门标签:

DIV+css完美实现Textarea效果