1、横向布局，分三列，左、中、右
2、中间列
图片a作为背景（宽度960）。
内容都放置在这里面。
3、左列由图片b填充为背景
宽度为1，高度若干，横向拉伸
4、右列由图片c填充为背景
宽度为1，高度若干，横向拉伸
以上4点是由于图片a的左侧边缘和右侧边缘不一样，所以两侧需要有不同的2张图片向左右延伸出去（填满屏幕），以便用户在不同分辨率下可以比较舒坦。
=。=
一天了还么人回复吗……
那就三个图片分别放在一个div里面，外包一个div,中间的宽度为图片的宽度，左右两边自适应auto
那就三个图片分别放在一个div里面，外包一个div,中间的宽度为图片的宽度，左右两边自适应auto
<!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title> 页面名称 </title><style type="text/css">#A { position: absolute; top: 0; left: 50%; margin-left: -480px; width: 960px; height: 1000px; background: #FF9900;}#B { position: absolute; top: 0; right: 50%; margin-right: 480px; width: 50%; height: 1000px; background: #CC66CC;}#C { position: absolute; top: 0; left: 50%; margin-left: 480px; width: 50%; height: 1000px; background: #99FFFF;}</style></head><body><div id="A"></div><div id="B"></div><div id="C"></div></body></html>
<!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title> 页面名称 </title><style type="text/css">#A { position: absolute; top: 0; left: 50%; margin-left: -480px; width: 960px; height: 1000px; background: #FF9900;}#B { position: absolute; top: 0; right: 50%; margin-right: 480px; width: 50%; height: 1000px; background: #CC66CC;}#C { position: absolute; top: 0; left: 50%; margin-left: 480px; width: 50%; height: 1000px; background: #99FFFF;}</style></head><body><div id="A"></div><div id="B"></div><div id="C"></div></body></html>
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
852
收藏
