投稿
  1. 首页
  2. 随笔

导航栏偏左侧怎么调html

六类双绞线 • 2023-4-7 • 随笔 • 阅读 11

导航栏偏左侧怎么调html,第1张

运用display的block设置左拉导航栏，设置下拉导航栏。在HTML中设置导航栏左侧是运用display的block设置左拉导航栏，设置下拉导航栏。HTML是由Web的发明者TimBerners-Lee和同事DanielWConnolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。

程序源代码如下:

main()

{

int i,j,k

printf("\n")

for(i=1i<5i++)／*以下为三重循环*/

　for(j=1j<5j++)　

for (k=1k<5k++)

　{

if (i!=k&&i!=j&&j!=k) 　/*确保i、j、k三位互不相同*/

printf("%d,%d,%d\n",i,j,k)

　 }

}

main()

{

long int i

int bonus1,bonus2,bonus4,bonus6,bonus10,bonus

scanf("%ld",&i)

bonus1=100000*0.1bonus2=bonus1+100000*0.75

bonus4=bonus2+200000*0.5

bonus6=bonus4+200000*0.3

bonus10=bonus6+400000*0.15

　if(i<=100000)

bonus=i*0.1

　else if(i<=200000)

　bonus=bonus1+(i-100000)*0.075

else if(i<=400000)

bonus=bonus2+(i-200000)*0.05

　else if(i<=600000)

　bonus=bonus4+(i-400000)*0.03

else if(i<=1000000)

bonus=bonus6+(i-600000)*0.015

　else

bonus=bonus10+(i-1000000)*0.01

printf("bonus=%d",bonus)

}

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html charset=UTF-8" />

    <title>CSS+JavaScript三级折叠菜单</title>

    <style>

        * {

    margin: 0

    padding: 0

    list-style: none

}

body {

    font: 12px "宋体"

    padding-top: 20px

}

#menu {

    width: 200px

    margin: auto

}

#menu h1 {

    cursor: pointer

    color: #FFF

    font-size: 12px

    padding: 5px 0 3px 10px

    border: #C60 1px solid

    margin-top: 1px

    background-color: #F93

}

#menu h2 {

    cursor: pointer

    color: #777

    font-size: 12px

    padding: 5px 0 3px 10px

    border: #E7E7E7 1px solid

    border-top-color: #FFF

    background-color: #F4F4F4

}

#menu ul {

    padding-left: 15px

    height: 100px

    border: #E7E7E7 1px solid

    border-top: none

    overflow: auto

}

#menu ul li {

    padding: 5px 0 3px 10px

}

.no {

    display: none

}

    </style>

    <script>

        function ShowMenu(obj, noid) {

            var block = document.getElementById(noid)

            var n = noid.substr(noid.length - 1)

            if (noid.length == 4) {

                var ul = document.getElementById(noid.substring(0, 3)).getElementsByTagName("ul")

                var h2 = document.getElementById(noid.substring(0, 3)).getElementsByTagName("h2")

                for (var i = 0 i < h2.length i++) {

                    h2[i].innerHTML = h2[i].innerHTML.replace("+", "-")

                    h2[i].style.color = ""

                }

                obj.style.color = "#FF0000"

                for (var i = 0 i < ul.length i++) {

                    if (i != n) {

                        ul[i].className = "no"

                    }

                }

            } else {

                var span = document.getElementById("menu").getElementsByTagName("span")

                var h1 = document.getElementById("menu").getElementsByTagName("h1")

                for (var i = 0 i < h1.length i++) {

                    h1[i].innerHTML = h1[i].innerHTML.replace("+", "-")

                    h1[i].style.color = ""

                }

                obj.style.color = "#0000FF"

                for (var i = 0 i < span.length i++) {

                    if (i != n) {

                        span[i].className = "no"

                    }

                }

            }

            if (block.className == "no") {

                block.className = ""

                obj.innerHTML = obj.innerHTML.replace("-", "+")

            } else {

                block.className = "no"

                obj.style.color = ""

            }

        }

    </script>

</head>

