HTML+CSS 仿NASA首页（期末考试项目）

矫情吗；* 2023-01-17 08:56 112阅读 0赞

## 前言 ##

> 这是我在大一期末考试的一个项目，一共有一张主页和两张子页。当时老师让我们自己做一个个人网页或者模仿一个网站其中的两到三个页面来作为期末考试内容。这个小项目非常适合像我一样的初学者来试手。

## 来吧，展示 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODE2NTQwNw_size_16_color_FFFFFF_t_70_pic_center]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODE2NTQwNw_size_16_color_FFFFFF_t_70_pic_center 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODE2NTQwNw_size_16_color_FFFFFF_t_70_pic_center 2]

## 首页（index.html）代码 ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>NASA</title>
    		<link rel="stylesheet" href="css/index.css">
    		<link rel="icon" href="favicon.ico">
    	</head>
    	<body>
    		
    		<div id="head">
    			<div id="headMain" class="cf">
    				
    				<img src="images/nasa-logo.svg">
    				
    				<form action="" class="fr input">
    					<input type="text" id="input" placeholder="Search">
    					<span class="iconfont" id="glass"></span>
    					<span class="iconfont" id="share"></span>
    				</form>
    				
    				<ul class="navTop fr">
    					<li class="navTopMore">
    						<a href="#">Missions</a>
    						
    						<ul class="innavTop">
    							<li><a href="#">Artemis Program</a></li>
    							<li><a href="#">Commercial Crew</a></li>
    							<li><a href="#">Curiosity Mars Rover</a></li>
    							<li><a href="#">Hubble Space Telescope</a></li>
    							<li><a href="#">James Webb Space Telescope</a></li>
    							<li><a href="#">Juno:Mission at Jupiter</a></li>
    							<li><a href="#">International Space Station</a></li>
    							<li><a href="#">InSight Mars Lander</a></li>
    							<li><a href="#">Mars Perseverance Rover</a></li>
    							<li><a href="#">New Horizons:Pluto and Beyond</a></li>
    							<li><a href="#">OSIRIS-REx Asteroid Mission</a></li>
    							<li><a href="#">Parker Solar Probe</a></li>
    						</ul>
    					</li>
    					<li class="navTopMore">
    						<a href="#">Galleries</a>
    						
    						<ul class="innavTop">
    							<li><a href="#">Image of the Day</a></li>
    							<li><a href="#">Image Galleries</a></li>
    							<li><a href="#">Videos</a></li>
    							<li><a href="#">Ultra High-Def Videos</a></li>
    							<li><a href="#">Usage and Copyright</a></li>
    						</ul>
    					</li>
    					<li><a href="#">NASA TV</a></li>
    					<li class="navTopMore">
    						<a href="#">Follow NASA</a>
    						
    						<ul class="innavTop">
    							<li><a href="#">Social Media</a></li>
    							<li><a href="#">NASA Socials</a></li>
    							<li><a href="#">NASA Blogs</a></li>
    							<li><a href="#">NASA Live</a></li>
    							<li><a href="#">Get Involved</a></li>
    							<li><a href="#">Spot the Station</a></li>
    							<li><a href="#">NASA Newsletter</a></li>
    						</ul>
    					</li>
    					<li class="navTopMore">
    						<a href="#">Dowmloads</a>
    						
    						<ul class="innavTop">
    							<li><a href="#">Third Rock Radio</a></li>
    							<li><a href="#">Apps</a></li>
    							<li><a href="#">Podcasts</a></li>
    							<li><a href="#">E-Books</a></li>
    							<li><a href="#">Audio & Ringtones</a></li>
    						</ul>
    					</li>
    					<li class="navTopMore">
    						<a href="#">About</a>
    						
    						<ul class="innavTop">
    							<li><a href="#">About NASA</a></li>
    							<li><a href="#">Leadership</a></li>
    							<li><a href="#">Organization</a></li>
    							<li><a href="#">Locations</a></li>
    							<li><a href="#">Exhibits and Speakers</a></li>
    							<li><a href="#">Astronauts</a></li>
    							<li><a href="#">People of NASA</a></li>
    							<li><a href="#">Careers@NASA</a></li>
    						</ul>	
    					</li>
    					<li class="navTopMore">
    						<a href="#" class="last">NASA Audiences</a>
    						
    						<ul class="innavTop">
    							<li><a href="#">For Media</a></li>
    							<li><a href="#">For Educators</a></li>
    							<li><a href="#">For Students</a></li>
    						</ul>
    					</li>
    				</ul class="navTopMore">
    				
    				
    				<ul class="navBottom cf">
    					<li><a href="Humans.html" target="_blank">Humans in Space</a></li>
    					<li><a href="#">Moon to Mars</a></li>
    					<li><a href="#">Earth</a></li>
    					<li><a href="#">Space Tech</a></li>
    					<li><a href="#">Flight</a></li>
    					<li><a href="#">Solar System and Beyond</a></li>
    					<li><a href="#">STEM Engagement</a></li>
    					<li><a href="#">History</a></li>
    					<li><a href="#">Benefits to You</a></li>
    				</ul>
    			</div>
    		</div>
    		
    		<div id="main" class="cf">
    			<a href="#" class="left">
    				<p class="imgbtmt ibt">Mars Perseverance Rover</p>
    				<p class="imgbtmo ibo">6 Things to Know About NASA's Ingenuity Mars Helicopter</p>
    			</a>
    			<a href="#" class="rightTopl">
    				<p class="imgbtmth ibt">Expedition 63</p>
    				<p class="imgbtmf ibo">NASA Broadcasts Final Spacewalks to Upgrade Space Station Power System</p>
    			</a>
    			<div class="rightTopr">
    				<h4>NASA Events</h4>
    				<p><a href="#">Thurs., July 16, 6 a.m. EDT: International Space Station Spacewalk</a></p>
    				<p><a href="#">Thurs., July 16, 8 a.m. EDT: NASA-ESA Briefing on First Images from Solar Orbiter</a></p>
    				<p><a href="#">Tues., July 21, 6 a.m. EDT: International Space Station Spacewalk</a></p>
    				<p><a href="#">Thu., July 23, 10 a.m. EDT: Coverage of the launch of the Progress 76 cargo ship to the International Space Station</a></p>
    				<p><a href="#">No earlier than July 30: Launch of Mars 2020 Perseverance Rover</a></p>
    				<p class="rightTopr-btm"><a href="#">NASA TV Schedule</a><a href="#">Launches and Landings</a></p>
    			</div>
    			<a href="#" class="rightBottom">
    				<p class="imgbtmo ibo">Video——"We Persevere"</p>
    			</a>
    		</div>
    		
    		<div id="home">
    			<div class="ihome">
    				<p class="Himgbtmy ibt"><a href="#">Solar Orbiter</a></p>
    				<p class="Himgbtmo ibo"><a href="#">NASA,ESA to Release First Images from Solar Orbiter Mission</a></p>
    			</div>
    			<div class="ihome">
    				<p class="Himgbtmt ibo"><a href="#">NASA at Home Brings the Universe to You</a></p>
    			</div>
    			<div class="ihome">
    				<p class="Himgbtmth ibo"><a href="#">NASA Response to Coronavirus</a></p>
    			</div>
    		</div>
    		
    		<div id="bottom">
    			<div class="ibtm">
    				<p class="Himgbtmo ibo"><a href="#">Educational Activities with #NASAatHome</a></p>
    			</div>
    			<div class="ibtm">
    				<p class="Himgbtmy ibt"><a href="#">Image of the Day</a></p>
    				<p class="Himgbtmo ibo"><a href="#">Perseverance Rover Mated to Its Atlas V Rocket</a></p>
    			</div>
    			<div class="ibtm">
    				<p class="Himgbtmy ibt"><a href="#">Solar System and Beyond</a></p>
    				<p class="Himgbtmo ibo"><a href="#">NASA to Highlight Comet NEOWISE with Public Broadcast</a></p>
    			</div>
    		</div>
    		
    		<div id="more">
    			<a href="#" class="morebtm">MORE STORIES</a>
    		</div>
    		
    		<div id="foot" class="cf">
    			<div class="ffleft">
    				<a href="#"><img src="images/nasa-logo.svg" alt=""></a>
    				<p class="ftext">National Aeronautics and Space Administration</p>
    				<p class="ftext">NASA Official: Brian Dunbar</p>
    			</div>
    			<ul class="fright">
    				<li><a href="#">No Fear Act</a></li>
    				<li><a href="#">FOIA</a></li>
    				<li><a href="#">Privacy</a></li>
    				<li><a href="#">Office of Inspector General</a></li>
    				<li><a href="#">Office of Special Counsel</a></li>
    				<li><a href="#">Agency Financial Reports</a></li>
    				<li><a href="#">Contact NASA</a></li>
    			</ul>
    		</div>
    	</body>
    </html>

