CSS自适应

2023-11-11

CSS一列的自适应:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">

div{
background-color: #FFFF00;
border: 2px solid #000000;
text-align: center;
padding-top: 40px;
font-family: "宋体";
font-size: 14px;



}

#layout{
height: 300px;
width:40%;
margin: auto; //这样就能在自适应的同时左右居中

}
</style>
</head>
<body>

<div id="layout">一列固定宽度布局</div><!-- 相同属性的,后者会把前者覆盖 -->
</body>
</html>


本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

CSS自适应 的相关文章

  • Bootstrap4 模态对话框示例

  • 蜗牛君漫聊动态布局框架(三):适配器与创建者

    大家好 欢迎来到蜗牛君漫聊动态布局框架专题 上篇文章中我们介绍完了框架的核心功能实现 本篇继续介绍剩下的所有功能 不同类型ViewHolder的动态创建已经完成 接下来我们要实现数据与布局的中间件 适配器 Adapter 代码实现 中间件
  • GirdLayout布局实现九宫格

    利用GirdLayout布局显示3 3布局的9张图片 每张图片宽度为屏幕的1 3
  • Vue之Vant移动端组件库使用方法

    步骤 全局安装 npm i vant S 在mian js中引入 import Vant from vant import vant lib index css Vue use Vant 根据实际情况引入组件
  • web前端基础:HTML文字和段落标签

    标题标签 h1 h1 h6 h6 段落标签 p p align对齐属性值 值 描述 left 左对齐 right 右对齐 center 居中对齐 justify 对行进行伸展 每行可以有相等的长度 列表标签 有序列表 ol li 列表项 l
  • Webpack配置Vue热更新

    Webpack配置Vue热更新 需要的包 cnpm i vue webpack webpack cli webpack dev server html webpack plugin clean webpack plugin style lo
  • Html页面内引入抽取出来的Html,js,css示例

    在写纯Html网站的时候 每个页面的头部菜单 js css和底部说明都是同样的 有的时候你要改 就要一个一个的去改 通过下面方法将这些相同的抽取出来 方便后期维护 希望能帮到你 在applyBusiness html页面引入公共页头head
  • React-Router实战:NavLink

    基础 1 引入使用 import NavLink from react router dom
  • web前端开发自学书籍推荐这5本

    JavaScript权威指南 第6版 淘宝前端团队翻译的 看译者列表都是一堆大神 这本书又叫犀牛书 号称 Javascript 开发者的圣经 网上对此书评价很多 大概意思都是说这本书是一本 JavaScript 文档手册 没有完整看过一遍此
  • CSS动画:Transition与Animation

    本文总结CSS3中两个用来做动画的属性 一个是transition 另一个是animation 差异比较 CSS3 差异 transition 在给定的持续时间内平滑地更改属性值 从一个值到另一个值 也就是只需要指定开始与结束的参数 参数改
  • 无法访问目标主机的原因及其和请求超时的区别

    使用ping命令时经常会遇到这两种情况 就表示网络出了问题 无法访问目标主机的原因 可以看到 无法访问目标主机 是来自一个IP的回复 实际上那个IP是一个路由器 因此 无法访问目标主机 实际上数据是发出去并且收到回复的 只不过收到的回复是别
  • input标签是什么?input标签属性有哪些

    input标签属于什么标签 input标签属性有哪些 相信刚接触的表单的小白应该很陌生 那么接下来我们就来讲一下input标签属性有哪些 首先小编在这里谢谢大家一直的支持 每天都会更新十个web前端基础内容 需要的可以关注我 另外也可以进我
  • React 中ref的几种用法

    React 中ref的几种用法 1 字符串 通过 this refs a 来引用真实dom的节点 dom 节点上使用
  • 理解React的虚拟DOM

    一 背景 React是一个用于构建用户界面的JavaScript库 区别于老的前端开发技术 其最核心的就是引入了虚拟DOM的技术 为了对React有一个比较全面和深入的了解 所以把最近学习React虚拟DOM的知识 做个笔记 仅供学习 二
  • Android最简洁的自动换行布局组件

    自动换行是一种布局特性 理所当然应该在布局组件中实现 我们基于ViewGroup实现了最简洁和稳定的自动换行布局组件AutoLinefeedLayout 该组件无需特别设置 只要将孩子塞给它 就会自动换行显示 无任何限制 源码如下 pack
  • 使用.NET 6(全球市场)构建Angular 13应用程序——第2部分

    目录 介绍 Yahoo Finance API 全球市场API 金融控制器 报价响应模型 雅虎金融设置 金融服务 Http获取报价端点 全球市场前端 我们尝试做什么 集成后端API项目 Angular Material 显示符号下拉列表 显
  • ConstraintLayout系列:ConstraintLayout实现左右均分布局

    效果图 关键代码 android layout width 0dp 0dp在ConstraintLayout中的含义是match constraint 完整代码
  • webpack代码混淆

    作者 桑榆 QQ 934440653 有问题 评论留言 或qq联系 安装 npm install save dev webpack obfuscator 属性 compact true 压缩 无换行 controlFlowFlattenin
  • JS 时区时间转换

    业务场景 页面服务器时间是东八区时间 页面 JS 功能需要对比服务器时间和用户本地时间 为兼容世界各地时间 需要将用户本地时间转换为东八区时间 基本概念 格林威治时间 格林威治子午线上的地方时 或零时区 中时区 的区时叫做格林威治时间 也叫
  • 禁止ios浏览器页面上下滚动 (橡皮筋效果)弹性滚动 微信的下拉回弹

    发现之前阻止页面滚动的代码e preventDefault代码失效了 于是自己折腾了一番 找到了解决办法 一 前言 浏览器在移动端有一个默认触摸滚动的效果 让我们感触最深的莫过于微信浏览器里面 下拉时自带橡皮筋的效果 然而在开发的时候我们经

随机推荐