我在html页面上创建了一行,它位于导航面板上方。小提琴如下:
http://jsfiddle.net/rupsdino1997/1md3phmo/
HTML:
<meta charset="UTF-8">
<title>Feline</title>
<link href="Styles/main.css" rel="stylesheet" type="text/css">
<body>
<div id="wrapper">
<header id="top">
<h1 style="font-size:60px">L'Auberge De Napoleon III</h1>
<hr style="background-color: red; height: 4px; position: relative; bottom: -23px; border:none" width="100%">
<hr style="background-color: blue; height: 4px; position: relative; bottom: -11px; left:100px; border:none" width="80%">
<hr style="background-color: purple; height: 4px; position: relative; bottom: 1px; left:200px; border:none" width="60%">
<hr style="background-color: orange; height: 4px; position: relative; bottom: 13px; left:300px; border:none" width="40%">
<hr style="background-color: green; height: 4px; position: relative; bottom: 25px; left:400px; border:none" width="20%">
<nav id="mainnav">
<ul style="border-left:green, dashed;">
<li><a href="Index.html" class="thispagehome">Home</a></li>
<li><a href="Properties Features.html">Features</a></li>
<li><a href="Activities.html">Activities</a></li>
<li><a href="Contact.html">Contact US</a></li>
<li><a href="Pricing.html">Pricing</a></li>
</ul>
</nav>
</header>
<h1 style="padding-top:30px" >Feline - Activities</h1>
<hr class="style" width="50%">
<table style="width:100%">
<tr>
<td width="39%">d</td>
<td width="61%">d</td>
</tr>
<tr>
<td>dd</td>
<td>dd</td>
</tr>
</table>
<footer>Footer</footer>
CSS:
@charset "utf-8";
body {
margin: 0px;
color: #151515;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
background-color: #EFF5F8;
}
#slideshow {
position:relative;
height:530px;
width:1000px;
}
#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
}
#slideshow IMG.active {
z-index:10;
}
#slideshow IMG.last-active {
z-index:9;
}
#wrapper {
width: 100%;
min-width: 740px;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
border:#6627C9;
background-color: #FFFFFF;
}
#slideshow img {
height: 100%;
width: 100%;
}
#top {
overflow: hidden;
}
h1 {
font-size: 65px;
margin-top: 0px;
margin-bottom: 14px;
color: #3399DD;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
max-width: 100%;
text-align: center;
}
h2 {
margin-top: 0px;
}
#mainimg img {
max-width: 100%;
padding-top: 2px;
padding-bottom: 2px;
}
h1, h2 {
color: #3399CC;
font-weight: 600;
font-size: 36px;
}
.centered {
margin-left: auto;
margin-right: auto;
}
footer {
padding-top: 2px;
padding-bottom: 2px;
padding-left: 2%;
background-color: #43a6cb;
color: #FFFFFF;
position: relative;
bottom: 0px;
}
a {
font-weight: bold;
text-decoration: none;
}
a:link {
color: #FF6600;
}
a:visited {
color: #FF944C;
}
#mainnav a:hover ,#mainnav a:active,#mainnav a:focus , #mainnav a.thispagehome{
color: #FFFFFF;
text-decoration: none;
background-color: red;
}
#mainnav ul {
list-style-type: none;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#mainnav a {
width: 20%;
background-color: #4D4D4D;
text-align: center;
text-transform: uppercase;
color: #FFFFFF;
padding-top: 6px;
padding-bottom: 6px;
display: block;
float: left;
}
#wrapper #main ul.horizontal li
{
display: inline-block;
list-style; none;
}
#wrapper #main .horizontal img {
height: 250px;
width: 200px;
margin-top: 15px;
}
*
{
box-sizing: border-box;
}
#wrapper #main ul.horizontal li {
display: inline-block;
font-size: 16px;
list-style; none;
padding: 1em;
text-align: justify;
vertical-align: top;
width: 25%;
}
img{
display: block;
}
ul.horizontal {
list-style; none;
margin: 0;
padding: 20;
font-size: 0;
}
有人知道为什么我的hr和nav面板之间有空格吗?
<hr>
标记会自动进行某种填充吗?有人知道怎么修这个东西吗?另外,如果有什么知道的,我可以做的是,如果您分别悬停每个链接框,背景将更改为hr线的颜色。 (检查此链接,我希望与此类似):
http://css-tricks.com
最佳答案
尝试这个:
http://jsfiddle.net/1md3phmo/5/
hr的编辑:
<hr style="background-color: red; height: 4px; border:none" width="20%">
<hr style="background-color: blue; height: 4px; border:none" width="20%">
<hr style="background-color: purple; height: 4px; bottom: 1px; border:none" width="20%">
<hr style="background-color: orange; height: 4px; border:none" width="20%">
<hr style="background-color: green; height: 4px;border:none" width="20%">
的CSS
hr{float:left; margin:0;}