【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;
 }
相关推荐
祝余呀14 分钟前
HTML初学者第三天
前端·html
就爱瞎逛30 分钟前
TailWind CSS Intellisense 插件在VSCode 上不生效
前端·css·vscode·tailwind
柚子81633 分钟前
sibling-index:我用这个画时钟表盘
前端·css
UI设计和前端开发从业者1 小时前
UI前端大数据处理策略优化:基于云计算的数据存储与计算
前端·ui·云计算
前端小巷子1 小时前
Web开发中的文件上传
前端·javascript·面试
翻滚吧键盘2 小时前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹2 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
杨进军2 小时前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW3 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字3 小时前
Kotlin lazy 委托的底层实现原理
前端