form注册表单圆角

<BODY>
<div class="form">
<ul class="list">
<li>
<label>用户名:</label>
<div class="circle-box user">
<input type="text" placeholder="5之6位字母或数字组合"/>
</div>
</li>
<li>
<label>用户名:</label>
<div class="circle-box user">
<input type="text" value="一路小串走向胜利" onfocus="this.value=''"
onblur="if(this.value==''){this.value='一路小串走向胜利'}" class="value"/>
</div>
</li>
</ul>
</div>

</BODY>

============================

.form {
width: 600px;
height: 600px;
margin: 100px auto;
background: #FBFBFB;
border: 1px transparent dashed;
}
.list {
width: 550px;
margin: 20px auto;
}
.list li {
width: 550px;
height: 40px;
margin-top: 15px;
}
.list label {
width: 110px;
height: 40px;
display: inline-block;
font-size: 16px;
line-height: 40px;
text-align: right;
float: left;
margin-right: 20px;
}
.list .circle-box {
width: 320px;
height: 40px;
border: 1px #D9D9D9 solid;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
float: left;
}
.list .user {
background: url(../images/img50.png) no-repeat left center;
}
.list input{
width: 266px;
height: 36px;
line-height:36px\9;
margin-left: 47px;
margin-top: 1px;
border: none;
font-size: 16px;
padding-left: 6px;
}
.list .value{
color: #A9A9A9;
}

============================

form注册表单圆角 demo的更多相关文章

  1. 基于HTML5手机登录注册表单代码

    分享一款基于HTML5手机登录注册表单代码.这是一款鼠标点击注册登录按钮弹出表单,适合移动端使用.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&qu ...

  2. CSS3制作分步注册表单

    这个DEMO是使用CSS3制作的一个分步注册表单,每个input对应的是每一步,在表单得到焦点时,对应的step也会进行对应的改变.不过这个效果是使用js代码来实现,但整个表单的外观是由CSS3来完成 ...

  3. layui模板注册表单

    今天晚上用layui模板做了一个简单的注册表单,功能主要有可以js验证密码重复,可以验证手机号码. 这是界面 下面是我的html文件代码 <!DOCTYPE html> <html ...

  4. Html注册表单示例

    注册表单示例,出自<网页开发手记:Html,CSS,JavaScript实战详解>.   <html>   <head>   <title>注册表单&l ...

  5. 免费 PSD 下载： 20个精美的登录和注册表单

    注册表单有许多不同的形状和尺寸,有的只是单个的输入框,有的则需要多个步骤.登录表单的设计将定义网站的性质,因此它应进行针对性的设计.下面的列表提供了20个醒目的登录和注册表单设计为您提供灵感. 您可能 ...

  6. 如何利用WordPress创建自定义注册表单插件

    来源:http://www.ido321.com/1031.html 原文:Creating a Custom WordPress Registration Form Plugin 译文:创建一个定制 ...

  7. HTML6注册表单输入日志标题

    一.找到元素. var d = document.getElementById("") var d = document.getElementsByName("" ...

  8. 阻止form空表单提交----JavaScript

    网上看到很不错的阻止form空表单提交 第一种方法 <div class="warp"> <h2>登录到pfan空间</h2> <p> ...

  9. 4.前端注册表单验证 && 表单回填

    表单验证 前端表单验证就是在 jsp 页面中添加验证逻辑,使得注册表单在传入后台之前先进行一次表单验证 在jsp文件里的 head 块里面添加 jQuery 代码 <script type=&q ...

随机推荐

  1. 《跟我学IDEA》二、配置maven、git、tomcat

    上一篇博文我们讲解了如何去下载并安装一个idea,在这里我们推荐的是zip的解压版,另外我们配置的一些编码和默认的jdk等.今天我们来学习配置maven.git.tomcat等.还是那句话,工欲善其事 ...

  2. UVa 10170 - The Hotel with Infinite Rooms

    题目:求从s開始的递增序列(每次加1).求出他们加和不小于D的那个最后的加数. 分析:数学题.分治.s + s+1 + ... + n = n*(n+1)/2 - s*(s-1)/2 = (n+s)* ...

  3. HDU 4911 Inversion 树状数组求逆序数对

    显然每次交换都能降低1 所以求出逆序数对数,然后-=k就好了.. . _(:зゝ∠)_ #include<stdio.h> #include<string.h> #includ ...

  4. 卡尔曼滤波（Kalman Filter）

    一.引言 以下我们引用文献[1]中的一段话作为本文的開始: 想象你在黄昏时分看着一仅仅小鸟飞行穿过浓密的丛林.你仅仅能隐隐约约.断断续续地瞥见小鸟运动的闪现.你试图努力地猜測小鸟在哪里以及下一时刻它会 ...

  5. mysql+mybatis递归调用

    递归调用的应用场景常常出现在多级嵌套的情况,比如树形的菜单.下面通过一个简单的例子来实现mysql+mybatis的递归. 数据模型 private Integer categoryId; priva ...

  6. jquery实现ajax提交表单

    一般情况下,我们提交form表单采用的是submit的方法,典型的场景如下. <form id="thisForm" method="post" acti ...

  7. MFC学习之CWinApp类

    CWinApp是一个基类,你通过它来继承Windows应用程序对象.应用程序对象为你提供了初始化应用程序(以及它的每一个实例 和运行应用程序所需的成员函数.它实现主事件循环并把事件分发给MFC中其他类 ...

  8. Exception in thread "main" java.lang.NoClassDefFoundError: org/springframework/boot/context/embedded/ServletRegistrationBean

    异常信息 2017-09-02 18:06:37.223 [main] ERROR o.s.boot.SpringApplication - Application startup failed ja ...

  9. 【深度学习系列】用PaddlePaddle和Tensorflow实现GoogLeNet InceptionV2/V3/V4

    上一篇文章我们引出了GoogLeNet InceptionV1的网络结构,这篇文章中我们会详细讲到Inception V2/V3/V4的发展历程以及它们的网络结构和亮点. GoogLeNet Ince ...

  10. MySQL学习（二）复制

        复制解决的问题是保持多个服务器之间的数据的一致性,就如同通过复制保持两个文件的一致性一样,只不过MySQL的复制要相对要复杂一些,其基本过程如下:     1)在主库上将数据更改记录到二进制日 ...