html+css+js整体布局——[防止浏览器扩大,界面排版混乱]

1,body——》width:100%

body {
    background-color: rgb(238, 238, 238);
    color: rgb(51, 51, 51);
    display: block;
    font-family: Helvetica, "Hiragino Sans GB", "Microsoft Yahei",
        sans-serif;
    font-size: 14px;
    height: 11229.7px;
    line-height: 16.8px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    outline-color: rgb(51, 51, 51);
    outline-style: none;
    outline-width: 0px;
    text-size-adjust: 100%;
    width: 100%;/* 缩放:设置为百分比*/
}

2,第一个内容div的width:100%

#content {
    background-position-x: center;
    background-position-y: top;
    background-repeat-x:no-repeat;
    background-repeat-y:no-repeat;
    color: rgb(51, 51, 51);
    display: block;
    font-family: Helvetica, "Hiragino Sans GB", "Microsoft Yahei",
        sans-serif;
    font-size: 14px;
    height: 10685px;
    line-height: 16.8px;
    outline-color: rgb(51, 51, 51);
    outline-style: none;
    outline-width: 0px;
    text-size-adjust: 100%;
    /* width: 1899px; */
    width: 100%;/* 缩放:设置为百分比*/
}

3,第一个内容div中的视觉上居中内容div的margin-left和margin-right都设为auto,这个视觉上居中的div的width设为固定值

#content-inner {
    color: rgb(51, 51, 51);
    display: block;
    font-family: Helvetica, "Hiragino Sans GB", "Microsoft Yahei",
        sans-serif;
    font-size: 14px;
    height: 10685px;
    line-height: 16.8px;
    margin-bottom: 0px;
    /* margin-left: 349.5px;
    margin-right: 349.5px; */
    margin-left: auto;/* 缩放:设置为auto */
    margin-right: auto;/* 缩放:设置为auto */
    margin-top: 0px;
    outline-color: rgb(51, 51, 51);
    outline-style: none;
    outline-width: 0px;
    text-size-adjust: 100%;
    width: 1200px;/* 缩放:设置为固定值 */
}

4,为什么要这样设置?

  body的width:100%,第一个内容div的:width保证了界面的伸缩性,视觉上居中的内容div设置固定值保证了界面不具有伸缩性,其左右边距的auto却帮助其在界面上自动控制。

5,解释图如下:

原文地址:https://www.cnblogs.com/lirenhe/p/10355488.html

时间: 2024-11-09 00:46:26

html+css+js整体布局——[防止浏览器扩大,界面排版混乱]的相关文章

html+css+js开发文本编辑器,有各种排版功能!

当点击上面的按钮,例如添加图片,就会直接向textarea文本框添加一段预设的图片标签.如果添加超链接,就会向文本框添加超链接标签,我们只需要把超链接和链接文字填上去即可. <!DOCTYPE html> <html> <head> <title>Hello World</title> <meta http-equiv="content-type" content="text/html; charset=utf

HTML CSS + DIV实现整体布局

HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Consortium,万维网联盟W3C的职能:负责制定和维护Web行业标准W3C标准包括一系列的标准: HTML内容方面:XHTML 样式美化方面:CSS 结构文档访问方面:DOM 页面交互方面:ECMAScript --等等 3.W3C倡导的Web结构要符合以下要求: XHTML负责内容组织 CSS负责

web网站css,js更新后客户浏览器缓存问题,需要刷新才能正常展示的解决办法

问题描述 最近将公司官网样式进行了调整,部署到服务器后访问发现页面展示不正常,但是刷新之后就会展示正常. 问题分析 研究之后发现可能的原因有 css文件过大,加载缓慢 本地缓存问题,虽然服务器修改了css文件,但是浏览器仍然使用本地缓存的css, 需要用户多刷新一次才能正常展示显然是很不合理的,那么怎么样解决更新后让浏览器请求新的css或js文件呢? 解决办法 方法1 更新文件后更改css/js文件名. 其实解决这个问题很简单,缓存是通过文件名标记缓存的内容的.在你更新了网站的css文件内容后,

【必备】史上最全的浏览器 CSS &amp; JS Hack 手册

[必备]史上最全的浏览器 CSS & JS Hack 手册 浏览器渲染页面的方式各不相同,甚至同一浏览器的不同版本(“杰出代表”是 IE)也有差异.因此,浏览器兼容成为前端开发人员的必备技能.如果有一份浏览器 Hack 手册,那查询起来就方便多了.这篇文章就向大家分享 Browserhacks 帮我们从网络上收集的各个浏览器特定的 CSS & JavaScript Hack,记得推荐和分享啊! IE 选择器 Hack 1 2 3 /* IE 6 and below */ * html .s

【转载】web网站css,js更新后客户浏览器缓存问题,需要刷新才能正常展示的解决办法

原文:http://blog.csdn.net/csdn100861/article/details/50684438 问题描述 部署到服务器后访问发现页面展示不正常,但是刷新之后就会展示正常. 问题分析 可能的原因有 css文件过大,加载缓慢 本地缓存问题,虽然服务器修改了css文件,但是浏览器仍然使用本地缓存的css, 需要用户多刷新一次才能正常展示显然是很不合理的,那么怎么样解决更新后让浏览器请求新的css或js文件呢? 解决办法 方法1 更新文件后更改css/js文件名. 其实解决这个问

HTML/CSS/JS编码规范

最近整理了一份HTML/CSS/JS编码规范,供大家参考.目录:一.HTML编码规范二.CSS编码规范三.JS编码规范 一.HTML编码规范 1. img标签要写alt属性 根据W3C标准,img标签要写alt属性,如果没有就写一个空的.但是一般要写一个有内容的,根据图片想要表达的意思,因为alt是在图片无法加载时显示的文字.如下不太好的写法: <img src="company-logo.svg" alt="ABC Company Logo"> 更好的

【项目总结】扯一扯电商网站前端css的整体架构设计(1)

最近半忙不忙的写了一个外包网站,网站主要功能是艺术品竞拍和艺术衍生品的销售.工程已经完成了80%左右,现在前后端代码量已经50W行左右,我主要负责的是前端设计和前端布局.下面就先放一个网站的设计图吧,因为涉及到甲方的"商业机密",所以打一下马赛克: 这篇文章主要算是我对于这个项目的总结或者说是对于这阶段自己看的一些前端书或者经验的一个总结吧,所以设计图就不贴那么多了.整个项目的设计图由最开始的ui定了个首页稿基调,剩下的界面大部分都是我在首页稿基础上做出来的,以后有机会再唠.PS:不过

html div+css做页面布局

http://blog.csdn.net/mercop/article/details/7882000 HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Consortium,万维网联盟    W3C的职能:负责制定和维护Web行业标准    W3C标准包括一系列的标准: HTML内容方面:XHTML 样式美化方面:CSS 结构文档访问方面:DOM 页面

web前端学习笔记(CSS变化宽度布局)

Posted on 2013-09-30 09:03 Stephen_Liu 阅读(2406) 评论(6) 编辑 收藏 一.“1-2-1”单列变宽布局: 对于变宽度的布局,首先要使内容的整体宽度随浏览器窗口宽度的变化而变化.因此中间的container容器中的左右两列的总宽度也会变化,这样就会产生不同的情况.这两列是按照一定的比例同时变化,还是一列固定,另一列变化.这两种都是很常用的布局方式.然而对于等比方式而言,相对比较简单,和我上一篇博客中1-2-1的布局方式非常类似,因此这里只是介绍一列固