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

原创 于 2021-04-28 15:02:36 发布
· 1.5k 阅读 · 12 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #css

前言

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

来吧，展示

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

首页（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">
				<!-- LOGO图片 -->
				<img src="images/nasa-logo.svg">
				<!-- 头部搜索框 -->
				<form action="" class="fr input">
					<input type="text" id="input" placeholder="Search">
					<span class="iconfont" id="glass">&#xe662;</span>
					<span class="iconfont" id="share">&#xe63c;</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">
				<!-- LOGO图片 -->
				<img src="images/nasa-logo.svg">
				<!-- 头部搜索框 -->
				<form action="" class="fr input">
					<input type="text" id="input" placeholder="Search">
					<span class="iconfont" id="glass">&#xe662;</span>
					<span class="iconfont" id="share">&#xe63c;</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">
				<!-- LOGO图片 -->
				<img src="images/nasa-logo.svg">
				<!-- 头部搜索框 -->
				<form action="" class="fr input">
					<input type="text" id="input" placeholder="Search">
					<span class="iconfont" id="glass">&#xe662;</span>
					<span class="iconfont" id="share">&#xe63c;</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
提取码：8888

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值