网页制作_头歌答案

最新推荐文章于 2023-12-15 19:07:17 发布

wang_0206

最新推荐文章于 2023-12-15 19:07:17 发布

阅读量497

点赞数 1

文章标签： html5 css3

本文链接：https://blog.csdn.net/wang_0206/article/details/134384326

版权

CSS从入门到精通——背景样式

背景颜色

step1/index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Hello World</title>
    <link rel="stylesheet" href="step1/CSS/style.css">
</head>

<body>
    <h1>CSS让网页样式更丰富</h1>
    <p>使用CSS(Cascading Style Sheets)，可以使网页样式更加的丰富多彩，它解决内容与表现分离的问题，提高了工作效率。</p>
</body>

</html>

step1/sample.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Hello World</title>
  <style type="text/css">
    body {
       background-color: lightyellow;
    }
    h1 {
      color: gray;
      background-color: palegreen;
    }

    p {
      background-color: lightgray;
    }
  </style>
</head>

<body>
  <div>
    <h1>CSS让网页样式更丰富</h1>
    <p>这是一个段落。</p>
  </div>
</body>

</html>

step1/CSS/style.css

/* ********** BEGIN ********** */
     body{
 background-color:ivory;
     }


/* ********** END ********** */

h1 {
    font-size: 40px;
    text-align: center;
}

p {
    font-size: 18px;
    color: grey;
    /* ********** BEGIN ********** */
    background-color:lightblue ;
    /* ********** END ********** */
}

背景图片

step2/index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Hello World</title>
    <link rel="stylesheet" href="step2/CSS/style.css">
</head>

<body>
    <div>
      <h1>CSS让网页样式更丰富</h1>
      <p>这是一个段落</p>
    </div>
</body>

</html>

step2/CSS/style.css

body {
    /* ********** BEGIN ********** */
    /*设置背景图片*/
background-image: url(https://www.educoder.net/attachments/download/211106);

    /* ********** END ********** */
}

div {
    width: 90%;
    height: 100%;
    margin: auto;
}

背景定位与背景关联

step3/index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Hello World</title>
    <link rel="stylesheet" href="step3/CSS/style.css">
</head>

<body>
    <div>
        <h1>CSS让网页样式更丰富</h1>
        <p>这是一个段落</p>
    </div>
</body>

</html>

step3/CSS/style.css

 body {
     margin-right: 200px;
     /* ********** BEGIN ********** */
     /*设置背景图片*/
    background: url("https://www.educoder.net/attachments/download/211104")no-repeat fixed right top ;
     /* ********** END ********** */
 }

 div {
     width: 90%;
     height: 100%;
     margin: auto;
 }