Question

我正在尝试重新创建这个网络文档，但我还是坚持了几件事。这是我正在尝试重新创建的网络文档的图片。

enter image description here

我在弄清楚如何获取页面主要内容的边框时遇到了一些麻烦。我以为我可以使用divid，称之为main，并使用外部css表添加边框，但它似乎不起作用。
我也遇到了问题，如图所示，在屏幕右侧显示旁边的框。我在互联网上尝试过几种不同的东西，但到目前为止还没有取得任何成功。

感谢您的帮助。

这是我的HTML标记

<!DOCTYPE html>
<html lang="en">
<head>
<title>Professional Cycling 2014></title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>


<div id="container">
<header>
    <h1>Professional Cycling 2014</h1> 
    <nav id ="navigation" role="navigation">
<ul id="menu">
<li><a href="#Overview">Professional Cycling 2014 - Season Overview</a>&nbsp; </li>

<li><a href="#Races">The Top Races</a>&nbsp; </li> 

<li><a href="#Riders">The Top Riders</a>&nbsp; </li>

<li><a href="#Bikes">Bikes of the Professionals</a>&nbsp;</li>
</ul>
</nav>
</header>



<div id="main" role="main">

<article>

<header>
    <h2>Professional Road Cycling</h2>
</header>


<header>
    <h3>2014 Season Overview</h3> 
</header>

 The professional road season begins in early February in southern Europe and runs through late October with races all over the world. Events range from one-day classics to three-week grand tours. Some of the more famous races are the one-day classics of Paris-Roubaix in northern France, Tour de Flanders in the Belgian heartland, Milan-San Remo along western coast of Italy, and the grand tours of France, Italy, and Spain. Many people who are not cycling fans will have heard of the Tour de France, one of the largest sporting spectacles on earth.
 <br>
 <br>
 Professional cycling is governed by the Union Cyclist Internationale (<a href="http://www.uci.ch">UCI</a>) based in Aigle, Switzerland. 

 </article>

 <article>
 <header>
    <h3>The Top Races</h3> 
</header>


<img alt= "Stage 10 - Tour de France 2013" src="images/image1.jpg" width="75" height="100" />Arguably the biggest race of the year is the Tour de France which is held during July. Some riders specialize their riding style to do well in the grand tours, while other riders will specialize in the one-day classics and shorter stage races. The Tour de France typically has between 20 and 22 stages, usually one stage each day. The winner is determined by the lowest overall cumulative time over all stages. Stages include special stages run individually against the clock called time trials, but most stages are massed-start events with all riders covering the same course together. The Tour de France allows teams of 9 riders and typically between 18 and 22 teams are invited to compete in the event. 

</article>


 <article>
<header>
    <h3>The Top Riders</h3> 
</header>


 <img alt= "Philippe Gilbert former world champion" src="images/image2.jpg" width="75" height="100" />Riders acquire UCI points throughout the year based upon their finishing position in the various races held around the world. The leader on points in any World Tour event wears a special jersey that signifies their leadership position. However, each year, the UCI also hosts the world championship event where the world champion is determined based on the winner of a single day event. For professional riders this event is normally around 150-165 miles long. This past year, Rui Costa of Portugal won the event to be crowned the 2013 World Champion. He will wear a special rainbow jersey until the world championship event next year, where he will attempt to defend his title. 
 <br>
 <br>
 Other top riders in 2013 were Fabian Cancellara of Switzerland, Tom Boonen of Belgium, and Chris Froome of Great Britan. 

 </article>

 </div>


 <div id="sidebar" role="complementary">
  <aside>
 <article>
 <header>
    <h3>Bikes of the professionals</h3> 
</header>

Professional riders use specific bikes for specific events. Time trial bikes being the most specialized with highly aerodynamic builds and disk wheels often used on the rear wheel. Bikes built for climbing are extremely lightweight while bikes built for sprinting or rougher roads are somewhat heavier. A standard professional bike weighs between 14 and 18 pounds. Today most bike frames are made from carbon fiber as are many of the components and wheels. Typical cost is between $6000 and $20,000 USD per bike. Some of the top bike builders are: 

<ul>
<li>Colnago (Italy)</li> 
<li>Ridley (Belgium)</li> 
<li>BMC (Switzerland)</li> 
<li>Trek (USA)</li>  
<li>Bianchi (Italy)</li> 
</ul>
 </article>

 <br></aside>
 </div>

 <footer>
 <small>&copy; Copyright 2014 MJL Productions All Rights Reserved</small>
 </footer>
 </div>
 </body>
</html>

和我的CSS表格代码

body {
background-color: #E0E0E0;

}

h1 { 
color: white;
text-align: center;
background-color: red;
border-color: black;
border-width: thin;
border-style: solid;
}

#menu {
list-style-type: none;  
padding: 5;
margin: 15;
}

#menu li 
{    
text-align: center;
background-color: #00CCCC;
border-color: blue;
border-width: thin;
border-style: solid;

}

#main {
border-color: black;
border-width: thick;
position:relative:
float: left;
padding: 5px;
margin: 5px 10px;
}

#sidebar
{

}

Answer 1

看起来你错过了这个元素的边框风格。

#main {
    border-color: black;
    border-style: solid;
    border-width: thick;
    position:relative:
    float: left;
    padding: 5px;
    margin: 5px 10px;
}

Answer 2

嗯，总的来说这需要太多的css更改来解释。所以我只是简单地将css愚蠢地改变了......

*{
 margin:0;
 padding:0;
}
html,body{
 height:100%;
}
body {
 background-color: #E0E0E0;
}
#container{
 height:100%;
}

.....

#menu li {
 display:inline-block; /*Horizontally align menu items*/
 text-align: center;
 background-color: #00CCCC;
 border-color: blue;
 border-width: thin;
 border-style: solid;     
}
#main {
 display:inline-block; /* for horizontally aligning main content and side bar */
 width:50%;
 border: 2px solid black;
 position:relative;
 padding: 5px;
 margin: 5px 10px;
}
#sidebar {
 display:inline-block; /* for horizontally aligning main content and side bar */
 width:40%;
 vertical-align:top;
 margin-top:5px;
 border:2px solid black;
}

这里有点类似JSFiddle。

Answer 3

main {
    border-color: black;
    border-width: thick;
    position:relative;
    float: left;
    padding: 5px;
    margin: 5px 10px;
}

两件事......您需要添加边框样式，并且在位置后面有:：相对而不是;。这是您需要的：border-style:solid;和position-relative;

Answer 4

使用border: 1px solid #000000;

HTML5 / CSS问题有边框和旁边

4 个答案: