存在一个问题就是当屏幕缩小至一定宽度的时候，边框栏会被挤开1body {2 font-family: ‘Amarante‘, cursive;3 background: url(http://www.w3cplus.com/sites/default/files/bg_body.png) repeat;5 }6 7.wrapper {8 margin: 0 auto; 9 } 11.header-wrapper{ 12 background-color: #BD9C8C; 13 } 15.header { 16 width: 80%; 17 background-color: #BD9C8C; 18 margin: 0 auto; 19 margin-bottom: 5px; 20 text-align: ce...
前几天看到我们的UI稿，要实现左侧固定树结构，右侧自适应。想着自己写过几次但是每次都会忘记，在这里做个笔记。第一种方法：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><style>#wrap{display: table;width: 100%;}#wrap>div{display: table-cell;height: 800px;}#sidebar{width: 200px;background: red;}#conte...
<body style="scroll:no"> <table width="100%" height="100%"> <tr> <td height="10px" id="conditions"></td> </tr> <tr> <td id="Content"></td> </tr> <tr> <td height="10px" id="btns"> <input type="button" id="btnDel" value="删除" /> </td> </tr> </table> </body> 这个表格分为3块第一个id为conditions，放查询条件。第二个id为Content，放显示内容。第三个id为btnDel，放删除按钮。第一...
<!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><meta http-equiv="Content-Type" content="text/html; charset=gb2312"/><title>css实现背景图片自适应大小</title></head><body><html><style>body{margin:0px;padding: 0px;width: 100%;height: 100%;}#bg_bg{width: 100%;height: 100%;border :...
由于<body>标签的图片不能够拉伸，解决办法：1、图片不够大，又background属性不能拉伸图片； 2、只能用个div，把其z-index值设为负，并使这个div大小为整个body大小，在div里用<img> 3、body的background属性去掉，要不然会被遮住<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charse...
本文是利用css和html实现自适应于文本长度菜单。实现后的效果图，如下：实现代码如下：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head><title>menu4.html</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"><!--<link rel="stylesheet" ty...
只处理前端：<style>.ctl{table-layout:fixed}.ctl td{word-break:break-all}</style> <div><table cellSpacing="0" cellpadding="1" width="100%" class="ctl" border=1><tBody><tr><td th:text="${seq}"></td></tr></tBody></table></div>这样行数会自动调整，文本不会溢出表格。bug：字符串中的\r\n会变为空格，虽然在控制台可以看到换行符确实存在，但浏览器渲染时会变成空格。暂时没有处理这个问题，先留坑。 ==============...
1、DIVCSS小案例描述我们首先设置一个DIV盒子CSS命名为“.abc”，设置其高度为300px，css边框为黑色；以及设置margin:0 auto布局居中。预先设置这两个样式是为了便于观察。我 们通过手动拖拽浏览器显示宽度，然后观察此盒子宽度变化情况，当浏览器宽度调节到宽度不大于500px时，对应此盒子宽度显示100px；调节浏览器宽度 不大于901px时，显示“.abc”对应盒子宽度显示200px;当调节浏览器宽度大于1201px时，盒子对象宽度显示1200px；...
以手机、平板等移动设备为平台的浏览行为变得越来越平常，甚至有些人叫嚣PC将死。虽然说的有些夸张，但让你的网站布局能够兼容PC和移动设备这些需求变得越来越重要。这种网页布局就是“自适应布局” (有人喜欢把“Responsive layout”直译成‘响应式布局’，本人觉得‘自适应布局’更本土化) 。这种布局的特点是使用CSS媒体查询语句(@media screen and (...))，能根据页面宽度，让页面布局自动做相应的调整，而不是采用传统的做法，...
先说明，这个办法只限于iframe中的子页面也是本地页面（不能引用外网页面） ======方法===== 第一步 js部分 function getSize() { var xScroll, yScroll; if (window.innerHeight && window.scrollMaxY) { xScroll = document.body.scrollWidth; yScroll = window.innerHeight + window.scrollMaxY; } else if (document.body.scrollHeight > document.body.offse...
如何实现一个三栏自适应布局，左右各100px，中间随着浏览器宽度自适应？ 第一个想到的是使用table布局，设置table的宽度为100%，三个td，第1个和第3个固定宽度为100px，那么中间那个就会自适应了，下面是一个实时的demo： left middle right 但是table布局是不推荐的，table布局是css流行之前使用的布局，有很多缺点：当table加载完之前，整个table的都是空...
不借助javascript，不使用绝对定位，不用overflow:hidden将溢出部分隐藏，如何使div的高度自适应？不需要考虑低版本浏览器。 Documenthtml,body {width: 100%;height: 100%;}topmiddlebottom比如上面的middle，如何让它的高度铺满屏幕剩余的空间？回复内容：不借助javascript，不使用绝对定位，不用overflow:hidden将溢出部分隐藏，如何使div的高度自适应？不需要考虑低版本浏览器。 Documenthtml,body {width: 10...
功能：1.图片可以缩放，外框也随之变动。2.图片缩放后，居底对齐。3.鼠标滑上去，边框有虚线。结构：源代码：相册自适应写法 /* ================================================================== general xhtml 1.0 - Main style sheet - liquid design 2007-05-18 Author - ouhee Backa made by 相册自适应写法 ================================================================== */ * {margin:0px;padding:0px...
第一步： 下载 flexible.js，代码如下，可以复制过去用 ;(function(win, lib) {var doc = win.documentvar docEl = doc.documentElementvar metaEl = doc.querySelector(meta[name="viewport"])var flexibleEl = doc.querySelector(meta[name="flexible"])var dpr = 0var scale = 0var tidvar flexible = lib.flexible || (lib.flexible = {})if (metaEl) {console.warn(将根据已有的meta标签来设置缩放比例)var match = metaEl.ge...
HTML中使背景图片自适应浏览器大小实例详解 解决办法：1、图片不够大，又background属性不能拉伸图片； 2、只能用个div，把其z-index值设为负，并使这个div大小为整个body大小，在div里用<img> ；3、body的background属性去掉，要不然会被遮住。 <html> <body> <div id="Layer1" style="position:absolute; left:0px; top:0px; width:100%; height:100%"> <img src="pictures/background.jpg" width="100%" height="100%"/> </...