我对安保部来说是新的,我期待着建立一个反应灵敏的网页。 我在把我的标识放在另一个标志之上,并在左上角的头顶上把我的标识放在首位。
What is currently looks like:
我们应该看一看(我的绘画并不好,但我希望你能找到想法):
My HTML code:
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="assets/css/main.css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<title>My Title</title>
<!-- Header -->
<header class = "single-navs">
<div class = "single-navs">
<div class="dropdown">
<button class="dropbtn"><a href = "#Services">SERVICES</a></button>
<div class="dropdown-content">
<a href="#">Service1</a>
<a href="#">Service2</a>
<a href="#">Service3</a>
</div>
</div>
<img class="logo" src="images/logo.png">
<a href = "#About Me">ABOUT ME</a>
<a href = "#Portfolio">PORTFOLIO</a>
<a href = "#Contact">CONTACT</a>
</div>
</header>
<body>
<div class = "parent">
<img class="image1" src="images/header2b.jpg" />
<img class="image2" src="images/logo.png"/>
<p id="text">Name<br>Title</br></p>
</div>
<div class = "section">
<section>
<h2 id = "Services">SERVICES</h2>
<p>The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961. The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961. The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961. The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961. The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961. The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961. The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961. The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961. The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961. The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961. The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>
<section>
<h2 id = "About Me">ABOUT ME</h2>
<p>The About Me section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961. The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961. The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961. The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961. The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961. The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961. The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961. The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961. The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961. The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961. The services section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>
<section>
<h2 id = "GetInTouch">WONDERING...</h2>
<p>The Get in touch section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The Get in touch section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The Get in touch section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The Get in touch section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The Get in touch section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The Get in touch section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The Get in touch section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The Get in touch section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The Get in touch section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The Get in touch section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The Get in touch section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The Get in touch section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The Get in touch section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The Get in touch section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The Get in touch section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The Get in touch section, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>
<section>
<h2 id = "Portfolio">PORTFOLIO</h2>
<p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>
<section>
<h2 id = "Contact">CONTACT</h2>
<p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>
<section>
<h2 id = "Social">SOCIAL</h2>
<p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>
<section>
<h2 id = "Footer">FOOTER</h2>
<p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
<script>
var A;
var B = 0;
var C = 5;
var heightArea = $( header ).outerHeight();
$(window).scroll(function(event) {
A = true;
});
setInterval(function() {
if (A) {
hasScrolled();
A = false;
}
}, 250);
function hasScrolled() {
var D = $(this).scrollTop();
if(Math.abs(B - D) <= C)
return;
if (D > B && D > heightArea){
$( header ).removeClass( upAni ).addClass( cusNav );
}else{
if (D < B && D < heightArea){
$( header ).removeClass( cusNav ).addClass( upAni );
}
}
B = D;
}
</script>
</body>
</html>
本中心法典:
@import url(fontawesome-all.min.css);
@import url("https://fonts.googleapis.com/css?family=Merriweather:300,700,300italic,700italic|Source+Sans+Pro:900");
/* All desktop styles attached only after 1025px */
@media (min-width: 1024px) {
.parent {
position: relative;
top: 0;
left: 0;
}
.image1 {
position: relative;
max-width: 100%;
height: auto;
}
.image2 {
position: absolute;
top: 10%;
left: 2%;
}
/* Centered text */
#text {
z-index: 1;
position: absolute;
color: black;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight:bold ;
margin: 0 auto;
left: 0;
right: 0;
top: 46%; /* Adjust this value to move the positioned div up and down */
text-align: center;
width: 80%; /* Set the width of the positioned div */
}
body {
padding-top: 50px;
}
header {
background: rgb(205, 193, 193);
height: 50px;
position: fixed;
top: 0;
z-index: 104;
transition: top 0.3s ease-in-out;
width: 100%;
}
.logo {
float: left;
vertical-align: top;
width: 200px;
height: 200px;
margin-top: -75px; /* if you want it vertically middle of the navbar. */
}
.single-navs {
text-align: center;
}
.single-navs a{
color: #372f2f;
text-decoration: none;
text-align: center;
font-family: montserrat;
margin: 0px;
line-height: 3.5;
font-weight: 700;
font-size: 15px;
margin-right: 150px;
float: none;
}
.upAni {
top: -50px;
}
main {
height: 100vh;
display: grid;
place-items: center;
}
/* Dropdown Button */
.dropbtn {
background: rgb(205, 193, 193);
border: none;
text-decoration: none;
text-align: center;
font-family: montserrat;
line-height: 3.5;
margin: 0px;
height: 10px;
font-weight: 700;
font-size: 15px;
margin-right: 10px; /* Distance between other menu buttons */
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: white;
z-index: 1;
max-width: 205px;
text-align: left;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 1px 5px;
text-decoration: none;
font-size: 12px;
white-space: nowrap;
line-height: 2.5;
}
/* Change the color of the dropdown button when the dropdown content is shown */
.dropdown .dropbtn a:hover {
color:rgb(24, 24, 139);
font-weight: bolder;
}
/* Change the color of the dropdown button when the dropdown content is shown */
.single-navs a:hover {
color:rgb(24, 24, 139);
font-weight: bolder;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {color: rgb(24, 24, 139)}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
section{
display: block;
margin: 50px 155px;
}
section h2 {
font-family: sans-serif;
color: #555;
text-decoration: underline;
padding-top: 60px; /* to ensure when navigate to section that menu bar remains on top */
font-size: 24px;
}
section p {
font-family: sans-serif;
color: #555;
margin-top: 10px;
}
}
/* MOBILE VERSION */
@media only screen and (max-width: 480px){
/* remove the navs bar */
.single-navs{display: none;}
}
