个人中心
gpt4 book ai didi

html - 在上部
中编辑后页脚背景的变化

转载 作者：行者123 更新时间：2023-11-28 09:17:12 24 4
gpt4 key购买 nike

您好，首先感谢所有人，感谢 stackoverflow 我是 html 和 css 的新手 我从互联网上下载了免费的网站模板 我想编辑 我做了一些事情，当我删除上部 div 类页脚背景从全宽缩小到主要宽度和页脚中也发生了一些变化。

![编辑模板之前][1]

编辑前的 HTML

    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Wood Working Website Template</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
    <div id="header">
        <div>
            <div id="logo">
                <a href="index.html"><img src="images/logo.png" alt="LOGO"></a>
            </div>
            <ul id="navigation">
                <li class="selected">
                    <a href="index.html">Home</a>
                </li>
                <li>
                    <a href="about.html">About</a>
                </li>
                <li>
                    <a href="gallery.html">Gallery</a>
                </li>
                <li>
                    <a href="blog.html">Blog</a>
                </li>
                <li>
                    <a href="contact.html">Contact</a>
                </li>
            </ul>
        </div>
    </div>
    <div id="contents">
        <div>
            <div class="body">
                <div id="adbox">
                    <img src="images/chair.jpg" alt="Img"> <span class="info"> Whicker Chair <em>$250.00</em> <a href="index.html" class="btn1">View Details</a> </span>
                    <div class="details">
                        <h1>High Quality<br> Wooden Furnitures<br> That's Built to Last.</h1>
                        <p>
                            You can choose from our wide selection of furnitures on display. Either for your home, office or other estab- lishments. If you can’t find what you need, we can make it according to your needs.
                        </p>
                    </div>
                </div>
                <ul id="featured">
                    <li>
                        <div>
                            <img src="images/living-room.jpg" alt="Img"> <a href="index.html"></a>
                        </div>
                        <div class="details">
                            <h4>Living Room</h4>
                            <p>
                                This website template has been designed by <a href="http://www.freewebsitetemplates.com/">Free Website Templates</a> for you, for free. You can replace all this text with your own text.
                            </p>
                        </div>
                    </li>
                    <li class="bedroom">
                        <div>
                            <img src="images/bedroom.jpg" alt="Img"> <a href="index.html"></a>
                        </div>
                        <div class="details">
                            <h4>Bedroom</h4>
                            <p>
                                You can remove any link to our website from this website template, you're free to use this website template without linking back to us.
                            </p>
                        </div>
                    </li>
                    <li class="kitchen">
                        <div>
                            <img src="images/kitchen.jpg" alt="Img"> <a href="index.html"></a>
                        </div>
                        <div class="details">
                            <h4>Kitchen</h4>
                            <p>
                                If you're having problems editing this website template, then don't hesitate to ask for help on the <a href="http://www.freewebsitetemplates.com/forums/">Forum</a>.
                            </p>
                        </div>
                    </li>
                </ul>
                <div class="contact">
                    <p>
                        For Order and Inquiries Please Call: <b>760-962-9541</b> Or you can visit us at: <b>4885 Wilson Street<br> Victorville, CA 92392</b>
                    </p>
                </div>
                <div class="blog">
                    <h4>From the Blog</h4>
                    <div>
                        <img src="images/carving-small.png" alt="Img"> <span>April 16, 2023</span>
                        <p>
                            CC's Carving
                        </p>
                        <a href="blog.html" class="more">Read More</a>
                    </div>
                    <div>
                        <img src="images/resort-small.png" alt="Img"> <span>April 15, 2023</span>
                        <p>
                            5 Star Resorts
                        </p>
                        <a href="blog.html" class="more">Read More</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="footer">
        <div>
            <div id="links">
                <div class="showroom">
                    <h4>Visit our Showroom</h4>
                    <a href="gallery.html"><img src="images/show-room.png" alt="Img"></a>
                    <p>
                        4885 Wilson Street<br> Victorville, CA 92392<br><br> 760-962-9541<br><br> <a href="index.html">info@carvedcreations.com</a>
                    </p>
                </div>
                <div>
                    <h4>Recent Blog Posts</h4>
                    <ul class="posts">
                        <li>
                            <span class="time">Apr 16</span>
                            <p>
                                <a href="blog.html">The Carving Master &amp; Owner</a> Maybe you’re looking for something diferent, something special.
                            </p>
                        </li>
                        <li>
                            <span class="time">Apr 15</span>
                            <p>
                                <a href="blog.html">5 Star Hotels We Supply</a> And we love the challenge of doing something diferent and something special.
                            </p>
                        </li>
                        <li>
                            <span class="time">Apr 14</span>
                            <p>
                                <a href="blog.html">How To Pick The Right Furniture For You</a> What’s more, they’re absolutely free! You can do a lot with them.
                            </p>
                        </li>
                    </ul>
                </div>
                <div>
                    <form action="#" method="post" id="newsletter">
                        <h4>Join Our Newsletter</h4>
                        <input type="text" value="Enter Email Address Here For Updates" onBlur="javascript:if(this.value==''){this.value=this.defaultValue;}" onFocus="javascript:if(this.value==this.defaultValue){this.value='';}">
                        <input type="submit" value="Sign up" class="btn2" />
                    </form>
                    <div id="connect">
                        <h4>Social Media</h4>
                        <a href="http://freewebsitetemplates.com/go/facebook/" target="_blank" class="facebook"></a> <a href="http://freewebsitetemplates.com/go/googleplus/" target="_blank" class="googleplus"></a> <a href="http://freewebsitetemplates.com/go/twitter/" target="_blank" class="twitter"></a>
                    </div>
                </div>
            </div>
            <ul class="navigation">
                <li>
                    <a href="index.html">Home</a>
                </li>
                <li>
                    <a href="about.html">About</a>
                </li>
                <li>
                    <a href="gallery.html">Gallery</a>
                </li>
                <li>
                    <a href="blog.html">Blog</a>
                </li>
                <li>
                    <a href="contact.html">Contact</a>
                </li>
            </ul>
            <p id="footnote">
                © Copyright 2023. All Rights Reserved.
            </p>
        </div>
    </div>
