font | 易学教程

目前最火的前端布局方式：less+flex+媒体查询

阅读更多关于目前最火的前端布局方式：less+flex+媒体查询

1. rem基础 rem单位 rem (root em)是一个相对单位，类似于em，em是父元素字体大小，rem的基准是相对于html元素的字体大小。比如，根元素（html）设置 font-size=12px ; 非根元素设置width:2rem; 则换成px表示就是24px。 /* 根html 为 12px */ html { font-size : 12px ; } /* 此时 div 的字体大小就是 24px */ div { font-size : 2rem ; } rem的优势：父元素文字大小可能不一致，但是整个页面只有一个html，可以很好来控制整个页面的元素大小。 2. 媒体查询 2.1 什么是媒体查询媒体查询（Media Query）是CSS3新增的语法。使用 @media查询，可以针对不同的媒体类型定义不同的样式 @media 可以针对不同的屏幕尺寸设置不同的样式当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面目前针对很多苹果手机、Android手机，平板等设备都用得到媒体查询 2.2 媒体查询语法规范用 @media开头注意@符号 mediatype 媒体类型关键字 and not only media feature 媒体特性必须有小括号包含 /* 语法格式 */ @media mediatype and

怎样设置网页中的文字样式

阅读更多关于怎样设置网页中的文字样式

网页作为一种信息的载体，文字还是很重要的一部分的，这里就总结一下他的几种设置方法一、font标签　　font使用来设置文字的标准属性，但是由于一系列的原因已经不建议使用font标签来指定属性了，还是用css比较好，但是本文还是会介绍一下这种方法。font中可以设置很多种类的属性，比如(括号里面是效果)：　　1、颜色：设置红色你好 （你好）　　2、设置大小：设置字号为2和8字号2 字号8 （字号2 字号8 ）　 3、字体类型：face属性，可以用来指定字体，可选值有很多，这个属性只支持你机器上存在的字体（宋体楷体）二、css设置　　css设置字体样式远比用font标签更加强大，涉及的面更广。粗略总结如下：　　1、总的属性font，这个属性中可以设置下面的多个属性的值，调用方式（都可以缺省）　　　　 {font:font-style font-variant font-weight font-size font-family} 　　2、字体类型font-family：可以设置多种字体，用逗号分隔，浏览器会在你的电脑上注意寻找看是否能用，能用则选用该字体显示后面的字体无　　　　效

博客园界面美化

阅读更多关于博客园界面美化

博客园界面美化作者： @Ryanjie 本文为作者原创，转载请注明出处： https://www.cnblogs.com/Ryanjie/p/9382356.html 阅读目录(Content) 博客园界面美化 0x00. 写在前面 0x01. 博客园后台设置 0x02. 页面定制CSS代码 0x03. 侧边栏公告 0x04. 页首Html代码 0x05. 页脚Html代码 0x06. 博客签名 0x07. 写在最后回到顶部(go to top) 博客园界面美化标签：美化回到顶部(go to top) 0x00. 写在前面皮肤作者： @SevenNight 皮肤作者博客： SevenNight 修改人： @Ryanjie 修改人： Ryanjie 前几天无意之中看到了一款特别好看（每个人的眼光都不一样）的博客皮肤“ verdant ”，皮肤的作者是 @SevenNight 。当时感觉这款皮肤很简洁却又不失本色，于是立刻更换了这款皮肤。但是在使用过程中碰到了一些问题。由于之前基本没有学过前端，只好自己动手慢慢钻研。最终，之前一些不能实现的或者是自己想要实现的，都满足了。在这之前还是先感谢 @SevenNight ，感谢他设计得这款皮肤。我只是在原作者 @SevenNight 的基础上增添了markdown代码高亮、自动生成三级目录、版权声明、markdown代码添加行号

Summary_javascript实现个人简历上传照片

阅读更多关于 Summary_javascript实现个人简历上传照片

