网页制作11-html,css,javascript初认识のCCS样式列表(下)

六、外边距,内边距,边框属性

盒子模型:

1、外边距:margin

img{
            margin:40px 30px 10px 20px;
        }/*外边距复合属性:上右下左*/

2、内边距

body{
            padding:10px 20px 40px 30px;
        }/*内边距复合属性:上右下左*/

3、边框

1)边框样式

取值含义
none默认值无边框

 dotted

点线边框
dashed虚线边框
solid实线边框
double双实线边框
groove边框具有立体感的沟槽
ridge边框长脊形
inset使整个边框凹陷
outset使整个边框凸起

.b{
            border-top-style: dashed;
            border-right-style: solid;
            border-left-style: double;
            border-bottom-style: groove;
            line-height: 20px;
        }

 效果图如下:

2)边框宽度 border-width

medium默认宽度
thin小于默认宽度
thick大于默认宽度

border-top-width:上

border-right-width: 右;
border-left-width:左;
border-bottom-width: 下;

综合:border-width: 3px 3px 4px 9px;

3) 边框颜色:border-color:

border-color:red yellow blue green;综合

border-top-color:black;上

border-right-color: 右;
border-left-color:左;
border-bottom-color: 下;

4)边框属性综合border(分方向综合合并宽度,样式和颜色)

border-top:2px dasher black; 

border-right: 2px dasher black; 
border-left:2px dasher black; 
border-bottom: 2px dasher black; 

<style type="text/css">.img1{margin:10px 30px 10px 90px;}/*外边距复合属性:上右下左*/body{padding:10px 20px 40px 30px;}.b{font-size: 30px;border-top-style: dashed;border-right-style: solid;border-left-style: double;border-bottom-style: groove;line-height: 49px;border-width: 2px;border-color:red yellow blue green;}/*盒子模型*/.d{position: absolute;top:5%;left:20%;margin:5px;/*绝对定位*/z-index: -1;}/*置于最底层*/</style>
</head><body><img src="bottle.jpg" width="400" align="left" class="img1" alt=""/><!--元素定位--><span class="b"><!--边框样式,颜色,宽度设置-->1、The art of living is to know when to hold fast and when to let go. For life is a paradox: it enjoins us to cling to its many gifts even while it ordains their eventual relinquishment.The rabbis of old put it this way: “A man comes to this world with his fist clenched, but when he dies, his hand is open.”生活的艺术在于懂得什么时候追求,什么时候放弃。因为生活就是一个矛盾体:它要我们紧紧抓住它赐予我们的生命之礼,然后最终又让它们从我们手中跑掉。老先生们说:“人们紧握着拳头来到这个世界上,离开这个世界时却摊开了双手。”Surely we ought to hold fast to life, for it is wondrous, and full of a beauty that breaks through every pore of God’s own earth.We know that this is so, but all too often we recognize this truth only in our backward glance when we remember what was and then suddenly realize that it is no more.当然我们应该紧紧把握生活,因为它美妙得不可思议,充满了从上帝的每个毛孔里蹦出来的美。我们都清楚这一点,但我们常常只有在回首往事时才会想去过去,才会突然意识到过去永远地消逝了,才会承认这个道理。(from:网络,《生活的艺术(The art of living)》)</span><hr/><img src="firework.png" class="d" alt=""><!--绝对定位--></body>
</html>

七、定位属性

1、语法表

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

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

相关文章

爬虫Incapsula reese84加密案例:Etihad航空

声明: 该文章为学习使用,严禁用于商业用途和非法用途,违者后果自负,由此产生的一切后果均与作者无关 一、找出需要加密的参数 1.js运行 atob(‘aHR0cHM6Ly93d3cuZXRpaGFkLmNvbS96aC1jbi8=’) 拿到网址,F12打开调试工具,随便搜索航班,切换到network搜索一个时间点可以找…

Unity 适用Canvas 为任一渲染模式的UI 拖拽

RectTransformUtility-ScreenPointToWorldPointInRectangle - Unity 脚本 API 将一个屏幕空间点转换为世界空间中位于给定RectTransform 平面上的一个位置。 实现 获取平面位置。 parentRT transform.parent as RectTransform; 继承IPointerDownHandler 和IDragHandler …

【HDLbits--FSM续(二)】

HDLbits--FSM-2 本篇文章接续介绍Verilog中FSM典型案例&#xff1b; 题目&#xff1a;Lemmings3 module top_module(input clk,input areset, // Freshly brainwashed Lemmings walk left.input bump_left,input bump_right,input ground,input dig,output walk_left,outpu…

安装与配置 STK-MATLAB 接口

STK版本为11.6 Matlab版本为R2018a STK 提供 Connect 和 Object Model (COM) 两种接口与 MATLAB 交互&#xff0c;推荐使用 COM接口进行二次开发。 确保安装了 STK&#xff0c;并且 MATLAB 可以访问 STK Object Model。 在 MATLAB 中运行&#xff1a; % 添加 STK COM 库&#…

docker-compose Install reranker(fastgpt支持) GPU模式

前言BGE-重新排名器 与 embedding 模型不同&#xff0c;reranker 或 cross-encoder 使用 question 和 document 作为输入&#xff0c;直接输出相似性而不是 embedding。 为了平衡准确性和时间成本&#xff0c;cross-encoder 被广泛用于对其他简单模型检索到的前 k 个文档进行重…

计算机网络(1) 网络通信基础,协议介绍,通信框架

网络结构模式 C/S-----客户端和服务器 B/S -----浏览器服务器 MAC地址 每一个网卡都拥有独一无二的48位串行号&#xff0c;也即MAC地址&#xff0c;也叫做物理地址、硬件地址或者是局域网地址 MAC地址表示为12个16进制数 如00-16-EA-AE-3C-40 &#xff08;每一个数可以用四个…

