Web网页布局

目录

一、传统的DIV+CSS布局(使用率最高的)

1.div传统的一块块转

2.以猫眼电影为例‘

3.div布局格式(唯一的id属性,不唯一写class重复的)

3.2总体布局样式

二、HTML5语义标签+CSS3布局

1.把div改为绿色的语义标签(目的:提高搜索引擎优化)

2.加绿色的可以改变网站不兼容问题

3.语义标签布局

三、响应式布局

根据访问者屏幕大小的不同进行自适应。

3.1有选择的执行 根据屏幕选择

3.2引用不同css(写两种样式)手机、平板、pc


一、传统的DIV+CSS布局(使用率最高的)

1.div传统的一块块转

2.以猫眼电影为例‘

3.div布局格式(唯一的id属性,不唯一写class重复的)

3.2总体布局样式

二、HTML5语义标签+CSS3布局

1.把div改为绿色的语义标签(目的:提高搜索引擎优化)

2.加绿色的可以改变网站不兼容问题

3.语义标签布局

三、响应式布局

根据访问者屏幕大小的不同进行自适应。

3.1有选择的执行 根据屏幕选择

3.2引用不同css(写两种样式)手机、平板、pc

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

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

相关文章

大模型基础(五):transformers库(下):快速分词器、自动配置类、快速微调

transformers库(下) 1 快速分词器1.1 Fast 分词器的核心特点1.2 对比示例1.3 何时使用 Fast 分词器?1.4 注意事项 2 自动配置类 AutoConfig2.1 核心功能2.2 基本用法2.3 主要应用场景2.4 常用函数2.5 与具体配置类的区别2.6 注意事项 3 快速微…

在pycharm profession 2020.3上离线安装.whl类型的包(以PySimpleGUI为例)

今天写个小代码,用到了PySimpleGUI。 在pycharm profession 2020.3的项目中的Terminal里运行如下代码即可安装。 python3 -m pip install --force-reinstall --extra-index-url https://PySimpleGUI.net/install PySimpleGUI 安装方法如图: 安装后使用…

SpringBoot整合RabbitMQ(Java注解方式配置)

1.生产端 1. 创建生产者SpringBoot工程 2. 引入start&#xff0c;依赖坐标 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-amqp</artifactId> </dependency> 3. 编写yml配置&#xff0c;基本…

分析strtol(),strtoul()和strtod()三个函数的功能

字符串转换为数值部分和子字符串首地址的函数有strtol(),strtoul()和strtod()三个函数。 1、strtol()函数 long int strtol(const char *str, char **endptr, int base) //当base0时,若字符串不是以"0","0x"和"0X"开头,则将数字部分按照10进制…

Spring 的事务隔离

在Spring框架中&#xff0c;事务管理是一个非常重要的方面&#xff0c;它允许开发者以声明式的方式定义事务边界&#xff0c;并且通过配置不同的隔离级别来控制并发事务的行为。Spring支持多种事务管理方式&#xff0c;包括编程式事务管理和声明式事务管理&#xff08;如使用Tr…

单片机自动排列上料控制程序

/****L2233 CODE11549 2025 4 18 08:53*******/ /***轴承上料机控制 提升 摇摆 光电检测***/ /***2025 3 21 电机控制PCB板 PAST ***/ /*2.3 2.2 1.2 1.3 1.4 1.5 1.6 1.7 5.3 3.2 ***/ /*启动 解锁 光电 接近 前停 后停 电机前 电机后*/ #include &quo…

力扣119题解

记录 2025.5.5 题目&#xff1a; 思路&#xff1a; 代码: class Solution {public List<Integer> getRow(int rowIndex) {List<Integer> row new ArrayList<Integer>();row.add(1);for (int i 1; i < rowIndex; i) {row.add((int) ((long) row.get(i…

国产化海光C86架构服务器安装windows实录

最近几年与红蓝关系急转直下&#xff0c;尤其是科技领域尤为突出。随之而来的就是软硬件的国产化大潮。由于行业的原因根据要求必须使用国产化服务器、国产化操作系统、国产化数据库、国产化中间件。虽然闭关锁国断开红蓝联系可以在一定程度激发国产化发展&#xff0c;但是不得…

Oracle OCP证书有效期是三年?

这一段时间&#xff0c;网上经常传出消息Oracle OCM认证证书有效期为三年&#xff0c;其实这个假消息&#xff0c;通过博睿谷与Oracle官方人员确认&#xff0c;OCP认证证书有效期是永久的。 OCP证书本身永久有效&#xff0c;但老版本的OCP证书代表着更多的项目经验&#xff0c…

