本MDN静态页面仿写是笔者学完html和Css后自己写的一个静态页面仿写，还没有其他功能。
先看效果：
Html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MDN Web Docs</title>
<link rel="stylesheet" href="./style.css">
<link rel="sortcut icon" href="./icon.png">
</head>
<body>
<!-- 顶部白色横条 -->
<div class="top">
<p>Get real-time assistance with your coding queries. Try <a href="#">AI Help</a> now!</p>
</div>
<!-- 头部菜单 -->
<div class="header">
<div class="left">
<img src="./logo.png" alt="">
<a href="#">References</a>
<a href="#">Guides</a>
<a href="#">Plus</a>
<a href="#">Blog</a>
<a href="#">Play</a>
<a href="#" id="beta">AI Help</a>
</div>
<div class="right">
<div class="theme r">Theme</div>
<div class="search r">
<input type="search">
</div>
<div class="log r">Log in</div>
<div class="sign r">Sign up for free</div>
</div>
</div>
<!-- nav部分 -->
<div class="nav">
<div class="text">
<h2>Resources for <span>Developers</span>,
by Developers</h2>
<p>Documenting web technologies, including CSS, HTML, and JavaScript, since 2005.</p>
<div class="sea">
<input type="search">
</div>
</div>
</div>
<!-- banner 部分 -->
<div class="banner">
<!-- Featured articles -->
<div class="articles">
<h2>Featuered articles</h2>
<div class="a_box">
<ul>
<li>
<h4>New reference pages on MDN for JavaScript regular expressions</h4>
<br>
<p>See the latest updates to the MDN reference pages about JavaScript regular expressions, including new
sections on sub-features an</p>
</li>
<li>
<h4>Using HTML landmark roles to improve accessibility</h4>
<br>
<p>Learn what HTML landmark roles are, how they improve accessibility, and how you can include them on your
website effectively.</p>
</li>
<li>
<h4>Web API 接口参考<br>
<span style="font-size: 20px;">Performance API</span>
</h4>
<br>
<p>Performance API 是一组用于衡量 web 应用性能的标准。</p>
</li>
<li>
<h4>CSS <br>
<span style="font-size: 20px;">CSS nesting</span>
</h4>
<br>
<p>The CSS nesting module defines a syntax for nesting selectors, providing the ability to nest one style
rule inside another, with the.</p>
</li>
</ul>
</div>
</div>
<!-- Latest news -->
<div class="news">
<h2>Latest news</h2>
<div class="news_li">
<ul>
<li>
<h4>Responsibly empowering developers with AI on MDN</h4>
<p>blog.mozilla.org</p>
<p class="time">4 months ago</p>
</li>
<li>
<h4>Introducing AI Help: Your Trusted Companion for Web Development</h4>
<p>developer.mozilla.org</p>
<p class="time">5 months ago</p>
</li>
<li>
<h4>Introducing the MDN Playground: Bring your code to life!</h4>
<p>developer.mozilla.org</p>
<p class="time">5 months ago</p>
</li>
</ul>
</div>
</div>
<!-- Recent contributions -->
<div class="recent">
<h2>Recent contributions</h2>
<div class="recent_li">
<ul>
<li>
<h4>Updated outlines from none to transparent color for accessibility pur…</h4>
<p>mdn/content</p>
<p class="time">15 hours ago</p>
</li>
<li>
<h4>[ja]: fix typo</h4>
<p>mdn/translated-content</p>
<p class="time">16 hours ago</p>
</li>
<li>
<h4>Express>Mongoose - replace removed function</h4>
<p>mdn/content</p>
<p class="time">17 hours ago</p>
</li>
<li>
<h4>[es]: Add sidebar to all Glossary pages</h4>
<p>mdn/translated-content</p>
<p class="time">18 hours ago</p>
</li>
<li>
<h4>Clear up Intl.NumberFormat useGrouping doc</h4>
<p>mdn/content</p>
<p class="time">20 hours ago</p>
</li>
<li>
<h4>Updated outlines from none to transparent color for accessibility pur…</h4>
<p>mdn/content</p>
<p class="time">15 hours ago</p>
</li>
<li>
<h4>[ja]: fix typo</h4>
<p>mdn/translated-content</p>
<p class="time">16 hours ago</p>
</li>
<li>
<h4>Express>Mongoose - replace removed function</h4>
<p>mdn/content</p>
<p class="time">17 hours ago</p>
</li>
<li>
<h4>[es]: Add sidebar to all Glossary pages</h4>
<p>mdn/translated-content</p>
<p class="time">18 hours ago</p>
</li>
<li>
<h4>Clear up Intl.NumberFormat useGrouping doc</h4>
<p>mdn/content</p>
<p class="time">20 hours ago</p>
</li>
</ul>
</div>
</div>
</div>
<!-- footer部分 -->
<div class="footer">
<div class="fcontent">
<div class="f_t">
<h3>Contributor Spotlight</h3>
<h1>YUJI</h1>
<p>MDN Web Docs has the most up-to-date and accurate information and the content is presented in an
easy-to-understand manner. I also like that it's available in many languages (very important!).</p>
<a href="#">Get involved →</a>
</div>
<img src="./mdn_contributor.png" alt="">
</div>
</div>
</body>
</html>
css代码
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?fm4xuu');
src: url('fonts/icomoon.eot?fm4xuu#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?fm4xuu') format('truetype'),
url('fonts/icomoon.woff?fm4xuu') format('woff'),D
url('fonts/icomoon.svg?fm4xuu#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.top {
display: flex;
justify-content: center;
align-items: center;
height: 54px;
background-color: rgb(249, 249, 251);
font: 700;
}
.top p a {
color: rgb(135, 43, 255);
}
.top p a:hover {
text-decoration: underline;
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
background-color: rgb(27, 27, 27);
margin: auto;
border-bottom: 1px solid rgb(133, 133, 133);
}
.header .left {
display: flex;
align-items: center;
margin-left: 56px;
width: 50%;
}
.left img {
height: 24px;
}
.left img:hover {
cursor: pointer;
}
.header .left a {
height: 44px;
line-height: 44px;
padding: 8px;
border-radius: 5px;
margin-left: 15px;
color: rgb(205, 205, 205) !important;
}
#beta {
position: relative;
}
.header #beta::after {
content: 'BETA';
position: absolute;
top: 15px;
right: -15px;
height: 10px;
border: 1px solid transparent;
line-height: 10px;
font-size: 10px;
font-weight: 500;
color: black;
background-color: rgb(255, 109, 145);
border-radius: 5px;
}
.header .left a:hover {
color: rgb(140, 180, 255) !important;
background-color: rgb(76, 94, 127);
}
.header .right {
display: flex;
align-items: center;
justify-content: space-between;
margin-right: 56px;
}
.r {
margin-left: 12px;
font-size: 14px;
}
.right .theme {
position: relative;
color: rgb(205, 205, 205);
font-weight: 700;
}
.theme::before {
position: absolute;
left: -25px;
top: 0;
content: '';
font-family: 'icomoon';
font-size: 18px;
font-weight: 700;
}
.right .search {
position: relative;
}
.right .search input {
width: 89px;
height: 30px;
border-radius: 100px;
border: 1px solid rgb(133, 133, 133);
outline: none;
background-color: transparent;
}
.search::after {
position: absolute;
top: 6px;
right: 7px;
content: '';
font-family: 'icomoon';
font-size: 18px;
font-weight: 700;
color: rgb(133, 133, 133);
}
.right .log {
color: rgb(205, 205, 189);
font-weight: 700;
margin-right: 12px;
}
.right .sign {
height: 32px;
width: 132px;
line-height: 32px;
text-align: center;
font-weight: 700;
color: rgb(27, 27, 123);
background-color: rgb(255, 255, 255);
border-radius: 4px;
}
.nav {
height: 384px;
background-color: rgb(26, 26, 26);
}
.nav .text {
position: relative;
height: 100%;
width: 832px;
display: flex;
padding: 0 16px;
margin: 0 auto;
flex-direction: column;
justify-content: space-around;
}
.text h2 {
display: block;
width: 800px;
height: 115px;
font-weight: 300;
font-size: 45px;
color: rgb(255, 255, 255);
}
.text h2 span {
text-decoration: underline rgb(140, 180, 255);
}
.text p {
color: rgb(255, 255, 255);
}
.text .sea {
width: 800px;
height: 62px;
position: relative;
}
.sea input {
position: absolute;
right: 115px;
display: block;
width: 570px;
height: 62px;
border: 2px solid rgb(133, 133, 133);
border-radius: 100px;
outline: none;
background-color: transparent;
}
.sea::after {
position: absolute;
content: '';
font-family: 'icomoon';
font-size: 20px;
color: white;
right: 135px;
bottom: 20px;
}
.banner {
width: 864px;
margin: 0 auto;
padding: 0 16px;
border: 1px solid transparent;
box-sizing: border-box;
}
.articles {
margin-top: 32px;
}
.articles h2 {
margin-bottom: 8px;
font-weight: 350;
}
.a_box ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.a_box ul li {
display: block;
width: 393px;
height: 165px;
border: 1px solid rgb(205, 205, 205);
box-shadow: 0 0 2px rgb(187, 187, 187);
padding: 16px;
margin-bottom: 16px;
box-sizing: border-box;
border-radius: 10px;
}
.news {
margin-top: 32px;
}
.news h2 {
margin-bottom: 8px;
font-weight: 350;
}
.news_li ul {
display: flex;
flex-wrap: wrap;
}
.news_li ul li {
display: flex;
flex-direction: column;
position: relative;
width: 100%;
padding: 11px;
}
.news_li ul li h4 {
font-weight: 400;
}
.news_li ul li p {
font-size: 11px;
}
.news_li ul li .time {
position: absolute;
right: 5px;
top: 37%;
font-size: 12px;
}
.news_li ul li:nth-child(odd) {
background-color: rgb(249, 249, 251);
}
.recent {
margin-top: 32px;
}
.recent h2 {
margin-bottom: 8px;
font-weight: 350;
}
.recent_li ul {
display: flex;
flex-wrap: wrap;
}
.recent_li ul li {
display: flex;
flex-direction: column;
position: relative;
width: 100%;
padding: 11px;
}
.recent_li ul li h4 {
font-weight: 400;
color: rgb(27, 27, 27);
}
.recent_li ul li p {
font-size: 11px;
}
.recent_li ul li .time {
position: absolute;
right: 5px;
top: 37%;
font-size: 12px;
}
.recent_li ul li:nth-child(odd) {
background-color: rgb(249, 249, 251);
}
.footer {
margin-top: 20px;
height: 284px;
padding: 32px 16px;
background-color: rgb(26, 26, 26);
}
.fcontent {
position: relative;
width: 832px;
height: 284px;
margin: 0 auto;
}
.f_t {
display: flex;
flex-direction: column;
justify-content: space-around;
height: 284px;
width: 512px;
float: left;
padding: 16px;
box-sizing: border-box;
}
.f_t h3 {
color: rgb(255, 255, 255);
}
.f_t h1 {
width: 67px;
height: 34px;
background-color: rgb(255, 255, 255);
color: black;
font-size: 24px;
line-height: 34px;
text-align: center;
}
.f_t p {
position: relative;
display: block;
width: 75%;
color: rgb(255, 255, 255);
font-size: 12px;
padding-left: 30px;
}
.f_t p::before {
position: absolute;
top: -10px;
left: -10px;
content: '';
font-family: 'icomoon';
font-size: 40px;
}
.f_t a {
color: rgb(140, 180, 255);
font-weight: 700;
}
.fcontent img {
position: absolute;
height: 200px;
float: right;
top: 50px;
}
