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制作一个网页布局 ...

本站交流只代表网友个人观点,与本站立场无关
欢迎反馈与建议,请联系电邮
2024© 车视网