【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;}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/775390.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Zookeeper的系统架构

先看一张图&#xff1a; ZooKeeper 的架构图中我们需要了解和掌握的主要有&#xff1a; 1&#xff1a; ZooKeeper分为服务器端&#xff08;Server&#xff09; 和客户端&#xff08;Client&#xff09;&#xff0c;客户端可以连接到整个ZooKeeper服务的任意服务器上&#xff…

Flink on Kubernetes (flink-operator) 部署Flink

flink on k8s 官网 https://nightlies.apache.org/flink/flink-kubernetes-operator-docs-release-1.1/docs/try-flink-kubernetes-operator/quick-start/ 我的部署脚本和官网不一样&#xff0c;有些地方官网不够详细 部署k8s集群 注意&#xff0c;按照默认配置至少有两台wo…

手机短信验证码自动转发到服务器

今天写一个自动化处理程序&#xff0c;需要验证码登录&#xff0c;怎么样把手机收到的短信自动转发到服务器接口呢&#xff1f; 利用ios手机快捷指令的功能 打开快捷指令点击中间自动化点击右上角号选择信息信息包含选取&#xff0c;输入验证码选择立即执行点击下一步按下图配…

vue + LogicFlow 实现流程图展示

vue LogicFlow 实现流程图展示 1.背景 部门主要负责低代码平台&#xff0c;配置端负责配置流程图&#xff0c;引擎端负责流程执行&#xff0c;原引擎端只负责流程执行控制以及流程历史列表展示。现在提出个新的要求&#xff0c;认为仅历史记录不直观&#xff0c;需要在展示完…

Overcooked!(并查集区间元素合并优化)

本题链接&#xff1a;登录—专业IT笔试面试备考平台_牛客网登录—专业IT笔试面试备考平台_牛客网登录—专业IT笔试面试备考平台_牛客网 题目&#xff1a; 样例&#xff1a; 输入 5 5 1 1 2 3 1 2 2 2 4 3 1 4 3 2 5 输出 YES YES NO 思路&#xff1a; 根据题意&#xff0c;这…

数据结构初阶:排序

排序的概念及其运用 排序的概念 排序 &#xff1a;所谓排序&#xff0c;就是使一串记录&#xff0c;按照其中的某个或某些关键字的大小&#xff0c;递增或递减的排列起来的操作。 稳定性 &#xff1a;假定在待排序的记录序列中&#xff0c;存在多个具有相同的关键字的记录&…

HR岗位管理:岗位职级管理体系是什么?概念、知识及方法工具梳理

岗位是组织中最具体、最小的一个基本单位。组织一般都是因事设岗&#xff0c;因而岗位是组织要求个体完成一项或多项责任而赋予个体的权力的总和。岗位是与人相对应的&#xff0c;通常一个岗位只能由一个人担任。正是因为人与岗位相匹配&#xff0c;所以企业人力资源成本管控的…

Component is not found in path “miniprogram_npm/@vant/

在微信小程序中使用vantUI库时&#xff0c;xxx.json内引入vant组件&#xff0c;报错Component is not found in path "miniprogram_npm/vant/checkbox/index &#xff0c;按报错路径查看&#xff0c;在报错目录下的包&#xff0c;文件完好存在&#xff0c;如下截图 找到n…

STM32启动方式

s在STM32F10xxx里,可以通过BOOT[1:0]引脚选择三种不同启动模式。 启动方式&#xff1a;从内部的Flash中启动、 存储器映射&#xff1a; 0x0000 0000 -----0x0800 0000 映射的内部Flash

【保姆级讲解如何Stable Diffusion本地部署】

&#x1f308;个人主页:程序员不想敲代码啊&#x1f308; &#x1f3c6;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家&#x1f3c6; &#x1f44d;点赞⭐评论⭐收藏 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提…

sheng的学习笔记-AI-YOLO算法,目标检测

