因此，我正在制作有关计算机历史记录的网页，并且正在使用时间轴来显示计算机历史记录中发生的事件。现在，我正在使用导航栏，它没有完全扩展到页面的整个宽度，有点停留在90％左右。我认为这与我的时间表有关，但我真的不知道如何更改以及如何使其生效。有人可以帮我解决这个问题吗？
每当我将.BGradient的宽度更改为80％时，我仍然会遇到此问题。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>History of the Computer</title>
<style>
body {
margin: 0px;
font-family: 'Lato', sans-serif;
}
time {
font-weight: bold;
color: black;
font-size: 20px;
}
ul {
width: 100%;
}
.p1 {
position: center;
font-size: 20px;
color: black;
font-weight: bold;
padding: 20px 30px;
}
.shrink1{
margin-left: 0px;
}
.timeline ul li {
list-style-type: none;
position: relative;
width: 6px;
margin: 0 auto;
padding-top: 50px;
background: black;
}
.timeline ul li::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 30px;
height: 30px;
border-radius: 50%;
background: inherit;
}
.timeline ul li div {
position: relative;
bottom: 0;
width: 400px;
padding: 15px;
background: #rgba(223, 213, 213, 0.315);
}
.timeline ul li div::before {
content: '';
position: absolute;
bottom: 7px;
width: 0;
height: 0;
border-style: solid;
}
.timeline ul li:nth-child(odd) div {
left: 45px;
}
.timeline ul li:nth-child(odd) div::before {
left: -15px;
border-width: 8px 16px 8px 0;
border-color: transparent rgba(223, 213, 213, 0.315) transparent transparent;
}
.timeline ul li:nth-child(even) div {
left: -439px;
}
.timeline ul li:nth-child(even) div::before {
right: -15px;
border-width: 8px 0 8px 16px;
border-color: transparent transparent transparent rgba(223, 213, 213, 0.315);
}
.timeline ul li::after {
background: #fff;
transition: background .5s ease-in-out;
}
.timeline ul li.in-view::after {
background: rgba(223, 213, 213, 0.315);
}
.timeline ul li div {
visibility: hidden;
opacity: 0;
transition: all .5s ease-in-out;
}
.timeline ul li:nth-child(odd) div {
transform: translate3d(200px,0,0);
}
.timeline ul li:nth-child(even) div {
transform: translate3d(-200px,0,0);
}
.timeline ul li.in-view div {
transform: none;
visibility: visible;
opacity: 1;
}
.BGGradient {
background: no-repeat;
width: 95%;
height: 100%;
color: #fff;
background: linear-gradient(-45deg, #b9b9b9, #848787, #247dc6);
background-size: 400% 400%;
-webkit-animation: Gradient 30s ease infinite;
-moz-animation: Gradient 30s ease infinite;
animation: Gradient 30s ease infinite;
}
.topnav {
overflow: hidden;
background-color: rgba(0, 0, 0, 0.7);
color: white;
width: 100%;
}
.topnav a {
float: left;
display: block;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #4286f4;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: rgba(0, 0, 0, 0.7);
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
color: white;
}
.dropdown-content a {
float: none;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
color: white;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
.dropdown-content a:hover {
background-color: #555;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
@media screen and (max-width: 736px) {
.topnav a, .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 736px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
@media screen and (max-width: 900px) {
.timeline ul li div {
width: 250px;
}
.timeline ul li:nth-child(even) div {
left: -289px; /*250+45-6*/
}
}
@media screen and (max-width: 600px) {
.timeline ul li {
margin-left: 20px;
}
.timeline ul li div {
width: calc(100vw - 91px);
}
.timeline ul li:nth-child(even) div {
left: 45px;
}
.timeline ul li:nth-child(even) div::before {
left: -15px;
border-width: 8px 16px 8px 0;
border-color: transparent rgb(66, 116, 252) transparent transparent;
}
}
.iconbr {
width: 35px;
height: 5px;
background-color: rgba(0, 0, 0, 0.7);;
margin: 5px 0;
}
@-webkit-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
@-moz-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
@keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
</style>
</head>
<body class="BGGradient">
<nav>
<div class="topnav" id="myTopnav">
<a href="homepage.html">Home</a> <a>Hardware</a>
<div class="dropdown">
<button class="dropbtn">Software <i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
<a href="#">System Software</a> <a href="#">Application Software</a>
</div>
</div><a class="active">Types of computers</a> <a href="#about">History of computers</a> <a href="">Credits</a> <a class="icon" href="javascript:void(0);" onclick="navbar()" style="font-size:15px;">☰</a>
</div>
</nav>
<p class="p1"> The computer was born not for entertainment or email but out of a need to solve a serious number-crunching crisis. By 1880, the U.S. population had grown so large that it took more than seven years to tabulate the U.S. Census results. The government sought a faster way to get the job done, giving rise to punch-card based computers that took up entire rooms. Today, we carry more computing power on our smartphones than was available in these early models. The following brief history of computing is a timeline of how computers evolved from their humble beginnings to the machines of today that surf the Internet, play games and stream multimedia in addition to crunching numbers.</p>
<section class="timeline">
<ul>
<li>
<div>
<time>1801:</time> In France, Joseph Marie Jacquard invents a loom that uses punched wooden cards to automatically weave fabric designs. Early computers would use similar punch cards.
</div>
</li>
<li>
<div>
<time>1822:</time> English mathematician Charles Babbage conceives of a steam-driven calculating machine that would be able to compute tables of numbers. The project, funded by the English government, is a failure. More than a century later, however, the world's first computer was actually built.
</div>
</li>
<li>
<div>
<time>1890:</time> Herman Hollerith designs a punch card system to calculate the 1880 census, accomplishing the task in just three years and saving the government $5 million. He establishes a company that would ultimately become IBM.
</div>
</li>
<li>
<div>
<time>1936:</time> Alan Turing presents the notion of a universal machine, later called the Turing machine, capable of computing anything that is computable. The central concept of the modern computer was based on his ideas.
</div>
</li>
<li>
<div>
<time>1937:</time> J.V. Atanasoff, a professor of physics and mathematics at Iowa State University, attempts to build the first computer without gears, cams, belts or shafts.
</div>
</li>
<li>
<div>
<time>1939:</time> Hewlett-Packard is founded by David Packard and Bill Hewlett in a Palo Alto, California, garage, according to the Computer History Museum.
</div>
</li>
<li>
<div>
<time>1941:</time> Atanasoff and his graduate student, Clifford Berry, design a computer that can solve 29 equations simultaneously. This marks the first time a computer is able to store information on its main memory.
</div>
</li>
<li>
<div>
<time>1943-1944:</time> Two University of Pennsylvania professors, John Mauchly and J. Presper Eckert, build the Electronic Numerical Integrator and Calculator (ENIAC). Considered the grandfather of digital computers, it fills a 20-foot by 40-foot room and has 18,000 vacuum tubes.
</div>
</li>
<li>
<div>
<time>1946:</time> Mauchly and Presper leave the University of Pennsylvania and receive funding from the Census Bureau to build the UNIVAC, the first commercial computer for business and government applications.
</div>
</li>
<li>
<div>
<time>1947:</time> William Shockley, John Bardeen and Walter Brattain of Bell Laboratories invent the transistor. They discovered how to make an electric switch with solid materials and no need for a vacuum.
</div>
</li>
<li>
<div>
<time>1953:</time> Grace Hopper develops the first computer language, which eventually becomes known as COBOL. Thomas Johnson Watson Jr., son of IBM CEO Thomas Johnson Watson Sr., conceives the IBM 701 EDPM to help the United Nations keep tabs on Korea during the war.
</div>
</li>
<li>
<div>
<time>1954:</time> The FORTRAN programming language, an acronym for FORmula TRANslation, is developed by a team of programmers at IBM led by John Backus, according to the University of Michigan.
</div>
</li>
<li>
<div>
<time>1958:</time> Jack Kilby and Robert Noyce unveil the integrated circuit, known as the computer chip. Kilby was awarded the Nobel Prize in Physics in 2000 for his work.
</div>
</li>
<li>
<div>
<time>1964:</time> Douglas Engelbart shows a prototype of the modern computer, with a mouse and a graphical user interface (GUI). This marks the evolution of the computer from a specialized machine for scientists and mathematicians to technology that is more accessible to the general public.
</div>
</li>
<li>
<div>
<time>1969:</time> A group of developers at Bell Labs produce UNIX, an operating system that addressed compatibility issues. Written in the C programming language, UNIX was portable across multiple platforms and became the operating system of choice among mainframes at large companies and government entities. Due to the slow nature of the system, it never quite gained traction among home PC users.
</div>
</li>
<li>
<div>
<time>1970:</time> The newly formed Intel unveils the Intel 1103, the first Dynamic Access Memory (DRAM) chip.
</div>
</li>
<li>
<div>
<time>1971:</time> Alan Shugart leads a team of IBM engineers who invent the "floppy disk," allowing data to be shared among computers.
</div>
</li>
<li>
<div>
<time>1973:</time> Robert Metcalfe, a member of the research staff for Xerox, develops Ethernet for connecting multiple computers and other hardware.
</div>
</li>
<li>
<div>
<time>1974-1977:</time> A number of personal computers hit the market, including Scelbi & Mark-8 Altair, IBM 5100, Radio Shack's TRS-80 — affectionately known as the "Trash 80" — and the Commodore PET.
</div>
</li>
<li>
<div>
<time>1975:</time> The January issue of Popular Electronics magazine features the Altair 8080, described as the 'world's first minicomputer kit to rival commercial models.' Two "computer geeks," Paul Allen and Bill Gates, offer to write software for the Altair, using the new BASIC language. On April 4, after the success of this first endeavor, the two childhood friends form their own software company, Microsoft.
</div>
</li>
<li>
<div>
<time>1976:</time> Steve Jobs and Steve Wozniak start Apple Computers on April Fool's Day and roll out the Apple I, the first computer with a single-circuit board, according to Stanford University.
</div>
</li>
<li>
<div>
<time>1977:</time> Radio Shack's initial production run of the TRS-80 was just 3,000. It sold like crazy. For the first time, non-geeks could write programs and make a computer do what they wished.
</div>
</li>
<li>
<div>
<time>1977:</time> Jobs and Wozniak incorporate Apple and show the Apple II at the first West Coast Computer Faire. It offers color graphics and incorporates an audio cassette drive for storage.
</div>
</li>
<li>
<div>
<time>1978:</time> Accountants rejoice at the introduction of VisiCalc, the first computerized spreadsheet program.
</div>
</li>
<li>
<div>
<time>1979:</time> Word processing becomes a reality as MicroPro International releases WordStar. 'The defining change was to add margins and word wrap,' said creator Rob Barnaby in email to Mike Petrie in 2000. 'Additional changes included getting rid of command mode and adding a print function. I was the technical brains I figured out how to do it, and did it, and documented it. '
</div>
</li>
<li>
<div>
<time>1981:</time> The first IBM personal computer, code-named "Acorn," is introduced. It uses Microsoft's MS-DOS operating system. It has an Intel chip, two floppy disks and an optional color monitor. Sears & Roebuck and Computerland sell the machines, marking the first time a computer is available through outside distributors. It also popularizes the term PC.
</div>
</li>
<li>
<div>
<time>1983:</time> Apple's Lisa is the first personal computer with a GUI. It also features a drop-down menu and icons. It flops but eventually evolves into the Macintosh. The Gavilan SC is the first portable computer with the familiar flip form factor and the first to be marketed as a "laptop."
</div>
</li>
<li>
<div>
<time>1985:</time> Microsoft announces Windows, according to Encyclopedia Britannica. This was the company's response to Apple's GUI. Commodore unveils the Amiga 1000, which features advanced audio and video capabilities.
</div>
</li>
<li>
<div>
<time>1985:</time> The first dot-com domain name is registered on March 15, years before the World Wide Web would mark the formal beginning of Internet history. The Symbolics Computer Company, a small Massachusetts computer manufacturer, registers Symbolics.com. More than two years later, only 100 dot-coms had been registered.
</div>
</li>
<li>
<div>
<time>1986:</time> Compaq brings the Deskpro 386 to market. Its 32-bit architecture provides as speed comparable to mainframes.
</div>
</li>
<li>
<div>
<time>1990:</time> Tim Berners-Lee, a researcher at CERN, the high-energy physics laboratory in Geneva, develops HyperText Markup Language (HTML), giving rise to the World Wide Web.
</div>
</li>
<li>
<div>
<time>1993:</time> The Pentium microprocessor advances the use of graphics and music on PCs.
</div>
</li>
<li>
<div>
<time>1994:</time> PCs become gaming machines as "Command & Conquer," "Alone in the Dark 2," "Theme Park," "Magic Carpet," "Descent" and "Little Big Adventure" are among the games to hit the market.
</div>
</li>
<li>
<div>
<time>1996:</time> Sergey Brin and Larry Page develop the Google search engine at Stanford University.
</div>
</li>
<li>
<div>
<time>1997:</time> Microsoft invests $150 million in Apple, which was struggling at the time, ending Apple's court case against Microsoft in which it alleged that Microsoft copied the "look and feel" of its operating system.
</div>
</li>
<li>
<div>
<time>1999:</time> The term Wi-Fi becomes part of the computing language and users begin connecting to the Internet without wires.
</div>
</li>
<li>
<div>
<time>2001:</time> Apple unveils the Mac OS X operating system, which provides protected memory architecture and pre-emptive multi-tasking, among other benefits. Not to be outdone, Microsoft rolls out Windows XP, which has a significantly redesigned GUI.
</div>
</li>
<li>
<div>
<time>2003:</time> The first 64-bit processor, AMD's Athlon 64, becomes available to the consumer market.
</div>
</li>
<li>
<div>
<time>2004:</time> Mozilla's Firefox 1.0 challenges Microsoft's Internet Explorer, the dominant Web browser. Facebook, a social networking site, launches.
</div>
</li>
<li>
<div>
<time>2005:</time> YouTube, a video sharing service, is founded. Google acquires Android, a Linux-based mobile phone operating system.
</div>
</li>
<li>
<div>
<time>2006:</time> Apple introduces the MacBook Pro, its first Intel-based, dual-core mobile computer, as well as an Intel-based iMac. Nintendo's Wii game console hits the market.
</div>
</li>
<li>
<div>
<time>2007:</time> The iPhone brings many computer functions to the smartphone.
</div>
</li>
<li>
<div>
<time>2009:</time> Microsoft launches Windows 7, which offers the ability to pin applications to the taskbar and advances in touch and handwriting recognition, among other features.
</div>
</li>
<li>
<div>
<time>2010:</time> Apple unveils the iPad, changing the way consumers view media and jumpstarting the dormant tablet computer segment.
</div>
</li>
<li>
<div>
<time>2011:</time> Google releases the Chromebook, a laptop that runs the Google Chrome OS.
</div>
</li>
<li>
<div>
<time>2012:</time> Facebook gains 1 billion users on October 4..
</div>
</li>
<li>
<div>
<time>2015:</time> Apple releases the Apple Watch. Microsoft releases Windows 10.
</div>
</li>
<li>
<div>
<time>2016:</time> The first reprogrammable quantum computer was created. "Until now, there hasn't been any quantum-computing platform that had the capability to program new algorithms into their system. They're usually each tailored to attack a particular algorithm," said study lead author Shantanu Debnath, a quantum physicist and optical engineer at the University of Maryland, College Park.
</div>
</li>
<li>
<div>
<time>2017:</time> The Defense Advanced Research Projects Agency (DARPA) is developing a new "Molecular Informatics" program that uses molecules as computers. "Chemistry offers a rich set of properties that we may be able to harness for rapid, scalable information storage and processing," Anne Fischer, program manager in DARPA's Defense Sciences Office, said in a statement. "Millions of molecules exist, and each molecule has a unique three-dimensional atomic structure as well as variables such as shape, size, or even color. This richness provides a vast design space for exploring novel and multi-value ways to encode and process data beyond the 0s and 1s of current logic-based, digital architectures."
</div>
</li>
</ul>
</section>
</div>
<script>
function isElementInViewport(el) {
var rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
var items = document.querySelectorAll(".timeline li");
// code for the isElementInViewport function
function callbackFunc() {
for (var i = 0; i < items.length; i++) {
if (isElementInViewport(items[i])) {
items[i].classList.add("in-view");
}
}
}
window.addEventListener("load", callbackFunc);
window.addEventListener("scroll", callbackFunc);
function navbar() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
答案 0 :(得分：2)
请更改.BGGradient的宽度，例如：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>History of the Computer</title>
<style>
body {
margin: 0px;
font-family: 'Lato', sans-serif;
}
time {
font-weight: bold;
color: black;
font-size: 20px;
}
ul {
width: 100%;
}
.p1 {
position: center;
font-size: 20px;
color: black;
font-weight: bold;
padding: 20px 30px;
}
.shrink1{
margin-left: 0px;
}
.timeline ul li {
list-style-type: none;
position: relative;
width: 6px;
margin: 0 auto;
padding-top: 50px;
background: black;
}
.timeline ul li::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 30px;
height: 30px;
border-radius: 50%;
background: inherit;
}
.timeline ul li div {
position: relative;
bottom: 0;
width: 400px;
padding: 15px;
background: #rgba(223, 213, 213, 0.315);
}
.timeline ul li div::before {
content: '';
position: absolute;
bottom: 7px;
width: 0;
height: 0;
border-style: solid;
}
.timeline ul li:nth-child(odd) div {
left: 45px;
}
.timeline ul li:nth-child(odd) div::before {
left: -15px;
border-width: 8px 16px 8px 0;
border-color: transparent rgba(223, 213, 213, 0.315) transparent transparent;
}
.timeline ul li:nth-child(even) div {
left: -439px;
}
.timeline ul li:nth-child(even) div::before {
right: -15px;
border-width: 8px 0 8px 16px;
border-color: transparent transparent transparent rgba(223, 213, 213, 0.315);
}
.timeline ul li::after {
background: #fff;
transition: background .5s ease-in-out;
}
.timeline ul li.in-view::after {
background: rgba(223, 213, 213, 0.315);
}
.timeline ul li div {
visibility: hidden;
opacity: 0;
transition: all .5s ease-in-out;
}
.timeline ul li:nth-child(odd) div {
transform: translate3d(200px,0,0);
}
.timeline ul li:nth-child(even) div {
transform: translate3d(-200px,0,0);
}
.timeline ul li.in-view div {
transform: none;
visibility: visible;
opacity: 1;
}
.BGGradient {
background: no-repeat;
width: 100%;
height: 100%;
color: #fff;
background: linear-gradient(-45deg, #b9b9b9, #848787, #247dc6);
background-size: 400% 400%;
-webkit-animation: Gradient 30s ease infinite;
-moz-animation: Gradient 30s ease infinite;
animation: Gradient 30s ease infinite;
}
.topnav {
overflow: hidden;
background-color: rgba(0, 0, 0, 0.7);
color: white;
width: 100%;
}
.topnav a {
float: left;
display: block;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #4286f4;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: rgba(0, 0, 0, 0.7);
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
color: white;
}
.dropdown-content a {
float: none;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
color: white;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
.dropdown-content a:hover {
background-color: #555;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
@media screen and (max-width: 736px) {
.topnav a, .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 736px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
@media screen and (max-width: 900px) {
.timeline ul li div {
width: 250px;
}
.timeline ul li:nth-child(even) div {
left: -289px; /*250+45-6*/
}
}
@media screen and (max-width: 600px) {
.timeline ul li {
margin-left: 20px;
}
.timeline ul li div {
width: calc(100vw - 91px);
}
.timeline ul li:nth-child(even) div {
left: 45px;
}
.timeline ul li:nth-child(even) div::before {
left: -15px;
border-width: 8px 16px 8px 0;
border-color: transparent rgb(66, 116, 252) transparent transparent;
}
}
.iconbr {
width: 35px;
height: 5px;
background-color: rgba(0, 0, 0, 0.7);;
margin: 5px 0;
}
@-webkit-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
@-moz-keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
@keyframes Gradient {
0% {
background-position: 0% 50%
}
50% {
background-position: 100% 50%
}
100% {
background-position: 0% 50%
}
}
</style>
</head>
<body class="BGGradient">
<nav>
<div class="topnav" id="myTopnav">
<a href="homepage.html">Home</a> <a>Hardware</a>
<div class="dropdown">
<button class="dropbtn">Software <i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
<a href="#">System Software</a> <a href="#">Application Software</a>
</div>
</div><a class="active">Types of computers</a> <a href="#about">History of computers</a> <a href="">Credits</a> <a class="icon" href="javascript:void(0);" onclick="navbar()" style="font-size:15px;">☰</a>
</div>
</nav>
<p class="p1"> The computer was born not for entertainment or email but out of a need to solve a serious number-crunching crisis. By 1880, the U.S. population had grown so large that it took more than seven years to tabulate the U.S. Census results. The government sought a faster way to get the job done, giving rise to punch-card based computers that took up entire rooms. Today, we carry more computing power on our smartphones than was available in these early models. The following brief history of computing is a timeline of how computers evolved from their humble beginnings to the machines of today that surf the Internet, play games and stream multimedia in addition to crunching numbers.</p>
<section class="timeline">
<ul>
<li>
<div>
<time>1801:</time> In France, Joseph Marie Jacquard invents a loom that uses punched wooden cards to automatically weave fabric designs. Early computers would use similar punch cards.
</div>
</li>
<li>
<div>
<time>1822:</time> English mathematician Charles Babbage conceives of a steam-driven calculating machine that would be able to compute tables of numbers. The project, funded by the English government, is a failure. More than a century later, however, the world's first computer was actually built.
</div>
</li>
<li>
<div>
<time>1890:</time> Herman Hollerith designs a punch card system to calculate the 1880 census, accomplishing the task in just three years and saving the government $5 million. He establishes a company that would ultimately become IBM.
</div>
</li>
<li>
<div>
<time>1936:</time> Alan Turing presents the notion of a universal machine, later called the Turing machine, capable of computing anything that is computable. The central concept of the modern computer was based on his ideas.
</div>
</li>
<li>
<div>
<time>1937:</time> J.V. Atanasoff, a professor of physics and mathematics at Iowa State University, attempts to build the first computer without gears, cams, belts or shafts.
</div>
</li>
<li>
<div>
<time>1939:</time> Hewlett-Packard is founded by David Packard and Bill Hewlett in a Palo Alto, California, garage, according to the Computer History Museum.
</div>
</li>
<li>
<div>
<time>1941:</time> Atanasoff and his graduate student, Clifford Berry, design a computer that can solve 29 equations simultaneously. This marks the first time a computer is able to store information on its main memory.
</div>
</li>
<li>
<div>
<time>1943-1944:</time> Two University of Pennsylvania professors, John Mauchly and J. Presper Eckert, build the Electronic Numerical Integrator and Calculator (ENIAC). Considered the grandfather of digital computers, it fills a 20-foot by 40-foot room and has 18,000 vacuum tubes.
</div>
</li>
<li>
<div>
<time>1946:</time> Mauchly and Presper leave the University of Pennsylvania and receive funding from the Census Bureau to build the UNIVAC, the first commercial computer for business and government applications.
</div>
</li>
<li>
<div>
<time>1947:</time> William Shockley, John Bardeen and Walter Brattain of Bell Laboratories invent the transistor. They discovered how to make an electric switch with solid materials and no need for a vacuum.
</div>
</li>
<li>
<div>
<time>1953:</time> Grace Hopper develops the first computer language, which eventually becomes known as COBOL. Thomas Johnson Watson Jr., son of IBM CEO Thomas Johnson Watson Sr., conceives the IBM 701 EDPM to help the United Nations keep tabs on Korea during the war.
</div>
</li>
<li>
<div>
<time>1954:</time> The FORTRAN programming language, an acronym for FORmula TRANslation, is developed by a team of programmers at IBM led by John Backus, according to the University of Michigan.
</div>
</li>
<li>
<div>
<time>1958:</time> Jack Kilby and Robert Noyce unveil the integrated circuit, known as the computer chip. Kilby was awarded the Nobel Prize in Physics in 2000 for his work.
</div>
</li>
<li>
<div>
<time>1964:</time> Douglas Engelbart shows a prototype of the modern computer, with a mouse and a graphical user interface (GUI). This marks the evolution of the computer from a specialized machine for scientists and mathematicians to technology that is more accessible to the general public.
</div>
</li>
<li>
<div>
<time>1969:</time> A group of developers at Bell Labs produce UNIX, an operating system that addressed compatibility issues. Written in the C programming language, UNIX was portable across multiple platforms and became the operating system of choice among mainframes at large companies and government entities. Due to the slow nature of the system, it never quite gained traction among home PC users.
</div>
</li>
<li>
<div>
<time>1970:</time> The newly formed Intel unveils the Intel 1103, the first Dynamic Access Memory (DRAM) chip.
</div>
</li>
<li>
<div>
<time>1971:</time> Alan Shugart leads a team of IBM engineers who invent the "floppy disk," allowing data to be shared among computers.
</div>
</li>
<li>
<div>
<time>1973:</time> Robert Metcalfe, a member of the research staff for Xerox, develops Ethernet for connecting multiple computers and other hardware.
</div>
</li>
<li>
<div>
<time>1974-1977:</time> A number of personal computers hit the market, including Scelbi & Mark-8 Altair, IBM 5100, Radio Shack's TRS-80 — affectionately known as the "Trash 80" — and the Commodore PET.
</div>
</li>
<li>
<div>
<time>1975:</time> The January issue of Popular Electronics magazine features the Altair 8080, described as the 'world's first minicomputer kit to rival commercial models.' Two "computer geeks," Paul Allen and Bill Gates, offer to write software for the Altair, using the new BASIC language. On April 4, after the success of this first endeavor, the two childhood friends form their own software company, Microsoft.
</div>
</li>
<li>
<div>
<time>1976:</time> Steve Jobs and Steve Wozniak start Apple Computers on April Fool's Day and roll out the Apple I, the first computer with a single-circuit board, according to Stanford University.
</div>
</li>
<li>
<div>
<time>1977:</time> Radio Shack's initial production run of the TRS-80 was just 3,000. It sold like crazy. For the first time, non-geeks could write programs and make a computer do what they wished.
</div>
</li>
<li>
<div>
<time>1977:</time> Jobs and Wozniak incorporate Apple and show the Apple II at the first West Coast Computer Faire. It offers color graphics and incorporates an audio cassette drive for storage.
</div>
</li>
<li>
<div>
<time>1978:</time> Accountants rejoice at the introduction of VisiCalc, the first computerized spreadsheet program.
</div>
</li>
<li>
<div>
<time>1979:</time> Word processing becomes a reality as MicroPro International releases WordStar. 'The defining change was to add margins and word wrap,' said creator Rob Barnaby in email to Mike Petrie in 2000. 'Additional changes included getting rid of command mode and adding a print function. I was the technical brains I figured out how to do it, and did it, and documented it. '
</div>
</li>
<li>
<div>
<time>1981:</time> The first IBM personal computer, code-named "Acorn," is introduced. It uses Microsoft's MS-DOS operating system. It has an Intel chip, two floppy disks and an optional color monitor. Sears & Roebuck and Computerland sell the machines, marking the first time a computer is available through outside distributors. It also popularizes the term PC.
</div>
</li>
<li>
<div>
<time>1983:</time> Apple's Lisa is the first personal computer with a GUI. It also features a drop-down menu and icons. It flops but eventually evolves into the Macintosh. The Gavilan SC is the first portable computer with the familiar flip form factor and the first to be marketed as a "laptop."
</div>
</li>
<li>
<div>
<time>1985:</time> Microsoft announces Windows, according to Encyclopedia Britannica. This was the company's response to Apple's GUI. Commodore unveils the Amiga 1000, which features advanced audio and video capabilities.
</div>
</li>
<li>
<div>
<time>1985:</time> The first dot-com domain name is registered on March 15, years before the World Wide Web would mark the formal beginning of Internet history. The Symbolics Computer Company, a small Massachusetts computer manufacturer, registers Symbolics.com. More than two years later, only 100 dot-coms had been registered.
</div>
</li>
<li>
<div>
<time>1986:</time> Compaq brings the Deskpro 386 to market. Its 32-bit architecture provides as speed comparable to mainframes.
</div>
</li>
<li>
<div>
<time>1990:</time> Tim Berners-Lee, a researcher at CERN, the high-energy physics laboratory in Geneva, develops HyperText Markup Language (HTML), giving rise to the World Wide Web.
</div>
</li>
<li>
<div>
<time>1993:</time> The Pentium microprocessor advances the use of graphics and music on PCs.
</div>
</li>
<li>
<div>
<time>1994:</time> PCs become gaming machines as "Command & Conquer," "Alone in the Dark 2," "Theme Park," "Magic Carpet," "Descent" and "Little Big Adventure" are among the games to hit the market.
</div>
</li>
<li>
<div>
<time>1996:</time> Sergey Brin and Larry Page develop the Google search engine at Stanford University.
</div>
</li>
<li>
<div>
<time>1997:</time> Microsoft invests $150 million in Apple, which was struggling at the time, ending Apple's court case against Microsoft in which it alleged that Microsoft copied the "look and feel" of its operating system.
</div>
</li>
<li>
<div>
<time>1999:</time> The term Wi-Fi becomes part of the computing language and users begin connecting to the Internet without wires.
</div>
</li>
<li>
<div>
<time>2001:</time> Apple unveils the Mac OS X operating system, which provides protected memory architecture and pre-emptive multi-tasking, among other benefits. Not to be outdone, Microsoft rolls out Windows XP, which has a significantly redesigned GUI.
</div>
</li>
<li>
<div>
<time>2003:</time> The first 64-bit processor, AMD's Athlon 64, becomes available to the consumer market.
</div>
</li>
<li>
<div>
<time>2004:</time> Mozilla's Firefox 1.0 challenges Microsoft's Internet Explorer, the dominant Web browser. Facebook, a social networking site, launches.
</div>
</li>
<li>
<div>
<time>2005:</time> YouTube, a video sharing service, is founded. Google acquires Android, a Linux-based mobile phone operating system.
</div>
</li>
<li>
<div>
<time>2006:</time> Apple introduces the MacBook Pro, its first Intel-based, dual-core mobile computer, as well as an Intel-based iMac. Nintendo's Wii game console hits the market.
</div>
</li>
<li>
<div>
<time>2007:</time> The iPhone brings many computer functions to the smartphone.
</div>
</li>
<li>
<div>
<time>2009:</time> Microsoft launches Windows 7, which offers the ability to pin applications to the taskbar and advances in touch and handwriting recognition, among other features.
</div>
</li>
<li>
<div>
<time>2010:</time> Apple unveils the iPad, changing the way consumers view media and jumpstarting the dormant tablet computer segment.
</div>
</li>
<li>
<div>
<time>2011:</time> Google releases the Chromebook, a laptop that runs the Google Chrome OS.
</div>
</li>
<li>
<div>
<time>2012:</time> Facebook gains 1 billion users on October 4..
</div>
</li>
<li>
<div>
<time>2015:</time> Apple releases the Apple Watch. Microsoft releases Windows 10.
</div>
</li>
<li>
<div>
<time>2016:</time> The first reprogrammable quantum computer was created. "Until now, there hasn't been any quantum-computing platform that had the capability to program new algorithms into their system. They're usually each tailored to attack a particular algorithm," said study lead author Shantanu Debnath, a quantum physicist and optical engineer at the University of Maryland, College Park.
</div>
</li>
<li>
<div>
<time>2017:</time> The Defense Advanced Research Projects Agency (DARPA) is developing a new "Molecular Informatics" program that uses molecules as computers. "Chemistry offers a rich set of properties that we may be able to harness for rapid, scalable information storage and processing," Anne Fischer, program manager in DARPA's Defense Sciences Office, said in a statement. "Millions of molecules exist, and each molecule has a unique three-dimensional atomic structure as well as variables such as shape, size, or even color. This richness provides a vast design space for exploring novel and multi-value ways to encode and process data beyond the 0s and 1s of current logic-based, digital architectures."
</div>
</li>
</ul>
</section>
</div>
<script>
function isElementInViewport(el) {
var rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
var items = document.querySelectorAll(".timeline li");
// code for the isElementInViewport function
function callbackFunc() {
for (var i = 0; i < items.length; i++) {
if (isElementInViewport(items[i])) {
items[i].classList.add("in-view");
}
}
}
window.addEventListener("load", callbackFunc);
window.addEventListener("scroll", callbackFunc);
function navbar() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
答案 1 :(得分：0)
您的身体有一个名为BGGradient的类，它将宽度设置为95％