Menu 创建1PX solid#89cFF0的边框无效。它会改变菜单的形状。为什么?
我正在尝试为我的菜单制作一个1px实心#89cFF0的边框。你可以从其他的“div”中看到,这就是我所做的,它在《英雄》或《顶级视频》中发挥了作用。我做错了什么?非常感谢Menu 创建1PX solid#89cFF0的边框无效。它会改变菜单的形状。为什么?,menu,border,Menu,Border,我正在尝试为我的菜单制作一个1px实心#89cFF0的边框。你可以从其他的“div”中看到,这就是我所做的,它在《英雄》或《顶级视频》中发挥了作用。我做错了什么?非常感谢 <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> <link rel="stylesheet" type="text/css" href="vid
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="videos.css" />
<title>Puppy Power</title>
</head>
<body>
<div id="page">
<header></header>
<div id="dog logo">
</div>
<ul id="navigation">
<li><a href="indes.html">Home</a></li>
<li><a href="Videos.html">Videos</a>
<ul class="sub">
<li><a href="#">Vines</a></li>
<li><a href="#">Pugs</a></li>
<li><a href="#">Failing Dogs</a></li>
<li><a href="#">Crazy Dogs</a></li>
<li><a href="#">Funny Dogs</a></li>
</ul>
</li>
<li><a href="#">Photographs</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div id="hero"><h1><b>HERO</b></h1></div>
<div id="topvideo"><h1><b>TOP VIDEO</b></h1></div>
<div id="topphoto"><h1><b>TOP PHOTO</b></h1></div>
<div id="toparticles"><h1><b>TOP ARTICLE</b></h1></div>
<div id="content"><h1><b>CONTENT</b></h1></div>
<div id="footer"><h1><b>FOOTER</b></h1></div>
</body>
</html>
#page {
max-width: 850px;
min-width: 840px;
min-height: 1550px;
max-height: 1600px;
}
* {
margin: 0px;
padding: 0px;
}
ul #navigation, .sub {
list-style-type: none;
}
ul#navigation li {
border: 1px solid #89cFF0;
width: 125px;
text-align: center;
position: relative;
float: left;
list-style-type: none;
}
ul#navigation a {
text-decoration: none;
display: block;
width: 125px;
height: 25px;
line-height: 25px;
border: 1px solid #89cFF0;
}
ul#navigation li:hover > a {
background-color: #89cFF0;
}
ul #navigation li:hover .sub {
display:;
}
#hero {
width: 813px;
height: 408px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
display: inline-block;
margin: 5px 0px 0px 0px;
text-align: center;
color: red;
}
#topvideo {
width: 267px;
height: 370px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
display: inline-block;
vertical-align:top;
text-align: center;
margin: 5px 0px 5px 0px;
}
#topphoto {
width: 267px;
height: 370px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
display: inline-block;
vertical-align:top;
text-align: center;
margin: 5px 0px 5px 0px;
}
#toparticles {
width: 267px;
height: 370px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
display: inline-block;
vertical-align:top;
text-align: center;
margin: 5px 0px 5px 0px;
}
#content {
width: 813px;
height: 310px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
margin: 0px 0px 0px 0px;
text-align: center;
}
#footer {
width: 813px;
height: 100px;
border-top: 1px solid #89cff0;
border-bottom: 1px solid #89cff0;
border-left: 1px solid #89cff0;
border-right: 1px solid #89cff0;
margin: 5px 0px 0px 0px;
text-align: center;
}
幼犬力量
-
英雄
顶级视频
头像
头条
内容
页脚
#页面{
最大宽度:850px;
最小宽度:840px;
最小高度:1550px;
最大高度:1600px;
}
* {
边际:0px;
填充:0px;
}
ul#导航,.sub{
列表样式类型:无;
}
ul#导航李{
边框:1px实心#89cFF0;
宽度:125px;
文本对齐:居中;
位置:相对位置;
浮动:左;
列表样式类型:无;
}
ul#导航a{
文字装饰:无;
显示:块;
宽度:125px;
高度:25px;
线高:25px;
边框:1px实心#89cFF0;
}
ul#导航li:悬停>a{
背景色:#89cFF0;
}
ul#导航li:hover.sub{
显示:;
}
#英雄{
宽度:813px;
高度:408px;
边框顶部:1px实心#89cff0;
边框底部:1px实心#89cff0;
左边框:1px实心#89cff0;
右边框:1px实心#89cff0;
显示:内联块;
保证金:5px0px 0px 0px;
文本对齐:居中;
颜色:红色;
}
#热门视频{
宽度:267px;
高度:370px;
边框顶部:1px实心#89cff0;
边框底部:1px实心#89cff0;
左边框:1px实心#89cff0;
右边框:1px实心#89cff0;
显示:内联块;
垂直对齐:顶部;
文本对齐:居中;
保证金:5px0px 5px0px;
}
#托普霍托{
宽度:267px;
高度:370px;
边框顶部:1px实心#89cff0;
边框底部:1px实心#89cff0;
左边框:1px实心#89cff0;
右边框:1px实心#89cff0;
显示:内联块;
垂直对齐:顶部;
文本对齐:居中;
保证金:5px0px 5px0px;
}
#主题文章{
宽度:267px;
高度:370px;
边框顶部:1px实心#89cff0;
边框底部:1px实心#89cff0;
左边框:1px实心#89cff0;
右边框:1px实心#89cff0;
显示:内联块;
垂直对齐:顶部;
文本对齐:居中;
保证金:5px0px 5px0px;
}
#内容{
宽度:813px;
高度:310px;
边框顶部:1px实心#89cff0;
边框底部:1px实心#89cff0;
左边框:1px实心#89cff0;
右边框:1px实心#89cff0;
保证金:0px 0px 0px 0px;
文本对齐:居中;
}
#页脚{
宽度:813px;
高度:100px;
边框顶部:1px实心#89cff0;
边框底部:1px实心#89cff0;
左边框:1px实心#89cff0;
右边框:1px实心#89cff0;
保证金:5px0px 0px 0px;
文本对齐:居中;
}
您有多个选择器以ul#导航开始。ul
和#导航
之间应该有一个空格