精华内容
下载资源
问答
  • form表单样式

    千次阅读 2017-10-24 10:53:00
    我们会经常遇到许多密码的登录和注册, 这个时候我们就可以先写好一个模块进行参考 源代码如下: ... 表单样式    * {  font-size: 12px;  margin: 0;  padding: 0;  }  input {

    我们会经常遇到许多密码的登录和注册, 这个时候我们就可以先写好一个模块进行参考微笑

    源代码如下:

    <!DOCTYPE html>

    <html>
    <head>
        <meta charset="UTF-8">
        <title>表单样式</title>
        <style type="text/css">
            * {
                font-size: 12px;
                margin: 0;
                padding: 0;
            }


            input {
                width: 320px;
                height: 24px;
                border: 1px solid #999;
                border-radius: 4px;
            }


            .formErr {
                border: 1px solid red;
            }


            .form .label {
                display: block;
                float: left;
                width: 128px;
                height: 40px;
                line-height: 40px;
                text-align: end;
            }


            .form .txt {
                display: block;
                float: left;
                width: 340px;
                height: 40px;
                line-height: 40px;
                padding-left: 16px;
            }


            .form button {
                width: 56px;
                height: 24px;
                background-color: green;
                border: 0;
                border-radius: 4px;
                color: white;
            }


            .form .errTips {
                width: 226px;
                background-color: lightpink;
                color: darkred;
                border-radius: 4px;
                margin-left: 144px;
                margin-top: 6px;
                margin-bottom: 4px;
                padding: 16px 48px;
            }
        </style>
    </head>
    <body>
    <div class="form">
        <div>
            <span class="label">用户名</span>
            <span class="txt"><input type="text" placeholder="6-20个字符"/></span>
        </div>
        <div style="clear: both"></div>
        <div>
            <span class="label">密码</span>
            <span class="txt"><input type="password" placeholder="6-20个字符" class="formErr"/></span>
        </div>
        <div style="clear: both"></div>
        <div>
            <span class="label">重复密码</span>
            <span class="txt"><input type="password" placeholder="再次输入密码"/></span>
        </div>
        <div style="clear: both"></div>
        <div class="errTips">
            <ul>
                <li>密码长度不能小于6个字符!</li>
                <li>密码不能为空!</li>
                <li>两次密码输入不一致!</li>
            </ul>
        </div>
        <div style="clear: both"></div>
        <div>
            <span class="label"></span>
            <span class="txt"><button>提交</button></span>
        </div>
        <div style="clear: both"></div>
    </div>
    </body>
    </html>
    展开全文
  • 4.表单样式

    千次阅读 2018-07-15 11:14:58
    在写表单的时候经常会用到"&lt;form&gt;"但是却很少有人关注边框的问题.&lt;fieldset&gt;范例:定义边框&...信息显示表单&...ul&gt; &lt;li&gt;百度一下&

            在写表单的时候经常会用到"<form>"但是却很少有人关注边框的问题.<fieldset>

    范例:定义边框

    <form>
    			<fieldset>
    				<legend>信息显示表单</legend>
    			<ul>
    				<li>百度一下</li>
    				<li>搜购一下</li>
    				<li>谷歌一下</li>
    			</ul>
    			</fieldset>
    		</form> 

    效果



    范例:定义表单

    <body>
    		<div class="container">
    		<form action="" method="post">
    			<fieldset id="">
    				<legend>用户登录</legend>
    				<div class="form-group">
    					<label>用户名:</label>
    					<input type="text" placeholder="请输入注册用户名" class="form-control"/>
    				</div>
    				<div class="form-group">
    					<label>密    码:</label>
    					<input type="password" placeholder="请输入注册密码" class="form-control"/>
    				</div>
    				<button type="submit">登录</button>
    				<button type="reset">重置</button>
    			</fieldset>
    			
    		</form>
    		</div>
    	</body>



    <body>
    		<div class="container">
    			<form action="" method="post" class="form-horizontal">
    				<fieldset id="">
    					<legend>用户登录</legend>
    					<div class="form-group">
    						<label class="col-lg-2 control-label" for="uid">用户名:</label>
    						<div class="col-md-5">
    							<input type="text" placeholder="请输入注册用户名" class="form-control" />
    						</div>
    					</div>
    					<div class="form-group">
    						<label class="col-lg-2 control-label" for="pwd">密&nbsp;&nbsp;&nbsp;&nbsp;码:</label>
    						<div class="col-md-5">
    						<input type="password" id="pwd" placeholder="请输入注册密码" class="form-control" />
    						</div>
    						</div>
    						<div class="form-group">
    						<div class="col-md-5 col-md-offset-2">
    					<button type="submit" class="btn btn-danger">登录</button>
    					<button type="reset" class="btn btn-primary">重置</button>
    					</div>
    					</div>
    				</fieldset>
    
    
    			</form>
    		</div>
    	</body>

            效果图

        表单里面一定有许多的表单控件,所以在Bootstrap里面也针对于表单控件进行各种样式的支持

    	<body>
    		<div class="container">
    			<form action="" method="post" class="form-horizontal">
    				<fieldset id="">
    					<legend>新闻评论</legend>
    					<div class="form-group">
    						<label class="col-lg-2 control-label" for="uid">标题:</label>
    						<div class="col-md-5">
    							<input type="text" placeholder="请输入注册用户名" class="form-control" />
    						</div>
    					</div>
    					<div class="form-group">
    						<label class="col-lg-2 control-label" for="pwd">内容:</label>
    						<div class="col-md-5">
    						<textarea class="form-control" cols="30" rows="3" style="resize:none"></textarea>
    						</div>
    						</div>
    						<div class="form-group">
    						<div class="col-md-5 col-md-offset-2">
    					<button type="submit" class="btn btn-danger">留言</button>
    					<button type="reset" class="btn btn-primary">重置</button>
    					</div>
    					</div>
    				</fieldset>
    
    			</form>
    		</div>
    	</body> 

    范例:实现下拉列表

    <div class="container">
    			<form action="" method="post" class="form-horizontal">
    				<fieldset id="">
    					<legend>用户地址</legend>
    					<div class="form-group">
    						<label class="col-lg-2 control-label" for="province">省份:</label>
    						<div class="col-md-3">
    							<select name="province" id="province" class="form-control">
    								<option value="001">河南省</option>
    								<option value="003">北京</option>
    								<option value="002">广州</option>
    							</select>
    						</div>
    						<label class="col-lg-2 control-label" for="crity">城市</label>
    						<div class="col-md-3">
    						<select name="crity" id="crity" class="form-control">
    								<option value="001">洛阳</option>
    								<option value="003">北京</option>
    								<option value="002">广州</option>
    							</select>
    						</div>
    						</div>
    						<div class="form-group">
    						<div class="col-md-5 col-md-offset-2">
    					<button type="submit" class="btn btn-danger">留言</button>
    					<button type="reset" class="btn btn-primary">重置</button>
    					</div>
    					</div>
    				</fieldset>
    
    			</form>
    		</div>
            所有的控件都可以使用".form-control"样式定义显示风格



            单选框和复选框在定义的时候必须在组建上外加一个层元素,在这个层元素里面设置使用的样式.






    展开全文
  • (HTML5)表单样式

    千次阅读 2017-10-24 13:06:40
    表单模板, 需要的时候可以直接调用修改就可以 代码: html> html> head> meta charset="UTF-8"> title>表单样式title> style type="text/css"> * { font-size: 12px; margin: 0;


    表单模板, 需要的时候可以直接调用修改就可以


    代码:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>表单样式</title>
        <style type="text/css">
            * {
                font-size: 12px;
                margin: 0;
                padding: 0;
            }
    
            input {
                width: 320px;
                height: 24px;
                border: 1px solid #999;
                border-radius: 4px;
            }
    
            .formErr {
                border: 1px solid red;
            }
    
            .form .label {
                display: block;
                float: left;
                width: 128px;
                height: 40px;
                line-height: 40px;
                text-align: end;
            }
    
            .form .txt {
                display: block;
                float: left;
                width: 340px;
                height: 40px;
                line-height: 40px;
                padding-left: 16px;
            }
    
            .form button {
                width: 56px;
                height: 24px;
                background-color: green;
                border: 0;
                border-radius: 4px;
                color: white;
            }
    
            .form .errTips {
                width: 226px;
                background-color: lightpink;
                color: darkred;
                border-radius: 4px;
                margin-left: 144px;
                margin-top: 6px;
                margin-bottom: 4px;
                padding: 16px 48px;
            }
        </style>
    </head>
    <body>
    <div class="form">
        <div>
            <span class="label">用户名</span>
            <span class="txt"><input type="text" placeholder="6-20个字符"/></span>
        </div>
        <div style="clear: both"></div>
        <div>
            <span class="label">密码</span>
            <span class="txt"><input type="password" placeholder="6-20个字符" class="formErr"/></span>
        </div>
        <div style="clear: both"></div>
        <div>
            <span class="label">重复密码</span>
            <span class="txt"><input type="password" placeholder="再次输入密码"/></span>
        </div>
        <div style="clear: both"></div>
        <div class="errTips">
            <ul>
                <li>密码长度不能小于6个字符!</li>
                <li>密码不能为空!</li>
                <li>两次密码输入不一致!</li>
            </ul>
        </div>
        <div style="clear: both"></div>
        <div>
            <span class="label"></span>
            <span class="txt"><button>提交</button></span>
        </div>
        <div style="clear: both"></div>
    </div>
    </body>
    </html>

    展开全文
  • li class = "dropdown-header" > 基础班 < / li > < li > < a href = "#" > HTML < / a > < / li > < li > < a href = "#" > CSS < / a > < / li > < li > < a href = "#" > JavaScript < / a > < / li > ...

    在这里插入图片描述

    <div class="container">
            <!--字体图标-->
            <span class="glyphicon glyphicon-tint"></span>
            <span class="glyphicon glyphicon-music"></span>
            <!--三角图标-->
            <span class="caret"></span>
        </div>
    

    在这里插入图片描述

    在这里插入图片描述

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--支持移动设备优先-->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!--引入css文件-->
        <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
        <!--引入bootstrap.js之前一定要先引入jQuery.js文件-->
        <script type="text/javascript" src="bootstrap/js/jquery.min.js"></script>
        <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
    </head>
    <body>
        <div class="container">
            <!--下拉菜单    按钮+无序列表来实现,但这些内容都应该放置了个div里面-->
            <div class="dropdown">
                <!--按钮-->
                <button class="btn btn-success" data-toggle="dropdown">PHP基础课程班
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li class="dropdown-header">基础班</li>
                    <li><a href="#">HTML</a></li>
                    <li><a href="#">CSS</a></li>
                    <li><a href="#">JavaScript</a></li>
                    <li><a href="#">Bootstrap</a></li>
                    <!--<li class="dropdown-header">就业班</li>-->
                    <li class="divider"></li>
                    <!--li*4>a-->
                    <li><a href="#">PHP</a></li>
                    <li><a href="#">MYSQL</a></li>
                    <li><a href="#">jQuery</a></li>
                    <li class="disabled"><a href="#">java</a></li>
                </ul>
            </div>
        </div>
    </body>
    </html>
    

    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • 介绍:一共两个表单,通过按钮进行切换,切换的逻辑很简单,一个表单div的display设置为none,另一个block,我通过JS来实现点击触发切换样式就行了。 对齐方式: 看到网页模板的时候,第一眼就是所有的input元素都...
  • 对于很多人用div来做网站时,总会用到,但在....li和.ul下写入list-sytle:none;当然有的会这样来写list-style-type:none, 这种写法特别是在一些CMS中最常见。 2、在相关的页面找到head部分写入下面的代码 &lt;...
  • 基于DIV+ul+li实现的表格(多示例)

    千次阅读 2014-11-06 15:10:44
    普通的显示数据的时候,ul就是项目列表,li就是列表项。...li是固定的宽度与高度(单元格),设置liul中浮动,当ul不够宽的时候,li就会自动另起一行排列(一行有多少列通过计算即可得到ul的宽度,如
  • /* 所有class为menu的div中的ul中的li样式 */ div.menu ul li { float:left; /* 向左漂移,将竖排变为横排 */ width:200px; } /* 所有class为menu的div中的ul中的a样式(包括尚未点击的和点击过的样式) */ div.menu...
  • ul v-for=''> <li> <el-popover > <div>li标签内显示的内容</div> <div>弹出框显示的内容</div> </el-popover> </li> </ul> </div...
  • 当鼠标移动到菜单上 出现下拉菜单 ,效果图要注意 ul 上移至 父元素li的位置,否则鼠标离开菜单时 下拉菜单就会消失,导致鼠标无法移动到下拉菜单上 html实现代码      MAINSERVICES  style="b
  • 做项目,遇见这个问题,原本是想要ajax获取数据,然后动态加载出导航条,可是动态加载后没出效果,但是去掉样式有数据.因为我也没用过layui.就只能百度,然后百度上全是from的,可是我只是单纯的做个导航,不会用到表单的....
  • ul, ol 列表标签和表单

    2018-12-01 23:11:28
    无序列表 ul : 无序列表的各个列表项之间没有顺序级别之分,是并列的。 &lt;ul&gt; &lt;li&gt;列表项1&lt;/li&gt; &lt;li&gt;列表项2&lt;/li&gt; &lt;li&gt...
  • <ul class="tr clearfix"> <li>0001.1li> <li>计算机基础li> <li>删除div>li> ul> <ul class="tr clearfix"> <li>0001.2li> <li>数据结构li> <li>删除div>li> ul> <ul class="tr clearfix"> <li>0001.3li> <li>C语言...
  • Document &lt;style&gt; /* 块元素的特点 1.默认宽度 父元素的百分百;... 2.... 3.支持全部样式 */ .box{ width: 100px; height: 50px; background-color: red; } span{ /* 1.行
  • 用  list-style: none;属性可实现 ... <ul class="nav"> ... <li >账户总览</a></li> ... <li >账户收支明细</a></li> ... <li class="on">充值</a></li> ....snb .nav li:hover a,.snb .nav li.on a{color:#fff}
  • 表单常用样式汇总

    2019-06-25 08:39:57
    input-placeholder获取焦点清空 ....nr ul li span:after{ content:" "; display:inline-block; width:100%;}             待补充...                
  • 工作中用select总是遇到很多问题,例如经常出现select无法被div等元素遮盖,我想用其他元素模拟select可能会更好,最近刚学jquery,于是就写了个效果来模拟,顺便练习下,代码很冗长,希望大家多拍砖。
  • HTML之ul背景色

    万次阅读 2017-01-20 21:21:59
    在使用ul制作下拉菜单时,效果如下,要给菜单栏(即ul)加上背景色,发现background-color没起作用。查看ul元素盒子大小,发现盒子高度为0。HTML:<div id="menuList"> <ul> <li>学院概况</li> <li>学科建设</li>...
  • 今天要向大家分享一款基于CSS3和jQuery的带小图标精美输入表单,该CSS3表单一共有3款样式,需要高版本的浏览器才能支持,不过真的是一款很酷的CSS3表单。 下面我们来简单分析一下这款表单的源代码,源代码由HTML...
  • 常用的块级标签 块级元素默认独自占一行,可嵌套; 可设置 width(宽)、height(高)、内外边距等...class 定义元素的一个或多个类名通常与样式表结合使用,用于设置标签的样式 style 用于在行内设置样式 ...
  • css层叠样式表单

    2019-08-01 00:53:21
    <li>网络营销</a></li> <li>|</a></li> <li>企业VI</a></li> <li>|</a></li> <li>案例展示</a></li> <li>|</a></li> <li>联系我们</a></li> </ul> 效果: 写qq邮箱登录界面 代码: <!DOCTYPE ...
  • vue 给当前li添加背景色 思路1:循环li列表并且获取到当前li的索引值 看代码: <div id="app"> <h1>{{ msg }}</h1>...input type="text" v-model="msg">...获取表单数据</butto...
  • 一款漂亮的表单输入框样式

    千次阅读 2019-08-14 13:54:00
    ul.input_test li{ width:500px; height:22px; margin-bottom:10px; } .input_test label{ float:left; padding-right:10px; width:100px; line-height:22px; text-align:right; font-size:1.4em; } .input_test p{ ...
  • 载入样式表单出错: 分析 XSLT 样式表单失败。 "错误 经过仔细的检查, 发现错误原因是xsl文件中, 头信息声明的命名空间写错了: w3c实际上应该是w3 改正后, 一切正常, 而且字体的颜色也变掉了, 由无法...
  •  修改fielderror.ftl配置文件,这一步才是关键,如何修改了,实际上也很简单,就是把<ul></ul><li></li>标签删除(仅仅是删除标签而不删除标签里面的内容),简便的方法就是用记事本打开这个文件并用空格替换上面的...
  • ul.input_test li { width : 500px ; height : 22px ; margin-bottom : 10px ; } .input_test label { float : left ; padding-right : 10px ; width : 100px ; line-height : 22px ; text-align : right...
  • 但是这个必须要设置宽width,要不然不起作用,当我们在遇到一些要求适配不止数目的LI的时候,固定的宽就有局限性,所以我们要改成弹性的宽度,这时候可以在UL加上一个 display: table; 【重点就是这个属性,这个样式会...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 37,960
精华内容 15,184
关键字:

liul表单样式