刘全与和珅-优快云博客

本文链接：https://blog.youkuaiyun.com/Luokaiqin520/article/details/79199408

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css"/>

<script>
function ff(){
var name = document.getElementById("name").value;
var men = document.getElementById("men");
if(name=="刘全"){
men.style.display="block";
}
}
</script>

<style type="text/css">
.menubar .menuend{
clear: both;
}
.menubar .submenu{
background: #C0C0C0;border: 1px solid darkcyan;
position: absolute;top:120px;left:185px;width: 5em;
}

/** 下面的控制显示和隐藏 **/
.menubar .submenu{
display: none;
}
.menubar:hover .submenu{
display: block;
}
.men{
display: none;
}
</style>
</head>
<body>

<div class="long">
<img src="../zk_img0129/图片1_03.gif" class="im1"/>
<input type="text" id="name" class="kuang"/>
<input type="button" value="进入词条" class="btn1" onclick="ff()"/>
<input type="button" value="全站搜索" class="btn2"/>
</div>
<div class="long1">
<div class="menubar">
<div class="menuitem">
<a href="#" class="menuend">首页</a>
<a href="#">分类</a>
<a href="#">特色百科</a>
<a href="#">用户</a>
<a href="#">权威合作</a>
<a href="#">手机百科</a>
<div class="submenu">
<div>子菜单1</div>
<div>子菜单2</div>
</div>
</div>
<a href="#" style="float: right;margin-top: -30px; margin-right: 10px;">个人中心</a>
</div>
</div>

<div class="men" id="men">
<div class="men1">
<h1>刘全<span class="span">(清朝和珅家的大管家)</span></h1>
<p>刘全，外号刘秃子，和珅的管家。在和珅父常保死后，保护当时年纪尚幼的和珅和和琳，陪伴左右，一起到处借贷。
直到和珅长到十五岁，有自立能力时，和珅把后母们赶出家门后，成为和府管家，和珅十八岁时，冯氏嫁入和府，冯氏唤其为管家，
但和珅认为家中只有「婢两人」，唤管家不太妥当，便着冯氏唤其为「全儿」，一直沿习到冯氏去世。嘉庆四年，时年近七旬。</p>
<p>和珅倒台时，与和珅同时入狱，被嘉庆帝宣布和珅二十大罪的第二十大罪之首犯。和珅自尽后，被判斩立决，
但是在行刑前两天因穿着单薄，被狱卒泼水而被冷死于狱中。</p>
</div>
<div class="men2">
<img src="../zk_img0129/图片1_07.gif"/>
</div>
</div>
</body>

</html>

body,div,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,table,tr,td,form,input,select,textarea,span,img,a,em,strong,*{ margin:0 auto; padding:0;}
body{ font-family:"宋体"; font-size:12px; color:#000000;}
ul,ol,li{ list-style:none;}
h1,h2,h3,h4,h5,h6{ font-size:14px;}
input,select,textarea{ vertical-align:middle;}
img{ border:none; vertical-align:middle;}
a{ text-decoration:none; color:#333333;}
a:hover{ color:#009999;}
.clear{ clear:both; height:0px; width:0px; overflow:hidden;}

.long{
width: 800px;
height: 68px;
/*background: yellow;*/
margin-top: 20px;
}

.kuang{
width: 400px;
height: 25px;
margin-top: 20px;
}
.kuang:hover{
transform:scale(2.0);
}
.btn1{
height: 30px;
background: blue;
color: #FFFFFF;
margin-top: 20px;
transition: background-color 3s linear;
}
.btn1:hover{
transform: scale(1.5);
background: red;
}
.btn2{
height: 30px;
background: #C0C0C0;
margin-top: 20px;
transition: color 3s linear;
}
.btn2:hover{
color: pink;
}

.long1{
width: 1000px;
height: 30px;
background: blue;
line-height: 30px;
}

.long1 a{
margin-left: 20px;
color: #FFFFFF;
}

.men{
width: 1000px;
height: 300px;
}

.men1{
width: 550px;
height: 300px;
float: left;
margin-top: 40px;
margin-left: 20px;
/*background: cyan;*/
}
.men1 h1{
font-size: 24px;
}
.men1 .span{
font-weight: normal;
font-size: 14px;
}
.men1 p{
text-indent: 2em;
line-height: 24px;
}
.men2{
width: 400px;
height: 300px;
float: left;
/*background: burlywood;*/
}
.men2 img{
width: 300px;
height: 200px;
margin-top: 40px;
margin-left: 30px;
}
img:hover{
transform: scale(1.5);
}

输入内容进行隐藏和实现