html、css/个人主页

<!-- edu_sx_1.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>张裕忠自我简介</title>
<style type="text/css">

*{
margin: 0;
padding: 0;
}

.one{
margin: 0 auto;
margin-top: 100px;
margin-bottom: 100px;
width: 800px;
height: 800px;
border:2px solid #00FFFF;
box-shadow: 0px 0px 10px 0px;
background: #00aaff;
border-radius: 20px 20px 20px 20px;
}

.text{
margin: 50px 0px 0px 50px;
float: left;
display: inline-block;
}

.ph {
margin: 50px 0px 0px 50px;
float: right;
display: inline-block;
}

img {
height: 320px;
width: 240px;
padding-right: 20px;
}

.line {
margin: 10px;
border: 0;
height: 2px;
width: 380px;
background-color: #aaffff;
}

.ul1{
margin: 0 5px 5px 0;
}

li {
margin-left:30px ;
list-style: none;
line-height: 40px;
height: 40px;
font-weight: 700;
}
p {
text-indent: 2em;
font-family: "宋体";
font-size: 24px;
font-weight: 700;
text-align: center;
}

.dire {
padding-left: 50px;
padding-right: 50px;
font-family: "microsoft yahei";
display: inline-block;
width: 100px;
font-size: 20px;
}

.cont {
font-family: "仿宋";
font-size: 20px;
}

.p1{
margin-bottom: 10px;
padding-top: 10px;
display: inline-block;
text-indent: 4em;
}

.line1 {
margin: 10px;
border: 0;
height: 2px;
width: 780px;
clear: both;
background-color: #aaffff;
}

.text1{
display: inline-block;
padding: 0 30px 0 30px;
font-size: 20px;
color: #000000;
font-family: "仿宋";
text-align: left;

}

/*My skills*/
.circle_one{
width: 150px;
height: 150px;
padding-left: 40px;
float: left;
}
.python{
text-indent: 2em;
font-family: "仿宋";
font-size: 24px;
font-weight: 800;
padding-left: 40px;
}

.circle_two{
width: 150px;
height: 150px;
padding-left: 40px;
float: left;
}
.C{
text-indent: 2em;
font-family: "仿宋";
font-size: 24px;
font-weight: 800;
padding-left: 40px;
}

.circle_three{
width: 150px;
height: 150px;
padding-left: 40px;
float: left;
}
.Java{
text-indent: 2em;
font-family: "仿宋";
font-size: 24px;
font-weight: 800;
padding-left: 40px;
}

.circle_four{
width: 150px;
height: 150px;
padding-left: 40px;
float: left;
}
.ht{
text-indent: 2em;
font-family: "仿宋";
font-size: 24px;
font-weight: 800;
padding-left: 40px;
}

/*circle1*/
.circle1 {
margin: 0 auto;
width: 120px;
height: 120px;
position: relative;
border-radius: 50%;
background: #00aa00;
}

.clip1_left,.clip1_right{
width:120px;
height:120px;
position: absolute;
top: 0px;left: 0px;
}
.circle1_left, .circle1_right{
width:120px;
height:120px;
position: absolute;
border-radius: 50%;
top: 0px;left: 0px;
background: #aaaaff;
}
/*出于展示用的改变背景色*/
/*.circle_left{
background: green;
}
.circle_right{
background: lightblue;
}*/
.circle1_right,.clip1_right {
clip:rect(0,auto,auto,60px);
}
.circle1_left , .clip1_left{
clip:rect(0,60px,auto,0);
}

/*
*当top和left取值为auto时，相当于0
*当bottom和right取值为auto时，相当于100%
*/
.mask1 {
width: 90px;
height: 90px;
border-radius: 50%;
left: 15px;
top: 15px;
background: #FFF;
position: absolute;
text-align: center;
line-height: 90px;
font-size: 16px;
}

/*circle2*/
.circle2 {
margin: 0 auto;
width: 120px;
height: 120px;
position: relative;
border-radius: 50%;
background: #00aa00;
}