## 第一个子页（Humans.html）代码 ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>Humans in Space | NASA</title>
    		<link rel="stylesheet" href="css/Humans.css">
    		<link rel="icon" href="favicon.ico">
    	</head>
    	<body>
    		
    		<div id="head">
    			<div id="headMain" class="cf">
    				
    				<img src="images/nasa-logo.svg">
    				
    				<form action="" class="fr input">
    					<input type="text" id="input" placeholder="Search">
    					<span class="iconfont" id="glass"></span>
    					<span class="iconfont" id="share"></span>
    				</form>
    				
    				<ul class="navTop fr">
    					<li class="navTopMore"><a href="index.html">Home</a></li>
    					<li class="navTopMore">
    						<a href="#">Missions</a>
    						
    						<ul class="innavTop">
    							<li><a href="#">Artemis Program</a></li>
    							<li><a href="#">Commercial Crew</a></li>
    							<li><a href="#">Curiosity Mars Rover</a></li>
    							<li><a href="#">Hubble Space Telescope</a></li>
    							<li><a href="#">James Webb Space Telescope</a></li>
    							<li><a href="#">Juno:Mission at Jupiter</a></li>
    							<li><a href="#">International Space Station</a></li>
    							<li><a href="#">InSight Mars Lander</a></li>
    							<li><a href="#">Mars Perseverance Rover</a></li>
    							<li><a href="#">New Horizons:Pluto and Beyond</a></li>
    							<li><a href="#">OSIRIS-REx Asteroid Mission</a></li>
    							<li><a href="#">Parker Solar Probe</a></li>
    						</ul>
    					</li>
    					<li class="navTopMore">
    						<a href="#">Galleries</a>
    						
    						<ul class="innavTop">
    							<li><a href="#">Image of the Day</a></li>
    							<li><a href="#">Image Galleries</a></li>
    							<li><a href="#">Videos</a></li>
    							<li><a href="#">Ultra High-Def Videos</a></li>
    							<li><a href="#">Usage and Copyright</a></li>
    						</ul>
    					</li>
    					<li><a href="#">NASA TV</a></li>
    					<li class="navTopMore">
    						<a href="#">Follow NASA</a>
    						
    						<ul class="innavTop">
    							<li><a href="#">Social Media</a></li>
    							<li><a href="#">NASA Socials</a></li>
    							<li><a href="#">NASA Blogs</a></li>
    							<li><a href="#">NASA Live</a></li>
    							<li><a href="#">Get Involved</a></li>
    							<li><a href="#">Spot the Station</a></li>
    							<li><a href="#">NASA Newsletter</a></li>
    						</ul>
    					</li>
    					<li class="navTopMore">
    						<a href="#">Dowmloads</a>
    						
    						<ul class="innavTop">
    							<li><a href="#">Third Rock Radio</a></li>
    							<li><a href="#">Apps</a></li>
    							<li><a href="#">Podcasts</a></li>
    							<li><a href="#">E-Books</a></li>
    							<li><a href="#">Audio & Ringtones</a></li>
    						</ul>
    					</li>
    					<li class="navTopMore">
    						<a href="#">About</a>
    						
    						<ul class="innavTop">
    							<li><a href="#">About NASA</a></li>
    							<li><a href="#">Leadership</a></li>
    							<li><a href="#">Organization</a></li>
    							<li><a href="#">Locations</a></li>
    							<li><a href="#">Exhibits and Speakers</a></li>
    							<li><a href="#">Astronauts</a></li>
    							<li><a href="#">People of NASA</a></li>
    							<li><a href="#">Careers@NASA</a></li>
    						</ul>	
    					</li>
    					<li class="navTopMore">
    						<a href="#" class="last">NASA Audiences</a>
    						
    						<ul class="innavTop">
    							<li><a href="#">For Media</a></li>
    							<li><a href="#">For Educators</a></li>
    							<li><a href="#">For Students</a></li>
    						</ul>
    					</li>
    				</ul class="navTopMore">
    			</div>
    		</div>
    		
    		<div id="img">
    			<img src="./images/p1.png" >
    		</div>
    		
    		<div id="nav">
    			<ul>
    				<li><a href="#" class="first">Humans in Space</a></li>
    				<li><a href="Overview.html" target="_blank">Overview</a></li>
    				<li><a href="#">Images</a></li>
    				<li><a href="#">Videos</a></li>
    				<li><a href="#">Media Resources</a></li>
    			</ul>
    		</div>
    		
    		<div id="main" class="cf">
    			
    			<div class="mainLeft">
    				<ul>
    					<li class="leftTop">Humans in Space</li>
    					<li><a href="#">International Space Station</a></li>
    					<li><a href="#">Commercial Crew Program</a></li>
    					<li><a href="#">NASA Astronauts</a></li>
    					<li><a href="#">Low-Earth Orbit Economy</a></li>
    					<li><a href="#">Research</a></li>
    					<li><a href="#">Histroy</a></li>
    				</ul>
    				<ul>
    					<li class="leftTop">Related Topics</li>
    					<li><a href="#">All Topics A-Z</a></li>
    				</ul>
    			</div>
    			
    			<div class="mainRight" class="cf">
    				<div class="mainRightTop">
    					<a href="#" class="mRl fl">
    					<p class="imgbtmf tb ibo">NASA Broadcasts Final Spacewalks to Upgrade Space Station Power System</p>
    					</a>
    					<a href="#" class="mRr fr">
    						<p class="tb ibo">Aviation Scholars to Speak with NASA Astronauts Aboard Space Station</p>
    					</a>
    					<a href="#" class="mRr1 fr">
    						<p class="tb ibo">Artemis Generation Students Across US to Speak with NASA Astronaut</p>
    					</a>
    					<a href="#" class="mRb">
    						<p class="tb ibo">NASA Plans for More SLS Rocket Boosters to Launch Artemis Missions</p>
    					</a>
    				</div>
    				<div class="mainRightBottom">
    					<a href="#" class="mainRBin">
    						<p class="tb ibo">NASA Developing a Plan to Fly Personnel on Suborbital Spacecraft	
    						</p></a>
    					<a href="#" class="mainRBin">
    						<p class="tb ibo">NASA Moving Forward to Enable a Low-Earth Orbit Economy</p></a>
    					<a href="#" class="mainRBin">
    						<p class="tb ibo">Students from Across US to Speak with NASA Astronauts</p></a>
    					<a href="#" class="mainRBin">
    						<p class="tb ibo">NASA Updates Date, Time for Media Teleconference with Administrator</p></a>
    				</div>
    				<div class="mainRightmore">
    					<a href="#" class="morebtm">MORE STORIES</a>
    				</div>
    				
    				<div class="mainRightfoot" class="cf">
    					<div class="ffleft">
    						<a href="#"><img src="images/nasa-logo.svg" alt=""></a>
    						<p class="ftext">National Aeronautics and Space Administration</p>
    						<p class="ftext">Page Last Updated: </p>
    						<p class="ftext">Page Editor: NASA Official: Brian Dunbar</p>
    						<p class="ftext">NASA Official: Brian Dunbar</p>
    					</div>
    					<ul class="fright">
    						<li><a href="#">No Fear Act</a></li>
    						<li><a href="#">FOIA</a></li>
    						<li><a href="#">Privacy</a></li>
    						<li><a href="#">Office of Inspector General</a></li>
    						<li><a href="#">Office of Special Counsel</a></li>
    						<li><a href="#">Agency Financial Reports</a></li>
    						<li><a href="#">Contact NASA</a></li>
    					</ul>
    				</div>
    			</div>
    		</div>	
    	</body>
    </html>

