Html 用表格法制作交互式菜单
我已经写了一些html代码并赋予了它风格。这是引导程序主页的同一页。只是为了我的练习。一切都很好，但我不能使顶部菜单导航与引导相同。我的意思是当我把鼠标悬停在菜单上时，菜单后面会出现一个背景。每个菜单的大小应该不同。所以，我想我必须为每一个li定义块，那么我该怎么做呢。请参考bootrap主页了解顶部菜单。多谢各位Html 用表格法制作交互式菜单,html,css,Html,Css,我已经写了一些html代码并赋予了它风格。这是引导程序主页的同一页。只是为了我的练习。一切都很好，但我不能使顶部菜单导航与引导相同。我的意思是当我把鼠标悬停在菜单上时，菜单后面会出现一个背景。每个菜单的大小应该不同。所以，我想我必须为每一个li定义块，那么我该怎么做呢。请参考bootrap主页了解顶部菜单。多谢各位 <html> <head> <style type="text/css"> body{ background-
<html>
<head>
<style type="text/css">
body{
background-color: #5C4283;
margin: 0;
}
#topBar{
background-color: white;
width: 100%;
height: 50px;
}
#bootstrap{
font-size: 19px;
font-family: Arial;
color: #5C4283;
float:left;
margin-top: 12px;
margin-left: 100px;
}
#topMenu{
margin-top: 0;
float: left;
font-size: 15px;
font-family: Arial;
color: #5C4283;
height: 35px;
padding-top: 15px;
}
#topMenu li{
list-style-type: none;
float: left;
margin-right: 20px;
}
#topMenu ul{
margin: 0;
}
#topMenu a{
text-decoration: none;
}
#topSideMenu{
margin-top: 15px;
margin-left: 430px;
float: left;
font-size: 15px;
font-family: Arial;
color: #5C4283;
}
#topSideMenu li{
list-style-type: none;
display: inline;
margin-right: 20px;
}
#topSideMenu ul{
margin: 0;
}
#logoLink{
color: white;
text-decoration: none;
display: block;
border: 1px solid rgba(255,255,255, 0.7);
width : 150px;
height: 150px;
border-radius: 20px;
}
#wrapper{
margin-top: 100px;
width: 100%;
}
#container {
margin: 0 auto;
width:150px;
}
#bootText{
font-size: 110px;
margin: 0;
padding: 0;
font-family: Arial;
padding-left: 40px;
padding-top: 15px;
}
#logoText{
color: white;
font-size: 30px;
font-family: Arial;
text-align: center;
word-spacing: 5px;
line-height: 130%;
margin-top: 30px;
margin-bottom: 30px;
}
#downloadBoot{
margin: 0 auto;
width: 250px;
margin-bottom: 60px;
}
#dwnBootstrap{
display: block;
width: 250px;
height: 60px;
border: 1px solid rgba(255,255,255, 0.7);
border-radius: 10px;
color: white;
text-decoration: none;
font-family: Arial;
font-size: 20px;
text-align: center;
}
#dwnBootstrap:hover{
background-color: white;
color: #5C4283;
}
#dwnText{
margin: 0;
padding-top: 17px;
}
#versionTxt{
color: white;
font-family: Arial;
font-size: 14px;
text-align: center;
opacity: 0.3;
}
#adBlock{
margin: 0 auto;
width: 330px;
height: 130px;
border: 1px solid rgba(255,255,255, 0.3);
border-radius: 5px;
}
#adpic{
margin-top: 16px;
margin-left: 15px;
width: 130px;
height: 100px;
position: absolute;
}
#adtext{
width: 150px;
height: 100px;
margin-top: 16px;
margin-left: 160px;
color: white;
font-family: Arial;
font-size: 13px;
word-spacing: 1px;
}
#adlink{
text-decoration: none;
color: white;
}
#adsvia{
opacity: 0.4;
}
#restbody{
background-color: white;
width: 100%;
height: 1900px;
margin-top: 80px;
}
#upperPart{
margin-top: 100px;
position: absolute;
width: 100%;
}
#uppertext{
margin: 0 auto;
width: 665px;
}
#everyone{
font-family: Calibri;
font-weight: lighter;
font-size: 45px;
color: #3F3333;
margin: 0;
}
#bottomtext{
width: 920px;
margin: 0 auto;
}
#front-end{
font-family: Calibri;
font-weight: normal;
font-size: 23px;
text-align: center;
color: #555555;
margin: 0;
}
#firstimage{
margin-top: 40px;
margin-left: 80px;
width: 380px;
height: 300px;
text-align: center;
float: left;
}
#img01headingtxt{
margin-top: 15px;
color: #3E3733;
font-family: Calibri;
font-size: 28px;
margin-bottom: 0;
}
#img01text{
margin-top: 5px;
color: #3E3733;
font-family: Calibri;
font-size: 19px;
}
#secondimage{
margin-top: 40px;
margin-left: 30px;
width: 400px;
height: 300px;
text-align: center;
float: left;
}
#img02headingtxt{
margin-top: 15px;
color: #3E3733;
font-family: Calibri;
font-size: 28px;
margin-bottom: 0;
}
#img02text{
margin-top: 5px;
color: #3E3733;
font-family: Calibri;
font-size: 19px;
}
#thirdimage{
margin-top: 40px;
margin-right: 40px;
width: 400px;
height: 300px;
text-align: center;
float: right;
}
#img03headingtxt{
margin-top: 15px;
color: #3E3733;
font-family: Calibri;
font-size: 28px;
margin-bottom: 0;
}
#img03text{
margin-top: 5px;
color: #3E3733;
font-family: Calibri;
font-size: 19px;
}
#images{
width: 100%;
height: 330px;
}
#firstline{
margin-top: 40px;
color: #EEEEEE;
opacity: 0.2;
width: 120px;
}
#singleline{
font-family: Calibri;
font-size: 24px;
color: #55555B;
text-align: center;
margin-top: 40px;
}
#gifthubbtn{
margin: 0 auto;
width: 250px;
}
#gifthub{
display: block;
border: 1px solid #563D7C;
border-radius: 7px;
width: 250px;
height: 45px;
text-decoration: none;
text-align: center;
color: #551A8B;
}
#gifthub:hover{
color: white;
background-color: #563D7C;
}
#gifthubtxt{
font-size: 22px;
margin-top: 8px;
font-family: Calibri;
}
#secondline{
margin-top: 100px;
color: #EEEEEE;
opacity: 0.3;
}
#builtWith{
margin-top: 110px;
}
#builtwithtxt{
font-size: 45px;
font-family: Calibri;
text-align: center;
color: #333333;
margin: 0;
}
#builtwithbtm{
width: 900px;
margin: 0 auto;
}
#builtwithbtmtxt{
font-family: Calibri;
font-size: 24px;
color: #555555;
text-align: center;
margin-top: 5px;
}
#collection{
text-decoration: none;
color: #428BCA;
}
#collection:hover{
text-decoration: underline;
color: #2a6496;
}
#btmimagecontainer{
margin-top: 40px;
}
#btmimages{
width: 1141px;
height: 229px;
margin: 0 auto;
}
#btmimagetxt{
margin-top: 70px;
}
#explorebtn{
margin: 0 auto;
width: 250px;
}
#explore{
display: block;
border: 1px solid #563D7C;
border-radius: 7px;
width: 200px;
height: 45px;
text-decoration: none;
text-align: center;
color: #551A8B;
}
#exploretxt{
font-size: 22px;
margin-top: 8px;
font-family: Calibri;
}
#explore:hover{
color: white;
background-color: #563D7C;
}
#links{
margin-top: 50px;
}
#sociallinks{
width: 614px;
margin: 0 auto;
}
#firstlink{
float: left;
width: 105px;
height: 27px;
}
#secondlink{
float: left;
margin-left: 20px;
width: 110px;
height: 27px;
}
#thirdlink{
float: left;
margin-left: 20px;
width: 235px;
height: 27px;
}
#fourthlink{
float: left;
margin-left: 20px;
width: 104px;
height: 27px;
}
#footer{
margin-top: 100px;
}
#footertxtarea{
margin: 0 auto;
width: 510px;
}
#footertxt{
color: #7777A4;
font-family: Calibri;
font-size: 18px;
text-align: center;
}
</style>
</head>
<body>
<div id="topBar">
<div id="bootstrap">Bootstrap</div>
<div id="topMenu">
<ul>
<li id="firstli"><a href="">Getting Started</a></li>
<li><a href="" id="secondli">CSS</a></li>
<li><a href="">Components</a></li>
<li><a href="">Javascript</a></li>
<li><a href="">Customize</a></li>
</ul>
</div>
<div id="topSideMenu">
<ul>
<li>Expo</li>
<li>Blog</li>
</ul>
</div>
</div>
<div id="wrapper">
<div id="container">
<a id="logoLink"><p id="bootText">B</p></a>
</div>
<div id="logoText">
Bootstrap is the most popular HTML, CSS, and JS framework for <br>developing responsive, mobile first projects on the web.
</div>
<div id="downloadBoot">
<a href="" id="dwnBootstrap"><p id="dwnText">Download Bootstrap</p></a><p id="versionTxt">Currently v3.3.0</p>
</div>
<div id="adBlock">
<div id="adpic">
<a href=""><img src="ad pic.jpg" /></a>
</div>
<div id="adtext">
<p>We connect highly qualified audiences with highly relevant services, products, and brands.</p>
<p><a href="" id="adlink"><span id="adsvia">ads via </span>Carbon</a></p>
</div>
</div>
<div id="restbody">
<div id="upperPart">
<div id="uppertext">
<p id="everyone">Designed for everyone, everywhere.</p>
</div>
<div id="bottomtext">
<p id="front-end">Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.</p>
</div><hr id="firstline">
<div id="images">
<div id="firstimage">
<img src="img01.jpg" />
<p id="img01headingtxt">Preprocessors</p>
<p id="img01text">Bootstrap ships with vanilla CSS, but its source code utilizes the two most popular CSS preprocessors, Less and Sass. Quickly get started with precompiled CSS or build on the source.</p>
</div>
<div id="secondimage">
<img src="img02.jpg" />
<p id="img02headingtxt">One framework, every device.</p>
<p id="img02text">Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.</p>
</div>
<div id="thirdimage">
<img src="img03.jpg" />
<p id="img03headingtxt">Full of features</p>
<p id="img03text">With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.</p>
</div>
</div>
<hr id="firstline">
<div>
<p id="singleline">Bootstrap is open source. It's hosted, developed, and maintained on GitHub.</p>
</div>
<div id="gifthubbtn">
<a href="" id="gifthub"><p id="gifthubtxt">View the GiftHub Project</p></a>
</div>
<hr id="secondline">
<div id="builtWith">
<p id="builtwithtxt">Built with Bootstrap.</p>
</div>
<div id="builtwithbtm">
<p id="builtwithbtmtxt">Millions of amazing sites across the web are being built with Bootstrap. Get started on your own with our growing <a href="" id="collection">collection of examples</a> or by exploring some of our favorites.</p>
</div>
<hr id="firstline">
<div id="btmimagecontainer">
<div id="btmimages">
<a href=""><img src="btmimage.jpg"></a>
</div>
</div>
<div id="btmimagetxt">
<p id="builtwithbtmtxt">We showcase dozens of inspiring projects built with Bootstrap on the Bootstrap Expo.</p>
</div>
<div id="explorebtn">
<a href="" id="explore"><p id="exploretxt">Explore the Expo</p></a>
</div>
<hr id="secondline" />
<div id="links">
<div id="sociallinks">
<div id="firstlink">
<a href=""><img src="link01.jpg" /></a>
</div>
<div id="secondlink">
<a href=""><img src="link02.jpg" /></a>
</div>
<div id="thirdlink">
<a href=""><img src="link03.jpg" /></a>
</div>
<div id="fourthlink">
<a href=""><img src="link04.jpg" /></a>
</div>
</div>
</div>
<div id="footer">
<div id="footertxtarea">
<p id="footertxt">Designed and built with all the love in the world by @mdo and @fat. <br> Maintained by the core team with the help of our contributors. <br> Code licensed under MIT, documentation under CC BY 3.0.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
身体{
背景色：#5C4283；
保证金：0；
}
#顶栏{
背景色：白色；
宽度：100%；
高度：50px；
}
#引导{
字号：19px；
字体系列：Arial；
颜色：#5C4283；
浮动：左；
边缘顶部：12px；
左边距：100px；
}
#顶部菜单{
边际上限：0；
浮动：左；
字体大小：15px；
字体系列：Arial；
颜色：#5C4283；
高度：35px；
填充顶部：15px；
}
#顶级菜单李{
列表样式类型：无；
浮动：左；
右边距：20px；
}
#topMenu ul{
保证金：0；
}
#顶部菜单a{
文字装饰：无；
}
#上部菜单{
边缘顶部：15px；
左边距：430px；
浮动：左；
字体大小：15px；
字体系列：Arial；
颜色：#5C4283；
}
#上半菜单li{
列表样式类型：无；
显示：内联；
右边距：20px；
}
#顶边菜单{
保证金：0；
}
#标识链接{
颜色：白色；
文字装饰：无；
显示：块；
边框：1px实心rgba（255255,0.7）；
宽度：150px；
高度：150像素；
边界半径：20px；
}
#包装纸{
边缘顶部：100px；
宽度：100%；
}
#容器{
保证金：0自动；
宽度：150px；
}
#引导文本{
字体大小：110px；
保证金：0；
填充：0；
字体系列：Arial；
左侧填充：40px；
填充顶部：15px；
}
#标识文字{
颜色：白色；
字体大小：30px；
字体系列：Arial；
文本对齐：居中；
字距：5px；
线高：130%；
边缘顶部：30px；
边缘底部：30px；
}
#下载引导{
保证金：0自动；
宽度：250px；
边缘底部：60px；
}
#德文布茨陷阱{
显示：块；
宽度：250px；
高度：60px；
边框：1px实心rgba（255255,0.7）；
边界半径：10px；
颜色：白色；
文字装饰：无；
字体系列：Arial；
字体大小：20px；
文本对齐：居中；
}
#dwnBootstrap:悬停{
背景色：白色；
颜色：#5C4283；
}
#dwnText{
保证金：0；
填充顶部：17px；
}
#版本文本{
颜色：白色；
字体系列：Arial；
字体大小：14px；
文本对齐：居中；
不透明度：0.3；
}
#广告块{
保证金：0自动；
宽度：330px；
高度：130像素；
边框：1px实心rgba（255255,0.3）；
边界半径：5px；
}
#adpic{
边缘顶部：16px；
左边距：15px；
宽度：130px；
高度：100px；
位置：绝对位置；
}
#广告文本{
宽度：150px；
高度：100px；
边缘顶部：16px；
左边距：160像素；
颜色：白色；
字体系列：Arial；
字体大小：13px；
字距：1px；
}
#广告链接{
文字装饰：无；
颜色：白色；
}
#阿德维亚{
不透明度：0.4；
}
#restbody{
背景色：白色；
宽度：100%；
高度：1900px；
边缘顶部：80px；
}
#上部{
边缘顶部：100px；
位置：绝对位置；
宽度：100%；
}
#大写{
保证金：0自动；
宽度：665px；
}
#每个人{
字体系列：Calibri；
字体重量：较轻；
字体大小：45px；
颜色：#3F3333；
保证金：0；
}
#底部文本{
宽度：920px；
保证金：0自动；
}
#前端{
字体系列：Calibri；
字体大小：正常；
字体大小：23px；
文本对齐：居中；
颜色：#555555；
保证金：0；
}
#第一映像{
边缘顶端：40px；
左边距：80px；
宽度：380px；
高度：300px；
文本对齐：居中；
浮动：左；
}
#IMG01HeadingText{
边缘顶部：15px；
颜色：#3E3733；
字体系列：Calibri；
字号：28px；
页边距底部：0；
}
#IMG01文本{
边缘顶部：5px；
颜色：#3E3733；
字体系列：Calibri；
字号：19px；
}
#第二映像{
边缘顶端：40px；
左边距：30px；
宽度：400px；
高度：300px；
文本对齐：居中；
浮动：左；
}
#IMG02HeadingText{
边缘顶部：15px；
颜色：#3E3733；
字体系列：Calibri；
字号：28px；
页边距底部：0；
}
#IMG02文本{
边缘顶部：5px；
颜色：#3E3733；
字体系列：Calibri；
字号：19px；
}
#三十岁{
边缘顶端：40px；
右边距：40px；
宽度：400px；
高度：300px；
文本对齐：居中；
浮动：对；
}
#img03headingtxt{
边缘顶部：15px；
颜色：#3E3733；
字体系列：Calibri；
字号：28px；
页边距底部：0；
}
#IMG03文本{
边缘顶部：5px；
颜色：#3E3733；
字体系列：Calibri；
字号：19px；
}
#图像{
宽度：100%；
高度：330px；
}
#一线{
边缘顶端：40px；
#menuitem {
background-color: white;
color: black;
}
#menuitem:hover {
background-color: black;
color: white;
}
body{
background-color: #5C4283;
margin: 0;
}
#topBar{
background-color: white;
width: 100%;
height: 50px;
}
#bootstrap{
font-size: 19px;
font-family: Arial;
color: #5C4283;
float:left;
margin-top: 12px;
margin-left: 100px;
}
#topMenu{
margin-top: 0;
float: left;
font-size: 15px;
font-family: Arial;
color: #5C4283;
height: 35px;
padding-top: 15px;
}
#topMenu li{
list-style-type: none;
float: left;
}
#topMenu ul{
margin: 0;
}
#topMenu a{
text-decoration: none;
}
#topSideMenu{
margin-top: 15px;
margin-left: 430px;
float: left;
font-size: 15px;
font-family: Arial;
color: #5C4283;
}
#topSideMenu li{
list-style-type: none;
display: inline;
margin-right: 20px;
}
#topSideMenu ul{
margin: 0;
}
#logoLink{
color: white;
text-decoration: none;
display: block;
border: 1px solid rgba(255,255,255, 0.7);
width : 150px;
height: 150px;
border-radius: 20px;
}
#wrapper{
margin-top: 100px;
width: 100%;
}
#container {
margin: 0 auto;
width:150px;
}
#bootText{
font-size: 110px;
margin: 0;
padding: 0;
font-family: Arial;
padding-left: 40px;
padding-top: 15px;
}
#logoText{
color: white;
font-size: 30px;
font-family: Arial;
text-align: center;
word-spacing: 5px;
line-height: 130%;
margin-top: 30px;
margin-bottom: 30px;
}
#downloadBoot{
margin: 0 auto;
width: 250px;
margin-bottom: 60px;
}
#dwnBootstrap{
display: block;
width: 250px;
height: 60px;
border: 1px solid rgba(255,255,255, 0.7);
border-radius: 10px;
color: white;
text-decoration: none;
font-family: Arial;
font-size: 20px;
text-align: center;
}
#dwnBootstrap:hover{
background-color: white;
color: #5C4283;
}
#dwnText{
margin: 0;
padding-top: 17px;
}
#versionTxt{
color: white;
font-family: Arial;
font-size: 14px;
text-align: center;
opacity: 0.3;
}
#adBlock{
margin: 0 auto;
width: 330px;
height: 130px;
border: 1px solid rgba(255,255,255, 0.3);
border-radius: 5px;
}
#adpic{
margin-top: 16px;
margin-left: 15px;
width: 130px;
height: 100px;
position: absolute;
}
#adtext{
width: 150px;
height: 100px;
margin-top: 16px;
margin-left: 160px;
color: white;
font-family: Arial;
font-size: 13px;
word-spacing: 1px;
}
#adlink{
text-decoration: none;
color: white;
}
#adsvia{
opacity: 0.4;
}
#restbody{
background-color: white;
width: 100%;
height: 1900px;
margin-top: 80px;
}
#upperPart{
margin-top: 100px;
position: absolute;
width: 100%;
}
#uppertext{
margin: 0 auto;
width: 665px;
}
#everyone{
font-family: Calibri;
font-weight: lighter;
font-size: 45px;
color: #3F3333;
margin: 0;
}
#bottomtext{
width: 920px;
margin: 0 auto;
}
#front-end{
font-family: Calibri;
font-weight: normal;
font-size: 23px;
text-align: center;
color: #555555;
margin: 0;
}
#firstimage{
margin-top: 40px;
margin-left: 80px;
width: 380px;
height: 300px;
text-align: center;
float: left;
}
#img01headingtxt{
margin-top: 15px;
color: #3E3733;
font-family: Calibri;
font-size: 28px;
margin-bottom: 0;
}
#img01text{
margin-top: 5px;
color: #3E3733;
font-family: Calibri;
font-size: 19px;
}
#secondimage{
margin-top: 40px;
margin-left: 30px;
width: 400px;
height: 300px;
text-align: center;
float: left;
}
#img02headingtxt{
margin-top: 15px;
color: #3E3733;
font-family: Calibri;
font-size: 28px;
margin-bottom: 0;
}
#img02text{
margin-top: 5px;
color: #3E3733;
font-family: Calibri;
font-size: 19px;
}
#thirdimage{
margin-top: 40px;
margin-right: 40px;
width: 400px;
height: 300px;
text-align: center;
float: right;
}
#img03headingtxt{
margin-top: 15px;
color: #3E3733;
font-family: Calibri;
font-size: 28px;
margin-bottom: 0;
}
#img03text{
margin-top: 5px;
color: #3E3733;
font-family: Calibri;
font-size: 19px;
}
#images{
width: 100%;
height: 330px;
}
#firstline{
margin-top: 40px;
color: #EEEEEE;
opacity: 0.2;
width: 120px;
}
#singleline{
font-family: Calibri;
font-size: 24px;
color: #55555B;
text-align: center;
margin-top: 40px;
}
#gifthubbtn{
margin: 0 auto;
width: 250px;
}
#gifthub{
display: block;
border: 1px solid #563D7C;
border-radius: 7px;
width: 250px;
height: 45px;
text-decoration: none;
text-align: center;
color: #551A8B;
}
#gifthub:hover{
color: white;
background-color: #563D7C;
}
#gifthubtxt{
font-size: 22px;
margin-top: 8px;
font-family: Calibri;
}
#secondline{
margin-top: 100px;
color: #EEEEEE;
opacity: 0.3;
}
#builtWith{
margin-top: 110px;
}
#builtwithtxt{
font-size: 45px;
font-family: Calibri;
text-align: center;
color: #333333;
margin: 0;
}
#builtwithbtm{
width: 900px;
margin: 0 auto;
}
#builtwithbtmtxt{
font-family: Calibri;
font-size: 24px;
color: #555555;
text-align: center;
margin-top: 5px;
}
#collection{
text-decoration: none;
color: #428BCA;
}
#collection:hover{
text-decoration: underline;
color: #2a6496;
}
#btmimagecontainer{
margin-top: 40px;
}
#btmimages{
width: 1141px;
height: 229px;
margin: 0 auto;
}
#btmimagetxt{
margin-top: 70px;
}
#explorebtn{
margin: 0 auto;
width: 250px;
}
#explore{
display: block;
border: 1px solid #563D7C;
border-radius: 7px;
width: 200px;
height: 45px;
text-decoration: none;
text-align: center;
color: #551A8B;
}
#exploretxt{
font-size: 22px;
margin-top: 8px;
font-family: Calibri;
}
#explore:hover{
color: white;
background-color: #563D7C;
}
#links{
margin-top: 50px;
}
#sociallinks{
width: 614px;
margin: 0 auto;
}
#firstlink{
float: left;
width: 105px;
height: 27px;
}
#secondlink{
float: left;
margin-left: 20px;
width: 110px;
height: 27px;
}
#thirdlink{
float: left;
margin-left: 20px;
width: 235px;
height: 27px;
}
#fourthlink{
float: left;
margin-left: 20px;
width: 104px;
height: 27px;
}
#footer{
margin-top: 100px;
}
#footertxtarea{
margin: 0 auto;
width: 510px;
}
#footertxt{
color: #7777A4;
font-family: Calibri;
font-size: 18px;
text-align: center;
}
#topMenu ul li a:hover{
background-color:red;
display:block;
padding-top:15px;
padding-bottom:15px;
}
#topMenu ul li a{
background-color:white;
display:block;
padding:15px;
}