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" /> <meta http-equiv="Content-Language" content="zh-CN" /> <title>DIV+CSS仿microsoft首页下部</title> <style type="text/css"><!--#dotmid{}#dotMid ul{ float:left; margin-left:10px;}#dotMid li{ width:100px; float:none; height:40px; background:#ccc; border:solid 1px #000; border-left:none;border-right:none; cursor:pointer; position:relative;}#dotMid li:hover{ background:red;}#dotMid li div{width:300px; height:250px;background:red;text-align:center; color:#fff;}#dotMid li #dot1{ display:block; position:absolute; left:100px; }#dotMid li #dot2{ display:none; position:absolute; left:100px; top:-42px;}#dotMid li #dot3{ display:none; position:absolute; left:100px; top:-84px;}#dotMid li #dot4{ display:none; position:absolute; left:100px; top:-126px;}#dotMid li #dot5{ display:none; position:absolute; left:100px; top:-168px;}#dotMid li #dot6{ display:none; position:absolute; left:100px; top:-210px;}#dotMid li:hover #dot1{ display:block;}#dotMid li:hover #dot2{ display:block;}#dotMid li:hover #dot3{ display:block; }#dotMid li:hover #dot4{ display:block;}#dotMid li:hover #dot5{ display:block;}#dotMid li:hover #dot6{ display:block;}--></style></head><body> <div id="dotMid"> <ul id=""> <li>栏目1<div id="dot1"> 我的朋友</div> </li> <li>栏目2<div id="dot2"> 经典</div> </li> <li>栏目3<div id="dot3"> Arsan</div> </li> <li>栏目4<div id="dot4"> Esun</div> </li> <li>栏目5<div id="dot5"> 论坛</div> </li> <li>栏目6<div id="dot6"> blueIdea</div> </li> </ul> </div></body></html>
以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索css
， div
， 栏目
， microsoft
， 首页
， 经典
， 仿百度首页
， 仿微软首页
， 仿Google首页
仿雅虎首页
div css首页布局实例、microsoft edge首页、css microsoft yahei、css3 酷炫 首页、百度首页css代码，以便于您获取更多的相关知识。
时间： 2024-08-02 20:33:53