关于我们主体部分：
首先插图公司图片并且居中，标题使用H标签，公司简介内容使用p标签。
联系我们主体部分：
联系方式使用 ul li标签排列，标题使用H标签，再用img标签插入公司位置图。
示例一：关于我们页面
实例
/*框架中间部分*/
.c-conter{
width: 1000px;
margin: 5px auto;
overflow: hidden;
}
/*导航栏下图片*/
.zt{
width: 1000px;
height: 263px;
margin: 5px auto;
}
/*主体部分*/
.warp{
width: inherit;
float: left;
}
/*主体部分介绍图*/
.warp .conter .jst{
text-align: center;
}
/*主体部分左外边距移动*/
.warp .conter{
margin-left: 290px;
}
/*主体部分标题*/
.warp .conter h3{
text-align: center;
margin: 10px auto;
border-bottom: 1px solid;
}
.warp .conter .c-c-content p{
text-indent:2em;
}
/*左侧栏*/
.c-left{
width: 280px;
height: 500px;
background-color: #fff;
float: left;
margin-left: -100%;
}
/*左侧标题*/
.c-left h3{
text-align: center;
margin: 10px auto;
border-bottom: 1px solid;
}
/*Ul去除内外边距、圆点*/
.c-left ul{
padding: 0;
margin: 0;
list-style: none;
}
/*左侧li a 设置*/
.c-left ul li a{
text-decoration: none;
display: inline-block;
width: 100%;
height: 50px;
background-color: black;
color: white;
text-align: center;
line-height: 50px;
}
/*左侧鼠标悬浮*/
.c-left ul li a:hover{
background-color: red;
font-size: 1.1rem;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>关于我们</title> <link rel="stylesheet" type="text/css" href="static/css/about.css"> <link rel="stylesheet" href="static/css/header.css"> <link rel="stylesheet" href="static/css/footer.css"> </head> <body> <!-- 头部 --> <div class="header"> <div class="content"> <ul class="nav"> <li class="item"><a href="index.html">首页</a></li> <li class="item"><a href="news.html">公司新闻</a></li> <li class="item"><a href="products.html">最新产品</a></li> <li class="item"><a href="about.html">关于我们</a></li> <li class="item"><a href="contact.html">联系我们</a></li> </ul> </div> </div> <!-- 主体内容 单飞翼布局--> <div class="c-conter"> <div class="zt"> <img src="static/images/banner.jpg"> </div> <div class="warp"> <div class="conter"> <h3>公司简介</h3> <div class="jst"> <img src="static/images/huawei.jpeg" alt="华为总部图"> </div> <div class="c-c-content"> <h1>华为是谁</h1> <p> 华为创立于1987年，是全球领先的ICT（信息与通信）基础设施和智能终端提供商，我们致力于把数字世界带入每个人、每个家庭、每个组织，构建万物互联的智能世界。目前华为有18.8万员工，业务遍及170多个国家和地区，服务30多亿人口。 </p> <h1>谁拥有华为</h1> <p> 华为是一家100%由员工持有的民营企业。华为通过工会实行员工持股计划，参与人数为96,768人，参与人仅为公司员工，没有任何政府部门、机构持有华为股权。 </p> <h1>谁控制华为</h1> <p> 华为拥有完善的内部治理架构。持股员工选举产生115名持股员工代表，持股员工代表会选举产生董事长和其他16名董事，董事会选举产生4名副董事长和3名常务董事，轮值董事长由3名副董事长担任。 </p> <p> 轮值董事长以轮值方式主持公司董事会和常务董事会。董事会行使公司战略与经营管理决策权，是公司战略、经营管理和客户满意度的最高责任机构。 </p> <p> 董事长主持持股员工代表会。持股员工代表会是公司最高权力机构，对利润分配、增资和董事监事选举等重大事项进行决策。 </p> <h1>谁影响华为</h1> <p> 华为对外依靠客户，坚持以客户为中心，通过创新的产品为客户创造价值；对内依靠努力奋斗的员工，以奋斗者为本，让有贡献者得到合理回报；与供应商、合作伙伴、产业组织、开源社区、标准组织、大学、研究机构等构建共赢的生态圈，推动技术进步和产业发展；我们遵从业务所在国适用的法律法规，为当地社会创造就业、带来税收贡献、使能数字化，并与政府、媒体等保持开放沟通。 </p> <h1>我们为世界带来了什么</h1> <p> 为客户创造价值。华为携手合作伙伴，为电信运营商提供创新、安全的网络设备，为行业客户提供开放、灵活、安全的ICT基础设施产品，为云服务客户提供稳定可靠、安全可信和可持续演进的云服务。华为智能终端和智能手机，正在帮助人们享受高***的数字工作、生活和娱乐体验。 </p> <p>保障网络安全稳定运行。从2018年开始，网络安全和隐私保护成为公司的最高纲领。30多年来，华为和运营商一起建设了1,500多张网络，帮助世界超过30亿人口实现联接，我们保持了良好的安全记录。</p> <p>推动产业良性发展。华为主张开放、合作、共赢，与客户、伙伴合作创新、扩大产业价值，形成健康良性的产业生态系统。华为加入400多个标准组织、产业联盟和开源社区，积极参与和支持主流标准的制定，推动产业良性发展。推动社会可持续发展。华为致力消除数字鸿沟、促进数字包容，在珠峰、北极圈内等偏远地区建设网络，在西非埃博拉疫区、***海啸核泄漏、中国汶川大地震等重大灾难现场恢复通信；同时，积极推进绿色低碳和节能环保，帮助培养本地ICT人才，促进数字经济发展。</p> <p>为奋斗者提供舞台。华为坚持“以奋斗者为本”，以责任贡献来评价员工和选拔干部，为员工提供了全球化发展平台、与世界对话的机会，使大量年轻人有机会担当重任，快速成长，也使得十几万员工通过个人的努力，收获了合理的回报与值得回味的人生经历。 </p> <h1>我们坚持什么</h1> <p> 华为30年坚持聚焦在主航道，抵制一切诱惑；坚持不走捷径，拒绝机会主义，踏踏实实，长期投入，厚积薄发；坚持以客户为中心，以奋斗者为本，长期艰苦奋斗，坚持自我批判。 </p> <p> 我们不会辜负时代慷慨赋予我们的历史性机遇，为构建万物互联的智能世界，一往无前。 </p> </div> </div> </div> <div class="c-left"> <h3>栏目</h3> <div class="cl-ul"> <ul> <li><a href="">公司新闻</a></li> <li><a href="">最新产品</a></li> <li><a href="">关于我们</a></li> <li><a href="">联系我们</a></li> </ul> </div> </div> </div> <!-- 底部 --> <div class="footer"> <div class="content"> <p> <a href="">© PHP中文网版权所有</a> | <a href="">0551-88889999</a> | <a href="">皖ICP2016098801-1</a> </p> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
示例二：联系我们页面
实例
/*框架中间部分*/
.c-conter{
width: 1000px;
margin: 5px auto;
overflow: hidden;
}
/*导航栏下图片*/
.zt{
width: 1000px;
height: 263px;
margin: 5px auto;
}
/*主体部分*/
.warp{
width: inherit;
float: left;
}
/*主体部分介绍图*/
.warp .conter .jst{
text-align: center;
}
/*主体部分左外边距移动*/
.warp .conter{
margin-left: 290px;
}
/*主体部分标题*/
.warp .conter h3{
text-align: center;
margin: 10px auto;
border-bottom: 1px solid;
}
.warp .conter .c-c-content{
text-align: center;
}
.warp .conter .c-c-content ul{
list-style: none;
}
.warp .conter .c-c-content ul li{
font-size: 20px;
}
/*左侧栏*/
.c-left{
width: 280px;
height: 500px;
background-color: #fff;
float: left;
margin-left: -100%;
}
/*左侧标题*/
.c-left h3{
text-align: center;
margin: 10px auto;
border-bottom: 1px solid;
}
/*Ul去除内外边距、圆点*/
.c-left ul{
padding: 0;
margin: 0;
list-style: none;
}
/*左侧li a 设置*/
.c-left ul li a{
text-decoration: none;
display: inline-block;
width: 100%;
height: 50px;
background-color: black;
color: white;
text-align: center;
line-height: 50px;
}
/*左侧鼠标悬浮*/
.c-left ul li a:hover{
background-color: red;
font-size: 1.1rem;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>联系我们</title> <link rel="stylesheet" href="static/css/header.css"> <link rel="stylesheet" href="static/css/footer.css"> <link rel="stylesheet" type="text/css" href="static/css/contact.css"> </head> <body> <!-- 头部 --> <div class="header"> <div class="content"> <ul class="nav"> <li class="item"><a href="index.html">首页</a></li> <li class="item"><a href="news.html">公司新闻</a></li> <li class="item"><a href="products.html">最新产品</a></li> <li class="item"><a href="about.html">关于我们</a></li> <li class="item"><a href="contact.html">联系我们</a></li> </ul> </div> </div> <!-- 主体内容 单飞翼布局--> <div class="c-conter"> <div class="zt"> <img src="static/images/banner.jpg"> </div> <div class="warp"> <div class="conter"> <h3>联系我们</h3> <div class="c-c-content"> <ul> <li>电话：<string>+0597-4823434</string></li><br> <li>Email：4493473@qq.com</li> </ul> </div> <h2>导航位置：</h2> <div class="jst"> <img src="static/images/tt.png" alt="华为总部图" width="600px" height="400px"> </div> </div> </div> <div class="c-left"> <h3>栏目</h3> <div class="cl-ul"> <ul> <li><a href="">公司新闻</a></li> <li><a href="">最新产品</a></li> <li><a href="">关于我们</a></li> <li><a href="">联系我们</a></li> </ul> </div> </div> </div> <!-- 底部 --> <div class="footer"> <div class="content"> <p> <a href="">© PHP中文网版权所有</a> | <a href="">0551-88889999</a> | <a href="">皖ICP2016098801-1</a> </p> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
