总结今天学习的内容:
- 字体图标生成和原理和使用
- CSS预处理器概念特性
- less预处理器的编译和语法
- 使用less修改微金所头部和导航条样式
- 轮播图响应式切换
- 特色介绍立即预约布局
一. 字体图标
字体图标使用都是svg图片(上百度下载,如下载网站:http://www.sfont.cn/)
a.字体图标的生成方法
1. 使用阿里官方提供图标 添加到购物车下载代码
2. 让设计师设计这种图标（必须svg(矢量图放大缩小不会失真)）
3. 把设计师给你 图标文件 上传到阿里图标库里面
4. 在把你上传的图标加入购物车下载代码
5. 把下载的代码复制到项目里面引入来使用
b.图标的组成部分和原理
组成部分:由字体文件 + 字体名称 + 图标编码组成
1. 字体文件 eot svg ttf woff
字体文件有4个
1. eot 兼容IE
2. woff 标准的文件
3. ttf 兼容谷歌火狐等
4. svg 兼容低版本的ios浏览器
2. 字体名称： 字体图标的字体名称 需要自定义和使用
1. 定义字体
/* @font-face CSS3里面新增的属性 web字体 使用CSS定义一个字体
指定你要定义的字体名称 和 字体文件的路径 */
@font-face {
font-family: 'itcast';
src: url('iconfont.eot?t=1543800973803') format('embedded-opentype'),
url('iconfont.ttf') format('truetype'),
url('iconfont.svg?t=1543800973803#iconfont') format('svg'); /* iOS 4.1- */
}
2. 使用字体
/*使用一个字体*/
.iconfont {
/*使用iconfont字体*/
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
3. 图标编码: content: "\e602"; 这种unicode编码 这个编码是网站给你生成的不需要记住
1. 直接使用编码
div::before {
/*1. 使用字体名称*/
/*font-family: 'iconfont';*/
/*2. 使用图标的编码*/
content: "\e62b";
}
2. 把编码封装到类名里面
/*为了方便使用和记忆把编码定义在一个类名里面 使用的时候使用类名即可*/
.laoren::before {
content: "\e62b";
}
3. 生成的代码里面 帮你封装好的
/*使用图标的编码*/
.icon-icon-test:before { content: "\e602"; }
c.字体图标的使用方式
1. 引入字体图标的CSS文件
2. 使用对应的图标的类名即可
二.CSS预处理器
1. 什么是CSS预处理器?
它是让CSS变的更加丰富 强大 提前写好一些高级的CSS通过特定编译方式再转成CSS让浏览器识别
,写代码只需要写高级的CSS 和 维护高级的CSS 主要就是提升开发和维护效果
a. 常见的CSS预处理器
1. less less最简单 最热门
2. sass
3. stylus
3种语言 的特点都类似 学会一种即可
b. less 官网http://lesscss.org
1. 是一个CSS预处理器 能够完全兼容CSS 并且扩展了CSS
2. 语法简洁和CSS类似 上手快
3. less.js 一个官方的编译器文件 (less代码不能被浏览器识别 还是需要转成CSS) 需要一个编译工具 把写完的less代码 编译成CSS 代码
4. 语言特性
1. 定义变量
2. Mixins混入 (自定义函数)
3. 嵌套(跟标签一样的嵌套 外面容器不需要重复写)
4. 操作(运算符 + - * /)
5. 转码 把一些CSS代码当成字符串转码到里面
6. 函数(系统 less官方提供的函数) 数学 字符串 颜色 等等很多自定义函数
c. less的编译和使用
- 使用Node.js 命令去编译
- 使用less.js浏览器阶段的编译方式
- 页面像引入CSS 一样去引入less
4 vscode less编译插件 easy less 安装后重启 写了less代码 保存的时候自动生成对应的css文件
demo.less > demo.css 修改了代码不断编译和刷新(只需要引入编译好的CSS即可)
d. less.js编译less的原理和过程
- 请求 读取 less文件成功 （要发送文件请求 使用ajax发送文件的请求）
- 把less文件的代码转成CSS
- 把CSS嵌入到页面的style标签里面
微金所项目
导航条的布局
- 使用bootstrap官方的组件 导航条组件 》 默认样式导航条
- 把导航条里面一些不需要的内容 下拉菜单和表单删掉
- 修改导航条的样式 对比完整版 需要修改什么样式 检查元素看样式在bootstrap哪个选择器生效的 就使用哪个对他进行覆盖
- 覆盖整体背景色
- 覆盖active 里面的a的背景色
- 设置a的高度和行高 （注意由于默认a有上下15px padding所以行高要减少30px 高度80 行高只写50px）
- 设置左边图标的字体大小和颜色
- 设置.active a的底部边框 和 a:hover的底部边框
轮播图区域
- 使用bootstrap JS插件 》 轮播图(carousel) 插件
- 添加轮播图item个数
- 添加小圆点li个数 和修改data-slide-to属性
- 修改item里面的img的图片路径
响应式轮播图切换
-
轮播图有2张图片
- 大图 2000*410大图 小 中 大屏幕显示大图
- 小图 640*340小图 超小屏幕手机上显示小图
-
大图和小图的显示的方式不一样
- 大图 固定高度 图片居中在页面中间显示
- 因为大图有2000px的宽度 比屏幕要大 2000px是为了兼容1920大分辨率的电脑
- 但是希望在1366电脑也是正常显示
- 让大图片在页面中居中显示固定高度
- 小图 宽高就自适应 宽度变化 高度也自动变化
- 大图 固定高度 图片居中在页面中间显示
-
响应式轮播图思路
- 在页面要同时放2张图 分别是大图和小图 放2个图片 大图使用div背景图标签 小图使用img图片标签
- 大图片标签在小 中 大屏幕显示 超小屏幕隐藏 hidden-xs
- 小图片在超小屏幕显示 在 小 中 大 隐藏 hidden-sm hidden-md hidden-lg
- 修改轮播图的大图片和小图片的样式
- 分别给大图片和小图片定义2个类名 加不同的样式
- 大图使用背景图 设置宽高和背景图定位居中
- 小图片需要自适应设置宽度100%
- 分别通过行内样式修改大图片背景图路径
- 小图片的路径通过src修改路径
特色介绍区域布局
- 使用container容器居中
- 使用栅格系统实现布局
- 内容使用 组件 》 媒体对象组件
- 修改里面的图片为字体图标
- 修改样式
- 修改父容器和内容的间距 使用padding
- 修改a标签的字体颜色和下划线
- 修改兄弟直接的间距使用margin
立即预约区域布局
- 使用container容器居中
- 使用bootstrap 全局CSS样式 》 辅助类 》 快速浮动 实现左右布局
- 使用字体图标
- 使用bootstrap 全局CSS样式 》 辅助类 》 情景文本颜色 实现修改字体颜色
- 修改样式
- 给父容器添加上下边框
- 给父容器设置 padding 和内容的间距（注意别使用行高 因为缩小后会有多行文字 间距会很大）
- 修改text-danger的字体颜色
今天总结
全部总结:
1. 字体图标
1. 字体图标的生成
1. 打开阿里图标库 我的图标
2. 把你设计师给你svg上传
3. 加入购物车 下载代码
4. 使用里面的代码 和 图标
2. 图标的原理和组成部分
1. 字体文件(存在字体文件里面)
2. 字体名称(引入文件 定义一个字体名称)
3. 使用图标的编码来显示某一个图标 (unicode编码网站自动生成)
3. 图标的使用方式
1. 引入字体图标的CSS文件
2. 使用对应的图标的类名即可
2. CSS预处理器
1. 什么是预处理： 提前写好一些高级的CSS代码（模板引擎） 通过一些编译工具转成普通的CSS让浏览器识别
2. less sass stylus 重点掌握less
3. less: 是完全兼容CSS预处理 可以使用多种编译方式 nodejs less.js 编辑器的插件
4. less的特点
1. 引包 在当前less引入别的人的less
2. 定义变量 把一些重复的值 存在变量里面方便调用和维护
3. 嵌套 优化嵌套格式 父子分明 减少冗余代码
4. mixins 混入(自定义函数) 把一些重复代码封装到函数里面 重复调用
5. less的编译 浏览器编译方式
1. 引入less文件
<!-- 注意把文件类型 改成rel="stylesheet/less" -->
<link rel="stylesheet/less" href="demo.less">
2. 引入less.js的编译器
<!-- 2. 引入本地less.js -->
<script src="weijinsuo/lib/less/less.js"></script>
3. 使用服务器打开页面（一定注意 sublimerserver live server 都可以开启服务器）
4. 编译的原理
1. 请求less 文件 通过 rel="stylesheet/less" 找到less文件路径 往文件路径发送请求(需要使用服务器)
2. 通过less.js里面一些正则匹配把less代码 转成CSS代码
3. 在页面动态添加一个style标签 把 转好的CSS放到里面的style标签里面
3. 使用less实现微金所头部 布局
1. 高度给子元素加不要给父元素加
2. - 相邻下一个兄弟选择器 ~ 相邻所有兄弟
3. 提前公共的变量 边框颜色 a颜色等
4. 导航条样式
1. 高度给子元素加不要给父元素加
2. 去掉默认背景色
3. 设置行高 设置50px 不是80px 自带了15px padding 内容只有50px行高也是50px
4. 移动端按钮居中 默认34px 在50px 加 上下 margin:8px 现在需要在80px居中 8+15px = 23px
5. 移动端按钮点击展开收缩导航条 使用collapse插件 这个插件有动画效果 加一个collpaseing类名 会把collpase临时删掉 样式短暂消失 不要使用会变化的类名
6. 导航条默认底部有margin-bottom去掉
5. 响应式轮播图
1. 有2张图片 大图 和 小图
大图2000 需要居中在页面中显示 高度固定 小 中 大 屏幕显示 超小屏隐藏
小图640 需要自适应宽度高度随着屏幕变化而变化 超小显示 小 中 大 隐藏
2. 准备2个标签分别放大图和小图
使用响应式工具实现显示和隐藏切换
<!-- 大图片 在超小屏幕隐藏-->
<div class="large-image hidden-xs"></div>
<!-- 小的图片 在小 中 大 隐藏-->
<div class="small-image hidden-sm hidden-md hidden-lg">
<img src="weijinsuo/img/slide_01_640x340.jpg" alt="">
</div>
.large-image{
width: 100%;
height: 410px;
background-image: url(weijinsuo/img/slide_01_2000x410.jpg);
background-position: center center;
}
.small-image img{
width: 100%;
}
3. 使用轮播图插件里面： 需要把图片地址写在行内样式 或者img 的src
6. 特色介绍布局
1. 容器 栅格系统 媒体对象
2. 设置大元素padding上下间距
3. 设置文本颜色 等
7. 立即预约布局
1. 容器 浮动 清除浮动 文本颜色
2. 设置样式padding上下间距 不要使用行高(手机端)可能会有多行文字
扫一扫
852
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
