个人中心
gpt4 book ai didi

html - 侧边栏背景不起作用

转载 作者：行者123 更新时间：2023-11-28 16:39:30 27 4
gpt4 key购买 nike

我无法让背景图片在侧边栏中显示到网站底部。我究竟做错了什么？此外，页面中心的内容已决定聚集在一起，我也不确定如何解决...

我怎样才能使它成为一个均匀的三列布局？

https://jsfiddle.net/ofusmgbn/

这是css和html

h1{
    background-color: black;
    background-image: url(logo.png);
    background-repeat: no-repeat;
    font-family: Peralta;
    color: white;
    height: 75px;
    padding-top: 25px;
    padding-left: 150px;}

h2{
    font-family: Peralta;
    text-align: center;
    height: 25px;
    background-color: white;
    padding-top: 0;}

p{
    border-bottom: 1px solid black;
     padding-bottom: 4em;
    height: 80px;}

img{
    float: left;

    margin-right: 1em;
    width: 150px;
    height: 100px;
    padding-left: 10px;
    border-radius: 20px;}



ul li {
  display: inline-block;
}

ul li a:link{
    text-decoration: none;
    color: black;}

*{
    -moz-box-sizing:border-box;
    box-sizing: border-box;
}

.sidebar1{
    float: left;
    width: 265px;
    padding: 0 20px 0 20px;
   background: url(sidebar1background.jpg);
    background-repeat: repeat-y;

}

.main{

    float: left;
    width: 60%;
     padding: 0 20px 0 20px;
    background-color: #d4ff80;
}

.sidebar2{
    float: right;
    width: 265px;
    padding-right: 30px;
     padding: 0 10px 0 20px;
    background: url(sidebar2background.jpg)right top;
    background-repeat: repeat-y;


}





#footer{
    clear: both;
    height: 50px;
    padding-top: 15px;
    background-color: black;
    color: white;
    text-align: center;
}


<!doctype html>
<html>
<head>
<meta charset="utf-8">

<title>SylviaGunter WEB-210 Project 6</title>

<meta name="viewport" content="width=device-width">

<link href='https://fonts.googleapis.com/css?family=Peralta' rel='stylesheet' type='text/css'>

<link href='https://fonts.googleapis.com/css?family=Gochi+Hand|Peralta' rel='stylesheet' type='text/css'>

 <link rel="stylesheet" 
          href=01%20-%20Large%20CSS.css>
<link rel="stylesheet" type="text/css" href="02 - Medium CSS">
<link rel="stylesheet" type="text/css" href="03 - Small CSS">
<link rel="stylesheet" type="text/css" href="04 - Print CSS">
<link rel="stylesheet" type="text/css" href="05 - IE"> 

</head>

    <body>
        <div class="wrapper">


    <div id="masthead">
        <h1>Best TV Ever</h1>
            </div>

[insert menu toggle here]
[insert menu checkbox here]


<ul>
    <li><a href="#">50s</a></li>
    <li><a href="#">60s</a></li>
    <li><a href="#">70s</a></li>
    <li><a href="#">80s</a></li>
    <li><a href="#">90s</a></li>
    </ul>


<aside class="sidebar1">

   Best Prime Time Shows
<ul>
    <li><a href="#">Alice</a></li>
    <li><a href="#">All In The Family</a></li>
    <li><a href="#">Barney Miller</a></li>
    <li><a href="#">Beverly Hillbillies</a></li>
    <li><a href="#">Bewitched</a></li>
    <li><a href="#">The Bob Newhart Show</a></li>
    <li><a href="#">The Brady Bunch</a></li>
    <li><a href="#">Gilligan's Island</a></li>
    <li><a href="#">Good Times</a></li>
    <li><a href="#">The Love Boat</a></li>
    <li><a href="#">Mary Tyler Moore</a></li>
    <li><a href="#">M*A*S*H</a></li>
    <li><a href="#">Maude</a></li>
    <li><a href="#">One Day At A Time</a></li>
    <li><a href="#">Petticoat Junction</a></li>
    <li><a href="#">Soap</a></li>
    <li><a href="#">Taxi</a></li>
    <li><a href="#">What's Happening</a></li>
    <li><a href="#">Welcome Back Kotter</a></li>
    <li><a href="#">WKRP In Cincinatti</a></li>
