【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;
 }
相关推荐
哆啦A梦158831 分钟前
点击Top切换数据
前端·javascript·vue.js
程序猿追1 小时前
Vue组件化开发
前端·html
艾德金的溪1 小时前
redis-7.4.6部署安装
前端·数据库·redis·缓存
小光学长1 小时前
基于Vue的2025年哈尔滨亚冬会志愿者管理系统5zqg6m36(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
@PHARAOH2 小时前
WHAT - 受控组件和非受控组件
前端·javascript·react.js
生莫甲鲁浪戴2 小时前
Android Studio新手开发第二十六天
android·前端·android studio
JH30732 小时前
B/S架构、HTTP协议与Web服务器详解
前端·http·架构
yi碗汤园2 小时前
【超详细】C#自定义工具类-StringHelper
开发语言·前端·unity·c#·游戏引擎
Kevin Wang7273 小时前
解除chrome中http无法录音问题,权限
前端·chrome
vipbic3 小时前
使用Cursor开发Strapi5插件bag-strapi-plugin
前端·ai编程·cursor