CSS完成仿真模拟position的fixed网页页面精准定位实

日期:2021-03-05 类型:科技新闻 

关键词:快速建站,网站建设系统,免费网页建站,网站免费建设,建站系统

本文案例讲述了CSS完成仿真模拟position的fixed网页页面精准定位实际效果的方式。共享给大伙儿供大伙儿参照。实际完成方式以下:


拷贝编码
编码以下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf⑻" />
<title>仿真模拟position:fixed</title>
</head>
<style>
* { padding:0; margin:0;}
body { height:100%; overflow:hidden; font-size:14px; line-height:2; position:relative;}
html { height:100%; overflow:hidden;}
.fixed { position:absolute; top:10px; left:10px; width:200px; height:350px; background:#fc0; border:1px solid #f60;}
.wrapper { height:100%; overflow:auto;}
.body { padding-top:10px; margin-left:232px;}
</style>
<body>
<div class="fixed">左侧不管如何翻转这个对话框它都不容易动的</div>
<div class="wrapper">
<div class="body">
<li><a href="/soft/1843.shtml" target="_blank">显示信息內容1显示信息內容1显示信息內容1显示信息內容1</a></li>
<li><a href="/soft/1986.shtml" target="_blank">显示信息內容2显示信息內容2显示信息內容2</a></li>
<li><a href="/soft/4374.shtml" target="_blank">显示信息內容3显示信息內容3显示信息內容3</a></li>
<li><a href="/soft/1060.shtml" target="_blank">显示信息內容4显示信息內容4显示信息內容4</a></li>
<li><a href="/soft/4609.shtml" target="_blank">显示信息內容5显示信息內容5显示信息內容5</a></li>
<li><a href="/soft/1078.shtml" target="_blank">显示信息內容6显示信息內容6</a></li>
<li><a href="/soft/2030.shtml" target="_blank">显示信息內容7显示信息內容7显示信息內容7</a></li>
<li><a href="/soft/3119.shtml" target="_blank">显示信息內容8显示信息內容8显示信息內容8</a></li>
<li><a href="/soft/2927.shtml" target="_blank">显示信息內容9显示信息內容9显示信息內容</a></li>
<li><a href="/soft/2460.shtml" target="_blank">显示信息內容10显示信息內容10</a></li>
<li><a href="/soft/5654.shtml" target="_blank">显示信息內容11显示信息內容11</a></li>
<li><a href="/soft/3353.shtml" target="_blank">显示信息內容12显示信息內容12</a></li>
<li><a href="/soft/1852.shtml" target="_blank">显示信息內容13显示信息內容13</a></li>
<li><a href="/soft/1843.shtml" target="_blank">显示信息內容14显示信息內容14</a></li>
<li><a href="/soft/1986.shtml" target="_blank">显示信息內容15显示信息內容15</a></li>
<li><a href="/soft/4374.shtml" target="_blank">显示信息內容16显示信息內容16</a></li>
<li><a href="/soft/1060.shtml" target="_blank">显示信息內容17显示信息內容17</a></li>
<li><a href="/soft/4609.shtml" target="_blank">显示信息內容18显示信息內容18</a></li>
<li><a href="/soft/1078.shtml" target="_blank">显示信息內容19显示信息內容19</a></li>
<li><a href="/soft/2030.shtml" target="_blank">显示信息內容20显示信息內容20</a></li>
<li><a href="/soft/3119.shtml" target="_blank">显示信息內容21显示信息內容21</a></li>
<li><a href="/soft/2927.shtml" target="_blank">显示信息內容22显示信息內容22</a></li>
</div>
</div>
<div>脚本制作之家 https://www.jb51.net/</div>
</body>
</html>

期待本文所述对大伙儿的css+div网页页面设计方案有一定的协助。

上一篇:详尽讲解CSS的预编译程序器PostCSS 返回下一篇:没有了