div+css ul 导航条 怎么让li在固定位置上出现 如何让div+ul+li的导航条自动填充100%的宽度
\u5982\u4f55\u8ba9div+ul+li\u7684\u5bfc\u822a\u6761\u81ea\u52a8\u586b\u5145100%\u7684\u5bbd\u5ea6?$(function(){var UlWidth=$("ul.nav").width();//\u5f97\u5230ul\u5bbd\u5ea6var LiLen=$("ul.nav li").length;//\u5f97\u5230li\u7684\u4e2a\u6570$("ul.nav li").css({width:UlWidth/LiLen})}); \u7b2c1\u4e2aLI \u7b2c2\u4e2aLI \u7b2c3\u4e2aLI \u7b2c4\u4e2aLI \u7b2c5\u4e2aLI \u7528js\u6765\u63a7\u5236
\u8981\u8fbe\u5230\u8fd9\u79cd\u6548\u679c\u5fc5\u987b\u5148\u77e5\u9053\u8fd9\u5f20\u56fe\u7247\u662f\u5df2\u90a3\u79cd\u5f62\u5f0f\u5bfc\u8fdb\u53bb\u7684\uff0c\u65e0\u5916\u4e4e2\u79cd\uff1a
1.img\u6807\u7b7e\u5bfc\u5165\uff0c\u90a3\u4e48img\u5916\u5c42\u5982\u679c\u6ca1\u6709\u6d6e\u52a8\u6216\u8005\u53bb\u9650\u5b9a\u5bbd\u5ea6\uff0c\u9ed8\u8ba4\u5c31\u662f\u586b\u5145\u6574\u4e2a\u5c4f\u5e55\u7684\u5bbd\u5ea6\uff0c\u90a3\u4e48\u5c31\u53ef\u4ee5\u8bbe\u7f6eimg{width:100%;}\u8fd9\u53e5\u6837\u5f0f\u6765\u8ba9\u5176\u586b\u5145\u6ee1\u5c4f\u5e55\uff0c\u8bb0\u5f97\u9ad8\u5ea6\u4e0d\u8981\u8bbe\u7f6e\uff0c\u4e0d\u7136\u4f1a\u8ba9\u56fe\u7247\u53d8\u5f62\u5931\u771f\uff1b
2.\u901a\u8fc7css\u91cc\u9762\u7684background-images\u7684\u65b9\u5f0f\u4ee5\u80cc\u666f\u7684\u5f62\u5f0f\u5bfc\u8fdb\u53bb\uff0c\u90a3\u4e48\u5728html\u6846\u67b6\u91cc\u9762\u7684\u56fe\u7247\u5c55\u793a\u6807\u7b7e\u5fc5\u987b\u662f\u6491\u6ee1\u5c4f\u5e55\u5bbd\u5ea6\u7684\uff0c\u7136\u540e\u5728\u6837\u5f0f\u91cc\u9762\u901a\u8fc7background-size:contain\u8ba9\u5176\u586b\u5145\u6ee1\u5c4f
用绝对定位
position:absolute;
top,bottom,left,right指定固定位置
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<style>
.demo1{
width:300px;
height:200px;
display:block;
background:pink;
position:absolute;
top:20px;
left:50px;
}
.demo2{
width:300px;
height:200px;
display:block;
background:blue;
position:absolute;
top:400px;
right:140px;
}
</style>
<ul>
<li class="demo1">demo1</li>
<li class="demo2">demo2</li>
</ul>
</body>
</html>
问的太模糊了,如果是整体,那可以控制UL的位置,如果是单独LI,那也可以 给个class 或ID 单独布局,比如 position 或margin padding
1:css里面fixed,可以固定在以屏幕为坐标的地点
2:在或者用父元素position:relative;子元素:position:absolute;的方式进行绝对定位.
我认为你是第一种情况,想做一个漂浮起来的导航栏是吧?
将外层div css样式中,position属性设置成absolute,调整top,left
说具体点
扩展阅读:www.sony.com.cn ... div css布局完整代码 ... div css制作一个网页导航 ... div+css网页设计步骤 ... div+css布局网页的步骤 ... divcss网页设计成品 ... div css网页布局实例 ... div css布局模板代码 ... div css制作一个网页布局 ...