font-size

如何设置文本不换行省略号显示等CSS常用文本属性

由 岁酱吖の 提交于 2020-02-27 03:13:18
如何让多余的文本省略号显示首先要说几个属性的作用： whitespace:nowrap 中文行末不断行显示 overflow： 控制超出文本的显示方式：hidden 超出范围文本隐藏；scroll 始终显示滚动条；auto 根据文字多少自动显示滚动条 text-overflow： 在overflow设置隐藏的情况下怎么显示 clip裁剪ellipsis省略号显示 那么让多余文字省略号显示需要以下三步： ①white-space：nowrap;如果是中文 设置文字超出范围不断行 ②overflow：hidden；设置超出控件范围隐藏； ③text-overflow：ellipsis; 设置多余文本隐藏显示； <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 100px; height: 100px; background-color: green; } li{ color: red; list-style: none; } .li{ color: blue; font:italic bold 75%/1.8 "Microsoft Yahei",san-serif; font-weight: lighter; white

前端布局方式分类

由 戏子无情 提交于 2020-02-25 17:07:02
固定 Fixed 使用 px 和 pt 这样的绝对单位进行固定布局。在无论什么设备上保持固定的尺寸，在不适合的分辨率下可能导致大面积空白或横向滚动条。最经典，也是被证明极其不友好、维护困难的方法。 流动 Fluid 使用 % 百分比进行相对布局。可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。某些情况下可能导致错误的伸缩或者布局被破坏。 弹性 Elastic 使用 em 或 rem 单位进行相对布局。避免了根据 px 布局在高分辨率下几乎无法辨认的缺点，又相对 % 百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示。需要一段时间适应而且不易从其他布局转换过来，但几乎是目前最好的布局方式。 伸缩 Flexbox 使用 CSS3 Flex 系列属性进行相对布局。对于富媒体和复杂排版的支持非常强大，但是还未普及并且兼容性较差。 响应式 Responsive 使用 @media 媒体查询 给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，但是在同一个设备下实际还是固定的布局，并且因为浏览器的支持原因对介质的检测还不实用。 自适应 Adaptive 通常使用 @media 媒体查询 和网格系统 (Grid

jQuery实现密码强度检测

由 我怕爱的太早我们不能终老 提交于 2020-02-24 21:03:08
jQuery普遍运用于JAVA_WEB前端，可以说jQuery的运用无处不在，学好jQuery，对于一个程序员来说是必由之路。下面简单介绍一下jQuery实现密码强度检测。 如图所示： 核心代码： 第一步：css样式： /** 清除内外边距 **/ body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */ dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ pre, /* text formatting elements 文本格式元素 */ form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */ /* table elements 表格元素 */ img/* img elements 图片元素 */{ border:medium none; margin: 0; padding: 0; } input::-ms-clear{display:none;} /** 设置默认字体 **/ body,button, input, select, textarea { font-family:微软雅黑, Verdana, Geneva, sans-ser;

移动web

由 拈花ヽ惹草 提交于 2020-02-24 01:42:34
1、像素和物理像素 iphone5：320*568px（像素）=》640*1136px（物理像素） 2、viewport 手机浏览器默认为我们做了两件事情 1）页面渲染在一个980px（ios）的viewport：为了排版正确 2）缩放 3、Meta标签 不使用默认的viewport <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> width=device-width：布局viewport宽度=设备宽度 4、在手淘的设计师和前端开发协作过程中：手淘设计师常选择iPhone6作为基准设计尺寸，交付给前端的设计尺寸是按 750px * 1334px 为准(高度会随着内容多少而改变)。前端开发人员通过一套适配规则自动适配到其他的尺寸。 5、flex布局（带上-webkit-前缀适配不兼容的手机） 1）父容器：display:flex;display:-webkit-flex; 子容器：flex:1;-webkit-flex:1;（按比例划分） 2）不定宽高元素水平垂直居中 　 父容器：display:flex;align-items:center;（子元素垂直居中）justify-content:center;（子元素水平居中） 6、响应式布局 1）

Getting an object in Python Matplotlib

由 做~自己de王妃 提交于 2020-02-23 08:10:43
问题 To make a plot, I have written my code in the following fashion: from pylab import * x = [1,2,3] y = [1,2,3] matplotlib.pyplot.scatter(x,y,label='Blah') matplotlib.pyplot.legend(title='Title') matplotlib.pyplot.show() I want to change the font size of the legend title. The way to go about this is to get the legend object and then change the title that way (e.g., How to set font size of Matplotlib axis Legend?) Instead of rewriting all my code using ax.XXX, figure.XXX, etc, is there any way to

Getting an object in Python Matplotlib

由 杀马特。学长 韩版系。学妹 提交于 2020-02-23 08:10:31
问题 To make a plot, I have written my code in the following fashion: from pylab import * x = [1,2,3] y = [1,2,3] matplotlib.pyplot.scatter(x,y,label='Blah') matplotlib.pyplot.legend(title='Title') matplotlib.pyplot.show() I want to change the font size of the legend title. The way to go about this is to get the legend object and then change the title that way (e.g., How to set font size of Matplotlib axis Legend?) Instead of rewriting all my code using ax.XXX, figure.XXX, etc, is there any way to

Getting an object in Python Matplotlib

由 送分小仙女□ 提交于 2020-02-23 08:10:30
问题 To make a plot, I have written my code in the following fashion: from pylab import * x = [1,2,3] y = [1,2,3] matplotlib.pyplot.scatter(x,y,label='Blah') matplotlib.pyplot.legend(title='Title') matplotlib.pyplot.show() I want to change the font size of the legend title. The way to go about this is to get the legend object and then change the title that way (e.g., How to set font size of Matplotlib axis Legend?) Instead of rewriting all my code using ax.XXX, figure.XXX, etc, is there any way to

IT兄弟连 HTML5教程 响应式网站的内容设计

由 拟墨画扇 提交于 2020-02-22 18:04:18
基于响应式开发网站，除了页面的布局是我们设计的重点，网站中显示的图片和文字也是我们不能轻视的内容。 1 响应式图片显示内容设计 真正具有响应性的Web设计是完全调整网站以满足访问者的设备。我们需要在响应式布局的页面上传送最佳的、前后联系的图片尺寸。如果是背景图片，我们可以准备多张不同尺寸的图片，然后在各自的媒体查询样式中使用对应的图片背景。再结合min-width、min-height、max-width、max-height等样式属性来限制窗口最小或最大宽度和高度，模拟响应式及流式布局，从而保证图片不失真。 如果是在HTML中加载图片，使图片适应不同分辨率的屏幕，则可以通过设置图片样式的百分比来实现。但是，它不仅包括缩放，同样重要的是减少传送给观众的图片。比如说用户是在移动设备中浏览网站，由于网速慢、流量少等因素，访客可能会放弃访问。为了减少这些元素给网站带来的影响，我们可以用更合适的图片替换访问者使用的设备中的数据。在开发时可以通过一些JavaScript插件来解决此类问题。 2 响应式文字显示内容设计 响应式的设计应该秉承“内容优先，移动优先”的原则。我们知道，网页中的内容主要是由文字、图片等元素组成的，那么文字该如何响应呢？排版是响应式Web设计最重要的内容之一，如果想让内容在所有尺寸的屏幕上友好地显示，那就绝对有必要为移动设备优化字体

LESS基础教程

由 老子叫甜甜 提交于 2020-02-22 15:51:22
一、初见LESS 1. 什么是LESS Less是Css的预编译语言，兼容Css语法，在其基础上扩展，可以使用变量，混合，继承，函数等语法，更贴近编程语言，在开发时使用，生产时将Less转换为Css文件。 2. LESS的官方网站 中文网址： http://lesscss.cn/ 3. LESS与CSS的写法 CSS的写法 .content{ display: flex; } .content .item{ width: 100rem; height: 100rem; background: pink; color: #fff; } LESS的写法 .content{ display: flex; .item{ width: 100rem; height: 100rem; background: pink; color: #fff; } } 4. 搭建开发环境 因为 less 其实无法在浏览器上运行的，它要编译成CSS才行。主要以下方法 下载less.js文件，利用该文件编译less，但是太建议使用 借助 考拉 这软件编译 借助 vs code ，在该编辑器安装编译less的插件，less文件保存后就会自动生成对应的CSS 借助 node 环境 因为前面两种没用过，所以主要介绍下后两种 在vs code安装less的编译插件 安装插件 Easy LESS ，如下图所示 有了这个后

前端入门之响应式布局

由 大兔子大兔子 提交于 2020-02-22 12:15:30
很多Web前端新手对响应式布局和自适应布局的概念以及制作方法分不清，简单来说响应式布局相当于流动网格布局，而自适应布局等于使用固定分割点来进行布局。接下来小编分享的重庆Web前端入门知识就给大家讲解用CSS做响应式布局的方法。 做响应式网站离不开CSS响应式布局查询代码写法，而在此之前，我们需要了解什么是媒体查询以及如何才CSS中引入媒体查询。 什么是媒体查询？ 媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有width、height和color（等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。 如何在CSS中引入媒体查询？ 媒体查询写在CSS样式代码的最后，CSS是层叠样式表，在同一特殊性下，靠后的的样式会重叠前面的样式。 如何用CSS做响应式布局呢？ 1、在HTML头部添加以下代码，用来显示兼容移动设备的显示效果。 参数详解： width=device-width ：宽度等于当前设备的宽度 initial-scale=1 ：初始的缩放比例（默认为1） minimum-scale=1 ：允许用户缩放到的最小比例（默认为1） maximum-scale=1 ：允许用户缩放到的最大比例（默认为1）
订阅 font-size