个人中心
gpt4 book ai didi

html - 负边距不起作用

转载 作者：搜寻专家 更新时间：2023-10-31 22:59:35 24 4
gpt4 key购买 nike

我正在尝试获得负边距以允许我的 Logo 溢出页眉。

预期结果图片: Psd - How it needs to look

显示当前错误结果的图像: Code - the error

我对 HTML 和 CSS 都是新手，尽管我已经尽我最大的努力尝试使用这段代码并试图在网上(包括本网站)寻找答案，但都无济于事。所以这是我与这些部分相关的代码:

#logo {
  display: inline-block;
  margin: -30px 0px -100px 10px;
}
.hheader {
  background-color: #005073;
  background-image: -webkit-linear-gradient(rgba(0, 60, 80, .8) 0%, rgba(0, 80, 105, .8) 50%, rgba(0, 60, 80, .8) 100%);
  /* For Safari 5.1 to 6.0 */
  background-image: -o-linear-gradient(rgba(0, 60, 80, .8) 0%, rgba(0, 80, 105, .8) 50%, rgba(0, 60, 80, .8) 100%);
  /* For Opera 11.1 to 12.0 */
  background-image: -moz-linear-gradient(rgba(0, 60, 80, .8) 0%, rgba(0, 80, 105, .8) 50%, rgba(0, 60, 80, .8) 100%);
  /* For Firefox 3.6 to 15 */
  background-image: linear-gradient(rgba(0, 60, 80, .8) 0%, rgba(0, 80, 105, .8) 50%, rgba(0, 60, 80, .8) 100%);
  /* Standard syntax */
  box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.4);
  /* Standard syntax */
  -webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, 0.4);
  border-style: solid;
  border-width: 1px;
  border-color: black;
  margin-bottom: 2em;
  margin-top: 30px;
}
<div class="container">
  <div class="hheader">
    <a id="logo" href="/" title="Return to home">
      <img src="images/logo.png" alt="Density Art Logo">
    </a>
  </div>

如果需要，这里是两者的完整代码:

HTML

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Density Art - Home</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<header>
    <div class="container">
        <div class="hheader">
            <a id="logo" href="/" title="Return to home">
            <img src="images/logo.png" alt="Density Art Logo">
            </a>
        </div>

        <div class="nav_menu">
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Website Design</a></li>           
                    <li><a href="#">Art &amp; Poetry</a></li>  
                    <li><a href="#">Blog &amp; Other</a></li>
                    <li><a href="#">Music &amp; More</a></li>
                    <li><a href="#">Shop</a></li>  
                </ul>
            </nav>
        </div> <!-- end of container-->
    </div> <!-- end of navigator menu bar--> 
</header>


    <div id="content">
        <section id="leftcolumn">

            <h1>Home</h1>

            <h3>Who are we?</h3>

            <p>Density art is a small company local to Newcastle, Australia. We produce extremely quality websites, art and poetry alongside other projects that we have discoverdd is in absolutely high demand. You'll completely love all we have to offer so you may enjoy yourself when you will search through our products and buy them.</p>

            <p>Density art is a small company local to Newcastle, Australia. We produce extremely quality websites, art and poetry alongside other projects that we have discoverdd is in absolutely high demand. You'll completely love all we have to offer so you may enjoy yourself when you will search through our products and buy them.</p>

            <h3>What is our aim?</h3>

            <p>Density art is a small company local to Newcastle, Australia. We produce extremely quality websites, art and poetry alongside other projects that we have discoverdd is in absolutely high demand. You'll completely love all we have to offer so you may enjoy yourself when you will search through our products and buy them.</p>

            <p>Density art is a small company local to Newcastle, Australia. We produce extremely quality websites, art and poetry alongside other projects that we have discoverdd is in absolutely high demand. You'll completely love all we have to offer so you may enjoy yourself when you will search through our products and buy them.</p>

        </section> <!-- end of left column content-->

        <aside id="rightcolumn">

            <h2>Get Connected!</h2>
            <h5>Join our evergrowing community and become a part of Density Art</h5>

            <a href="http://www.facebook.com/" target="_blank"><img src="images/btns/fb.png" alt="Facebook"></a>
            <h4>Facebook</h4>

            <a href="http://www.instagram.com/" target="_blank"><img src="images/btns/ig.png" alt="InstaGram"></a>
            <h4>Instagram</h4>

            <a href="http://www.soundcloud.com/" target="_blank"><img src="images/btns/sc.png" alt="SoundCloud"></a>
            <h4>SoundCloud</h4>


            <a href="http://www.facebook.com/" target="_blank"><img src="images/btns/em.png" alt="Email"></a>
            <h4>Email</h4>


            <a href="http://www.facebook.com/" target="_blank"><img src="images/btns/ph.png" alt="Phone Call"></a>
            <h4>Phone Call</h4>


        </aside> <!--end of right column content-->

    </div> <!-- end of content form-->

