字体,表格,表单知识点

设计图

代码实现

 -  html代码

<!DOCTYPE html>
<html>
<head><title></title><link rel="stylesheet" type="text/css" href="登录.css">
</head>
<body><div class="header"><div class="inner"><div class="innerleft"><span><img src="../../img/test1-5/logo.png" height="50px"></span><span><a href="#">首页</a><a href="#">播客</a><a href="#">专栏课程</a><a href="#">下载</a><a href="#">问答</a><a href="#">社区</a><a href="#">插件</a><a href="#">认证</a></span></div><div class="innercenter"><input type="text" placeholder="mysql安装教程"><img src="../../img/test1-5/research.jpg"></div><div class="innerright"><span><a href="#">登录/注册</a><a href="#">会员中心</a><a href="#">收藏</a><a href="#">消息</a></span><span><img src="../../img/test1-5/chuangzuo.jpg"></span></div></div></div><div class="content"><div class="space"></div><div class="main"><div class="contentleft"><h2>CAP 定理</h2><p>"1998 年，布鲁尔提出 CAP 定理。CAP 定理是指一个分布式系统不可能同时满足以下三点：一致性（Consistency）、可用性（Availability）和分区容错性（Partition tolerance）。CAP 定理一开始由布鲁尔以猜想的形式提出，又被称作布鲁尔定理。"</p></div><div class="contentright"><div class="bd"><span style="border-bottom-color: orange;"><a href="#">账号密码登录</a></span><span><a href="#">手机免密登录</a></span><input type="text" placeholder="手机号/邮箱/用户名"><input type="password" placeholder="密码"><p>忘记密码</p><input type="button" value="登录" class="btu"></div><div class="bf"><span><a href="#">微信注册登录</a>|<a href="#">CSDN App扫码</a>|<img src="../../img/test1-5/icons.png"></span></div><p class="ppp">未注册手机验证后自动登录，注册即代表同意《服务条款》</p></div></div></div><div class="footer"><div class="fh"><ul><li>关于我们</li><li>招贤纳士</li><li>广告服务</li><li>开发助手</li><li>开发助手</li><li>400-660-0108</li><li>kefu@csdn.net</li><li>在线客服</li><li>工作时间 8:30-22:00 </li></ul></div><div class="fm"><ul><li>京ICP备19004658号</li><li>京网文〔2020〕1039-165号</li><li>经营性网站备案信息</li><li>北京互联网违法和不良信息举报中心</li><li>网络110报警服务</li><li>中国互联网举报中心</li><li>家长监护</li><li>Chrome商店下载</li><li>©1999-2021北京创新乐知网络技术有限公司</li><li>公安备案号11010502030143</li><li>版权与免责声明</li><li>版权申诉</li><li>出版物许可证</li><li>营业执照</li></ul></div></div>
</body>
</html>

 - css代码

