前言:
前端静态网页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>
注册页面也是差不多的就不放了。
3458
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
