美黄豆连的代码包括三部分： HTML、CSS 和 JavaScript。

HTML 是网页的基础语言，用于描述网页的结构和内容。美黄豆连网页的 HTML 代码如下：

```

```

CSS 是网页的样式语言，用于美化网页的外观。美黄豆连网页的 CSS 代码如下：

```

/* Remove default margin */

body, html {

height: 100%;

margin: 0;

font-family: Lato, sans-serif;

}

/* Set black background color */

.bg-grey {

background-color: #f6f6f6;

}

/* Navbar */

.navbar {

margin-bottom: 0;

background-color: #ffffff;

z-index: 9999;

border: 0;

font-family: Montserrat, sans-serif;

font-size: 16px !important;

letter-spacing: 2px;

border-radius: 0;

}

.navbar li a, .navbar .navbar-brand {

color: black !important;

}

.navbar-nav li a:hover {

color: white !important;

background-color: #21ce99 !important;

}

.navbar-default .navbar-toggle {

border-color: transparent;

color: #21ce99 !important;

}

/* Jumbotron */

.jumbotron {

background-image: url('https://www.meihuangdoulian.com/images/soybeans.jpg');

background-repeat: no-repeat;

background-size: cover;

height: 100%;

color: white;

padding-top: 200px;

padding-bottom: 100px;

text-align: center;

}

.jumbotron h1 {

font-size: 80px;

letter-spacing: 3px;

margin-bottom: 40px;

}

/* Three columns */

.col-sm-4 {

padding-top: 15px;

padding-bottom: 15px;

text-align: center;

}

/* Footer */

footer {

background-color: #21ce99;

color: #ffffff;

padding: 32px;

}

/* Inputs */

input[type=text], input[type=email], textarea {

width: 100%;

padding: 12px;

border: 1px solid #ccc;

border-radius: 4px;

box-sizing: border-box;

margin-top: 6px;

margin-bottom: 16px;

resize: vertical;

}

input[type=submit] {

background-color: #21ce99;

color: white;

padding: 12px 20px;

border: none;

border-radius: 4px;

cursor: pointer;

}

input[type=submit]:hover {

background-color: #128662;

}

/* Responsive layout */

@media screen and (max-width: 767px) {

.navbar-collapse {

text-align: center;

}

.navbar-nav {

display: inline-block;

float: none;

}

.navbar-nav li {

display: inline;

}

.jumbotron h1 {

font-size: 60px;

}

}

```

JavaScript 是网页的脚本语言，用于实现网页的交互功能。美黄豆连网页的 JavaScript 代码如下：

```

$( document ).ready(function() {

/* Add smooth scrolling to all links in navbar + footer link */

$(".navbar a, footer a[href='#myPage']").on('click', function(event) {

if (this.hash !== "") {

event.preventDefault();

var hash = this.hash;

$('html, body').animate({

scrollTop: $(hash).offset().top

}, 900, function(){

window.location.hash = hash;

});

}

});

/* Slide in elements on scroll */

$(window).scroll(function() {

$(".slideanim").each(function(){

var pos = $(this).offset().top;

var winTop = $(window).scrollTop();

if (pos < winTop + 600) {

$(this).addClass("slide");

}

});

});

})

```

这些代码共同构成了美黄豆连网页，实现了网页的结构、样式和交互功能，为用户提供了美观、简洁、易用的网页体验。

标签：代码