<html> <head> <style> input{ border: 0px; outline:none; height: 50px; text-align: center; font-size: 16px; font-family: "Microsoft YaHei"; } textarea{ border:0px; outline:none; text-align: left; font-size: 16px; font-family: "Microsoft YaHei"; } table{ border-color: black; border-collapse: collapse; text-align: center; } tr{ border: 0px; } td{ text-align: center; } pre{ font-size: 16px; font-family: "Microsoft YaHei"; } form img { height: 140px; width: 100px; } label{ background-color: gainsboro; padding: 5px 10px; border-radius: 5px; border: 1px ridge black; 来源： CSDN 作者：家有喜娟儿链接： https:/

阿里图标库使用font class 写法和unicode引用，简单，使用快捷

阅读更多关于阿里图标库使用font class 写法和unicode引用，简单，使用快捷

主要介绍 font class和unicode 写法，个人比较偏好这两种写法，使用简单直接开始吧使用步骤 1.打开阿里图标库的官网：https://www.iconfont.cn/ 2.必须要先登陆，直接搜索想找的图标，比如购物车有时会弹出一些教程，点了就行，会出来这么多图标。 3.选择好图标，然后加入购物车，这里要注意的是，如果做实际的项目时，肯定会用到多个图标，这时候，需要一次性加入。不然会导致一些问题。加入完成之后可以在右上角购物车看到自己添加的图标； 4.接下来点击下载代码，将选好的图标下载到本地，解压。其实，demo_index.html文件就是一个详析的介绍了，里边介绍了三种方法，读者可以自己参考。 5.将下面的这几个文件复制到自己的web项目下，这几个文件包含了三种不同的导入图标的方法文件。可以看demo.html里的介绍。我是在自己的项目下建了一个iconfont文件夹，将这些文件放进去。 6.这里使用的是Font class方法，首先，在html页面中引入css文件 <link rel= "stylesheet" type= "text/css" href= "iconfont/iconfont.css" /> 然后再自己要插图标地方引用类就行了 1.Font class写法： <span class= "iconfont icon-gouwuche

其他一些小程序

阅读更多关于其他一些小程序

1 区间数字判断 1 import time 2 3 # 计算一定区间内内的相关操作数据 4 print('\033[1;33m================> 请输入计算区间,区间长度请勿超过3万,否则老夫的计算机...... <=====================\033[0m') 5 start = int(input('\033[1;32m请输入计算前端区间：\033[0m').strip()) 6 end = int(input('\033[1;32m请输入计算后端区间：\033[0m').strip()) 7 while True: 8 cho_dic = """ 9 '1':'质数、合数' 10 '2':'偶数、奇数' 11 '3':'完全数' 12 '4':'斐波那契数列' 13 'QUIT':'退出系统' 14 """ 15 print(cho_dic) 16 cho = input('请输入将要进行的操作代号：') 17 # 质数、合数 18 if cho == '1': 19 str_time = time.time() 20 print('正在计算中，请稍等...\n') 21 zhi_li = [] 22 for num in range(start, end): 23 for i in range(2, num): 24 if num % i =

简易计算器 tkinter模块

阅读更多关于简易计算器 tkinter模块

1 import tkinter 2 3 4 # # 设置显示窗体及其属性 5 windows = tkinter.Tk() # 70*60 6 windows.title('SkyGrass catulator') 7 windows.geometry('280x440') 8 windows.resizable(width=False, height=False) 9 10 11 # # 定义显示界面，一个输入的数字界面，另一个是结果显示界面 12 result_user = tkinter.StringVar() # 用户按键显示界面 13 result_user.set(0) 14 result_end = tkinter.StringVar() # 计算结果返回界面 15 result_end.set('') 16 17 label = tkinter.Label(windows, font=('黑体', 21),fg='black',anchor = 'se',textvariable=result_user) 18 label.place(x = 0, y = 90, width = 280, height = 50) 19 label = tkinter.Label(windows, font=('黑体', 18),fg='#4F4F4F',anchor = 'se

OpenCV python 图像坐标系

阅读更多关于 OpenCV python 图像坐标系

OpenCV python 图像坐标系所需资源文件: 图片文件下载地址 # -*- coding: utf-8 -*- import cv2 def main ( ) : # 1.读取图片打印图片形状 img_src = cv2 . imread ( './image/Lenna.png' , cv2 . IMREAD_UNCHANGED ) img_copy = img_src . copy ( ) print ( 'Lenna 图片形状:' , img_src . shape ) logo = cv2 . imread ( './image/opencv_logo.png' , cv2 . IMREAD_UNCHANGED ) logo = cv2 . resize ( logo , ( 20 , 20 ) ) print ( 'opencv_logo 图片形状:' , logo . shape ) butterfly = cv2 . imread ( './image/butterfly.jpg' , cv2 . IMREAD_UNCHANGED ) butterfly = cv2 . resize ( butterfly , ( 20 , 20 ) ) print ( 'butterfly 图片形状:' , butterfly . shape ) # 2.读取坐标 y

bootstrap实现首页轮播加缩放

阅读更多关于 bootstrap实现首页轮播加缩放

需要用到一些组件 BootStrap组件给个官网网址（自己想要的再找）：https://v2.bootcss.com/index.html 需要一些其他的相关文件，这里都有：链接: https://pan.baidu.com/s/16O9eZm3KphXCS7tFW8asFg 提取码: 7md4 复制这段内容后打开百度网盘手机App，操作更方便哦 1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8  9 <title>商城首页</title> 10 11  12 <link href="../css/bootstrap.css" rel="stylesheet"> 13 14

Polo360页面制作练习

阅读更多关于 Polo360页面制作练习

㈠Polo360index.html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>polo 360</title>  <link rel="stylesheet" href="reset.css">  <link rel="stylesheet" href="page-index.css"> </head> <body>   <div class="header w">  <ul class="nav"> <li> <a href="#">HOME</a> Back to home </li> <li> <a href="#">PRODUCTS</a> What we have for you </li> <li> <a href="#">SERVICES</a> Things we do </li> <li> <a href="#">BLOG</a> Follow our updates </li> <li> <a href="#"

订阅 font