学习前端的第十五天

最近有大数据的实验要做,发现大数据用的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){

}

上一篇:使用@media (max-width:640px)和@media (min-width: 640px)写适应性网页


下一篇:前端面试题对于媒体查询的理解