2018-8-17 18:13:27

明天周末准备整理一下看看我的博客!!!

说一下思路

1.先搭建框架

　　1.1 大体分成两块div 左右两部分

　　<div class="left"></div>

　　<div class="right"></div>

2.填写大概文字

　　2.1 左边写好文字 各种连接

　　左边有 头像 连接 博客连接

　　写好对应的标签

　　右边就有文章   先写好一个div 剩下的都是复制

　　文章<标题,时间内容>

3.css开始逐渐的调整颜色布局

　　3.1整体写完以后就开始逐步处理一下内容排版了

　　3.2 头像

　　找一个头像

  1. /*头像样式*/
  2. .header-img {
  3.     height: 128px;
  4.     width: 128;
  5.     border: 5px solid white;
  6.     border-radius: 50%;       /*变成圆的*/
  7.     overflow: hidden;            /*溢出隐藏*/
  8.     margin: 0 auto;
  9.     margin-top: 20px;
  10. }
  11.  
  12. .header-img>img{
  13.     max-width: 100%
  14. }

其他的就是用了一些 float  border(边框) margin  padding    其实和android布局貌似都是照葫芦画瓢!下面放上代码

css 代码多看看多练一下就好了

增强自信心!!  越努力越幸运!

2018-8-17 18:20:26

要有大概的框架 div嵌套一个div 前端还是不多难学的!!加油!

