-2
This is my header image, i want the same as footer左側のGoogleの代わりに、ヘッダーに同じパディング、つまり70ピクセルのフッター部分に著作権が予約されている必要があります。私は正しく動作していないリンクについてのサブメニューを作成した別の問題があります。私はフッタ部分に同じメニューを "ドロップアップ"として必要とします。 スニペットフッターを作成するには
body {
\t margin: 0;
\t padding: 0;
\t max-width: 100%;
\t overflow-x: hidden;
\t line-height: 1.5em;
\t color: #333;
\t font-family: Arial, Verdana, sans-serif;
}
#logo {
\t width: 130px;
\t height: 55px;
\t margin: 5px 0 5px 70px;
}
nav {
\t background-color: #222;
}
ul {
\t float: right;
list-style: none;
}
ul li {
\t display: inline-block;
\t clear: both;
\t position: relative;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
padding: 10px 20px;
background: #222;
color: #fff;
}
ul li a:hover {
background: #000;
color: #fff;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
}
li:hover a {
background: #fff;
color: #000;
}
li:hover li a:hover {
\t width:;
background: #f5f5f5;
color: #262626;
padding: 10px 15px;
}
/*jumbotron*/
.content {
\t padding: 20px 0 0;
\t background-color: #eee;
\t text-align: center;
\t height: 150px;
}
.heading {
\t font-size: 50px;
\t font-weight: bold;
}
/*default props for img gallery*/
.imggal {
\t display: inline-flex;
}
/*row1 img*/
.col1 #tech {
\t vertical-align: middle;
\t margin: 40px;
}
/*default column props on rows*/
.col1,.col2 {
\t width: 50%;
\t padding: 10px 20px;
\t text-align: justify;
\t vertical-align: middle;
}
/*default props for all images except row1 */
.img {
\t height: 150px;
\t width: 150px;
\t margin: 5px;
\t overflow: hidden;
\t float: left;
}
.imgthumbnail {
\t display: block;
\t margin: auto;
}
/*row3 img's*/
.r3c1, .r3c2 {
\t height: 150px;
\t width: 150px;
\t margin: auto;
\t display: block;
}
/*to stop overflowing on the img*/
.r2imgtxt {
\t overflow: hidden;
}
.r3imgtxt {
\t text-align: center;
}
footer {
\t width: 100%;
\t background-color: #222;
\t padding: 10px 0;
\t color: #fff;
\t bottom: 0;
}
footer nav {
\t float: right;
}
footer nav ul {
\t margin:20px 0;
}
footer nav ul li {
\t display: inline-block;
\t margin-left: 20px;
\t list-style-type: none;
}<!DOCTYPE html>
<html lang="en-us">
<head>
\t <title>A sample web page</title>
\t <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
\t <div class="container">
\t \t <nav>
\t \t \t <img id="logo" src="images/google_logo.png" alt="google logo">
\t \t \t <ul class="headermenu">
\t \t <li><a href="#">Home</a></li>
\t \t <li><a href="#">About Us</a>
\t <ul class="headersub">
\t <li><a href="#">Mission</a></li>
\t <li><a href="#">Vision</a></li>
\t <li><a href="#">Services</a></li>
\t </ul>
\t \t </li>
\t \t <li><a href="#">Products</a></li>
\t \t <li><a href="#">Contact</a> </li>
\t </ul>
\t \t </nav>
\t
\t \t <!-- content -->
\t \t <div class="content">
\t \t \t <h1 class="heading">Welcome to Google</h1>
\t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
\t \t </div>
\t \t <!-- body -->
\t \t <div class="imggal">
\t \t \t <div class="col1">
\t \t \t \t <img id="tech" src="images/tech.png" alt="technology">
\t \t \t </div>
\t \t \t <div class="col2">
\t \t \t \t <h2>Heading</h2>
\t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
\t \t \t \t \t tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
\t \t \t \t \t quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
\t \t \t </div>
\t \t </div> \t <!-- EOF row1 -->
\t \t <!-- row2 -->
\t \t <div class="imggal">
\t \t \t <div class="col1">
\t \t \t \t <img class="img r2c1" src="images/www.png" alt="earth as www">
\t \t \t \t \t <div class="r2imgtxt">
\t \t \t \t \t \t <h2>Heading</h2>
\t \t \t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod \t tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> \t
\t \t \t \t \t </div> \t
\t \t \t </div>
\t \t \t <div class="col2">
\t \t \t \t <img class="img r2c2" src="images/technology.png" alt="technology">
\t \t \t \t \t <div class="r2imgtxt">
\t \t \t \t \t \t <h2>Heading</h2>
\t \t \t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod \t tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> \t
\t \t \t \t \t </div> \t
\t \t \t </div>
\t \t </div> \t <!-- EOF row2 -->
\t
\t \t <!-- row3 -->
\t \t <div class="imggal">
\t \t \t <div class="col1">
\t \t \t \t <div class="imgthumbnail">
\t \t \t \t \t <img class="r3c1" src="images/apple.png" alt="apple logo"> \t
\t \t \t \t </div>
\t \t \t \t <div class="r3imgtxt">
\t \t \t \t \t <h2>Heading</h2>
\t \t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod \t tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea \t commodo consequat.</p>
\t \t \t \t </div>
\t \t \t </div> \t <!-- EOF col1row3 --> \t
\t \t \t <div class="col2">
\t \t \t \t <div class="imgthumbnail">
\t \t \t \t \t <img class="r3c2" src="images/computer.png" alt="computer">
\t \t \t \t </div>
\t \t \t \t <div class="r3imgtxt">
\t \t \t \t \t <h2>Heading</h2>
\t \t \t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod \t tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea \t commodo consequat.</p>
\t \t \t \t </div>
\t \t \t </div> <!-- EOF col2row3 -->
\t \t </div> <!-- EOF row3 -->
\t \t <!-- EOF body -->
\t \t <footer>
\t \t \t <nav>
\t \t \t \t <p id="copyrights">© Copyrights Reserved. Google Inc.</p>
\t \t \t \t <ul id="menu">
\t \t \t <li><a href="#">Home</a></li>
\t \t \t <li><a href="#">About Us</a>
\t \t <ul>
\t \t <li><a href="#">Mission</a></li>
\t \t <li><a href="#">Vision</a></li>
\t \t <li><a href="#">Services</a></li>
\t \t </ul>
\t \t \t </li>
\t \t \t <li><a href="#">Products</a></li>
\t \t \t <li><a href="#">Contact</a> </li>
\t \t </ul>
\t \t \t </nav>
\t \t </footer> <!-- EOF footermenu -->
\t </div> \t <!-- EOF container -->
</body>
</html>
缶をここで
は私のスニペット
NOTEですあなたはちょうどそれをスニペットしますか？ @Germano Plebani –
ヘッダーのドロップダウンメニューにいくつか問題がありますので、それを考慮してください。 –
https://jsfiddle.net/ncuzub5o/ –