OpenCV计算摄影学(16)调整图像光照效果函数illuminationChange()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 对选定区域内的梯度场应用适当的非线性变换&#xff0c;然后通过泊松求解器重新积分&#xff0c;可以局部修改图像的表观照明。 cv::illuminati…

Arcgis中添加脚本工具箱

文章目录 准备资料1、打开arcmap2、找到目录窗口3、复制粘贴工具箱的路径4、添加或者确认python脚本路径准备资料 (1)工具箱 (2)python脚本 1、打开arcmap 2、找到目录窗口 3、复制粘贴工具箱的路径 4、添加或者确认python脚本路径 脚本上右键属性(注意:脚本内容和路径…

贪心算法一

> 作者&#xff1a;დ旧言~ > 座右铭&#xff1a;松树千年终是朽&#xff0c;槿花一日自为荣。 > 目标&#xff1a;了解什么是贪心算法&#xff0c;并且掌握贪心算法。 > 毒鸡汤&#xff1a;有些事情&#xff0c;总是不明白&#xff0c;所以我不会坚持。早安! >…

专业工具,杜绝一切垃圾残留!

在安装大多数软件时均会在系统注册表中创建相应的条目。如果卸载后仍然存在注册表残留&#xff0c;可能会导致再次安装时出现失败&#xff0c;同时也会对系统性能和存储空间产生负面影响。常见的卸载残留包括注册表项、程序文件夹、用户数据文件夹、临时文件以及相关插件等。 …

【音视频】ffplay常用命令

一、 ffplay常用命令 -x width&#xff1a;强制显示宽度-y height&#xff1a;强制显示高度 强制以 640*360的宽高显示 ffplay 2.mp4 -x 640 -y 360 效果如下 -fs 全屏显示 ffplay -fs 2.mp4效果如下&#xff1a; -an 禁用音频&#xff08;不播放声音&#xff09;-vn 禁…

【STM32】STM32系列产品以及新手入门的STM32F103

&#x1f4e2; STM32F103xC/D/E 系列是一款高性能、低功耗的 32 位 MCU&#xff0c;适用于工业、汽车、消费电子等领域&#xff1b;基于 ARM Cortex-M3&#xff0c;主频最高 72MHz&#xff0c;支持 512KB Flash、64KB SRAM&#xff0c;适合复杂嵌入式应用&#xff0c;提供丰富的…

防火墙虚拟系统实验

拓扑图 需求一 安全策略要求&#xff1a; 1、只存在一个公网IP地址&#xff0c;公司内网所有部门都需要借用同一个接口访问外网 2、财务部禁止访问Internet&#xff0c;研发部门只有部分员工可以访问Internet&#xff0c;行政部门全部可以访问互联网 3、为三个部门的虚拟系统分…

K8s 1.27.1 实战系列(四)验证集群及应用部署测试

一、验证集群可用性 1、检查节点 kubectl get nodes ------------------------------------------------------ NAME STATUS ROLES AGE VERSION k8s-master Ready control-plane 3h48m v1.27.1 k8s-node1 Ready <none> …

IDC权威认证!永洪科技入选 IDC「GBI图谱」,点亮生成式 BI 价值灯塔

大数据市场正在稳步前进&#xff0c;生成式AI已成为厂商服务的重点方向&#xff0c;其发展离不开数据底座建设和数据工程管理&#xff0c;反过来AI也会帮助开发运维人员、业务人员和管理层更好地使用、查询数据。IDC调研数据显示&#xff0c;在生成式AI的驱动下&#xff0c;未来…

全面回顾复习——C++语法篇1(基于牛客网C++题库)

注&#xff1a;牛客网允许使用万能头文件#include<bits/stdc.h> 1、求类型长度——sizeof&#xff08;&#xff09;函数 2、将浮点数四舍五入——round&#xff08;&#xff09;函数——前面如果加上static_cast会更安全一些 在C语言中可以使用printf&#xff08;“.0l…

2025.3.9机器学习笔记:文献阅读

2025.3.9周报 一、文献阅读题目信息摘要Abstract创新点网络架构实验结论不足以及展望 一、文献阅读 题目信息 题目&#xff1a; Time-series generative adversarial networks for flood forecasting期刊&#xff1a; Journal of Hydrology作者&#xff1a; Peiyao Weng, Yu …

数字IC后端实现教程| Clock Gating相关clock tree案例解析

今天小编给大家分享几个跟时钟树综合&#xff0c;clock tree相关的典型问题。 数字IC后端设计实现之分段长clock tree经典案例 Q1:星主好&#xff0c;下面的图是通过duplicate icg来解setup违例的示意图。我没看懂这个 duplicate操作在cts阶段是怎么实现的&#xff0c;用什么…

K8S学习之基础十一:k8s中容器钩子

容器钩子 容器钩子分为post-start和pre-stop post-start&#xff1a;容器启动后执行的命令 pre-stop&#xff1a;容器关闭前执行的命令&#xff0c;可用于优雅关闭 # 分别定义两个钩子&#xff0c;启动pod后更新index.html&#xff0c;关闭pod前正常关闭服务 vi post-pre.…

RabbitMQ知识点

1.为什么需要消息队列&#xff1f; RabbitMQ体系结构 操作001&#xff1a;RabbitMQ安装 二、安装 # 拉取镜像 docker pull rabbitmq:3.13-management ​ # -d 参数&#xff1a;后台运行 Docker 容器 # --name 参数&#xff1a;设置容器名称 # -p 参数&#xff1a;映射端口号&…