我正在应用于横幅内部的部分(类名= R_banner)的属性由于某种原因未应用。有人可以帮助我。
HTML:
<body>
<div id="Container">
<header id="M_head">
<a href=""><img id="M_logo1" src="MircLogo.png"></a>
<a href=""><img id="M_logo2" src="MircLogo.png"></a>
<ul>
MIRCSQUAD Entertainment
</ul>
</header>
<div id="space"></div>
<nav id=M_nav>
<ul>
<li><a href="">MUSIC</a><li>
<li><a href="">STORE</a><li>
<li><a href="">NEWS</a><li>
<li><a href="">BLOG</a><li>
<li><a href="">ABOUT</a><li>
</ul>
</nav>
<section id="M_sec">
<div id="banner" >
<img class="Img1"src="Mirc.jpg">
<div class="R_banner">
<h1>
<a href="">The new kid on the block</a>
</h1>
<section>WHATS GOOD</section>
</div>
</div>
</section>
<footer id="M_foot"></footer>
</div>
</body>
Jsfiddle链接:http://jsfiddle.net/3ebvxd7a/
的CSS:
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
* body {
text-align: center;
}
* body #Container {
height: 50em;
width: 100%;
margin: 0px auto;
background-color: white;
}
* body #Container #M_head {
padding-top: 0.3125em;
padding-bottom: 0.3125em;
width: 100%;
color: Black;
background-color: white;
text-align: left;
}
* body #Container #M_head ul {
background-color: inherit;
width: 40%;
margin-left: 6.25em;
padding-top: 45px;
font-family: Arial;
font-style: italic;
font-weight: 500;
font-size: 1.875em;
letter-spacing: -0.125em;
text-shadow: 2px 2px 10px;
}
* body #Container #M_head #M_logo1 {
height: 5em;
width: 5em;
float: left;
margin-left: 5px;
border: 2px solid darkred;
background-color: white;
border-radius: 100px;
}
* body #Container #M_head #M_logo2 {
height: 5em;
width: 5em;
margin-right: 5px;
float: right;
border: 2px solid darkred;
background-color: white;
border-radius: 100px;
}
* body #Container #M_nav {
background-color: black;
width: 100%;
z-index: 10;
}
* body #Container #M_nav ul {
list-style-type: none;
background-color: black;
background-size: cover;
}
* body #Container #M_nav ul li {
display: inline-block;
background-color: black;
text-align: center;
margin: auto;
}
* body #Container #M_nav ul li a {
display: inherit;
text-decoration: none;
padding: 10px;
padding-left: 70px;
padding-right: 70px;
color: white;
font-weight: bolder;
}
* body #Container #M_nav ul li a:hover {
background-color: #ffbf00;
}
* body #Container #M_sec {
height: 200em;
background-image: url(MircBackground.jpg);
background-size: cover;
}
* body #Container #M_sec #banner {
width: 100%;
text-align: left;
}
* body #Container #M_sec #banner .Img1 {
width: 50%;
height: 400px;
}
* body #Container #M_sec #banner .R_banner {
width: 50%;
text-align: center;
height: 400px;
float: right;
color: white;
}
* body #Container #M_sec #banner .R_banner h1 {
color: black;
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
height: 50px;
text-align: center;
margin-left: 0px;
background-color: white;
}
* body #Container #M_sec #banner .R_banner h1 a {
text-decoration: none;
color: inherit;
}
* body #Container #M_sec #banner .R_banner h1 section {
border: 2px solid green;
height: 350px;
background-color: aqua;
}
答案 0 :(得分:0)
此选择器body #Container #M_sec #banner .R_banner h1 section
不正确。 section
不在h1
内,这就是为什么风格不起作用。
将其更改为#Container #M_sec #banner .R_banner section
。