码迷,mamicode.com
首页 > 其他好文 > 详细

表单布局

时间:2016-10-20 01:28:00      阅读:218      评论:0      收藏:0      [点我收藏+]

标签:表单布局

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>布局</title>

<style>

    #diban{

    width:1000px;

    height:1000px;

    background-image:url(./body.png); 插入背景图片

    background-repeat:repeat-x; 背景图像在横向上平铺

    margin:0 auto;

   

    #yonghudenglu{

    width:150px;

    height:70px;

    margin:0 auto;

    line-height:70px;

   

#xingming{

width:230px;

height:50px;

margin:0 auto;

margin-bottom:20px;

#xingkuang{

width:230px;

height:50px;

border-color:red; 边框颜色

border-top-style:dotted; 上边框形状

border-top-width:thick;

border-right-width:thick;  边框粗细

border-bottom-width:thick;

border-left-width:thick;

font-size:30px; 字体大小

border-top-left-radius:10px;

border-top-right-radius:10px;  改变的圆角边框

border-bottom-left-radius:10px;

border-bottom-right-radius:10px;

}

#youxiang{

width:200px;

height:30px;

margin:0 auto;

background:red;

}

#email{

width:200px;

height:30px;

#mima{

width:200px;

height:30px;

margin:0 auto;

}

#password{

width:200px;

height:30px;

}

#tijiao{

width:80px;

height:40px;

margin:0 auto;

}

#submit{

width:80px;

height:40px;

}

</style>

</head>

<body>        每个表单外都套一个div好进行布局

<div id=diban>

<div id=yonghudenglu>

<h1>用户登录</h1>

</div>

<div id=xingming>

<form action="./index.php" method="post" >

<input id=xingkuang type="name" name="name" value="" placeholder="请输入姓名">

</form>

</div>

<br>

<div id=youxiang>

<form action="./index.php" method="post" >

<input id=email type="email" name="email" value="" placeholder="请输入邮箱">

</form>

</div>

<br><br>

<div id=mima>

<form action="./index.php" method="post" >

<input id=password type="password" name="email" value="" placeholder="请输入密码">

</form>

</div>

<br><br>

<div id=tijiao>

<form action="./index.php" method="post" >

<input id=submit type="submit" name="submit" value="提交" >

</form>

</div>

</div>

</body>

</html>

技术分享

表单布局

标签:表单布局

原文地址:http://12155701.blog.51cto.com/12145701/1863427

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!