学习前端的第十五天
2021/6/7 18:25:59
本文主要是介绍学习前端的第十五天,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
最近有大数据的实验要做,发现大数据用的virtualbox里的虚拟机纯敲代码,那是真的累啊,双标记都得手敲,又不能复制,敲了一天人都麻了,而且过几天又要考四级,希望这次能过吧。
OK,还是重点说说今天学了些什么,今天内容不是很多,学了iconfont、服务器字体的引用以及媒体查询,大部分时间还是对移动端布局进行布局,今天写了支付宝页面,深深感受到弹性布局的方便。
一、iconfont
阿里巴巴矢量图标库的网址:https://www.iconfont.cn/
GitHub:
- 这是全球最大的程序员交流平台
- 程序员有些好的想法或者开发的软件代码都可以共享上去,全球的开发者都可以使用
- iconfont可以使用GitHub账户登录
- 由于GitHub网站的服务器是在国外,访问的时候比较慢
码云:
- 也被称作代码仓库
- 国内自己的程序员交流平台,可以理解为是中文版的GitHub
- 全部是中文的,用户基数还是比较大的
iconfont字体图标文件:
- 使用代码的形式替代以前的图片形式
- 代码执行效率比图片高,代码形式可以当做文本处理
- 下载下来的图标直接可以当成文本的形式去设置一些属性
svg格式:
- 矢量图标,当图片进行缩放的时候不会失真
- 可以采用编码的形式自己去创建图标
- 语法:xml形式,xml数据格式,也是标记语言,标记可以自定义
实际开发中使用iconfont字体图标:
- 如果UI不提供svg格式,只能自己去下载
- 只要有SVG格式的图标,直接把所有的需要用到的上传到iconfont字体图标项目中,然后下载
具体步骤:
<!--第一步:--> <!--引入字体图标样式文件--> <link rel="stylesheet" type="text/css" href="fonts/iconfont.css"/> <!--第二步:--> <!--可以用 i标记 或者 span标记 来指定iconfont--> <span class="iconfont icon-chongzhizhongxin"></span> <i class="iconfont icon-richscan_icon"></i> <!--第三步:--> <style type="text/css"> span{ /*将权重设为最大*/ font-size: 66px !important; color: yellow; } i{ color: orange; font-size: 66px !important; } </style>
二、服务器字体
- 浏览器支持的字体有限,一般不支持艺术字体等等
- css里面提供了font-face可以引入外部的字体资源
例子:
<style type="text/css"> @font-face { /*字体名称,可以自定义*/ font-family:"灵动"; src: url("font2/灵动指书手机字体.ttf"); } h1{ font-family: "灵动"; } </style> <h1>马上到端午了,又可以吃粽子了!</h1>
效果:
注意:字体要注意版权,不要乱用有版权的字体,并且把它用到商用中
三、媒体查询
- 需求:根据不同的电脑分辨率,显示不同的网页样式,是做不到的
- 但通过媒体查询可以做到这些操作
语法:
@media all and (){} all表示所有的媒体类型:笔记本、移动端设备、打印设备、投影、电视设备等等 only表示限定某种设备 not表示排除某种设备 and表示并且,和 ()表示表达式 括号里面放置条件 具有一个判断的功能 + 条件为真就执行 true + 条件为假就不执行 false /*说明浏览器的宽度大于1000px说明条件成立,就执行以下代码 */ @media all and (min-width:1000px) { } /*表示浏览器的宽度小于800px的时候执行以下代码*/ @media all and (max-width:800px) { } /* 排除条件,理解为条件以前是真现在就是假 数学上有个运算符叫做取反 这里相当于浏览器宽度小于1000的时候执行以下代码 */ @media not all and (min-width:1000px) { } /*表示浏览器的宽度在600——1000px的时候执行以下代码*/ @media all and (min-width:600px) and (max-width:1000px) { } /*可以指定多个区间*/ @media all and (max-width:1000px) and (min-width:800px) { div{ background-color: yellow; } } @media all and (max-width:799px) and (min-width:600px){ div{ background-color: #ccc; } } @media all and (max-width:599px) and (min-width:300px) { div{ background-color: green; } } /* 竖屏 */ @media screen and (orientation:portrait) { } /* 横屏 */ @media screen and (orientation:landscape){ }
这篇关于学习前端的第十五天的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-05HTML 颜色
- 2024-10-05HTML 颜色名
- 2024-10-01AntDesign-Form-rules学习:轻松入门教程
- 2024-10-01classnames学习:轻松掌握前端中的类名管理
- 2024-09-30前端案例资料:新手入门必读教程
- 2024-09-30前端编程资料:新手入门必备教程
- 2024-09-30前端培训资料:新手入门必读教程
- 2024-09-30滚动吸顶项目实战:从入门到上手
- 2024-09-29HTML学习:span标签教程详解
- 2024-09-29HTML基础:button标签教程