border

前端-css-长期维护

对着背影说爱祢 提交于 2020-03-21 08:16:12
############### CSS简介 ################ # CSS # HTML是骨架 # CSS是样式 # JS是动作 # css和html是分成两个文件编写的,这也是体现了文档内容和样式的解耦, # CSS:层叠样式表(英文全称:Cascading Style Sheets) ############### CSS的内容列表 ################ css的内容列表 1,css的引入,三种方式 2,css的选择器, 基本选择器,有四种,p # . * 组合选择器, 属性选择器 分组和嵌套 伪类选择器 伪元素选择器 选择器的优先级 3,css的各种属性, 宽和高,width,height, 字体属性,font-size,font-weight,color, 文字属性,text-align,text-decoration,text-indent, 背景属性,background-color,background-repeat,background-image,background-position, display 盒子模型,margin外边距,border边框,padding内填充,content内容 float,三种取值,left,right,none, clear,清除浮动, overflow,溢出属性, 定位position, 4

边框圆角

心已入冬 提交于 2020-03-19 09:59:45
边框圆角 1.什么是边框圆角? 将直角的边框变为圆角的边框 2.边框圆角的格式? border-radius: 左上 右上 右下 左下; 3.将正方形变为圆形的技巧 border-radius: 50%; 4.系统如何绘制圆角? 首先根据指定的值找到圆心 按照指定的值作为半径绘制圆弧 绘制半圆1 width: 200px; 2 height: 100px; 3 border: 1px solid #000; 4 box-sizing: border-box; 5 margin: 100px auto; 6 border-radius: 100px 100px 0 0; 绘制椭圆width: 400px; height: 200px; border: 1px solid #000; box-sizing: border-box; margin: 300px auto; /*绘制椭圆设置水平方向为宽度的一半, 设置垂直方向为高度的一半*/ border-top-left-radius: 200px 100px; border-top-right-radius: 200px 100px; border-bottom-left-radius: 200px 100px; border-bottom-right-radius: 200px 100px; <div class="all"> <!

第 2 章 前端基础之CSS

风格不统一 提交于 2020-03-19 08:50:31
一、CSS语法 CSS规则由两个主要的部分构成:选择器,以及一条或多条声明。 1 ''' 2 selector { 3 property: value; 4 property: value; 5 ... property: value 6 } 7 ''' 例如: 1 h1 {color:red; font-size:14px;} 二、CSS的四种引入方式 1、行内式 行内式是在标记的style属性中设定CSS样式,这种方式没有体现CSS的优势,不推荐使用。 1 < p style ="background-color: rebeccapurple" > hello yuan </ p > 2、嵌入式 嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下: <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style> </head> 3、链接式 将一个.css文件引入到HTML文件中。 < link href ="mystyle.css" rel ="stylesheet" type ="text/css" /> 4、 导入式 将一个独立的.css文件引入HTML文件中

CSS3学习基本记录

僤鯓⒐⒋嵵緔 提交于 2020-03-18 14:03:00
CSS3 边框 border-radius: 圆角 border-radius: 15px 50px 70px 100px; 左上 右上 右下 左下 box-shadow:阴影 box-shadow:1px 2px 3px #ccc; 1px:水平位移 2px:竖直 border-image:边框图片 border-image: source slice width outset repeat; border-image:url(border.png) 30 round; 用图片border.png 30出的地方 重复合理的重复 stretch:默认值。拉伸图像来填充区域 repeat:平铺(repeated)图像来填充区域 round:类似 repeat 值。如果无法完整平铺所有图像,则对图像进行缩放以适应区域。 border-image-source:于指定要用于绘制边框的图像的位置 border-image-slice:图像边界向内偏移 border-image-width:图像边界的宽度 border-image-outset:用于指定在边框外部绘制 border-image-area 的量 border-image-repeat:这个例子演示了如何创建一个border-image 属性的按钮 CSS3 背景 background-size:设置背景图标大小

Remove black borders on images with watermarks in Python

*爱你&永不变心* 提交于 2020-03-18 03:03:51
问题 I have a bunch of image I would like to uniformise by removing black borders. Usually I use the Trim function of Imagemagick with the fuzz parameters but in the case the image have some watermark the result is not here. Actually I'm making some tests with opencv and morphological transform to try to identify watermark and image and then select the bigger element but I'm really new with opencv and I struggle. Watermark can be everywhere, from bottom left to upper right. I would prefer a Python

CSS核心概念之盒子模型

