我是网页设计新手(仅一周)。我正在构建我的网站,并一直试图模仿本网站采用的方法Desired Format
他们将整个网站集中在一起,并将其所有内容都放在一个中心位置。我还在学习,所以我假设他们使用的是div
并简单地将所有内容相对于该位置。
我在我的横幅上添加了边框,应该是我的"侧边栏"性格更好地展示自己的位置。我希望角色的位置相对于横幅的最左侧,以便它看起来"在线"并且像上面的网站示例一样集中。
我非常肯定我这样做的方式很糟糕,或者老实说,不正确,但我愿意学习并学到很多东西!
有谁知道网站示例使用了什么?或者他们的方法 用过的?我想查看它们并了解这些风格。
有没有人知道如何解决我自己的网站问题 {/ 1}}侧面角色相对于最左边界的位置 横幅?
到目前为止,这是我的HTML / CSS
div
我感谢任何花时间教导和帮助的人!
答案 0 :(得分:2)
这就是所谓的盒装布局。将所有内容包装在一个大容器中,并定义框的宽度,然后相对于此容器调整内容宽度。
如果你开始创建一个网站,一件好事就是开始学习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>
答案 1 :(得分:1)
我在第一次Internet search我找到了一个。请记住,它甚至没有一点响应,但你是一周,所以这是一个很好的做法。我会在左侧容器中使用html5。
<style>
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section {
width:350px;
float:left;
padding:10px;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
London<br>
Paris<br>
Tokyo
</div>
<div id="section">
<h1>London</h1>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.</p>
</div>
<div id="footer">
Copyright © W3Schools.com
</div>
</body>