<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
1.css添加省略号
1.让内容在一行展示 white-space:nowrap;
2.内容溢出隐藏 overflow=hidden
3.溢出内容添加省略号 text-overflow:ellipsis
2.css图标精灵
注意：图片宽高设置太小，x/y轴定位是按照图片去移动
图片宽度符合大小，x/y轴定位是给盒子去移动
好处：加载速度更快
-->
<style>
/* div{
width: 100px;
background-color: #00FFFF;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} */
#div_01{
width: 1200px;
height: 1200px;
background:url(./1.jpg) no-repeat left 200%;
}
#div_02{
width: 2500px;
height: 1500px;
border: 1px solid #008000;
line-height: 100px;
padding-left: 30px;
background: url(1.jpg) no-repeat right 936px;
}
</style>
</head>
<body>
<!-- <div>我i我钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱撒大苏打阿萨大大大我i我钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱撒大苏打阿萨大大大我i我钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱撒大苏打阿萨大大大我i我钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱撒大苏打阿萨大大大我i我钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱撒大苏打阿萨大大大我i我钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱撒大苏打阿萨大大大我i我钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱撒大苏打阿萨大大大我i我钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱撒大苏打阿萨大大大我i我钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱撒大苏打阿萨大大大我i我钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱钱撒大苏打阿萨大大大</div>
--> <div id="div_01"></div>
<div id="div_02">产品中心</div>
</body>
</html>
