网页制作时限制屏幕宽度

最新推荐文章于 2026-07-03 14:14:26 发布
原创 最新推荐文章于 2026-07-03 14:14:26 发布 · 639 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
html+css

当前文章被收录于：

html+css
5 篇文章 0 人学习
订阅专栏 查看详情
这段代码展示了如何实现网页的居中布局，保持宽度在100%且最大宽度1180px，同时应用了box-sizing和padding来调整元素内外边距。通过设置height为继承，确保元素高度随内容变化。此段代码适用于响应式设计，让网页在不同设备上都能良好显示。

1、代码如下

              margin: 0 auto;
			  width: 100%;
			  height: inherit;
			  max-width: 1180px;
			  box-sizing: border-box;
			  -webkit-box-sizing: border-box;
			  padding: 0 10px;

2、完结。

标签
#css3 #css #javascript
网页制作的尺寸
A18192350552的博客
05-05 502
网页制作尺寸规格~~~~! (在dw里面有设定好的标准值, 1024*768页面的标准大小是955*600,照着它的尺寸做就行了) 　　由于页面尺寸和显示器大小及分辨率有关系，网页的局限性就在于你无法突破显示器的范围，而且因为浏览器也将占去不少空间，留下给你的页面范围变得越来越小。一般分辨率在800x600的情况下，页面的显示尺寸为：780x428个象素；分辨率在640x480...
'固定' table宽度，走起！
weixin_30484739的博客
05-14 73
为了让表格能够填充屏幕(剩余空白区域)，常将其宽度属性定义为：100%，单元格也是用百分数来定义。 但这样就会出现问题： 如果单元格中的文本超过宽度限制，就会自动换行，高度自动增高，导致整个表格的样式参差不齐，很难看。 很容易想到的解决方法是，禁用文本换行：white-space:nowrap; overflow:hidden; So easy! 但效果仍然出乎意料：文本全部在一...
网页制作 移动端专用的meta标签设置大全
01-22 1762
网页制作 移动端专用的meta标签设置大全 前言 之前学习前端中，对meta标签的了解仅仅只是这一句。 但是打开任意的网站，其head标签内都有一列的meta标签。比如我们脚本之家网站，但是自己却很不熟悉，于是把meta标签加入了学习计划的最前方。 这个用的最多，width和height指令分别指定视区的逻辑宽度和高度。他们的值要么是以像素为单位的数字，要么是一个特殊的标记符号。width指令使用device-width标记可以指示视区宽度应为设备的屏幕宽度。类似地height指令使
ocx控件自适应网页所给区域大小_网页宽度到底该怎么定？这篇全面好文告诉你...
weixin_39589241的博客
12-05 298
PC 端网页设计对于很多从事 UI 行业的新人来说是一个充满未知的领域，对于怎么进行基本的画布创建，规格设置，都处于两眼一抹黑的状态。虽然这是因为多数人没有系统的学习 UI 知识，它并不是一个合理的现象。接下来，我们会更新一些网页设计的干货，帮助更多 UI 设计师了解网页设计的基础知识。首先，网页设计的第一步就是画布创建了，这也是困扰我们的第一个难题。由于市面上存在多种前端技术的应用，以及一些历史...
70种网页制作常用技巧
gongyq_627的专栏
05-31 723
<br />1. 将彻底屏蔽鼠标右键<br />2. 取消选取、防止复制<br />3. 不准粘贴<br />4. 防止复制<br />5.  IE地址栏前换成自己的图标<br />6. 可以在收藏夹中显示出你的图标<br />7. 关闭输入法<br />8. 永远都会带着框架<br />9. 防止被人frame<br />10. 网页将不能被另存为<br />11. 查看网页源代码<br />12.删除时确认<br />13. 取得控件的绝对位置<br />14. 光标是停在文本框文字的最后<br />1
手机网页制作心得
weixin_30865427的博客
12-23 188
这一个星期差不多都在弄手机网页，到目前为止，已经差不多写了四五十个页面了，当然每个子页面还是比较简单的，毕竟这是运行在手机上面的。 考虑到现在很多人使用智能机，所以手机网页的写法基本和普通的网页制作差不多。 手机页面的宽度最好控制在240px以内，因为这样可以在不移动屏幕的情况下进行一系列的操作。我们公司的这个项目用了一张背景图片，大小为240*420。这样...
html5+css3网页制作:三栏布局宽度自适应,使用CSS实现三栏自适应布局(两边宽度固定，中间自适应)...
weixin_36378347的博客
06-15 1084
所谓三列自适应布局指的是两边定宽，中间block宽度自适应。这道题在今年网易内推前端工程师面试的时候也被问到。 我这里主要分为两大类，一类是基于position传统的实现，一类是基于css3新特性弹性盒模型布局实现。1. 基于传统的position和margin等属性进行布局这里也分为三种方法，分别为绝对定位法，圣杯布局，自身浮动法。1).绝对定位法绝对定位法原理是将左右两边使用absolute定...
CSS——响应式布局之@media
soyanzhong的博客
12-04 1092
语法格式： @media mediaType and|not|only (media feature) { /CSS-Code;/ }如： @media screen and (max-width: 300px) { body { background-color:lightblue; } } 设置了当屏幕宽度不超过300px时，背景颜色是
【转】手机web页面制作时的注意事项
amkokq884222的博客
05-27 134
一、手机页面的标准头规范 字符编码使用utf-8：指定页面手机内存缓存中的存储时间段 device-width：通知浏览器使用设备的宽度作为可视区的宽度 initial-scale - 初始的缩放比例 minimum-scale - 允许用户缩放到的最小比例 maximum-scale - 允许用户缩放到的最大比例 --------解决原先在Pocket PC 2002上...
一个题目包括70种网页制作常用技巧
适己而忘人者，人之所弃；克己而立人者，众之所戴。
11-16 1286
 1. 将彻底屏蔽鼠标右键2. 取消选取、防止复制3. 不准粘贴4. 防止复制5.  IE地址栏前换成自己的图标6. 可以在收藏夹中显示出你的图标7. 关闭输入法8. 永远都会带着框架9. 防止被人frame10. 网页将不能被另存为11. 查看网页源代码12.删除时确认13. 取得控件的绝对位置14. 光标是停在文本框文字的最后15. 判断上一页的来源16. 最小化、最大化、关闭窗口17.屏
