求css 样式调试在线等_html/css_WEB-ITnose-HTML 튜토리얼-php.cn

回复讨论(解决方案)

집

웹 프론트엔드

HTML 튜토리얼

求css 样式调试在线等_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 09:41 AM

css 三级菜单样式

<!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=utf-8" /><title>Untitled Document</title><style>body{	margin:0px;	padding:0px;	font-size:14px;}.container{	position:absolute;}.menutitle{	width:220px;	height:30px;	line-height:30px;	font-size:14px;	color:#FFF;	background:#950000;	border:1px solid #7B0000;	text-align:center;	font-weight:900;}.menubody{	width:218px;	border:2px solid #7B0000;	background:#FFEFE8;	}.menubody ul{	width:218px;	margin:0px;	padding:0px;}.menubody ul li{	position:relative;}.menubody ul li span{	margin:2px 12px 2px 0px;	text-align:left;	height:20px;	display:block;	border-bottom:1px solid #FFF;	padding:5px 10px;	background: url(images/002.gif) 190px no-repeat;}.menubody ul li span:hover{	text-align:left;	height:20px;	border-bottom:1px solid #7B0000;	border-top:1px solid #7B0000;	padding:5px 10px;	background:#FFF;	color:#000;}.menuchild{	position: absolute;	top:0px;	left:206px;	background:#FFF;	border:1px solid #7B0000;	width:400px;	}.menuchild dt,.menuchild dd{	display:inline;	margin:4px 2px;	padding:0 5px;}</style><script>window.onload = function(){	var span1 = document.getElementById('span1');	var abc = document.getElementById('abc');	span1.onmouseover = function ()	{			abc.style.display = 'block';	}	span1.onmouseout = function ()	{			abc.style.display = 'none';	}}</script></head><body><div class="container">	<div class="menutitle">全部商品菜单</div>    <div class="menubody">    	<ul>        	<li><span id="span1">电子产品</span>            <div class="menuchild" id="abc" style="display:none">        		<dl>                	<dt></dt>                    <dd>笔记本超</dd>                    <dd>极本</dd>                    <dd>上网本</dd>                    <dd>配件台式机</dd>                </dl>                <dl>                	<dt></dt>                    <dd>笔记本超</dd>                    <dd>极本</dd>                    <dd>上网本</dd>                    <dd>配件台式机</dd>                </dl>                <dl>                	<dt></dt>                    <dd>笔记本超</dd>                    <dd>极本</dd>                    <dd>上网本</dd>                    <dd>配件台式机</dd>                </dl>                <dl>                	<dt></dt>                    <dd>笔记本超</dd>                    <dd>极本</dd>                    <dd>上网本</dd>                    <dd>配件台式机</dd>                </dl>       		</div>            </li>            <li><span>服装、女装、男装</span></li>            <li><span>化妆品、美肤品</span></li>            <li><span>运动器材</span></li>            <li><span>美食团购</span></li>            <li><span>租房专区</span></li>        </ul>            </div></div></body></html>

로그인 후 복사

回复讨论(解决方案)

我想实现这样的效果

求css高手帮忙看看css样式，我想实现三级菜单呢，javascript部分还没有写

参考京东的改的，在看看吧，每个人的思路都不一样。

<!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=utf-8" />    <title>Untitled Document</title>    <style>        body{            margin:0px;            padding:0px;            font-size:14px;}        .container{            position:absolute;}        .menutitle{            width:220px;            height:30px;            line-height:30px;            font-size:14px;            color:#FFF;            background:#950000;            border:1px solid #7B0000;            text-align:center;            font-weight:900;}        .menubody{            width:218px;            border:2px solid #7B0000;            background:#FFEFE8;        }        .menubody ul{            width:218px;            margin:0px;            padding:0px;}        .menubody ul li{            position:relative; height:35px;        }        .menubody ul li span{            position:absolute; z-index:13; width:198px;            margin:2px 12px 2px 0px;            text-align:left;            height:20px;            display:block;            border-bottom:1px solid #FFF;            padding:5px 10px;            background: url(images/002.gif) 190px no-repeat;}        .menubody ul li span:hover,.menubody ul li span.hover{            text-align:left;            height:20px;            border-bottom:1px solid #7B0000;            border-top:1px solid #7B0000;            padding:5px 10px;            background:#FFF;            color:#000;}        .menuchild{            position: absolute;            top:0px;            left:217px;            background:#FFF;            border:1px solid #7B0000;            width:400px; z-index:12;        }        .menuchild dt,.menuchild dd{            display:inline;            margin:4px 2px;            padding:0 5px;}    </style>    <script>        window.onload = function () {            var span1 = document.getElementById('span1');            var abc = document.getElementById('abc');            span1.onmouseover = function () {                abc.style.display = 'block';            }            span1.onmouseout = function () {                abc.style.display = 'none';            }        }    </script></head><body><div class="container">    <div class="menutitle">全部商品菜单</div>    <div class="menubody">        <ul>            <li>                    <span id="span1">电子产品</span>                    <div class="menuchild" id="abc" style="display:none;">                        <dl>                            <dt></dt>                            <dd>笔记本超</dd>                            <dd>极本</dd>                            <dd>上网本</dd>                            <dd>配件台式机</dd>                        </dl>                        <dl>                            <dt></dt>                            <dd>笔记本超</dd>                            <dd>极本</dd>                            <dd>上网本</dd>                            <dd>配件台式机</dd>                        </dl>                        <dl>                            <dt></dt>                            <dd>笔记本超</dd>                            <dd>极本</dd>                            <dd>上网本</dd>                            <dd>配件台式机</dd>                        </dl>                        <dl>                            <dt></dt>                            <dd>笔记本超</dd>                            <dd>极本</dd>                            <dd>上网本</dd>                            <dd>配件台式机</dd>                        </dl>                    </div>            </li>            <li><span>服装、女装、男装</span></li>            <li><span>化妆品、美肤品</span></li>            <li><span>运动器材</span></li>            <li><span>美食团购</span></li>            <li><span>租房专区</span></li>        </ul>    </div></div></body></html>

