【Web应用技术基础】CSS(4)——背景样式

作者：菜鸟追梦旅行 | 2024-03-31 20:55:31

踩

第1题：背景颜色

.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>

.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 ********** */
}

第2题：背景图片

.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>

.css


body {
    /* ********** BEGIN ********** */
    /*设置背景图片*/
    background-image: url(https://educoder.net/api/attachments/211106);
 
    /* ********** END ********** */
}
 
div {
    width: 90%;
    height: 100%;
    margin: auto;
}

第3题：背景定位与背景关联

.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>

.css


 body {
     margin-right: 200px;
     /* ********** BEGIN ********** */
     /*设置背景图片*/
    background:url(https://educoder.net/api/attachments/211104) no-repeat fixed right top;
     /* ********** END ********** */
 }
 
 div {
     width: 90%;
     height: 100%;
     margin: auto;
 }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/346067