2024/9/11学校教的响应式前端能学到什么?

9.11

1)砌砖

确定整体框架,而不是想到一点写一点,类似盖大楼,不是想到哪盖到哪,先砌砖,再装修

砌砖前先划分好砌砖范围(初始化样式)

  • 清除body自带的内外边距
* {
margin: 0;
padding: 0;
}
  • 去掉li的小圆点
li {
list-style: none;
}
  • 取消a标签的下划线
a {
color: #666;
text-decoration: none;
}
  • 清除浮动

防止父容器高度塌陷,visibility隐藏。但还有高度,设置高度为0,

生产内容,伪元素正常显示,块级元素

.clearfix: after {
visibility: hidden;
clear: both;
display: block;
content: " .";
height: 0;
}
.clearfix {
*zoom: 1;
}
image-20240911091642746 image-20240911091725926
<!DOCTYPE html>
<html lang="cn"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div><header><div><img src="images/logo.png" alt=""><h1>珠海市晖煌包装制品有限公司</h1></div><nav><a href="index.html">首页</a><a href="about.html">关于我们</a><a href="custom.html">客户反馈</a><a href="news.html">企业动态</a></nav><div><img src="images/banner.jpg" alt=""></div></header><main><aside><h2>新闻中心</h2><ul><li>电话:0756-1234567</li><li>船政:0756-7654321</li><li>黄生:13680361333</li></ul><div><img src="images/Mid3.gif" alt=""></div></aside><article><h2>产品发布</h2><figure><img src="./images/main1.gif" alt=""><figcaption>产品1</figcaption></figure><figure><img src="./images/main2.gif" alt=""><figcaption>产品2</figcaption></figure><figure><img src="./images/main3.gif" alt=""><figcaption>产品3</figcaption></figure></article></main><footer><span>版权所有©珠海市晖煌包装制品有限公司  传真:86-0756-66666 地址:中国广东省珠海市斗门区乾务镇富山工业区 邮箱:huihuang6666666@163.com  粤ICP备10049484号</span><h1>陈子佳 22510206011</h1></footer></div>
</body></html>

2)装修

2.1)a标签状态高亮

a标签未激活状态

image-20240911101409098

a标签激活状态

image-20240911101639515

2.2)清除浮动

如果内部元素进行了float left,漂浮 如果父盒子不清楚浮动,那么后续的所有元素也会跟着漂浮。也就是影响后面所有的div漂浮,因此我们要清除浮动,增加伪类,clear:both

image-20240911105928701

image-20240911105938192

子元素有float,父盒子必清除,否则影响后面所有布局

2.3)整齐的表单使用table

外加列宽

列组包含多个col

<colgroup><col style="width: 40%;"><col style="width: 60%;">
</colgroup>

效果

image-20240911115955771

3)静态页面开发流程

  • 拷贝页面,修改title
  • 整体框架不变,修改不同区域的类名,公共css继续装修

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/424497.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【新片场-注册安全分析报告-无验证方式导致安全隐患】

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 1. 暴力破解密码&#xff0c;造成用户信息泄露 2. 短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉 3. 带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造…

微信小程序开发第三课

1 wxml语法 1.1 模版语法 # 1 在页面 xx.js 的 Page() 方法的 data 对象中进行声明定义 # 2 在xx.wxml 中使用 {{}} 包裹&#xff0c;显示数据 # 3 可以显示如下&#xff0c;不能编写js语句或js方法-变量-算数运算-三元运算-逻辑判断# 4 只是单纯通过赋值&#xff0c;js中…

快速生成服务器响应json-server的安装和使用

json-server介绍地址:https://www.geeksforgeeks.org/json-server-setup-and-introduction/ 1.json-server是什么? 基于自定义的json文件,快速生成服务端响应,可用于前端调试接口 2.安装和卸载json-server 2.1 安装: 使用npm命令: npm install -g json-server 2.2 卸载 npm …

工厂方法模式和抽象工厂模式

工厂方法模式 一个工厂只能创建一种产品 工厂方法模式的结构 工厂方法模式包含以下4个角色 Product&#xff08;抽象产品&#xff09; ConcreteProduct&#xff08;具体产品&#xff09; Factory&#xff08;抽象工厂&#xff09; ConcreteFactory&#xff08;具体工厂…

(论文解读)Visual-Language Prompt Tuning with Knowledge-guided Context Optimization

Comment: accepted by CVPR2023 基于知识引导上下文优化的视觉语言提示学习 摘要 提示调优是利用任务相关的可学习标记将预训练的视觉语言模型&#xff08;VLM&#xff09;适应下游任务的有效方法。基于CoOp的代表性的工作将可学习的文本token与类别token相结合&#xff0c;…

项目需求 | MySQL增量备份与恢复的完整操作指南

目录 一、MySql数据库增量备份的工作原理 1、全量备份与增量备份 2、增量备份原理 二、进行增量备份 步骤1&#xff1a;启用二进制日志 使用 SHOW VARIABLES 命令查看二进制日志状态 步骤2&#xff1a;执行增量备份脚本 三、使用增量备份恢复损坏的数据库 步骤1&#…

WSL安装Redis

前言 本来一直是在虚拟机的Ubuntu开发 但是 搞着搞着内存不足 导致我某些数据损坏了 然后目前迁移到Wsl开发 运行WSL的相较于虚拟机你不需要很多的性能开销&#xff01; 我只是代码开发和git交互&#xff0c;如果是搞逆向还是虚拟机。 记录一下redis 安装卸载 免得以后又忘了…

