大学生个人网页设计 HTML个人网页制作 web个人网站模板 简单静态HTML个人网页作品
/*cssreset
----------------------------------*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, table, th, td, embed, object {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img, abbr {
border: 0;
}
address, caption, cite, code, dfn, em, h1, h2, h3, h4, h5, h6, strong, th, var {
font-weight: normal;
font-style: normal;
}
ul {
list-style: none;
}
caption, th {
text-align: left;
}
h1, h2, h3, h4, h5, h6 {
font-size: 1.0em;
}
q:before, q:after {
content: ”;
}
a, ins {
text-decoration: none;
}
/*topfont
----------------------------------*/
#div .divfont{
padding-left:20px;
color:#fff;
font-family:"微软雅黑", "宋体", Helvetica, Arial, sans-serif;
font-size:12px;
float:right;
width: 210px;
position:relative;
}
#div .divfont ul{
margin-left:20px;
}
#div .divfont ul li{
float:left;
font-size:12px;
padding:15px 2px;
}
/*链接样式*/
#div .divfont ul li a{
color:#fff;
}
#div .divfont ul li a:hover{
text-decoration:underline;
}
/*ctrl+d
--------------*/
.divfont #ctrl{
display:none;
color:#666;
position:absolute;
top:40px;
left:-20px;
padding:10px 20px;
background:#fff
}
.divfont #ctrl span{
padding:0 5px;
font-size:14px;
}
/*背景*/
#div .divfont:hover .bluebg{
width:250px;
}
#div .divfont .bluebg{
width:0px;
background:#0091C7;
height:50px;
-webkit-transition: width 1s ease 300ms;
-moz-transition: width 1s ease 300ms;
-o-transition: width 1s ease 300ms;
}
/*背景
----------------------------------*/
html,body{height:100%;}
#div{background: url(../img/photo_4.jpg) no-repeat ; overflow:hidden; height:100%; width:100%;}
/* logo
----------------------------------*/
.logo{
width:209px;
margin:0 auto;
margin-top:15%;
}
/*搜索框
----------------------------------*/
#div .searchinput{
border-right-width: 0px;
padding-left: 3px;
width: 450px;
height:40px;
font-family: arial;
float: left;
border-top-width: 0px;
border-bottom-width: 0px;
color: #636365;
font-size: 12pt;
vertical-align: middle;
border-left-width: 0px;
background-color:transparent;
z-index:2;
}
#div .search_height{
height: 25px;
}
#div .searchaction{
float: left;
height:40px;
padding:1px;
z-index:3;
}
#div :hover{
background:#FFF;
}
/*搜索框位置
----------------------------------*/
#div .search{
margin:0 auto;
width:545px;
margin-top:20px;
}
.z-index_three{
z-index:1;
position:relative;
}
/*搜索框背景
----------------------------------*/
#div .bg{
width: 453px;
height:40px;
background:#fff;
position:relative;
z-index:0;
top:-40px;
opacity:0.7;
filter:alpha(opacity=70);
}
/* blue 提交按钮
----------------------------------*/
#div .blue {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
background-color: #38f;
border: 0;
padding: 10px 15px;
color: #fff;
border-radius: 3px;
width: 50px;
cursor: pointer;
font-size: 18px;
margin-left:25%;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
}
#div .blue:hover {
background-color:#09C;
-webkit-transition-property:background-color;
-moz-transition-property:background-color;
-o-transition-property:background-color;
-webkit-transition-duration:0.8s;
-moz-transition-duration:0.8s;
-o-transition-duration:0.8s;
color:#fff;
}
#div .blue:active {
color: #fff;
background: -webkit-gradient(linear, left top, left bottom, from(#0080B0), to(#0080b0));
background: -moz-linear-gradient(top, #0078a5, #00adee);
filter: progid:.gradient(startColorstr='#0078a5', endColorstr='#00adee');
}
#div .button {
display: inline-block;
zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
*display: inline;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .9em 2em .99em;
text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .0em;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
/*body
----------------------------------*/
#body{
position:relative;
margin: 0 auto;
height: 315px;
width: 860px;
padding: 10px 0 0 10px;
}
#body .top{
padding:10px;
}
#body .top1{
left:180px;
}
#body .top2{
left:350px
}
#body .top3{
left:520px;
}
#body .top4{
left:690px
}
#body .top5{
top:165px;
}
#body .top6{
top:165px;
left:180px;
}
#body .top7{
top:165px;
left:350px
}
#body .top8{
top:165px;
left:520px;
}
#body .top9{
top:165px;
left:690px
}
#body>div{
z-index:1;
position:absolute;
padding:10px;
}
#body a{
color:#fff;
}
#body .bg{
height:300px;
width:840px;
opacity:0.15;
filter:alpha(opacity=15);
position:absolute;
top:6px;
background:#000;
}
#body a{
height:140px;
width:160px;
display:block;
}
#body .overflow{
height:140px;
width:160px;
position:relative;
overflow:hidden;
}
#body .overflow .font{
position:absolute;
bottom:0;
height:30px;
line-height:30px;
z-index:2;
font-size:14px;
font-family:"微软雅黑";
padding-left:8px;
}
#body .overflow .bg{
/*background:#000;*/
height:30px;
position:absolute;
width:160px;
opacity:0.6;
filter:alpha(opacity=40);
top:110px;
z-index:1;
background:-webkit-linear-gradient(bottom,#000,#ccc);
}
.overflow img{
-webkit-transition:all ease .3s;
transition:all ease .3s;
}
.overflow img:hover{
-webkit-transform:scale(1.25);
transform:scale(1.25);
box-shadow:0px 0px 18px rgba(0,0,0,.5);
}
/*bottom
----------------------------------*/
#bottom {
color:#FFF;
border-top:1px #fff solid;
line-height:25px;
text-align:center;
clear:both;
font-size:12px;
font-family:"微软雅黑";
width:1200px;
margin:0 auto;
margin-top:40px;
}