bootstrap+css实现表单透明效果
2020-07-14 04:49
786 查看
前言:
前端静态网页contact二级页面小案例,使用bootstrap中的栅格布局，js插件登录注册模态框和css样式实现表单透明效果,具体效果如下:
html部分:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>联系我们</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/style.css"> <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script> <script type="text/javascript" src="js//bootstrap.min.js"></script> </head> <body> <!-- 头部导航header start --> <header> <nav class="navbar navbar-default navbar-inverse"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#" class="nav-brand"> <img src="images/index/logo.png"> </a> </div> <div class="collapse navbar-collapse navbar-left" id="navbar-collapse-1"> <ul class="nav navbar-nav "> <li ><a href="index.html">首页<span class="sr-only"></span></a></li> <li ><a href="gallary.html">商城</a></li> <li ><a href="design.html">研发设计</a></li> <li ><a href="news.html">新闻资讯</a></li> <li class="active"><a href="contact.html">联系我们</a></li> <li ><a href="about.html">关于我们</a></li> </ul> </div> <div class="list nav navbar-right"> <a href="" class="btn navbar-btn btn_login" data-toggle="modal" data-target="#login_modal">登录</a> <a href="" class="btn navbar-btn btn_register" data-toggle="modal" data-target="#register_modal">注册</a> <img src="images/index/shopcat.png" class="shopcat" alt=""> </div> </div> <!-- 登录 modal start--> <div class="modal fade" id="login_modal" class="bs-example-modal-sm" role="dialog" aria-labelledby="gridSystemModalLabel"> <div class="modal-dialog modal-sm" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="gridSystemModalLabel">登录账号</h4> </div> <div class="modal-body"> <div class="container-fluid"> <h4><a href="login_register/login.html">已有账号?立即去登录</a></h4> </div> </div> </div> </div> </div><!-- 登录 modal end--> <!-- 注册 modal start--> <div class="modal fade" id="register_modal" class=" bs-example-modal-sm" role="dialog" aria-labelledby="gridSystemModalLabel"> <div class="modal-dialog modal-sm" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="gridModalLabel">注册账号</h4> </div> <div class="modal-body"> <div class="container-fluid"> <h4><a href="login_register/register.html">无账号?立即去注册</a></h4> </div> </div> </div> </div> </div><!-- 注册 modal end--> </nav> </header> <!-- 头部导航header end --> <!--联系我们 contact start--> <section> <!--联系我们 contact start--> <div class="contacts"> <div class="container"> <div class="new-title"> <div class="row"> <div class="col-xs-6 col-md-5"></div> <div class="col-xs-6 col-sm-4 col-md-2 com_title"><h2>联系我们</h2></div> <div class="col-xs-6 col-md-5"></div> </div> <div class="row"> <div class="col-xs-6 col-md-5"></div> <div class="col-xs-6 col-sm-4 col-md-2 com_line"></div> <div class="col-xs-6 col-md-5"></div> </div> <div class="row"> <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-5 col-sm-offset-3 new_p com_ideal"> <p><em>CONTACT US</em></p> </div> </div> </div> </div> <div class="contact-content"> <div class="container"> <form action=""> <div class="row contacts-icon"> <div class="col-md-4"> <button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-phone" aria-hidden="true"></span> </button> <a>400-997-3454</a> </div> <div class="col-md-4 midd"> <button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-map-marker glyphicon1" ></span> </button> <a>北京市海定区1001号科技园</a> </div> <div class="col-md-4"> <button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> </button> <a>zhichuang@126.com</a> </div> </div> <div class="row contacts-inpt"> <div class="col-md-4"> <input type="text" class="form-control" name="" value="* 姓名/NAME"> </div> <div class="col-md-4"> <input type="text" class="form-control" value="* 邮箱地址/EMAIL"> </div> <div class="col-md-4"> <input type="text" class="form-control" value="* 需求/SUBJECT"> </div> </div> <div class="row contacts-areatext "> <label style="color: white">内容/CONTENT:</label> <textarea class="form-control" cols="100" rows="10" ></textarea> </div> <div class="row contacts-areatext "> <div class="col-md-2 mysubmit"> <input type="submit" value="提交"/> </div> </div> </form> </div> </div> </div> <!--联系我们 contact end --> </section> <!--联系我们 contact end --> <!-- footer 部分 start --> <footer> <div class="nav-list"> <div class="container-fluid"> <div class="row"> <div class="col-md-2 col-xs-1"> <h4>关于公司</h4> <ul> <li><a href="#">企业简介</a></li> <li><a href="#">品牌简介</a></li> <li><a href="#">品牌荣盛</a></li> <li><a href="#">品牌文化</a></li> </ul> </div> <div class="col-md-2 col-xs-1"> <h4>订单服务</h4> <ul> <li><a href="#">购买指南</a></li> <li><a href="#">支付方式</a></li> <li><a href="#">合作物流</a></li> <li><a href="#">发货时间</a></li> </ul> </div> <div class="col-md-2 col-xs-1"> <h4>服务支持</h4> <ul> <li><a href="#">售后服务</a></li> <li><a href="#">申请退换</a></li> <li><a href="#">上门服务</a></li> <li><a href="#">授权商家</a></li> </ul> </div> <div class="col-md-2 col-xs-1"> <h4>关于我们</h4> <ul> <li><a href="#">人才理念</a></li> <li><a href="#">经营理念</a></li> <li><a href="#">联系方式</a></li> <li><a href="#">集团战略</a></li> </ul> </div> <div class="col-md-2 col-xs-1"> <h4>新闻中心</h4> <ul> <li><a href="#">研发中心</a></li> <li><a href="#">行业新闻</a></li> <li><a href="#">最新资讯</a></li> <li><a href="#">国际时报</a></li> </ul> </div> <div class="col-md-2 col-xs-2"> <div class="abtn workdate"> <a href="#" class="text-center">联系客服</a> </div> <h3>400 997-3454</h3> <p >周一至周日9:00-18:00(节假日除外)</p> </div> </div> </div> </div> <div class="copryright"> <div class="container-fluid"> <div class="row"> <div class="col-md-8 col-xs-4 col-md-offset-2 col-xs-offset-4"> <span class="copry">Copryright 2020 软件人-李子 all right Reserved 李软件工作室 </span> <a href="#">| 法律声明 | 隐私条款</a> <p class="copry">粤备xxxxxxx号 公安备xxxxxx号</p> </div> </div> </div> </div> </footer> <!-- footer 部分 end --> </body> </html>
style.css:
/*
css document
author:liyingxia
datetime:2020-06-01;
*/
*{
padding: 0;
margin: 0;
}
.btn_register,.btn_login{
background-color: #222222;
color: rgb(131, 131, 131);
}
@media (max-width:768px){
.list{
float: left;
position: absolute;
top: 0;
left: 50%;
}
.list li{
float: left;
top: 0;
left: 50%;
}
}
.navbar{
background-color:black;
}
.navbar-collapse,.navbar-right{
margin-top:7px;
}
.navbar-right img{
width: 20px;
height: 20px;
}
.navbar-nav li a,.navbar-right a{
color: #fff;
font-size: 16px;
}
.navbar {
border-radius: 0px;
}
/* slides */
.my_slides{
transform: translate(0px,-20px);
}
/* contact us */
.contacts .contact-content{
position:relative;
height: 700px;
width: 100%;
background: url(../images/index/home_66.jpg) no-repeat;
}
.contacts .contact-content .row{
position:absolute;
top: 10%;
width: 80%;
height: 120px;
left: 10%;
}
.contacts .contact-content .contacts-icon a{
font-size: 20px;
color: white;
padding-left: 20px;
}
.contacts .contact-content .contacts-icon button{
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius:30px ;
height: 60px;
width: 60px;
border: white 1px solid;
}
.contacts .contact-content .contacts-icon button glyphicon1{
color: red;
}
.contacts .contact-content .contacts-inpt{
position:absolute;
top: 30%;
width: 80%;
bottom: 20%;
height: 80px;
left: 10%;
}
.contacts .contact-content .contacts-areatext{
position:absolute;
top: 50%;
width: 80%;
bottom: 20%;
height: 50px;
left: 10%;
}
.contacts .contact-content .contacts-areatext textarea{
border-bottom: white 1px solid;
}
.contacts .contacts-inpt input[type="text"]{
background: transparent;
border: none;
border-bottom: 1px solid #fff;
color: #fff;
border-radius: 0px;
display: inline;
font-size: 14px;
}
.contacts .contacts-areatext textarea{
border: none;
border-bottom: 1px solid #fff;
border-color: #fff;
background: transparent;
resize: none;
color: #fff;
width: 100%;
border-radius: 0px;
font-size: 14px;
}
.contacts .mysubmit{
border: 1px solid #fff;
border-color: #fff;
resize: none;
width: 150px;
height: 30px;
border-radius: 0px;
font-size: 14px;
transform: translate(0px,270px);
}
.contacts .mysubmit input[type="submit"]{
background: none;
border: none;
color: white;
display: block;
line-height: 30px;
align-content: center;
transform: translate(45px,0px);
}
@media (max-width:768px){
.contacts .contact-content .contacts-icon {
position:absolute;
top:2%;
width: 80%;
height: 100px;
left: 10%;
}
.contacts .contact-content .contacts-icon a {
font-size: 16px;
}
.contacts-icon .midd{
margin: 10px auto;
}
}
/* footer */
.nav-list{
background-color: #e8e7e7;
height: 220px;
}
.nav-list .col-md-2{
margin-top: 40px;
}
.nav-list ul {
list-style-type: none;
}
.nav-list ul li{
margin: 5px;
}
.nav-list ul li a{
color:black;
}
.nav-list ul li a:hover{
color: #096ce8;
}
.nav-list .row{
width: 1170px;
margin: 0 auto;
}
.nav-list .abtn{
width: 150px;
border-radius: 0px;
height: 30px;
display: block;
line-height: 30px;
text-align: center;
background-color:#096ce8;
}
.nav-list .abtn a{
font-size: 18px;
color: #fff;
}
.nav-list .workdate p{
color: black;
}
.copryright{
width: 100%;
height: 60px;
background-color: black;
}
.copryright .row{
width: 1170px;
margin: 0 auto;
text-align: center;
margin-top: 10px;
}
.copryright .row a{
color: #096ce8;
}
.copry{
color: white;
}
@media screen and (max-width:768px){
.myfooter{
display: none;
}
.con .myul li{
float: left;
}
.copryright{
height: 80px;
}
}
登录
html部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户登录</title>
<link rel="stylesheet" href="bootstrap.css" />
<style>
body{
background: url("../images/index/home_66.jpg") no-repeat;
}
.form-horizontal{
margin-left: 30px;
}
.regis{
margin-left: 30px;
}
</style>
</head>
<body>
<div class="container" style="margin: 120px auto;">
<h1 class="text-center">用户登录</h1><br>
<hr width="100%">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title text-center">用户登录</h3>
</div>
<form method="post" class="form-horizontal" action="login.php">
<div class="panel-body form-horizontal text-center">
<div class="form-group">
<label >
用户名:
<input type="text" class="form-control" name="userName" id="userName">
</label>
</div>
<div class="form-group">
<label>
密码:
<input type="text" class="form-control" name="password" id="password">
</label>
</div>
<div class="form-group">
<label>
验证码:
<img src="randcode_pro.php" id="code_img" name="code_img" οnclick="this.src='randcode_pro.php?rand='+Math.random()" />
<a href="javascript:void(0)" οnclick="document.getElementById('code_img').src='randcode_pro.php?r='+Math.random()">换一个</a>
</label>
</div>
<div class="form-group">
<input type="submit" value="登录" class=" login btn btn-success " οnclick="form.action='login.php'" id="login" />
<input type="submit" value="注册" class=" login btn btn-success " οnclick="form.action='register.html'" id="register" />
</div>
</div>
</form>
</div>
</div>
</body>
</html>
注册页面也是差不多的就不放了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Css实现透明效果，兼容IE8
- 纯CSS实现多级半透明效果菜单代码
- CSS实现透明效果颜色的方法:RGBa
- 用CSS实现像vista一样很酷的透明效果(附漂亮截图)
- 【前端】CSS实现背景图片透明和文字不透明效果
- css两列表单效果实现
- CSS实现Div层背景半透明而内容不透明效果
- CSS实现背景透明/半透明效果 但内容文字不透明
- JS+DIV+CSS实现仿表单下拉列表效果
- 用CSS实现Firefox 和IE 都支持的Alpha透明效果
- css技巧：实现圆角、阴影、透明效果
- 使用CSS实现透明边框的效果——兼容当前各种主流浏览器[xyytIT]
- 用 CSS 实现 Firefox 和 IE 都支持的 Alpha 透明效果
- css外层DIV半透明内层div不透明-弹出层效果的实现【实例】（转载）
- 纯CSS实现背景半透明文字不透明效果兼容IE6
- 用CSS实现Firefox 和IE 都支持的Alpha透明效果
- 用CSS实现透明效果
- JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
- JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
- 通过jquery validate和bootstrap实现表单后面提示打钩或打叉的效果和真实的表单验证