简体   繁体   English

需要帮助修复页面格式的 html 代码

[英]need help for fix code in html for page format

hello i need my page to look like this:你好,我需要我的页面看起来像这样:这就是我想要做的

but this is what i get:但这就是我得到的:在此处输入图片说明

That's the whole page.这就是整个页面。 I hope I can get help with it.我希望我能得到帮助。 I have a problem with layout and color of navigation and the picture up is at the top left.我的导航布局和颜色有问题,图片在左上角。

I tried to work at it and took hours and i cant reach any result with it.我试图在它上面工作并花了几个小时,但我无法用它达到任何结果。

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>Digital Cloud</title> <style type="text/css"> #container{ width: 800px; height: 700px; background-color: white; margin-left: auto; margin-right: auto; position: fixed; top: 20%; left: 30%; } #logo{ margin-top:15px; width: 200px; height: 200px; } #ending{ float: right; text-align: center; margin: 120px; } #navigation{ background-color: #3c99dc; float:left; margin-left: 5px; margin-bottom: 15px; font-size: 20px; width: 190px; height: 50px; text-align: center; } #content{ text-align: center; } #text{ float: left; margin-bottom: 10px; } img{ width: 260px; height: 150px; float: left; } #texting{ width: 258px; height: 200px; float: left; margin-left: 6px; margin-bottom: 7px; margin-left: 3px; } #description{ text-align: center; font-size: 14px; } </style> </head> <body> <div id="logo"> <h1><img src="images/logo.jpeg" alt="logo" /></h1> </div> <div id="container"> <div id="navigation"> <div id="nav01"> <nav> <a href="#"> Business </a></nav> </div> </div> <div id="navigation"> <div id="nav01"> <nav> <a href="#"> Pricing </a></nav> </div> </div> <div id="navigation"> <div id="nav01"> <nav> <a href="#"> Community </a> </nav> </div> </div> <div id="navigation"> <div id="nav01"> <nav> <a href="#"> Help </a> </nav> </div> </div> <div id="content"> <h1>Droplets</h1> <p>We rent out easy-to-deploy and resizable cloud servers.</p> <h2>Deploy in 55 seconds</h2> </div> <div id="textimg"> <div id="texting"> <h3>1. Select an image or app</h3> <p><img src="images/image.jpeg" alt="Representative picture of server's image" /></p> <div id="description"> <p>Choose from our library of distros and apps, or create a Droplet from a snapshot.</p> </div> </div> <div id="texting"> <h3>2. Choose a size</h3> <p><img src="images/size.jpeg" alt="Representative picture of server's size" /></p> <div id="description"> <p>Select a Droplet size based on the resources you need. You can resize at any time from the control panel.</p> </div></div> <div id="texting"> <h3>3. Select a region</h3> <p><img src="images/region.jpeg" alt="Representative picture of server's region" /></p> <div id="description"> <p>Deploy your Droplet to any of our datacenter locations around the world.</p> </div> </div> </div> <div id="ending"> <em>48,087,734 DROPLETS LAUNCHED</em> <em>&copy; COPYRIGHT 2017 DIGITAL CLOUD INC.</em> </div> </body> </html>

hello i need my page to look like this:你好,我需要我的页面看起来像这样:这就是我想要做的

but this is what i get:但这就是我得到的:在此处输入图片说明

That's the whole page.这就是整个页面。 I hope I can get help with it.我希望我能得到帮助。 I have a problem with layout and color of navigation and the picture up is at the top left.我的导航布局和颜色有问题,图片在左上角。

I tried to work at it and took hours and i cant reach any result with it.我试图在它上面工作并花了几个小时,但我无法用它达到任何结果。

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>Digital Cloud</title> <style type="text/css"> #container{ width: 800px; height: 700px; background-color: white; margin-left: auto; margin-right: auto; position: fixed; top: 20%; left: 30%; } #logo{ margin-top:15px; width: 200px; height: 200px; } #ending{ float: right; text-align: center; margin: 120px; } #navigation{ background-color: #3c99dc; float:left; margin-left: 5px; margin-bottom: 15px; font-size: 20px; width: 190px; height: 50px; text-align: center; } #content{ text-align: center; } #text{ float: left; margin-bottom: 10px; } img{ width: 260px; height: 150px; float: left; } #texting{ width: 258px; height: 200px; float: left; margin-left: 6px; margin-bottom: 7px; margin-left: 3px; } #description{ text-align: center; font-size: 14px; } </style> </head> <body> <div id="logo"> <h1><img src="images/logo.jpeg" alt="logo" /></h1> </div> <div id="container"> <div id="navigation"> <div id="nav01"> <nav> <a href="#"> Business </a></nav> </div> </div> <div id="navigation"> <div id="nav01"> <nav> <a href="#"> Pricing </a></nav> </div> </div> <div id="navigation"> <div id="nav01"> <nav> <a href="#"> Community </a> </nav> </div> </div> <div id="navigation"> <div id="nav01"> <nav> <a href="#"> Help </a> </nav> </div> </div> <div id="content"> <h1>Droplets</h1> <p>We rent out easy-to-deploy and resizable cloud servers.</p> <h2>Deploy in 55 seconds</h2> </div> <div id="textimg"> <div id="texting"> <h3>1. Select an image or app</h3> <p><img src="images/image.jpeg" alt="Representative picture of server's image" /></p> <div id="description"> <p>Choose from our library of distros and apps, or create a Droplet from a snapshot.</p> </div> </div> <div id="texting"> <h3>2. Choose a size</h3> <p><img src="images/size.jpeg" alt="Representative picture of server's size" /></p> <div id="description"> <p>Select a Droplet size based on the resources you need. You can resize at any time from the control panel.</p> </div></div> <div id="texting"> <h3>3. Select a region</h3> <p><img src="images/region.jpeg" alt="Representative picture of server's region" /></p> <div id="description"> <p>Deploy your Droplet to any of our datacenter locations around the world.</p> </div> </div> </div> <div id="ending"> <em>48,087,734 DROPLETS LAUNCHED</em> <em>&copy; COPYRIGHT 2017 DIGITAL CLOUD INC.</em> </div> </body> </html>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM