我是网页设计新手（仅一周）。 我正在构建我的网站，并一直试图模仿本网站采用Desired Format的方法
他们将整个网站集中在一起，并将所有内容都放在一个中心位置。 我还在学习，所以我假设他们使用的是div并简单地将所有内容都放在相对于该位置的内部。
我这样做的尝试是这样的：
我将边框添加到我的横幅中，应该是我的“侧边栏”角色，以更好地展示他们的位置。 我希望角色的位置相对于横幅的最左侧，以便它看起来像“在线”并且像上面的网站示例一样居中。
我很确定我这样做的方式很糟糕，或者老实说，不正确，但我愿意学习并学到很多东西！
有谁知道网站示例使用了什么？ 或者他们使用的方法？ 我想查看它们并学习这些风格。
有没有人知道我如何解决自己的网站问题，侧边字符的div位置相对于横幅的最左边界？
这是我的HTML / CSS到目前为止
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <title></title> <head> <style type="text/css"> /*BACKGROUND IMAGE*/ body { margin: 0; background-image: url("background5.png"); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-position: center; padding: 1px; } div#banner { width: 100%; height: 100%; } .nav-bar { list-style: none; margin: 0 auto; padding: 1px; width: 525px; } ul#nav-bar li { display: inline-block; } ul#nav-bar li a { text-decoration: underline; padding: 10px 0; width: 200px; margin: 0 1%; background: #25aee4; color: black; float: left; text-align: center; border-left: 2px solid black; border-radius: 5px; } div#sidebar { border: 20px; } </style> </head> <body> <div id="banner"> <center> <img src="owiFull.png" width="1150" height="170" alt="banner" border="1px"> </center> </div> <div class="navigation"> <center> <ul id="nav-bar"> <li> <a href="index.html">Home</a> </li> <li> <a href="about.html">About Us</a> </li> <li> <a href="about.html">Current Projects</a> </li> <li> <a href="about.html">Contact</a> </li> </ul> </center> </div> <div id= "sideBar"> <img src="pixelSideBar.png" border="1px"> </div> </body> </html>我感谢任何花时间教学和帮助的人！
I am new to webpage design (only a week in). I am building my website and have been trying to mimic the approach that this website took Desired Format
They have their entire website centered and all of their content in that one center piece. I am still learning so I assumed what they used was a div and simply made all of the content inside relative to the location.
My attempt at doing this is this:
I added the borders to my banner and what is supposed to be my "side bar" character to show their positions better. I would like the characters position relative to the far left side of the banner so that it looks "in line" and centered like the website example above.
I am very sure that the way I am doing this is bad or , honestly, incorrect but I am willing to learn and have learned alot!
Does anyone know what the website example used? Or the methods they used? I would like to look them up and learn those styles.
Does anyone know how I can fix my own website issue with having the div location of the side character relative to the far left border of the banner?
Here is my HTML/CSS so far
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <title></title> <head> <style type="text/css"> /*BACKGROUND IMAGE*/ body { margin: 0; background-image: url("background5.png"); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-position: center; padding: 1px; } div#banner { width: 100%; height: 100%; } .nav-bar { list-style: none; margin: 0 auto; padding: 1px; width: 525px; } ul#nav-bar li { display: inline-block; } ul#nav-bar li a { text-decoration: underline; padding: 10px 0; width: 200px; margin: 0 1%; background: #25aee4; color: black; float: left; text-align: center; border-left: 2px solid black; border-radius: 5px; } div#sidebar { border: 20px; } </style> </head> <body> <div id="banner"> <center> <img src="owiFull.png" width="1150" height="170" alt="banner" border="1px"> </center> </div> <div class="navigation"> <center> <ul id="nav-bar"> <li> <a href="index.html">Home</a> </li> <li> <a href="about.html">About Us</a> </li> <li> <a href="about.html">Current Projects</a> </li> <li> <a href="about.html">Contact</a> </li> </ul> </center> </div> <div id= "sideBar"> <img src="pixelSideBar.png" border="1px"> </div> </body> </html>I appreciate anyone who takes the time to teach and help!
最满意答案
这就是所谓的盒装布局。 将所有内容包装在一个大容器中，并定义框的宽度，然后相对于此容器调整内容宽度。
如果你正在开始建立一个网站，一件好事就是开始学习bootstrap或类似的框架，这将帮助你快速开始布局和内容的定位而不需要太多的努力（网格系统很棒）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <title></title> <head> <style type="text/css"> /*BACKGROUND IMAGE*/ body { margin: 0; background-image: url("background5.png"); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-position: center; padding: 1px; } div#banner { width: 100%; height: 100%; } .nav-bar { list-style: none; margin: 0 auto; padding: 1px; width: 525px; } ul#nav-bar li { display: inline-block; } ul#nav-bar li a { text-decoration: underline; padding: 10px 0; width: 200px; margin: 0 1%; background: #25aee4; color: black; float: left; text-align: center; border-left: 2px solid black; border-radius: 5px; } div#sidebar { border: 20px; } /* Added style for the box */ .boxed { width:80%; margin-left:10%; } </style> </head> <body> <!-- We wrap everything in the box and set the sizes according to this box --> <div class="boxed"> <div id="banner"> <center> <img src="owiFull.png" width="1150" height="170" alt="banner" border="1px"> </center> </div> <div class="navigation"> <center> <ul id="nav-bar"> <li> <a href="index.html">Home</a> </li> <li> <a href="about.html">About Us</a> </li> <li> <a href="about.html">Current Projects</a> </li> <li> <a href="about.html">Contact</a> </li> </ul> </center> </div> <div id= "sideBar"> <img src="pixelSideBar.png" border="1px"> </div> <!-- END OF THE WRAPPER --> </div> </body> </html>This is the so called, boxed layout. You wrap all your content in one big container with the width of the box defined, and then you adjust your content width relative to this container.
If you're starting making a website, a good thing is to start learning bootstrap or similar framework, wich will help you to get quickly started with layouts and positioning of the content without too much effort (the grid system is awesome).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <title></title> <head> <style type="text/css"> /*BACKGROUND IMAGE*/ body { margin: 0; background-image: url("background5.png"); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-position: center; padding: 1px; } div#banner { width: 100%; height: 100%; } .nav-bar { list-style: none; margin: 0 auto; padding: 1px; width: 525px; } ul#nav-bar li { display: inline-block; } ul#nav-bar li a { text-decoration: underline; padding: 10px 0; width: 200px; margin: 0 1%; background: #25aee4; color: black; float: left; text-align: center; border-left: 2px solid black; border-radius: 5px; } div#sidebar { border: 20px; } /* Added style for the box */ .boxed { width:80%; margin-left:10%; } </style> </head> <body> <!-- We wrap everything in the box and set the sizes according to this box --> <div class="boxed"> <div id="banner"> <center> <img src="owiFull.png" width="1150" height="170" alt="banner" border="1px"> </center> </div> <div class="navigation"> <center> <ul id="nav-bar"> <li> <a href="index.html">Home</a> </li> <li> <a href="about.html">About Us</a> </li> <li> <a href="about.html">Current Projects</a> </li> <li> <a href="about.html">Contact</a> </li> </ul> </center> </div> <div id= "sideBar"> <img src="pixelSideBar.png" border="1px"> </div> <!-- END OF THE WRAPPER --> </div> </body> </html>更多推荐
px,网站,电脑培训,计算机培训,IT培训"/> <meta name="description" conte
发布评论