个人中心
gpt4 book ai didi

html - 为什么我的边框不显示？

转载 作者：太空宇宙 更新时间：2023-11-04 03:29:18 24 4
gpt4 key购买 nike

新闻 div 最初有一个 outline 属性。但是一旦我添加了#main h2{} 行，轮廓就消失了。我需要用 border 属性替换它并给它一个圆 Angular 边框。我已在 w3schools.com 指南的帮助下完成了此操作，但仍未显示边框。

编辑:我已经更新了我的代码，但它现在已经清除了我的整个新闻 div。

#main {
    float: right;
    width: 45%;
    margin: 0 2.5%;
    outline: 2px dashed #0053ae;
     }

#main h2 {
    font-family: 'Oswald', sans-serif;
    }   

#news {
    float: right;
    width: 22.5%;
    margin: 0 0 0 2.5%;
    border: 5px dashed #FF6600;
    border-radius: 10px;
}

完整代码如下:

<!DOCTYPE HTML>
<html>
<head>
    <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
    <meta charset="utf-8">
    <title>
        Mount Olympus News
    </title>
    <style>

#wrapper {
    width: 960px;
    margin: 0 auto;
}

#header {
    background-color: #CCC; 
    padding: 15px;}

#links {
    float: right;
    width: 22.5%;
    margin: 0 2.5% 0 0 ;
    outline: 2px dashed #dd0009;
}

#links h2 {
    font-family: 'Oswald', sans-serif;
}

#main {
float: right;
width: 45%;
margin: 0 2.5%;
outline: 2px dashed #0053ae;
 }

#main h2 {
    font-family: 'Oswald', sans-serif;
    }   

#news {
    float: right;
    width: 22.5%;
    margin: 0 0 0 2.5%;
    border: 5px dashed #FF6600;
    border-radius: 10px;
}

#news h2 {
    font-family: 'Oswald', sans-serif;
    }

#footer {
    clear: right; 
    padding: 15px;
    background: #CCC;}

body {
    font-family: verdana, sans-serif; 
    /* font-size: small; */
    margin: 0;
    padding: 0;}


ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
li {
    margin-top: 1em;
    }

</style>
</head>
<body>
<div id="wrapper">

<div id="header">
  <h1>Mount Olympus News</h1>
</div>


<div id="links">
<h2>Links to Stories</h2>
<ul id="stories">
<li><a href="">Jupiter & His Mighty Company</a></li>
<li><a href="">The Golden Age</a></li>
<li><a href="">The Story of Prometheus</a></li>
<li><a href="">The Flood</a></li>
<li><a href="">The Story of Io</a></li>
<li><a href="">The Wonderful Weaver</a></li>
<li><a href="">Cadmus and Europa</a></li>
<li><a href="">The Quest for Medusa's Head</a></li>
<li><a href="">The Story of Atlanta</a></li>
<li><a href="">The Horse and the Olive</a></li>
</ul>
</div>


<div id="main">
  <h2>Prometheus Heats Things Up</h2>
    <p>Prometheus did not care to live amid the clouds on the mountain top. He was too
    busy for that. While the Mighty Folk were spending their time in idleness, drinking
    nectar and eating ambrosia, he was intent upon plans for making the world wiser and
    better than it had ever been before.</p>
    <p>He went out amongst men to live with them and help them. Ah, how very poor and wretched they were! He found
    them living in caves and in holes of the earth, shivering with the cold because there
    was no fire, dying of starvation, hunted by wild beasts and by one another-the most
    miserable of all living creatures.</p>
    <p>"If they only had fire," said Prometheus to himself, "they could at least warm
    themselves and cook their food; and after a while they could learn to make tools and
    build themselves houses. Without fire, they are worse off than the beasts."</p>
   <p>Then he went boldly to Jupiter and begged him to give fire to men, that so they
    might have a little comfort through the long, dreary months of winter.</p>
    <p>"Not a spark will I give," said Jupiter. "No, indeed! Why, if men had fire they
    might become strong and wise like ourselves, and after a while they would drive us
    out of our kingdom. It
    is best for them to be poor and ignorant, that so we Mighty Ones may thrive and be
    happy."</p>
    <p>Prometheus made no answer; but he had set his heart on helping mankind, and he did
    not give up. He turned away, and left Jupiter and his mighty company forever.</p>

    <p>As he was walking by the shore of the sea he found a reed, or, as some say, a tall
    stalk of fennel, growing; and when he had broken it off he saw that its hollow center
    was filled with a dry, soft pith which would burn slowly and keep on fire a long
    time. He took the long stalk in his hands, and started with it towards the dwelling
    of the sun in the far east.</p>
    <p>"Mankind shall have fire in spite of the tyrant who sits on the mountain top," he
    said.</p>
    <!-- <p>He reached the place of the sun in the early morning just as the glowing, golden
    orb was rising from the earth and beginning his daily journey through the sky. He
    touched the end of the long reed to the flames, and the dry pith caught on fire and
    burned slowly. He called some of the shivering men from their caves and built a fire for them,
    and showed them how to warm themselves by it and how to build other fires from the
    coals. Soon there was a cheerful blaze in every rude home in the land, and men and
    women gathered round it and were warm and happy, and thankful to Prometheus for the
    wonderful gift which he had brought to them from the sun.</p>
    <p>It was not long until they learned to cook their food and so to eat like men
    instead of like beasts. They began at once to leave off their wild and savage habits;
    and instead of lurking in the dark places of the world, they came out into the open
    air and the bright sunlight, and were glad because life had been given to them.</p> -->

</div>

<div id="news">
<h2>News</h2>
<ul>
<li><strong>Pandora opens the box!</strong><br /> Disease and sorrow released to plague mankind for eternity. <a href="foo">More...</a></li>
<li><strong>Welcome to Hellenes.</strong><br /> Son of Prometheus escapes the great flood and creates a new society from tossed stones. <a href="foo">More...</a></li>
<li><strong>A Tangled Web</strong><br /> 
Arachne loses weave-off; is changed into a spider. <a href="">More...</a></li>
</ul>
</div>

<div id="footer">
<p>Content taken from <cite>Old Greek Stories</cite> by James Baldwin (1914). It is a copyright free text available at <a href="http://www.gutenberg.net/1/1/5/8/11582/">Project Gutenberg</a>.</p>
</div>

</div>
</body>
</html>

最佳答案

定义样式后您没有关闭 CSS 标签:

#main h2 {
    font-family: 'Oswald', sans-serif;
    )

上面的括号应该用这样的花括号代替:

#main h2 {
    font-family: 'Oswald', sans-serif;
    }

其次，bold 没有border-style 属性，这就是您的边框没有出现的原因。您可以改用:

#news {
    float: right;
    width: 22.5%;
    margin: 0 0 0 2.5% ;
    border: 5px solid #FF6600;
    border-radius: 25px;
}

您可以在 here 上查看所有可用的 border-style，您可以使用它们.

关于html - 为什么我的边框不显示？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26600504/

24 4 0
文章推荐： c - PortAudio 回调，并在别处更改变量
文章推荐： python - Celerybeat 执行任务
文章推荐： javascript - gulp-typescript 正在编译所有 .ts 文件，而不仅仅是来自特定位置的文件
文章推荐： c - 使用 doxygen 文件头作为模块描述
太空宇宙
个人简介

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

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