博客园个人首页搭建
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="blog样式.css">
</head>
<body>
<div class="blog-left">
<div class="blog-avatar">
<img src="xiaomai.png" alt="">
</div>
<div class="blog-title">
<p>tiny的个人博客</p>
</div>
<div class="blog-info">
<p>这个人什么都没留下!</p>
</div>
<div class="blog-link">
<ul>
<li><a href="">关于我</a></li>
<li><a href="">微博</a></li>
<li><a href="">微信公众号</a></li>
</ul>
</div>
<div class="blog-tag">
<ul>
<li><a href="">#Python</a></li>
<li><a href="">#Java</a></li>
<li><a href="">#Golang</a></li>
</ul>
</div>
</div>
<div class="blog-right">
<div class="article-list">
<div class="article-title">
<span class="title">HTML概述</span>
<span class="date">2019/11/15</span>
</div>
<div class="article-content">
HTML是超文本标记语言...
</div>
<div class="article-bottom">
#HTML
</div>
</div>
<div class="article-list">
<div class="article-title">
<span class="title">HTML概述</span>
<span class="date">2019/11/15</span>
</div>
<div class="article-content">
HTML是超文本标记语言...
</div>
<div class="article-bottom">
#HTML
</div>
</div>
<div class="article-list">
<div class="article-title">
<span class="title">HTML概述</span>
<span class="date">2019/11/15</span>
</div>
<div class="article-content">
HTML是超文本标记语言...
</div>
<div class="article-bottom">
#HTML
</div>
</div>
<div class="article-list">
<div class="article-title">
<span class="title">HTML概述</span>
<span class="date">2019/11/15</span>
</div>
<div class="article-content">
HTML是超文本标记语言...
</div>
<div class="article-bottom">
#HTML
</div>
</div>
<div class="article-list">
<div class="article-title">
<span class="title">HTML概述</span>
<span class="date">2019/11/15</span>
</div>
<div class="article-content">
HTML是超文本标记语言...
</div>
<div class="article-bottom">
#HTML
</div>
</div>
<div class="article-list">
<div class="article-title">
<span class="title">HTML概述</span>
<span class="date">2019/11/15</span>
</div>
<div class="article-content">
HTML是超文本标记语言...
</div>
<div class="article-bottom">
#HTML
</div>
</div>
</div>
</body>
</html>
/*通用样式*/
body {
margin: 0;
background: #eeeeee;
}
a {
text-decoration: none;
}
ul {
list-style-type: none;
padding-left: 0;
}
/*左侧样式*/
.blog-left {
float: left;
20%;
height: 100%;
background: #4e4e4e;
position: fixed;
}
.blog-avatar {
200px;
height: 200px;
border: 5px solid white;
border-radius: 50%;
overflow: hidden;
margin: 20px auto;
}
.blog-title, .blog-info{
font-size: 14px;
text-align: center;
}
.blog-link a, .blog-tag a {
text-align: center;
color: darkgray;
}
.blog-link a:hover, .blog-tag a:hover {
color: white;
}
.blog-link ul,.blog-tag ul {
text-align: center;
margin: 60px 0;
}
/*右侧边框*/
.blog-right {
float: right;
80%;
height: 1000px;
}
.article-list {
background: white;
margin:10px 20px;
box-shadow: 5px 5px 5px rgba(129,70,34,0.8);
}
.article-title {
border-left: 5px red solid;
}
.article-title span.title {
font-size: 35px;
margin-left: 5px;
}
.article-title span.date {
float: right;
font-size: 15px;
margin: 10px;
}
.article-content {
/*text-indent: 10px;*/
margin: 10px;
}
.article-bottom {
border-top: 1px solid;
/*text-indent: 10px;*/
padding: 10px;
}
1.编写代码，将当前日期按“2017-12-27 11:11 星期三”格式输出
var d = new Date();
function get_date(d) {
day = d.getDate();
month = d.getMonth() + 1;
year = d.getFullYear();
hour = d.getHours();
minute = d.getMinutes();
switch (d.getDay()) {
case 1:
return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ' ' + "星期一";
case 2:
return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ' ' + "星期二";
case 3:
return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ' ' + "星期三";
case 4:
return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ' ' + "星期四";
case 5:
return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ' ' + "星期五";
case 6:
return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ' ' + "星期六";
case 7:
return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ' ' + "星期日";
}
}
get_date(d);