哎,不管能不能结业了,反正我现在能弄到这个就很自我满足了(哈哈就是这么容易满足),还要再接再厉,毕竟我到时肩负着某个重职……
PS:类似这样的十天的课程(虽然我自己没有完全十天都学……)感觉好有用啊,好有干劲,好有动力!!我竟然抛弃了专业作业来做这个,真是着了魔……
and,那个群里有好多大神,感觉到时候可以抱大腿了。(前段时间没太多时间……)
html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<link href="博客客.css" type="text/css" rel="stylesheet">
<!--头像-->
<div class="zuoshangjiao">
<div class="rongqi-touxiang"><img src="头像.jpg" class="touxiang"/><div><p class="name">:P-yoho</p></div>
<div>
</div>
<!--导航栏-->
<div class="ka-mulu1">
<div class="ka-mulu2"><ul>
<li><a href="#"><span>首页</span></a></li>
<li><a href="#"><span>图片</span></a></li>
<li ><a href="#"><span>音乐</a></span>
<li><a href="#>"<span>视频</span></a></li>
<li><a href="#>"<span>关于我</span></a></li>
</ul>
</div>
</div>
<!--正文-->
<div>
<div class="rongqi-zhengwen-tu"><img src="顶图.jpg"/></div>
<div class="rongqi-wenzi"><p class="wenzi">我行过许多地方的桥,看过许多次数的云,喝过许多种类的酒,却只爱过一个正当最好年龄的人。</p></div>
</div>
<body>
</body>
</html>
CSS:
@charset "utf-8";
/* CSS Document */
.zuoshangjiao{
float: left;
width: 1100px;
height: 250px;
background-color: white;
box-shadow: 0px 5px 20px #999;
}
.touxiang{
width: 10rem;
height:10rem;
margin-top: 20px;
border-radius: 50%;
-moz-border-radius:50%;
-webkit-border-radius:50%;
box-shadow: 0 0 0 2px #ececec,0 0 0 3px rgba(0,0,0,0.4);
}
.rongqi-touxiang{
text-align: center;
}
.name{
font-family: "微软雅黑";
font-weight:900;
text-align: center;
}
.ka-mulu1{
float: left;
margin-top:30px;
width: 400px;
height: 360px;
background-color: white;
box-shadow: 0px 5px 20px #999;
}
.ka-mulu2{
padding-top: 5px;
margin-bottom: 20px;
color:#777;
line-height: 60px;
font-size: 28px;
font-weight: 900;
text-align: center;
font-family: "微软雅黑";
}
.rongqi-zhengwen-tu{
float: right;
padding-top: 20px;
padding-left: 10px;
padding-right: 10px;
width: 600px;
height: 425px;
margin:30px 1px;
background-color: white;
box-shadow: 0px 5px 20px #999;
}
.rongqi-wenzi{
float: left;
margin-top: 20px;
padding-bottom: 10px;
width: 400px;
height: 55px;
background-color: white;
box-shadow: 0px 5px 20px #999;
}
.wenzi{
padding-left: 6px;
font-family: "微软雅黑";
font-size: 13px;
line-height: 20px;
letter-spacing: 5px;
text-align: left;
}
效果图:
再ps个:
其实我还做了这个(因为最开始不知道博客到底要怎样做……),然后遇到同样的问题,就……遁了。