横向导航条页面被撑开,就高手指教

ujkk858 2012-06-03 03:52:14
本人正在做一个横向导航条,但是下拉菜单总是把页面撑开,试过很多方法都不行,请高手帮我看看,下面是Html代码

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link href="App_Themes/StyleSheet.css" rel="stylesheet" type="text/css" />


<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
</head>
<body>
<form id="form1" runat="server">
<div class="menulearn" >
<ul >
<li class="MenuLi" ><a href="../Default.aspx"class="mainmenu" cname="主菜单导航" oname="主 页" otype="文字链接">主 页</a>

</li>

<li class="MenuLi" ><a id="mainmenuxx" href="../Default.aspx" onmouseout="Hind(event,'menuxx','mainmenuxx')" onmouseover="ShowMenu('menuxx','mainmenuxx')" class="mainmenu" cname="主菜单导航" oname="在线学习" otype="文字链接" >在线学习</a>
<div id="menuxx" class="menulist" onmouseout="Hind(event,'menuxx','mainmenuxx')" >

<a href="../Default.aspx" class="submenu" cname="主菜单导航" oname="在线学习" otype="文字链接" >在线学习</a>
<a href="../Default.aspx" class="submenu" cname="主菜单导航" oname="在线学习" otype="文字链接" >在线学习</a>
<a href="../Default.aspx" class="submenu" cname="主菜单导航" oname="在线学习" otype="文字链接" ><span>在线学习</span></a></div>
</li>

<li class="MenuLi" ><a id="mainmenucs" href="" onmouseout="Hind(event,'menucs','mainmenucs')" onmouseover="ShowMenu('menucs','mainmenucs')" class="mainmenu" cname="主菜单导航" oname="在线测试" otype="文字链接">在线测试</a>

<div id="menucs" class="menulist" onmouseout="Hind(event,'menucs','mainmenucs')"></div>

</li>

<li class="MenuLi" ><a href="../buider.aspx" class="mainmenu" cname="主菜单导航" oname="在线论坛" otype="文字链接">在线论坛</a></li>

<li class="MenuLi" ><a href="../Master/Master.aspx" class="mainmenu" cname="主菜单导航" oname="系统管理" otype="文字链接">系统管理</a></li>

</ul>
</div>


<div style=" position:absolute; z-index:1; width:249px; height:200px; border-right:thin dotted; border-top: thin dotted; border-left: thin dotted; border-bottom: thin dotted"><a>测试效果</a><a>测试效果</a><a>测试效果</a><a>测试效果</a><a>测试效果</a><a></a></div>
</form>
</body>
<script type="text/javascript">
function ShowMenu(menu,mainmenu)
{
if(document.getElementById(mainmenu)&&document.getElementById(mainmenu).className!="CurMenu")
document.getElementById(mainmenu).className="CurMenu";
if(document.getElementById(menu)&&document.getElementById(menu).style.visibility!="visible")
document.getElementById(menu).style.visibility="visible";
}

function Hind(e,menu,mainmenu)
{
if(!isMouseToSubMenu(e, menu))
{
if(document.getElementById(menu)&&document.getElementById(menu).style.visibility!="hidden")
document.getElementById(menu).style.visibility="hidden";
if(document.getElementById(mainmenu)&&document.getElementById(mainmenu).className!="mainmenu")
document.getElementById(mainmenu).className="mainmenu";
}
}

function isMouseToSubMenu(e,menu)
{
if (e.type != 'mouseout')
return false;
var reltg = e.relatedTarget ? e.relatedTarget : e.toElement;
while(reltg && reltg.id != menu)
reltg = reltg.parentNode;

return reltg;
}
</script>
</html>


这是css代码

body
{
margin:auto;
}
a
{
text-decoration: none;
} /*链接无下划线none,有为underline*/