*{margin: 0;padding: 0;border:0;background: none;text-decoration: none;
}
.header .inner{height: 50px;width: 100%;background-color: white;display: inline-block;padding:0 50px;
}
.header .inner .innerleft img{float: left;
}
.header .inner .innerleft a,.header .inner .innerright a{line-height: 50px;float: left;height: 50px;padding-left: 20px;color: black;
}
.header .inner .innercenter{height: 30px;width: 400px;float: left;border: 1px solid white;  border-radius: 10px;background-color: #f5f6f7;  margin:10px 30px;
}
.header .inner .innercenter input{margin: 5px;margin-left: 10px;color: #d2c4c5;
}
.header .inner .innercenter img{height: 30px;float: right;
}
.header .inner .innerright img{height: 30px;float: left;margin:10px 30px;
}.content{width:100%;height: 600px;background-image:url("../../img/test1-5/bg.jpg") ;background-size: 100% 600px;margin: auto;
}
.content .space{width: 100%;height: 70px;background-color: transparent;}
.content .main{height:500px;width: 780px;margin: 0 auto;
}
.content .main .contentleft{width: 250px;height: 300px;color: white;background-color: rgba(0,0,0,0.5);padding: 80px 30px;line-height: 35px;float: left;}
.content .main .contentright{width: 460px;height: 460px;background-color: white;float: left;
}
.content .main .contentright .bd{width: 400px;height: 300px;margin: 35px 75px;
}
.content .main .contentright .bd span{display: inline-block;width: 100px;height: 20px;border-bottom: 2px solid #f7f7f7;float: left;margin: 30px 0px;padding:0 20px;}
.content .main .contentright .bd a{color: #634d7f;
}
.content .main .contentright .bd input{height: 30px;width: 230px;border: 1px solid #634d7f;border-radius: 8px;margin: 10px 20px;padding: 2px 10px;
}
.content .main .contentright .bd p{margin-left: 200px;
}.content .main .contentright .bd .btu{width: 250px;background-color: #f5f5f5;
}
.content .main .contentright .bf{width: 380px;height: 35px;margin: auto;color: #6cd5ff;
}
.content .main .contentright .bf a{color: #6cd5ff;line-height: 35px;display: inline-block;}
.content .main .contentright .bf img{width: 160px;height: 30px;vertical-align: middle;
}
.content .main .contentright .ppp{font-size: 13px;color: #c7c7cf;float: right;margin-top: 15px;
}.footer{width: 100%;height: 120px;text-align: center;
}
.footer .fh{width: 80%;margin: 20px auto;color: grey;
}
.footer .fm{width: 90%;margin: 20px auto;color: grey;
}
.footer .fh li{display: inline;margin-left: 20px;font-size: 15px;list-style: none;
}
.footer .fm li{display: inline;margin-left: 20px;font-size: 10px;list-style: none;
}

知识拓展:

1. 设置图片居中

vertical-align 是针对行内元素来设置的，对于块级元素是没有用的
vertical-align：middle
如果相对块级元素有用，同时还要需要添加dispaly：table-cell
正常情况下，图片和文字是底边对齐显示的，img标签可以直接设置宽度和高度，只设置一个会等比例缩放。

2. li标签的横向排列

使用float:left
使用display:inline
list-style:none,这个属性可以直接去掉li前面的圆点，可以自己进行设置其他美观的样式或者列表显示的样式。

3. 实现背景透明，文字不透明

为元素添加一个绝对定位的子元素，设置大小和该元素一样，把半透明加在绝对定位元素上作为遮罩，z-index设置到最底部，达到背景半透明效果。

使用CSS3新属性rgba。

 css3的opacity，取值从 0 到 1，如opacity : 0.5，IE9及以上版本和标准浏览器都支持。IE8 以及更早的版本支持替代的 filter 属性，例如：filter : Alpha(opacity=50)。css3的rgba(red, green, blue, alpha)，alpha的取值从 0 到 1，如background-color : rgba(255,255,255,0.5)。

任务01-05-登录界面相关推荐

h5可以获取本机手机号码么_人人都可写代码-H5零基础编程-登录界面实操05
欢迎来到人人都可写代码,大家好,我是杨晓华,今天我们的课程内容是,项目实操,开发一个登录界面的H5. 这是要实现的H5登录界面展示效果,手机号+验证码的登录方式:下面就是教大家如何制作的步骤: 1.在 ...
linux蓝色界面,让Ubuntu7.01开机登录显示蓝色与黑色
从Ubuntu7.10正式发布开始就用ubuntu7.10了,但是总觉的那开机的黄色不太另人舒服. 我觉得kubuntu的界面很不错,蓝色 .我还是比较喜欢蓝色和黑色的结合. 现在动手告别黄色,向富有 ...
用户登录界面（Bootstrap）入门教程01（适合初学者）
首先博主也是小白,之前没学过前端,花了一晚上做了个登录界面,想分享给大家,比较适合初学者来快速学习,博主以后也好好学基础的前端. 首先先上我做的登录界面的图: 因为博主水平有限,对前端认识太少,只能做 ...
C++单链表学生管理系统（有登录界面）
C++单链表学生管理系统这个程序是我好几天的心血,欢迎大家指正!!! 该程序需要新建三个txt文件.1.login.txt用来存放注册用户的用户名与密码. 2.login2.txt用于登录时将lo ...
黑客登录界面科幻黑色主题网页模板表单验证代码
黑客登录界面科幻黑色主题网页模板表单验证代码效果: html代码: <!DOCTYPE html> <html lang="en"><head> ...
FLEX PHP 交互简单登录界面（1）源代码
简单的不能再简单的flex 与 php 交互的登录界面 (没有使用mysql) 主要是解决 httpService 的一些问题代码在附件中 (本例用flex builder 3 和 Deamwea ...
(三)SSO之CAS框架单点退出,退出到CAS登录界面
应需求的改变.CAS自己定义登录页面不安全,不再使用,于是我一下子回到了原点.在linux上部署上了没有加自己定义登陆界面的CAS,接下来開始改动CAS自己默认的登录界面为我们的界面. 一下子改动成功 ...
如何修改SAP登录界面的文字
我们使用 SAP 的时候,经常会觉得登录那个界面太简单了,诺大一个屏幕上,只有左面那个角落放了客户端.用户.口令.语言这几个输入框,其他地方都空荡荡的. 而安装过 miniSAP 后会发现,除了左面 ...
Bootstrap4+MySQL前后端综合实训-Day06-AM【eclipse详细配置Tomcat、开发web项目、servlet、连接MySQL8.0数据库、用户登录界面的编写与验证、分页查询】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记][附:实训所有代码] 目录 eclipse重置视图 MySQL数据库--建数据库.建数据库 s ...
软件登录界面设计分享
头一直要求我们设计出的东东,简洁大气,美观.我不是美术院校毕业的,这个借口从毕业开始已经说了几年,作为程序员,公司老员工,负起责任,我不去努力找方法,靠谁呢?软件用户,它只管把事情做完就好了,最好这个 ...

任务01-05-登录界面

登录界面

字体,表格,表单知识点

设计图

代码实现

知识拓展:

1. 设置图片居中

2. li标签的横向排列

3. 实现背景透明，文字不透明

任务01-05-登录界面相关推荐

最新文章

热门文章