这是我第一个dome
<title>我的博客</title>
<head>
<meta charset="UTF-8">
<meta name="author" content="ljq">
<meta name="keywords" content="动漫 健身 ">
<meta name="description" content="ljq个人博客 关于生活 关于学习的分享">
<script src="js/jquery-1.11.1.min.js">
</script>
<title></title>
<!--<link rel="stylesheet" type="text/css" href="./css/第一次.css"/>-->
<style type="text/css">
*{
margin:0;
padding: 0;
text-decoration: none;
list-style: none;
}
.head{
margin: ;
width:600px ;
height: 1000px;
border: 1px solid red;
float: left;
margin-left: 300px;
}
.fir{
width: 600px;
height: 120px;
background: url(img/3.jpg);
}
.fir1{
text-align:right;
width:30%;
height: 120px;
background: url(img/1.jpg) no-repeat;
float: left;
}
.fir2{
width: 70%;
height: 120px;
float: left;
position: relative;
display:none;
}
@keyframes ljq{
0%{
transform: rotateY(0deg);
}
100%{
transform: rotateY(360deg);
}
}
.beside{
width:300px ;
height: 1000px;
border: 1px solid blue;
float: left;
background: #E3EDCD;
text-align: center;
line-height: 50px;
}
.top1{
width:300px;
height: 300px;
border-radius: 50%;
overflow: hidden;
}
.top1>img{
width: auto;
height: auto;
max-width: 100%;
}
.beside:hover .top1{
width: 50px;
height: 50px;
margin: 0 auto;
}
.beside:hover .top3{
height:350px;
}
.top2{
width: 300px;
height: 200px;
border: 1px solid black;
line-height: 25px;
}
.box{
width: 280px;
height: 400px;
transform-style: preserve-3d;
animation: ljq 5s linear infinite;
margin: 0 auto;
margin-top: 0;
}
.one,.two,.three{
width: 280px;
height: 180px;
position: absolute;
-webkit-box-reflect: below 20px -webkit-linear-gradient(transparent,transparent 50%,rgba(75,225,205,.6));
}
.one{
transform: rotateY(60deg);
}
.two{
transform: rotateY(120deg);
}
.three{
transform: rotateY(180deg);
}
.one1,.one2{
padding: 0;
margin: 0;
width:50%;
height: 180px;
float: left;
}
.two1,.two2{
padding: 0;
margin: 0;
width:50%;
height: 180px;
float: left;
}
.three1,.three2{
padding: 0;
margin: 0;
width:50%;
height: 180px;
float: left;
}
.one1{
background: url(img/2.jpg);
background-position-x:10%;
background-position-y: 25%;
border-radius: 20px;
}
.one2{
background: url(img/2.jpg);
background-position-x:35%;
background-position-y: 25%;
border-radius: 20px;
}
.two1{
background: url(img/2.jpg);
background-position-x:65%;
background-position-y: 25%;
border-radius: 20px;
}
.two2{
background: url(img/2.jpg);
background-position-x:95%;
background-position-y: 20%;
border-radius: 20px;
border-radius: 20px;
}
.three1{
background: url(img/2.jpg);
background-position-x:11%;
background-position-y: 85%;
border-radius: 20px;
border-radius: 20px;
}
.three2{
background: url(img/2.jpg);
background-position-x:40%;
background-position-y: 85%;
border-radius: 20px;
}
.top3{
width:300px;
height: 100px;
overflow: scroll;
background: lightcyan;
color: brown;
}
.lis{
background: deepskyblue;
}
.lis>li{
width: 118px;
height: 40px;
border: 1px solid yellow;
line-height: 40px;
background: aquamarine;
list-style: none;
float: left;
text-align: center;
}
.lis1:hover,.lis2:hover,.lis3:hover,.lis4:hover,.lis5:hover{
background: white;
}
.lit1,.lit2,.lit3,.lit4,.lit5{
display: none;
}
.lit1>li:hover{
background: red;
}
.lit2>li:hover{
background: red;
}
.lit3>li:hover{
background: red;
}
.lit4>li:hover{
background: red;
}
.lit5>li:hover{
background: red;
}
.mid{
margin-top: 40px;
width: 600px;
height: 670px;
}
</style>
</head>
<body bgcolor="lightcyan">
<div class="head">
<div class="fir">
<div class="fir1"><p style="color: red">:To</p></div>
<div class="fir2"style="font-size: 30px;line-height: 30px;"><p>别 难 过</p></br>毕竟 以后的日子会更难过!!!</div>
</div>
<div>
<ul class="lis">
<li class="lis1"><a href="#">桌面</a>
<ul class="lit1">
<li>图片</li>
<li>文章</li>
<li>框架</li>
</ul>
</li>
<li class="lis2"><a href="#">学习</a>
<ul class="lit2">
<li>视频</li>
<li>书籍</li>
<li>录音</li>
</ul>
</li>
<li class="lis3"><a href="#">生活</a>
<ul class="lit3">
<li>动漫迷</li>
<li>游戏迷</li>
<li>健身迷</li>
</ul>
</li>
<li class="lis4"><a href="#">日志</a>
<ul class="lit4">
<li>随笔</li>
<li>美文</li>
<li>心得</li>
</ul>
</li>
<li class="lis5"><a href="#">留言</a>
<ul class="lit5">
<li>足迹</li>
<li>谢谢</li>
<li>来访</li>
</ul>
</li>
</ul>
</div>
<div class="mid"></div>
<div class="sec"></div>
</div>
<div class="beside">
<div class="top1"style="color:red;">
<img src="img/66.jpg"/>
</div>
<div class="top2">
<p style="text-align: left;color: gold;">姓名：赖jq 性别：男 年龄：24</p><br />
<p style="text-align: left;color: yellow;">游戏：LOL 还喜欢音乐</p><br />
<p style="color: white;">崇尚*，热爱生活。平时喜欢健身、运动。有时会看看书，但又感觉别人在吹牛，或者是无病呻吟。我喜爱的书籍是《平凡的世界》</p>
</div>
<div class="box">
<button class="xw"></button>
<div class="one">
<div class="one1"></div>
<div class="one2"></div>
</div>
<div class="two">
<div class="two1"></div>
<div class="two2"></div>
</div>
<div class="three">
<div class="three1"></div>
<div class="three2"></div>
</div>
</div>
<div class="top3">
<h3>红豆痴</h3>
<p>相思<br />红豆生南国，春来发几枝。<br />愿君多采撷， 此物最相思。
</p>
</div>
</div>
<div class="footer"></div>
</body>
</html>
<script>
$(document).ready(function(){
$(".head").hover(function(){
$(".fir2").slideToggle("slow");
});
$(".lis1").hover(function(){
$(".mid").css({"background":"white","opacity":"1"})
});
$(".lis2").hover(function(){
$(".mid").css({"background":"url(img/lis2.jpg)","opacity":"0.5"})
});
$(".lis3").hover(function(){
$(".mid").css({"background":"url(img/lis3.jpg)","opacity":"0.5"})
});
$(".lis4").hover(function(){
$(".mid").css({"background":"url(img/lis4.jpg)","opacity":"0.5"})
});
$(".lis5").hover(function(){
$(".mid").css({"background":"url(img/lis5.jpg)","opacity":"0.5"})
});
$(".lis1").click(function(){
$(".lit1").slideToggle(1000)
$(".mid").css("opacity","1")
});
$(".lis2").click(function(){
$(".lit2").slideToggle(1000)
$(".mid").css("opacity","1")
});
$(".lis3").click(function(){
$(".lit3").slideToggle(1000)
$(".mid").css("opacity","1")
});
$(".lis4").click(function(){
$(".lit4").slideToggle(1000)
$(".mid").css("opacity","1")
});
$(".lis5").click(function(){
$(".lit5").slideToggle(1000)
$(".mid").css("opacity","1")
});
})
</script>