Question

这里我的Html和Css（我还在努力）我的最终结果我有一个额外的边框，我无法移动我的＆lt;抛开＆GT;在我的右侧＆lt; mainpart取代。我正在努力获得我希望的结果，/我认为我有布局问题，但我找不到任何在我的水平上非常明显的...

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Welcome Bootsworld</title>
        <link rel="stylesheet" type="text/css" href="bootsworld.css">
    </head>
    <body>
    <div id="page" class="divborder">
            <header id="pageheader">    
                <nav id="primarynav">
                    <ul>
                        <li><a href="#">Site map</a></li>
                        <li><a href="#">Privacy policy</a></li>
                        <li><a href="#">Accessibility</a></li>
                    </ul>
                </nav>
                <nav id="title">
                    <h1>BOOT</h1><h2>WORLD</h2>
                </nav>
                <nav id="secondnav">            
                    <ul>
                        <li><a href="#">HOME</a></li>
                        <li><a href="#">SHOP</a></li>
                        <li><a href="#">NEWS</a></li>
                        <li><a href="#">ABOUT US</a></li>
                        <li><a href="#">CONTACT US</a></li>
                        <li><a href="#">SUBSCRIBE</a></li>
                    </ul>   
                </nav>  
            </header>
        <div id="introduction" class="divborder">  
            <img src="boots.png" width="500" height="400" alt="boots"/>
            <h2>Welcome to boot world</h2>
            <p class="intro">BootWorld is the largest online footwear retailer in the UK.<a href="#">Our shop</a> always has stock of the latest designer footwear at the most competitive prices. Want to know more about us or our products, why <a href= "mailto:#">not send us a message.</a></p>
        </div>
        <div id="mainpart" class="divborder">
        <h2>NEW IN THE SHOP</h2>
            <article class= "news">
                <h3>CLASSIC COWBOY BOOTS</h3>
                    <p>Stand out from the crowd in a pair of classic cowboy boots. Available for Ladies and Gents from only <mark class="black">£49.99</mark></p>
                <h3>MILITARY BOOTS</h3>
                    <p>Hard-wearing Men's military boots, gsuaranteed to withstand all weathers. From only <mark class="black">£69.99</mark></p>
                <h3>ROMAN SANDALS</h3>
                    <p>Get ready for summer with some stylish roman sandals. From only <mark class="black">£39.99</mark></p>
                <h3>OFFICE SHOES</h3>
                    <p>You don't have to wear boring shoes to the office. Check out our new stock of Ladies and Gents fashionable office shoes from only <mark class="black">£44.99</mark></p>
            </article>
            <aside id="latestnews">
                <h3>Latest News</h3>
                    <p>Our seasonal sale has kicked off again! make sure you stop by our online shop to pick up a bargain.</p>
                    <footer>Posted by: Joe</footer>
            </aside>
            <aside id="suscribe">
                <h3>Subscribe</h3>
                    <p>Sign up to our newsletter and receive exclusive offers by email weekly.</p>
                    <form>
                    <fieldset>
                        <legend>SIGN UP NOW!</legend>
                        <p>
                         <label for="yourname">Your name</label><br/>   
                         <input type="text" name="yourname" id="yourname"size="20"/>

                        </p>
                        <p>
                         <label for="emailaddress">email address</label><br/>
                         <input type="text" name="emailaddress" id="emailaddress"size="20"/>    
                        </p>
                        <button onclick="myFunction()">Sign Up</button>
                    </fieldset>
                    </form>
            </aside>            
        </div>
        <footer id="pagefooter">
            <h3>OUR ADDRESS:</h3>
            <p>Malet Street,<br/> London, WC1E 7HX</p>
        </footer>
    </div>          
    </body>
</html>

我的css：

body{
    width: 90%;
    margin: auto;
}
h1,h2{
    display: inline;
    color: #016008;
}
h1{
    font-size: 60px;
}
h2{
    font-size: 40px;
}
li{
    display: inline;
}
aside{
    color:#016008;
    text-decoration: none;
    background-color: #dddddd; 
}
form{
    background-color: white;
    margin: 0px;
}
legend{
    color: #3e3e3e;
    font-weight: bold;
}
#primarynav ul{
    color: #016008;
    text-align: right;  
}
#secondnav{
    display: block;
    text-align: justify;
}
#mainpart h2{
    color: #3e3e3e;
}
#latestnews h3{
    color: #3e3e3e;
}   
#latestnews footer{
    float: right;
    color: #3e3e3e;
}
#latestnews p{
    text-decoration: underline;
}
#suscribe h3{
    color: #3e3e3e;
}
mainpart{
    float: left;
}
#pagefooter{
    background-color: #dddddd;
    color:#3e3e3e;
}
img{
    border:1px solid grey;
    float: left;
}
#introduction{


    float: right;
}
introduction.h2{
    color: red;
}
.news{  
    background-color: #dddddd;
    width: 65%;
    padding:2px 7px 4px 7px;
    margin: 2px 2px 2px 2px;
    text-align: justify;
    color:#016008;
}
.divborder{
    border: 1px solid grey;
}
div{
    text-align: justify;

    padding:2px 7px 4px 7px;
    margin: 10px;
}
#pagefooter{
    padding:2px 7px 4px 7px;
}
#latestnews{
    display: inline;
    float: right;
    width:30%;
}
#suscribe{
    display: inline-block;
    width:30%;
    float: right;
}
introduction p{
    float: right;
    overflow: auto;

}
aside{
    float: right;
}
mark.black{
    color: black;
    background: none;
    font-weight: bold;
}

有什么想法吗？

学家

Answer 1

尝试使用box-sizing: border-box;

Answer 2

#introduction的上边距正在其顶部边框和mainpart顶部之间留出空格。快速解决方法是在margin-top: 0上设置#introduction。 JSFiddle

如何删除Html / Css中的额外边框

2 个答案: