css表单

最新推荐文章于 2024-07-29 22:33:33 发布

TF_LIU

最新推荐文章于 2024-07-29 22:33:33 发布

阅读量623

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/u014604726/article/details/51853320

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">//DOCTYPE 声明
<html xmlns="http:www.w3.org/1999/xhtml" xml:lang="en">//这是一个W3C的标准ang代表language，lang="en"，"en" 即english xml:lang就是xml的语言，xml是一种html扩展语言，功能强大。
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">//描述文档类型，页面字符集
<title>Document</title>//设置网页title
<style type="text/css">
.box{
border: 1px solid red;//表格外框宽度和颜色
width: 400px; //表格宽度
height: 200px;//表格高度
text-align: center;//字体内容居中
position: absolute;//浏览器绝对位置
top: 50%;//设置表格为浏览器一半
left: 50%;//设置表格为浏览器一半
margin-left: -220px;//表格左移220px
margin-top: -120px;//表格上移120px
padding: 20px;//表格内部周边距外框20
border-radius: 10px;//表格外框圆角
box-shadow: 0px 0px 10px #d8d8d8;//表格外框阴影
}
form p input{
width: 260px;//输入框宽260
height: 48px;//输入框高48
outline: none;//去除输入框边框
padding: 0px 10px;//设置输入框字体内边距x0 y10
border: 1px solid #d8d8d8;//表格外框宽度和颜色
}
.btn{
width: 282px;//按钮宽度282
position: relative;//设置按钮相对位置
left: 50px;//设置按钮距左50
background-color: #0082e5;//设置按钮背景颜色
color: #ffffff;//设置按钮字体颜色
border: 0px;//去除边框
font-size: 16px;//表格宽度
cursor: pointer;//增加手指
}
.btn:hover{
background: #0079d5;//设置手指时按键背景颜色
}

label{
display: inline-block;//设置左侧label显示
width: 97px;//label宽度
text-align: left;//label字体靠左现实
}
</style>
</head>
<body>
<div class ="box"> //设置div 名字
<form>
<p><label>请输入邮箱: </label> <input type="text" placeholder="请输入你的邮箱"/></p>//创建label和输入框
<p><label>密码:</label> <input type="password" placeholder="请输入你的密码"/></p>//创建label和输入框
<p> <input type="button" value ="按钮" class="btn"/></p>//创建按钮
</form>
</div>
</body>
</html>