手扎20190521——bolg示例

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Blog页面示例</title><link rel="stylesheet" href="blog.css">
</head>
<body><!-- 左边栏 开始-->
<div class="left"><!--头像 开始--><div class="header-img"><img src="https://q1mi.github.io/Blog/asset/img/head_img.jpg" alt=""></div><!--头像结束--><div class="blog-name">小强的狗窝</div><div class="blog-info">这条狗很懒,什么都没有留下.</div><!-- 连接区 开始--><div class="blog-links"><ul><li><a href="">关于我</a></li><li><a href="">关于你</a></li><li><a href="">关于他</a></li></ul></div><!--连接区 结束--><!-- 文章分类 开始--><div class="blog-tags"><ul><li><a href="">JS</a></li><li><a href="">CSS</a></li><li><a href="">HTML</a></li></ul></div><!--文章分类 结束-->
</div>
<!-- 左边栏 结束--><!--右边栏 开始-->
<div class="right"><div class="article-list"><div class="article"><div class="article-title"><h1 class="article-name">海燕</h1><span class="article-date">2018-03-07</span></div><div class="article-info">在苍茫的大海上,狂风卷积着乌云.在乌云和大海之间,海燕像黑色的闪电,在高傲的飞翔.</div><div class="article-tag">#HTML #CSS</div></div><div class="article"><div class="article-title"><h1 class="article-name">海燕</h1><span class="article-date">2018-03-07</span></div><div class="article-info">在苍茫的大海上,狂风卷积着乌云.在乌云和大海之间,海燕像黑色的闪电,在高傲的飞翔.</div><div class="article-tag">#HTML #CSS</div></div><div class="article"><div class="article-title"><h1 class="article-name">海燕</h1><span class="article-date">2018-03-07</span></div><div class="article-info">在苍茫的大海上,狂风卷积着乌云.在乌云和大海之间,海燕像黑色的闪电,在高傲的飞翔.</div><div class="article-tag">#HTML #CSS</div></div><div class="article"><div class="article-title"><h1 class="article-name">海燕</h1><span class="article-date">2018-03-07</span></div><div class="article-info">在苍茫的大海上,狂风卷积着乌云.在乌云和大海之间,海燕像黑色的闪电,在高傲的飞翔.</div><div class="article-tag">#HTML #CSS</div></div><div class="article"><div class="article-title"><h1 class="article-name">海燕</h1><span class="article-date">2018-03-07</span></div><div class="article-info">在苍茫的大海上,狂风卷积着乌云.在乌云和大海之间,海燕像黑色的闪电,在高傲的飞翔.</div><div class="article-tag">#HTML #CSS</div></div></div>
</div>
<!--右边栏 结束-->
</body>
</html>

/* Blog页面相关样式*//*公用样式*/* {font-family: ".PingFang SC", "Microsoft YaHei";font-size: 14px;margin: 0;padding: 0;
}/*去掉a标签的下划线*/
a {text-decoration: none;
}/*左边栏 样式*/
.left {width: 20%;background-color: rgb(76,77,76);height: 100%;position: fixed;left: 0;top: 0;}
/*头像样式*/
.header-img {height: 128px;width: 128px;border: 5px solid white;border-radius: 50%;overflow: hidden;margin: 0 auto;margin-top: 20px;
}.header-img>img {max-width: 100%;
}/*Blog 名称*/
.blog-name {color: white;font-size: 24px;font-weight: bold;text-align: center;margin-top: 15px;
}/*Blog介绍*/
.blog-info {color: white;text-align: center;border: 2px solid white;margin: 5px 15px;
}/*连接组和标签组*/
.blog-links,
.blog-tags {text-align: center;margin-top: 20px;
}.blog-links a,
.blog-tags a {color: #eee;
}.blog-tags a:before {content: "#";
}/*右边栏 样式*/
.right {width: 80%;background-color: rgb(238,237,237);height: 1000px;float: right;
}.article-list {margin-left: 30px;margin-top: 30px;margin-right: 10%;
}
.article {background-color: white;margin-bottom: 15px;
}.article-name {display: inline-block;
}.article-title {padding: 15px;border-left: 3px solid red;
}.article-info {padding: 15px;
}.article-tag {padding: 15px 0;margin: 15px;border-top: 1px solid #eeeeee;
}
/*文章发布时间*/
.article-date {float: right;
}

手扎20190521——bolg示例相关推荐

mnist手写数字识别python_Python tensorflow实现mnist手写数字识别示例【非卷积与卷积实现】...
本文实例讲述了Python tensorflow实现mnist手写数字识别.分享给大家供大家参考,具体如下: 非卷积实现 import tensorflow as tf from tensorflow ...
Kate手扎对《又见一帘幽梦》的精彩分析
<又见一帘幽梦>与原著<一帘幽梦>的比较,<又见>其实是比较完整,而且合理的作品,很多人物上的个性,其实<又见>是处理的比较完善,而编剧上的对白来说,我 ...
前端临床手扎——简单易用的fetch
如题,es6 新增的fetch真的简单易用,感觉现在这一个支持完全可行. 虽然兼容性问题还是存在,但是打上polyfill后就基本解决了. Browser SupportChrome Firefox ...
学习手扎20190313——dick操作（增删改查)
dick # 数据类型划分:可变数据类型,不可变数据类型 # 不可变数据类型:元祖 bool int str 可哈希 # 可变数据类型:list dick set 不可哈希# 增删改查dic1 = { ...
代号记忆之数字和英文总结
0 鸭蛋铃铛 1 蜡烛树衣服 2 鸭子眼镜蛇 3 耳朵 (形状) 山 4 红旗丝寺石 (别和10 搞混) 5 钩子(形状) 老虎 6 口哨袖子 xiu 6谐音 7 拐杖镰刀红旗不能 ...
java文字手写识别_【手写文字识别】-JavaAPI示例代码
手写文字识别-JavaAPI示例代码不知不觉手写文字识别百度已经开始邀测了.需要的小伙伴去申请了哦.申请方式加入文字识别群找PM.或者工单提交申请.都要说明自己的APPID哦. 接口地址:https ...
手写识别底层原理_LinkedList底层原理和手写单链表
2.1 单链表技能点 · 认识单链表 o 特点数据元素的存储对应的是不连续的存储空间,每个存储结点对应一个需要存储的数据元素. 每个结点是由数据域和指针域组成. 元素之间的逻辑关系通过存储节点之间的 ...
扎的多音字组词有哪些
"扎" 字共有 3 个读音: [zhā] [zhǎ] [zhá] 读音为[zhā] 扎的多音字怎么组词汉字扎拼音 zhā 解释缠束.綑绑.同「紮」.书信.函件.同「札 ...
【瑞萨RA4系列】使用TinyMaix识别手写数字
文章目录一.TinyMaix简介 1.1 TinyMaix开源项目 1.2 下载TinyMaix源码二.TinyMaix移植 2.1 创建TinyMaix移植项目 2.2 添加TinyMaix源码 ...

手扎20190521——bolg示例

手扎20190521——bolg示例相关推荐

最新文章

热门文章