各种免费源码共享网站房地产开发建设工程口碑好

当前位置： 首页 > news >正文

各种免费源码共享网站,房地产开发建设工程口碑好,网站应该注意什么,凤凰军事新闻头条移动 Web 第三题 01-移动 Web 基础 谷歌模拟器 模拟移动设备#xff0c;方便查看页面效果#xff0c;移动端的效果是当手机屏幕发生了变化#xff0c;页面和页面中的元素也要跟着等比例变化。 屏幕分辨率 分类#xff1a; 硬件分辨路 - 物理分辨率#xff1a;硬件…移动 Web 第三题 01-移动 Web 基础 谷歌模拟器 模拟移动设备方便查看页面效果移动端的效果是当手机屏幕发生了变化页面和页面中的元素也要跟着等比例变化。 屏幕分辨率 分类 硬件分辨路 - 物理分辨率硬件分辨率出厂设置缩放调节的分辨路 - 逻辑分辨率软件 / 驱动设置 结论制作网页参考 逻辑分辨率 视口 作用显示 HTML 网页的区域用来约束 HTML 的尺寸一般在生成html骨架时会自动生成视口标签 !DOCTYPE html html langen headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedge!– 视口标签 –meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title /head body/body /htmlwidthdevice-width视口宽度 设备宽度initial-scale1.0缩放1倍不缩放 二倍图 概念设计稿里面每个元素的尺寸的倍数 作用防止图片在高分辨率屏幕下模糊失真 使用方法 什么是二倍图比如说现在的设计稿是参考iPhone6/7/8设备的宽度375px产出设计稿。而二倍图的设计稿尺寸就是750px。 在以后的工作将二倍图变成适合开发的图片非常简单只需要按照上面的步骤进行就可以了。直接选择二倍设计图。 上面的图片左边的是psd图片是二倍图时的处理方法右边是html图片的处理方法。 这是在像素大厨的操作方法在PS中的操作方法还不知道。 适配方案 宽度适配宽度自适应但是高度并不会随着屏幕的变化而变化。在PC端的设计就可以使用这种方式来设计但是移动端不建议使用这种方式来设计。PC端比较适合这种适配方案。 百分比布局Flex 布局 等比适配网页元素的宽高等比缩放这种适配方案更加适合移动端的设计。 remvw
02-rem 简介 rem单位是相对单位rem单位是相对于HTML标签的字号计算结果1rem 1HTML字号大小 使用rem相对单位的步骤 给HTML标签添加字号 html {font-size: 30px; }使用rem单位书写尺寸 .box {width: 5rem;height: 3rem;background-color: pink; }但是这还是不能实现rem的宽高自适应不同的屏幕因为没有引入相对应的JS文件。有了如果全部都使用了rem相对单位到时候直接修改html的字号就可以直接修改全部的盒子的宽高。 媒体查询 媒体查询能够检测视口的宽度然后编写差异化的 CSS 样式 当某个条件成立, 执行对应的CSS样式 media (width:320px) { // 如果检测到括号中的条件满足就会执行{}中的css选择器html {background-color: green;} }注意这是没有调节屏幕缩放比的情况下将视口的宽的调节到320px如果屏幕设置了缩放比有可能会无法实现因为调节缩放比后视口有可能是小数。 rem 布局 目前rem布局方案中将网页等分成10份 HTML标签的字号为视口宽度的 1/10。 使用rem布局的步骤 使用媒体查询给不同视口的屏幕设置不同的HTML字号代码如下图 ​ 2. 使用rem单位书写尺寸 .box {width: 5rem;height: 3rem;background-color: pink; }flexible.js flexible.js 是手机淘宝团队开发出的一个用来适配移动端的 js 库。 核心原理就是根据不同的视口宽度给网页中 html 根节点设置不同的 font-size。 body……script src./js/flexible.js/script /bodyrem 移动适配 工作中书写代码的尺寸要参照设计稿尺寸设计稿中是px但是移动端要实现宽高自适应不能使用px于是就有下面的处理方式。 目标:计算68px是多少个rem?(设计稿适配375px视口)N * 37.5 68N 68/ 37.5 rem单位尺寸 确定基准根字号 查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号1/10视口宽度 rem单位的尺寸 rem单位的尺寸 px单位数值 / 基准根字号一般是除以37.5但是要看设计师是参考了哪一个大小的视口。 03-less Less是一个CSS预处理器, Less文件后缀是.less。扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力 注意浏览器不识别 Less 代码目前阶段网页要引入对应的 CSS 文件 VS Code 插件Easy LESS保存 less文件后自动生成对应的 CSS 文件 现在只是学习less是如何使用的到了后面学习框架之后就会框架里面的less的用法。 只要一保存就会直接生成对应的css文件。 注释 单行注释 语法// 注释内容快捷键ctrl / 块注释 语法/* 注释内容 */快捷键 Shift Alt A
注意less中的单行注释是无法直接生成在对应的css文件中的但是多行注释可以直接在对应的css文件中生成注释。 运算 加、减、乘直接书写计算表达式除法需要添加 小括号 或 .表达式存在多个单位以第一个单位为准 到时候除法使用 . 的时候在下面会有小的波浪线表示报错但是这在less中是合法的直接保存也是可以出正确的结果的。 在表达式中最好是只用一个单位。 嵌套 作用快速生成后代选择器 提示用 表示当前选择器,代码写到谁的大括号里面就表示谁不会生成后代选择器通常配合伪类或伪元素使用 // 比如说a标签默认的字的颜色是红色当鼠标经过时变成蓝色 .father {a {color: red;}a:hover {color: blue;} } // 正常的写法是上面这样的如果需要将这一段代码迁移到其他地方就需要将a和a:hover对应的内容全都剪切走。 // 这样做不是特别的方便于是就用到了 上面的代码就变成了这样 .father {a {color: red;:hover { // 这表示:hover伪元素不会生成a标签的子代选择器而是就是a标签是和a标签是一起的color: blue;}} }// 这两种的写法都会生成一样的css代码 .father a {color: red; } .father a:hover {color: bule; }变量 概念容器存储数据 作用存储数据方便使用和修改 语法 定义变量变量名: 数据;使用变量CSS属性变量名; // 定义变量 myColor: pink; // 使用变量 .box {color: myColor; } a {color: myColor; }导入 比如说现在有三个less文件base.lesscommon.lessindex.less需要将他们全部引入html文件由于浏览器不识别less文件所以将他们全都变成对应的css文件在通过link引入对应的css文件。这是一种方法。 第二种方法base.less 和 common.less 不生成 css 文件直接导入 index.less 文件到时候直接让index.less 生成 css 文件其他两个less不生成css文件最后就引入 index.css 这一个css文件就行了。 作用导入 less 公共样式文件 语法导入: import “文件路径”; 提示如果是 less 文件可以省略后缀 import ./base.less; import ./common;导出 写法在 less 文件的第一行添加 // out: 存储URL 提示文件夹名称后面添加 / // out: ./index.css // out: ./css/ // out: ./myCss/index.css禁止导出 写法在 less 文件第一行添加: // out: false 04-综合案例-极速问诊 源码地址 准备工作 项目目录 HTML 结构 link relstylesheet href./iconfont/iconfont.css link relstylesheet href./css/index.cssbody……script src./js/flexible.js/script /bodyless 样式 // out: ../css/import ./base;头部布局 HTML 结构 !– 头部 – header1/headerless 样式 rootsize: 37.5rem; // 头部 header {display: flex;justify-content: space-between;padding: 0 (15 / rootSize);height: (44 / rootSize);background-color: pink;line-height: (44 / rootSize); }头部内容 HTML 结构 a href# classbackspan classiconfont icon-left/span/a h3极速问诊/h3 a href# classnote问诊记录/aless 样式 .icon-left {font-size: (22 / rootSize); }h3 {font-size: (17 / rootSize); }.note {font-size: (15 / rootSize);color: #2CB5A5; }banner 区域 HTML 结构 !– banner – div classbannerimg src./assets/entry.png altpspan20s/span 快速匹配专业医生/p /divless 样式 // banner .banner {margin-top: (30 / rootSize);margin-bottom: (34 / rootSize);text-align: center;img {margin-bottom: (18 / rootSize);width: (240 / rootSize);height: (206 / rootSize);}p {font-size: (16 / rootSize);span {color: #16C2A3;}} }问诊类型布局 HTML 结构 !– 问诊类型 – div classtypeullia href#div classpic1/divdiv classtxt2/divspan classiconfont icon-right/span/a/lili2/li/ul /divless 样式 // 问诊类型 .type {padding: 0 (15 / rootSize);li {margin-bottom: (15 / rootSize);padding: 0 (15 / rootSize);height: (78 / rootSize);border: 1px solid #EDEDED;border-radius: (4 / rootSize);a {display: flex;align-items: center;// 内容在78里面垂直居中height: (78 / rootSize);}} }问诊类型内容 HTML 结构 div classpicimg src./assets/type01.png alt /div div classtxth4三甲图文问诊/h4p三甲主治及以上级别医生/p /div span classiconfont icon-right/spanless 样式 img {margin-right: (14 / rootSize);width: (40 / rootSize);height: (40 / rootSize); } .txt {flex:1;h4 {font-size: (16 / rootSize);color: #3C3E42;line-height: (24 / rootSize);}p {font-size: (13 / rootSize);color: #848484;} } .iconfont {font-size: (16 / rootSize); }