<footer>
    <div id="footerbar">

        <p>Copyright &copy; informatrion copyright 2001 etc bnlah blah Copyright informatrion copyright 2001 etc bnlah blah Copyright informatrion copyright 2001 etc bnlah blah</p>

        <hr>

        <h6>Contact us</h6>
        <h6>Legal Terms</h6>
        <h6>Shopping Cart</h6>
        <h6>Facebook</h6>
        <h6>Instagram</h6>



    </div>


</footer>

</body>
</html>

CSS

html {
-webkit-font-smoothing: antialiased;
text-rendering: optimiszelegibility;   
}


body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:14px;
line-height:20px;
color: ebe9e9; 
}

h1, h2 {
font-weight: 700;
margin:0;
line-height: 45px;    
}


h4, h6  {
font-weight: bold;
margin: 5px 0 5px 0;    
}

h1 {
font-size:48px;
}

h2 {
font-size:30px;
}

h3 {
font-size:24px;
font-weight: bold;
}

h4 {
font-size:20px;
line-height: 45px;
}

h5 {
font-size:16px;
font-weight: 600;
margin:0;
line-height: 45px; 
}

h6 {
font-size:12px;
line-height: 20px;
}

p {
margin: 0 0 10px 0;

}

nav ul li{
display: inline;
}

#logo {
display:inline-block;
margin: -30px 0px -100px 10px;
}

.hheader {
background-color: #005073;
background-image: -webkit-linear-gradient(rgba(0,60,80,.8) 0%,        rgba(0,80,105,.8) 50%, rgba(0,60,80,.8) 100%); /* For Safari 5.1 to 6.0 */
background-image: -o-linear-gradient(rgba(0,60,80,.8) 0%, rgba(0,80,105,.8)  50%, rgba(0,60,80,.8) 100%); /* For Opera 11.1 to 12.0 */
background-image: -moz-linear-gradient(rgba(0,60,80,.8) 0%, rgba(0,80,105,.8) 50%, rgba(0,60,80,.8) 100%); /* For Firefox 3.6 to 15 */
background-image: linear-gradient(rgba(0,60,80,.8) 0%, rgba(0,80,105,.8) 50%, rgba(0,60,80,.8) 100%); /* Standard syntax */
box-shadow: inset 0px 0px 7px 2px rgba(0,0,0,0.4); /* Standard syntax */
-webkit-box-shadow: inset 0px 0px 7px 2px rgba(0,0,0,0.4);
-moz-box-shadow: inset 0px 0px 7px 2px rgba(0,0,0,0.4);
border-style: solid;
border-width: 1px;
border-color: black;
margin-bottom: 2em;
margin-top: 30px;
}

.container {
width: 960px;
padding: 0 10px;
margin: 0 auto;
}

.nav_menu {
background-color: #005073;
background-image: -webkit-linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3)); /* For Safari 5.1 to 6.0 */
background-image: -o-linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3)); /* For Opera 11.1 to 12.0 */
background-image: -moz-linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3)); /* For Firefox 3.6 to 15 */
background-image: linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3)); /* Standard syntax */
-webkit-box-shadow: inset 0px 0px 2px 1px rgba(0,0,0,0.4); /* For Firefox 3.6 to 15 */
-moz-box-shadow: inset 0px 0px 2px 1px rgba(0,0,0,0.4);  /* For Firefox 3.6 to 15 */
box-shadow: inset 0px 0px 2px 1x rgba(0,0,0,0.4); /* Standard syntax */
border-style: solid;
border-width: 1px;
border-color: black;
max-height: 2em
}

如果任何好心的成员有所需的知识和能力来帮助我，那么请输入适合初学者的回复。

这是代码的 JSFiddle:https://jsfiddle.net/7hb9bd58/2/

最佳答案

.hhheader 高度没有改变，因为 #logo 上的边距不影响标题大小(取决于 Logo 的大小)，您仅移动 #logo，仅此而已。

为什么不直接设置 .hheader 元素的高度呢？有点像

height: 190px;

https://jsfiddle.net/7hb9bd58/4/

或者，如果出于某种原因不允许您这样做，也许您可​​以只缩放 Logo ，这样它就会溢出标题容器

#logo {
    display:inline-block;
    transform: scale(1.3);
    margin-left:50px;
}

https://jsfiddle.net/7hb9bd58/5/

关于html - 负边距不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33965961/

24 4 0
文章推荐： javascript - Sails.js 中的多个关联
文章推荐： node.js - 使用 sockjs 的 channel (node.js、socket.io)
文章推荐： 带有 fs.readFile 的 Node.js 无法通过 http 呈现文件内容
文章推荐： JavaScript 同步循环
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com