.menulearn{ background:url(../image/main_menu_bg.gif) repeat-x; height:36px;position:relative; z-index:100; }
.mainmenu { float:left;line-height:36px;color:White;width:83px; font-size:14px; font-weight:bold; height:36px; }
.menulearn a:hover {font-size:14px; color:Yellow; }
.menulearn li {display:inline; list-style:none; float:left; text-align:center; }
.MenuLi { width:83px; height:36px;}
.submenu { float:left;line-height:36px;color:Black;width:79px; font-size:14px; font-weight:bold; }
.menulist
{
float:left;line-height:36px;color:Red;width:79px; font-size:14px; font-weight:bold; visibility :hidden;
border-right: firebrick thin solid; border-left: firebrick thin solid; border-bottom: firebrick thin solid;}
.menulist a:link { font-size:14px; color:#b22222 }
.menulist a:hover { font-size:14px; color:#b22222; background-color:#ffe4e1 }
.menulist a:visited { font-size:14px; color:#b22222; }

.CurMenu {float:left; background:url(../image/main_focusbg.jpg) no-repeat;color:#b22222; text-align:center; height:36px; width:83px; line-height:36px;font-size:14px; font-weight:bold; }

a.CurMenu:link { font-size:14px; color:#b22222;}
a.CurMenu:visited { font-size:14px; color:#b22222;}
a.CurMenu:hover { font-size:14px; color:#b22222;}

.curMenu_left {float:left; background:url(../../image/main_curmenu_left.gif) no-repeat;width:4px;height:36px;}
.curMenu_right {float:left; background:url(../../image/main_curmenu_right.gif) no-repeat;width:4px;height:36px;}
.curMenu_main {margin-top:0px;float:left; background:url(../../image/main_curmenu_main.gif) repeat-x;color:black; height:36px; width:80px; line-height:38px;font-size:14px; font-weight:bold; }
.curMenu_main a:link { font-size:14px; color:#b22222; }
.curMenu_main a:visited { font-size:14px; color:#b22222; }
.curMenu_main a:hover { font-size:14px; color:#b22222; }
...全文
285 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
Lemon萌 2012-06-04
  • 打赏
  • 举报
 回复
您把二级下拉菜单加上个背景后，就可以看出来其实是在下面的DIV上面的，那只是您的视觉差别而已


<!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 runat="server">

<title>无标题页</title>

<link href="App_Themes/StyleSheet.css" rel="stylesheet" type="text/css" />

<style type="text/css">

body 

{

margin:auto;

}

a

{  

  text-decoration: none;

} /*链接无下划线none,有为underline*/





.menulearn{ background:url(../image/main_menu_bg.gif) repeat-x; height:36px;position:relative; z-index:100; }

.mainmenu { float:left;line-height:36px;color:#000;width:83px; font-size:14px; font-weight:bold; height:36px; }

.menulearn a:hover {font-size:14px; color:Yellow; }

.menulearn li {display:inline; list-style:none; float:left; text-align:center; }

.MenuLi { width:83px; height:36px;}

.submenu { float:left;line-height:36px;color:Black;width:79px; font-size:14px; font-weight:bold; }

.menulist

{  

float:left;line-height:36px;color:Red;width:79px; font-size:14px; font-weight:bold; visibility :hidden; border: firebrick thin solid; background:#eee;/*您把二级下拉菜单加上个背景后，就可以看出来其实是在下面的DIV上面的，那只是您的视觉差别而已*/}

.menulist a:link { font-size:14px; color:#b22222 }

.menulist a:hover { font-size:14px; color:#b22222; background-color:#ffe4e1 }

.menulist a:visited { font-size:14px; color:#b22222; }



.CurMenu {float:left; background:url(../image/main_focusbg.jpg) no-repeat;color:#b22222; text-align:center; height:36px; width:83px; line-height:36px;font-size:14px; font-weight:bold; }



a.CurMenu:link { font-size:14px; color:#b22222;}

a.CurMenu:visited { font-size:14px; color:#b22222;}

a.CurMenu:hover { font-size:14px; color:#b22222;} 



.curMenu_left {float:left; background:url(../../image/main_curmenu_left.gif) no-repeat;width:4px;height:36px;}

.curMenu_right {float:left; background:url(../../image/main_curmenu_right.gif) no-repeat;width:4px;height:36px;}

.curMenu_main {margin-top:0px;float:left; background:url(../../image/main_curmenu_main.gif) repeat-x;color:black; height:36px; width:80px; line-height:38px;font-size:14px; font-weight:bold; }

.curMenu_main a:link { font-size:14px; color:#b22222; }

.curMenu_main a:visited { font-size:14px; color:#b22222; }

.curMenu_main a:hover { font-size:14px; color:#b22222; }  

</style>

</head>

<body>

<form id="form1" runat="server">

<div class="menulearn" >

<ul >

<li class="MenuLi" ><a href="../Default.aspx"class="mainmenu" cname="主菜单导航" oname="主 页" otype="文字链接">主 页</a>



</li>



<li class="MenuLi" ><a id="mainmenuxx" href="../Default.aspx" onmouseout="Hind(event,'menuxx','mainmenuxx')" onmouseover="ShowMenu('menuxx','mainmenuxx')" class="mainmenu" cname="主菜单导航" oname="在线学习" otype="文字链接" >在线学习</a>

<div id="menuxx" class="menulist" onmouseout="Hind(event,'menuxx','mainmenuxx')" >



<a href="../Default.aspx" class="submenu" cname="主菜单导航" oname="在线学习" otype="文字链接" >在线学习</a>

<a href="../Default.aspx" class="submenu" cname="主菜单导航" oname="在线学习" otype="文字链接" >在线学习</a>

<a href="../Default.aspx" class="submenu" cname="主菜单导航" oname="在线学习" otype="文字链接" ><span>在线学习</span></a></div>

</li>



<li class="MenuLi" ><a id="mainmenucs" href="" onmouseout="Hind(event,'menucs','mainmenucs')" onmouseover="ShowMenu('menucs','mainmenucs')" class="mainmenu" cname="主菜单导航" oname="在线测试" otype="文字链接">在线测试</a>



<div id="menucs" class="menulist" onmouseout="Hind(event,'menucs','mainmenucs')"></div>



</li>



<li class="MenuLi" ><a href="../buider.aspx" class="mainmenu" cname="主菜单导航" oname="在线论坛" otype="文字链接">在线论坛</a></li>



<li class="MenuLi" ><a href="../Master/Master.aspx" class="mainmenu" cname="主菜单导航" oname="系统管理" otype="文字链接">系统管理</a></li>



</ul>

</div>





<div style=" position:absolute; z-index:-1; width:249px; height:200px; border-right:thin dotted; border-top: thin dotted; border-left: thin dotted; border-bottom: thin dotted"><a>测试效果</a><a>测试效果</a><a>测试效果</a><a>测试效果</a><a>测试效果</a><a></a></div>

</form>

</body>

<script type="text/javascript">

function ShowMenu(menu,mainmenu)

{

  if(document.getElementById(mainmenu)&&document.getElementById(mainmenu).className!="CurMenu")

  document.getElementById(mainmenu).className="CurMenu";

  if(document.getElementById(menu)&&document.getElementById(menu).style.visibility!="visible")

  document.getElementById(menu).style.visibility="visible";

}



function Hind(e,menu,mainmenu)

{  

  if(!isMouseToSubMenu(e, menu))

  {

  if(document.getElementById(menu)&&document.getElementById(menu).style.visibility!="hidden")

  document.getElementById(menu).style.visibility="hidden";

  if(document.getElementById(mainmenu)&&document.getElementById(mainmenu).className!="mainmenu")

  document.getElementById(mainmenu).className="mainmenu";

  }

}



function isMouseToSubMenu(e,menu)

{

  if (e.type != 'mouseout')

  return false;

  var reltg = e.relatedTarget ? e.relatedTarget : e.toElement;

  while(reltg && reltg.id != menu)

  reltg = reltg.parentNode;

   

  return reltg;

}

</script>

</html>
strive_game 2012-06-04
  • 打赏
  • 举报
 回复
提供个思路代码楼主自己改把
将导航栏目设置成position：absolute;
然后将正文设置成position:relation;
top:栏目高度；
ujkk858 2012-06-03
  • 打赏
  • 举报
 回复
上面的代码有点问题,我重新发一份
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link href="App_Themes/StyleSheet.css" rel="stylesheet" type="text/css" />


<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
</head>
<body>
<form id="form1" runat="server">
<div class="menulearn" >
<ul >
<li class="MenuLi" ><a href="../Default.aspx"class="mainmenu" cname="主菜单导航" oname="主 页" otype="文字链接">主 页</a>

</li>

<li class="MenuLi" ><a id="mainmenuxx" href="../Default.aspx" onmouseout="Hind(event,'menuxx','mainmenuxx')" onmouseover="ShowMenu('menuxx','mainmenuxx')" class="mainmenu" cname="主菜单导航" oname="在线学习" otype="文字链接" >在线学习</a>
<div id="menuxx" class="menulist" onmouseout="Hind(event,'menuxx','mainmenuxx')" >

<a href="../Default.aspx" class="submenu" cname="主菜单导航" oname="在线学习" otype="文字链接" >在线学习</a>
<a href="../Default.aspx" class="submenu" cname="主菜单导航" oname="在线学习" otype="文字链接" >在线学习</a>
<a href="../Default.aspx" class="submenu" cname="主菜单导航" oname="在线学习" otype="文字链接" ><span>在线学习</span></a></div>
</li>

<li class="MenuLi" ><a id="mainmenucs" href="" onmouseout="Hind(event,'menucs','mainmenucs')" onmouseover="ShowMenu('menucs','mainmenucs')" class="mainmenu" cname="主菜单导航" oname="在线测试" otype="文字链接">在线测试</a>

<div id="menucs" class="menulist" onmouseout="Hind(event,'menucs','mainmenucs')"></div>

</li>

<li class="MenuLi" ><a href="../buider.aspx" class="mainmenu" cname="主菜单导航" oname="在线论坛" otype="文字链接">在线论坛</a></li>

<li class="MenuLi" ><a href="../Master/Master.aspx" class="mainmenu" cname="主菜单导航" oname="系统管理" otype="文字链接">系统管理</a></li>

</ul>
</div>


<div style=" width:249px; height:200px; border-right:thin dotted; border-top: thin dotted; border-left: thin dotted; border-bottom: thin dotted"><a>测试效果</a><a>测试效果</a><a>测试效果</a><a>测试效果</a><a>测试效果</a><a></a></div>
</form>
</body>
<script type="text/javascript">
function ShowMenu(menu,mainmenu)
{
if(document.getElementById(mainmenu)&&document.getElementById(mainmenu).className!="CurMenu")
document.getElementById(mainmenu).className="CurMenu";
if(document.getElementById(menu)&&document.getElementById(menu).style.display!="block")
document.getElementById(menu).style.display="block";
}

function Hind(e,menu,mainmenu)
{
if(!isMouseToSubMenu(e, menu))
{
if(document.getElementById(menu)&&document.getElementById(menu).style.display!="none")
document.getElementById(menu).style.display="none";
if(document.getElementById(mainmenu)&&document.getElementById(mainmenu).className!="mainmenu")
document.getElementById(mainmenu).className="mainmenu";
}
}

function isMouseToSubMenu(e,menu)
{
if (e.type != 'mouseout')
return false;
var reltg = e.relatedTarget ? e.relatedTarget : e.toElement;
while(reltg && reltg.id != menu)
reltg = reltg.parentNode;

return reltg;
}
</script>
</html>


css代码

body
{
margin:auto;
}
a
{
text-decoration: none;
} /*链接无下划线none,有为underline*/


.menulearn{ background:url(../image/main_menu_bg.gif) repeat-x; height:36px; }
.mainmenu { float:left;line-height:36px;color:White;width:83px; font-size:14px; font-weight:bold; height:36px; }
.menulearn a:hover {font-size:14px; color:Yellow; }
.menulearn li {display:inline; list-style:none; float:left; text-align:center; }
.MenuLi { width:83px; height:36px;}
.submenu { float:left;line-height:36px;color:Black;width:79px; font-size:14px; font-weight:bold; }
.menulist
{
float:left;line-height:36px;color:Red;width:79px; font-size:14px; font-weight:bold; display :none;
border-right: firebrick thin solid; border-left: firebrick thin solid; border-bottom: firebrick thin solid;}
.menulist a:link { font-size:14px; color:#b22222 }
.menulist a:hover { font-size:14px; color:#b22222; background-color:#ffe4e1 }
.menulist a:visited { font-size:14px; color:#b22222; }

.CurMenu {float:left; background:url(../image/main_focusbg.jpg) no-repeat;color:#b22222; text-align:center; height:36px; width:83px; line-height:36px;font-size:14px; font-weight:bold; }

a.CurMenu:link { font-size:14px; color:#b22222;}
a.CurMenu:visited { font-size:14px; color:#b22222;}
a.CurMenu:hover { font-size:14px; color:#b22222;}

.curMenu_left {float:left; background:url(../../image/main_curmenu_left.gif) no-repeat;width:4px;height:36px;}
.curMenu_right {float:left; background:url(../../image/main_curmenu_right.gif) no-repeat;width:4px;height:36px;}
.curMenu_main {margin-top:0px;float:left; background:url(../../image/main_curmenu_main.gif) repeat-x;color:black; height:36px; width:80px; line-height:38px;font-size:14px; font-weight:bold; }
.curMenu_main a:link { font-size:14px; color:#b22222; }
.curMenu_main a:visited { font-size:14px; color:#b22222; }
.curMenu_main a:hover { font-size:14px; color:#b22222; }
ujkk858 2012-06-03
  • 打赏
  • 举报
 回复
我问题说清楚点,就是导航菜单指上去的时候会有下拉菜单,正常应该是覆盖了下面主页面,但是我做出来的,却把主页面向下挤,我知道是去设置div标签的 z-index 但是怎么调都达不到效果,我初学css,研究了1天,头都疼了.不知道哪出了问题.
ujkk858 2012-06-03
  • 打赏
  • 举报
 回复
导航条的下拉菜代不能覆盖主页面的div标签呀
难道你测试不会?我IE6有问题?
001007009 2012-06-03
  • 打赏
  • 举报
 回复
怎么把页面撑开了，不明白 楼主的意思。



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <link href="App_Themes/StyleSheet.css" rel="stylesheet" type="text/css" />





<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

  <title>无标题页</title>

  <style type="text/css">

  body  

{

margin:auto;

background:#eee

}

a

{   

  text-decoration: none;

} /*链接无下划线none,有为underline*/





.menulearn{ background:url(../image/main_menu_bg.gif) repeat-x; height:36px;position:relative; z-index:100; }

.mainmenu { float:left;line-height:36px;color:White;width:83px; font-size:14px; font-weight:bold; height:36px; }

.menulearn a:hover {font-size:14px; color:Yellow; }

.menulearn li {display:inline; list-style:none; float:left; text-align:center; }

.MenuLi { width:83px; height:36px;}

.submenu { float:left;line-height:36px;color:Black;width:79px; font-size:14px; font-weight:bold; }

.menulist

{   

float:left;line-height:36px;color:Red;width:79px; font-size:14px; font-weight:bold; visibility :hidden;

border-right: firebrick thin solid; border-left: firebrick thin solid; border-bottom: firebrick thin solid;}

.menulist a:link { font-size:14px; color:#b22222 }

.menulist a:hover { font-size:14px; color:#b22222; background-color:#ffe4e1 }

.menulist a:visited { font-size:14px; color:#b22222; }



.CurMenu {float:left; background:url(../image/main_focusbg.jpg) no-repeat;color:#b22222; text-align:center; height:36px; width:83px; line-height:36px;font-size:14px; font-weight:bold; }



a.CurMenu:link { font-size:14px; color:#b22222;}

a.CurMenu:visited { font-size:14px; color:#b22222;}

a.CurMenu:hover { font-size:14px; color:#b22222;}  



.curMenu_left {float:left; background:url(../../image/main_curmenu_left.gif) no-repeat;width:4px;height:36px;}

.curMenu_right {float:left; background:url(../../image/main_curmenu_right.gif) no-repeat;width:4px;height:36px;}

.curMenu_main {margin-top:0px;float:left; background:url(../../image/main_curmenu_main.gif) repeat-x;color:black; height:36px; width:80px; line-height:38px;font-size:14px; font-weight:bold; }

.curMenu_main a:link { font-size:14px; color:#b22222; }

.curMenu_main a:visited { font-size:14px; color:#b22222; }

.curMenu_main a:hover { font-size:14px; color:#b22222; } 

  </style>

</head>

<body>

<form id="form1" runat="server">

<div class="menulearn" >

<ul >

<li class="MenuLi" ><a href="../Default.aspx"class="mainmenu" cname="主菜单导航" oname="主 页" otype="文字链接">主 页</a>



</li>



<li class="MenuLi" ><a id="mainmenuxx" href="../Default.aspx" onmouseout="Hind(event,'menuxx','mainmenuxx')" onmouseover="ShowMenu('menuxx','mainmenuxx')" class="mainmenu" cname="主菜单导航" oname="在线学习" otype="文字链接" >在线学习</a>

<div id="menuxx" class="menulist" onmouseout="Hind(event,'menuxx','mainmenuxx')" >



<a href="../Default.aspx" class="submenu" cname="主菜单导航" oname="在线学习" otype="文字链接" >在线学习</a>

<a href="../Default.aspx" class="submenu" cname="主菜单导航" oname="在线学习" otype="文字链接" >在线学习</a>

<a href="../Default.aspx" class="submenu" cname="主菜单导航" oname="在线学习" otype="文字链接" ><span>在线学习</span></a></div>

</li>



<li class="MenuLi" ><a id="mainmenucs" href="" onmouseout="Hind(event,'menucs','mainmenucs')" onmouseover="ShowMenu('menucs','mainmenucs')" class="mainmenu" cname="主菜单导航" oname="在线测试" otype="文字链接">在线测试</a>



<div id="menucs" class="menulist" onmouseout="Hind(event,'menucs','mainmenucs')"></div>



</li>



<li class="MenuLi" ><a href="../buider.aspx" class="mainmenu" cname="主菜单导航" oname="在线论坛" otype="文字链接">在线论坛</a></li>



<li class="MenuLi" ><a href="../Master/Master.aspx" class="mainmenu" cname="主菜单导航" oname="系统管理" otype="文字链接">系统管理</a></li>



</ul>

</div>





<div style=" position:absolute; z-index:1; width:249px; height:200px; border-right:thin dotted; border-top: thin dotted; border-left: thin dotted; border-bottom: thin dotted"><a>测试效果</a><a>测试效果</a><a>测试效果</a><a>测试效果</a><a>测试效果</a><a></a></div>

</form>

</body>

<script type="text/javascript">

function ShowMenu(menu,mainmenu)

{

  if(document.getElementById(mainmenu)&&document.getElementById(mainmenu).className!="CurMenu")

  document.getElementById(mainmenu).className="CurMenu";

  if(document.getElementById(menu)&&document.getElementById(menu).style.visibility!="visible")

  document.getElementById(menu).style.visibility="visible";

}



function Hind(e,menu,mainmenu)

{   

  if(!isMouseToSubMenu(e, menu))

  {

  if(document.getElementById(menu)&&document.getElementById(menu).style.visibility!="hidden")

  document.getElementById(menu).style.visibility="hidden";

  if(document.getElementById(mainmenu)&&document.getElementById(mainmenu).className!="mainmenu")

  document.getElementById(mainmenu).className="mainmenu";

  }

}



function isMouseToSubMenu(e,menu)

{

  if (e.type != 'mouseout')

  return false;

  var reltg = e.relatedTarget ? e.relatedTarget : e.toElement;

  while(reltg && reltg.id != menu)

  reltg = reltg.parentNode;

    

  return reltg;

}

</script>

</html>
【在线公开课】Kubernetes实战系列三——原理篇
Kubernetes是一个全新的基于容器技术的分布式架构方案，它不局限于任何一种语言，没有限定任何编程接口，是一个完备的分布式系统支撑平台。Kubernetes具有完备的集群管理能力，它是当前被业界广泛认可和看好的Docker分布式系统解决方案，使用它我们可以“轻装上阵”地开发复杂系统，全面拥抱微服务架构，具备超强的横向扩容能力，能够实现资源管理的自动化，以及跨多个数据中心的资源利用率大化.
IE7的web标准之道——3：（修正）引起页面布局混乱的祸首
IE7的web标准之道 IE历来被web标准的拥护者所诟病，而当FireFox横空出世以后，更多的网页制作者开始关注web标准设计。看着FireFox的市场占有率不停的上升，微软终于推出了IE7。但IE7是否真的能够力挽狂澜，是否真的能够得到用户的信任，是否真的能够得到网页设计者的认可呢？ 且看《IE7的web标准之道》系列文章，和你一起见证IE7的改变！ 前言 现在，最令网页设计者头...
HTML5学习笔记
第一章“HTML基础” HTML的基本概括 HTTP是一种网络 上传输数据的协议，专门用于传输以超文本CHypertex)或超媒体CHypermedi)的形式提供的信息。 HTML语言是一种文本类、 依靠解释的方式执行的标记语言，它是Interner上用于编写网页的主要语言。用HTML编写的超文本文件称为HTML文件。 要把信息发布到全球，就需要使用能够被大众所接受的语言，也就是使用一种大 多数计...
ColorUI组件库简易教程之交互组件
官方示例在此！！！官方示例在此！！！官方示例在此！！！ 这主要是基于uni-app开发的，所以，请多看uni-app文档，了解一些标签、属性，可以更好的使用该组件 目录 交互组件 Bar操作条 Nav导航栏 List列表 Card卡片 Form表单 TimeLine时间轴 Chat聊天 Swiper轮播图 Modal模态框 Steps步骤条 扩展插件 交互组件...
基于HTML+CSS+JavaScript “小味鲜“餐厅网页设计
简单的描述：一个餐厅的页面的主要功能，登录页面，注册页面，人物介绍，订餐购物车生活当需麻辣鲜香，方能体验人生百味。美食，永远都是人们最为关注的一个话题，因为没有任何人能够阻挡美食的诱惑，尤其是现代社会下，我们对于美食的追求也越来越明显，以前可能还满足于温饱，但现在更多的是追求食物的本身，怎么吃到更多的美食是现代人经常所想的事情，因此旅行也帮助我们吃到其他不同的美食，甚至有些人环球旅行，也是为了美食而展开。提起美食，那么就不得不说到餐厅，网页作品代码简单，可使用任意 HTML 编辑软件（如：等任意html编辑
CSS

61,112

社区成员

60,730

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章