Home > Web Front-end > HTML Tutorial > How should I change this layout_html/css_WEB-ITnose

How should I change this layout_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 12:17:18
Original
1208 people have browsed it


现在的效果是这样的,“用户名”和“密码”的div在输入框的右边,应该放在输入框的左边,请问应该怎么调整。

<!DOCTYPE html>  <html xmlns="http://www.w3.org/1999/xhtml"><head><title></title><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><link rel="stylesheet" type="text/css" href="css/index.css" /></head><body><form id="Index" runat="server"><div class="container"><div class="login_container" id="Div1"><div class="login_box"><div class="logo_title"><h1>登录信息系统</h1></div><asp:Label ID="lblMessage" runat="server" ForeColor="OrangeRed"></asp:Label><div class="login_operate" style="display:block" id="web_login"><div class="username"><label class="txt_default" for="uin" id="label_uin" default_txt="用户名"> </label><input  class="txt alias" id="username" name="uin" type="text" tabindex="1"   /><input  readonly="readonly" class="login_domain" id="domain" name="u_domain" style="font-size:18px;" value="用户名" type="text" tabindex="-1"/><input id="u" name="u" value="" type="hidden" /></div><div class="username"><label class="txt_default" for="p" id="label_p" default_txt="密码"> </label><input  class="txt alias" id="userpwd" name="p" type="password" tabindex="2"   /><input  readonly="readonly" class="login_domain" id="Text1" name="u_domain" style="font-size:18px;" value="密 码" type="text" tabindex="-1"/></div></div></div></div></div></form></body></html>
Copy after login


