收藏
批改状态：合格
老师批语：咱们的作业, 并不仅有这一点吧, 没有写完
一、网站页面首页布局分析
1，顶部（导航栏，搜索栏，登录退出按钮等）: 一般采用定位布局，里面元素用浮动排列。
2，内容（轮播图，详情，展示，列表等）：布局方式多样，按实际情况使用。
3，底部（联系方式，备案号等）：一般使用行级标签，父级文本居中即可。
二、简单的首页布局代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网站</title>
<style type="text/css">
*{padding: 0; margin: 0; list-style: none; }
html,body{background: #eee;}
a{text-decoration: none; color: #555;}
a:hover{text-decoration: none;}
.nav{clear: both; overflow: hidden; padding:0 20px; background: #000;}
.nav li a{float: left; padding:0 10px;line-height: 60px;color: #fff;}
.nav li a:hover{background:#777 ;}
.banner,.container{width: 80%; margin: 0 auto;}
.banner img{width: 100%; height: 300px;}
/*flex样式*/
.container{display: flex; height: 350px; margin-top: 5px; background: #F2DEDE;}
.cLeft,.cRight{width: 200px; height: 100%;}
.cLeft{box-sizing: border-box ;border: 1px solid red; padding:10px; text-align: center; }
.cLeft h1,.mLeft h1{font-size: 26px; border-bottom:1px solid #666; padding-bottom:10px ; }
.cLeft a,.mLeft a{display: block; margin-top: 10px;line-height: 28px;}
.cLeft a:hover,.mLeft a:hover{color: greenyellow;}
.cMain{flex: 1; background: cadetblue;}
/*圣杯样式*/
.main{width: 80%; margin: 0 auto; overflow: hidden; }
.mMain{float: left; padding:0 200px; width: 100%; height: 350px; box-sizing: border-box; background: #003399;}
.mLeft{float: left; margin-left: -100%; width: 200px; height: 350px; background: red;text-align: center;}
.mRight{float: left; margin-left: -200px; width: 200px; height: 350px; background: gold;}
.footer{background: #555; text-align: center; color: #fff;}
.footer a{line-height: 60px; color: #fff;}
</style>
</head>
<body>
<div class="home">
<!--头部-->
<div class="header">
<ul class="nav">
<li class="item"><a href="javascript:;">首页</a></li>
<li class="item"><a href="javascript:;">公司新闻</a></li>
<li class="item"><a href="javascript:;">最新产品</a></li>
<li class="item"><a href="javascript:;">关于我们</a></li>
<li class="item"><a href="javascript:;">联系我们</a></li>
</ul>
</div>
<!--banner-->
<div class="banner">
<img src="http://b-ssl.duitang.com/uploads/item/201412/25/20141225204152_aYEc3.jpeg"/>
</div>
<!--内容-->
<div class="main">
<div class="mMain">
<h1>圣杯布局</h1>
</div>
<div class="mLeft">
<h1>商品列表</h1>
<ul>
<li><a href="javascript:;">商品1</a></li>
<li><a href="javascript:;">商品2</a></li>
<li><a href="javascript:;">商品3</a></li>
<li><a href="javascript:;">商品4</a></li>
<li><a href="javascript:;">商品5</a></li>
<li><a href="javascript:;">商品6</a></li>
</ul>
</div>
<div class="mRight">
右侧内容
</div>
</div>
<!--内容2-->
<div class="container">
<div class="cLeft">
<h1>商品列表</h1>
<ul>
<li><a href="javascript:;">商品1</a></li>
<li><a href="javascript:;">商品2</a></li>
<li><a href="javascript:;">商品3</a></li>
<li><a href="javascript:;">商品4</a></li>
<li><a href="javascript:;">商品5</a></li>
<li><a href="javascript:;">商品6</a></li>
</ul>
</div>
<div class="cMain">
<h1>用的flex布局</h1>
</div>
<div class="cRight">
右侧内容
</div>
</div>
<!--底部-->
<div class="footer">
<a href="">© php中文网版本所有</a>
|
<a href="">0551-666***999</a>
|
<a href="">皖ICP备19***666</a>
</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
总结：float和position是页面布局的基本，需要熟悉掌握！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
