掌恒小例子
2016-07-07 08:09
369 查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta
charset="UTF-8">
<title>D掌恒作品列表</title>
<link
rel="stylesheet"
href="css/reset.css">
<style
type="text/css">
body{
height:
9999px;
}
a{
text-decoration:
none;
}
.nav{
background-color: black;
height:
65px;
overflow:
hidden;
position:
fixed;
width:
100%;
opacity:
0.5;
}
.nc_img{
float:
left;
}
.nc_as{
float:
right;
margin-top:
20px;
}
.nav_content{
overflow:
hidden;
margin:
0 auto;
width:
980px;
margin-top:
10px;
}
.nav_1{
position:
fixed;
width:
100%;
}
.nc_as a{
color: white;
text-decoration:
none;
margin-right:
10px;
border-right:
1px
solid white;
padding-right:
10px;
}
.nc_as a:hover{
color:
#00C3EC;
}
#about{
border:
none;
}
.banner{
background-image: url(img/bg.jpg);
height:
580px;
background-repeat:
no-repeat;
background-size:
100%
100%;
/* 最小宽度 */
min-width:
980px;
}
.b_content{
text-align: center;
overflow:
hidden;
}
.b_content h1{
font-size:
28px;
color: white;
margin-top:
133px;
}
.b_span{
margin-top:
20px;
}
.b_span span{
color: white;
border:
1px solid white;
padding:
5px;
margin:
20px;
}
.b_content p
{
margin-top:
20px;
color: white;
}
.content{
text-align: center;
width:
100%;
min-width:
980px;
}
.c_1{
display:
inline-block;
width:
100px;
height:
100px;
border:
1px
solid #ccc;
margin:
20px
20px;
font-size:
15px;
-webkit-transition:
1s;
-o-transition:
1s;
transition:
1s;
}
.c_1 p{
margin:
40px
auto;
}
.c_1:hover{
background-color:
#00A6DC;
color: white;
}
.wrap1{
width:
1200px;
height:
500px;
background-color: white;
margin:
50px
auto;
overflow:
hidden;
}
.artical{
width:
228px;
height:
154px;
border:
2px solid gray;
float:left;
padding:
2px;
position:
relative;
margin-left:
10px;
margin-top:
10px;
}
.div1{
width:
232px;
height:
158px;
background-color:
#29A2DE;
/*float: left;*/
position:
absolute;
top:0;
left:0;
text-align:
center;
line-height:
158px;
font-size:
20px;
color: white;
opacity:
0;
-webkit-transition:
0.2s;
-o-transition:
0.2s;
transition:
0.2s;
}
.artical:hover
.div1{
opacity:
1;
}
</style>
</head>
<body>
<div class="wrap">
<div
class="head">
<div
class="nav"></div>
<div
class="nav_1">
<div
class="nav_content">
<div
class="nc_img">
<img
src="img/logo.png"
alt="">
</div>
<div
class="nc_as">
<a
href="#">Home</a>
<a
href="#">Abilities</a>
<a
href="#">Portfios</a>
<a
id="about"
href="#">About</a>
</div>
</div>
</div>
<div
class="banner">
<div
class="b_content">
<h1>广州掌恒---专注于数字化营销领域</h1>
<div
class="b_span">
<span>互联营销、研发、运营</span><span>网易、联想联合创始人</span>
</div>
<p>电商、IM通讯、QQ营销、移动OA办公</p>
<p>服务于地产、餐饮、广告、教育培训、医疗、服装等多个行业</p>
</div>
</div>
</div>
</div>
<div class="content">
<a
href="#">
<div
class="c_1">
<p>平台</p>
</div>
</a>
<a
href="#">
<div
class="c_1">
<p>新媒体</p>
</div>
</a>
<a
href="#">
<div
class="c_1">
<p>设计</p>
</div>
</a>
<a
href="#">
<div
class="c_1">
<p>APP</p>
</div>
</a>
</div>
<div class="wrap1">
<a
href="#"
class="artical">
<div
class="div1">
<p>慕思寝居家居网站</p>
</div>
<img
src="img/x1.png"
alt="">
</a>
<a
href="#"
class="artical">
<div
class="div1">
<p>慕思寝居家居网站</p>
</div>
<img
src="img/x2.png"
alt="">
</a>
<a
href="#"
class="artical">
<div
class="div1">
<p>慕思寝居家居网站</p>
</div>
<img
src="img/x3.png"
alt="">
</a>
<a
href="#"
class="artical">
<div
class="div1">
<p>慕思寝居家居网站</p>
</div>
<img
src="img/x4.png"
alt="">
</a>
<a
href="#"
class="artical">
<div
class="div1">
<p>慕思寝居家居网站</p>
</div>
<img
src="img/x5.png"
alt="">
</a>
<a
href="#"
class="artical">
<div
class="div1">
<p>慕思寝居家居网站</p>
</div>
<img
src="img/x6.png"
alt="">
</a>
<a
href="#"
class="artical">
<div
class="div1">
<p>慕思寝居家居网站</p>
</div>
<img
src="img/x7.png"
alt="">
</a>
<a
href="#"
class="artical">
<div
class="div1">
<p>慕思寝居家居网站</p>
</div>
<img
src="img/x8.png"
alt="">
</a>
<a
href="#"
class="artical">
<div
class="div1">
<p>慕思寝居家居网站</p>
</div>
<img
src="img/x9.png"
alt="">
</a>
<a
href="#"
class="artical">
<div
class="div1">
<p>慕思寝居家居网站</p>
</div>
<img
src="img/x10.png"
alt="">
</a>
</div>
</body>
</html>
<html lang="en">
<head>
<meta
charset="UTF-8">
<title>D掌恒作品列表</title>
<link
rel="stylesheet"
href="css/reset.css">
<style
type="text/css">
body{
height:
9999px;
}
a{
text-decoration:
none;
}
.nav{
background-color: black;
height:
65px;
overflow:
hidden;
position:
fixed;
width:
100%;
opacity:
0.5;
}
.nc_img{
float:
left;
}
.nc_as{
float:
right;
margin-top:
20px;
}
.nav_content{
overflow:
hidden;
margin:
0 auto;
width:
980px;
margin-top:
10px;
}
.nav_1{
position:
fixed;
width:
100%;
}
.nc_as a{
color: white;
text-decoration:
none;
margin-right:
10px;
border-right:
1px
solid white;
padding-right:
10px;
}
.nc_as a:hover{
color:
#00C3EC;
}
#about{
border:
none;
}
.banner{
background-image: url(img/bg.jpg);
height:
580px;
background-repeat:
no-repeat;
background-size:
100%
100%;
/* 最小宽度 */
min-width:
980px;
}
.b_content{
text-align: center;
overflow:
hidden;
}
.b_content h1{
font-size:
28px;
color: white;
margin-top:
133px;
}
.b_span{
margin-top:
20px;
}
.b_span span{
color: white;
border:
1px solid white;
padding:
5px;
margin:
20px;
}
.b_content p
{
margin-top:
20px;
color: white;
}
.content{
text-align: center;
width:
100%;
min-width:
980px;
}
.c_1{
display:
inline-block;
width:
100px;
height:
100px;
border:
1px
solid #ccc;
margin:
20px
20px;
font-size:
15px;
-webkit-transition:
1s;
-o-transition:
1s;
transition:
1s;
}
.c_1 p{
margin:
40px
auto;
}
.c_1:hover{
background-color:
#00A6DC;
color: white;
}
.wrap1{
width:
1200px;
height:
500px;
background-color: white;
margin:
50px
auto;
overflow:
hidden;
}
.artical{
width:
228px;
height:
154px;
border:
2px solid gray;
float:left;
padding:
2px;
position:
relative;
margin-left:
10px;
margin-top:
10px;
}
.div1{
width:
232px;
height:
158px;
background-color:
#29A2DE;
/*float: left;*/
position:
absolute;
top:0;
left:0;
text-align:
center;
line-height:
158px;
font-size:
20px;
color: white;
opacity:
0;
-webkit-transition:
0.2s;
-o-transition:
0.2s;
transition:
0.2s;
}
.artical:hover
.div1{
opacity:
1;
}
</style>
</head>
<body>
<div class="wrap">
<div
class="head">
<div
class="nav"></div>
<div
class="nav_1">
<div
class="nav_content">
<div
class="nc_img">
<img
src="img/logo.png"
alt="">
</div>
<div
class="nc_as">
<a
href="#">Home</a>
<a
href="#">Abilities</a>
<a
href="#">Portfios</a>
<a
id="about"
href="#">About</a>
</div>
</div>
</div>
<div
class="banner">
<div
class="b_content">
<h1>广州掌恒---专注于数字化营销领域</h1>
<div
class="b_span">
<span>互联营销、研发、运营</span><span>网易、联想联合创始人</span>
</div>
<p>电商、IM通讯、QQ营销、移动OA办公</p>
<p>服务于地产、餐饮、广告、教育培训、医疗、服装等多个行业</p>
</div>
</div>
</div>
</div>
<div class="content">
<a
href="#">
<div
class="c_1">
<p>平台</p>
</div>
</a>
<a
href="#">
<div
class="c_1">
<p>新媒体</p>
</div>
</a>
<a
href="#">
<div
class="c_1">
<p>设计</p>
</div>
</a>
<a
href="#">
<div
class="c_1">
<p>APP</p>
</div>
</a>
</div>
<div class="wrap1">
<a
href="#"
class="artical">
<div
class="div1">
<p>慕思寝居家居网站</p>
</div>
<img
src="img/x1.png"
alt="">
</a>
<a
href="#"
class="artical">
<div
class="div1">
<p>慕思寝居家居网站</p>
</div>
<img
src="img/x2.png"
alt="">
</a>
<a
href="#"
class="artical">
<div
class="div1">
<p>慕思寝居家居网站</p>
</div>
<img
src="img/x3.png"
alt="">
</a>
<a
href="#"
class="artical">
<div
class="div1">
<p>慕思寝居家居网站</p>
</div>
<img
src="img/x4.png"
alt="">
</a>
<a
href="#"
class="artical">
<div
class="div1">
<p>慕思寝居家居网站</p>
</div>
<img
src="img/x5.png"
alt="">
</a>
<a
href="#"
class="artical">
<div
class="div1">
<p>慕思寝居家居网站</p>
</div>
<img
src="img/x6.png"
alt="">
</a>
<a
href="#"
class="artical">
<div
class="div1">
<p>慕思寝居家居网站</p>
</div>
<img
src="img/x7.png"
alt="">
</a>
<a
href="#"
class="artical">
<div
class="div1">
<p>慕思寝居家居网站</p>
</div>
<img
src="img/x8.png"
alt="">
</a>
<a
href="#"
class="artical">
<div
class="div1">
<p>慕思寝居家居网站</p>
</div>
<img
src="img/x9.png"
alt="">
</a>
<a
href="#"
class="artical">
<div
class="div1">
<p>慕思寝居家居网站</p>
</div>
<img
src="img/x10.png"
alt="">
</a>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 