用列表ul制作css横向菜单_ul数据横向展示改为竖向展示-优快云博客

本文链接：https://blog.youkuaiyun.com/lmzpp/article/details/6029305

这个示例展示了如何利用CSS和JavaScript创建一个横向的游戏规则菜单。通过在ul列表上应用样式，实现了游戏规则的切换功能。用户可以鼠标悬停在菜单项上，触发JavaScript函数stepGo()来切换游戏介绍、基本规则和评分规则的内容展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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=gb2312" /> <title>无标题文档</title> <link href="css.css" mce_href="css.css" rel="stylesheet" type="text/css" /> <mce:script type="text/javascript"></mce:script> </head> <body> <div class="rulebox" id="rulebox"> <div class="formline"> <div class="menu"> <ul> <li id="tab_1" class="lifocus" οnmοuseοver="javascript:stepGo(1);"><a>游戏介绍</a></li> <li id="tab_2" οnmοuseοver="javascript:stepGo(2);"><a>基本规则</a></li> <li id="tab_3" οnmοuseοver="javascript:stepGo(3);"><a>评分规则</a></li> <div class="clean"></div> </ul> <div class="clean"></div> </div> <div class="Main"> <div class="boxline"> <div class="content" id="content_1"> 大话骰为2-4人进行即时的对玩，玩家开骰后依所有玩家的骰数评判开骰与被开骰者之间的胜利方。<br /> 骰子的大小：每人五个骰子。每个骰子数字从一至六点。每人各摇一次，然后玩家看自己盒內骰子的情況，点数为：<br /> <p ><img width="356" height="63" src="gameIntroduction_wps_clip_image-16247.png" mce_src="gameIntroduction_wps_clip_image-16247.png"></p> <p >骰子有6个点数，其中“点数一”为特殊点（在沒有被叫的情况下，一可以当作任意的点数。）<br /> 玩家依次序所有玩家骰子有几个某点数的骰子。下一家可以叫出更高的个数或点数的组合或选择开骰。开骰后，如果点数組合存在，则叫方胜利；如果不存在，则开方胜利。 </p> </div> <div class="content" id="content_2"> <strong>叫骰</strong><br /> 決定了谁先叫之后，玩家骰盅会自动开始摇盅持续約为三至四秒，然后骰盅会斜斜地一边打开給玩家观察來叫骰。打开两秒后，骰蛊会合上，点击骰盅或着看骰，可以重新显示骰子点数組合。叫骰规则:以当前游戏玩家总数确定从几个叫起，如两个人以两个骰起叫，只能从2个X（骰数）开始叫（例如：2个2,2个3）。叫数只能越叫越大（例如：2个6， 3个2，喊了2个6后就不能再喊2个3之类的）叫过1点的话，那1点以后就不可以当任何数了（如： 2个1，4个1之类的）。<br /> <strong>看骰</strong><br /> 玩家开始游戏后，可以随时看自己的骰蛊中的数。<br /> <strong>开骰</strong><br /> 玩家根据当前游戏玩家总数(n)，可以选择开前一个玩家或者前（n-1）家。 </div> <div class="content" id="content_3"> 当游戏结束后，根据所有玩家骰子的内容、开骰人、被开骰人、底分信息，来统计输赢。<br /> 如：A、B、C、D四个玩家，底分100，玩家D开玩两家(B和C)。没有人叫过1 A的内容：3,3,5,6,6 最新叫骰 8个5 B的内容：1,1,4,5,6 最新叫骰 8个6 C的内容：2,3,4,5,6 最新叫骰 9个6 D的内容：1,3,4,4,5 开骰B、C 结果如下： A与开骰没有关系，结果不输不嬴。 B 被开骰人，叫骰 8个6，实际7个6。输-100；开骰人D赢100 C 被开骰人，叫骰 9个6，实际7个6。输-100；开骰人D赢100 D 开骰人开两家都赢，总计 200 </div> </div> </div> </div> </div> </body> </html>

/* CSS Document */ .menu{ width:500px; height:25px; border:2px solid #eee; padding-top:5px; } .menu ul li{ list-style:none; float:left; width:100px; } .menu ul{ margin-top:0px; } #rulebox { position:absolute; left:62px; top:64px; border: 1px solid #0CF; width:500px; height:338px; z-index:1; } a:hover {color: #FF00FF}