## 第三个子页（ Overview.html）代码 ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>Humans in Space Overview</title>
    		<link rel="stylesheet" type="text/css" href="css/Overview.css" />
    		<link rel="icon" href="favicon.ico" />
    	</head>
    	<body>
    		<div id="head">
    			<div id="headMain" class="cf">
    				
    				<img src="images/nasa-logo.svg">
    				
    				<form action="" class="fr input">
    					<input type="text" id="input" placeholder="Search">
    					<span class="iconfont" id="glass"></span>
    					<span class="iconfont" id="share"></span>
    				</form>
    				
    				<ul class="navTop fr">
    					<li class="navTopMore"><a href="index.html">Home</a></li>
    					<li class="navTopMore">
    						<a href="#">Missions</a>
    						
    						<ul class="innavTop">
    							<li><a href="#">Artemis Program</a></li>
    							<li><a href="#">Commercial Crew</a></li>
    							<li><a href="#">Curiosity Mars Rover</a></li>
    							<li><a href="#">Hubble Space Telescope</a></li>
    							<li><a href="#">James Webb Space Telescope</a></li>
    							<li><a href="#">Juno:Mission at Jupiter</a></li>
    							<li><a href="#">International Space Station</a></li>
    							<li><a href="#">InSight Mars Lander</a></li>
    							<li><a href="#">Mars Perseverance Rover</a></li>
    							<li><a href="#">New Horizons:Pluto and Beyond</a></li>
    							<li><a href="#">OSIRIS-REx Asteroid Mission</a></li>
    							<li><a href="#">Parker Solar Probe</a></li>
    						</ul>
    					</li>
    					<li class="navTopMore">
    						<a href="#">Galleries</a>
    						
    						<ul class="innavTop">
    							<li><a href="#">Image of the Day</a></li>
    							<li><a href="#">Image Galleries</a></li>
    							<li><a href="#">Videos</a></li>
    							<li><a href="#">Ultra High-Def Videos</a></li>
    							<li><a href="#">Usage and Copyright</a></li>
    						</ul>
    					</li>
    					<li><a href="#">NASA TV</a></li>
    					<li class="navTopMore">
    						<a href="#">Follow NASA</a>
    						
    						<ul class="innavTop">
    							<li><a href="#">Social Media</a></li>
    							<li><a href="#">NASA Socials</a></li>
    							<li><a href="#">NASA Blogs</a></li>
    							<li><a href="#">NASA Live</a></li>
    							<li><a href="#">Get Involved</a></li>
    							<li><a href="#">Spot the Station</a></li>
    							<li><a href="#">NASA Newsletter</a></li>
    						</ul>
    					</li>
    					<li class="navTopMore">
    						<a href="#">Dowmloads</a>
    						
    						<ul class="innavTop">
    							<li><a href="#">Third Rock Radio</a></li>
    							<li><a href="#">Apps</a></li>
    							<li><a href="#">Podcasts</a></li>
    							<li><a href="#">E-Books</a></li>
    							<li><a href="#">Audio & Ringtones</a></li>
    						</ul>
    					</li>
    					<li class="navTopMore">
    						<a href="#">About</a>
    						
    						<ul class="innavTop">
    							<li><a href="#">About NASA</a></li>
    							<li><a href="#">Leadership</a></li>
    							<li><a href="#">Organization</a></li>
    							<li><a href="#">Locations</a></li>
    							<li><a href="#">Exhibits and Speakers</a></li>
    							<li><a href="#">Astronauts</a></li>
    							<li><a href="#">People of NASA</a></li>
    							<li><a href="#">Careers@NASA</a></li>
    						</ul>
    					</li>
    					<li class="navTopMore">
    						<a href="#" class="last">NASA Audiences</a>
    						
    						<ul class="innavTop">
    							<li><a href="#">For Media</a></li>
    							<li><a href="#">For Educators</a></li>
    							<li><a href="#">For Students</a></li>
    						</ul>
    					</li>
    				</ul class="navTopMore">
    			</div>
    		</div>
    		
    		<div id="img">
    			<img src="./images/p1.png">
    		</div>
    		
    		<div id="nav">
    			<ul>
    				<li><a href="#" class="first">Humans in Space</a></li>
    				<li><a href="#">Overview</a></li>
    				<li><a href="#">Images</a></li>
    				<li><a href="#">Videos</a></li>
    				<li><a href="#">Media Resources</a></li>
    			</ul>
    		</div>
    		
    		<div id="main" class="cf">
    			
    			<div class="mainLeft">
    				<ul>
    					<li class="leftTop">Humans in Space</li>
    					<li><a href="#">International Space Station</a></li>
    					<li><a href="#">Commercial Crew Program</a></li>
    					<li><a href="#">NASA Astronauts</a></li>
    					<li><a href="#">Low-Earth Orbit Economy</a></li>
    					<li><a href="#">Research</a></li>
    					<li><a href="#">Histroy</a></li>
    				</ul>
    				<ul>
    					<li class="leftTop">Related Topics</li>
    					<li><a href="#">All Topics A-Z</a></li>
    				</ul>
    			</div>
    			
    			<div class="mainRight" class="cf">
    				
    				<div class="mainRighttext">
    					<div class="mainRighttexttop">
    						<h1>Humans in Space Overview</h1>
    						<p>Every day since Nov. 2, 2000, people have been orbiting our planet inside the <a href="#">International Space
    								Station</a>, bringing together science, technology and human innovation to enable new technologies and research
    							breakthroughs not possible on Earth.</p>
    					</div>
    					<div class="mainRightmiddle">
    						<div class="mainRightmiddleimg">
    							<a href="#"><img src="images/v1.jpg"></a>
    							<p>Three different varieties of plants growing in the Veggie plant growth chamber on the International Space
    								Station were harvested this morning. Photo credit: NASA/ISS</p>
    						</div>
    						<p>NASA <a href="#">astronauts</a> and scientific work spaces aboard the station, as well as scientific
    							investigations installed outside the station, make possible fundamental and cross-discipline research, advancing
    							<a href="#">scientific knowledge</a> about Earth, space and the physical and biological sciences, benefitting
    							people living on our home planet and future explorers. As a testbed for deep space exploration, the station is
    							helping us learn how to keep astronauts healthy during long-duration space travel and demonstrating technologies
    							for human and robotic exploration beyond low-Earth orbit, to the <a href="#">Moon and Mars</a></p>
    						<p>The station facilitates the growth of a robust commercial market in low-Earth orbit as the only <a href="#">U.S.
    								National Laboratory</a> in space. Commercial <a href="#">cargo resupply</a> and commercial crew transportation
    							to the station and low-Earth orbit will enable a space exploration economy. The International Space Station is a
    							blueprint for <a href="#">global cooperation</a> for future exploration beyond Earth – one that enables U.S.-led
    							multinational partnerships and advances shared goals in space exploration.</p>
    					</div>
    
    					<p>NASA’s <a href="#">Commercial Crew Program</a> is working with American aerospace industry as Boeing and SpaceX
    						develop and operate a new generation of spacecraft and launch systems to carry crews of four to the International
    						Space Station, which will provide additional research time and broader opportunities of discovery on the orbiting
    						laboratory.</p>
    					<p>With commercial companies providing astronaut transportation to and from low-Earth orbit, NASA can focus on
    						building spacecraft and rockets for missions to the Moon and Mars.</p>
    					<p>As the third-brightest object in the sky (only the Sun and Moon are brighter!), the International Space Station
    						is easy to see at dawn or dusk when it flies over your home. Sign up for text messages or emails to know when and
    						where to look up and wave at the astronauts at NASA’s <a href="#">Spot the Station website</a></p>
    				</div>
    				
    				<div class="mainRightfoot" class="cf">
    					<div class="ffleft">
    						<a href="#"><img src="images/nasa-logo.svg" alt=""></a>
    						<p class="ftext">National Aeronautics and Space Administration</p>
    						<p class="ftext">Page Last Updated: </p>
    						<p class="ftext">Page Editor: NASA Official: Brian Dunbar</p>
    						<p class="ftext">NASA Official: Brian Dunbar</p>
    					</div>
    					<ul class="fright">
    						<li><a href="#">No Fear Act</a></li>
    						<li><a href="#">FOIA</a></li>
    						<li><a href="#">Privacy</a></li>
    						<li><a href="#">Office of Inspector General</a></li>
    						<li><a href="#">Office of Special Counsel</a></li>
    						<li><a href="#">Agency Financial Reports</a></li>
    						<li><a href="#">Contact NASA</a></li>
    					</ul>
    				</div>
    			</div>
    		</div>
    	</body>
    </html>

