[HTML]Web前端开发技术9（HTML5、CSS3、JavaScript ）——喵喵画网页

news2024/9/26 5:17:05

希望你开心，希望你健康，希望你幸福，希望你点赞！

最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！

喵喵喵，你对我真的很重要！

目录

前言

CSS颜色与背景

颜色color属性

背景background属性

1. 背景颜色background-color

2. 背景图像background-image

3. 背景图像平铺方式background-repeat

4. 固定/滚动背景图像background-attachment

5. 定位背景图像background-position

6. 背景简写background

CSS列表样式

1. 样式类型list-style-type

CSS盒模型

CSS盒模型结构

边界属性设置

填充属性设置

课后练习

总结

前言

喵喵我啊，搞偷袭，提前回来看看喵亲爱的佬佬们！

11号，喵喵要做佬佬的日更小能手！

今天也是爱你的一天,喵~

CSS颜色与背景

颜色color属性

       color属性用于设置元素字体的色彩，该属性的语法比较简单，但取值比较多样，可以是颜色名称、函数、十六进制数等形式。

   颜色名称。使用 red 、 blue 、 yellow 等 CSS 预定义的表示颜色的参数。 CSS 预定义 17 种颜色，如下表所示。
   RGB() 函数。使用 rgb （ RRR, GGG, BBB ）或 rgb （ r%, g%, b% ） , 字母 R 或 r 、 G 或 g 、 B 或 b 分别表示颜色分量红色、绿色、蓝色，前者参数的取值为 0 到 255 ，后者参数的取值为 0 到 100 。
   十六进制数。使用“ #RRGGBB” 或者“ #RGB ”的形式，其中每个位十六进制数从 0 到 F 取值，比如 #FFC0CB 表示 pink 。

背景background属性

用于设置指定元素的背景色、背景图案等。

1.background-color：关键字 |  RGB值 | transparent

2.background-image : url(*.jpg) | none

3.background-attachment : scroll | fixed

4.background-repeat : repeat | repeat-x | repeat-y |no-repeat

5.background-position:百分比 | 长度 | 关键字

 利用百分比和长度来设置图像位置时，都要指定两个值，并且这两个值都要用空格分隔。

  关键字在水平方向的主要有left、center、right，

  关键字在垂直方向的主要有top、center、bottom。

1. 背景颜色background-color

CSS 中的 background-color 属性用于为所有 HTML 元素指定背景颜色。 
p{background-color:gray} /*将段落元素的背景颜色设置为灰色*/
如需要更改整个网页的背景颜色，则对 <body> 元素应用 background-color 属性。 
body{background-color:cyan} /*将整个网页的背景颜色设置为青色*/

2. 背景图像background-image

CSS 中的 background-image 属性用于为元素设置背景图像。
如果引用本地其他文件夹中的图片，给出对应的文件夹路径即可。 
p{background-image:url(image/flower.jpg)}
如需要更改整个网页的背景图像，则对 <body> 元素应用 background-image 属性。 
body{ background-image:url(image/flower.jpg)}

3. 背景图像平铺方式background-repeat

CSS中的background-image属性用于设置背景图像的平铺方式。如果不设置该属性，则默认背景图像会在水平和垂直方向上同时被重复平铺。该属性有四种不同的取值.

4. 固定/滚动背景图像background-attachment

CSS中的 background-attachment属性用于设置背景图像是固定在屏幕上还是随着页面滚动。该属性有两种取值。

5. 定位背景图像background-position

默认情况下，背景图像会放置在元素的左上角。CSS中的background-position属性用于设置背景图像的位置，可以根据属性值的组合将图像放置到指定位置上。该属性允许使用两个属性值组合的形式对背景图像进行定位。

background-position: 水平方向值  垂直方向值

水平和垂直方向的属性值均可使用关键词、长度值或者百分比的形式表示。

(1) 关键词定位
在 background-position 属性值中可以使用的关键词共有 5 种。

background-position:left bottom，显示在左下角。如果简写为一个参数值则另一个使用center补全省略的关键词

(2) 长度值定位

 长度值定位方法是以元素内边距区域左上角的点作为原点，然后解释背景图像左上角的点对原点的偏移量。

