前端入门 Html5 Css3 移动Web_

白天 夜间 首页 下载 阅读记录
  我的书签   添加书签   移除书签

1.准备工作

浏览 82 扫码 分享 2023-11-26 13:26:14
  • 1.技术选型
  • 2.搭建相关文件夹结构
  • 3.设置视口标签以及引入初始化样式

    1.技术选型

    方案：我们采取单独制作移动页面方案
    技术：布局采取流式布局

    2.搭建相关文件夹结构

    image.png、

    3.设置视口标签以及引入初始化样式

    image.png

    若有收获，就点个赞吧

    0 人点赞

    上一篇:
    下一篇:
    • 书签
    • 添加书签 移除书签
    • 基础部分
      • 1.html标签
      • 2.表单标签
        • 1.表单域
        • 2.input之type属性文本框和密码框
      • 3.css单词
      • 4.emmet语法生成html标签
      • 5.Emment语法快速生成css样式
      • 6.Emmet语法快速格式化代码
      • 7.后代选择器
      • 8.子选择器
      • 9.并集选择器
      • 10.鼠标移到字或图上变颜色
      • 11.focus伪类选择器
      • 12行内块元素
      • 13元素显示模式的转换
      • 14.单行文字垂直居中
      • 15.背景
      • 16背景位置
      • 17背景图片固定
      • 18背景复合写法
      • 19设置盒子背景色为透明
      • 20.css三大特性
      • 21.权重的叠加
      • 22.盒子模型组成
      • 23.盒子模型边框border
      • 24.表格细线边框
      • 25.边框会影响盒子实际大小
      • 26.内边距（padding）
      • 27.padding复合写法
      • 28.padding会影响盒子实际大小
      • 29.盒子模型外边距（margin）
      • 30.外边距典型应用-块级盒子水平居中
      • 31.行内元素和行内快元素水平居中
      • 32.外边距合并-相邻块元素垂直外边距
      • 33.外边距合并-嵌套块元素坍陷
      • 34.清除内外边距
      • 35.ps基操
      • 36.产品模块布局案例
      • 37.综合案例-竖线细节制作
      • 38.pink老师解惑
      • 39.快报案例
      • 40.圆角边框
      • 41.盒子阴影
      • 42.浮动
      • 43.浮动布局练习
      • 44.常见的网页布局
      • 45.清除浮动
      • 46ps切图
      • 47.学成在线案例
      • 48.定位position
      • 49淘宝焦点图
      • 50网页布局总结
      • 51元素的显示与隐藏
      • 52.鼠标经过显示遮罩案例
    • 高级css技巧
      • 1精灵图
      • 2.字体图标
      • 3.css三角的做法
      • 4.用户界面
      • 5vertical-align属性应用
      • 6溢出的文字省略号显示
      • 7.常见布局技巧
    • css初始化
    • HTML5提高
    • HTML新增
      • 1.HTML5新增的语义化标签
      • 2.视频标签
      • 3音频标签<audio>
      • 4.多媒体标签总结
      • 5.intput表单
      • 6.表单属性
        • 无标题
    • CSS3新增
      • 4.css3 过渡 transition （重点）
      • 1.新增选择器
      • 2.css3盒子模型box-sizing：border-box
      • 3.css3其他特性（了解）
    • 品优购项目
      • 5.注册页面
        • 3.注册页面主体区域
        • 2.注册页面头部区域 header
        • 1.注册页面准备工作
      • 常用模块类名命名
      • psd资源
      • 1.目标
      • 2.品优购项目规划
      • 3品优购首页
        • 1.快捷导航 shortcut 制作
        • 2.header制作
          • 制作header的方法
          • 1.logo制作
          • 2.search搜索模块
          • 3.hotwords 热点词模块
          • 4.购物车 shopcar 模块
        • 3.nav 导航制作
        • 4.底部制作
          • 3.版权模块 mod_copyright
          • 2
          • 1
        • 5.mian 主题模块制作
        • 6.今日推荐模块 recom
        • 7.楼层区制作
          • 1.家用电器模块搭建
      • 4分类列表页制作
        • 4.列表页主体 sk_container
        • 3.列表页导航 nav 制作
        • 2.header 中的秒杀模块 sk
        • 1.分类列表页制作准备
    • 服务器
      • 2.将品优购案例传到远程服务器
      • 1服务器
    • 总结
    • 就业班课程笔记
      • 9.浏览器私有前缀
      • 8.3D转化
      • 7.动画案例-奔跑的熊
      • 6.动画-速度曲线细节
      • 5.动画案例-大数据热点图案例
      • 4.动画
      • 3.2D转换
      • 2.HTML5
      • 1.vscode 基本使用
    • 移动端
      • 无标题文档
      • 39.苏宁网首页案例-less练习
        • rem适配方案2
          • 6.固定顶部搜索导航栏
          • 5.修改flexible默认html字体大小
          • 4.vscode插件cssrem，将px转换为rem
          • 3.body样式修改
          • 2.用方案二写苏宁首页
          • 1.简洁高效的rem适配方案flexible.js
        • rem适配方案1
          • 6.分类导航栏 nav
          • 5.banner部分和广告ad
          • 4.固定搜索框searchFixed
          • 3.苏宁首页body样式设置
          • 2.苏宁首页import导入样式
          • 1.准备工作
      • 38.rem适配方案
      • 37.Less 运算
      • 36.Less 嵌套
      • 35.Less介绍和使用
      • 34.css的弊端-引出less的原因
      • 33.媒体查询-引入资源（理解）
      • 32.媒体查询 rem 例子
      • 31.媒体查询
      • 30.rem单位
      • 29.移动web开发之rem适配布局
      • 28.携程网首页案例制作
        • 13.购物热销模块
        • 12.侧导航栏 subnav-entry模块制作
        • 11.背景渐变
        • 10.主导航栏内容制作
        • 9.主导航栏外观布局
        • 8.快速更换背景图片-属性选择器方法
        • 7.local-nav 内容制作
        • 6.local-nav 布局
        • 5.焦点图 focus 模块
        • 4.搜索模块.search制作
        • 3.搜索模块user制作
        • 2.搜索模块布局
        • 1.准备工作
      • 27.（了解）order 属性定义项目的排序顺序
      • 26.(了解）align-self 控制子项自己在侧轴上的排列方式
      • 背景线性渐变
      • 25.flex 属性
      • 24.flex 布局子项常见属性
      • 23.flex-flow
      • 22.align-content 设置侧轴上的子元素的排列方式（多行）
      • 21.align-items 设置侧轴上的子元素排列方式（单行）
      • 20.flex-wrap 设置子元素是否换行
      • 19.justify-content 设置主轴上的子元素排列方式
      • 18.fiex-direction 设置主轴的方向
      • 17.flex 布局父项常见属性
      • 16.flex布局原理
      • 15.flex 布局与传统布局差异
      • 14.flex布局目标
      • 13京东移动端首页（流式布局）
        • 12.结束
        • 11.新闻快报模块
        • 10.导航栏nav模块制作
        • 9.品牌日模块制作
        • 8.焦点图
        • 7.二倍精灵图做法
        • 6.搜索模块内容制作
        • 5.搜索模块布局
        • 4.app内容填充
        • 3.app布局
        • 2.body设置
        • 1.准备工作
      • 12.流式布局（百分比布局）
      • 11.移动端常见布局
      • 10.移动端技术解决方案
      • 9.移动端开发选择
      • 8.多倍图切图 cutterman
      • 7.背景缩放 background-size
      • 6.多倍图
      • 5.二倍图
      • 4.meta 视口标签
      • 3.视口
      • 2.移动端基础
      • 1.移动web开发之流式布局的目标
    • 移动web开发
      • 4.响应式导航案例
      • 3.响应式布局容器
      • 2.响应式开发原理
      • 1.移动web开发响应式布局导读
    • bootstrap前端框架
      • 9.阿里百秀案例
        • 12.publish响应式制作
        • 11.news响应式制作
        • 10.nav响应式制作
        • 9.logo响应式制作
        • 8.aside模块
        • 7.publish模块
        • 6.中间news制作
        • 5.nav制作
        • 4.阿里百秀logo制作
        • 3.修改container最大宽度
        • 2.阿里百秀前期准备工作
        • 1.阿里百秀需求分析
      • 8.响应式工具
      • 7.列排序
      • 6.列偏移
      • 5.bootStrap列嵌套
      • 4.boostrap栅格系统
      • 3.bootStrap布局容器
      • 2.bootstrap使用
      • 1.简介
    • 移动端总结
      • 总结
    • css加更部分
      • 7.按照px转变为vw插件
      • 6.easyless自动保存css指定位置
      • 5.下载bilibili字体图标
      • 4.vw注意事项
      • 3.如何还原设计稿
      • 2.vw/vh怎么用
      • 1.vw和vh
    暂无相关搜索结果！

      让时间为你证明

      展开/收起文章目录

      分享，让知识传承更久远

      文章二维码

      手机扫一扫，轻松掌上读

      文档下载

      请下载您需要的格式的文档，随时随地，享受汲取知识的乐趣！
      PDF文档 EPUB文档 MOBI文档

      书签列表

        阅读记录

        阅读进度: 0.00% ( 0/0 ) 重置阅读进度
          思维导图备注