1
Help！私のフッタの背景色が私のウェブページ全体を引き継いでいます。これは、白いページに青い背景のフッターとされていました。私は自分のCSSからフッタの言及を取るとき、ページが正しいように見えるが、私のフッタは失われている。助けて？私はすべてを試しました！ここにjsfiddle：https://jsfiddle.net/3eoxaqjt/1/私はあなたが私に与えることができるすべての助けに感謝します！フッターの背景色が私のウェブページ全体を引き継いでいます
HTML：
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/responsive.css" />
<link rel="stylesheet" type="text/css" media="print" href="css/print.css">
</head>
<body>
<div>
<header>
<h1>Project 2</h1>
</header>
</div>
<section>
<div class="row col-m-3 col-3">
<p id="firstLine">About This Project</p>
<p id="secondLine">Unit Topics Covered</p>
<p id="thirdLine">References</p>
<p id="fourthLine">Tips</p>
</div>
<div class="col-m-9 col-9">
<h2>About This Project</h2>
<p>This project is about responsive design. Resize the browser window (Viewport) to see how the content respond to the resizing.</p>
<img src="images/responsive.png" alt="responsive images">
</div>
<div class="col-m-4 col-3">
<h2>Unit Topics Covered</h2>
<ul>
<li>HTML & CSS refresh</li>
<li>Browser to Debug</li>
<li>Responsive Design Media CSS</li>
<li>Responsive Design Mobile</li>
<li>Responsive Design Desktop & Tablet Hiding/Show</li>
</ul>
</div>
<div class=" references col-m-8 col-3">
<h2 id=referencesHeading>References</h2>
<p><a href="http://www.w3schools.com/html/default.asp" target="_blank">W3Schools: HTML</a></p>
<p><a href="http://www.w3schools.com/css/default.asp" target="_blank">W3Schools: CSS</a></p>
<p><a href="https://developers.google.com/web/tools/chrome-devtools/iterate/inspect-styles/basics?hl=en" target="_blank">Browser: Chrome</a></p>
<p><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector" target="_blank">Browser: Firefox</a></p>
<p><a href="https://msdn.microsoft.com/en-us/library/dd565627(v=vs.85).aspx" target="_blank">Browser: IE</a></p>
<p><a href="https://www.w3.org/TR/CSS21/media.html" target="_blank">W3Schools: Media Types</a></p>
<p><a href="http://www.w3schools.com/cssref/css3_pr_mediaquery.asp" target="_blank">W3Schools: Media Queries</a></p>
<p><a href="http://www.w3schools.com/css/css_rwd_intro.asp" target="_blank">W3Schools: CSS Responsive Design</a></p>
<p><a href="http://www.w3schools.com/css/css_rwd_images.asp" target="_blank">W3Schools: Responsive Design Images</a></p>
<p><a href="http://www.w3schools.com/w3css/w3css_responsive.asp" target="_blank">W3Schools: CSS3 Responsive</a></p>
</div>
<div class="col-m-12 col-6">
<h2>Tips</h2>
<ul>
<li><span>Go Mobile First -</span> Approximately 1 in every 7 people on earth use their mobile devices to access the internet</li>
<li><span>Get Acquainted with Media Queries -</span> Media queries check for a device’s resolution, height, width and orientation</li>
<li><span>Understand What Mobile Means for Your Users -</span> Use analytics to figure out why a user is visiting your website on their phone</li>
<li><span>Use Percentages -</span> Instead of designing breakpoints for every possible viewport, you set a maximum layout size</li>
<li><span>The Need for Speed -</span> Smartphone users expect a site to load in under 4 seconds. Main reason behind a slow site are non-optimized images</li>
<li><span>Eliminate the Unnecessary -</span> Get rid of excessive elements, not only for your user experience, but also for website’s speed</li>
<li><span>To Hamburger or Not to Hamburger -</span> Keep less popular links in the hamburger menu navigation</li>
<li><span>Make it Readable -</span> Don’t make your users squint to read or pinch-to-zoom. Make your text size large enough to read from a smaller screen</li>
<li><span>Use the Right Button Size -</span> Avoid small button sizes. Padding increases the tappable area, but margins do not</li>
<li><span>Design for Screen Orientation -</span> Landscape orientation wins over portrait orientation 59% to 41%</li>
</ul>
</div>
</section>
<div class="footer">
<p>
<p>Time and Date</p>
</p>
</div>
</body>
</html>
はCSS：
* {
box-sizing: border-box;
}
header,
footer,
nav,
section,
article,
aside {
display: block;
}
[class*="col-"] {
float: left;
padding: 15px;
width: 100%
}
.row::after {
content: "";
clear: both;
display: block;
}
body {
font-size: 14px;
font-family: "Lucinda" Sans sans-serif;
}
@media screen and (min-width: 600px)and (max-width: 768px) {
.col-m-1 {
width: 8.33%;
}
.col-m-2 {
width: 16.66%
}
.col-m-3 {
width: 25%
}
.col-m-4 {
width: 40%
}
.col-m-5 {
width: 41.66%
}
.col-m-6 {
width: 50%
}
.col-m-7 {
width: 58.33%
}
.col-m-8 {
width: 60%
}
.col-m-9 {
width: 75%
}
.col-m-10 {
width: 83.33%
}
.col-m-11 {
width: 91.66%
}
.col-m-12 {
width: 100%
}
}
@media screen and (min-width: 768px) {
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%
}
.col-3 {
width: 25%
}
.col-4 {
width: 33.33%
}
.col-5 {
width: 40%
}
.col-6 {
width: 50%
}
.col-7 {
width: 58.33%
}
.col-8 {
width: 60%
}
.col-9 {
width: 75%
}
.col-10 {
width: 83.33%
}
.col-11 {
width: 91.66%
}
.col-12 {
width: 100%
}
}
h1 {
background-color: #9933cc;
color: white;
padding: 15px;
list-style: none;
}
#firstLine {
background-color: #33b5e5;
font: white;
box-shadow: 1px 1px 1px #888888;
padding: 8px;
}
#firstLine:hover {
background-color: #0099cc;
}
#secondLine {
background-color: #33b5e5;
font: white;
box-shadow: 1px 1px 1px #888888;
padding: 8px;
}
#secondLine:hover {
background-color: #0099cc;
}
#thirdLine {
background-color: #33b5e5;
font: white;
box-shadow: 1px 1px 1px #888888;
padding: 8px;
}
#thirdLine:hover {
background-color: #0099cc;
}
#fourthLine {
background-color: #33b5e5;
font: white;
box-shadow: 1px 1px 1px #888888;
padding: 8px;
}
#fourthLine:hover {
background-color: #0099cc;
}
img {
max-width: 100%;
height: auto;
}
#referencesHeading {
color: white;
}
.references {
text-align: left;
font: 14px;
box-shadow: 1px 1px 1px #888888;
padding: 10px;
background-color: #33b5e5;
}
a:link {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
span {
color: orange;
}
.footer {
background-color: #0099cc;
color: #ffffff;
text-align: center;
font-size: 10px;
padding: 15px;
}