今天还是七夕 2333333!

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.      <title>Blog示例</title>
  5.      <meta charset="utf-8">
  6.      <link rel="stylesheet" type="text/css" href="blog.css">
  7.  </head>
  8.  <body>
  9.      <!-- 左边栏开始 -->
  10.  <div class="left">
  11.      <!-- 头像开始 -->
  12.      <div class="header-img">
  13.          <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534508175890&di=ffc300d6b2bb54bd8b0a2e44faf773da&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201508%2F14%2F20150814105909_NPmSw.png">
  14.      </div>
  15.      <!-- 头像结束 -->
  16.  
  17.      <div class="blog-name">朕的后宫</div>
  18.      <div class="blog-info">这条狗很懒什么都没有留下</div>
  19.  
  20.      <!-- 连接区开始 -->
  21.      <div class="blog-links">
  22.          <ul>
  23.              <li><a href="">百度</a></li>
  24.              <li><a href="">淘宝</a></li>
  25.              <li><a href="">京东</a></li>
  26.          </ul>
  27.      </div>
  28.      <!-- 连接区结束 -->
  29.      <!-- 文章分类 开始 -->
  30.      <div class="blog-tags">
  31.          <ul>
  32.              <li><a href="">JS</a></li>
  33.              <li><a href="">CSS</a></li>
  34.              <li><a href="">HTML</a></li>
  35.          </ul>
  36.      </div>
  37.      <!-- 文章分类 结束 -->
  38.  </div>
  39.      <!-- 左边栏结束 -->
  40.  
  41.      <!-- 右边栏开始 -->
  42.  <div class="right">
  43.      <div class="article-list">
  44.          <div class="article">
  45.              <div class="article-title">
  46.                  <h1 class="article-time">海燕</h1>
  47.                  <span class="article-data">2018-8-17 </span>
  48.              </div>
  49.              <div class="article-info">
  50.                      在苍茫的大海上,狂风卷积着乌云,
  51.              </div>
  52.              <div class="article-tag">
  53.                  # HTML
  54.              </div>
  55.          </div>
  56.  
  57.          <div class="article">
  58.              <div class="article-title">
  59.                  <h1 class="article-time">海燕</h1>
  60.                  <span class="article-data">2018-8-17 </span>
  61.              </div>
  62.              <div class="article-info">
  63.                      在苍茫的大海上,狂风卷积着乌云,
  64.              </div>
  65.              <div class="article-tag">
  66.                  # HTML
  67.              </div>
  68.          </div>
  69.  
  70.          <div class="article">
  71.              <div class="article-title">
  72.                  <h1 class="article-time">海燕</h1>
  73.                  <span class="article-data">2018-8-17 </span>
  74.              </div>
  75.              <div class="article-info">
  76.                      在苍茫的大海上,狂风卷积着乌云,
  77.              </div>
  78.              <div class="article-tag">
  79.                  # HTML
  80.              </div>
  81.          </div>
  82.  
  83.          <div class="article">
  84.              <div class="article-title">
  85.                  <h1 class="article-time">海燕</h1>
  86.                  <span class="article-data">2018-8-17 </span>
  87.              </div>
  88.              <div class="article-info">
  89.                      在苍茫的大海上,狂风卷积着乌云,
  90.              </div>
  91.              <div class="article-tag">
  92.                  # HTML
  93.              </div>
  94.          </div>
  95.  
  96.          <div class="article">
  97.              <div class="article-title">
  98.                  <h1 class="article-time">海燕</h1>
  99.                  <span class="article-data">2018-8-17 </span>
  100.              </div>
  101.              <div class="article-info">
  102.                      在苍茫的大海上,狂风卷积着乌云,
  103.              </div>
  104.              <div class="article-tag">
  105.                  # HTML
  106.              </div>
  107.          </div>
  108.      </div>
  109.  </div>
  110.      <!-- 右边栏结束 -->
  111.  </body>
  112.  </html>
  1. /*Blog页面相关样式*/
  2.  
  3. /*公用样式*/
  4.  
  5. *{
  6.     font-family: ".PingFang SC","微软雅黑",
  7.     font-size:14px;
  8.     margin:;
  9.     padding:;
  10. }
  11. /*去掉a标签的下划线*/
  12. a {
  13.     text-decoration: none;
  14. }
  15.  
  16. /*左边栏样式*/
  17. .left {
  18.     width: 20%;
  19.     background-color: rgb(76,77,76);
  20.     height: 100%;
  21.     position: fixed;
  22.     left:;
  23.     top:;
  24. }
  25. /*头像样式*/
  26. .header-img {
  27.     height: 128px;
  28.     width:;
  29.     border: 5px solid white;
  30.     border-radius: 50%;       /*变成圆的*/
  31.     overflow: hidden;            /*溢出隐藏*/
  32.     margin: 0 auto;
  33.     margin-top: 20px;
  34. }
  35.  
  36. .header-img>img{
  37.     max-width: 100%
  38. }
  39.  
  40. /*Blog  名称*/
  41. .blog-name{
  42.     color: white;
  43.     font-size: 24px;
  44.     font-weight: bold;
  45.     text-align: center;
  46.     margin-top:20px;
  47. }
  48.  
  49. /*blog 介绍*/
  50. .blog-info{
  51.     color: white;
  52.     text-align: center;
  53.     border: 2px solid white;
  54.     margin: 5px 15px;
  55. }
  56.  
  57. /*连接组*/
  58. .blog-links,
  59. .blog-tags{
  60.     text-align: center;
  61.     margin-top: 20px;
  62. }
  63. .blog-links a,
  64. .blog-tags a{
  65.     color: #eee;
  66. }
  67.  
  68. .blog-tags a:before {
  69.     content: "#";
  70. }
  71.  
  72. /*右边栏样式*/
  73.  
  74. .right{
  75.     width: 80%;
  76.     background-color: rgb(238,237,237);
  77.     height: 1000px;
  78.     float: right;
  79. }
  80.  
  81. .article-list {
  82.     margin-right: 10%;
  83.     margin-left: 30px;
  84.     margin-right: 10%;
  85. }
  86. .article{
  87.     background-color: white;
  88.     margin-bottom: 15px;
  89. }
  90.  
  91. .article-name{
  92.     display: inline-block;
  93. }
  94.  
  95. .article-title{
  96.     padding: 15px;
  97.     border-left: 3px solid red;
  98. }
  99.  
  100. .article-info{
  101.     padding: 15px;
  102. }
  103.  
  104. .article-tag{
  105.     padding: 15px 0;
  106.     margin: 15px;
  107.     border-top: 1px solid #eeeeee;
  108. }
  109. /*文章发布时间*/
  110. .article-data{
  111.     float:right;
  112. }

