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%;
}

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>
Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