1200字范文 > DIV+CSS经典布局[宽度自适应][自动屏幕居中]【HTML】

DIV+CSS经典布局[宽度自适应][自动屏幕居中]【HTML】

时间：2018-12-28 01:14:52

web前端|html教程

DIV+CSS经典布局[宽度自适应][自动屏幕居中]

web前端-html教程

Header

易语言写脱机源码,ubuntu 空密码设置,tomcat服务器上断点,爬虫抓js视频,php评分系统html页面设计,曲阜网页seolzw

分析：

小程序php源码下载,vscode可以打开mfc吗,Ubuntu绑定LaCP,内置tomcat怎样部署,爬虫带宽不够,php 微信多客服,荔湾seo优化网络推广公司,淘宝客网站最新源码,dedecms 汽车模板免费下载lzw

最外层的wrapper把所有内容都嵌套在里边，整体相对定位。max min已经很好的控制了最窄最宽值，但对IE没有作用。如果没有其他布局的穿插，这一层其实写在body内就可以，少一层嵌套。

彩票源码交易网站,vscode 文字大小,ubuntu无法vi,tomcat页面名字,sqlite 创建触发器,怎样才能防止香肠上爬虫,lampp php,广州seo快速宣传,jquery 购物车特效网站,纯文字网页模板,html 初学者网站模板lzw

#wrapper{ width:auto; border:1px solid #000; min-width:776px; max-width:1000px; text-align:left; margin-left:auto; margin-right:auto; position:relative;}

wrapper 下级的 outer header footer

其中header绝对定位，footer 相对定位；outer分别对左右有130px的外边距，这是兼容非IE的关键。

#outer{ margin-left:130px; margin-right:130px; background:silver; border-left:1px solid #000; border-right:1px solid #000; color: #000;}

#header{ position:absolute; top:0; left:0; width:100%; height:70px; line-height:70px; border-bottom:1px solid #000; overflow:hidden; background:#0ff; text-align:center; font-size:xx-large}

#footer { width:100%; clear:both; line-height:50px; border-top:1px solid #000; background:#ffc; color:#000; text-align:center; position:relative;}

outer 下级的 clearheader outerwrap right clearer

clearheader 用做填补header的空白，clearer 是一个常用的填充hack用法。

outerwrap 宽为什么是99%，而不是100%？

因为他的上层outer有边框，100%宽再加2个边框象素就会撑大，FF有明显效果。

right 的处理很经典，IE下解析为定位，FF下则为浮动。负边距的处理也刚好使用上outer留出的空白。

#clearheader{ height:72px;}

.outerwrap { float:left; width:99%;}

#right {

position:relative;

width:130px; float:right; left:1px;

margin-right:-129px;

}

* html #right { margin-right:-130px; margin-left:-3px}

.clearer{ height:1px; overflow:hidden; margin-top:-1px; clear:both;}

outerwrap 内的 centrecontent left clearer 思路与上面类似。

指定IE5.0及版本以上浏览器有效

使用expression方法实现对IE5.0及以上版本的宽度条件控制，实现自动调整宽度并居中。宽度我都固定了数值，因为如果在这里使用auto，会在调整窗口大小过程中发生div内容无法显示的问题。

body {

width:expression( documentElement.clientWidth <= 800 ? (documentElement.clientWidth == 0 ? (body.clientWidth <= 800 ? "776" : "1000") : "776px") : "1000" );

}

#wrapper {

width:expression( documentElement.clientWidth <= 800 ? (documentElement.clientWidth == 0 ? (body.clientWidth <= 800 ? "776" : "1000") : "776px") : "1000" );

}

这个例子融合了很多DIV+CSS的经典用法和定义，同时很传统和实用。

Footer

Code

test

13 14

15<!–

17body {}{

19padding: 0px;

21margin: 0px;

23}

25#wrapper {}{

27width:auto;

29border:1px solid #000;

31text-align:left;

33min-width:776px;

35max-width:1000px;

37margin-left:auto;

39margin-right:auto;

41position:relative;

43background-color: #CCCCCC;

