网站如何宣传推广,wordpress 电影解析,系统开发费用账务处理,唐山网站公司建设网站div {
width: 2rem;
height: 2rem;
background-color: pink;
}
/* 1. 首先我们选一套标准尺寸 750为准
我们用屏幕尺寸 除以 我们划分的份数 得到了 html 里面的文字大小 但是我们知道不同屏幕下得到的文字大小是不一样的 */
/* 3. 页面元素的rem值 页面元素在 750像素…div {
width: 2rem;
height: 2rem;
background-color: pink;
}
/* 1. 首先我们选一套标准尺寸 750为准
我们用屏幕尺寸 除以 我们划分的份数 得到了 html 里面的文字大小 但是我们知道不同屏幕下得到的文字大小是不一样的 */
/* 3. 页面元素的rem值 页面元素在 750像素的下px值 / html 里面的文字大小 */ 6flexible.jsrem技术 手机淘宝团队出的简洁高效 移动端适配库 我们再也不需要在写不同屏幕的媒体查询因为里面js做了处理 它的原理是把当前设备划分为10等份但是不同设备下比例还是一致的。 我们要做的就是确定好我们当前设备的html 文字大小就可以了 比如当前设计稿是 750px 那么我们只需要把 html 文字大小设置为 75px(750px / 10) 就可以里面页面元素rem值 页面元素的px 值 / 75 剩余的让flexible.js来去算
github地址https://github.com/amfe/lib-flexible
十三、苏宁网首页案例制作 (一)rem 媒体查询 less 技术制作苏宁移动端首页
1. 技术选型 方案我们采取单独制作移动页面方案 技术布局采取rem适配布局less rem 媒体查询 设计图 本设计图采用 750px 设计尺寸
2. 搭建相关文件夹结构 3. 设置视口标签以及引入初始化样式
4. 设置公共common.less文件 新建common.less 设置好最常见的屏幕尺寸利用媒体查询设置不同的html字体大小因为除了首页其他页面也需要 我们关心的尺寸有 320px、360px、375px、384px、400px、414px、424px、480px、540px、720px、750px 划分的份数我们定为 15等份 因为我们pc端也可以打开我们苏宁移动端首页我们默认html字体大小为 50px注意这句话写到最上面
// 设置常见的屏幕尺寸 修改里面的html文字大小
a {
text-decoration: none;
}
// 一定要写到最上面
html {
font-size: 50px;
}
// 我们此次定义的划分的份数 为 15
no: 15;
// 320
media screen and (min-width: 320px) {
html {
font-size: (320px / no);
}
}
// 360
media screen and (min-width: 360px) {
html {
font-size: (360px / no);
}
}
// 375 iphone 678
media screen and (min-width: 375px) {
html {
font-size: (375px / no);
}
}
// 384
media screen and (min-width: 384px) {
html {
font-size: (384px / no);
}
}
// 400
media screen and (min-width: 400px) {
html {
font-size: (400px / no);
}
}
// 414
media screen and (min-width: 414px) {
html {
font-size: (414px / no);
}
}
// 424
media screen and (min-width: 424px) {
html {
font-size: (424px / no);
}
}
// 480
media screen and (min-width: 480px) {
html {
font-size: (480px / no);
}
}
// 540
media screen and (min-width: 540px) {
html {
font-size: (540px / no);
}
}
// 720
media screen and (min-width: 720px) {
html {
font-size: (720px / no);
}
}
// 750
media screen and (min-width: 750px) {
html {
font-size: (750px / no);
}
}
5. 新建index.less文件 新建index.less 这里面写首页的样式 将刚才设置好的 common.less 引入到index.less里面 语法如下
// 在 index.less 中导入 common.less 文件
import “common”
生成index.css 引入到 index.html 里面
6. body样式
body {
min-width: 320px;
width:15rem;
margin: 0 auto;
line-height: 1.5;
font-family: Arial,Helvetica;
background: #F2F2F2;
}
项目下载
(二)flexible.jsrem技术
1. 技术选型 方案我们采取单独制作移动页面方案 技术布局采取rem适配布局2flexible.js rem 设计图 本设计图采用 750px 设计尺寸
2. 搭建相关文件夹结构 3. 设置视口标签以及引入初始化样式还有js文件
我们页面需要引入 这个js文件
–在index.html中引入flexible.js这个文件–
4. body样式
body {
min-width: 320px;
width:15rem;
margin: 0 auto;
line-height: 1.5;
font-family: Arial,Helvetica;
background: #F2F2F2;
}
项目下载
十四、VSCode px 转换rem 插件cssrem setting.json 里面添加配置这里75是上面项目用到的 html font-size
altz实现 rem和px的转化
“cssrem.rootFontSize”: 75,
/* 这个插件默认的html文字大小 cssroot 16px */ 十五、黑马面面布局开发 1.目的 了解移动端页面开发流程 掌握移动端常见布局思路
1.1 技术方案 弹性盒子 rem LESS 最小适配设备为iphone5 320px 最大设配设备为iphone8plus(ipad能正常查看内容即可)
1.2 代码规范 类名语义化,尽量精短、明确必须以字母开头命名且全部字母为小写单词之间统一使用下划线“_” 连接 类名嵌套层次尽量不超过三层 尽量避免直接使用元素选择器 属性书写顺序
布局定位属性display / position / float / clear / visibility / overflow
尺寸属性width / height / margin / padding / border / background
文本属性color / font / text-decoration / text-align / vertical-align
其他属性CSS3content / cursor / border-radius / box-shadow / text-shadow 避免使用id选择器 避免使用通配符*和!important
1.2 目录规范
项目文件夹heimamm
样式文件夹css
业务类图片文件夹images
样式类图片文件夹 icons
字体类文件夹 fonts
2.流程开发
2.1 蓝湖/摹客协作平台 UI设计师 psd效果图完成后会上传到蓝湖//摹客里面同时会拉前端工程师进入开发 大部分情况下UI会把图片按照前端设计要求给切好 UI设计师 上传蓝湖到或者/摹客了解 /摹客官网地址 https://www.mockplus.cn/ 注册一个账号 下载moke ps插件 PS 安装/摹客/蓝湖插件 打开PS/摹客/蓝湖插件 上传需要切图需要先标注切图 查看项目 邀请成员进入分享按钮链接地址
前端设计师可以直接/摹客/蓝湖测量取值
2.2 适配方案 flex 布局 百分比布局 rem布局 vw/vh布局 响应式布局 本次案例 flex rem flexible.js LESS
2.3 初始化文件 引入 normalize.css less 中 初始化body样式 约束范围
media screen and (min-width: 750px) {
html {
font-size: 37.5px !important;
}
}
2.4 布局模块 头部模块 .header 高度为 80px nav 模块制作 多用 flex 充电学习 阴影
box-shadow: 0 0px 10px rgba(0, 0, 0, 0.1)
2.5 swiper 插件使用
官网地址https://www.swiper.com.cn/ 下载需要的css和js文件 html页面中 引入相关文件 官网找到类似案例复制html结构css样式 js 语法 根据需求定制修改模块
2.6 上传码云并发布部署静态网站
准备工作 需要下载git软件 需要码云注册账号
git 可以把我们的本地网站提交上传到远程仓库码云 gitee里面 类似以前的 ftp
码云 就是远程仓库 类似服务器 码云创建新的仓库。 heimamm 利用git 提交 把本地网站提交到 码云新建的仓库里面 在网站根目录右键-- Git Bash Here 如果是第一次利用git提交请配置好全局选项
git config --global user.name “用户名”
git config --global user.email “你的邮箱地址”
初始化仓库
git init
把本地文件放到暂存区
git add .
把本地文件放到本地仓库里面
git commit -m ‘提交黑马面面网站’
链接远程仓库
git remote add origin 你新建的仓库地址
把本地仓库的文件推送到远程仓库 push
git push -u origin master
码云部署发布静态网站 在当前仓库中点击 “服务” 菜单 选择 Gitee Pages 选择 “启动” 按钮 稍等之后会拿到地址就可以利用这个地址来预览网页了 当然你也可以利用 草料二维码 生成二维码 https://cli.im/
项目下载
十六、移动端WEB开发之响应式布局 1. 响应式开发
1.1 响应式开发原理
就是使用媒体查询针对不同宽度的设备进行布局和样式的设置从而适配不同设备的目的
| 设备划分 | 尺寸区间 |
| — | — |
| 超小屏幕手机 | 768px |
| 小屏设备平板 | 768px ~ 992px |
| 中等屏幕桌面显示器 | 992px ~ 1200px |
| 宽屏设备大桌面显示器 | 1200px |
1.2 响应式布局容器 响应式需要一个父级做为布局容器来配合子级元素来实现变化效果 原理就是在不同屏幕下通过媒体查询来改变这个布局容器的大小再改变里面子元素的排列方式和大小从而实现不同屏幕下看到不同的页面布局和样式变化。
平时我们的响应式尺寸划分 超小屏幕手机小于 768px设置宽度为 100% 小屏幕平板大于等于 768px设置宽度为 750px 中等屏幕桌面显示器大于等于 992px宽度设置为 970px 大屏幕大桌面显示器大于等于 1200px宽度设置为 1170px
但是我们也可以根据实际情况自己定义划分
Document
1.3 响应式导航
需求分析 当我们屏幕大于等于768像素我们给nav宽度为768px因为里面子盒子需要浮动所以nav需要清除浮动。 nav里面包含8个小li 盒子每个盒子的宽度定为 93.75px 高度为 30px浮动一行显示。 当我们屏幕缩放宽度小于800像素的时候 nav盒子宽度修改为 100% 宽度。 nav里面的8个小li宽度修改为 33.33%这样一行就只能显示3个小li 剩余下行显示。
Document 导航栏导航栏导航栏导航栏导航栏导航栏导航栏导航栏2.Bootstrap前端开发框架
2.1 Bootstrap 简介
Bootstrap 来自 Twitter推特是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS 和 JAVASCRIPT 的它简洁灵活使得 Web 开发更加快捷。 中文官网http://www.bootcss.com/ 官网http://getbootstrap.com/ 推荐使用https://v3.bootcss.com/ Bootstrap中文文档
**框架**顾名思义就是一套架构它有一套比较完整的网页功能解决方案而且控制权在框架本身有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发
1. 优点 标准化的htmlcss编码规范 提供了一套简洁、直观、强悍的组件 有自己的生态圈不断的更新迭代 让开发更简单提高了开发的效率
2. 版本 2.x.x停止维护,兼容性好,代码不够简洁功能不够完善。 3.x.x目前使用最多,稳定,但是放弃了 IE6-IE7。对 IE8 支持但是界面效果不好,偏向用于开发响应式布局、移 动设备优先的 WEB 项目。 4.x.x 最新版目前还不是很流行
2.2 Bootstrap 使用 这里只考虑使用它的样式库 控制权在框架本身使用者要按照框架所规定的某种规范进行开发 Bootstrap 使用四步曲 创建文件夹结构 创建 html 骨架结构 引入相关样式文件 书写内容 !doctype html Bootstrap 你好世界 2.3 布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器它提供了两个作此用处的类。
1. container 类 响应式布局的容器 固定宽度 大屏 ( 1200px) 宽度定为 1170px 中屏 ( 992px) 宽度定为 970px 小屏 (768px) 宽度定为 750px 超小屏 (100%)
2. container-fluid 类 流式布局容器 百分百宽度 占据全部视口viewport的容器。 适合单独做移动端开发
3. Bootstrap 栅格系统
3.1 栅格系统简介 栅格系统英文为“grid systems”,也有人翻译为“网格系统”它是指将页面布局划分为等宽的列然后通过列数的定义来模块化页面布局。 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统随着屏幕或视口viewport尺寸的增加系统会自动分为最多12列。 Bootstrap里面的container 宽度是固定的但是在不同屏幕下container的宽度不同我们再把container 划分为12等份
3.2 栅格选项参数
栅格系统用于通过一系列的行row与列column的组合来创建页面布局你的内容就可以放入这些创建好的布局中。
| | 超小屏幕手机 768px | 小屏设备平板768px | 中等屏幕桌面显示器992px | 宽屏设备大桌面显示器1200px |
| — | — | — | — | — |
| .container 最大宽度 | 自动(100%) | 750px | 970px | 1170px |
| 类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| 列数 column | 12 | 12 | 12 | 12 | 按照不同屏幕划分为1~12 等份 行row 可以去除父容器作用15px的边距, 高度和父元素一样高 xs-extra small超小 sm-small小 md-medium中等 lg-large大 列column大于 12多余的“列column”所在的元素将被作为一个整体另起一行排列 每一列默认有左右15像素的 padding 可以同时为一列指定多个设备的类名以便划分不同份数 例如 classcol-md-4 col-sm-6 若只有.col-xs- 那么所有类型按这个列划分 Document 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 3.3 列嵌套
栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列。我们可以通过添加一个新的 .row 元素和一系列 .col-sm- 元素到已经存在的 .col-sm- 元素内 Document a b 2 3 3.4 列偏移
使用 .col-md-offset- 类可以将列向右侧偏移。这些类实际是通过使用 选择器为当前元素增加了左侧的边距margin Document 左侧 右侧 中间盒子 3.5 列排序
通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列column的顺序。 Document 左侧 右侧 3.6 响应式工具
为了加快对移动设备友好的页面开发工作利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。
|类名 |超小屏 |小屏 |中屏| 大屏|
|-|-|-|-|-|
|.hidden-xs| 隐藏 |可见 |可见 |可见|
|.hidden-sm| 可见 |隐藏 |可见 |可见|
|.hidden-md| 可见 |可见 |隐藏 |可见|
|.hidden-lg |可见 |可见 |可见 |隐藏|
与之相反的是visible-xs等只有在特定宽度显示某个内容 Document 我会显示哦
2 我会变魔术哦 4 3.7 其他
Bootstrap 其他按钮、表单、表格 请参考Bootstrap 文档 中文官网http://www.bootcss.com/ 官网http://getbootstrap.com/ 推荐使用https://v3.bootcss.com/ Bootstrap中文文档
十七、阿里百秀首页案例 技术选型 方案我们采取响应式页面开发方案 技术bootstrap框架 设计图 本设计图采用 1280px 设计尺寸
需求分析
1.页面布局分析 2. 屏幕划分分析 屏幕缩放发现 中屏幕 和 大屏幕布局 是一致的。 因此我们列 定义为 col-md- 就可以了 md 是大于等于 970 以上的 屏幕缩放发现 小屏幕 布局发生变化因此我们需要为 小屏幕根据需求改变布局 屏幕缩放发现 超小屏幕布局又发生变化因此我们需要为 超小屏幕根据需求改变布局 策略 我们先布局 md以上的 pc端布局最后根据实际需求在修改 小屏幕 和 超小屏幕的 特殊布局样式
页面制作
container 宽度修改
因为本效果图采取 1280的宽度 而Bootstrap 里面 container宽度 最大为 1170px因此我们需要手动改下container宽度
/* 利用媒体查询修改 container宽度适合效果图宽度 */
media (min-width: 1280px) {
.container {
width: 1280px;
}
}
项目下载
十八、vw/vh移动端布局 1.移动端布局 移动端布局—flex布局 为了实现可以适配移动端页面元素可以宽度和高度等比例缩放 需要移动端适配有如下方案 2.vw/vh是什么
vw/vh是一个相对单位类似em和rem相对单位 vw是viewport width 视口宽度单位 vh是 viewport height 视口高度单位 相对视口的尺寸计算结果 1vw 1/100视口宽度 1vh 1/100视口高度 例如 当前屏幕视口是 375像素则 1vw 就是 3.75 像素 如果当前屏幕视口为414则 1vw 就是4.14像素 vw/vh和百分比有区别的百分比是相对于父元素来说的而vw和vh总是针对于当前视口来说的
3.vw/vh怎么用 超级简单 元素单位直接使用新单位vw/vh即可。 因为vw/vh 是相对单位所以不同视口屏幕下宽高一起变化完成适配。
如何还原设计稿 前提 我们设计稿按照iPhone678 来设计有个盒子是 50像素*50像素的如何使用vw呢 分析 ①设计稿参照iPhone678所以视口宽度尺寸是 375像素像素大厨切换到2x模式 ②那么1vw是多少像素 375px / 100 3.75px ③我们元素的目标是多少像素 50px * 50px ④那么50*50 是多少个vw 50 / 3.75 13.3333vw 或使用pxcook 4.vw 注意事项 因为设计到大量除法 还是适应LESS 搭配更好点。 我们本质是根据视口宽度来等比例缩放页面元素高度和宽度的所以开发中使用vw就基本够用了。vh很少使用。 兼容性 网站 https://caniuse.com/ 十九、案例实战-bibi官网首页头部 需求实现在不同宽度设备中等比缩放的网页效果
分析
准备好项目目录以及文件
准备好字体文件下载别人网站字体
检查元素 → iconfont样式表 → 复制字体URL到浏览器地址栏 → 回车 准备好less文件
生成的css文件自动放到css文件下面 准备开始项目内容
bibi官网移动端首页布局
1.头部模块 - suspension-box 悬挂箱子 VSCode 转换 vw 插件 2.m-navbar 模块 // 公用样式
{
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
body {
font-family: Helvetica Neue,Tahoma,Arial,PingFangSC-Regular,Hiragino Sans GB,Microsoft Yahei,sans-serif;
}
a {
color: #333;
text-decoration: none;
}
img {
vertical-align: middle;
width: 100%;
height: 100%;
}
ul {
list-style: none;
}
.ellipsis-2 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
项目下载
二十、移动端布局总结 移动端主流方案
自我介绍一下小编13年上海交大毕业曾经在小公司待过也去过华为、OPPO等大厂18年进入阿里一直到现在。
深知大多数前端工程师想要提升技能往往是自己摸索成长或者是报班学习但对于培训机构动则几千的学费着实压力不小。自己不成体系的自学效果低效又漫长而且极易碰到天花板技术停滞不前
因此收集整理了一份《2024年Web前端开发全套学习资料》初衷也很简单就是希望能够帮助到想自学提升又不知道该从何学起的朋友同时减轻大家的负担。
既有适合小白学习的零基础资料也有适合3年以上经验的小伙伴深入学习提升的进阶课程基本涵盖了95%以上前端开发知识点真正体系化
由于文件比较大这里只是将部分目录大纲截图出来每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频并且后续会持续更新
如果你觉得这些内容对你有帮助可以添加V获取vip1024c 备注前端
最后
面试题千万不要死记一定要自己理解用自己的方式表达出来在这里预祝各位成功拿下自己心仪的offer。 一个人可以走的很快但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人都欢迎扫码加入我们的的圈子技术交流、学习资源、职场吐槽、大厂内推、面试辅导让我们一起学习成长
mg_convert/06927407c54272a4ab09671916d1013e.png)
2.m-navbar 模块 // 公用样式
{
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
body {
font-family: Helvetica Neue,Tahoma,Arial,PingFangSC-Regular,Hiragino Sans GB,Microsoft Yahei,sans-serif;
}
a {
color: #333;
text-decoration: none;
}
img {
vertical-align: middle;
width: 100%;
height: 100%;
}
ul {
list-style: none;
}
.ellipsis-2 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
项目下载
二十、移动端布局总结 移动端主流方案
自我介绍一下小编13年上海交大毕业曾经在小公司待过也去过华为、OPPO等大厂18年进入阿里一直到现在。
深知大多数前端工程师想要提升技能往往是自己摸索成长或者是报班学习但对于培训机构动则几千的学费着实压力不小。自己不成体系的自学效果低效又漫长而且极易碰到天花板技术停滞不前
因此收集整理了一份《2024年Web前端开发全套学习资料》初衷也很简单就是希望能够帮助到想自学提升又不知道该从何学起的朋友同时减轻大家的负担。 [外链图片转存中…(img-rsUO2MsI-1712451914389)] [外链图片转存中…(img-8QO4bmry-1712451914390)] [外链图片转存中…(img-uBeZTsaU-1712451914390)] [外链图片转存中…(img-cQ8CFFJS-1712451914390)] [外链图片转存中…(img-T8DIyUQr-1712451914391)] [外链图片转存中…(img-q8zSJYfC-1712451914391)]
既有适合小白学习的零基础资料也有适合3年以上经验的小伙伴深入学习提升的进阶课程基本涵盖了95%以上前端开发知识点真正体系化
由于文件比较大这里只是将部分目录大纲截图出来每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频并且后续会持续更新
如果你觉得这些内容对你有帮助可以添加V获取vip1024c 备注前端 [外链图片转存中…(img-khvQJ4nX-1712451914391)]
最后
面试题千万不要死记一定要自己理解用自己的方式表达出来在这里预祝各位成功拿下自己心仪的offer。
[外链图片转存中…(img-tnnnA0SF-1712451914391)]
[外链图片转存中…(img-Wo58gNJj-1712451914392)]
[外链图片转存中…(img-89EyqY4y-1712451914392)]
[外链图片转存中…(img-qIyvy1fK-1712451914393)]
一个人可以走的很快但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人都欢迎扫码加入我们的的圈子技术交流、学习资源、职场吐槽、大厂内推、面试辅导让我们一起学习成长 [外链图片转存中…(img-xaiSWjQT-1712451914393)]
