前言:
前端静态网页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:
*{
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
;
}
.my_slides{
transform: translate(0px,-20px
);
}
.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
;
}
}
.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>
注册页面也是差不多的就不放了。
