自适应,流动布局，响应式布局
CSS的属性：用浏览器自带的审查元素对一些页面进行调整，快捷键是F12.网页允许宽度自适应：在代码的头部加入一行viewport元标签。<meta name="viewport" content="width=device-width,initial-scale=1"/>所有主流浏览器都支持这个设置，包括IE9。
转载
2023-09-17 14:30:38
540阅读
自适应网页即是响应式网页，所谓的响应式网页就是，同样的一个网址，在电脑，平板，手机浏览的时候，样式更着改变，这就是简单的一个解释，更合理的解释就是，网页根据屏幕的大小会变得自适应，就会让网站看起来很自然。同样可以根据屏幕分辨率展示或者移除某些元素块。使在窄屏中简化网页，在宽屏中充盈网页，使其看起来更加美观。
之前我的网站都是基于我自己的电脑屏幕分辨率1366×768设计而来，所以对于一些
转载
2024-07-21 16:39:45
22阅读
如果我们想在 3 列布局的最后加一行页脚，放版权之类的信息。就遇到必须对齐 3 列底部的问题。在 table 布局中，我们用 大表格嵌套小表格的方法，可以很方便对齐三列；而用 div 布局，三列独立分散，内容高低不同，就很难对齐。其实我们完 全可以嵌套 div，把三列放进一个 DIV 中，
转载
精选
2016-05-18 16:41:38
612阅读
div的布局统一如下： css的基本设置统一如下： 第一种方式：左边的div向左浮动，右边的div的width为100%，margin-left值设置为左边div的宽度。 这里因为没有内容，所以height: 100%来撑开。 左边div在float之后，脱离文档流，右边元素width: 100%，
转载
2016-11-26 14:56:00
516阅读
2评论
1、控制横向和纵向滚动条的显隐？<body style=”overflow-y:hidden”> 去掉x轴<body style=”overflow-x:hidden”> 去掉y轴<body scroll=”no”>不显2、表格变色<TD onmouseover=”this.style.backg
转载
2024-05-24 20:17:36
215阅读
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<me
转载
2024-08-06 10:05:51
132阅读
在页面编写中经常会碰到页面自适应的问题，也就是页面内部的元素会随着窗口的放大缩小而放大缩小，box可以通过calc + 百分比的形式做到页面自适应，但是box内的字体却无法做到这点，往往box自适应大小了，内部的字体还是原来的大小，看起来会非常别扭，下面就来css实现一下页面文字的自适应大小。clamp()函数这里主要用到clamp()函数，clamp() 函数的作用是把一个值限制在一个上限和下限
转载
2024-04-12 16:12:53
421阅读
viewpointcss3提供了一些与当前viewpoint相关的元素，vw，vh，vmin, vmax等。“viewpoint” = window size
vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, 最小
1vmax = 1vw or 1vh, 最大兼容性：chrome 20+/ safa
转载
2024-05-11 19:08:26
287阅读
1、
CSS2盒模型
自从1996年
CSS1的推出，W3C组织就建议把所有
网页上的对像都放在一个盒(box)中，设计师可以通过创建定义来控制这个盒的属性，这些对像包括段落、列表、标题、图片以及层<div>。盒模型主要定义四个区域：内容(
content)、边框距(
padding)、边界(
border)和边距(
margin)。
转载
2024-08-28 00:12:23
94阅读
2016-06-22 18:39:57标签：响应式网页随着3G的普及，越来越多的人使用手机上网。移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏
转载
精选
2016-07-07 10:49:09
549阅读
自适应网页设计很受欢迎，它绝对没有隐藏。这是专家们呼吁，很多品牌正在转换的一种形式。让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局，无论是通过电脑，平板或智能手机。下面有一些关于自适应 网页设计的建议。 1 使用优秀的排版 自适应设计的网站，你要考虑的是怎么在一个小屏幕上很好看。良好的排版是任何好的网页设计的主食，但它在自动适应网页中是必要的。随着屏幕尺寸的减少，大部分的元素应该改变，缩小或移动。首先，你的排版应该有这个能力。 其次，你应该在文本中使用不同的标题和各种尺寸。现在，我们通常会在我们的台式机上设计的非常大型的头条新闻和标题。这个应该停止，因为你需要考虑较小...
转载
2013-08-10 00:13:00
210阅读
自适应网页设计（Responsive Web Design）作者： 阮一峰日期： 2012年5月 1日随着3G的普及，越来越多的人使用手机上网。移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还
转载
精选
2014-02-24 20:34:24
478阅读
随着3G的普及，越来越多的人使用手机上网。移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。很多网站
原创
2015-06-14 22:27:20
559阅读
随着3G的普及，越来越多的人使用手机上网。移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？手机的屏幕比较小，宽度通常在600像素以下；PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。很多网站
转载
精选
2016-06-22 18:39:57
598阅读
资源 链接：https://pan.baidu.co
转载
2022-09-17 10:12:40
322阅读
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http
原创
2022-12-21 10:18:58
1257阅读
前言 前端开发工程师最基础的技能要求是根据 ui 设计稿还原网页，这就缺少不了必要的网页布局，首先看下最近小伙伴问我的一个问题，他说一个网页有左右两个部分，左右两个部分的宽高度都不固定，要使得右部分的宽度充满剩余的部分，并且高度随着左边的高度发生自适应，而左侧的高度随着内容的高度发生变化，对于这么一个简单的网页布局，对于一个入行不久的小白来说遇到这样的问题肯定束手无策，本文就来整理一下我实现这种
自适应布局虽然有很多方法，但是适合自己的才是最好的，把css写完美也是一种成就
原创
2017-06-01 16:52:07
1272阅读
何为高度自适应？高度自适应就是高度能跟随浏览器窗口的大小改变而改变，典型的运用在一些后台界面中上面一栏高度固定用作菜单栏或导航栏，下面一栏高度自适应用于显示内容。高度自适应不像宽度自适应那样简单，在兼容浏览器方面也稍微复杂一些。布局思路在IE7+及chrome、firefox等浏览器中，高度自适应可以利用绝对定位来解决。
转载
2013-09-27 23:00:00
4459阅读
2评论
img{ max-width: 100%; height: auto; }
原创
2022-04-20 14:12:06
1708阅读
