zoukankan      html  css  js  c++  java
  • position sticky 用法

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			*{
    				margin: 0;
    				padding: 0;
    			}
    			ul{
    				 100%;
    				height: 100%;
    			}
    			ul>li{
    				height: 400px;
    				 100%;
    				list-style: none;
    				top: 0px;
    				font-size: 32px;
    				color: #fff;
    				background: green;
    				text-align: center;
    				line-height: 400px;
    			}
    			/*固定所有元素*/
    			/*ul>li{
    				height: 400px;
    				 100%;
    				list-style: none;
    				top: 0px;
    				font-size: 32px;
    				color: #fff;
    				background: green;
    				text-align: center;
    				line-height: 400px;
    				position: sticky;
    			}*/
    			/*
    			 *   position: sticky 
    			 *   一:可用于固定导航栏或者其余需要固定的元素(只需在该元素上设置该属性)  
    			 *   二:也可以用于叠加显示( 每后一级滑动遮挡前一级,需要每一级元素都要设置该属性) 
    			 * 
    			 * */
    		</style>
    	</head>
    	<body>
    		<!--固定单一元素-->
    		<ul>
    			<li style="position: sticky;">1</li>
    			<li>2</li>
    			<li>3</li>
    			<li>4</li>
    			<li>5</li>
    			<li>6</li>
    			<li>7</li>
    			<li>8</li>
    			<li>9</li>
    			<li>10</li>
    		</ul>
    		<!--固定所有元素-->
    		<!--<ul>
    			<li>1</li>
    			<li>2</li>
    			<li>3</li>
    			<li>4</li>
    			<li>5</li>
    			<li>6</li>
    			<li>7</li>
    			<li>8</li>
    			<li>9</li>
    			<li>10</li>
    		</ul>-->
    	</body>
    </html>
    
  • 相关阅读:
    求树的重心
    牛客多校第七场B题
    高精度
    hdu 6763 Total Eclipse 并查集+思维
    substr用法
    置换群
    快速幂
    Winform+Mysql登录
    Rider C#连接MySQL
    C# winform组件
  • 原文地址:https://www.cnblogs.com/yzyh/p/9068432.html
Copyright © 2011-2022 走看看