如何在css中对齐和背景颜色答案

【问题标题】：How to align and background colour in css如何在css中对齐和背景颜色
【发布时间】：2017-11-10 11:29:37
【问题描述】：

参考图片：

必填当前

底部是我的工作，顶部是我的目标或尽可能接近。
我有两个问题，为什么我的 div 不会转到页面右侧？
和
我无法用颜色和边界填充 h1 和 div 任何帮助不胜感激
这是我一直在处理的代码，对不起，我还是 CSS 和 html 的新手。

    body {
            background-image: url("bg.jpg");
         }

    div {   background-color; #cccccc;
            opacity: 0.8;
            padding: 5px;
            width: 200px;
            height: 200px;
            border: 3px ridge #cccccc;
            padding: 5px
            margin: 10px
            position:absolute;
            right: 0%;
            top: 0%;
        }

    h1 
        {      background-color; #cccccc;
               padding: 5px;
               font-weight: bold;
               font-size: 40px;
               text-align: center
               opacity: 0.8;
               position:absolute;
               left: 45%;
               top: 60%;
               font-family,sans-serif
               width: 300px;                   
        }    




    </style>
</head>


<body>   
    <header id="header">
    <div class="h1">  
    <h1 style="color:DarkSlateBlue" text-align: center;>Rythm and Blues</h1>
    </div>

    <div>
    <div class="div">
    <h3 style="color:DarkSlateBlue" text-align: center> Artist Name</h3>
    <p style="color:DarkSlateBlue"> Lorem ipsum dolor sit amet, suas utinam numquam mea ea, errem neglegentur eum ut. Aliquam
    reformidans et mel. soleat corpora prodesset id quo. ei cibo natum delenit his.</p>
    </div>
</body>

【问题讨论】：

您缺少许多分号。在你的 CSS 中。
你也有分号应该在冒号的地方。
内联样式中也缺少引号。
谢谢你指出这一点变得非常明显，关于内联样式中的引号你能告诉我你的意思吗？
适合cmets，见答案

标签： html css background alignment

【解决方案1】：

不适合 cmets。以下是对您的语法的一些修复。

 <style>   
    body {
            background-image: url("bg.jpg");
         }

    .div {   
            background-color: #cccccc;
            opacity: 0.8;
            width: 200px;
            height: 200px;
            border: 3px ridge #cccccc;
            padding: 5px;
            margin: 10px;
            position:absolute;
            right: 0%;
            top: 0%;
        }

    .h1 
        {      background-color: #cccccc;
               font-weight: bold;
               font-size: 40px;
               text-align: center;
               opacity: 0.8;
               position:absolute;
               left: 45%;
               top: 60%;
               font-family,sans-serif;
               width: 300px;                   
        }    




    </style>
</head>
<body>   
    <div class="h1">  
      <h1 style="color:DarkSlateBlue;text-align: center;">Rythm and Blues</h1>
    </div>

    <div class="div">
      <h3 style="color:DarkSlateBlue" text-align: center> Artist Name</h3>
    <p style="color:DarkSlateBlue"> Lorem ipsum dolor sit amet, suas utinam numquam mea ea, errem neglegentur eum ut. Aliquam
    reformidans et mel. soleat corpora prodesset id quo. ei cibo natum delenit his.</p>
    </div>
</body>

【讨论】：

谢谢你真的很有帮助，自从你帮助我以来，我已经走了很远:)。我只需要弄清楚如何使 div 的边缘变圆以及如何修复两个位置，这样当我调整浏览器大小时它们就不会改变
w3schools.com/css/css3_borders.asp 应该为您指明正确的圆角方向。
使用左侧的像素或 em 位置而不是百分比和右侧定位应该保持元素“固定”。