第三 课 简易登陆框
程序员文章站
2022-06-28 10:50:42
一.效果图 二、. 三、源码
<div class="content">
<p>一.效果图</p>
<p><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczMuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAxOTAxMjUvYl8wXzIwMTkwMTI1MDcyMTIwNTg3OC5qcGc=" alt="第三 课 简易登陆框" title="第三 课 简易登陆框"></p>
<p>二、.</p>
<p>三、源码</p>
<div class="cnblogs_code">
<img onerror="this.src='/statics/superweb999/images/image_error.jpg'"id="code_img_closed_e977883e-2074-4a8b-a349-47149e67712d" class="code_img_closed" src="/default/index/img?u=aHR0cDovL2ltYWdlcy4xMHFpYW53YW4uY29tLzEwcWlhbndhbi8yMDE3MTIwOC9iXzFfMjAxNzEyMDgxOTUzMzY2NDY0LmpwZw==" alt="第三 课 简易登陆框" title="第三 课 简易登陆框"><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"id="code_img_opened_e977883e-2074-4a8b-a349-47149e67712d" class="code_img_opened" style="display: none" src="/default/index/img?u=" alt="第三 课 简易登陆框" title="第三 课 简易登陆框"><div id="cnblogs_code_open_e977883e-2074-4a8b-a349-47149e67712d" class="cnblogs_code_hide">
<pre class="brush: css;"><!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="关键词">
<meta name="description" content="描述">
<title>登陆框</title>
<title>document</title>
<style>
body{
margin: 0;
padding: 0;
}
#login{
margin: 100px auto;
width: 300px;
height: 300px;
background-color: #66ffff;
border-radius: 10px;
text-align: center;
}
#login:before{/*头部颜色变换样式，只是显示样式，不是实际内容，使用伪类*/
content: '';/*激活伪类*/
display: block;/*变为块级元素，才能显示出来*/
width: 100%;
height: 10px;
background-image: -webkit-linear-gradient(left,#390 0%,#390 20%,#60f 20%,#60f 40%,#3cf 40%,#3cf 60%,#f30 60%,#f30 80%,#fc3 80%,#fc3 100%);/* -webkit: 使用谷歌内核 -linear-gradient：颜色渐变属性，css3新属性只适用于谷歌内核 */
border-radius: 10px 10px 0 0;
}
#login h1{
color: #096;
}
#login input{
width: 240px;
height: 40px;
margin-bottom: 30px;
border-radius: 5px;
}
.text{
border: 1px solid #333;
text-indent: 20px;/* 缩进 */
}
.submit{
border: none;/*清除边框样式*/
background-color: #2290de;
}
</style>
</head>
<body>
<div id="login">
<h1>login</h1>
<input type="text" class="text" placeholder="请输入用户名"><!-- placeholder 文本提示 -->
<input type="password" class="text" placeholder="请输入密码">
<input type="submit" class="submit">
</div>
</body>
</html></pre>
</div>
<span class="cnblogs_code_collapse">view code</span>
</div>
<p> </p> </div>
<div class="info-pre-next">
<p>
上一篇： <a href="/article/1560121.html">
python如何安装cv2 </a>
</p>
<p>
下一篇： <a href="/article/1560123.html">
联想小新智能语音鼠标发布：变革输入方式 </a>
</p>
</div>
<div class="wz_tuijian">
<p>
推荐阅读 </p>
<ul>
<li>
<a href="/article/1560122.html" target="_blank" title="第三 课 简易登陆框">
<h2>
第三 课 简易登陆框 </h2>
</a>
</li>
<li>
<a href="/article/783650.html" target="_blank" title="安卓入门第三讲01-Activity的简单逻辑操作（对文本，图片进行设置（两种获取控件的方法），按钮点击-点击按钮打印日志，获取文本框的值+计算器简易案例）">
<h2>
安卓入门第三讲01-Activity的简单逻辑操作（对文本，图片进行设置（两种获取控件的方法），按钮点击-点击按钮打印日志，获取文本框的值+计算器简易案例） </h2>
</a>
</li>
<li>
<a href="/article/605357.html" target="_blank" title="第三 课 简易登陆框">
<h2>
第三 课 简易登陆框 </h2>
</a>
</li>
</ul>
</div>
</article>
</div>
</main>
<footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body>
</html>