HTML--CSS--图片和背景样式

图片样式

图片大小

最基本的应该就是对大小的管理

width:像素值; 宽度
height:像素值; 高度

<!DOCTYPE html>
<html>
<head> 
    <title>这是一个标题</title>
    <meta charset="utf-8"/>
    <style>
        img
        {
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
    <img src="小猫.jpg">
</body>
</html>

图片边框

一样使用border进行定义

<!DOCTYPE html>
<html>
<head> 
    <title>这是一个标题</title>
    <meta charset="utf-8"/>
    <style>
        img
        {
            width: 300px;
            height: 300px;
            border: 5px blue solid;
        }
    </style>
</head>
<body>
    <img src="小猫.jpg">
</body>
</html>

效果：
在这里插入图片描述

图片对齐

图片对齐和文本的对齐是一样的，也是用 text-align进行，但需要注意不能直接在 img定义，需要在父元素处定义
属性依然是：

left 左对齐
center 居中
right 右对齐

<!DOCTYPE html>
<html>
<head> 
    <title>这是一个标题</title>
    <meta charset="utf-8"/>
    <style>
        img
        {
            width: 30px;
            height: 30px;
            border: 5px blue solid;
            /*放在这里是不生效的*/
            text-align: right;
        }
        /*需要单独定义，在父元素中才能生效*/
        .myimg {text-align: center;}
    </style>
</head>
<body>
    <div class="myimg">
        <img src="小猫.jpg">
    </div>
    <img src="小猫.jpg">
</body>
</html>

效果：
在这里插入图片描述

垂直对齐

用法：vertical-align:取值;
属性：

top 顶部对齐
middle 中部对齐
baseline 基线对齐
bottom 底部对齐

例子：

<!DOCTYPE html>
<html>
<head> 
    <title>这是一个标题</title>
    <meta charset="utf-8"/>
    <style>
        img
        {
            width: 30px;
            height: 30px;
            border: 5px blue solid;
        }
        #a{vertical-align: top;}
        #b{vertical-align: middle;}
        #c{vertical-align: bottom;}
        #d{vertical-align: baseline;}        
    </style>
</head>
<body>
    <img id="a" src="小猫.jpg">
    <img id="b" src="小猫.jpg">
    <img id="c" src="小猫.jpg">
    <img id="d" src="小猫.jpg">
</body>
</html>

效果：
emm~~~貌似看起来就是这样，暂时想不到这个实际运用起来的时候的作用
在这里插入图片描述

文字环绕 float

属性：

left 元素向左浮动
right 元素向右浮动

例子：

<!DOCTYPE html>
<html>
<head> 
    <title>这是一个标题</title>
    <meta charset="utf-8"/>
    <style>
        img
        {
            width: 30px;
            height: 30px;
            border: 5px blue solid;
            /*float: left;*/
        } 
    </style>
</head>
<body>
    <img id="a" src="小猫.jpg">
    <p>怎么算是文字环绕型</p>
</body>
</html>

这时候，网页效果是：
在这里插入图片描述
当设定了文字环绕后

<!DOCTYPE html>
<html>
<head> 
    <title>这是一个标题</title>
    <meta charset="utf-8"/>
    <style>
        img
        {
            width: 30px;
            height: 30px;
            border: 5px blue solid;
            float: left;
        } 
    </style>
</head>
<body>
    <img id="a" src="小猫.jpg">
    <p>怎么算是文字环绕型</p>
</body>
</html>

效果：
在这里插入图片描述
emm~~~~~~
那我这样写可以吗？

<!DOCTYPE html>
<html>
<head> 
    <title>这是一个标题</title>
    <meta charset="utf-8"/>
    <style>
        img
        {
            width: 30px;
            height: 30px;
            border: 5px blue solid;
        }

    </style>
</head>
<body>
    <p>这算是手动的<img id="a" src="小猫.jpg">文字环绕型吗？</p>
    <p>怎么算是文字环绕型</p>
</body>
</html>

效果：
在这里插入图片描述
貌似也可以，强行把它夹在文字中间…

背景样式

属性：

background-image: url(); 图片背景
background-color: 颜色; 颜色背景
background-repeat: 属性; 背景图片如何重复铺陈
background-position: 值; 定义背景图片位置
background-attachment: fixed; 固定背景图片，使其不动

背景图片：

用法的话，放到div或父类内
值得注意的是，它不是直接把图片全显示在网页上，而是你网页有多大，他就铺多少，见下列代码和效果
#a{background-image: url(小猫.jpg);}

<!DOCTYPE html>
<html>
<head> 
    <title>这是一个标题</title>
    <meta charset="utf-8"/>
    <style>
        #a{background-image: url(小猫.jpg);}
    </style>
</head>
<body>
    <div id="a">
        <p>这是一句没有营养的话</p>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        
    </div>
</body>
</html>

效果：
在这里插入图片描述

背景颜色：

<!DOCTYPE html>
<html>
<head> 
    <title>这是一个标题</title>
    <meta charset="utf-8"/>
    <style>
        #a{background-color: aqua;}
    </style>
</head>
<body>
    <div id="a">
        <p>这是一句没有营养的话</p>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        
    </div>
</body>
</html>

效果：
在这里插入图片描述

背景图片重复

属性：

repeat 在水平方向和垂直方向上同时平铺（默认值）
repeat-x 只在水平方向上平铺
repeat-y 只在垂直方向上平铺
no-repeat 不平铺

如下例子：
定义了div的格式，背景图片
然后定义父类平铺

<!DOCTYPE html>
<html>
<head> 
    <title>这是一个标题</title>
    <meta charset="utf-8"/>
    <style>
        div
        {
            background-image: url(x.gif);
        }

        #a{background-repeat: repeat;}
    </style>
</head>
<body>
    <div id="a">
        <p>这是一句没有营养的话</p>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        
    </div>
</body>
</html>

效果：
在这里插入图片描述

背景图片位置

用法：
background-position: 水平距离像素 垂直距离像素; 这里的距离指到网页左边界和上边界的距离
也可以用关键字，对应关系如下
其实就是几个关键字组合来定义位置，上下左右中
top 上
center 中
right 右
bottom 下
left 左
用的时候，关键字可以两两组合
如 right bottom 就代表右下

<!DOCTYPE html>
<html>
<head> 
    <title>这是一个标题</title>
    <meta charset="utf-8"/>
    <style>
        div
        {
            width: 100px;
            height: 100px;
            background-position: 50px 50px;
            background-image: url(x.gif);
            background-repeat: no-repeat;
        }
        /* #a{background-repeat: no-repeat;} */
    </style>
</head>
<body>
    <div id="a">
        <p>这是一句没有营养的话</p>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        
    </div>
</body>
</html>

效果：
在这里插入图片描述

背景图片固定

用法：
background-attachment: fixed; 这样就是让背景图片固定在一处，网页滚动不随着变化,一般应该用不到
background-attachment: scroll; 随元素滚动，这个是默认的，所以这个应该基本用不到

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

从零开始的OpenGL光栅化渲染器构建2-冯式光照

从零开始的OpenGL光栅化渲染器构建2-冯式光照

冯式光照的构成 冯式光照模型(Phong Lighting Model)的主要结构由三个分量组成&#xff1a;环境(Ambient)、漫反射(Diffuse)和镜面(Specular)光照。 环境光 把环境光照添加到场景里非常简单。我们用光的颜色乘以一个很小的常量环境因子&#xff0c;再乘以物体的颜色&#xf…
阅读更多...
【矩阵快速幂】封装类及测试用例及样例

【矩阵快速幂】封装类及测试用例及样例

作者推荐 视频算法专题 通俗的说&#xff0c;就是矩阵的乘方。 封装类 核心代码 class CMat { public:// 矩阵乘法static vector<vector<long long>> multiply(const vector<vector<long long>>& a, const vector<vector<long long>…
阅读更多...
模拟器安装XPosed框架教程

模拟器安装XPosed框架教程

Xposed框架下载&#xff08;搞不懂就先看完本篇教程再下载&#xff09; 99%的情况只需要下载里面的XPosed鸭就行了 安卓8及以下XPosed框架 - 多开鸭模拟器安装XPosed框架图文视频教程 关于本站XPosed框架的说明 XPosed框架(即XP框架)&#xff0c;由rovo89开发。适用于安卓7以…
阅读更多...
任务6：启动Hadoop集群并测试

任务6：启动Hadoop集群并测试

任务描述 知识点&#xff1a; 掌握Hadoop集群的启动 重 点&#xff1a; Hadoop集群的格式化流程Hadoop集群的启动流程 内 容&#xff1a; 格式化Hadoop集群启动测试Hadoop集群 任务指导 启动Hadoop集群并测试&#xff0c;过程如下&#xff1a; 初始化HDFS&#xff1…
阅读更多...
C++面试宝典第19题：最长公共前缀

C++面试宝典第19题：最长公共前缀

题目 编写一个函数来查找字符串数组中的最长公共前缀，如果不存在公共前缀，返回空字符串""。说明：所有输入只包含小写字母a-z。 示例1： 输入: ["flower", "flow", "flight"]输出: "fl" 示例2： 输入: ["dog",…
阅读更多...
指针面试题详解

指针面试题详解

文章目录 指针笔试题解析笔试题1笔试题2笔试题3笔试题4笔试题5笔试题6笔试题7笔试题8 总结 指针笔试题解析 数组名是首元素地址,两种情况除外: 1.sizeof(数组名) , 这是这是计算整个数组的大小,单位是字节; 2.&数组名 , 得出的是整个数组的地址; 笔试题1 #include<st…
阅读更多...
学习Vue配置代理总结

学习Vue配置代理总结

今天学习了Vue的配置代理&#xff0c;当我们想要向服务器取回来数据时就先要向服务器发送请求&#xff0c;但前端发送请求的方式也有很多种&#xff0c;首先是发送请求的鼻祖JS的XMLHttpRequest&#xff08;xhr&#xff09;&#xff0c;它操作起来相对麻烦&#xff0c;开发中也…
阅读更多...
基于STM32的CMT液晶屏控制器驱动程序设计与优化

基于STM32的CMT液晶屏控制器驱动程序设计与优化

本文以STM32微控制器为基础&#xff0c;设计并优化了一个用于控制CMT液晶屏的驱动程序。在设计过程中&#xff0c;我们首先介绍了液晶屏的基本工作原理&#xff0c;包括CMT液晶屏的结构和信号传输机制。然后&#xff0c;我们详细讨论了STM32微控制器的GPIO、SPI和DMA模块的特性…
阅读更多...
基于RTOS（实时操作系统）的CMT液晶屏控制器驱动程序开发与实现

基于RTOS（实时操作系统）的CMT液晶屏控制器驱动程序开发与实现

RTOS&#xff08;实时操作系统&#xff09;提供了一种有效的方式来管理和调度多任务系统&#xff0c;对于液晶屏控制器的驱动程序开发来说&#xff0c;RTOS能够提供良好的实时性和可靠性。本文以RTOS为基础&#xff0c;设计并实现了一个用于控制CMT液晶屏的驱动程序。在设计过程…
阅读更多...
微信小程序-----WXML模板语法之数据绑定与事件绑定

微信小程序-----WXML模板语法之数据绑定与事件绑定

目录 前言 一、数据绑定 1.Mustache语法 2.Mustache 语法的应用场景 &#xff08;1&#xff09;绑定内容 &#xff08;2&#xff09;绑定属性 &#xff08;3&#xff09;运算&#xff08;三元运算、算术运算等) 二、事件绑定 1.事件 &#xff08;1&#xff09;什么是…
阅读更多...
Java安装（可多版本共存）及IIntelliJ IDEA环境搭建汉化（保姆级教程！）

Java安装（可多版本共存）及IIntelliJ IDEA环境搭建汉化（保姆级教程！）

编程如画&#xff0c;我是panda&#xff01; 这次给大家出一期JAVA安装以及IIntelliJ IDEA的安装教程 IIntelliJ IDEA分为社区版和专业版&#xff0c;两版的教程都有&#xff0c;小伙伴们根据需要自行选择使用 并且我会讲解一台计算机中多个版本JAVA JDK配置安装 前言 我最早接…
阅读更多...
尼科彻斯定理----C语言

尼科彻斯定理----C语言

大家好我是Beilef许久未见了&#xff0c;小弟学校考试刚结束。这个过程懂的都懂。痛------ 文章目录 目录 文章目录 前言(一不好懂可以直接跳到二&#xff09; 一、尼科彻斯定理是什么&#xff1f; 二、尼科彻斯定理解析 这是ai的回答 尼科彻斯定理&#xff08;Nikomačs theor…
阅读更多...
Django项目中的默认文件都有什么用

Django项目中的默认文件都有什么用

manager.py&#xff1a; 是django用于管理本项目的命令行工具&#xff0c;之后进行站点运行&#xff0c;数据库自动生成等都是通过本文件完成。 djangoStudy/__init__.py&#xff1a; 告诉python该目录是一个python包&#xff0c;暂无内容&#xff0c;后期一些工具的初始化可…
阅读更多...
SPI通信讲解

SPI通信讲解

了解SPI通信对于我们了解通信有非常重要的意义。 SPI&#xff08;Serial Peripheral Interface&#xff09;是由Motorola公司&#xff08;摩托罗拉&#xff09;开发的一种通用数据总线 四根通信线&#xff1a; SCK&#xff08;Serial Clock&#xff09;&#xff1a;时钟线&a…
阅读更多...
PHP反序列化总结4--原生类总结

PHP反序列化总结4--原生类总结

原生类的简要介绍以及原生类和反序列化的关系 PHP 原生类指的是 PHP 内置的类&#xff0c;它们可以直接在 PHP 代码中使用且无需安装或导入任何库&#xff0c;相当于代码中的内置方法例如echo &#xff0c;print等等可以直接调用&#xff0c;但是原生类就是可以就直接php中直接…
阅读更多...
【存储过程和存储函数】MySQL

【存储过程和存储函数】MySQL

存储过程和存储函数 一、实验目的 掌握通过SQL语句CREATE PROCEDURE创建存储过程的方法。 掌握使用SQL语句CALL调用存储过程的方法。 掌握使用SQL语句ALTER PROCEDURE修改存储过程的方法。 掌握使用SQL语句DROP PROCEDURE删除存储过程的方法。 掌握使用CREATE FUNCTION创建…
阅读更多...
【ESP32接入语言大模型之智谱清言】

【ESP32接入语言大模型之智谱清言】

1. 智谱清言 讲解视频&#xff1a; 随着人工智能技术的不断发展&#xff0c;自然语言处理领域也得到了广泛的关注和应用。智谱清言作为千亿参数对话模型 基于ChatGLM2模型开发&#xff0c;支持多轮对话&#xff0c;具备内容创作、信息归纳总结等能力。可以快速注册体验中国版…
阅读更多...
机器学习 | 无监督聚类K-means和混合高斯模型

机器学习 | 无监督聚类K-means和混合高斯模型

机器学习 | 无监督聚类K-means和混合高斯模型 1. 实验目的 实现一个K-means算法和混合高斯模型&#xff0c;并用EM算法估计模型中的参数。 2. 实验内容 用高斯分布产生 k k k个高斯分布的数据&#xff08;不同均值和方差&#xff09;&#xff08;其中参数自己设定&#xff…
阅读更多...
第十三讲 单片机驱动彩色液晶屏 bin档的烧录方法

第十三讲 单片机驱动彩色液晶屏 bin档的烧录方法

单片机驱动TFT彩色液晶屏系列讲座 目录 第一讲 单片机最小系统STM32F103C6T6通过RA8889驱动彩色液晶屏播放视频 第二讲 单片机最小系统STM32F103C6T6控制RA8889驱动彩色液晶屏硬件框架 第三讲 单片机驱动彩色液晶屏 控制RA8889软件:如何初始化 第四讲 单片机驱动彩色液晶屏 控…
阅读更多...
解锁 JavaScript 数组的强大功能：常用方法和属性详解（下）

解锁 JavaScript 数组的强大功能：常用方法和属性详解（下）

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…
阅读更多...
最新文章

Copyright @ 2022~2023