2016-02-23 75 views
0

我正在设计我的第一个网站......页脚部分是特定的。我试图将<a>标签设置为白色,但没有默认的webkit样式,但我无法这样做。文字装饰规则不起作用?

我在做什么错,我该如何改变造型?

* { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
div { 
 
    display: block; 
 
} 
 

 
.header { 
 
background-color: #333333; 
 
} 
 

 
.nav { 
 
    padding: 0px auto; 
 
    margin: 0px auto; 
 

 
} 
 

 
.nav ul { 
 

 
} 
 

 
.nav ul li { 
 
    color: #e6e6e6; 
 
    display: inline-block; 
 
    padding: 20px 30px 20px 20px ; 
 
    font-family: 'raleway', sans-serif; 
 
    font-weight: 20px; 
 

 
} 
 

 
.nav ul li a { 
 
    text-decoration: none; 
 
    color: #efefef; 
 
    padding: 20px 20px 20px 20px ; 
 
    font-family: 'raleway', sans-serif; 
 
    font-weight: 20px; 
 

 
} 
 

 
.nav ul li a:hover { 
 
    color: #efefef; 
 
    background-color: #191919; 
 
    transition: background .5s; 
 

 
} 
 

 
.second_section .container { 
 
    
 
    background-image: url(http://1.bp.blogspot.com/-I0jOcWYqW94/UdFZ9U8Si0I/AAAAAAAACRw/2Hhb0xY7yzY/s1600/84.jpg); 
 
    height: 900px; 
 
    width: 100%; 
 
} 
 

 
.copy { 
 
    position: absolute; 
 
    margin: 100px 50px 500px 500px; 
 
    color: white; 
 
    font-family: 'Josefin Sans', sans-serif; 
 
    letter-spacing: 2px 
 

 
} 
 

 
.copy { 
 
    text-align: center; 
 
} 
 

 
.btn_section { 
 
    top: 400px; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 

 
.btn { 
 
    position: relative; 
 
    margin-top: 100px 
 
    color: white; 
 
    border: solid 2px fixed; 
 
} 
 

 
.btn_section a { 
 
    border: 1px solid white; 
 
    padding: 20px 40px; 
 
    text-decoration: none; 
 
    background-color: #191919; 
 
    color: white; 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-size: 1.33em; 
 
    letter-spacing: 2px; 
 
    text-transform: uppercase; 
 

 
} 
 

 
.btn_section a:hover { 
 
    background-color: #e6e6e6; 
 
    color: #191919; 
 
    transition: background .5s; 
 
    cursor: pointer; 
 

 
} 
 

 
.third_section a: hover { 
 
    background-color: black; 
 

 
} 
 

 
.third_section { 
 
    height: 20px; 
 
    background-color: black; 
 
} 
 

 
.fourth_section .col { 
 
    display: inline-block; 
 
    padding-top: 50px; 
 
    padding-bottom: 75px; 
 
    padding-left: 6%; 
 
    padding-right: 6%; 
 
    text-align: center; 
 
    font-family: 'Raleway'; 
 
    width: 20%; 
 
    vertical-align: top; 
 
} 
 

 
.fourth_section img { 
 
    padding: 5px 5px 10px 5px; 
 
    height: 32px 
 
} 
 

 
.fourth_section > h2 { 
 
    font-family: 'Raleway'; 
 
    font-size: 1.33em; 
 
} 
 

 
    .col > p { 
 
    font-size: 1.12em; 
 
} 
 

 
.col a { 
 

 
    text-decoration: none; 
 
    color: #323232; 
 
} 
 

 
.col { 
 
    text-align: center; 
 
    font-family: Garamond; 
 
} 
 

 
.footer { 
 
    height: 100px; 
 
    background-color: #333; 
 
    padding: 20px; 
 
} 
 

 
.footer a { 
 
    text-decoration: none; 
 
} 
 

 
.footer_info { 
 
    position: relative; 
 
    text-decoration: none; 
 
    margin-bottom: 10px; 
 
    color: white; 
 
}
<div class="header"> 
 

 
    <div class="nav"> 
 
    <ul> 
 
    <li><a href="#">ABOUT</a></li> 
 
    <li><a href="#">WORK</a></li> 
 
    <li><a href="#">TEAM</a></li> 
 
    <li><a href="#">CONTACT</a></li> 
 
    </div> 
 
</div> 
 

 
<div class="second_section"> 
 
    <div class="container"> 
 
    <div class="copy"> 
 
    <h1>ACTUATE CONTENT</h1> 
 
     <br> 
 
     <h3>Expert content for every business</h3> 
 
    </div> 
 
    <div class="btn_section"> 
 
     <a href="www.actuatecontent.com/contact" class="btn">Write For Me!</a> 
 

 
    </div> 
 
    </div> 
 

 
<div class="third_section"> 
 
    </div> 
 

 
<div class="fourth_section"> 
 

 
    <div class="col"> 
 
    <a href="#"><img src="https://cdn0.iconfinder.com/data/icons/seo-smart-pack/128/grey_new_seo2-17-256.png"><h2>RESEARCH</h2></a> 
 
    
 
    <br> 
 
    <p>Our meticulous research methods will uncover the most relevant information for your project. </p> 
 
    </div> 
 

 
    <div class="col"> 
 
    <a href="#"><img src="https://cdn2.iconfinder.com/data/icons/55-files-and-documents/512/Icon_17-512.png"> 
 
    <h2>WRITING</h2></a> 
 
    <br> 
 
    <p>Our seasoned, handpicked writers craft stellar content for your specific needs.</p> 
 

 
    </div> 
 

 
    <div class="col"> 
 
    <a href="#"><img src="http://i.imgur.com/AinCaug.png"> 
 
    <h2>EDITING</h2></a> 
 
    <br> 
 
    <p>Our editors work with leading authors and publishers to bring out the best in their writing.</p> 
 
    </div> 
 
    
 
</div> 
 

 
<div class="footer"> 
 
    <div class="footer_info"> 
 
    <a href="#"><p>Terms of Use/Privacy Policy</p></a> 
 
</div> 
 
</div>

+0

http://stackoverflow.com/help/mcve – Quentin

回答

0

添加您的样式到这一点:

.footer .footer_info a { 
    ... 
} 
+0

谢谢你,这是如此简单。 – DrEvil

+0

不客气^^ –