例如background-position: 100px 50px指的是背景图像左上角的点距离元素左上角向右100像素同时向下50像素的位置上。

(3) 百分比定位

百分比数值定位方式更为复杂，是将HTML元素与其背景图像在指定的点上重合对齐，而指定的点是用百分比的方式进行解释的。例如background-position: 0% 0%指的是背景图像左上角的点放置在HTML元素左上角原点上。

而background-position:66% 33%指的是HTML元素和背景图像水平方向2/3的位置和垂直方向1/3的位置上的点对齐。

如果简写为一个参数值则只表示水平方向的位置，省略的垂直方向位置默认为50%。这种方法类似于关键词定位法简写时使用center补全省略的关键词。

6. 背景简写background

p{
    background-color:silver;
    background-image:url(image/football.png);
    background-repeat:no-repeat;
}

p{ background: silver url(image/football.png) no-repeat }

两段代码效果一样！

CSS列表样式

1. 样式类型list-style-type

CSS 中的 list-style-type 属性可以用于设置列表的标志样式。
2. 样式图片 list-style-image
CSS 中的 list-style-image 属性可以用于设置列表的标志图标。标志图标可以是来源于本地或者网络的图像文件。
如果已使用 list-style-image 属性声明了列表的标志图标，则不能同时使用 list-style-type 属性声明列表的标志类型，否则后者将无显示效果。
当 list-style-image 属性 值为 none 或设置的图像路径出错时， list-style-type 属性会产生作用。
3. 样式位置 list-style-position

CSS中的list-style-position属性用于定义列表标志的位置，有3种属性值。

4. 样式简写 list-style

CSS中的list-style属性可以用于概括其它3种字体属性，将相关属性值汇总写在同一行。当需要为同一个列表元素声明多项列表属性时可以使用list-style属性进行简写。

[list-style-type]  [list-style-position]  [list-style-image]

属性值之间用空格隔开，如果其中某个属性没有规定可以省略不写。

ul{ 
   list-style-type: circle;
   list-style-position: outside
}

ul{ list-style: circle outside}

两段代码效果是一样的！

CSS盒模型

什么是 CSS 盒模型？
　　 W3C 组织就建议把所有网页上的对象都放在一个 盒 (box) 中，设计师可以通过 创建定义来控制 这个盒的属性，这些 对象 包括段落、列表、标题、图片以及层。
盒模型主要定义四个区域 MBPC ：边界 ( m argin) 、边框 ( b order) 、填充 ( p adding) 和内容 ( c ontent) 。
margin ， background-color ， background-image ， padding ， content ， border 之间的层次、关系和相互影响。

CSS盒模型结构

边界属性设置

边界属性是 margin ，也称为外边距，表示盒子边框与页面边界或其他盒子之间的距离，属性值为长度值、百分数或 auto ，属性效果是围绕元素边框的“空白” 。
外边距还可以通过单边属性进行设置，不会影响其他外边距，且这些单边属性可以设置一个或多个，具有 4 个单边外边距属性：
margin-top ： 20px; margin-right ： 20px;
margin-bottom ： 20px; margin-left ： 20px;
margin:10px; /* 4 个边均为 10px */
margin:10px 20px ; /* 上下 | 左右* /
margin:10px 20px 30px; /* 上 | 右左 | 下* /
margin:10px 20px 30px 40px; /* 上 | 右 | 下 | 左* /
border-width : thin 、 medium 、 thick 、 length ； 复合属性，分 border- top -width 、 border- right -width 、 border- bottom -width 、 border- left -width 四个子属性。
border-style : none|dotted|dashed | solid|double|groove [ 凹型线 ］ |ridge ［ 凸型线 ］ inset ［ 嵌入线 ］ |outset ［ 嵌出线 ］ ;

    --复合属性，分top、right、bottom、left四个子属性。

border-color : 颜色关键字 | RGB 值 ;
border : 边框粗细  边框样式   边框颜色 ;

             border:2px solid #ff33ee;

填充属性设置

元素内边界主要是指边框和内部元素之间的 空白距离 ，利用 padding 属性设置元素内的边界时，也包括 5 个属性，同样也有四种设置方法。
基本语法：

padding:长度 | 百分比

padding-top、padding-right、padding-bottom:同上

padding:20px 30px 40px 60px;/**/

