https://blog.csdn.net/zcn596785154/article/details/78055250
CSS样式文件search_history.css
div{
width:95%;
height:40px;
line-height:36px;/**设置行高和控件高一样，这是内部文字才能垂直居中*/
overflow:hidden;/**为了防止内容超出容器或者产生自动换行，这样就达不到垂直居中效果了*/
margin: 0 auto;/**让div在页面中居中显示*/
background-color:#ffffff;/**背景颜色*/
border:solid 1px #f5f5f5;
border-width:1px 0px 0px 1px;
}
p{
margin-left:2.5%;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
HTML页面search_history.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<meta http-equiv="content-type" content="search_history.html; charset=utf-8">
<title>历史记录html</title>
//引入css样式
<link type="test/css" rel="stylesheet" href="search_history.css"/>
</head>
<body id ="test" bgcolor="#f5f5f5">
<p>历史搜索</p>
<script type="text/javascript">
var Shu =7;
var df = document.createDocumentFragment();
for (var i=0;i<= Shu;i++){
var oDiv = document.createElement("div");
var img = document.createElement("img");
img.src = 'ic_search_history_clock.png';
img.style.verticalAlign="middle";//设置图片垂直居中显示
img.style.padding="5px";
oDiv.appendChild(img);
var text = document.createElement("span");
text.innerHTML = "方向盘套";
text.style.padding="5px";
oDiv.appendChild(text);
var img2 = document.createElement("img");
img2.src = 'ic_search_history_next.png';
img2.style.verticalAlign="middle";//设置图片垂直居中显示
img2.style.padding="5px";
oDiv.appendChild(img2);
df.appendChild(oDiv);
}
document.body.appendChild(df);
</script>
</body>
</html>
没有评论:
发表评论