zoukankan      html  css  js  c++  java
  • css添加省略号(twxtoverflow:ellipsis)/图标精灵(background)

    <!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{
    				 100px;
    				background-color: #00FFFF;
    				white-space: nowrap;
    				overflow: hidden;
    				text-overflow: ellipsis;
    			} */
    			#div_01{
     				 1200px;
    				height: 1200px;
    				background:url(./1.jpg) no-repeat left 200%;
    			}
     			#div_02{
    				 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>
    

      

  • 相关阅读:
    VMware虚拟机网络桥接模式下无法与主机ping通解决办法
    (一)编写Bootloader程序应该注意的一些问题
    使用TrueSTUDIO和MDK编译器生成.bin文件
    Linux开发板通过串口与电脑上位机通信
    STM32知识点
    仿真器SWD可不接复位引脚的原因
    ARM内核常用缩写含义
    三大范式(转)
    修改主键示例
    ROW_NUMBER用法详解
  • 原文地址:https://www.cnblogs.com/wsx123/p/15812969.html
Copyright © 2011-2022 走看看