<body>

    <div id="menu">

        <h1 onClick="javascript:ShowMenu(this,'NO0')"> - 一级菜单A</h1>

        <span id="NO0" class="no">

   <h2 onClick="javascript:ShowMenu(this,'NO00')"> - 一级菜单A_1</h2>

   <ul id="NO00" class="no">

    <li>一级菜单A_0</li>

    <li>一级菜单A_1</li>

    <li>一级菜单A_2</li>

    <li>一级菜单A_3</li>

    <li>一级菜单A_4</li>

    <li>一级菜单A_5</li>

   </ul>

   <h2 onClick="javascript:ShowMenu(this,'NO01')"> - 一级菜单A_2</h2>

   <ul id="NO01" class="no">

    <li>一级菜单A_0</li>

    <li>一级菜单A_1</li>

    <li>一级菜单A_2</li>

    <li>一级菜单A_3</li>

    <li>一级菜单A_4</li>

   </ul>

   <h2 onClick="javascript:ShowMenu(this,'NO02')"> - 一级菜单A_3</h2>

   <ul id="NO02" class="no">

    <li>一级菜单A_0</li>

    <li>一级菜单A_1</li>

    <li>一级菜单A_2</li>

    <li>一级菜单A_3</li>

    <li>一级菜单A_4</li>

    <li>一级菜单A_5</li>

    <li>一级菜单A_6</li>

   </ul>

   <h2 onClick="javascript:ShowMenu(this,'NO03')"> - 一级菜单A_4</h2>

   <ul id="NO03" class="no">

    <li>一级菜单A_0</li>

    <li>一级菜单A_1</li>

    <li>一级菜单A_2</li>

    <li>一级菜单A_3</li>

    <li>一级菜单A_4</li>

    <li>一级菜单A_5</li>

    <li>一级菜单A_6</li>

    <li>一级菜单A_7</li>

   </ul>

</span>

        <h1 onClick="javascript:ShowMenu(this,'NO1')"> - 二级菜单B</h1>

        <span id="NO1" class="no">

   <h2 onClick="javascript:ShowMenu(this,'NO10')"> - 二级菜单B_1</h2>

   <ul id="NO10" class="no">

    <li>二级菜单B_0</li>

    <li>二级菜单B_1</li>

    <li>二级菜单B_2</li>

    <li>二级菜单B_3</li>

    <li>二级菜单B_4</li>

    <li>二级菜单B_5</li>

    <li>二级菜单B_6</li>

    <li>二级菜单B_7</li>

   </ul>

   <h2 onClick="javascript:ShowMenu(this,'NO11')"> - 二级菜单B_2</h2>

   <ul id="NO11" class="no">

    <li>二级菜单B_0</li>

    <li>二级菜单B_1</li>

    <li>二级菜单B_2</li>

    <li>二级菜单B_3</li>

    <li>二级菜单B_4</li>

    <li>二级菜单B_5</li>

    <li>二级菜单B_6</li>

    <li>二级菜单B_7</li>

   </ul>

</span>

        <h1 onClick="javascript:ShowMenu(this,'NO2')"> - 三级菜单C</h1>

        <span id="NO2" class="no">

   <h2 onClick="javascript:ShowMenu(this,'NO20')"> - 三级菜单C_1</h2>

   <ul id="NO20" class="no">

    <li>三级菜单C_0</li>

    <li>三级菜单C_1</li>

    <li>三级菜单C_2</li>

    <li>三级菜单C_3</li>

    <li>三级菜单C_4</li>

    <li>三级菜单C_5</li>

    <li>三级菜单C_6</li>

    <li>三级菜单C_7</li>

    <li>三级菜单C_8</li>

    <li>三级菜单C_9</li>

   </ul>

   <h2 onClick="javascript:ShowMenu(this,'NO21')"> - 三级菜单C_2</h2>

   <ul id="NO21" class="no">

    <li>三级菜单C_0</li>

    <li>三级菜单C_1</li>

    <li>三级菜单C_2</li>

    <li>三级菜单C_3</li>

    <li>三级菜单C_4</li>

   </ul>

</span>

        <h1 onClick="javascript:ShowMenu(this,'NO3')"> - 四级菜单D</h1>

        <span id="NO3" class="no">

   <h2 onClick="javascript:ShowMenu(this,'NO30')"> - 四级菜单D_1</h2>

   <ul id="NO30" class="no">

    <li>四级菜单D_0</li>

    <li>四级菜单D_1</li>

    <li>四级菜单D_2</li>

    <li>四级菜单D_3</li>

   </ul>

   <h2 onClick="javascript:ShowMenu(this,'NO31')"> - 四级菜单D_2</h2>

   <ul id="NO31" class="no">

    <li>四级菜单D_0</li>

    <li>四级菜单D_1</li>

    <li>四级菜单D_2</li>

    <li>四级菜单D_3</li>

    <li>四级菜单D_4</li>

    <li>四级菜单D_5</li>

   </ul>

</span>

    </div>

</body>

</html>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/7554111.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
六类双绞线 六类双绞线 一级用户组
0 0
上一篇 2023-04-07
下一篇 2023-04-07

发表评论

登录后才能评论

评论列表（0条）

保存