前言:

本文章教你如何用微信小程序开发简历,使HR和面试官耳目一新~

学习要求:懂得基本的Css语法,Js语法,Flex页面布局,以及拥有一个自己注册好的微信小程序开发者号 。

后面会有如何发布的教程

话不多说直接开始~

1、打开微信开发者工具 并修改目录结构

2、第二步打开index/index.js文件

在模型层定义两个变量

  data: {width:0,height:0},

3、获取屏幕宽度和高度

在index.js中加入

/*** 生命周期函数--监听页面显示*/onShow: function () {//获取屏幕宽度var width=wx.getSystemInfoSync().windowWidth//获取屏幕高度var height=wx.getSystemInfoSync().windowHeight// 把值赋给模型层变量this.setData({width:width,height:height})},

4、打开页面文件index.wxml 定义页面标签

//定义页面标签
<swiper style="height:{{height}}px"></swiper>

定义完成在调试器中可以看到所对应标签

5、创建一个img目录 并放入自己的照片(图片是网图大家可以放入自己的照片!)

6、在页面标签页面index.wxml中引入自己的照片

<swiper style="height:{{height}}px"><swiper-item><image src="../../img/timg.jpg" mode="widthFix" class="timg"></image></swiper-item>
</swiper>

效果图:

7、在标签页面index.wxml中再加入三个块标签,用于存放姓名等属性

<swiper style="height:{{height}}px"><swiper-item><image src="../../img/timg.jpg" mode="widthFix" class="timg"></image><view class="cover-info"><text class="cover-name">{{name}}</text><text class="cover-spell">{{spell}}</text></view></swiper-item>
</swiper>

8、回到index.js在模型层中加入name和spell属性

  data: {width:0,height:0,// 首先在模型层定义两个变量name:"李亚鹏",spell:"Li Yapeng"}

9、接下来在index.wxss中给name和spell属性设置样式

.cover-info{position: absolute;left: 50px;top: 130px;
}
.cover-name{font-size: 30px;font-weight: bold;display: block;letter-spacing: 1px;
}
.cover-spell{font-size: 20px;letter-spacing: 1px;
}

效果如下,样式的属性可以随意改动,适合就好~
这里使用了偶像的名字,请粉丝不要介意。。。

10、接下来在index.wxml中定义彩色气泡标签

<swiper style="height:{{height}}px"><swiper-item><image src="../../img/timg.jpg" mode="widthFix" class="timg"></image><view class="cover-info"><text class="cover-name">{{name}}</text><text class="cover-spell">{{spell}}</text></view><view class="big-circle"></view><view class="medium-circle"></view><view class="small-circle"></view></swiper-item>
</swiper>

11、同样给彩色标签气泡定义样式

.big-circle{background-color: rgba(0, 165, 34, 0.7);width: 260px;height: 260px;border-radius: 130px;position: absolute;left: -150px;top: 110px;
}
.medium-circle{background-color: rgba(0, 165, 34, 0.7);width: 160px;height: 160px;border-radius: 80px;position: absolute;right: -80px;top: 110px;
}
.small-circle{background-color: rgba(0, 165, 34, 0.7);width: 50px;height: 50px;border-radius: 25px;position: absolute;left: -10px;bottom: 110px;
}

12、再定义两个工作标签

<swiper style="height:{{height}}px"><swiper-item><image src="../../img/timg.jpg" mode="widthFix" class="timg"></image><view class="cover-info"><text class="cover-name">{{name}}</text><text class="cover-spell">{{spell}}</text></view><view class="big-circle"></view><view class="medium-circle"></view><view class="small-circle"></view><view class="cover-work"><text class="cover-job">{{job}}</text><text class="cover-exp">{{exp}}</text></view></swiper-item>
</swiper>

13、同样到模型层创建相应变量

  data: {width:0,height:0,// 首先在模型层定义两个变量name:"李亚鹏",spell:"Li Yapeng",job:"Java工程师",exp:"1年半工作经验"},

14、接下来还是和之前一样,定义变量的样式

.cover-work{position: absolute;bottom: 200px;text-align: center;background-color: rgba(0, 0, 0, 0.2);padding: 20px 0;width: 100%;
}
.cover-job{display: block;color: #fff;font-size: 30px;font-weight: bold;
}
.cover-exp{display: block;color: #fff;font-size: 20px;
}

效果图:

15、实现导航栏文字

    <view class="navigation">我的简历<image src="../../img/arrow-right.png" class="arrow-right"></image></view>
.navigation{position: absolute;top: 40px;right: 10px;font-size: 18px;
}
.arrow-right{width: 20px;height: 20px;vertical-align: -5px;
}

到这里简历封面完成:

16、设计简历页面的标题栏

先在index.wxml中加入所需标签:

<swiper-item><scroll-view scroll-y="true" style="width:{{width}}px;height:{{height}}px"><view class="resume"><view class="section"><view class="section-info"><view class="section-seq">1</view><text class="section-title">基本资料</text></view><view class="column col-2"><text class="info">姓名:{{name}}</text><text class="info">电话:{{tel}}</text></view><view class="column col-2"><text class="info">性别:{{sex}}</text><text class="info">年龄:{{age}}</text></view><view class="column col-1"><text class="info">邮箱:{{email}}</text></view><view class="column col-1"><text class="info">住址:{{address}}</text></view></view><view class="section"><view class="section-info"><view class="section-seq">2</view><text class="section-title">主要技能</text></view><view class="skill" wx:for="{{skill}}" wx:key="item"><text class="skill-name">{{item.name}}</text><progress class="progress" percent="{{item.percent}}" stroke-width="5"></progress></view></view><view class="section"><view class="section-info"><view class="section-seq">3</view><text class="section-title">教育经历</text></view><view class="education" wx:for="{{education}}" wx:key="item"><view class="school"><image src="../../img/icon_school.png" class="icon-school"></image><text>{{item.school}}</text></view><view class="row"><view class="info"><image src="../../img/icon_book.png" class="icon-book"></image><text>{{item.major}}</text></view><view class="info"><image src="../../img/icon_calendar.png" class="icon-calendar"></image><text>{{item.year}}</text></view></view><rich-text class="desc">{{item.desc}}</rich-text></view></view><text class="page">1/4</text></view></scroll-view></swiper-item>

加入样式代码:

.resume{margin: 0 20px;
}
.section{padding-bottom: 30px;
}
.section-info{display: flex;border-bottom: 1px solid #333;padding-bottom: 5px;margin: 10px 0;
}
.section-seq{background-color: #444;width: 22px;height: 22px;color: #fff;text-align: center;line-height: 22px;margin-right: 10px;font-weight: bold;margin-top: 3px;
}
.section-title{font-size: 20px;
}
.column{font-size: 16px;border-bottom: dashed 1px #333;padding: 10px 0;
}
.col-2{column-count: 2;
}
.col-1{column-count: 1;
}
.info{display: block;
}

在模型层加入数据

  data: {width:0,height:0,// 首先在模型层定义两个变量name:"胡歌",spell:"Hu Ge",job:"Java工程师",exp:"1年半工作经验",tel: "13312345678",sex: "男",age: 29,email: "yangdi@163.com",address: "北京市朝阳区XX街道126号",},

效果如下:

17、主要技能模块开发

数据模型层引入数组形成进度条的样式

data: {width:0,height:0,// 首先在模型层定义两个变量name:"胡歌",spell:"Hu Ge",job:"Java工程师",exp:"1年半工作经验",tel: "13312345678",sex: "男",age: 29,email: "yangdi@163.com",address: "北京市朝阳区XX街道126号",skill: [{ name: "Java", percent: 85 },{ name: "PHP", percent: 40 },{ name: "HTML/CSS/JavaScript", percent: 90 },{ name: "Python", percent: 70 },{ name: "大数据", percent: 60 }],},

为数据加入样式:

.skill{padding: 5px 0;
}
.skill-name{font-size: 16px;display: block;margin-bottom: 5px;
}
.progress{}

18、教育经历的开发

首先还是在数据模型层加入教育经历数组

 data: {width:0,height:0,// 首先在模型层定义两个变量name:"胡歌",spell:"Hu Ge",job:"Java工程师",exp:"1年半工作经验",tel: "13312345678",sex: "男",age: 29,email: "yangdi@163.com",address: "北京市朝阳区XX街道126号",skill: [{ name: "Java", percent: 85 },{ name: "PHP", percent: 40 },{ name: "HTML/CSS/JavaScript", percent: 90 },{ name: "Python", percent: 70 },{ name: "大数据", percent: 60 }],education: [{school: "北京航空航天大学",major: "计算机科学与技术(本科)",year: "2014-2018",desc: "本专业培养掌握计算机软件基本理论知识,熟悉软件开发和管理技术、能够在计算机软件领域中从事软件设计、开发和管理的高级人才。"}],},

同样把相应的数据模型加入样式:

//同样把相应的数据模型加入样式
.education,.work,.project,.introduction{border-bottom: dashed 1px #999;padding: 10px 0;
}
.education:last-of-type{border-bottom:none;
}
.work:last-of-type{border-bottom:none;
}
.project:last-of-type{border-bottom:none;
}
.introduction:last-of-type{border-bottom:none;
}
.school,.company,.project-name{font-size: 18px;margin-bottom: 10px;
}
.icon-school{width: 26px;height: 26px;vertical-align: -6px;margin-right: 5px;
}
.row{display: flex;justify-content: space-between;
}
.info{font-size: 16px;margin-bottom: 10px;
}
.icon-book{width: 16px;height: 16px;vertical-align: -2px;margin-right: 3px;
}
.icon-calendar{width: 17px;height: 17px;vertical-align: -2px;margin-right: 3px;
}
.desc{color: #999;line-height: 1.5;
}
.page{display: block;width: 100%;text-align: center;font-size: 16px;padding-bottom: 15px;
}

效果如下图:

到这里是不是已经有些感觉了呢?样式都是什么意思还是需要大家学习些相关基础的知识。

19、工作经历模块的开发

//在数据模型层中加入工作经历数据data: {width:0,height:0,// 首先在模型层定义两个变量name:"胡歌",spell:"Hu Ge",job:"Java工程师",exp:"1年半工作经验",tel: "13312345678",sex: "男",age: 29,email: "yangdi@163.com",address: "北京市朝阳区XX街道126号",skill: [{ name: "Java", percent: 85 },{ name: "PHP", percent: 40 },{ name: "HTML/CSS/JavaScript", percent: 90 },{ name: "Python", percent: 70 },{ name: "大数据", percent: 60 }],education: [{school: "北京航空航天大学",major: "计算机科学与技术(本科)",year: "2014-2018",desc: "本专业培养掌握计算机软件基本理论知识,熟悉软件开发和管理技术、能够在计算机软件领域中从事软件设计、开发和管理的高级人才。"}],work: [{company: "北京XX公司",job: "程序员",year: "2019/01-至今",desc: "参与开发了XXX电商系统,担任程序员角色。主要的工作是负责广告投放、商品秒杀、商品拼团等模块的开发与维护,并且负责管理该项目的运维工作。"},{company: "北京XX公司",job: "实习生",year: "2018/03-2019/01",desc: "参与了K13在线教育系统的开发和测试,维护腾讯云点播的API接口调用,并实现在线转码、添加水印、防盗链和盗播,并且开发和维护K13教育的微信小程序"},{company: "北京航空航天大学创客学院",job: "项目组长",year: "2017/05-2018/01",desc: "参与本校创新学院的Litemall微商城系统的开发,担任项目组长职务,参与了商品管理、订单管理、微信支付、购物车等模块的设计与开发。"}],},

在标签页面加入工作经历的标签:

 <swiper-item><scroll-view scroll-y="true" style="width:{{width}}px;height:{{height}}px"><view class="resume"><view class="section"><view class="section-info"><view class="section-seq">4</view><text class="section-title">工作经历</text></view><view class="work" wx:for="{{work}}" wx:key="item"><view class="company"><image src="../../img/icon_company.png" class="icon-company"></image><text>{{item.company}}</text></view><view class="row"><view class="info"><image src="../../img/icon_job.png" class="icon-job"></image><text>{{item.job}}</text></view><view class="info"><image src="../../img/icon_calendar.png" class="icon-calendar"></image><text>{{item.year}}</text></view></view><rich-text class="desc">{{item.desc}}</rich-text></view></view><text class="page">2/4</text></view></scroll-view></swiper-item><swiper-item><scroll-view scroll-y="true" style="width:{{width}}px;height:{{height}}px"><view class="resume"><view class="section"><view class="section-info"><view class="section-seq">5</view><text class="section-title">工作经历</text></view><view class="project" wx:for="{{project}}" wx:key="item"><view class="project-name"><image src="../../img/icon_computer.png" class="icon-computer"></image><text>{{item.name}}</text></view><rich-text class="desc">{{item.desc}}</rich-text></view></view><text class="page">3/4</text></view></scroll-view></swiper-item>

加入样式代码:

.icon-company{width: 22px;height: 22px;vertical-align: -4px;margin-right: 5px;
}
.icon-job{width: 18px;height: 18px;vertical-align: -3px;margin-right: 3px;
}

效果如图:

20、项目经历栏目的设计

添加项目经历模型数据:

  project:[{name:"XXX电商系统",desc:"该电商系统是O2O类型的新零售电商系统,分为购物子系统、支付子系统、数据库子系统、安全子系统、库存子系统、物流子系统和财务子系统。核心架构采用了SpringCloud微服务架构,整合了上述若干子系统。技术栈包括了SpringMVC、MyBatis、Activiti、Shiro、QuartZ、Sculptor Boot、jabdp、jee-weapp、RocketMQ、Kafka、Selenium、Echart、Vue、Element-UI、Uni-APP、Swagger、ElasticSearch、Druid、Zookeeper,数据平台选择的是两种MySQL集群(Replication、PXC),由MyCat管理,同时对MyCat做双机热备。NoSQL采用的是Redis Cluster集群和MongoDB集群"},{name:"XXX K13在线教育系统",desc:"该系统是针对中小学生提供的K13在线教育系统,采用的是视频点播形式,分为B/S形式和C/S形式。我主要负责的是教学视频管理业务。授课教师向K13平台上传教学视频后,经过专业人员剪辑之后,由K13平台调用腾讯云点播API接口,来实现在线转码和压缩,并且添加水印,最后生成防盗播的URL路径,渲染到HTML网页或者APP上面。该系统使用的技术栈包括SpringBoot、SpringMVC、MyBatis、SpringSecurity、Kafka、QuartZ、Flowable,该系统最终部署在腾讯云平台。"},{name:"北京航空航天大学创客学院",desc:"Litemall微商城系统是本校创新学院联合北京XX商超集团联合打造的B2C电商系统,该系统采用前后端分离的架构设计,一共分为5个子系统,分别是微商城前后台系统、商城管理前后台系统、商城核心系统。业务上具备微商城所有的功能,包括微信支付。技术架构上面后台项目选择的SpringBoot、SpringMVC和MyBatis组成的SSM框架,并且融合了Shiro、Swagger、PowerMock、阿里云等技术。前端项目采用了VUE+ElementUI技术架构,小程序采用的微信原生框架。Litemall微商城采用分布式集群部署,发布在DockerSwarm环境中,并且实现高负载、高性能和高可用。"}],introduction:"本人性格开朗、稳重、有活力,待人热情、真诚;对待工作认真负责,善于沟通、协调有较强的组织能力与团队精神;上进心强、勤于学习能不断提高自身的能力与综合素质。在未来的工作中,我将以充沛的精力,刻苦钻研的精神来努力工作,稳定地提高自己的工作能力,与企业同步发展。"},

加入对应样式:

.icon-computer{width: 26px;height: 26px;vertical-align: -6px;margin-right: 5px;
}

21、自我评价模块开发

在标签index.wxml页面加入自我评价相应的标签模块:

<swiper style="height:{{height}}px"><swiper-item><image src="../../img/imgs.png" mode="widthFix" class="timg"></image><view class="cover-info"><text class="cover-name">{{name}}</text><text class="cover-spell">{{spell}}</text></view><view class="big-circle"></view><view class="medium-circle"></view><view class="small-circle"></view><view class="cover-work"><text class="cover-job">{{job}}</text><text class="cover-exp">{{exp}}</text></view><view class="navigation">我的简历<image src="../../img/arrow-right.png" class="arrow-right"></image></view></swiper-item><swiper-item><scroll-view scroll-y="true" style="width:{{width}}px;height:{{height}}px"><view class="resume"><view class="section"><view class="section-info"><view class="section-seq">1</view><text class="section-title">基本资料</text></view><view class="column col-2"><text class="info">姓名:{{name}}</text><text class="info">电话:{{tel}}</text></view><view class="column col-2"><text class="info">性别:{{sex}}</text><text class="info">年龄:{{age}}</text></view><view class="column col-1"><text class="info">邮箱:{{email}}</text></view><view class="column col-1"><text class="info">住址:{{address}}</text></view></view><view class="section"><view class="section-info"><view class="section-seq">2</view><text class="section-title">主要技能</text></view><view class="skill" wx:for="{{skill}}" wx:key="item"><text class="skill-name">{{item.name}}</text><progress class="progress" percent="{{item.percent}}" stroke-width="5"></progress></view></view><view class="section"><view class="section-info"><view class="section-seq">3</view><text class="section-title">教育经历</text></view><view class="education" wx:for="{{education}}" wx:key="item"><view class="school"><image src="../../img/icon_school.png" class="icon-school"></image><text>{{item.school}}</text></view><view class="row"><view class="info"><image src="../../img/icon_book.png" class="icon-book"></image><text>{{item.major}}</text></view><view class="info"><image src="../../img/icon_calendar.png" class="icon-calendar"></image><text>{{item.year}}</text></view></view><rich-text class="desc">{{item.desc}}</rich-text></view></view><text class="page">1/4</text></view></scroll-view></swiper-item><swiper-item><scroll-view scroll-y="true" style="width:{{width}}px;height:{{height}}px"><view class="resume"><view class="section"><view class="section-info"><view class="section-seq">4</view><text class="section-title">工作经历</text></view><view class="work" wx:for="{{work}}" wx:key="item"><view class="company"><image src="../../img/icon_company.png" class="icon-company"></image><text>{{item.company}}</text></view><view class="row"><view class="info"><image src="../../img/icon_job.png" class="icon-job"></image><text>{{item.job}}</text></view><view class="info"><image src="../../img/icon_calendar.png" class="icon-calendar"></image><text>{{item.year}}</text></view></view><rich-text class="desc">{{item.desc}}</rich-text></view></view><text class="page">2/4</text></view></scroll-view></swiper-item><swiper-item><scroll-view scroll-y="true" style="width:{{width}}px;height:{{height}}px"><view class="resume"><view class="section"><view class="section-info"><view class="section-seq">5</view><text class="section-title">工作经历</text></view><view class="project" wx:for="{{project}}" wx:key="item"><view class="project-name"><image src="../../img/icon_computer.png" class="icon-computer"></image><text>{{item.name}}</text></view><rich-text class="desc">{{item.desc}}</rich-text></view></view><text class="page">3/4</text></view></scroll-view></swiper-item><swiper-item><scroll-view scroll-y="true" style="width:{{width}}px;height:{{height}}px"><view class="resume"><view class="section"><view class="section-info"><view class="section-seq">6</view><text class="section-title">自我评价</text></view><view class="introduction"><rich-text class="desc">{{introduction}}</rich-text></view></view><text class="page">4/4</text></view></scroll-view></swiper-item>
</swiper>

效果图:

到这里就已经完成了,是不是很有成就感呢,接下来学习如何发布吧!!

22、小程序上线发布教程

点击上传–>>确定

填写相关信息:

成功后打开微信开发者平台:

点击版本管理 进入后找到开发版本 填写相关信息就可以了~~~~

以上就是一整套的微信小程序开发和发布教程~感谢阅读!

以往不变附上10道小程序面试题~10道小程序面试题了解一下
注:创作不易,如有需求可以给我发邮件联系我:lyps88888888@163.com

最后:

祝愿大家前程似锦,加油!!

2小时教会你用微信小程序做高端大气的简历,后带发布上线教程---面试宝典相关推荐

  1. java webpack web项目_官方出品,微信小程序和 Web 端同构解决方案——kbone

    介绍 最近在琢磨一些小程序开发和移动web开发,偶然间在Github上看到了这样一个项目--kbone,一个致力于微信小程序和 Web 端同构的解决方案.微信小程序的底层模型和 Web 端不同,我们想 ...

  2. 浅谈对腾讯云微信小程序解决方案服务端的理解(主要针对信道服务)

    浅谈对腾讯云微信小程序解决方案服务端的理解(主要针对信道服务) 参考文章: (1)浅谈对腾讯云微信小程序解决方案服务端的理解(主要针对信道服务) (2)https://www.cnblogs.com/ ...

  3. 10分钟上线 - 利用函数计算构建微信小程序的Server端

    摘要: 阿里云函数计算是一个事件驱动的全托管计算服务.通过函数计算,您无需管理服务器等基础设施,只需编写代码并上传.微信小程序是一种不需要下载安装即可使用的应用,它可以在微信内被便捷地获取和传播. 当 ...

  4. python搭建微信小程序卖货要收费用吗_个人的微信小程序做店铺收费吗?要收多少...

    微信小程序受到了广大用户的使用和喜爱,这种不用下载的应用,让人们能更快的开启和关闭应用,不用担心自己的内存不够.那么今天我们来了解下,个人的微信小程序做店铺收费吗?要收多少? 现在许多用了许多小程序了 ...

  5. 口令红包-利用函数计算构建微信小程序的server端

    摘要: 阿里云函数计算是一个事件驱动的全托管计算服务.通过函数计算,您无需管理服务器等基础设施,只需编写代码并上传.微信小程序是一种不需要下载安装即可使用的应用,它可以在微信内被便捷地获取和传播. 当 ...

  6. 微信小程序做问卷——前端部分(生成问卷)

    文章目录 实现效果 界面功能 数据功能 各个组件的实现 右上角的蓝色加号 问卷结构部分 以单选部分举例 每个题型的灰色加号 每个题型的删除按钮 每个选项的删除按钮 每个输入的数据记录 全部代码 que ...

  7. 微信小程序解决苹果端在禁止下拉刷新以后仍可以拖到屏幕的问题

    微信小程序解决苹果端在禁止下拉刷新以后仍可以拖到屏幕的问题 .json文件中----缺点是固定整个页面 {"navigationBarTitleText": "首页&qu ...

  8. 利用Serverless构建微信小程序的Server端

    前言 这篇文章适合所有的想微信小程序开发新手.老鸟以及想准备学习开发微信小程序的程序猿.本文以开发一个类似"语音口令红包"小程序为例,向您讲解如何使用阿里云函数计算快速构建微信小程 ...

  9. 微信小程序做店铺收费吗?【微信小程序店铺】

    很多商家企业现在都已经有自己的微信小程序店铺了,还没有的微信小程序店铺的商家企业也是计划开通自己的微信小程序店铺,那么对于他们来说,除了要知道怎么做微信小程序店铺,还需要了解微信小程序做店铺收费吗这个 ...

最新文章

  1. Visual Studio——多字节编码与Unicode码
  2. 目前市场上主流服务器厂商,目前市场上流行的串口服务器有哪些功能
  3. C++基础知识简答题
  4. Android Studio 无法启动模拟器的一种可能是你装的是Ghost版的系统
  5. idea tomcat启动乱码问题
  6. Spring Data JPA整合Redis缓存的配置
  7. msfconsole的简单使用
  8. 谢孟媛初级文法28 课地方副词时间副词和程度副词
  9. 用文氏图来理解卷积神经网络如何决定提取哪些特征
  10. 修改远程端口后登录不上的解决办法[作者:Jackie]
  11. 冰蝎shell_冰蝎动态二进制加密WebShell特征分析
  12. 程序员自爆奇葩入职原因:进腾讯是为了不用续费年费会员,进抖音是想天天上班刷抖音
  13. ubuntu卸载xilinx
  14. ctypeh里的函数c语言,大满贯平台网址网址-官网首页
  15. 再聊面试,这次关于钱,关于培训,关于内卷
  16. 160429 vue.js 2 台灣小凡(体验 vuejs 2之随笔)
  17. 联想笔记本打开野兽模式
  18. 微信浏览器不支持下载文件或应用解决方案--跳转到默认浏览器打开
  19. 计算机专业英语》第02章在线测试,《计算机专业英语》第01章在线测试
  20. c语言水仙花数素数,【C语言】斐波那契分数数列和、水仙花数、素数

热门文章

  1. 硬件电路工程师最全入门工作指南!
  2. 女生头发怎么画?日系二次元女生头发画法
  3. openGL的光照与材料(一)
  4. MATLAB 远程桌面无法连接的问题
  5. 记一次VS2013的卸载与重装
  6. 零基础学编程,如何快速入门?
  7. Linux常用命令、tomcat常用命令
  8. 报考教师资格证需要什么条件
  9. 三级信息安全技术真题知识点总结-第二套
  10. html自适应电脑屏幕大小,html页面怎样能够自适应电脑屏幕宽度?