java基于PDF底层内容流的解析对文本内容进行编辑

本文实现了基于坐标位置对PDF内容的底层修改而非覆盖&#xff0c;因此不会出现在某些高级PDF编辑器中可以移除插入内容或者文件随着编辑次数增多而大幅增大&#xff08;原因是原内容还在文件中&#xff09;的问题&#xff0c;而且使用的pdfbox是一个开源的、免费的PDF处理库&am…

SSHamble:一款针对SSH技术安全的研究与分析工具

关于SSHamble SSHamble是一款功能强大的SSH技术安全分析与研究工具&#xff0c;该工具基于Go语言开发&#xff0c;可以帮助广大研究人员更好地分析SSH相关的安全技术与缺陷问题。 功能介绍 SSHamble 是用于 SSH 实现的研究工具&#xff0c;其中包含下列功能&#xff1a; 1、针…

ESP01的AT指令连接到阿里云平台

物联网平台提供安全可靠的设备连接通信能力&#xff0c;支持设备数据采集上云&#xff0c;规则引擎流转数据和云端数据下发设备端。此外&#xff0c;也提供方便快捷的设备管理能力&#xff0c;支持物模型定义&#xff0c;数据结构化存储&#xff0c;和远程调试、监控、运维。总…

移动UI案例:工具类app整套案例

工具类App是指提供各种实用工具和功能的手机应用程序。这些工具可以包括但不限于日历、闹钟、备忘录、翻译、计算器、单位转换、天气预报、地图导航、音乐播放器、相机、视频编辑等。这些工具类App能够帮助用户解决日常生活和工作中的各种问题&#xff0c;提高效率和便利性。 …

Java数据结构(十)——冒泡排序、快速排序

文章目录 冒泡排序算法介绍代码实现优化策略复杂度和稳定性 快速排序算法介绍优化策略非递归实现代码演示复杂度和稳定性 冒泡排序 算法介绍 冒泡排序是一种简单的排序算法。它重复地遍历要排序的数列&#xff0c;一次比较两个元素&#xff0c;如果它们的顺序错误就交换。遍历…

多线程篇(其它容器- CopyOnWriteArrayList)(持续更新迭代)

一、CopyOnWriteArrayList&#xff08;一&#xff09; 1. 简介 并发包中的并发List只有CopyOnWriteArrayList。 CopyOnWriteArrayList是一个线程安全的ArrayList&#xff0c;对其进行的修改操作都是在底层的一个复制的数 组&#xff08;快照&#xff09;上进行的&#xff0…

redis 基本数据类型—string类型

一、介绍 Redis 中的字符串&#xff0c;直接就是按照二进制数据的方式存储的&#xff0c;不会做任何的编码转换。 Redis对于 string 类型&#xff0c;限制了大小最大是512M 二、命令 SET 将 string 类型的 value 设置到 key 中。如果 key 之前存在&#xff0c;则覆盖&#…

Jwt、Filter、Interceptor

目录 JWT(Json Web Token) jwt令牌 组成 应用场景 生成令牌 解析令牌 登录实例 Filter过滤器 Filter Filter登录校验 Interceptor拦截器 Interceptor 拦截路径 执行流程 登录实例 JWT(Json Web Token) jwt令牌 定义了一种简洁的、自包含的格式&#xff0c;…

二、(JS)JS中常见的键盘事件

一、常见的键盘事件 onkeydown 某个键盘按键被按下onkeypress 某个键盘按键被按下onkeyup 某个键盘按键被松开 二、事件的执行顺序 onkeydown、onkeypress、onkeyup down 事件先发生&#xff1b;press 发生在文本被输入&#xff1b;up …

【大模型理论篇】大模型周边自然语言处理技术(NLP)原理分析及数学推导(Word2Vec、TextCNN、Gated TextCNN、FastText)

1. 背景介绍 进入到大模型时代&#xff0c;似乎宣告了与过去自然语言处理技术的结束&#xff0c;但其实这两者并不矛盾。大模型时代&#xff0c;原有的自然语言处理技术&#xff0c;依然可以在大模型的诸多场景中应用&#xff0c;特别是对数据的预处理阶段。本篇主要关注TextCN…

使用Python生成多种不同类型的Excel图表

目录 一、使用工具 二、生成Excel图表的基本步骤 三、使用Python创建Excel图表 柱形图饼图折线图条形图散点图面积图组合图瀑布图树形图箱线图旭日图漏斗图直方图不使用工作表数据生成图表 四、总结 Excel图表是数据可视化的重要工具&#xff0c;它通过直观的方式将数字信…

PCIe进阶之TL:First/Last DW Byte Enables Rules Traffic Class Field

1 First/Last DW Byte Enables Rules & Attributes Field 1.1 First/Last DW Byte Enables Rules Byte Enable 包含在 Memory、I/O 和 Configuration Request 中。本文定义了相应的规则。Byte Enable 位于 header 的 byte 7 。对于 TH 字段值为 1 的 Memory Read Request…

【STM32】esp8266通过MQTT连接服务器|订阅发布

1. MQTT协议 该协议为应用层协议&#xff0c;传输层使用的是tcp,MQTT的订阅和发布&#xff0c;就相当于在抖音中你关注了某个领域的博主&#xff08;订阅&#xff09;&#xff0c;如果有其他人发了作品就会推给你&#xff08;发布&#xff09;&#xff0c;默认已经安装好了 简…