8.17 一个博客demo的更多相关文章

  1. 30分钟用 Laravel 实现一个博客

    介绍 Laravel 是一款 MVC架构. 目前最流行的 PHP框架. Laravel的优点在于: 丰富的composer类库支持, 优雅的代码, 未来的主流框架(目前市场占有率最高的框架) Lara ...

  2. 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客？

    前言 OK,我也来造轮子了 博客系统从一开始用WordPress,再到后来用hexo.hugo之类的静态博客生成放github托管,一直在折腾 折腾是为了更好解决问题,最终还是打算自己花时间搞一个好了 ...

  3. 【网站开发】在新浪SAE上搭建一个博客

    概述 在新浪SAE上搭建一个博客 1.访问新浪SAE站点 http://sae.sina.com.cn/ 2.注册新浪SAE 3.选择应用仓库 4.选择WordPress 5.安装WordPress ...

  4. FPGA一个博客学习

    FPGA一个博客学习 http://bbs.ednchina.com/BLOG_PERSONALCAT_100185_2001619.HTM

  5. Django完整的开发一个博客系统

    今天花了一些时间搭了一个博客系统,虽然并没有相关于界面的美化,但是发布是没问题的. 开发环境 操作系统:windows 7 64位 Django: 1.96 Python:2.7.11 IDE: Py ...

  6. 运用BT在centos下搭建一个博客论坛

    在日常的工作和学习中,我们都很希望有自己的工作站,就是自己的服务器,自己给自己搭建一个博客或者是论坛,用于自己来写博客和搭建网站论坛.现在我们就用一个简单的方法来教大家如何30分钟内部署一个博客网站. ...

  7. ASP.NET写的一个博客系统

    由于域名闲置,正好也有服务器空间,短期内开发了一个博客系统. 大家都来谈  http://www.djdlt.com 目前是开放注册,免费发布.(限于空间有限,图片还是尽量少传些) 网站架构: ASP ...

  8. 使用Hexo快速搭建一个博客,并部署到github

    本文旨在记录一下我在通过hexo搭建一个博客,并将其部署在github上面的过程,也供我自己在以后的使用过程中能够快速学习和参考.需要看更详细或者官方文档的可以点击Hexo官方文档进行查看. 安装前提 ...

  9. Docker学习总结（6）——通过 Docker 化一个博客网站来开启我们的 Docker 之旅

    通过 Docker 化一个博客网站来开启我们的 Docker 之旅 这篇文章包含 Docker 的基本概念,以及如何通过创建一个定制的 Dockerfile 来 Docker 化Dockerize一个 ...

随机推荐

  1. 教你下载BarTender 2016

    BarTender是全球领先标签.条形码.RFID和证卡设计打印软件,功能强大,操作简单,具有很强的灵活性.目前,BarTender软件已更新至最新版BarTender 2016.BarTender ...

  2. Android反编译工具介绍与简单实用方法

    Android反编译的目的无非就是为了看到APK的xml.资源和代码: 得到代码的方式:直接解压APK文件 --> 得到classes.dex文件 --> 使用 dex2jar class ...

  3. Aspose------导出Excel

    代码: /// <summary> /// 导出Excel /// </summary> /// <typeparam name="T">泛型类 ...

  4. Java实现文件批量重命名

    Windows操作系统可以实现重命名文件操作,却不能实现批量重命名.本实例实现了批量重命名功能,可以将一个文件夹内同一类型的文件按照一定的规则批量重命名.用户可以给出重命名模板,程序可以根据模板对相应 ...

  5. 8 -- 深入使用Spring -- 0...

    要点梗概: 利用后处理器扩展Spring容器 Bean后处理器和容器后处理器 Spring3.0 的“零配置” 支持 Spring的资源访问策略 在ApplicationContext中使用资源 AO ...

  6. python与VScode

    用VScode写python是非常方便的.vscode是一个功能非常强大的编辑器,下面介绍大致的使用方法: 下载安装python,配置环境变量. 下载安装VScode(vscode会自动连接pytho ...

  7. Lua协程-测试3

    print("Lua 协程测试3") -- 实现消费者-生产者关系(生产一个就消费一个) count = -- 生产总数 -- 生产者 local newProductorCo = ...

  8. 【代码审计】CLTPHP_v5.5.3后台任意文件下载漏洞分析

      0x00 环境准备 CLTPHP官网:http://www.cltphp.com 网站源码版本:CLTPHP内容管理系统5.5.3版本 程序源码下载:https://gitee.com/chich ...

  9. Python爬虫学习笔记-2.Requests库

    Requests是Python的一个优雅而简单的HTTP库,它比Pyhton内置的urllib库,更加强大. 0X01 基本使用 安装 Requests,只要在你的终端中运行这个简单命令即可: pip ...

  10. 学习下新塘M0芯片的下载方法

    编程方式多种多样,解释这几种方式的原理,方便做后续的回答: 一.脱机 脱机的意思就是脱离PC机,有很多芯片必须连接PC才能烧录,比如某些FPGA芯片.MCU芯片.NAND Flash芯片等.脱机和在线 ...