CSS实例教程:制作漂亮的网页表单

695907641

695907641

2016-02-20 00:29

下面是个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" lang="zh-CN"

head

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

titleForm demo/title

style type="text/css"

!--

body {

font-family: Arial, Helvetica, sans-serif;

font-size:12px;

color:#666666;

background:#fff;

text-align:center;

}

* {

margin:0;

padding:0;

}

a {

color:#1E7ACE;

text-decoration:none;

}

a:hover {

color:#000;

text-decoration:underline;

}

h3 {

font-size:14px;

font-weight:bold;

}

pre,p {

color:#1E7ACE;

margin:4px;

}

input, select,textarea {

padding:1px;

margin:2px;

font-size:11px;

}

.buttom{

padding:1px 10px;

font-size:12px;

border:1px #1E7ACE solid;

background:#D0F0FF;

}

#formwrapper {

width:450px;

margin:15px auto;

padding:20px;

text-align:left;

border:1px solid #A4CDF2;

}

fieldset {

padding:10px;

margin-top:5px;

border:1px solid #A4CDF2;

background:#fff;

}

fieldset legend {

color:#1E7ACE;

font-weight:bold;

padding:3px 20px 3px 20px;

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

border:1px solid #A4CDF2;

background:#fff;

}

fieldset label {

float:left;

width:120px;

text-align:right;

padding:4px;

margin:1px;

}

fieldset div {

clear:left;

margin-bottom:2px;

}

.enter{ text-align:center;}

.clear {

clear:both;

}

--

/style

/head

body

div id="formwrapper"

  h3已注册用户登录/h3

  form action="" method="post" name="apLogin" id="apLogin"

    fieldset

    legend用户登录/legend

    div

      label for="Name"用户名/label

      input type="text" name="Name" id="Name" size="18" maxlength="30" /

      br/

    /div

    div

      label for="password"密码/label

      input type="password" name="password" id="password" size="18" maxlength="30" /

      br/

    /div

    div class="cookiechk"

      label

      input type="checkbox" name="CookieYN" id="CookieYN" value="1" /

      a href="#" title="选择是否记录您的信息"记住我/a/label

      input name="login791" type="submit" class="buttom" value="登录" /

    /div

    div class="forgotpass"a href="#"您忘记密码?/a/div

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

    /fieldset

  /form

  br/

  h3未注册创建帐户/h3

  form action="" method="post" name="apForm" id="apForm"

    fieldset

    legend用户注册/legend

    pstrong您的电子邮箱不会被公布出去,但是必须填写./strong 在您注册之前请先认真阅读服务条款./p

    div

      label for="Name"用户名/label

      input type="text" name="Name" id="Name" value="" size="20" maxlength="30" /

      *(最多30个字符)br/

    /div

    div

      label for="Email"电子邮箱/label

      input type="text" name="Email" id="Email" value="" size="20" maxlength="150" /

      *br/

    /div

    div

      label for="password"密码/label

      input type="password" name="password" id="password" size="18" maxlength="15" /

      *(最多15个字符)br/

    /div

    div

      label for="confirm_password"重复密码/label

      input type="password" name="confirm_password" id="confirm_password" size="18" maxlength="15" /

      *br/

    /div

    div

      label for="AgreeToTerms"同意服务条款/label

      input type="checkbox" name="AgreeToTerms" id="AgreeToTerms" value="1" /

      a href="#" title="您是否同意服务条款"先看看条款?/a * /div

    div class="enter"

      input name="create791" type="submit" class="buttom" value="提交" /

      input name="Submit" type="reset" class="buttom" value="重置" /

    /div

    pstrong* 在提交您的注册信息时, 我们认为您已经同意了我们的服务条款.br/

      * 这些条款可能在未经您同意的时候进行修改./strong/p

    /fieldset

  /form

/div

/body

/html

展开更多 50%)
分享

猜你喜欢

CSS实例教程:制作漂亮的网页表单

Web开发
CSS实例教程:制作漂亮的网页表单

CSS网页制作布局实例教程

Web开发
CSS网页制作布局实例教程

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

CSS实例教程:制作网页2级导航

Web开发
CSS实例教程:制作网页2级导航

CSS制作的三款漂亮的网页表单

Web开发
CSS制作的三款漂亮的网页表单

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

CSS3制作的精彩的网页实例教程

Web开发
CSS3制作的精彩的网页实例教程

CSS网页制作实例教程:非常酷的日期效果

Web开发
CSS网页制作实例教程:非常酷的日期效果

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

越遗憾没有你分享我的感动

越遗憾没有你分享我的感动

CSS3的border-radius(圆角)

CSS3的border-radius(圆角)
下拉加载更多内容 ↓