HTML+CSS基础综合案例

1.尚合综合案例

学完盒子模型，浮动之后，从技术层面上，已经可以完成一个简单的页面案例了，我们来看一下如下案例。

效果图

HTML代码如下：

Document

首页

智能手机

平板电脑

配件

服务支持

关于尚合

最新公告：尚合Aone智能手机入网证已经获工信部门审批下发。尚合官方

新品发布

新闻中心

致歉公告
首批尚合Aonet已全部售馨!
【媒体报导】国产高性价比尚合Aonet四核手机评测
我司产品已经通过了国家强制性产品3C认证
尚合Aone智能手机入网证已经获工信部门审批下发.
我司通过ISO9001:2008国际质量管理体系认证.

技术与支持

售后服务
投诉与建议
联保网点
常见问题FAQ？
深圳市汇聚众合科技发展有限公司
服务热线：400-633-7922

尚合首页	智能手机	平板电脑	配件中心	服务与支持	关于我们	新闻中心	常用链接
返回首页	Aone-T	尚PAD S200	Aone 智能手机	售后服务	公司介绍	公司新闻	百度
	Aone	尚PAD S100		投诉与建议	企业文化	媒体报导	Google
		尚PAD SH-Q7		联保网点	工作机会	行业动态	新浪微博
		尚PAD SH-Q5		常见问题FAQ	法律声明
				订单查询	联系我们
				下载专区

经营许可证编号：粤ICP备11077821号-1

css代码如下：

*{
  margin: 0;
  padding: 0;
}
a{
  text-decoration: none;
}
li{
  list-style: none;
}
.header{
  background-color: #fff;
}
.w{
  width: 980px;
  margin: 0 auto;
}
.h-top{
  height:40px;
  padding-top: 20px;
  padding-bottom: 10px;
}
.h-top img{
  display: inline-block;
  background-color: #fff;
}
.h-right{
  float: right;
  padding-right: 10px;
}
.nav{
  position: relative;
  width: 100%;
  height: 55px;
  background-color: #ebebeb;
  border: 1px solid #ccc;
  background-image: url(../images/nav_bg.png);
}
.nav li{
  display: inline-block;
  text-align: center;
  width: 130px;
  height: 55px;
  line-height: 55px;
  border-right: 1px solid #ccc;
}
.nav li a{
  color: #000;
}
.content{
  line-height: 30px;
  font-size: 10px;
}
.c-bac{
  background-color: #fbfbfb;
  border: 1px solid #efefef;
}
.c-top span{
  font-weight: 700;
}
.c-right{
  float: right;
  padding-top: 5px;
}
.c-bottom{
  margin-top: 15px;
  height: 224px;
  margin-bottom: 50px;
}
.c-b-left{
  float: left;
  width: 310px;
  height: 224px;
  border: 1px solid #efefef;
  box-sizing: border-box;
}
.c-b-box{
  width: 310px;
  height: 194px;
}
.c-b-left .shouji{
  padding-bottom: 50px;
}
.c-b-left .icon{
  padding: 50px 40px 100px 20px;
}

.c-bottom p{
  box-sizing: border-box;
  height: 30px;
  padding: 5px;
  color: #7ab800;
  font-weight: 700;
  font-size: 12px;
}
.c-bottom  span{
  margin-left: 5px;
}
.c-b-center{
  float: left;
  height: 224px;
  border: 1px solid #efefef;
  width: 375px;
  margin-left: 12px;
  box-sizing: border-box;
}
.c-bottom li{
  box-sizing: border-box;
  width: 100%;
  height: 28px;
  line-height: 28px;
  border-bottom: 1px dashed #dcdcdc;
  margin-left: 20px;
}
.c-b-center li:first-child a{
  color: #f00;
  font-weight: 700;
}
.c-bottom li a{
  font-size: 12px;
  color: #666;  
}

.c-b-right{
  float: right;
  border: 1px solid #efefef;
  width: 270px;
  height: 224px;
  box-sizing: border-box;
}
.shouhou li{
  border: none;
  padding-left: 5px;
  height: 20px;
}
.shouhou li a{
  border-left:3px solid #7ab800;
  padding-left: 3px;
}
.shouhou li:nth-child(5){
  margin-top: 35px;
}
.shouhou li:nth-child(n+5) a{
  border: none;
}
.footer{
  
  background-color: #2d2d2d;
}
.f-table{
  margin-bottom:50px ;
  overflow: hidden;
}
.f-table table{
  float: left;
  width: 900px;
}
.f-top{
  float: right;
  margin-right: 5px;
}
.f-table th{
  width: 110px;
  font-size: 12px;
  text-align: left;
  padding: 15px;
  color: #c7c7c7;
  box-sizing: border-box;
}
.f-table td{
  width: 110px;
  color: #707070;
  font-size: 12px;
  text-align: left;
  padding-left: 15px;
  box-sizing: border-box;
}
.f-copy{
  border-top: 1px dashed #414141;
  text-align: center;
  font-size: 12px;
  color: #000;
}
.f-copy p{
  margin: 10px 0;
}

成果图：

2.腾讯云综合案例

效果图

html代码如下：

HTML+CSS基础综合案例

Java相关栏目本月热门文章