padding:20px 30px 40px; /* 上|右|下|左*/

padding:20px 30px; /* 上|左右|下*/

padding:20px; /* 上右下左均相同*/

课后练习

录入如下代码，注意观察行级元素和块级元素的区别。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>块级元素与行级元素高宽度的区别</title>
<style>
.special{
	border:1px solid #036;
	width:200px;
	height:50px;
	background:#ccc;
	margin:5px;
	/*display:block;*/
	}
</style>
</head>

<body>
<div class="special">这是div元素</div>
<span class="special">这是span元素</span>
</body>
</html>
  • 网页标题：文档流定位
  • 网页主体内容为：

<div id="nav">

         <a href="#">链接1</a><a href="#">链接2</a><a href="#">链接3</a>

</div>

  • 使用内部样式表为网页设置如下样式效果：
  • 使用全局样式清除浏览器的默认值。
  • nav导航栏相对于页面居中对齐显示，宽300px，文本居中对齐。
  • a标签的样式：宽80px，高30px；下边框线设置为：1px灰色实线；字体大小14px，文本居中对齐，行高30px；文本没有下划线。
  • 鼠标悬停是超链接的样式：白色文字，灰色背景，1px的实线边框，其中设置上右左边框线的颜色为橙色。
  • 如果想到达到如下图所示的显示效果，还需要设置a标签的什么属性？ 请将其加入到a标签的样式中。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文档流定位</title>
<style>
	*{margin:0;
	padding:0;
	}
	#nav{
		margin:0 auto;
		width:300px;
		text-align:center;
	}
	a{
		width:80px;
		height:30px;
		border-bottom:1px solid #666;
		font-size:14px;
		text-align:center;
		line-height:30px;
		height:30px;
		width:80px;
		text-decoration:none;
		display:inline-block;
	}
	a:hover{
		color:#fff;
		background-color:#999;
		border:1px solid;
		border-top-color:#FF8000;
		border-right-color:#FF8000;
		border-left-color:#FF8000;
	}
</style>
</head>

<body>
    <div id="nav">
        <a href="#">链接1</a>
        <a href="#">链接2</a>
        <a href="#">链接3</a>
    </div>
</body>
</html>

总结

介绍了 CSS 的颜色、背景、列表 等样式属性。 这些属性有的具有子属性，从不同方面描述外观样式，因而比较灵活，可以使用单个子属性定义某一方面的样式，也可以使用复合属性定义整体的样式，在使用时应注意属性与属性之间的顺序及制约关系。
重点介绍了 CSS 盒模型，它是 CSS 的精华，同时也是学习的难点。把页面元素 作为 “盒子”， 则 元素 有 边界 (margin) 、边框 (border) 、填充 (padding) 、元素内容 (content) 这些重要概念。盒子具有 4 条边，所以这些属性都各有 4 个单边子属性，在使用时可以直接对某一条边应用单边子属性设置其样式，也可以按照一定顺序依次设置各边的样式，设置方式比较灵活。

希望你开心，希望你健康，希望你幸福，希望你点赞！

最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！

喵喵喵，你对我真的很重要！

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

在线多端口排课教务管理工具：教育机构管理的得力助手

在线多端口排课教务管理工具：教育机构管理的得力助手

在现代教育中&#xff0c;教务管理是一个复杂而重要的任务。为了简化这一过程&#xff0c;许多在线教务管理工具应运而生。今天&#xff0c;我将向大家介绍一款名为乔拓云的在线多端口排课教务管理工具。 首先&#xff0c;乔拓云是一个功能强大的教务管理系统。它不仅提供了小程…
阅读更多...
源码：Spring常规Bean创建过程

源码：Spring常规Bean创建过程

Bean创建过程&#xff1a; 一、版本 5.3.10二、学习内容 Bean创建过程源码三、Bean生命周期 时间轴地址&#xff1a;点击 四、bean创建过程脑图总结 脑图地址&#xff1a;点击 五、源码过程 说明&#xff1a; bean创建入口一般都是通过getBean(xxx);方法进入的&#xf…
阅读更多...
【论文阅读】Can Large Language Models Empower Molecular Property Prediction?

