前言
网页布局设计。
实现过程
1.代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="网页布局.css" />
</head>
<body>
<!-- 顶部 -->
<div class="top">
<p><img src="../../img/phone.png"/>联系电话:18555556666</p>
</div>
<!-- 导航 -->
<div class="nav">
<a href="#" class="logo"><img src="../../img/logo1.png"/></a>
<ul>
<li><a href="#">首页</a><span>|</span></li>
<li><a href="#">关于致美</a><span>|</span></li>
<li><a href="#">成功案例</a><span>|</span></li>
<li><a href="#">新闻动态</a><span>|</span></li>
<li><a href="#">在线咨询</a><span>|</span></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
<!-- 轮播图 -->
<div class="banner">
<img src="../../img/spanner.png"/>
</div>
<!-- link链接 -->
<div class="link">
<ul>
<li><a href="#"><img src="../../img/link1.png"/></a></li>
<li><a href="#"><img src="../../img/link2.png"/></a></li>
<li><a href="#"><img src="../../img/link3.png"/></a></li>
<li><a href="#"><img src="../../img/link4.png"/></a></li>
<li><a href="#"><img src="../../img/link5.png"/></a></li>
</ul>
</div>
<!-- 商品案例 -->
<div class="case">
<div class="title">
<img src="../../img/caseTitle.png" />
</div>
<ul>
<li><a href="#"><img src="../../img/case1.png"/></a></li>
<li><a href="#"><img src="../../img/case2.png"/></a></li>
<li><a href="#"><img src="../../img/case3.png"/></a></li>
<li><a href="#"><img src="../../img/case4.png"/></a></li>
<li><a href="#"><img src="../../img/case5.png"/></a></li>
</ul>
</div>
<!-- 关于介绍 -->
<div class="about">
<div class="title">
<img src="../../img/aboutTitle.png" />
</div>
<h4>致美创意，因为<b>专注</b>所以<b>专业</b></h4>
<p><a href="#">红红火火恍恍惚惚或或或或或或或或或或或或或或或或或或....</a></p>
<p><a href="#">红红火火恍恍惚惚或或或或或或或或或或或或或或或或或或覆盖萨达所大所大所</a></p>
</div>
<!-- 进程介绍 -->
<div class="process">
<h3><b>SERVER</b><strong>PROCESS</strong><span>服务流程</span></h3>
<p>
<img src="../../img/电话.png" />
项目洽谈，根据需求报价
<img src="../../img/箭头.png" />
<img src="../../img/金钱.png" />
预付定金，开始设计
<img src="../../img/箭头.png" />
<img src="../../img/扳手.png" />
修改定稿，完成设计
<img src="../../img/箭头.png" />
<img src="../../img/签收.png" />
签收付尾款
</p>
</div>
<div class="bottom">
<p>
<a href="#">首页</a><span>|</span>
<a href="#">关于致美</a><span>|</span>
<a href="#">成功案例</a><span>|</span>
<a href="#">在线咨询</a>
</p>
<p>Copyright © 2020-2021 致美创意工作室</p>
<p>技术支持：<a href="#">凡科建站</a><span>|</span><a href="#">管理登录</a></p>
</div>
</body>
</html>
css代码：
*{margin: 0; padding: 0;}
a{text-decoration: none;}
li{list-style: none;}
img{border: none;}/* 图片去边框 */
/* top */
.top{height: 34px; background: linear-gradient(#ffffff,#AFAFAF); text-align: right;}
.top p{width: 950px; margin: 0 auto; line-height: 34px;font-size: 20px; color: #333;font-family: "楷体";}
.top p img{width: 25px; vertical-align: top; padding-top: 5px; margin-right: 10px;}
/* nav */
.nav{width: 950px; height: 100px; margin: 0 auto;}
.nav img{width: 200px;float: left; padding-top: 32px;margin-right: 91px;}
.nav ul li{float: left; color: #1d1c1c;padding-top: 42px;}
.nav ul li a{color: #666; width: 89px; float: left; padding-bottom: 10px;text-align: center;}
.nav ul li a:hover{border-bottom: 3px #000000 solid; color: #000000;}
/* banner */ /* 将图片块化,解决图片与下边区域的3px空隙 */
.banner img{width: 100%; height: 200px; display: block;}
/* link */
.link{width: 950px; height: 223px; margin: 0 auto; overflow: hidden;}
.link ul{padding: 44px 55px;width: 962px;}
.link ul li{float: left;margin-right: 86px;}
/* case */
.case{width: 950px; height: 446px; margin: 0 auto;}
.case .title{background: url(../../img/caseTitlebg.png) repeat-x;text-align: center;}
.case ul{margin-top: 38px;display: flex;justify-content: space-between;}
/* about */
.about{width: 950px; height: 250px;margin: 0 auto;}
.about .title{background: url(../../img/caseTitlebg.png) repeat-x;text-align: center;padding-top: .49px;}
.about h4{font-size: 15px;font-weight: normal;text-align: center;padding-top: 10px;}
.about p{font-size: 13px;text-align: center;line-height: 20px;}
.about p a{color: #666666;}
/* process */
.process{width: 950px; height: 245px; margin: 0 auto;}
.process h3{height: 50px;background: url(../../img/caseTitlebg.png) repeat-x;text-align: center;font-size: 22px;line-height: 32px;}
.process h3 b{color: #FF0000;}
.process h3 strong{color: #FFFFFF;}
.process h3 span{color: #30353a; display: block; background: #FFFFFF;font-size: 10px;width: 76px;margin: 0 auto; line-height: 9px;}
.process p{text-align: center;padding-top: 42px;font-size: 13px;color: #666666;}
.process p img{vertical-align: middle;padding: 10px;}
/* bottom */
.bottom{height: 89px;background: #eaeaea; border-top: 1px solid #b4b4b4;text-align: center;padding-top: 28px;font-size: 12px;line-height: 22px;}
.bottom a{color: #000000;}
.bottom span{padding: 0 5px;}
2.效果
扫一扫
335
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
