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

第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;
 }
相关推荐
全宝6 分钟前
🎨前端实现文字渐变的三种方式
前端·javascript·css
没有钱的钱仔11 分钟前
STM32低功耗模式全面指南
css·stm32·css3
yanlele30 分钟前
前端面试第 75 期 - 2025.07.06 更新前端面试问题总结(12道题)
前端·javascript·面试
妮妮喔妮37 分钟前
【无标题】
开发语言·前端·javascript
谦行1 小时前
深度神经网络训练过程与常见概念
前端
Simon_He1 小时前
一个免费的在线压缩网站超越了付费的压缩软件
前端·开源·图片资源
巴巴_羊2 小时前
React Ref使用
前端·javascript·react.js
拾光拾趣录2 小时前
CSS常见问题深度解析与解决方案(第三波)
前端·css
轻语呢喃2 小时前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端
杨进军3 小时前
React 协调器 render 阶段
前端·react.js·前端框架