## 首页（index.css）代码 ##

@import "reset.css";
    
    @font-face { 
      font-family: 'iconfont';
      src: url('../font/iconfont.eot');
      src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'),
          url('../font/iconfont.woff2') format('woff2'),
          url('../font/iconfont.woff') format('woff'),
          url('../font/iconfont.ttf') format('truetype'),
          url('../font/iconfont.svg#iconfont') format('svg');
    }
    .wbo{ 
    	background: rgb(255, 255, 255,0.7);
    	font-size: 19px;
    	line-height: 23px;
    	color: #000;
    	padding: 6px 0px 6px 10px;
    }
    .iconfont { 
      font-family: "iconfont" !important;
      font-size: 16px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    #head{ 
    	background-image: url(../images/t1.jpg);
    	z-index: 1;
    	 position: fixed; 
    	 top: 0px;
    	 left: 0px;
    	width: 100%;
    	height: 151px; 
    }
    #headMain{ 
    	width: 1220px;
    	margin: 0 auto;
    	/* padding: 25px 0px; */
    	padding: 25px 0px 0px 0px;
    	
    }
    #headMain img{ 
    	float: left;
    } 
    #input{ 
    	width: 110px;
    	height: 20px;
    	padding: 10px 36px 10px 10px;
    	background-color: #333;
    	display: block;
    	margin-top: 10px;
    	outline: none;
    	color: white;
    
    }
    /*#input::-webkit-inpt-placeholder{ color: white; }*/
    #headMain .input{ 
    	position: relative;
    }
    #headMain span{ 
    	color: #fff;
    	font-size: 20px;
    }
    #glass{ 
    	position: absolute;
    	top: 20px;
    	right: 5px;
    }
    #share{ 
    	position: absolute;
    	top: 20px;
    	right: -25px;
    }
    .navTop>li{ 
    	float: left;
    }
    .navTop>li>a{ 
    	color:#fff;
    	font-size: 18px;
    	padding: 14px;
    	display: inline-block;
    	position: relative;
    	border-right: 2px solid #666;
    }
    #headMain .navTop .last{ 
    	border: 0;
    	width: auto;
    }
    .navTop>li>a:hover{ 
    	background-color: #15418c;
    }
    .innavTop{ 
    	z-index: 1;
    	position: absolute;
    	display: none;
    	background-color: #15418c;
    }
    .innavTop li a{ 
    	display: inline-block;
    	height: 35px;
    	line-height: 35px;
    	font-size: 18px;
    	color: #fff;
    	padding: 5px;
    	
    }
    .innavTop>li:hover{ 
    	background-color: rgb(10, 2, 56);
    }
    /* 鼠标经过头部上面的导航栏li时，里面的子导航栏会展现 */
    .navTop li:hover .innavTop{ 
    	display: block;
    }
    
    .last{ 
    	width: 180px;
    }
    
    .navBottom{ 
    	
    	float: left;
    	margin: 0px auto;
    	margin-top: 25px;
    }	
    .navBottom li{ 
    	float: left;
    }
    .navBottom li a{ 
    	display: inline-block;
    	height: 30px;
    	position: relative;
    	line-height: 30px;
    	color: #fff;
    	padding: 10px;
    	font-size: 14px;
    	background-color: #555;
    }
    .navBottom li a:hover{ 
    	background-color: #888;
    }
    .navBottom li a::after{ 
    	content: '';
    	display: block;
    	position: absolute;
    	top: 10px;
    	left: 0px;
    	width: 2px;
    	height: 60%;
    	background-color: #666;
    }
    #main{ 
    	padding-top: 10px;
    	width: 1340px;
    	margin: 150px auto 0 auto;
    	position: relative;
    }
    #main .left{ 
    	display: block;
    	width: 660px;
    	height: 615px;
    	float: left;
    	background-image: url(../images/t4.jpg);
    	background-size: 100%;
    }
    #main .rightTopl{ 
    	/* margin-left: 700px; */
    	clear: both;
    	display: inline-block;
    	width: 320px;
    	height: 294px;
    	position: absolute;
    	top: 10px;
    	right: 340px;
    	background-image: url(../images/t3.jpg);
    }
    #main .rightTopr{ 
    	width: 315px;
    	height: 294px;
    	background-color: #39719e;
    	display: inline-block;
    	position: absolute;
    	top: 10px;
    	right: 0px;
    	padding-left: 8px;
    }
    #main .rightTopr a{ 
    	color: #fff;
    	font-size: 14px;
    	line-height: 16px;
    	padding-right: 15px;
    }
    
    #main .rightTopr h4{ 
    	color: #fff;
    	margin: 0px 10px;
    	padding: 3px 0px 6px 0px;
    	border-bottom: 1px solid #fff;
    }
    #main .rightTopr .rightTopr-btm{ 
    	position: absolute;
    	left: 10px;
    	bottom: 0px;
    	border-top: 1px solid #fff;
    }
    #main .rightBottom{ 
    	/* margin-left: 700px; */
    	display: inline-block;
    	width: 660px;
    	height: 300px;
    	position: absolute;
    	bottom: 0px;
    	right: 0px;
    	background-image: url(../images/mars_2020_logo.jpg);
    	background-size: 100%;
    }
    .imgbtmo{ 
    	width: 650px;	
    	position: absolute;
    	left: 0px;
    	bottom: 0px;
    }
    .imgbtmt{ 
    	position: absolute;
    	left: 0px;
    	bottom: 35px;
    }
    .imgbtmth{ 
    	position: absolute;
    	left: 0px;
    	bottom: 81px;
    	/* text-decoration: underline; */
    }
    .imgbtmf{ 
    	position: absolute;
    	left: 0px;
    	bottom: 0px;
    
    }
    #main .left:hover .imgbtmo{ 
    	background-color: #fff;
    }
    #main .rightTopl:hover .imgbtmf{ 
    	background-color: #fff;
    }
    #main .rightBottom:hover .imgbtmo{ 
    	background-color: #fff;
    }
    .rightTopr a:hover{ 
    	text-decoration: underline;
    }
    .imgbtmth:hover, .imgbtmt:hover{ 
    	opacity: 1;
    }
    #home{ 
    	display: flex;
    	flex-direction: row;
    	flex-wrap: wrap;
    	justify-content: space-between;
    	padding-top: 20px;
    	width: 1340px;
    	margin: 0px auto;
    }
    .ihome p a{ 
    	color: #000;
    }
    .ihome:nth-child(1){ 
    	background-image: url(../images/t2.jpg);
    	background-size: 100%;
    	width: 330px;
    	height: 300px;
    	position: relative;
    }
    .ihome:nth-child(2){ 
    	background-image: url(../images/home.jpg);
    	background-size: 100%;
    	width: 650px;
    	height: 300px;
    	position: relative;
    	
    }
    .ihome:nth-child(3){ 
    	background-image: url(../images/t5.jpg);
    	width: 330px;
    	height: 300px;
    	position: relative;
    	
    }
    .Himgbtmy{ 
    	position: absolute;
    	left: 0px;
    	bottom: 56px;
    }
    .Himgbtmo{ 
    	position: absolute;
    	left: 0px;
    	bottom: 0px;
    	/* width: 330px; */
    }
    .Himgbtmt{ 
    	position: absolute;
    	left: 0px;
    	bottom: 0px;
    	width: 640px;
    }
    .Himgbtmth{ 
    	position: absolute;
    	left: 0px;
    	bottom: 0px;
    	width: 320px;
    }
    .Himgbtmy:hover{ 
    	opacity: 1;
    }
    .ihome:hover .Himgbtmo, .ihome:hover .Himgbtmt, .ihome:hover .Himgbtmth{ 
    	background-color: #fff;
    }
    #bottom{ 
    	display: flex;
    	flex-direction: row;
    	padding-top: 20px;
    	width: 1340px;
    	margin: 0px auto;
    
    }
    .ibtm{ 
    	width: 330px;
    	height: 300px;
    	margin-right: 15px;
    }
    .ibtm p a{ 
    	color: #000;
    }
    .ibtm:nth-child(1){ 
    	background-image: url(../images/t6.jpg);
    	background-size: 100%;
    	position: relative;
    }
    .ibtm:nth-child(2){ 
    	background-image: url(../images/t7.jpg);
    	background-size: 100%;
    	position: relative;
    	
    	
    }
    .ibtm:nth-child(3){ 
    	background-image: url(../images/t8.jpg);
    	background-size: 100%;
    	position: relative;
    }
    .ibtm:hover .Himgbtmo{ 
    	background-color: #fff;
    }
    #more{ 
    	padding-top: 20px;
    	width: 1340px;
    	margin: 0px auto;
    }
    #more .morebtm{ 
    	display: block;
    	width: 100%;
    	height: 17px;
    	text-align: center;
    	color: #fff;
    	background-color: #15418c;
    	font-size: 17px;
    	line-height: 20px;
    	font-weight: 600;
    	padding: 8px 0px 15px 0px;
    }
    #more .morebtm:hover{ 
    	background-color: #39719e;
    }
    #foot{ 
    	padding-top: 30px;
    	width: 1340px;
    	height: 130px;
    	margin: 0px auto;
    }
    #foot .ffleft img{ 
    	width: 80px;
    	height: 67px;
    	margin-left: 20px;
    	float: left;
    }
    #foot .ftext{ 
    	color: #fff;
    	font-size: 14px;
    }
    #foot .fright{ 
    	float: right;
    }
    #foot .fright li{ 
    	margin-top: 30px;
    	float: left;
    }
    #foot .fright li a{ 
    	color: #5d7fb9;
    	margin-left: 20px;
    }
    #foot .fright li a:hover{ 
    	text-decoration: underline;
    }

