DIV+CSS网页设计实例:DIV实现网页Textarea效果

•网页制作•2012/5/20• 1722

<!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>

文章分类: 网页制作

打开微信，点击底部的“发现”，使用“扫一扫”即可将网页分享至朋友圈。