html,body,p,ul,li,h1,input,form {	margin: 0;	padding: 0;}body,input {	font: 12px Verdana,Arial,Helvetica;}body {	background: white;}.container {	width: 800px;	margin: 20px auto 0;	min-height: 500px;}.mask {	position: absolute;	z-index: 10;	left: 0;	top: 0;	width: 100%;	height: 100%;	background: #FFFFFF;	opacity: 0.6;	filter: alpha(opacity=60);}.login_container {	float: right;}.login_box {	position: relative;	z-index: 11;	width: 305px;	margin-right: 4px;	padding: 20px;	border: 1px solid #ACC3E4;	background: #EDF5FF;	-moz-box-shadow: 2px 2px 3px rgba(0,0,0,0.15);	-webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.15);	border-radius: 5px;	-webkit-border-radius: 5px;}.login_box h1 {	color: #274571;	font-size: 16px;}.login_box .login_operate {	padding: 12px 0 20px;}.login_operate .username,.login_operate .password,.login_operate .about_password,.login_operate .login_submit {	position: relative;	width: 305px;	padding: 5px 0;	z-index: 2\9;}.login_operate .login_submit .login_cancel {	margin-left: 12px;}.login_operate .username {	height: 38px;	position: relative;	z-index: 10\9;}.login_operate .about_password {	padding: 4px 0;	z-index: 1\9;}.login_operate .vfcodeinput {	height: 55px;	padding-bottom: 3px;}.login_box .txt {	position: relative;	width: 295px;	height: 34px;	line-height: 34px;	padding: 0 4px;	color: #494949;	border: 1px solid #9DADC5;	font-size: 20px;	background: transparent;	outline: none;	border-radius: 3px;	-webkit-border-radius: 3px;	-webkit-transition: -webkit-box-shadow .1s linear;	-moz-transition: box-shadow .1s linear;}.login_box .alias {	width: 174px;	padding-right: 125px;}.login_domain {	position: absolute;	top: 6px;	*top: 7px;	right: 1px;	width: 112px;	height: 31px;	line-height: 32px;	padding: 0 0 3px 8px;	border: none;	border-left: 1px solid #D5DEEC;	color: #4D4D4C;	font-size: 18px;	z-index: 1;	background: url(images/login_ico_selector.gif) no-repeat scroll 105px -25px #FBFBFB;	border-radius: 0 3px 3px 0;	-webkit-border-radius: 0 3px 3px 0;	box-shadow: -1px 0 2px rgba(0,0,0,0.09);}.active .login_domain,.login_domain: hover {	background-position: 105px 11px;	background-color: #f7fafe;}.login_box .txt_default,.login_box .txt_dim {	position: absolute;	top: 6px;	left: 1px;	width: 289px;	height: 34px;	padding: 0 7px;	line-height: 34px;	font-size: 14px;	color: #8B9096;	background: url(images/login104474.png) no-repeat scroll -1px -97px white;	border-radius: 3px;	-webkit-border-radius: 3px;}.login_operate .username_immutable {	padding: 0;	color: #494949;	font-weight: bold;	background: none;	font-size: 16px;}.login_box .txt_dim {	color: #DCDDDF;}.login_box .txt: focus {	border: 1px solid #9BBBDA;	box-shadow: 0 0 5px rgba(110,189,222,0.5);	-webkit-box-shadow: 0 0 5px rgba(110,189,222,0.5);}.login_box .captips {	position: absolute;	top: 43px;	left: 0;	z-index: 20;	padding: 1px;	border: 1px solid;	border-color: #dbc492 #b49366 #b49366 #dbc492;	background: #fdf6aa;}.login_box .vfcodeinput input,.login_box .vfcodeinput label {	width: 148px;	height: 34px;	line-height: 34px;	letter-spacing: 2px;	font-size: 26px;}.login_box .vfcodeinput label {	font-size: 18px;	line-height: 34px;	width: 142px;}.login_box .verifytip,.login_box .vfcode_change {	padding: 10px 0 3px;}.login_operate .login_submit {	clear: both;}.login_box .login_btn_wrapper {	display: inline-block;	width: 82px;	height: 30px;	height: 28px\9;	margin-top: 9px;	border: 1px solid;	border-color: #6B9F11 #54850A #386601;	background: url(images/login104474.png) repeat-x #67A00D;	background-position: 0 -1px\9;	-webkit-transition: -webkit-box-shadow .1s linear;	-moz-transition: box-shadow .1s linear;	border-radius: 3px;	-webkit-border-radius: 3px;}.login_box .login_btn_wrapper_disabled {	display: inline-block;	width: 82px;	height: 30px;	height: 28px\9;	margin-top: 9px;	border: 1px solid;	border-color: #6B9F11 #54850A #386601;	background: url(images/login104474.png) repeat-x #67A00D;	background-position: 0 -1px\9;	border-radius: 3px;	-webkit-border-radius: 3px;	opacity: 0.7;	filter: alpha(opacity=70);}.mail_intro {	width: 400px;	margin-left: 16px;}.mail_intro h1 {	display: none;}.mail_intro ul {	line-height: 20px;}.mail_intro ul li {	margin-left: 16px;	list-style: disc outside;}
Copy after login


回复讨论(解决方案)

html,body,p,ul,li,h1,input,form {	margin: 0;	padding: 0;}body,input {	font: 12px Verdana,Arial,Helvetica;}body {	background: white;}.container {	width: 800px;	margin: 20px auto 0;	min-height: 500px;}.mask {	position: absolute;	z-index: 10;	left: 0;	top: 0;	width: 100%;	height: 100%;	background: #FFFFFF;	opacity: 0.6;	filter: alpha(opacity=60);}.login_container {	float: right;}.login_box {	position: relative;	z-index: 11;	width: 305px;	margin-right: 4px;	padding: 20px;	border: 1px solid #ACC3E4;	background: #EDF5FF;	-moz-box-shadow: 2px 2px 3px rgba(0,0,0,0.15);	-webkit-box-shadow: 2px 2px 3px rgba(0,0,0,0.15);	border-radius: 5px;	-webkit-border-radius: 5px;}.login_box h1 {	color: #274571;	font-size: 16px;}.login_box .login_operate {	padding: 12px 0 20px;}.login_operate .username,.login_operate .password,.login_operate .about_password,.login_operate .login_submit {	position: relative;	width: 305px;	padding: 5px 0;	z-index: 2\9;}.login_operate .login_submit .login_cancel {	margin-left: 12px;}.login_operate .username {	height: 38px;	position: relative;	z-index: 10\9;}.login_operate .about_password {	padding: 4px 0;	z-index: 1\9;}.login_operate .vfcodeinput {	height: 55px;	padding-bottom: 3px;}.login_box .txt {	position: relative;	width: 295px;	height: 34px;	line-height: 34px;	padding: 0 4px;	color: #494949;	border: 1px solid #9DADC5;	font-size: 20px;	background: transparent;	outline: none;	border-radius: 3px;	-webkit-border-radius: 3px;	-webkit-transition: -webkit-box-shadow .1s linear;	-moz-transition: box-shadow .1s linear;	float:right;}.login_box .alias {	width: 174px;}.login_domain {	position: absolute;	top: 6px;	*top: 7px;	left:0px;	width: 112px;	height: 31px;	line-height: 32px;	padding: 0 0 3px 8px;	border: none;	border-left: 1px solid #D5DEEC;	color: #4D4D4C;	font-size: 18px;	z-index: 1;	background: url(images/login_ico_selector.gif) no-repeat scroll 105px -25px #FBFBFB;	border-radius: 0 3px 3px 0;	-webkit-border-radius: 0 3px 3px 0;	box-shadow: -1px 0 2px rgba(0,0,0,0.09);}.active .login_domain,.login_domain: hover {	background-position: 105px 11px;	background-color: #f7fafe;}.login_box .txt_default,.login_box .txt_dim {	position: absolute;	top: 6px;	left: 1px;	width: 289px;	height: 34px;	padding: 0 7px;	line-height: 34px;	font-size: 14px;	color: #8B9096;	background: url(images/login104474.png) no-repeat scroll -1px -97px white;	border-radius: 3px;	-webkit-border-radius: 3px;}.login_operate .username_immutable {	padding: 0;	color: #494949;	font-weight: bold;	background: none;	font-size: 16px;}.login_box .txt_dim {	color: #DCDDDF;}.login_box .txt: focus {	border: 1px solid #9BBBDA;	box-shadow: 0 0 5px rgba(110,189,222,0.5);	-webkit-box-shadow: 0 0 5px rgba(110,189,222,0.5);}.login_box .captips {	position: absolute;	top: 43px;	left: 0;	z-index: 20;	padding: 1px;	border: 1px solid;	border-color: #dbc492 #b49366 #b49366 #dbc492;	background: #fdf6aa;}.login_box .vfcodeinput input,.login_box .vfcodeinput label {	width: 148px;	height: 34px;	line-height: 34px;	letter-spacing: 2px;	font-size: 26px;}.login_box .vfcodeinput label {	font-size: 18px;	line-height: 34px;	width: 142px;}.login_box .verifytip,.login_box .vfcode_change {	padding: 10px 0 3px;}.login_operate .login_submit {	clear: both;}.login_box .login_btn_wrapper {	display: inline-block;	width: 82px;	height: 30px;	height: 28px\9;	margin-top: 9px;	border: 1px solid;	border-color: #6B9F11 #54850A #386601;	background: url(images/login104474.png) repeat-x #67A00D;	background-position: 0 -1px\9;	-webkit-transition: -webkit-box-shadow .1s linear;	-moz-transition: box-shadow .1s linear;	border-radius: 3px;	-webkit-border-radius: 3px;}.login_box .login_btn_wrapper_disabled {	display: inline-block;	width: 82px;	height: 30px;	height: 28px\9;	margin-top: 9px;	border: 1px solid;	border-color: #6B9F11 #54850A #386601;	background: url(images/login104474.png) repeat-x #67A00D;	background-position: 0 -1px\9;	border-radius: 3px;	-webkit-border-radius: 3px;	opacity: 0.7;	filter: alpha(opacity=70);}.mail_intro {	width: 400px;	margin-left: 16px;}.mail_intro h1 {	display: none;}.mail_intro ul {	line-height: 20px;}.mail_intro ul li {	margin-left: 16px;	list-style: disc outside;}
Copy after login

CSS code?1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939……


成这样的了,原来有框的,现在没有了


注意下高跟宽 很容易修改的 。

改.login_domain 的border

border: 1px solid #9DADC5;

加个display:block;然后浮动

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template