【论文阅读】Can Large Language Models Empower Molecular Property Prediction?

文章目录 0、基本信息1、研究动机2、创新性3、方法论4、实验结果 0、基本信息 作者&#xff1a;Chen Qian, Huayi Tang, Zhirui Yang文章链接&#xff1a;Can Large Language Models Empower Molecular Property Prediction?代码链接&#xff1a;Can Large Language Models E…
阅读更多...
Java项目：10 Springboot的电商书城管理系统

Java项目：10 Springboot的电商书城管理系统

作者主页&#xff1a;源码空间codegym 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 项目介绍 该系统分为前台展示和后台管理两大模块&#xff0c;前台主要是为消费者服务。该子系统实现了注册&#xff0c;登录&#xff0c;以及从浏览、下…
阅读更多...
栈、队列专题

栈、队列专题

文章目录 栈栈的概述栈的实现栈在函数调用中的应用栈在表达式求值中的应用逆波兰表达式求值 栈在括号匹配中的应用有效的括号最长的有效括号删除字符串中的所有相邻重复项 如何获取栈内最小元素呢如何实现浏览器的前进和后退 队列队列的定义队列的实现循环队列队列的应用队列在…
阅读更多...
解决百度地图在模拟器上运行报 java.lang.IllegalArgumentException: No config chosen问题

解决百度地图在模拟器上运行报 java.lang.IllegalArgumentException: No config chosen问题

解决百度地图在模拟器上运行报 java.lang.IllegalArgumentException: No config chosen 问题 1. 问题复现 在近期公司使用模拟器(网易MuMu)进行项目演示时&#xff0c;在进入存在百度地图(Android版本 7.4.2版本)之后&#xff0c;页面出现奔溃&#xff0c;后台日志为&#xf…
阅读更多...
比吸收率（SAR）

比吸收率（SAR）

本文旨在介绍比吸收率&#xff08;Specific Absorption Rate&#xff09;的基本知识。搬运自https://www.antenna-theory.com。英语够用的朋友可以直接移步。感谢网站创始人Peter Joseph Bevelacqua教授的无私奉献。 ------------------我是分隔线------------------- 比吸收…
阅读更多...
Halcon 一维测量

Halcon 一维测量

文章目录 算子矩形算子弧形算子移动到新的参考点 Halcon 案例测量保险丝的宽度&#xff08;边缘对测量&#xff09;使用助手进行测量 halcon 案例获取芯片引脚的个数平均宽度距离&#xff0c;连续两个边缘的距离&#xff08;measure_pos &#xff09;halcon 定位测量Halcon 测量…
阅读更多...
23 SEMC外扩SDRAM

23 SEMC外扩SDRAM

文章目录 23.1 SDRAM 控制原理23.2 SEMC 简介 23.1 SDRAM 控制原理 RT1052 系列芯片扩展内存时可以选择 SRAM 和 SDRAM 由于 SDRAM 的“容量/价格”比较高&#xff0c;即使用 SDRAM 要比 SRAM 要划算得多。 给 RT1052 芯片扩展内存与给 PC 扩展内存的原理是一样的 PC 上一般…
阅读更多...
庞伟：《一本书读懂企业破产法》——企业危机解决之道

庞伟：《一本书读懂企业破产法》——企业危机解决之道

在当今复杂多变的市场环境中&#xff0c;企业破产问题日益凸显。如何妥善解决企业危机&#xff0c;保障各方利益&#xff0c;成为了业界关注的焦点恰逢北京市亿达律师事务所成功入选第一届北京市破产管理人协会并成为会员单位之际&#xff0c;为此&#xff0c;北京市亿达律师事…
阅读更多...
（2023版）斯坦福CS231n学习笔记：DL与CV教程 (56) | 卷积神经网络

（2023版）斯坦福CS231n学习笔记：DL与CV教程 (56) | 卷积神经网络

前言 &#x1f4da; 笔记专栏&#xff1a;斯坦福CS231N&#xff1a;面向视觉识别的卷积神经网络&#xff08;23&#xff09;&#x1f517; 课程链接&#xff1a;https://www.bilibili.com/video/BV1xV411R7i5&#x1f4bb; CS231n: 深度学习计算机视觉&#xff08;2017&#xf…
阅读更多...
多目标优化中常用的差分进化算法DE【2】