## 取消一些标签默认的css代码，每个页面都要链接这个代码 ##

*{ 
        padding: 0px;
        margin: 0px;
    	border: none;
    }
    h1,h2,h3,h4,h5,p,span,em{ 
        color: #fff;
    }
    body{ 
        background-color: black;
    	color: white;
    }
    a{ 
        text-decoration: none;
        color: #fff;
    }
    ul{ 
        list-style-type: none;
    }
    em{ 
        font-style: normal;
    }
    .fl{ 
    	float: left;
    }
    .fr{ 
    	float: right;
    }
    .cf::after{ 
    	content: "";
    	display: block;
    	clear: both;
    }
    .ibo{ 
        background: rgb(255, 255, 255,0.7);
        font-size: 19px;
    	line-height: 23px;
        color: #000;
        padding: 6px 0px 6px 10px;
    }
    .ibt{ 
        color: #fff;
        background: #5d7fb9;
        padding: 6px 12px;
        font-size: 0.9em;
        line-height: 1.3em;
        opacity: 0.8;
    }

## 子页面（Huamans.css）代码 ##

@import url("reset.css");
    /* @import url("navHead.css"); */
    
    @font-face { 
      font-family: 'iconfont';
      src: url('../font/iconfont.eot');
      src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'),
          url('../font/iconfont.woff2') format('woff2'),
          url('../font/iconfont.woff') format('woff'),
          url('../font/iconfont.ttf') format('truetype'),
          url('../font/iconfont.svg#iconfont') format('svg');
    }
    
    .iconfont { 
      font-family: "iconfont" !important;
      font-size: 16px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    #head{ 
    	background-image: url(../images/t1.jpg);
    	z-index: 2;
    	position: fixed; 
    	top: 0px;
    	left: 0px;
    	width: 100%;
    	height: 151px; 
    }
    #headMain{ 
    	width: 1220px;
    	margin: 0 auto;
    	/* padding: 25px 0px; */
    	padding: 25px 0px 0px 0px;
    	
    }
    #headMain img{ 
    	float: left;
    } 
    #input{ 
    	width: 110px;
    	height: 20px;
    	padding: 10px 36px 10px 10px;
    	background-color: #333;
    	display: block;
    	margin-top: 10px;
    
    }
    #headMain .input{ 
    	position: relative;
    }
    #headMain span{ 
    	color: #fff;
    	font-size: 20px;
    }
    #glass{ 
    	position: absolute;
    	top: 20px;
    	right: 5px;
    }
    #share{ 
    	position: absolute;
    	top: 20px;
    	right: -25px;
    }
    .navTop>li{ 
    	float: left;
    }
    .navTop>li>a{ 
    	color:#fff;
    	font-size: 18px;
    	padding: 14px;
    	display: inline-block;
    	position: relative;
    	border-right: 2px solid #666;
    }
    #headMain .navTop .last{ 
    	border: 0;
    	width: auto;
    }
    .navTop>li>a:hover{ 
    	background-color: #15418c;
    }
    .innavTop{ 
    	z-index: 3;
    	position: absolute;
    	display: none;
    	background-color: #15418c;
    }
    .innavTop li a{ 
    	display: inline-block;
    	height: 35px;
    	line-height: 35px;
    	font-size: 18px;
    	color: #fff;
    	padding: 5px;
    	
    }
    .innavTop>li:hover{ 
    	background-color: rgb(10, 2, 56);
    }
    /* 鼠标经过头部上面的导航栏li时，里面的子导航栏会展现 */
    .navTop li:hover .innavTop{ 
    	display: block;
    }
    
    .last{ 
    	width: 180px;
    }
    
    .navBottom{ 
    	
    	float: left;
    	margin: 0px auto;
    	margin-top: 25px;
    }	
    .navBottom li{ 
    	float: left;
    }
    .navBottom li a{ 
    	display: inline-block;
    	height: 30px;
    	position: relative;
    	line-height: 30px;
    	color: #fff;
    	padding: 10px;
    	font-size: 14px;
    	background-color: #555;
    }
    .navBottom li a:hover{ 
    	background-color: #888;
    }
    .navBottom li a::after{ 
    	content: '';
    	display: block;
    	position: absolute;
    	top: 10px;
    	left: 0px;
    	width: 2px;
    	height: 60%;
    	background-color: #666;
    }
    
    #img{ 
    	width: 1366px;
    	margin: 0px auto;
    	margin-top: 100px;
    	color: white;
    }
    #head{ 
    	height: 90px !important;
    	
    }
    #head #headMain img{ 
    	width: 80px;
    	height: 67px;
    }
    #nav{ 
    	z-index: 1;
    	width: 1366px;
    	margin: 0px auto;
    	height: 40px;
    	position: sticky;
    	top: 90px;
    	background-color: #555;
    }
    #nav>ul>li{ 
    	float: left;
    	/* line-height: 40px; */
    }
    #nav>ul li a{ 
    	padding: 0px 10px;
    	display: inline-block;
    	line-height: 40px;
    }
    #nav>ul li a:hover{ 
    	background-color: #5d7fb9;
    }
    #nav .first{ 
    	background-color: #5d7fb9;
    	position: relative;
    	margin-right: 25px;
    }
    /* Humans右边的箭头背景 */
    .first::after{ 
    	content: "";
    	display: block;
    	position: absolute;
    	top: 0px;
    	right: -20px;
    	border-left: 20px solid #5d7fb9;
    	border-top: 20px solid transparent;
    	border-bottom: 20px solid transparent;
    }
    lu li{ 
    	color: #fff;
    }
    #main{ 
    	width: 1366px;
    	margin: 0px auto;
    }
    .mainLeft{ 
    	width: 294px;
    	background-color: #333;
    	float: left;
    	height: 85vh;
    	position: sticky;
    	top: 130px;
    }
    .mainLeft ul{ 
    	padding: 40px 0;
    	position: relative;
    }
    .mainLeft>ul li a{ 
    	padding: 15px 30px;
    	display: block;
    	height: 10px;
    	line-height: 10px;
    }
    .leftTop{ 
    	position: absolute;
    	top: 0px;
    	left: 0px;
    	padding: 10px;
    	color: #fff;
    	background-color: #303540;
    }
    .mainRight{ 
    	width: 1042px;
    	float: right;
    	margin-top: 15px;
    }
    .mRl{ 
    	position: relative;
    	clear: both;
    	display: block;
    	width: 512px;
    	height: 613px;
    	background-image: url(../images/t3.jpg);
    	background-size: 100% 100%;
    }
    
    .mRr{ 
    	position: relative;
    
    	display: inline-block;
    	width: 250px;
    	height: 300px;
    	margin-left: 15px;
    	background-image: url(../images/p2.jpg);
    }
    .mRr1{ 
    	position: relative;
    
    	display: inline-block;
    	width: 250px;
    	height: 300px;
    	background-image: url(../images/p3.jpg);
    }
    .mRb{ 
    	position: relative;
    
    	display: inline-block;
    	width: 512px;
    	height: 300px;
    	margin: 15px 0px 0px 18px;
    	background-image: url(../images/p4.jpg);
    }
    .tb{ 
    	position: absolute;
    	left: 0px;
    	bottom: 0px;
    }
    #main .mainRightTop a:hover .tb{ 
    	background-color: #fff;
    }
    .mainRightBottom{ 
    	width: 1042px;
    	float: right;
    	margin-top: 15px;
    	display: flex;
    	flex-direction: row;
    	justify-content: space-between;
    }
    .mainRBin{ 
    	position: relative;
    	display: inline-block;
    	width: 250px;
    	height: 300px;
    }
    .mainRBin:nth-child(1){ 
    	background-image: url(../images/b1.jpg);
    }
    .mainRBin:nth-child(2){ 
    	background-image: url(../images/b2.jpg);
    }
    .mainRBin:nth-child(3){ 
    	background-image: url(../images/b3.jpg);
    }
    .mainRBin:nth-child(4){ 
    	background-image: url(../images/b4.jpg);
    }
    #main .mainRBin:hover .tb{ 
    	background-color: #fff;
    }
    #main .mainRightmore{ 
    	width: 1042px;
    	float: right;
    	margin-top: 20px;
    }
    #main .mainRightmore .morebtm{ 
    	display: block;
    	/* color: red; */
    	background-color: #15418c;
    	text-align: center;
    	height: 40px;
    	line-height: 40px;
    	font-weight: bolder;
    }
    #main .mainRightmore .morebtm:hover{ 
    	background-color: #39719e;
    }
    .mainRightfoot{ 
    	width: 1042px;
    	float: right;
    	margin-top: 20px;
    }
    .mainRightfoot .ffleft img{ 
    	width: 80px;
    	height: 67px;
    	margin-left: 20px;
    	float: left;
    }
    .mainRightfoot .ftext{ 
    	color: #fff;
    	font-size: 14px;
    }
    .mainRightfoot .fright{ 
    	float: right;
    	padding-bottom: 30px;
    }
    .mainRightfoot .fright li{ 
    	margin-top: 30px;
    	float: left;
    }
    .mainRightfoot .fright li a{ 
    	color: #5d7fb9;
    	margin-left: 20px;
    }
    .mainRightfoot .fright li a:hover{ 
    	text-decoration: underline;
    }

