css实现简单登录框
边框：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*常见操作，初始化0*/
h1,ul,li,a,body{
/*body总有一个默认的外边距，这里使之为0*/
margin: 0;
padding: 0;
text-decoration: none;
}
/*border: 粗细 样式 颜色*/
#box{
width: 300px;
border: 1px solid red;
}
h2{
font-size: 16px;
background-color: rosybrown;
line-height: 30px;
margin: 0;
}
form{
background: greenyellow;
}
/*solid实线*/
div:nth-of-type(1) input{
border: 3px solid black;
}
/*dashed虚线*/
div:nth-of-type(2) input{
border: 3px dashed yellow;
}
div:nth-of-type(3) input{
border: 2px dashed violet;
}
</style>
</head>
<body>
<div id="box">
<h2>会员登录</h2>
<form action="#">
<div>
<span>用户名：</span>
<input type="text">
</div>
<div>
<span>密码：</span>
<input type="password">
</div>
<div>
<span>邮箱：</span>
<input type="text">
</div>
</form>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*常见操作，初始化0*/
h1,ul,li,a,body{
/*body总有一个默认的外边距，这里使之为0*/
margin: 0;
padding: 0;
text-decoration: none;
}
/*border: 粗细 样式 颜色*/
#box{
width: 300px;
border: 1px solid red;
}
h2{
font-size: 16px;
background-color: rosybrown;
line-height: 30px;
margin: 0;
}
form{
background: greenyellow;
}
/*solid实线*/
div:nth-of-type(1) input{
border: 3px solid black;
}
/*dashed虚线*/
div:nth-of-type(2) input{
border: 3px dashed yellow;
}
div:nth-of-type(3) input{
border: 2px dashed violet;
}
</style>
</head>
<body>
<div id="box">
<h2>会员登录</h2>
<form action="#">
<div>
<span>用户名：</span>
<input type="text">
</div>
<div>
<span>密码：</span>
<input type="password">
</div>
<div>
<span>邮箱：</span>
<input type="text">
</div>
</form>
</div>
</body>
</html>
效果：
圆角边框：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 50px;
border: 10px solid red;
border-radius: 50px 50px 0px 0px;
margin: 0 auto;
}
/*图片削圆角*/
img{
border-radius: 200px;
}
</style>
</head>
<body>
<div></div>
<img src="images/book_cover.jpg" alt="">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 50px;
border: 10px solid red;
border-radius: 50px 50px 0px 0px;
margin: 0 auto;
}
/*图片削圆角*/
img{
border-radius: 200px;
}
</style>
</head>
<body>
<div></div>
<img src="images/book_cover.jpg" alt="">
</body>
</html>
效果：
温馨提示 : 非特殊注明，否则均为©李联华的博客网原创文章，本站文章未经授权禁止任何形式转载;IP地址：3.239.76.211，归属地:弗吉尼亚州Ashburn ，欢迎您的访问!
文章链接：https://www.ooize.com/css-implementation-of-simple-login-box.html
文章链接：https://www.ooize.com/css-implementation-of-simple-login-box.html
订阅
登录
0 评论