多目标优化中常用的差分进化算法DE【2】

# 多目标优化中常用的进化算法 1、链接一 2、链接二 #后续继续补充多目标的差分进化算法MODE的应用 此链接介绍很详细&#xff0c;此处用来分享学习&#xff0c;后续有问题会继续进行补充。 如果你觉得不错&#xff0c;佛系随缘打赏&#xff0c;感谢&#xff0c;你的支持是…
阅读更多...
（六）深入理解Bluez协议栈之“GATT Client Profile”

（六）深入理解Bluez协议栈之“GATT Client Profile”

前言： 本章节我们继续介绍GATT Client Profile的实现，参考的程序是tools\btgatt-client.c，需要注意的一点，在./configure时，需要添加 --enable-test --enable-testing才会编译该c文件，编译完成后，生成的可执行程序为btgatt-client。本文主要以btgatt-client运行时可能会…
阅读更多...
分布式ID（2）：雪花算法生成ID

分布式ID（2）：雪花算法生成ID

1 雪花算法简介 这种方案大致来说是一种以划分命名空间（UUID也算，由于比较常见，所以单独分析）来生成ID的一种算法，这种方案把64-bit分别划分成多段，分开来标示机器、时间等，比如在snowflake中的64-bit分别表示如下图（图片来自网络）所示： 41-bit的时间可以表示（1L&l…
阅读更多...
ARM 1.16

ARM 1.16

TCP的特点 面向连接 面向连接&#xff0c;是指发送数据之前必须在两端建立连接。建立连接的方法是“三次握手”&#xff0c;这样能建立可靠的连接。建立连接&#xff0c;是为数据的可靠传输打下了基础。 仅支持单播传输 每条TCP传输连接只能有两个端点&#…
阅读更多...
面试题16.15.珠玑妙算

面试题16.15.珠玑妙算

前言 这两天突然发现力扣上还是有我能写出来的题的&#xff0c;虽说都是简单级别的&#xff08;以及一道中等的题&#xff09;&#xff0c;但是能写出来力扣真的太开心了&#xff0c;&#xff08;大佬把我这段话当个玩笑就行了&#xff09;&#xff0c;于是乎&#xff0c;我觉…
阅读更多...
linux单机部署mysql(离线环境解压即可)

linux单机部署mysql(离线环境解压即可)

一、下载官网压缩包&#xff08;tar.gz&#xff09; MySQL :: Download MySQL Community Serverhttps://dev.mysql.com/downloads/mysql/根据自己的操作系统发行版本、位数、gclib版本、mysql版本来选择对应的压缩包 比如我是 linux系统debian10&#xff08;官网只有linux ge…
阅读更多...
Doris配置外表以及多个Hive外表的配置

Doris配置外表以及多个Hive外表的配置

1.场景分析 以Clickhouse、Doris、Starrocks等为代表的mpp分析数据库正在快速的兴起&#xff0c;以其高效查询、跨库整合能力收到广大技术人员的喜爱。本文主要浅显介绍下作者在使用Doris时&#xff0c;通过建立catlog进行跨库查询。 废话不多少&#xff0c;直接上代码 2.相关…
阅读更多...
RIP基础实验配置

RIP基础实验配置

要使用RIP完成以上命令需求 1&#xff0c;首先划分ip地址 有图可见有四个网段需要划分 192.168.1.0/26 192.168.3.0/26 192.168.7.0/26 192.168.5.0/26 给两个骨干网段&#xff0c;给两个环回接口&#xff0c;由下图所示&#xff1a; 其次&#xff0c;规划好ip后在各个接口…
阅读更多...
hash应用

hash应用

目录 一、位图 1.1、引出位图 1.2、位图的概念 1.3、位图的应用 1.4、位图模拟实现 二、布隆过滤器 2.1、什么是布隆过滤器 2.2、布隆过滤器应用的场景 2.3、布隆过滤器的原理 2.4、布隆过滤器的查找 2.5、布隆过滤器的插入 2.6、布隆过滤器的删除 2.7、布隆过滤器…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023