收藏
批改状态：合格
老师批语：
制作页面离不开页面布局，一般页面布局分双飞翼布局和圣杯布局。具体示列如下。
使用固定定位制作的简单QQserver：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QQ在线server</title>
<style type="text/css">
body{height: 1800px}
.box{
position: fixed;
right:10px;
bottom:10px;
border:1px solid #1F1F1F;
border-radius: 5px;
width: 160px;
}
img{border :none;outline: none;}
ul,li{list-style:none;font-size: 15px;padding: 5px;text-indent: 4px}
.tel{text-align: center;}
</style>
</head>
<body>
<
<div class="box" >
<ul>
<li><img src="https://img.php.cn//upload/image/477/494/683/1478309332960894.png">在线server1</li>
<hr>
<li><img src="https://img.php.cn//upload/image/477/494/683/1478309332960894.png">在线server2</li>
<hr>
<li><img src="https://img.php.cn//upload/image/477/494/683/1478309332960894.png">在线server3</li>
<hr>
</ul>
<hr>
<div class="tel">HOTLINE TEL<br/>0551-123456789</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
使用浮动做图文混排：
<!DOCTYPE html>
<html>
<head>
<title>图文混排</title>
<style type="text/css">
h2{text-align: center;}
.box{
width: 1000px;
margin: 10px auto;
position: relative;
}
.box img {
float: left;
width: 300px;
margin-right: 10px;
margin-bottom: 10px;
}
.box p{
font-size: 1rem;
text-indent: 2rem;
line-height: 30px;
}
</style>
</head>
<body>
<div class="box">
<h2>x：全面加强新时代我军党的领导和党的建设工作 为开创强军事业新局面提供坚强政治保证</h2>
<img src="images/2.jpg">
<p>新华社北京8月19日电（记者梅世雄）中央军委党的建设会议17日至19日在北京召开。x中央总书记、国家主席、中央军委主席x出席会议并发表重要讲话。他强调，全面加强新时代我军党的领导和党的建设工作，是推进党的建设新的伟大工程的必然要求，是推进强国强军的必然要求。全军要全面贯彻新时代中国特色社会主义思想和党的十九大精神，深入贯彻新时代党的强军思想，落实新时代党的建设总要求，落实新时代党的组织路线，坚持党对军队绝对领导，坚持全面从严治党，坚持聚焦备战打仗，全面提高我军加强党的领导和党的建设工作质量，为实现党在新时代的强军目标、完成好新时代军队使命任务提供坚强政治保证。</p>
<p>x在会议上发表重要讲话。他指出，党的十八大之后，党中央和中央军委坚持从政治上建设和掌握军队，特别是召开古田全军政治工作会议，狠抓全面从严治党、全面从严治军，坚持党对军队绝对领导，坚持以整风精神推进政治整训，坚持以理论武装凝心聚魂，坚持把党组织搞坚强，坚持贯彻军队好干部标准，坚持正风肃纪、反腐惩恶，带领全军寻根溯源、革弊鼎新，推动管党治党从宽松软走向严紧硬。我军党的领导和党的建设发生全面深刻变化，为强军事业取得历史性成就、发生历史性变革提供了坚强政治保证。要认真总结经验，把取得的成果巩固好、发展好。</p>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
双飞翼布局：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.header ,.footer {width: 100%;height: 150px;background: cyan;}
.content{color: white;background:blue;width: 1000px;min-height: 100%;margin: auto;text-align: center;line-height: 150px;}
.container{width: 1000px;margin: auto;background: gold;overflow: hidden;}
.wrap{width: 100%;background:royalblue;float: left;}
.main{min-height:600px;background:darkcyan;margin: 0 200px;}
.left{width: 200px;min-height: 600px;background: lightblue;float: left;margin-left: -100%;}
.right{width: 200px;min-height: 600px;background:brown;float: left;margin-left: -200px;}
</style>
</head>
<body>
<div class="header">
<div class="content">header-html</div>
</div>
<div class="container">
<div class="wrap">
<div class="main">
主体
</div>
</div>
<div class="left">左</div>
<div class="right">右</div>
</div>
<div class="footer">
<div class="content">footer-html</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
圣杯布局：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.header ,.footer {width: 100%;height: 150px;background: cyan;}
.content{color: white;background:blue;width: 1000px;min-height: 100%;margin: auto;text-align: center;line-height: 150px;}
.container{margin: auto;background: gold;width: 600px;}
.main{width:100%;min-height:600px;background:darkcyan;float: left;}
.left{width: 200px;min-height: 600px;background: lightblue;float: left;margin-left:-100%;position: relative; left: -200px;}
.right{width: 200px;min-height: 600px;background:brown;float: left;margin-left:-200px; position: relative;right: -200px;}
.footer{clear: both;}
</style>
</head>
<body>
<div class="header">
<div class="content">header-html</div>
</div>
<div class="container">
<div class="main">
主体
</div>
<div class="left">左</div>
<div class="right">右</div>
</div>
<div class="footer">
<div class="content">footer-html</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
双飞冀与圣杯布局分析:（复制）
共同点:
1.目标都是要将页面的主要内容区,优先渲染出来,提升用户体验;
2.都是三列布局,左右二列固定,中间内容区自适应;
3.三列全部采用浮动处理;
4.要求中间的内容区不能被挡住,必须全部完整展示.
二者的区别在于对中间内容区的处理上:
双飞冀:
1.中间区块必须要套一个父级容器;
2.将父级容器宽度设置为100%,将要渲染的内容放在内部的主体盒子中;
3.当左右区块通过设置负外边距方式与主体同行后;
4.再通过给内容容器的父容器设置左右外边距margin的方式,将左右二列排列到位.
圣杯:
1.不需要为中间内容区创建父级容器,DOM结构比双飞冀略微简单些;
2.其它操作与双飞冀基本相同,只不是中间区块的内容是通过相对定位来实现的.
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