网页的本质是html,究其本质，到底什么是网页布局
weixin_29711471的博客
06-15 1763
布局(layout)即对事物的全面规划和安排，页面布局是对页面的文字、图像或表格进行格式化版式排列。网页布局对改善网站的外观非常重要，又称版式布局，大多数网站会把内容安排到多个列中，就像杂志或报纸那样，网页版面的设计延续了传统纸媒的特点，但又比传统的纸媒更灵活，传统的纸媒由于纸张大小的限制，只能在有限的空间内排列内容，而网页版面的布局，可以根据内容自适应宽度和高度。在 HTML 中，常使用 div...
Calling WebServices using Javascript
zgqtxwd的专栏
05-01 187
<!--google_ad_client = "pub-2947489232296736";/* 728x15, 创建于 08-4-23MSDN */google_ad_slot = "3624277373";google_ad_width = 728;google_ad_height = 15;//--><script type="text/javascript"
关于瀑布流
木木子的web乐趣世界
09-06 1007
最近公司新上线的O2O网站，首页就是大量的图片和简单的介绍。我总感觉自己做了个瀑布流，可是上网查了一下，感觉还是不一样的，主要可能我这个就是太简单了。呵呵 我的伪瀑布流的图片的像素没有要求很高，所以瀑布流的照片首先就要漂亮，可能就达不到。其次瀑布流的图片都规定宽度，但不限制高度的。我的宽度，高度都规定成一致的， 其实比较像团购那样，一列一列，但是列的数量是没有限制的，可以适应屏幕。最少两列，最
footer位置的自动适配（主内容不足一屏时显示在最底部，超出一屏时跟随主内容显示）
Kuroko's Development Notes
04-29 2128
直接上自测可行的代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ...
产品经理必懂的技术那点事儿（中），全面展示线程内存模型的能力
m0_64384350的博客
11-29 1335
像素密度：每英寸像素数量，单位是 dpi。 安卓系统定义了四种像素密度：低（120dpi）、中（160dpi）、高（240dpi）、超高（320dpi）他们对应的 dp 到 px 系数分别为 0.75、1、1.5、2，这个系数乘 dp 长度就是像素数。Px=系数*dp Sp：是与缩放无关的抽象像素，一般用于文字大小的单位 TextView：文本展示框，也需要制定高度和宽度，宽高实际上狂顶出文本的范围，同时，还需要定制文本内容的字体大小和颜色等 EditText：文本输入框，也就是我们在产品中输入内容的控件与
浏览器下的网页全屏尺寸
nox
07-29 7668
1、800*600下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。 2、1024*768下，网页宽度保持在1002以内，就不会出现水平滚动条，高度则视版面和内决定。 3、在ps里面做网页可以在800*600状态下显示全屏，页面的下方又不会出现滑动条，尺寸为740*560左右 4、1024*768 下网页的尺寸:width=955,height=600 　　800
移动端布局方法详解
X_trans的博客
09-03 3094
文章目录移动端布局方法详解基本概念响应式布局流式布局rem布局flex布局 移动端布局方法详解 常见的移动端布局方式有：flex布局、流式布局、rem布局、响应式布局等 基本概念 设备像素：又称物理像素，是指设备所能显示的最小单位，可以看作显示器上的一个点 像素分辨率就是用设备像素来计算的，如 电脑的1920x1080，iPhone6的750x1334 设备独立像素：设备使用程序来描绘数据的虚拟像素，主要为了解决高分辨率屏幕像素不能与普通屏幕一一对应的问题 使用设备独立像素能保证在高分屏和普通屏显示
# *关于HTML&&CSS&&Nginx*
撒哈拉奔跑的蜗牛~的博客
01-27 250
** 关于HTML&&CSS&&Nginx ** 1.什么是HTML? 是用来制作网页内容和结构 是一种超文本标记语言 超文本:比普通文本更强大 标记语言:就是标签语言 标签可用于设置文本样式,图片样式,超链接等… 用<>表示 例如:<h1,2…> 显示文本为 一级标题 二级标题… 页面是由元素组成的 2.HTML中的属性 属性就是为标签提供更多信息,只能添加到开始标签中 格式为 属性名=属性值 注释为 3.HTML中的标签 标签的分类 开始和结
CSS网页制作技巧:图片的自适应居中和兼容处理(转）
weixin_33951761的博客
06-29 285
http://www.webjx.com/css/divcss-33180.html 前几天在做腾讯微博的微卖场的时候，遇到需要做图片居中的需求。也就是说，商品列表中的图片需要居中显示。因为图片是卖家自己把商品图片链接过来，商品图片的大小没有做限制和过滤。所以我们需要做的是，让图片在容器当中水平居中、垂直居中、图片自适应容器大小。图片原图大小和在容器中显示的大小有这样的关系： 假设容器大小为2...
人脸偏移检测
最新发布
mutuyxy的博客
07-03 787
debugMsg += `人脸中心(归一化): x=${faceCenterNormX.toFixed(3)}, y=${faceCenterNormY.toFixed(3)}\n`;debugMsg += `框大小(归一化): w=${box.width.toFixed(3)}, h=${box.height.toFixed(3)}\n`;"上" : "下";"左" : "右";// ========== 1. 初始化 MediaPipe ==========
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值