非 Y 不嫁゛ 提交于 2020-03-17 11:25:07
盒子模型(Box Model) 关于更多CSS核心概念的文章请关注GitHub—— CSS核心概念 。 当对一个文档进行布局的时候,浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型(CSS basic box model) ,将所有元素表示为一个个矩形的盒子。所有 HTML 元素可以看作盒子,在 CSS 中, Box Model 这一术语是用来设计和布局时使用。 CSS 盒模型 本质上是一个盒子,封装周围的 HTML 元素,每个盒子由四个部分(或称区域)组成: 内容(Content) , 内边距(Padding) , 边框(Border) , 外边框(Margin) 。 盒模型 允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了 盒子模型(Box Model) : CSS 盒模型 不同组成部分的说明: Content(内容) - 由内容边界限制,容纳着元素的“真实”内容,例如文本、图像,或是一个视频播放器。 Padding(内边距) - 由内边距边界限制,扩展自内容区域,负责延伸内容区域的背景,填充元素中内容与边框的间距。当其取值为百分比时,该百分比都是相对于包含该元素的块的 宽度 (相对于该块的百分比)。 Border(边框) - 由边框边界限制,扩展自内边距区域,是容纳边框的区域。即围绕在内边距和内容外的边框。 Margin(外边距) -

div实际占得区域像素

匆匆过客 提交于 2020-03-17 05:47:06
水平方向:margin-left + border-left +pading-left + width + pading-right + border-right+margin-right 垂直方向:margin-top + border-top + pading-top+ height + pading-bottom + border-bottom + margin-bottom 来源: CSDN 作者: dxm809 链接: https://blog.csdn.net/dxm809/article/details/104855867

CSS属性

耗尽温柔 提交于 2020-03-17 05:20:54
CSS 属性 CSS 属性组: 动画 背景 边框和轮廓 盒(框) 颜色 内容分页媒体 定位 可伸缩框 字体 生成内容 网格 超链接 行框 列表 外边距 Marquee 多列 内边距 分页媒体 定位 打印 Ruby 语音 表格 文本 2D/3D 转换 过渡 用户界面 CSS3 动画属性(Animation) 属性 描述 CSS @keyframes 规定动画。 3 animation 所有动画属性的简写属性,除了 animation-play-state 属性。 3 animation-name 规定 @keyframes 动画的名称。 3 animation-duration 规定动画完成一个周期所花费的秒或毫秒。 3 animation-timing-function 规定动画的速度曲线。 3 animation-delay 规定动画何时开始。 3 animation-iteration-count 规定动画被播放的次数。 3 animation-direction 规定动画是否在下一周期逆向地播放。 3 animation-play-state 规定动画是否正在运行或暂停。 3 animation-fill-mode 规定对象动画时间之外的状态。 3 CSS 背景属性(Background) 属性 描述 CSS background 在一个声明中设置所有的背景属性。 1

jQuery 入门

烈酒焚心 提交于 2020-03-17 02:43:09
不能正常引用jQuery-2.2.4.min.js所以代码没生效 jQuery 是一个 JavaScript 函数库。jQuery 库包含以下特性: HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities 官网: 点击 中文文档: 点击 书写规范 <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> //代码不能写在引用文件这个容器里 <script> $somecode //$符号就表示jQuery jQuery.somecode //等同 </script> PS:由于编辑器的JS编码问题中文在js编码过程中没有使用utf-8.显示乱码.实际代码和注释源码有区别 选择器和筛选器 类似JS有#id(id选择器),element(元素选择器即标签),class(class选择器),组合选择器(selector多种选择器组合),层级选择器,*(选择全部)... 基本选择器 在js基础上稍微修改了一下,是用#代表id, .class代表class,标签直接使用标签名 PS:id选择器,使用任何的元字符(如 !"#$%&'()*+,./:;<=>?@[]^`{|}~)作为名称的文本部分,

java web 上传图片到项目目录并将文件路径放到数据库

余生长醉 提交于 2020-03-17 01:53:26
最近在学习java web,在练习DVD信息管理系统时一直对照片上传问题的处理感到非常棘手,在我的仔细研究和钻研下,终于完美解决了这个难题,下面我讲述一下具体的步骤: 思路阐述:将图片放到项目的/webTest/imgs/文件夹下,为了避免图片名重复,将图片名改为获取当前秒数+ .jpg的格式。然后将图片的项目路径储存到数据库中,以便后面展示图片进行读取图片信息。 第一步:准备工作 环境要求 1. 开发环境: Eclipse 2.导入两个文件上传的jar包 3 MySQL平台,我用的是dbForge Studio for MySQL。 第二步 创建一个PhotoDao类来处理前台file Input上传的图片资源 /** * @author Mr Tang * @version Create Time:2018年10月24日 下午8:22:22 * com.tang.dao * */ package com.tang.dao; import java.io.File; import java.util.Date; import java.util.List; import javax.servlet.ServletContext; import javax.servlet.http.HttpServletRequest; import org.apache.commons