Question

我试图在CSS中设置文本样式，以及显示的内容。

screeny

这是我的HTML：

<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='stylesheet.css'/>
<title></title>
</head>
<body class="wrapper">
<!-- header for: ALL PAGES --->
<header id="header">

</header>
<!-- end header for: ALL PAGES --->
<!-- navigation bar for: ALL PAGES --->
<nav>

</nav>
<!-- end navigation bar for: ALL PAGES --->
<!-- paragraph for: THIS PAGE ONLY --->
<section id="welcome_p">

</section>
<!-- end paragraph for: THIS PAGE ONLY --->
<!-- images for: THIS PAGE ONLY --->
<section id="plan_options">

</section>
<!-- end images for: THIS PAGE ONLY --->

<!-- footer for: ALL PAGES --->

<footer id="footer">
<div id="left_side_footer">
<p class="footer_heading">About</p>
</br></br>
<a href="#" class="footer_link">
<span class="footer_paragraph">Get to Know John</span>
</a>

<a href="#" class="footer_link">
<span class="footer_paragraph">Moon Lit Disco's</span>
</a>

</div>

<div id="middle_of_footer">
<p class="footer_heading">Terms and Policies</span>
</br></br>
<a href="#" class="footer_link">
<span class="footer_paragraph">Cookie Policy</span>
</a>

<a href="#" class="footer_link">
<span class="footer_paragraph">Terms and Conditions</span>
</a>

<a href="#" class="footer_link">
<span class="footer_paragraph">Privacy Policy</span>
</a>

<a href="#" class="footer_link">
<span class="footer_paragraph">Copyright and Trademark</span>
</a>

</div>

<div id="right_side_footer">
<p class="footer_heading">Website</p>
</br></br>
<a href="#" class="footer_link">
<span class="footer_paragraph">Feedback</span>
</a>
</div>

<div id="copyright">
<p class="legal_paragraph">Logo / site design: <a href="#">Trey Taylor</a> and <a href="#">Charlie Wubs</a></p>
<p class="legal_paragraph">&copy2014 Moon Lit Disco's</p>
<p class="legal_paragraph">Version:2014.1.0</p>
</div>

</footer>
<!-- end footer for: ALL PAGES --->
</body>
</html>

任何我的CSS：

/* SECTIONS */

/* CLASSES */

.legal_paragraph{
font-family:"Helvetica", "Arial", sans-serif;
text-align:right;
font-size:10px;
color:black;
padding:1px;
}

.footer_paragraph{
font-family:"Helvetica", "Arial", sans-serif;
font-size:1em;
color:black;
display:block;
text-decoration:none;
}

.footer_link{
text-decoration: none;
}

.footer_heading{

display:inline;
font-family:"Century Gothic";
font-size:17px;
color:black;
text-decoration:underline;
background-color:white;
display:inline;
width=100%; 
} 

.fp{
text-decoration:none;
color:black;
font-size:1em;
display:block;
font-family:"Helvetica", "Arial", sans-serif;
}

/* STYLE */

a{
text-decoration:none;
}

#footer a.footer_link:hover span{
   border-bottom:1px solid black; 
   border-top:1px solid black;
   width:100%
   }

#line_break{

}

#left_side_footer{
display:table-cell;
float:left;
padding-right:360px;
padding-bottom:30px;
} 

#right_side_footer{
display:table-cell;
float:right;
}

#middle_of_footer{
display:table-cell;
float:center;
}

我想要的是什么：

要加下划线的文字，大小和字体相同（出于某种原因，它不会这样做）得到它所以它是全部内联在这一切之下得到合法的东西

任何帮助都必须得到帮助！

Answer 1

如果没有为你完成所有工作，那么这样的事情应该有用。

从这里需要一些样式，建议查看http://www.codecademy.com/

HTML

