案例html css
9 CSS背景属性
##### CSS 背景属性 ##### 1. background-color(背景颜色) 页面的背景颜色有四种属性值表示,分别是transparent(透明),RGB十进制颜色表示,十六进制颜色表示和颜色单词表示。 属性使用: ``` /* background-color: transpare ......
css单行垂直居中,超过两行显示省略号
HTML: <div> <span>单行居中,多行居左单行居中,多行居左</span> </div> <div> <span>单行居中</span> </div> CSS: span { font-size:14px; overflow:hidden; text-overflow:-o-ellips ......
8 CSS文本属性
##### 8 文本属性 font-style(字体样式风格) ``` /* 属性值: normal:设置字体样式为正体。默认值。 italic:设置字体样式为斜体。这是选择字体库中的斜体字。 oblique:设置字体样式为斜体。人为的使文字倾斜,而不是去使用字体库的斜体字。 */ ``` font ......
CSS基础-定位
CSS中通常使用position 属性,决定元素的定位方式。 常用的定位方式通常有 | 值 | 意义 | | | | | relative | 相对定位 | | absolute | 绝对定位 | | fixed | 固定定位 | ## 相对定位 position 设置为 relative。 相对定 ......
7 CSS选择器优先级
##### 7 选择器优先级 所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序。样式表中的特殊性描述了不同规则的相对权重。 ``` /* !important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性 1 内联样式表的权值最高 style ......
6 CSS样式继承
##### 6 样式继承 CSS的样式表继承指的是,特定的CSS属性向下传递到子孙元素。总的来说,一个HTML文档就是一个家族,然后html元素有两个子元素,相当于它的儿子,分别是head和body,然后body和head各自还会有自己的儿子,最终形成了一张以下的家族谱。 ![image](http ......
5 CSS伪类选择器
##### 5 伪类选择器 anchor伪类:专用于控制链接的显示效果 |More Actions[:link](https://www.w3school.com.cn/cssref/selector_link.asp) |a:link |选择所有未被访问的链接。 | | | | | |[:visi ......
css 右上角三角形标签样式
<style> .box{ position: relative; height: 100px; width: 300px; border: 1px solid gray; box-sizing: border-box; } .sanjiao{ position: absolute; top: 0; ......
css 右上角标的效果
右上角 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>制作角标的方法</title> <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/j ......
4 CSS属性选择器
##### 4 属性选择器 属性选择器是通过元素的属性及属性值来选择元素的。下面介绍属性选择器的用法。 1. 第一种用法 ``` 作用:选择含有指定属性的元素。 语法:[属性名]{} ``` 示例如下: ```html 属性选择器 用户名: 密 码: 数据量: ``` 运行结果: ![image]( ......
CSS 实现一个带弧边的区域
一、需求描述 在移动端的开发中,经常遇到下图这样的弧边设计 弧边其实有很多方案,但像上图这样的情况更适合用 border 实现,因为这样更方便封装为组件 二、初步实现 可以将页面顶部的区域看做一个大圆与页面的交集,基于这个思路就能开发出一个基本的 html 结构 <body> <div classN ......
HTML5原生拖拽/拖放 Drag & Drop 详解
前言 拖放(drap & drop)在我们平时的工作中,经常遇到。它表示:抓取对象以后拖放到另一个位置。目前,它是HTML5标准的一部分。我从几个方面学习并实践这个功能。 拖放的流程对应的事件 我们先看下拖放的流程: 选中 > 拖动 > 释放 然后,我们一步步看下这个过程中,会发生的事情。 选中 在 ......
webpack压缩 html 和 js
转载请注明 来源:http://www.eword.name/ Author:eword Email:eword@eword.name webpack压缩 html 和 js 一、压缩 js /* webpack.config.js webpack的配置文件 */ module.exports = ......
webpack压缩 html 和 js
转载请注明 来源:http://www.eword.name/ Author:eword Email:eword@eword.name webpack压缩 html 和 js 一、压缩 js /* webpack.config.js webpack的配置文件 */ module.exports = ......
webpack压缩 CSS 文件
转载请注明 来源:http://www.eword.name/ Author:eword Email:eword@eword.name webpack压缩 CSS 文件 压缩 CSS 文件需要使用到 optimize-css-assets-webpack-plugin插件 一、压缩 css 文件的核 ......
webpack的css 兼容性处理
转载请注明 来源:http://www.eword.name/ Author:eword Email:eword@eword.name webpack的css 兼容性处理 处理 css 兼容性需要使用到 postcss-loader 和postcss-preset-env 两个插件 一、css 兼容 ......
webpack打包 html 资源
转载请注明 来源:http://www.eword.name/ Author:eword Email:eword@eword.name webpack打包 html 资源 一、打包 html文件的核心配置 // webpack.config.js webpack的配置文件 // 路径: ./webp ......
webpack提取 CSS 成单独文件
转载请注明 来源:http://www.eword.name/ Author:eword Email:eword@eword.name webpack提取 CSS 成单独文件 提取css 成单独文件需要用到 mini-css-extract-plugin插件 一、提取 css 的核心配置 // we ......
2023.8.20 - nginx子域名简单判断案例
``` server { listen 80; server_name lvyehao.com; index index.html index.htm index.php; # 设置子域名目录 set $doc "lvyehao.com"; if ($host ~ ^(\w+)\.lvyehao\. ......
CSS – Houdini
介绍 简单说这个 Houdini 是一系列 CSS 底层 API,它可以让我们扩展 CSS,做出一些 Polyfill。 举一个例子,让大家有个画面。 我们可以通过 CSS + JS + Canvas 语法来自创 CSS 语法,游览器解析 CSS 时它会跑我们的 JS,而 JS 用类似 Canvas ......
博客园css与目录导航
默认配置: 皮肤:BlueSky ## 页面定制css代码 ``` :root { --accent-color: #696969; /* nice */ --primary-colour: #306797; /* */ --background-color: white; --background ......
k8s实战案例之运行WordPress
LNMP案例之基于Nginx+PHP实现WordPress博客站点,要求Nginx+PHP运⾏在同⼀个Pod的不同容器;nginx主要作用是接入站点请求,如果请求静态资源nginx就直接响应;如果请求的是一个动态php资源,就将对应请求转发给另一个php容器进行处理;在一个pod中运行多容器,网络名... ......
案例—猎鹰火箭自主着陆--复现
案例—猎鹰火箭自主着陆 代码网址:Falcon9-Soft-Landing-Simulation: 基于Simulink和Flightgear的猎鹰9号软着陆仿真 (gitee.com) 1. 运行步骤 ## 软件配置 - MATLAB 2020a - FlightGear 2019.1.2 - C ......
使用WebAssembly实现高性能计算:C++和Rust的案例分析
WebAssembly是一种新型的低级字节码格式,它可以在浏览器中运行高效的编译代码。使用WebAssembly可以实现高性能计算、游戏引擎等功能,对于需要大量计算的Web应用程序来说尤为重要。 ......
1.8 HTML5端快速访问单张模板
# 一、HTML5端快速访问单张模板 ## 1.插件安装 如需在 HTML5 端预览报表工程,必须安装 「HTML5 解析」插件。FineReport 设计器默认安装「HTML5 解析」插件,在设计器中点击「服务器>插件管理」,在插件管理的弹窗右侧「我的插件」中即可查看,如下图所示: ![image ......
CSS实现文字描边效果
一、介绍最近在一个项目的宣传页中,设计师使用了文字描边效果,之前我确实没有实现过文字的描边效果,然后我在查阅资料后,知道了实现方法。文字描边分为两种:内外双描边和单外描边,也就是指在给文字加上描边效果后,描边的方向是向内外同时占用文字空间还是只向外扩充文字空间的区别。 二、具体代码1、文字内外双描边 ......
SASS/SCSS预处理器的高级特性和应用案例
SASS/SCSS是一种CSS预处理器,它可以简化CSS的编写和维护工作,并且提供了许多高级特性和功能。本文将介绍SASS/SCSS的一些高级特性和应用案例。 ![SASS/SCSS预处理器的高级特性和应用案例](https://img2023.cnblogs.com/blog/3261805/20 ......