</ul>

            </aside>


<article class="main">

<h2>The Genius of Krofft</h2>

<h3>H.R. Pufnstuff</h3>

<p> <img src="hrpufnstuff.jpg" alt="hrpufnstuff" height="150" width="200">H.R. Pufnstuf centered on a shipwrecked boy named Jimmy. He and his friend, a talking flute named Freddy, take a ride on a mysterious boat, which promised adventures across the sea, to Living Island. The Mayor of Living Island was a friendly and helpful dragon named H.R. Pufnstuf. The boat was actually owned and controlled by a wicked witch named Wilhelmina W. Witchiepoo who rode on a broomstick-like vehicle called the Vroom Broom. She used the boat to lure Jimmy and Freddy to her castle on Living Island, where she was going to take Jimmy prisoner and steal Freddy. But Pufnstuf found out about her plot and was able to rescue Jimmy when he leaped out of the enchanted boat with Freddy and swam ashore.</p>

<h3>Lidsville</h3>


<p><img src="lidsville.jpg" alt="lidsville" height="150" width="200">
The show involved a teenage boy named Mark who fell into the hat of Merlo the Magician and arrived in Lidsville, a land of living hats. The hats on the show are depicted as having the same characteristics as the humans who would normally wear them.</p>

<h3>The Bugaloos</h3>


<p><img src="bugaloos.jpg" alt="bugaloos" height="150" width="200">The Bugaloos featured a musical group composed of four British-accented teenagers, who lived in fictional Tranquility Forest. They wore insect-themed outfits with antennae and wings which allowed them to fly. They were constantly beset by the evil machinations of Benita Bizarre, played by comedienne Martha Raye.</p>

<h3>Land of the Lost</h3>


<p><img src="landlost.jpg" alt="landlost" height="150" width="200">Land of the Lost details the adventures of the Marshall family (father Rick and his teenage children Will and Holly) who are trapped in an alternate universe inhabited by dinosaurs, a primate-type people called Pakuni, and aggressive humanoid/lizard creatures called Sleestak.</p>

<h3>Sigmund the Sea Monster</h3>


<p><img src="sigmund.jpg" alt="sigmund"  height="150" width="200">The show centered on two brothers, Johnny and Scott Stuart, who discover Sigmund, a friendly young sea monster who had been thrown out by his comically dysfunctional undersea family for refusing to frighten people. The boys hide Sigmund in their clubhouse.</p>

            </article>



   <aside class="sidebar2">
  Best Superhero Shows
<ul>
    <li><a href="#">Batman (1966)</a></li>
    <li><a href="#">The Bionic Woman (1976)</a></li>
    <li><a href="#">Electra Woman and Dyna Girl (1976)</a></li>
    <li><a href="#">The Greatest American Hero (1981)</a></li>
    <li><a href="#">The Incredible Hulk (1977)</a></li>
    <li><a href="#">Isis (1975)</a></li>
    <li><a href="#">Shazam! (1974)</a></li>
    <li><a href="#">The Six Million Dollar Man (1974)</a></li>
    <li><a href="#">Wonder Woman (1976)</a></li>
</ul>
            </aside>




<div id="footer">
Stop watching TV and write some code!
            </div>



</body>
</html>

最佳答案

您的侧边栏的问题在于它们没有高度，所以它们只是拉伸(stretch)以填充里面的内容。如果您希望它们具有特定高度，则需要对其进行定义。

此外，您的内容被捆绑，因为 <p> 的高度设置标签是不够的。只需完全删除它并使标签显示: block 。

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

27 4 0
文章推荐： javascript - 如何使用 CSS 根据百分比定位 div
文章推荐： html - 我的标题有 768px 作为我的菜单，但我的菜单看起来更小？
文章推荐： html - 为什么我不能定位我的表格？
文章推荐： javascript - IE7.js vs 不管什么 :hover. htc vs suckerfish.js 的儿子？
行者123
个人简介

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

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