divcss布局经典实例，divcss布局模板代码
效果图：
效果图
div + css 实现登录界面，用到的知识点：
表单、h、div、input标签的使用
行内元素和块级元素的区别
css类选择器和标签选择器
字体属性，包括大小、颜色、对齐等
border的使用
padding和margin的使用
实现代码 :
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>登录</title>
<script>
</script>
<style type="text/css">
body{ background-color: #abdde8; text-align: center; overflow: hidden; margin: 0;
} .turn { width: 400px; height: 330px; margin: 200px auto;
}
form{ background-color: #Fcfbfa; height: 100%; border-radius: 8px;
} h1{ padding-top: 20px; color: #1f2029; user-select: none;
} input { background-color: #4e4950; width: 70%; height: 48px; border-radius: 8px; margin-bottom: 20px; padding: 0 20px; font-size: 18px; color: #c4c3ca; font-weight: 500; outline: none; border: none; box-shadow: 0 4px 8px 0 rgba(78,73,79,0.5);
} .btn { background-color: #981e61; border: none; width: 280px; font-size: 24px; font-weight: 600; padding: 6px 0; color: white; border-radius: 8px; margin-top: 15px;
} </style></head><body><div class="turn">
<form action="" class="login">
<h1>欢迎登录</h1>
<input type="text" placeholder="用户名">
<input type="password" placeholder="密码">
<input type="submit" class="btn" value="登 录">
</form></div></body></html>本文地址：IT百科频道 https://www.hkm168.com/tags/903293.html，易企推百科一个免费的知识分享平台，本站部分文章来网络分享，本着互联网分享的精神，如有涉及到您的权益，请联系我们删除，谢谢！
相关阅读
