AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

【网页前端】CSS进阶-综合案例3定位重构（二）

2022-09-16 178
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 本期主要介绍CSS进阶-综合案例3定位重构

2.3 代码实现

image.png

image.png

image.png

image.png

image.png

3. 综合案例 3：商品广告页（主练案例）

3.1 需求说明

如图，编写生成商城的 居中 商品广告页

image.png

提示：使用 table 更简单。

3.2 需求分析

image.png

image.png

4. 综合案例 4：信息介绍版（主练案例）

4.1 需求说明

如图：使用 table 和 div 结合，完成以下效果

image.png

4.2 需求分析

该分析由学生自己独立完成。

文章标签：
前端开发
关键词：
前端重构
前端css
CSS案例
CSS定位
网页前端
陶然同学
目录
相关文章
蚝油菜花
|
2月前
|
人工智能 自然语言处理 前端开发
DeepSite：基于DeepSeek的开源AI前端开发神器，一键生成游戏/网页代码
DeepSite是基于DeepSeek-V3模型的在线开发工具，无需配置环境即可通过自然语言描述快速生成游戏、网页和应用代码，并支持实时预览效果，显著降低开发门槛。
蚝油菜花
604 93
DeepSite：基于DeepSeek的开源AI前端开发神器，一键生成游戏/网页代码
游客tsrksm3mlhq4y
|
2月前
|
前端开发 JavaScript 安全
前端 “屎山代码“ 避坑指南与重构策略
屎山代码
游客tsrksm3mlhq4y
189 11
游客tsrksm3mlhq4y
|
2月前
|
前端开发
前端基础的讲解-CSS(4)
CSS详解
游客tsrksm3mlhq4y
49 12
游客tsrksm3mlhq4y
|
2月前
|
前端开发
前端基础的讲解-CSS(3)
CSS详解
游客tsrksm3mlhq4y
60 12
游客tsrksm3mlhq4y
|
2月前
|
前端开发 JavaScript
前端基础的讲解-CSS(2)
CSS详解
游客tsrksm3mlhq4y
61 10
游客tsrksm3mlhq4y
|
2月前
|
XML 前端开发 JavaScript
前端基础的讲解-CSS(1)
CSS详解
游客tsrksm3mlhq4y
87 10
游客tsrksm3mlhq4y
|
2月前
|
前端开发 容器
前端基础的讲解—CSS(5)
css详解
游客tsrksm3mlhq4y
54 8
卓伊凡
|
4月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
卓伊凡
115 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
想飞的雪糕
|
8月前
|
存储 人工智能 前端开发
前端大模型应用笔记（三）：Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用，通过使用Transformer模型，实现了更智能的搜索功能，如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue，使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程，并展示了实际效果和待改进点。
想飞的雪糕
628 14
你都不懂
|
8月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
你都不懂
135 0

热门文章

最新文章

  • 1
    PHP后端与uni-app前端协同的校园圈子系统：校园社交场景的跨端开发实践
  • 2
    用通义灵码IDE做产品高保真原型和前端页面
  • 3
    【微前端】singleSpa&importHTMLEntry（流程图）源码解析
  • 4
    前端工具方法整理
  • 5
    前端使用正则表达式检查是否为十六进制字符串
  • 6
    前端使用正则表达式提取经纬度 度分秒值
  • 7
    【CodeBuddy】三分钟开发一个实用小功能之：CSS渐变背景生成器
  • 8
    【CodeBuddy】三分钟开发一个实用小功能之：CSS代码瘦身专家
  • 9
    用通义灵码全新智能体+MCP实现从设计稿到前端代码，个人免费用
  • 1
    【CodeBuddy】三分钟开发一个实用小功能之：CSS渐变背景生成器
    43
  • 2
    【CodeBuddy】三分钟开发一个实用小功能之：CSS代码瘦身专家
    35
  • 3
    这个被忽略的CSS:hover隐藏用法，让交互设计师都跪了
    77
  • 4
    css改变鼠标样式
    63
  • 5
    前端基础的讲解—CSS(5)
    54
  • 6
    前端基础的讲解-CSS(4)
    49
  • 7
    前端基础的讲解-CSS(3)
    60
  • 8
    前端基础的讲解-CSS(2)
    61
  • 9
    前端基础的讲解-CSS(1)
    87
  • 10
    jQuery和CSS3超酷全屏视觉差幻灯片特效
    53

    • 相关课程

    更多
  • CSS 快速掌握
  • 移动Web前端开发
  • Ajax 前端开发入门与实战
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 阿里文娱大前端技术实践
  • 前端代码是怎样智能生成的

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
  • 前端开发基础1：前端开发环境的安装和配置
  • CSS基础教程
    • 下一篇
    手把手教你白嫖阿里云服务器(免费领服务器)