</body>
</html>

在这里，当我编辑时，我的意思是当我删除以下一个页脚背景时，它会从正常尺寸缩小。 

<h4>From the Blog</h4>
                        <div>
                            <img src="images/carving-small.png" alt="Img"> <span>April 16, 2023</span>
                            <p>
                                CC's Carving
                            </p>
                            <a href="blog.html" class="more">Read More</a>
                        </div>
                        <div>
                            <img src="images/resort-small.png" alt="Img"> <span>April 15, 2023</span>
                            <p>
                                5 Star Resorts
                            </p>
                            <a href="blog.html" class="more">Read More</a>
                        </div>
                    </div>
                </div>
            </div>

编辑页脚后缩小

![HTML 编辑后][2]编辑后的 ​​HTML 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Wood Working Website Template</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
    <div id="header">
        <div>
            <div id="logo">
                <a href="index.html"><img src="images/logo.png" alt="LOGO"></a>
            </div>
            <ul id="navigation">
                <li class="selected">
                    <a href="index.html">Home</a>
                </li>
                <li>
                    <a href="about.html">About</a>
                </li>
                <li>
                    <a href="gallery.html">Gallery</a>
                </li>
                <li>
                    <a href="blog.html">Blog</a>
                </li>
                <li>
                    <a href="contact.html">Contact</a>
                </li>
            </ul>
        </div>
    </div>
    <div id="contents">
        <div>
            <div class="body">
                <div id="adbox">
                    <img src="images/chair.jpg" alt="Img"> <span class="info"> Whicker Chair <em>$250.00</em> <a href="index.html" class="btn1">View Details</a> </span>
                    <div class="details">
                        <h1>High Quality<br> Wooden Furnitures<br> That's Built to Last.</h1>
                        <p>
                            You can choose from our wide selection of furnitures on display. Either for your home, office or other estab- lishments. If you can’t find what you need, we can make it according to your needs.
                        </p>
                    </div>
                </div>
                <ul id="featured">
                    <li>
                        <div>
                            <img src="images/living-room.jpg" alt="Img"> <a href="index.html"></a>
                        </div>
                        <div class="details">
                            <h4>Living Room</h4>
                            <p>
                                This website template has been designed by <a href="http://www.freewebsitetemplates.com/">Free Website Templates</a> for you, for free. You can replace all this text with your own text.
                            </p>
                        </div>
                    </li>
                    <li class="bedroom">
                        <div>
                            <img src="images/bedroom.jpg" alt="Img"> <a href="index.html"></a>
                        </div>
                        <div class="details">
                            <h4>Bedroom</h4>
                            <p>
                                You can remove any link to our website from this website template, you're free to use this website template without linking back to us.
                            </p>
                        </div>
                    </li>
                    <li class="kitchen">
                        <div>
                            <img src="images/kitchen.jpg" alt="Img"> <a href="index.html"></a>
                        </div>
                        <div class="details">
                            <h4>Kitchen</h4>
                            <p>
                                If you're having problems editing this website template, then don't hesitate to ask for help on the <a href="http://www.freewebsitetemplates.com/forums/">Forum</a>.
                            </p>
                        </div>
                    </li>
                </ul>
                <div class="contact">
                    <p>
                        For Order and Inquiries Please Call: <b>760-962-9541</b> Or you can visit us at: <b>4885 Wilson Street<br> Victorville, CA 92392</b>
                    </p>
                </div>
                <div class="blog">
                        </div>
    <div id="footer">
        <div>
            <div id="links">
                <div class="showroom">
                    <h4>Visit our Showroom</h4>
                    <a href="gallery.html"><img src="images/show-room.png" alt="Img"></a>
                    <p>
                        4885 Wilson Street<br> Victorville, CA 92392<br><br> 760-962-9541<br><br> <a href="index.html">info@carvedcreations.com</a>
                    </p>
                </div>
                <div>
                    <h4>Recent Blog Posts</h4>
                    <ul class="posts">
                        <li>
                            <span class="time">Apr 16</span>
                            <p>
                                <a href="blog.html">The Carving Master &amp; Owner</a> Maybe you’re looking for something diferent, something special.
                            </p>
                        </li>
                        <li>
                            <span class="time">Apr 15</span>
                            <p>
                                <a href="blog.html">5 Star Hotels We Supply</a> And we love the challenge of doing something diferent and something special.
                            </p>
                        </li>
                        <li>
                            <span class="time">Apr 14</span>
                            <p>
                                <a href="blog.html">How To Pick The Right Furniture For You</a> What’s more, they’re absolutely free! You can do a lot with them.
                            </p>
                        </li>
                    </ul>
                </div>
                <div>
                    <form action="#" method="post" id="newsletter">
                        <h4>Join Our Newsletter</h4>
                        <input type="text" value="Enter Email Address Here For Updates" onBlur="javascript:if(this.value==''){this.value=this.defaultValue;}" onFocus="javascript:if(this.value==this.defaultValue){this.value='';}">
                        <input type="submit" value="Sign up" class="btn2" />
                    </form>
                    <div id="connect">
                        <h4>Social Media</h4>
                        <a href="http://freewebsitetemplates.com/go/facebook/" target="_blank" class="facebook"></a> <a href="http://freewebsitetemplates.com/go/googleplus/" target="_blank" class="googleplus"></a> <a href="http://freewebsitetemplates.com/go/twitter/" target="_blank" class="twitter"></a>
                    </div>
                </div>
            </div>
            <ul class="navigation">
                <li>
                    <a href="index.html">Home</a>
                </li>
                <li>
                    <a href="about.html">About</a>
                </li>
                <li>
                    <a href="gallery.html">Gallery</a>
                </li>
                <li>
                    <a href="blog.html">Blog</a>
                </li>
                <li>
                    <a href="contact.html">Contact</a>
                </li>
            </ul>
            <p id="footnote">
                © Copyright 2023. All Rights Reserved.
            </p>
        </div>
    </div>
