console
var ToolHeader = {
init: function() {
$("#toolHeader").html("<div>ahahah</div>");
}
}
$(function() {
// ToolHeader.init();
})
<div id="toolHeader">
<ul id="menu">
<div>
开发工具箱
</div>
<li>
开发类
</li>
<li>
站长类
</li>
<li>
生活类
</li>
<li>
游戏类
</a>
</ul>
</div>
<ul id="menuList">
<li>
<div class="logo" style="background-position: -50px 200px;" ></div>
<h5>
SCSS在线编译工具
</h5>
<br>
<a href="">scss.jsrun.net </a>
<p> asciidoc编辑器 </p>
</li>
<li>
<div class="logo" ></div>
<h5>
asciidoc编辑器
</h5>
<br>
<a href="">scss.jsrun.net </a>
<p> asciidoc编辑器 </p>
</li>
<li>
<div class="logo" style="background-position: -50px 50px;" ></div>
<h5>
asciidoc编辑器
</h5>
<br>
<a href="">scss.jsrun.net </a>
<p> asciidoc编辑器 </p>
</li>
</ul>
html body{
margin: 0;
padding:0;
}
#toolHeader{
height:60px;
color:#FFF;
background: rgb(55, 135, 255);
}
#menu li {
display: block;
float: left;
margin-left: 10px;
background: rgb(0, 174, 255);
padding: 5px 20px;
color: #FFF;
border-radius: 20px;
font-size: 14px;
text-decoration: none;
}
#menu li:hover {
background: rgb(24, 151, 255);
}
#menuList {
clear:both;
}
#menuList li {
display:block;
float: left;
background: #FFF;
border: 1px solid #eee;
/* box-shadow: 0 1px 3px rgba(51, 51, 51, 0.315); */
border-radius: 5px;
width:180px;
padding: 10px;
margin-left:10px;
}
.logo {
float:left;
width:48px;
height:48px;
background-image: url(//qn14.tool.lu/201905/01/131909g50f1uhqsSlodOTk_500x400.png);
background-size: 250px auto;
}
#menuList li h5{
float:left;
margin: 0;
clear: right;
margin-left:10px;
}
#menuList li a{
float:left;
margin-left:10px;
text-decoration: none;
font-size: 14px;
color:#333;
}
#menuList li p{
font-size: 12px;
clear:both;
margin: 0;
padding-top: 10px;
}