로그인 후 복사

ok 了

<!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=utf-8" /><title>Untitled Document</title><style>body{	margin:0px;	padding:0px;	font-size:14px;}.container{	position:absolute;}.menutitle{	width:220px;	height:30px;	line-height:30px;	font-size:14px;	color:#FFF;	background:#950000;	border:1px solid #7B0000;	text-align:center;	font-weight:900;}.menubody{	width:218px;	border:2px solid #7B0000;	background:#FFEFE8;	}.menubody ul{	width:218px;	margin:0px;	padding:0px;}.menubody ul li{	position:relative;}.menubody ul li span{	position:relative;	z-index:40;	margin:2px 10px 2px 0px;	text-align:left;	height:20px;	display:block;	border-bottom:1px solid #FFF;	padding:5px 10px;	background: url(images/002.gif) 190px no-repeat;}.menubody ul li span:hover{	position:relative;	z-index:100;	text-align:left;	height:20px;	border-bottom:1px solid #7B0000;	border-top:1px solid #7B0000;	padding:5px 10px;	background:#FFF;	color:#000;}.menuchild{	position: absolute;	top:0px;	left:207px;	background:#FFF;	border:1px solid #7B0000;	width:400px;	z-index:90;	}.menuchild dt,.menuchild dd{	display:inline;	margin:4px 2px;	padding:0 5px;}</style><script>window.onload = function(){	var span1 = document.getElementById('span1');	var abc = document.getElementById('abc');	span1.onmouseover = function ()	{			abc.style.display = 'block';		}	span1.onmouseout = function ()	{			abc.style.display = 'none';	}}</script></head><body><div class="container">	<div class="menutitle">全部商品菜单</div>    <div class="menubody">    	<ul>        	<li><span id="span1">电子产品</span>            <div class="menuchild" id="abc" style="display:none">        		<dl>                	<dt></dt>                    <dd>笔记本超</dd>                    <dd>极本</dd>                    <dd>上网本</dd>                    <dd>配件台式机</dd>                </dl>                <dl>                	<dt></dt>                    <dd>笔记本超</dd>                    <dd>极本</dd>                    <dd>上网本</dd>                    <dd>配件台式机</dd>                </dl>                <dl>                	<dt></dt>                    <dd>笔记本超</dd>                    <dd>极本</dd>                    <dd>上网本</dd>                    <dd>配件台式机</dd>                </dl>                <dl>                	<dt></dt>                    <dd>笔记本超</dd>                    <dd>极本</dd>                    <dd>上网本</dd>                    <dd>配件台式机</dd>                </dl>       		</div>            </li>            <li><span>服装、女装、男装</span></li>            <li><span>化妆品、美肤品</span></li>            <li><span>运动器材</span></li>            <li><span>美食团购</span></li>            <li><span>租房专区</span></li>        </ul>            </div></div></body></html>

로그인 후 복사

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7319

자바 튜토리얼

1625

Cakephp 튜토리얼

1349

라라벨 튜토리얼

1261

PHP 튜토리얼

1209

Related knowledge

공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까? Mar 04, 2025 pm 12:32 PM

공식 계정 웹 페이지 업데이트 캐시, 이것은 간단하고 간단하며 냄비를 마시기에 충분히 복잡합니다. 공식 계정 기사를 업데이트하기 위해 열심히 노력했지만 사용자는 여전히 기존 버전을 열었습니까? 이 기사에서는이 뒤에있는 비틀기와 회전을 살펴 보고이 문제를 우아하게 해결하는 방법을 살펴 보겠습니다. 읽은 후에는 다양한 캐싱 문제를 쉽게 처리 할 수있어 사용자가 항상 가장 신선한 콘텐츠를 경험할 수 있습니다. 기본 사항에 대해 먼저 이야기 해 봅시다. 액세스 속도를 향상시키기 위해 브라우저 또는 서버는 일부 정적 리소스 (예 : 그림, CSS, JS) 또는 페이지 컨텐츠를 저장합니다. 다음에 액세스 할 때 다시 다운로드하지 않고도 캐시에서 직접 검색 할 수 있으며 자연스럽게 빠릅니다. 그러나 이것은 또한 양날의 검입니다. 새 버전은 온라인입니다.