Python 闭包:函数式编程中的魔法变量容器

闭包与匿名函数的常见混淆 在编程社区中&#xff0c;闭包(closure)和匿名函数(anonymous function)经常被混为一谈&#xff0c;这种混淆有其历史根源&#xff1a; 历史发展因素&#xff1a;在早期编程实践中&#xff0c;在函数内部定义函数并不常见&#xff0c;直到匿名函数广…

迅睿CMS导入别站数据库

<?php if (isset($_GET[go])) {$host localhost;// 数据库服务器$username uname;// 数据库用户名$password pwd;// 数据库密码$database database;// 数据库名$cmscid $_GET[cmscid];$mtabcid $_GET[mtabcid];if ($_GET[go] step1) {//第一步&#xff1a;先获取CMS…

基于C++、JsonCpp、Muduo库实现的分布式RPC通信框架

⭐️个人主页&#xff1a;小羊 ⭐️所属专栏&#xff1a;项目 很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~ 目录 项目介绍JsonCpp库简单介绍Muduo库简单介绍C11异步操作——std::future1. 使用 std::async 关联异步任务2. std::packaged_task 配…

EPSG:3857 和 EPSG:4326 的区别

EPSG:3857 和 EPSG:4326 是两种常用的空间参考系统&#xff0c;主要区别在于坐标表示方式和应用场景。以下是它们的核心差异&#xff1a; 1. 坐标系类型 EPSG:4326&#xff08;WGS84&#xff09; 地理坐标系&#xff08;Geographic Coordinate System&#xff09;&#xff0c;基…

Docker 使用与部署(超详细)

目录 引入 入门使用 部署对比 镜像仓库 命令解释 基础 常见命令 示例 数据卷的使用 数据卷的概念 数据卷的使用 挂载本地目录文件 镜像 结构 Dockerfile 容器网络 部署 DockerCompose 语法 ​编辑 基础命令 引入 当我们在 Linux 上部署一个集成了很多中间件…

JAVA在线考试系统考试管理题库管理成绩查询重复考试学生管理教师管理源码

一、源码描述 这是一套在线考试源码&#xff0c;基于SpringBootVue框架&#xff0c;后端采用JAVA语言&#xff0c;可以用于重复考试&#xff0c;一、管理员功能&#xff1a;1、考试管理&#xff1a;包括考试查询与添加考试功能&#xff0c;2、题库管理&#xff1a;管理所有题库…

在Qt Creator中使用CUDA

要在Qt Creator项目中使用CUDA进行GPU加速计算&#xff0c;你需要进行一些配置。以下是详细步骤&#xff1a; 1. 安装必要软件 安装最新版本的NVIDIA CUDA Toolkit 确保已安装Qt Creator和兼容的编译器(如MSVC或GCC) 2. 创建Qt项目 打开Qt Creator&#xff0c;创建一个新的…

qml显示视频帧(QQuickImageProvider)

一、实现方式 解码视频可以选择:opencv、ffmpeg等。 显示视频可以选择:Qt Multimedia、QQuickImageProvider、ShaderEffect、自定义QQuickItem等。 本文使用opencv解码视频,QQuickImageProvider显示视频。 二、QQuickImageProvider 中,requestImage 和 requestTexture区…

深度实时美颜:Deep-Live-Cam

深度实时美颜:Deep-Live-Cam 在这个数码化加速的时代,如何用一张图片,捕捉瞬间,将虚拟与现实无缝融合在一起?Deep-Live-Cam给出了惊人的答案。这个应用程序不仅实现了实时脸部替换和一键视频深度伪装,还通过一张图片完成了这些操作,其独特的技术让人在视频通话和直播中…

OPENGLPG第九版学习 -视口变换、裁减、剪切与反馈

文章目录 5.1 观察视图5.1.1 视图模型—相机模型OpenGL的整个处理过程中所用到的坐标系统&#xff1a;视锥体视锥体的剪切 5.1.2 视图模型--正交视图模型 5.2 用户变换5.2.1 矩阵乘法的回顾5.2.2 齐次坐标5.2.3 线性变换与矩阵SRT透视投影正交投影 5.2.4 法线变换逐像素计算法向…

卷积神经网络实战(2)

接上一篇文章&#xff0c;说到模型定义&#xff1a; class CNN(nn.Module):def __init__(self, activation"relu"):super(CNN, self).__init__()self.activation F.relu if activation "relu" else F.selu#输入通道数&#xff0c;图片是灰度图&#xff…