</body>
</html>

请尽快帮忙...

最佳答案

我猜你删除了太多结束的 div 标签。

也许这就是你想要的:(删除了“来自博客”部分)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Wood Working Website Template</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div id="header">
        <div>
            <div id="logo">
                <a href="index.html"><img src="images/logo.png" alt="LOGO"></a>
            </div>
            <ul id="navigation">
                <li class="selected">
                    <a href="index.html">Home</a>
                </li>
                <li>
                    <a href="about.html">About</a>
                </li>
                <li>
                    <a href="gallery.html">Gallery</a>
                </li>
                <li>
                    <a href="blog.html">Blog</a>
                </li>
                <li>
                    <a href="contact.html">Contact</a>
                </li>
            </ul>
        </div>
    </div>
    <div id="contents">
        <div>
            <div class="body">
                <div id="adbox">
                    <img src="images/chair.jpg" alt="Img"> <span class="info"> Whicker Chair <em>$250.00</em> <a href="index.html" class="btn1">View Details</a> </span>
                    <div class="details">
                        <h1>High Quality<br> Wooden Furnitures<br> That's Built to Last.</h1>
                        <p>
                            You can choose from our wide selection of furnitures on display. Either for your home, office or other estab- lishments. If you can’t find what you need, we can make it according to your needs.
                        </p>
                    </div>
                </div>
                <ul id="featured">
                    <li>
                        <div>
                            <img src="images/living-room.jpg" alt="Img"> <a href="index.html"></a>
                        </div>
                        <div class="details">
                            <h4>Living Room</h4>
                            <p>
                                This website template has been designed by <a href="http://www.freewebsitetemplates.com/">Free Website Templates</a> for you, for free. You can replace all this text with your own text.
                            </p>
                        </div>
                    </li>
                    <li class="bedroom">
                        <div>
                            <img src="images/bedroom.jpg" alt="Img"> <a href="index.html"></a>
                        </div>
                        <div class="details">
                            <h4>Bedroom</h4>
                            <p>
                                You can remove any link to our website from this website template, you're free to use this website template without linking back to us.
                            </p>
                        </div>
                    </li>
                    <li class="kitchen">
                        <div>
                            <img src="images/kitchen.jpg" alt="Img"> <a href="index.html"></a>
                        </div>
                        <div class="details">
                            <h4>Kitchen</h4>
                            <p>
                                If you're having problems editing this website template, then don't hesitate to ask for help on the <a href="http://www.freewebsitetemplates.com/forums/">Forum</a>.
                            </p>
                        </div>
                    </li>
                </ul>
                <div class="contact">
                    <p>
                        For Order and Inquiries Please Call: <b>760-962-9541</b> Or you can visit us at: <b>4885 Wilson Street<br> Victorville, CA 92392</b>
                    </p>
                </div>
                <div class="blog">

                </div>
            </div>
        </div>
    </div>
    <div id="footer">
        <div>
            <div id="links">
                <div class="showroom">
                    <h4>Visit our Showroom</h4>
                    <a href="gallery.html"><img src="images/show-room.png" alt="Img"></a>
                    <p>
                        4885 Wilson Street<br> Victorville, CA 92392<br><br> 760-962-9541<br><br> <a href="index.html">info@carvedcreations.com</a>
                    </p>
                </div>
                <div>
                    <h4>Recent Blog Posts</h4>
                    <ul class="posts">
                        <li>
                            <span class="time">Apr 16</span>
                            <p>
                                <a href="blog.html">The Carving Master &amp; Owner</a> Maybe you’re looking for something diferent, something special.
                            </p>
                        </li>
                        <li>
                            <span class="time">Apr 15</span>
                            <p>
                                <a href="blog.html">5 Star Hotels We Supply</a> And we love the challenge of doing something diferent and something special.
                            </p>
                        </li>
                        <li>
                            <span class="time">Apr 14</span>
                            <p>
                                <a href="blog.html">How To Pick The Right Furniture For You</a> What’s more, they’re absolutely free! You can do a lot with them.
                            </p>
                        </li>
                    </ul>
                </div>
                <div>
                    <form action="#" method="post" id="newsletter">
                        <h4>Join Our Newsletter</h4>
                        <input type="text" value="Enter Email Address Here For Updates" onBlur="javascript:if(this.value==''){this.value=this.defaultValue;}" onFocus="javascript:if(this.value==this.defaultValue){this.value='';}">
                        <input type="submit" value="Sign up" class="btn2" />
                    </form>
                    <div id="connect">
                        <h4>Social Media</h4>
                        <a href="http://freewebsitetemplates.com/go/facebook/" target="_blank" class="facebook"></a> <a href="http://freewebsitetemplates.com/go/googleplus/" target="_blank" class="googleplus"></a> <a href="http://freewebsitetemplates.com/go/twitter/" target="_blank" class="twitter"></a>
                    </div>
                </div>
            </div>
            <ul class="navigation">
                <li>
                    <a href="index.html">Home</a>
                </li>
                <li>
                    <a href="about.html">About</a>
                </li>
                <li>
                    <a href="gallery.html">Gallery</a>
                </li>
                <li>
                    <a href="blog.html">Blog</a>
                </li>
                <li>
                    <a href="contact.html">Contact</a>
                </li>
            </ul>
            <p id="footnote">
                © Copyright 2023. All Rights Reserved.
            </p>
        </div>
    </div>
</body>

关于html - 在上部 <div> 中编辑后页脚背景的变化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26256855/

24 4 0
文章推荐： javascript - 具有固定标题和第一列的垂直表行
文章推荐： javascript - 如何仅当我将 javascript 元素悬停在我的 div 元素上时才显示它？
文章推荐： html - 适合移动设备的 HTML 电子邮件中的 Accordion (可折叠面板集)
文章推荐： javascript - 打开下拉菜单中的 html 标签
行者123
个人简介

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

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