<footer>
<ul class="left">
<li><a href="#">About</a></li>
<li><a href="#">Get to know John</a></li>
<li><a href="#">Moon Lit Disco's</a></li>
</ul>
<ul class="left">
<li><a href="#">About</a></li>
<li><a href="#">Get to know John</a></li>
<li><a href="#">Moon Lit Disco's</a></li>
</ul>
<ul class="left">
<li><a href="#">About</a></li>
<li><a href="#">Get to know John</a></li>
<li><a href="#">Moon Lit Disco's</a></li>
</ul>
<div class="clearLeft">
<p>Logo / site design: <a href="#">Trey Taylor</a> and <a href="#">Charlie Wubs</a></p>
<p>&copy; 2014 Moon Lit Disco's</p>
<p>Version:2014.1.0</p>
</div>
</footer>

CSS

.left{
    float:left;
}
.clearLeft{
    clear:left;
}
ul{
    list-style:none;
}
a{
    text-decoration:none;
}

应该让你开始：）

Answer 2

如果您希望文字不加下划线，则需要设置锚点的样式。

示例：

footer a {
text-decoration:none;
}

.footer_link a {
font-size:1em;
}

由于您的页脚是HTML5元素，因此您不需要#footer的ID。无论如何，在语义上。

您也不需要跨度。您可以使用父类来设置字体大小的样式。

你也错过了一个结束段落标记，这可能就是为什么它没有采用段落样式。

清理你的代码，你的HTML应该更像这样（头部区域被移除，但没关系）：

<body class="wrapper">
    <!-- header for: ALL PAGES --->
    <header></header>
    <!-- end header for: ALL PAGES --->
    <!-- navigation bar for: ALL PAGES --->
    <nav></nav>
    <!-- end navigation bar for: ALL PAGES --->
    <!-- paragraph for: THIS PAGE ONLY --->
    <section id="welcome_p"></section>
    <!-- end paragraph for: THIS PAGE ONLY --->
    <!-- images for: THIS PAGE ONLY --->
    <section id="plan_options"></section>
    <!-- end images for: THIS PAGE ONLY --->
    <!-- footer for: ALL PAGES --->
    <footer>
        <div class="column">
            <p class="footer_heading">About</p>
            <ul>
                <li><a href="#" class="footer_link">Get to Know John</a>
                </li>
                <li><a href="#" class="footer_link">Moon Lit Disco's</a>
                </li>
            </ul>
        </div>
        <div class="column">
            <p class="footer_heading">Terms and Policies</p>
            <ul>
                <li><a href="#" class="footer_link">Cookie Policy</a>
                </li>
                <li><a href="#" class="footer_link">Terms and Conditions</a>
                </li>
                <li><a href="#" class="footer_link">Privacy Policy</a>
                </li>
                <li><a href="#" class="footer_link">Copyright and Trademark</a>
                </li>
            </ul>
        </div>
        <div class="column">
            <p class="footer_heading">Website</p>
            <ul>
                <li><a href="#" class="footer_link"> Feedback</a>
                </li>
            </ul>
        </div>
        <div id="copyright">
            <p>Logo / site design: <a href="#">Trey Taylor</a> and <a href="#">Charlie Wubs</a>
            </p>
            <p>&copy; 2014 Moon Lit Disco's</p>
            <p>Version:2014.1.0</p>
        </div>
    </footer>
</body>

和CSS：

   .column {
    font-family:"Helvetica", "Arial", sans-serif;
    font-size:1em;
    color:black;
    display:block;
    text-decoration:none;
    float:left;
    margin-right:13px;
    width:30%;
}

.column a {
    text-decoration: none;
    color:black;
}

.column ul {
    list-style:none;
    margin-left:-40px;
}

.footer_heading {
    font-family:"Century Gothic";
    font-size:17px;
    color:black;
    text-decoration:underline;
    background-color:white;
}

#copyright {
    clear:both;
    font-family:"Helvetica", "Arial", sans-serif;
    text-align:right;
    font-size:10px;
    color:black;
    padding:1px;
}

#copyright a {
    text-decoration:none;
    color:black;
}

请参阅小提琴：http://jsfiddle.net/v6o9wg43/

如何修复我的三列页脚布局＆＃39;以及文字样式

2 个答案: