Java Web Day03_CSS样式

一、超级链接伪类

<a href=”#”>超级链接</>

a:link 未点击前
a:hover 鼠标悬停
a:active 鼠标正在点击(左键按着不放)
a:visited 点击后

加载顺序一般我们是按照:link -> visited -> hover -> active
列表样式

list-style 列表样式 none | disc | decimal | square | circle
list-style-type 列表样式none | decimal
list-style-image 为列表设置图片样式等价于disc
list-style-position 设置列表属性的位置 insade(在li之内) | outside (在li之外)

二、网页背景

background-color 背景颜色
background-image: url() 设置背景图片
background-repeat(设置背景重复方式): no-repeat(不重复) | repeat-x(横向重复) | repeat-y(纵向重复)
background-position(背景定位):

三、x轴 y轴 颜色渐变

  • 水平方式(left center right px像素) 垂直方式(top center bottom px像素)
    X轴百分比 y轴百分比
    background-size(设置背景的尺寸): auto | cover | contain | percentage(x像素 y像素)
  • 线性渐变
    background-image: linear-gradient(控制方向,颜色1,颜色2,颜色3……)
    控制方向:to left | to right | to top | to bottom | 40deg(代表多少度)
  • 径向渐变
    background-image:radial-gradient(颜色1,颜色2,颜色3……)

四、盒子模型

HTML里的所有标签(元素)都是一个平面结构、由立体结构组成。这称为盒子模型
盒子模型的三要素
border 边框
margin 外边距
padding 内边距

  • 使用经验:结合left | right | top | bottom 来控制
    border-width: 边框粗细(thin | medium | thick | px)
    border-style: 边框风格(solid(细线) | dashed(虚线) | dotted(点线) | double(双实线))
    border-color: 边框颜色

  • margin实现网页居中:
    margin: 0px auto;
    margin-left: auto;
    margin-right: auto;

五、盒子三要素

参数都遵循顺时针方向: 上 右 下 左 | 上下 左右
margin: 可以为负数 如: margin-top: -10px;
padding: 不可以为负数
盒子计算(box-sizing)
box-sizing:
content-box
border-box

1、 content-box含义:

content-box默认,盒子设置width属性之后,内容的宽度就等于width属性,
实际的宽度=border + padding + width

2、 border-box含义:

盒子设置width属性后,实际的宽度等于width。如果设置border | padding 它自动的将内容的width减缩。
实际的宽度=width
圆角边框
border-radius: 百分比 | 像素
给左上盒子设置圆角边框
border-top-left-radius: 50%;
盒子阴影
box-shadow: 盒子阴影类型 x轴阴影偏移量 y轴阴影偏移量 阴影模糊半径 颜色;
盒子阴影类型: inset(向内)
box-shadow: inset 0px 0px 5px blue;

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

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

相关文章

07-微服务架构之问题和解决方案的探讨

文章目录 前言一、服务发现与治理二、分布式数据管理三、分布式事务管理四、跨服务调用管理五、版本控制与发布管理六、运维管理 总结 前言 在上一章中&#xff0c;我们已经详细探讨了微服务设计的基本原则和步骤。现在&#xff0c;我们将开始实际运用微服务架构&#xff0c;然…

在 CentOS 上使用 Docker 运行 RabbitMQ

在 CentOS 上使用 Docker 运行 RabbitMQ 使用Docker来运行RabbitMQ非常方便&#xff0c;以下是一个简单的步骤&#xff0c;以YAML配置文件方式创建和运行RabbitMQ容器。 构建容器 创建Docker Compose文件 创建一个docker-compose.yml文件&#xff0c;内容如下&#xff1a; …

C# 将 Word 转化分享为电子期刊

目录 需求 方案分析 相关库引入 关键代码 Word 转 Pdf Pdf 转批量 Jpeg Jpeg 转为电子书 实现效果演示 小结 需求 曾经的一个项目&#xff0c;要求实现制作电子期刊定期发送给企业进行阅读&#xff0c;基本的需求如下&#xff1a; 1、由编辑人员使用 Microsoft Word…

KL散度、CrossEntropy详解

文章目录 0. 概述1. 信息量1.1 定义1.2 性质1.3 例子2. 熵 Entropy2.1 定义2.2 公式2.3 例子3. 交叉熵 Cross Entropy3.1 定义3.2 公式3.3 例子4. KL 散度(相对熵)4.1 公式

vue之全局请求loading

场景&#xff1a;我们往往在项目中会因为表单重复提交而烦恼&#xff0c;往往都会想到很高大上的两个词语——防抖、节流。但网上的很多方法都还是不够灵活、通用&#xff0c;那么下面介绍一下我的方法&#xff08;在最后&#xff09; 页面loading 往往都是一个页面写一堆loa…

MyBatis-Plus如何 关闭SQL日志打印

前段时间公司的同事都过来问我&#xff0c;hua哥公司的项目出问题了&#xff0c;关闭不了打印sql日记&#xff0c;项目用宝塔自己部署的&#xff0c;磁盘满了才发现大量的打印sql日记&#xff0c;他们百度过都按照网上的配置修改过不起作用&#xff0c;而且在调试时候也及为不方…

docker查看日志

1、查看容器所有日志 docker logs <容器名称或ID> 2、查看容器最新日志 docker logs -f <容器名称或ID> 3、查看指定时间范围内的容器日志 docker logs --since<开始时间> --until<结束时间> <容器名称或ID> docker logs --since2022-01-0…

mysql的asc和desc全称

原文&#xff1a;http://t.csdnimg.cn/BJ2sUhttp://t.csdnimg.cn/BJ2sU

[AutoSar]基础部分 RTE 02 S/R Port 显式/隐式

目录 关键词平台说明一、显式&#xff08;Explicit&#xff09;和隐式&#xff08;Implicit&#xff09;1.1 显式模式1.1.1code 二、隐式模式2.1 code 三、区别 关键词 嵌入式、C语言、autosar、EcuM、Rte 平台说明 项目ValueOSautosar OSautosar厂商vector芯片厂商TI编程语…

字符串逆序输出

逆序输出就是本来abc输出的&#xff0c;然后我想让他输出成cba&#xff0c;那么我们还是要用到for循环&#xff0c;只不过原先是从零开始往上加&#xff0c;这回呢&#xff0c;是从上面往下减 我们观察上面这个图片&#xff0c;我们想要输出olleh&#xff0c;那么我们就要从4开…

2024山东养老展,2024济南养老用品展览会5月27日开幕

飞鲨展览第六届中国&#xff08;济南&#xff09;国际养老服务业展览会&#xff0c;将于2024年5月27-29日举办&#xff1b; CSOLDE 2024第6届中国&#xff08;济南&#xff09;国际养老服务业展览会&#xff08;CSOLDE山东老博会&#xff09; CSOLDE 2024 sixth China (Jinan)…

2023 英特尔On技术创新大会直播 |探索视觉AI的无限可能

2023 英特尔On技术创新大会直播 | 探索视觉AI的无限可能 前言一未来的 AI&#xff1a;释放视觉 AI 真正潜力二AI技术突破、视觉Al挑战及前沿研究创新三全尺度视觉学习全尺度视觉学习示例1.GridConv 实现三维人体姿态估计更高准确率2.KW 预训练及迁移模型性能3.无数据增强稠密对…

Gin之GORM事务(转账操作)

禁用默认事务的操作 为了确保数据一致性,GORM 会在事务里执行写入操作(创建、更新、删除)。如果没有这方面的要求,您可以在初始化时禁用它,这将获得大约 30%+ 性能提升。 // 全局禁用 db, err := gorm.Open(sqlite.Open("gorm.db"), &gorm.Config{SkipDef…

基于DSP的IIR数字滤波器(论文+源码)

1.系统设计 在本次基于DSP的IIR数字低通滤波计中&#xff0c;拟以TMS320F28335来作为系统的主控制器&#xff0c;通过ADC0832模数转换芯片来对输入信号进行采集&#xff1b;通过TLC5615来将低通滤波后的信号进行输出&#xff1b;同时结合MATLAB仿真软件&#xff0c;对设计的II…

dart 学习之多个接口 以及mixin学习

如果一个类继承了多个接口&#xff0c;那么需要实现对应的所有方法 abstract class A {printA(); }abstract class B {printB(); }class C implements A, B {overrideprintA() {print("C.a");}overrideprintB() {print("C.b");} }mixin既不是继承也不是接…

为什么GRU和LSTM能够缓解梯度消失或梯度爆炸问题?

1、什么是梯度消失&#xff08;gradient vanishing&#xff09;&#xff1f; 参数更新过小&#xff0c;在每次更新时几乎不会移动&#xff0c;导致模型无法学习。 2、什么是梯度爆炸&#xff08;gradient exploding&#xff09;&#xff1f; 参数更新过小大&#xff0c;破坏了…

3-智能合约介绍

存储合约示例 //说明源代码是根据GPL 3.0版本授权的 // SPDX-License-Identifier: GPL-3.0//告诉编译器源代码所适用的Solidity版本为>0.4.16 及 <0.9.0 pragma solidity >0.4.16 <0.9.0;contract SimpleStorage {//声明了一个名为storedData的状态变量&#xff0…

vue3+vite静态页面部署到gitee pages

vue3vite静态页面部署到gitee pages gitee创建开源仓库修改项目部署到gitee中 随着vue3的成熟&#xff0c;vue2将在2023.12.31停止维护&#xff0c;所以有必要搞一下vue3项目静态页面怎么部署到gitee中了 如果还有想部署vue2静态页面到gitee中的话&#xff0c;访问https://blog…

【小呆的力学笔记】弹塑性力学的初步认知二:应力分析(1)

文章目录 1.1 一点的应力状态1.2 一点主应力状态1.3 应力偏张量、球张量、应力不变量 1.1 一点的应力状态 物体在受到外力或者自身不均匀的温度场等作用时&#xff0c;在其内部会产生内力&#xff0c;物体的内力与方向和截面都有关系。假设有一个受到外力作用的变形体&#xf…

Qt利用QAxObject和系统日期命令修改文件的修改时间和创建时间

#include <QApplication> #include <QAxObject> #include <QDebug> #include <QtCore> #include <stdlib.h>//思路&#xff1a; //1、利用windows的"date"和"time"命令&#xff0c;设置系统时间&#xff1b;注意&#xff1a…