.clip2_left,.clip2_right{
width:120px;
height:120px;
position: absolute;
top: 0px;left: 0px;
}
.circle2_left, .circle2_right{
width:120px;
height:120px;
position: absolute;
border-radius: 50%;
top: 0px;left: 0px;
background: #aaaaff;
}
/*出于展示用的改变背景色*/
/*.circle_left{
background: green;
}
.circle_right{
background: lightblue;
}*/
.circle2_right,.clip2_right {
clip:rect(0,auto,auto,60px);
}
.circle2_left , .clip2_left{
clip:rect(0,60px,auto,0);
}

/*
*当top和left取值为auto时，相当于0
*当bottom和right取值为auto时，相当于100%
*/
.mask2 {
width: 90px;
height: 90px;
border-radius: 50%;
left: 15px;
top: 15px;
background: #FFF;
position: absolute;
text-align: center;
line-height: 90px;
font-size: 16px;
}

/*circle3*/
.circle3 {
margin: 0 auto;
width: 120px;
height: 120px;
position: relative;
border-radius: 50%;
background: #00aa00;
}

.clip3_left,.clip3_right{
width:120px;
height:120px;
position: absolute;
top: 0px;left: 0px;
}
.circle3_left, .circle3_right{
width:120px;
height:120px;
position: absolute;
border-radius: 50%;
top: 0px;left: 0px;
background: #aaaaff;
}
/*出于展示用的改变背景色*/
/*.circle_left{
background: green;
}
.circle_right{
background: lightblue;
}*/
.circle3_right,.clip3_right {
clip:rect(0,auto,auto,60px);
}
.circle3_left , .clip3_left{
clip:rect(0,60px,auto,0);
}

/*
*当top和left取值为auto时，相当于0
*当bottom和right取值为auto时，相当于100%
*/
.mask3 {
width: 90px;
height: 90px;
border-radius: 50%;
left: 15px;
top: 15px;
background: #FFF;
position: absolute;
text-align: center;
line-height: 90px;
font-size: 16px;
}

/*circle3*/
.circle4 {
margin: 0 auto;
width: 120px;
height: 120px;
position: relative;
border-radius: 50%;
background: #00aa00;
}

.clip4_left,.clip4_right{
width:120px;
height:120px;
position: absolute;
top: 0px;left: 0px;
}
.circle4_left, .circle4_right{
width:120px;
height:120px;
position: absolute;
border-radius: 50%;
top: 0px;left: 0px;
background: #aaaaff;
}
/*出于展示用的改变背景色*/
/*.circle_left{
background: green;
}
.circle_right{
background: lightblue;
}*/
.circle4_right,.clip4_right {
clip:rect(0,auto,auto,60px);
}
.circle4_left , .clip4_left{
clip:rect(0,60px,auto,0);
}

/*
*当top和left取值为auto时，相当于0
*当bottom和right取值为auto时，相当于100%
*/
.mask4 {
width: 90px;
height: 90px;
border-radius: 50%;
left: 15px;
top: 15px;
background: #FFF;
position: absolute;
text-align: center;
line-height: 90px;
font-size: 16px;
}
</style>
</head>
<body>
<div class="one">
<div class="text">
<p>个人信息</p >
<div class="line"></div>

<ul class="ul1">
<li><span class="dire">姓名</span><span class="cont">张裕忠</span></li>
<li><span class="dire">性别</span><span class="cont">男</span></li>
<li><span class="dire">年龄</span><span class="cont">22</span></li>
<li><span class="dire">班级</span><span class="cont">网络工程一班</span></li>
<li><span class="dire">学号</span><span class="cont">2017742010</span></li>
<li><span class="dire">爱好</span><span class="cont">听歌、看电影</span></li>
</ul>
</div>

<div class="ph">
<img src="zhengjianzhao.jpg">
</div>

<div class="line1"></div>
<p class="p1">个人评价</p>