AI目录&#xff1a;sheng的学习笔记-AI目录-CSDN博客 目录 目标定位&#xff08;Object localization&#xff09; 定义 原理图 具体做法&#xff1a; 输出向量 图片中没有检测对象的样例 损失函数 ​编辑 特征点检测&#xff08;Landmark detection&#xff09; 定义&a…

SCI一区顶刊优化算法改进:基于强化学习的神经网络算法RLNNA,你绝对没见过,非常新颖!

声明&#xff1a;文章是从本人公众号中复制而来&#xff0c;因此&#xff0c;想最新最快了解各类智能优化算法及其改进的朋友&#xff0c;可关注我的公众号&#xff1a;强盛机器学习&#xff0c;不定期会有很多免费代码分享~ 目录 神经网络优化算法NNA&#xff1a; 基于强化…

利用Python进行数据可视化Plotly与Dash的应用【第157篇—数据可视化】

&#x1f47d;发现宝藏 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。【点击进入巨牛的人工智能学习网站】。 利用Python进行数据可视化Plotly与Dash的应用 数据可视化是数据分析中至关重要的一环&…

SpringBoot集成 itextpdf 根据模板动态生成PDF

目录 需求说明前期准备Spring Boot 集成添加依赖构建工具类构建MultipartFile编辑PDF模板Java代码设置对应form的key-value 需求说明 根据合同模板&#xff0c;将动态的合同标签&#xff0c;合同方以及合同签约时间等动态的生成PDF&#xff0c;供用户下载打印。 前期准备 安…

Linux学习_进程

1.进程 概念&#xff1a;程序的一个执行实例&#xff0c;正在执行的程序等&#xff0c;担当分配系统资源&#xff08;CPU时间&#xff0c;内存&#xff09;的实体&#xff0c;进程PCB自己的代码和数据 PCB&#xff1a;进程信息被放在一个叫做进程控制块的数据结构中&#xff…

左手医生:医疗 AI 企业的云原生提效降本之路

相信这样的经历对很多人来说并不陌生&#xff1a;为了能到更好的医院治病&#xff0c;不惜路途遥远奔波到大城市&#xff1b;或者只是看个小病&#xff0c;也得排上半天长队。这些由于医疗资源分配不均导致的就医问题已是老生长谈。 云计算、人工智能、大数据等技术的发展和融…

【嵌入式——C语言】VScode编写C程序、交叉编译

【嵌入式——C语言】VScode编写C程序、交叉编译 第一步第二步第三步第四步第五步第六步第七步第八步 第一步 下载Visual Studio Code下载地址 然后直接安装就可以了。 第二步 前提是你的电脑上安装了WSL。。。 打开vscode的扩展&#xff0c;输入WSL进行安装 安装完之后在窗…

装饰器模式实战运用(功能增强)

目录 前言 装饰器模式与代理模式的区别 UML plantuml 类图 实战代码 mybatis cache 前言 装饰器模式和代理模式在使用上很相似&#xff0c;都是在不修改原始类代码的情况下&#xff0c;动态地给真实对象的方法做增强。 装饰器模式是通过创建一个包装对象来包裹原有对象…

c# RichTextbox添加行号

使用另一个RichTextBox放在要添加行号的左边 使用以下代码 //uiRichTextBox1为右侧文本框&#xff0c;uiRichTextBox2为左侧文本框int lineIndex 0;private void uiRichTextBox1_TextChanged(object sender, EventArgs e){if (lineIndex > uiRichTextBox1.Lines.Length){L…

腾讯云4核8G12M云服务器一年646元,送3个月时长

2024年腾讯云4核8G服务器租用优惠价格&#xff1a;轻量应用服务器4核8G12M带宽646元15个月&#xff0c;CVM云服务器S5实例优惠价格1437.24元买一年送3个月&#xff0c;腾讯云4核8G服务器活动页面 txybk.com/go/txy 活动链接打开如下图&#xff1a; 腾讯云4核8G服务器优惠价格 轻…