如何消除ifame中导航栏和边框中间的空白[]
css样式
ul {
list-style-type: none;/*列表样式类型无*/
/*设置上下左右外边距*/
margin: 0;
padding: 0;
overflow: hidden;/*设置超出内容的文本隐藏*/
background-color: #333;/*背景颜色*/
width: 1470px;/*设置宽度*/
}
li {
float: left;/*左浮动*/
}
li a {
display: block;/*块级元素*/
color: white;/*设置字体颜色*/
text-align: center;/*设置文字居中对齐*/
padding: 14px 16px;/*设置内边距*/
text-decoration: none;/*去掉下划线*/
}
li a:hover {
background-color: #111;/*背景颜色*/
}
th{
width: 25%;/*宽度*/
}
p{
text-indent: 2em;/**首行缩进2字符**/
}
.box7{
background-image: url("../images/di.jpg");/*设置背景图片*/
width: 1450px;/*设置宽度*/
margin: 0%;/*设置外边距*/
}
.flex-container1{/*水平堆叠 flex 项目（但从右到左*/
display: flex;/*设置水平堆叠flex项目（从右到左）*/
flex-direction: row-reverse;
background-image: url("../images/tou.jpg");/*设置背景图片*/
width:1465px;/*设置宽度*/
}
.box1{/*设置左上下间距分别为80，50，50*/
padding-left: 80px;
padding-top: 30px;
padding-bottom: 50px;
}
iframe{
overflow: scroll;/*若框过大使用滚动条显示超出内容*/
margin: 0;
padding: 0;
}
.iframe1{
width: 1480px;/*设置宽度*/
height: 170px;/*设置高度*/
}
.iframe2{
width: 1480px;/*设置宽度*/
height: 230px;/*设置高度*/
}
a:link {
text-decoration: none;/*去掉下划线*/
}
a:visited {
text-decoration: none;/*去掉下划线*/
}
a:hover {
text-decoration: none;/*去掉下划线*/
}
a:active {
text-decoration: none;/*去掉下划线*/
}
iframe部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
@import url("css/qiye.css");
@import url("css/index.css");
</style>
<script type="text/javascript" src="js/index.js">
</script>
</head>
<body>
<div class="flex-container1">
<div class="box1">
<input type="text"placeholder="请输入搜索内容">
<button type="submit">搜索</button>
</div>
</div>
<div style="margin-bottom: 0%;padding: 0%;">
<ul type="none"style="margin-bottom: 0%;padding: 0%;">
<li><a href="index.html"itle="首页"target="f1">首页</a></li>
<li><a href="company_introduction.html"title="公司简介"target="f1">企业概况</a></li>
<li><a href="news_dynamic.html"title="新闻资讯"target="f1">企业新闻</a></li>
<li><a href="product_introduction.html"title="产品介绍"target="f1">产品介绍</a></li>
<li><a href="employee_anti_counterfeiting.html"title="员工防伪"target="f1">员工防伪</a></li>
<li><a href="supply_chain.html"title="供应链"target="f1">供应链</a></li>
<li><a href="zhongxiaoer.html"title="众小二"target="f1">众小二</a></li>
<li><a href="message_boards.html"title="留言板"target="f1">留言板</a></li>
<li><a href="join_us.html"title="加入我们"target="f1">加入我们</a></li>
</ul>
</div>
</body>
</html>
调用iframe的页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="images/logo.ico"rel="icon" type="image/logo-icon">
<title>员工防伪</title>
<style type="text/css">
@import url("css/qiye.css");
@import url("css/employee_anti_counterfeiting.css");
iframe{
margin-bottom: 0px;
padding-bottom: 0px;
display: block;
/* vertical-align:bottom; */
}
</style>
<script>
window.onload=function(){
var emp=document.getElementById("td2").value;//获取内容
var sub=document.getElementById("th1");//获取botton
sub.onclick=function(){//添加单击响应函数
if((emp=="小黄")||(emp=="123456")||(emp=="www")){//判断并输出
alert("存在该员工")
}else{
alert("不存在该员工")
}
}
}
</script>
</head>
<body>
<iframe src="daohang.html"class="iframe1"></iframe>
<img src="images/e1.jpeg"width="1470px"height="500px">
<h1 style="font-size:50px;color: white;text-align: center;padding-top:0px ;">三只羊网络员工防伪查询</h1>
<table class="table1"width="300px">
<form action=""method="get">
<tr>
<td class="td1"><input class="td2" type="text"placeholder="请输入三只羊花名/手机号/真实姓名/微信号"id="td2"></td>
<th ><input class="th1"type="submit"value="查询"id="th1"></th>
</tr>
</form>
</table>
</div>
<iframe src="foot.html"class="iframe2"></iframe>
</body>
</html>