<div class="line1"></div>
<p class="text1">我的性格特点是：性格沉稳，考虑问题全面、仔细，做事有自己明确的想法和计划，
适应环境快。热爱编程开发，掌握了几种编程开发语言：C、Java、python以及前端开发。我的座右铭是：
人因梦想而伟大，机遇永远属于有准备、并付诸行动且坚持到底的人</p >

<div class="line1"></div>
<p class="p1">My skills</p>
<div class="line1"></div>

<!--My skills-->
<div class="circle_one">

<!--python-->
<div class="circle1">
<!--左半边圆-->
<div class="circle1_left">
<div class="clip1_left">

</div>
</div>
<!--右半边圆-->
<div class="circle1_right">
<div class="clip1_right"></div>
</div>
<div class="mask1">
<span>60</span>
</div>
</div>
<span class="python">python</span>
</div>

<!--C语言-->
<div class="circle_two">
<div class="circle2">
<!--左半边圆-->
<div class="circle2_left">
<div class="clip2_left">

</div>
</div>
<!--右半边圆-->
<div class="circle2_right">
<div class="clip2_right"></div>
</div>
<div class="mask2">
<span>45</span>
</div>
</div>
<span class="C">C语言</span>
</div>

<!--Java-->
<div class="circle_three">
<div class="circle3">
<!--左半边圆-->
<div class="circle3_left">
<div class="clip3_left">

</div>
</div>
<!--右半边圆-->
<div class="circle3_right">
<div class="clip3_right"></div>
</div>
<div class="mask3">
<span>30</span>
</div>
</div>
<span class="Java">Java</span>
</div>

<!--html/css-->
<div class="circle_four">
<div class="circle4">
<!--左半边圆-->
<div class="circle4_left">
<div class="clip4_left">

</div>
</div>
<!--右半边圆-->
<div class="circle4_right">
<div class="clip4_right"></div>
</div>
<div class="mask4">
<span>50</span>
</div>
</div>
<span class="ht">html/css</span>
</div>
</div>

<!--circle1-->
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(function(){ if( $('.mask1 span').text() <= 50 ){
$('.circle1_right').css('transform','rotate('+($('.mask1 span').text()*3.6)+'deg)'); }
else{ $('.circle1_right').css({ 'transform':'rotate(0deg)', "background":"#00aa00" });
$('.circle1_left').css('transform','rotate('+(($('.mask1 span').text()-50)*3.6)+'deg)'); } })
</script>

<!--circle2-->
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(function(){ if( $('.mask2 span').text() <= 50 ){
$('.circle2_right').css('transform','rotate('+($('.mask2 span').text()*3.6)+'deg)'); }
else{ $('.circle2_right').css({ 'transform':'rotate(0deg)', "background":"#00aa00" });
$('.circle2_left').css('transform','rotate('+(($('.mask2 span').text()-50)*3.6)+'deg)'); } })
</script>

<!--circle3-->
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(function(){ if( $('.mask3 span').text() <= 50 ){
$('.circle3_right').css('transform','rotate('+($('.mask3 span').text()*3.6)+'deg)'); }
else{ $('.circle3_right').css({ 'transform':'rotate(0deg)', "background":"#00aa00" });
$('.circle3_left').css('transform','rotate('+(($('.mask3 span').text()-50)*3.6)+'deg)'); } })
</script>

<!--circle4-->
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(function(){ if( $('.mask4 span').text() <= 50 ){
$('.circle4_right').css('transform','rotate('+($('.mask4 span').text()*3.6)+'deg)'); }
else{ $('.circle4_right').css({ 'transform':'rotate(0deg)', "background":"#00aa00" });
$('.circle4_left').css('transform','rotate('+(($('.mask4 span').text()-50)*3.6)+'deg)'); } })
</script>
</body>
</html>

posted @ 2020-04-07 23:03  as_scheduled  阅读(788)  评论(0)  编辑  收藏  举报