45font-family: Verdana, Arial, Helvetica, sans-serif;

47font-size: 12px;

49line-height: 18px;

51}

53#outer{}{

55margin-left:130px;

57margin-right:130px;

59background:#FF9900;

61border-left:1px solid #000;

63border-right:1px solid #000;

65color: #000000;

67padding: 50px;

69}

71#header{}{

73position:absolute;

75top:0;

77left:0;

79width:100%;

81height:70px;

83line-height:70px;

85border-bottom:1px solid #000;

87overflow:hidden;

89background:#000000;

91text-align:center;

93font-size:xx-large;

95color: #FFFFFF;

97}

99#footer {}{

100

101width:100%;

102

103clear:both;

104

105line-height:50px;

106

107border-top:1px solid #000;

108

109background:#000000;

110

111color:#FFFFFF;

112

113text-align:center;

114

115position:relative;

116

117}

118

119#clearheader{}{

120

121height:72px;

122

123}

124

125.outerwrap {}{

126

127float:left;

128

129width:99%;

130

131}

132

133#right {}{

134

135position:relative;

136

137width:130px;

138

139float:right;

140

141left:1px;

142

143margin-right:-129px;

144

145}

146

147* html #right {}{

148

149margin-right:-130px;

150

151margin-left:-3px;

152

153}

154

155.clearer{}{

156

157height:1px;

158

159overflow:hidden;

160

161margin-top:-1px;

162

163clear:both;

164

165}

166

167

182

183–>

184

185

186

187

188

189

190

191

192

193

Header194

195

196

197

198

199

200

201

分析：

202

203

204

205

#wrapper{ width:auto; border:1px solid #000; min-width:776px; max-width:1000px; text-align:left; margin-left:auto; margin-right:auto; position:relative;}

206

207

208

209

wrapper 下级的 outer header footer

210

211

其中header绝对定位，footer 相对定位；outer分别对左右有130px的外边距，这是兼容非IE的关键。

212

213

#outer{ margin-left:130px; margin-right:130px; background:silver; border-left:1px solid #000; border-right:1px solid #000; color: #000;}

214

215#header{ position:absolute; top:0; left:0; width:100%; height:70px; line-height:70px; border-bottom:1px solid #000; overflow:hidden; background:#0ff; text-align:center; font-size:xx-large}

216

217#footer { width:100%; clear:both; line-height:50px; border-top:1px solid #000; background:#ffc; color:#000; text-align:center; position:relative;}

218

219

outer 下级的 clearheader outerwrap right clearer

220

221

clearheader 用做填补header的空白，clearer 是一个常用的填充hack用法。

222

223outerwrap 宽为什么是99%，而不是100%？

224

225因为他的上层outer有边框，100%宽再加2个边框象素就会撑大，FF有明显效果。

226

227right 的处理很经典，IE下解析为定位，FF下则为浮动。负边距的处理也刚好使用上outer留出的空白。

228

229

#clearheader{ height:72px;}

230

231.outerwrap { float:left; width:99%;}

232

233#right {

234

235position:relative;

236

237width:130px; float:right; left:1px;

238

239margin-right:-129px;

240

241}

242

243* html #right { margin-right:-130px; margin-left:-3px}

244

245.clearer{ height:1px; overflow:hidden; margin-top:-1px; clear:both;}

246

247

outerwrap 内的 centrecontent left clearer 思路与上面类似。

248

249

指定IE5.0及版本以上浏览器有效

250

251

252

253

body {

254

255width:expression( documentElement.clientWidth <= 800 ? (documentElement.clientWidth == 0 ? (body.clientWidth <= 800 ? "776" : "1000") : "776px") : "1000" );256

257}

258

259#wrapper {

260

261width:expression( documentElement.clientWidth <= 800 ? (documentElement.clientWidth == 0 ? (body.clientWidth <= 800 ? "776" : "1000") : "776px") : "1000" );262

263}

264

265

这个例子融合了很多DIV+CSS的经典用法和定义，同时很传统和实用。

266

267268

269

270

271

272

273274

275