the html code is like this  ---- Gallery zoo zoo zoo   Z O O this is zoo elephant bear lion monkey panda   elephant × this is a elephant bear this is bear   lion this is lion     panda this is a panda   monkey this is a monkey ,its an animal live on the tree   ~ Information ~ Email: zoo@zoo.zz Phone: (111)-123-4567 can someone help me do a  css code to s quiring page format   ,and that add a bottoon ,when i press the botton ,it will run to the top of the html file ? and when hovered by the mouse pointer, display  the e-mail address at the bottom of the browser

Computer Networking: A Top-Down Approach (7th Edition)
7th Edition
ISBN:9780133594140
Author:James Kurose, Keith Ross
Publisher:James Kurose, Keith Ross
Chapter1: Computer Networks And The Internet
Section: Chapter Questions
Problem R1RQ: What is the difference between a host and an end system? List several different types of end...
icon
Related questions
Question
100%
the html code is like this 
----
<!DOCTYPE html>
<html lang="en" dir="ltr" id="top">
<head>
<metacharset="utf-8">
<title>Gallery zoo </title>

</head>

<body>
<header>
<h1>zoo </h1>
<h3id="zoop">zoo</h3>
</header>
<linkrel="stylesheet"type="text/css"href="n.css">
<scripttype="text/javascript"src="n.js"></script>
 
<body>

<scriptsrc="unit3.js"type="text/javascript"></script>
<headerid="top">
<h1> Z O O </h1>
<h3id="ZOO">this is zoo</h3>
</header>
<nav>
<header>
<ulstyle="list-style-type:none">
<li><ahref="#elephantSection">elephant</a></li>
<li><ahref="#bearSection">bear</a></li>
<li><ahref="#lionSection">lion</a></li>
<li><ahref="#monkeySection">monkey</a></li>
<li><ahref="#pandaSection">panda</a></li>
</ul>
</header>
</nav>


<articleclass="article-body">

<h6>&nbsp;</h6>

<!--1 photo-->
<sectionid="elephantSection">
<h4style="text-align:left">
<imgid="elephant"class="photo-left"src="x.jpg"alt="Image not found"width="550"><br><br>elephant
</h4>

<divid="myModal"class="modal">
<spanclass="close">&times;</span>
<imgclass="modal-content"id="img01">
<divid="caption"></div>
</div>

<p>this is a elephant </p>

<brstyle="clear: both">

<ahref="#top"title="Move to top"><imgclass="arrow"src="cn.jpg"alt="Image not found"width="40"></a>
<ahref="#bearSection"title="Move down"><imgclass="arrow"src="nc.jpg"alt="Image not found"width="40"></a>

</section>

<!--2 photo-->
<sectionid="bearSection">
<h4style="text-align:right">
<imgid="bear"class="photo-right"src="xl.png"alt="Image not found"width="550">
<br>bear</h4>
<pstyle="text-align:right">
<em> this is bear </em>

<brstyle="clear: both">

<ahref="#elephantSection"title="Move to top"><imgclass="arrow"src="cn.jpg"alt="Image not found"width="40"></a>
<ahref="#lionSection"title="Move down"><imgclass="arrow"src="nc.jpg"alt="Image not found"width="40"></a>
 
</section>

<!--3 photo-->
<sectionid="lionSection">
<h4style="text-align:left">
<imgid="lion"class="photo-left"src="xs.png"alt="Image not found"width="550">
<br>lion</h4>
<pstyle="text-align:left">
<em> this is lion </em>
 

<brstyle="clear: both">

<ahref="#bearSection"title="Move to top"><imgclass="arrow"src="cn.jpg"alt="Image not found"width="40"></a>
<ahref="#pandaSection"title="Move down"><imgclass="arrow"src="nc.jpg"alt="Image not found"width="40"></a>
 
</section>

<!-- 4 photo-->
<sectionid="pandaSection">
<h4style="text-align:right">
<imgid="panda"class="photo-right"src="xm.jpg"alt="Image not found"width="550">
<br><br>panda</h4>
<pstyle="text-align:right">
<em>this is a panda </em>

<brstyle="clear: both">
 
<ahref="#lionSection"title="Move to top"><imgclass="arrow"src="cn.jpg"alt="Image not found"width="40"></a>
<ahref="#monkeySection"title="Move down"><imgclass="arrow"src="nc.jpg"alt="Image not found"width="40"></a>

</section>

<!--5 photo-->
<sectionid="monkeySection">
<h4style="text-align:left">
<imgid="monkey"class="photo-left"src="xx.jpg"alt="Image not found"width="550">
<br><br>monkey </h4>
<em>this is a monkey ,its an animal live on the tree </em>

<brstyle="clear: both">

<ahref="#pandaSection"title="Move to top"><imgclass="arrow"src="cn.jpg"alt="Image not found"width="40"></a>
<ahref="#bottom"title="Move down"><imgclass="arrow"src="nc.jpg"alt="Image not found"width="40"></a>
<hrstyle="background-color: #CAC0C0; height: 2px; border: solid">

</section>
 
<section>
<h6style="text-align: center; margin-bottom: 3px;">~ Information ~</h6>
<pclass="information">
Email: <a href="zoo@zoo.zz" class="mail">zoo@zoo.zz</a><br>
Phone: (111)-123-4567</p>
<ahref="#top"title="Move to top"><imgclass="arrow"src="cn.png"alt="Image not found"width="40"></a>
</section>
</article>
</body>
</html>
can someone help me do a  css code to s quiring page format   ,and that add a bottoon ,when i press the botton ,it will run to the top of the html file ?
and when hovered by the mouse pointer, display  the e-mail address at the bottom of the browser
 
Expert Solution
steps

Step by step

Solved in 3 steps with 2 images

Blurred answer
Recommended textbooks for you
Computer Networking: A Top-Down Approach (7th Edi…
Computer Networking: A Top-Down Approach (7th Edi…
Computer Engineering
ISBN:
9780133594140
Author:
James Kurose, Keith Ross
Publisher:
PEARSON
Computer Organization and Design MIPS Edition, Fi…
Computer Organization and Design MIPS Edition, Fi…
Computer Engineering
ISBN:
9780124077263
Author:
David A. Patterson, John L. Hennessy
Publisher:
Elsevier Science
Network+ Guide to Networks (MindTap Course List)
Network+ Guide to Networks (MindTap Course List)
Computer Engineering
ISBN:
9781337569330
Author:
Jill West, Tamara Dean, Jean Andrews
Publisher:
Cengage Learning
Concepts of Database Management
Concepts of Database Management
Computer Engineering
ISBN:
9781337093422
Author:
Joy L. Starks, Philip J. Pratt, Mary Z. Last
Publisher:
Cengage Learning
Prelude to Programming
Prelude to Programming
Computer Engineering
ISBN:
9780133750423
Author:
VENIT, Stewart
Publisher:
Pearson Education
Sc Business Data Communications and Networking, T…
Sc Business Data Communications and Networking, T…
Computer Engineering
ISBN:
9781119368830
Author:
FITZGERALD
Publisher:
WILEY