## 子页面（Overview.css）代码 ##

@import url("reset.css");
    @import url("Humans.css");
    .mainRighttext{ 
    	padding-top: 40px;
    	background-color: #fff;
    }
    .mainRighttext h1, .mainRighttext p{ 
    	padding-left: 30px;
    	margin-top: 20px;
    	color: #333;
    }
    .mainRighttext a{ 
    	color: #428bca;
    }
    .mainRighttext a:hover{ 
    	text-decoration: underline;
    }
    .mainRightmiddle{ 
    	margin-top: 20px;
    }
    .mainRighttext .mainRightmiddleimg{ 
    	float: right;
    	width: 320px;
    }
    .mainRighttext .mainRightmiddleimg>p{ 
    	font-size: 11px;
    	padding-right: 30px;
    	color: #333;
    }

## 总结 ##

> 其实这项目也不难，只是运用到简单的HTML和CSS，分好版块，一步一步来做就行了。当时我也遇到一些困难，一边写一边学习，遇到不懂的就博客，慢慢的你就会发现做出来了。

因为这里没有图片文件，需要这个小项目的同学可以点击下面的链接

链接：[https://pan.baidu.com/s/1X5uXBvKMzZAMrjkRMJRM6Q][https_pan.baidu.com_s_1X5uXBvKMzZAMrjkRMJRM6Q]  
提取码：8888

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODE2NTQwNw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221021/f131a71d0f4b4e4daebbe1f7ed613cdc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODE2NTQwNw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221021/7c196847b59f42ff9bfb201095a32660.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80ODE2NTQwNw_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221021/15a3c095f08d40dcab217527ce81a1bd.png
[https_pan.baidu.com_s_1X5uXBvKMzZAMrjkRMJRM6Q]: https://pan.baidu.com/s/1X5uXBvKMzZAMrjkRMJRM6Q