<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
body,html{
width: 100%;
height: 100%;
overflow: hidden;
}
.title{
height: 5%;
width: 100%;
background-color: red;
position: relative;
}
#img{
height: 100%;
width: 30%;
float: left;
background-color: blue;
}
#text{
position: absolute;
top: 30%;
right: 10%;
background-color: gray;
}
.list{
height: 7%;
width: 100%;
background-color: black;
position: relative;
overflow: hidden;
}
.l_ul{
display: inline-block;
width: 100%;
height: 100%;
}
.l_il{
display: inline-block;
color: white;
font-size:20px ;
width: 12.1%;
height: 100%;
text-align: center;
border-right: 1px solid white;
padding-top:10px ;
}
.img{
height: 40%;
width: 100%;
background-color: green;
position: relative;
}
.ind{
width: 200px;
height: 150px;
background-color: red;
position: absolute;
bottom: 20%;
left: 3%;
}
.img_left{
width: 50px;
height: 50px;
background-color: white;
text-align: center;
font-size: 50px;
position: absolute;
bottom: 0%;
right: 3%;
}
.img_ring{
width: 50px;
height: 50px;
background-color: white;
text-align: center;
font-size: 50px;
position: absolute;
bottom: 0%;
right: 6%;
}
.news_list{
width: 100%;
height: 15%;
background-color: gray;
position: relative;
}
.market{
width: 100%;
height: 15%;
background-color: #8B4513;
position: relative;
}
.bottom{
width: 100%;
height: 18%;
background-color: gray;
position: relative;
}
.c_l_d{
height: 100%;
width: 31%;
position: absolute;
}
.c_l_d:nth-of-type(1){
background-color: aquamarine;
}
.c_l_d:nth-of-type(2){
background-color: aquamarine;
right: 34%;
}
.c_l_d:nth-of-type(3){
background-color: aquamarine;
right: 0%;
}
.market_box{
width: 20%;
height: 80%;
background-color: #000000;
position: absolute;
}
.market_box:nth-of-type(1){
left: 1%;
}
.market_box:nth-of-type(2){
left: 26%;
}
.market_box:nth-of-type(3){
right: 27%;
}
.market_box:nth-of-type(4){
right: 3%;
}
.market_p{
width: 90%;
height: auto%;
position: absolute;
background-color: white;
top: 80%;
right: 5%;
word-wrap:break-word;
word-break:break-all;
}
.market_img{
width: 100%;
height: 77%;
position: absolute;
background-color: bisque;
top: 0%;
}
.bottom_box{
position: absolute;
}
.bottom_box:nth-of-type(1){
width: 40%;
height: 100%;
}
.bottom_box:nth-of-type(2){
width: 26%;
height: 100%;
left: 44%;
}
.bottom_box:nth-of-type(3){
width: 25%;
height: 100%;
right: 0%;
}
</style>
</head>
<body>
<!--标题搜索栏-->
<div class="title">
<div id="img">这里放logo</div>
<input type="text" name="" id="text" value="" />
</div>
<!--菜单导航栏-->
<div class="list">
<ul class="l_ul">
<li class="l_il">集团介绍</li>
<li class="l_il">产品中心</li>
<li class="l_il">卧龙市场</li>
<li class="l_il">技术研发</li>
<li class="l_il">国际合作</li>
<li class="l_il">投资者关系</li>
<li class="l_il">新闻资讯</li>
<li class="l_il">人力资源</li>
</ul>
</div>
<!--图片轮播栏-->
<div class="img">
<div class="ind">介绍</div>
<div class="img_left">></div>
<div class="img_ring"><</div>
</div>
<!--新闻栏-->
<div class="news_list">
<div class="c_l_d">新闻资讯</div>
<div class="c_l_d">卧龙介绍</div>
<div class="c_l_d">人才招聘</div>
</div>
<!--市场栏-->
<div class="market">
<div class="market_title">卧龙市场</div>
<div class="market_box">
<img class="market_img" src=""/>
<p class="market_p">图片文字</p>
</div>
<div class="market_box">
<img class="market_img" src=""/>
<p class="market_p">图片文字</p>
</div>
<div class="market_box">
<img class="market_img" src=""/>
<p class="market_p">图片文字</p>
</div>
<div class="market_box">
<img class="market_img" src=""/>
<p class="market_p">图片文字</p>
</div>
</div>
<!--底部栏-->
<div class="bottom">
<div class="bottom_box">
<p>产品中心</p>
<ul>
<li>汽车电机</li>
<li>日用电机</li>
<li>特种电机</li>
<li>大功率电机</li>
<li>电工设备</li>
</ul>
<ul>
<li>工业驱动和自动化</li>
<li>系统继承</li>
<li>搅拌机</li>
<li>电动车辆</li>
</ul>
</div>
<div class="bottom_box">
<p>技术研发</p>
</div>
<div class="bottom_box">
<p>营销网络</p>
</div>
</div>
</body>
</html>
网友评论