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 头像

　　找一个头像

/*头像样式*/

.header-img {

    height: 128px;

    width: 128;

    border: 5px solid white;

    border-radius: 50%;       /*变成圆的*/

    overflow: hidden;            /*溢出隐藏*/

    margin: 0 auto;

    margin-top: 20px;

}

.header-img>img{

    max-width: 100%

}

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

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

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

2018-8-17 18:20:26

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

今天还是七夕 2333333!

 <!DOCTYPE html>

 <html>

 <head>

     <title>Blog示例</title>

     <meta charset="utf-8">

     <link rel="stylesheet" type="text/css" href="blog.css">

 </head>

 <body>

     <!-- 左边栏开始 -->

 <div class="left">

     <!-- 头像开始 -->

     <div class="header-img">

         <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">

     </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-time">海燕</h1>

                 <span class="article-data">2018-8-17 </span>

             </div>

             <div class="article-info">

                     在苍茫的大海上,狂风卷积着乌云,

             </div>

             <div class="article-tag">

                 # HTML

             </div>

         </div>

         <div class="article">

             <div class="article-title">

                 <h1 class="article-time">海燕</h1>

                 <span class="article-data">2018-8-17 </span>

             </div>

             <div class="article-info">

                     在苍茫的大海上,狂风卷积着乌云,

             </div>

             <div class="article-tag">

                 # HTML

             </div>

         </div>

         <div class="article">

             <div class="article-title">

                 <h1 class="article-time">海燕</h1>

                 <span class="article-data">2018-8-17 </span>

             </div>

             <div class="article-info">

                     在苍茫的大海上,狂风卷积着乌云,

             </div>

             <div class="article-tag">

                 # HTML

             </div>

         </div>

         <div class="article">

             <div class="article-title">

                 <h1 class="article-time">海燕</h1>

                 <span class="article-data">2018-8-17 </span>

             </div>

             <div class="article-info">

                     在苍茫的大海上,狂风卷积着乌云,

             </div>

             <div class="article-tag">

                 # HTML

             </div>

         </div>

         <div class="article">

             <div class="article-title">

                 <h1 class="article-time">海燕</h1>

                 <span class="article-data">2018-8-17 </span>

             </div>

             <div class="article-info">

                     在苍茫的大海上,狂风卷积着乌云,

             </div>

             <div class="article-tag">

                 # HTML

             </div>

         </div>

     </div>

 </div>

     <!-- 右边栏结束 -->

 </body>

 </html>
/*Blog页面相关样式*/

/*公用样式*/

*{

    font-family: ".PingFang SC","微软雅黑",

    font-size:14px;

    margin:;

    padding:;

}

/*去掉a标签的下划线*/

a {

    text-decoration: none;

}

/*左边栏样式*/

.left {

    width: 20%;

    background-color: rgb(76,77,76);

    height: 100%;

    position: fixed;

    left:;

    top:;

}

/*头像样式*/

.header-img {

    height: 128px;

    width:;

    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:20px;

}

/*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-right: 10%;

    margin-left: 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-data{

    float:right;

}

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. QT编译错误：Project ERROR: This example requires Qt to be configured with -opengl desktop

    学习QT场景视图,对一个Boxes的例子比较感兴趣,于是去编译学习,结果编译不能通过(使用的是QT5.12): Project ERROR: This example requires Qt to b ...

  2. redis配置文件相关

    1. 默认情况下,redis不是在后台运行的,如果需要在后台运行,把该项的值更改为yes daemonize no 2. 当Redis在后台运行时,Redis默认会把pid写入/var/run/red ...

  3. C# FileSystemWatcher 在监控文件夹和文件时的用法

    概述 最近学习FileSystemWatcher的用法,它主要是监控一个文件夹,当文件夹内的文件要是有更改就要记录下来,我就整理下我对FileSystemWatcher 的理解和用法. FileSys ...

  4. Java实现循环体的过滤器

    编写程序,利用continue语句实现循环体过滤器,过滤“老鹰”字符串,并做相应的处理,但是放弃continue语句之后的所有代码.即若遇到“老鹰”字符串则进行特定处理,然后使用continue语句跳 ...

  5. Spring @Scheduled定时任务动态修改cron参数

    在定时任务类上增加@EnableScheduling注解,并实现SchedulingConfigurer接口.(注意低版本无效) 设置一个静态变量cron,用于存放任务执行周期参数. 另辟一线程,用于 ...

  6. ios开发之--调试方法

    概述 基本操作 全局断点 条件断点 开启僵尸对象 LLDB命令 概述 在开发项目的工程中,肯定会遇到各种各样的bug,且大多数的bug都和自己有关:那么在和bug斗智斗勇的过程中,如果能快速准确的一击 ...

  7. iOS 定时器的比较

    然而,在iOS中有很多方法完成以上的任务,到底有多少种方法呢?经过查阅资料,大概有三种方法:NSTimer.CADisplayLink.GCD.接下来我就一一介绍它们的用法. 一.NSTimer 1. ...

  8. 【GIS】使用GDAL为Leaflet切图

    一.参考资料 https://commenthol.github.io/leaflet-rastercoords/ https://github.com/commenthol/gdal2tiles-l ...

  9. Nginx 访问控制

    根据 IP 限制访问: location /admin/ { allow 192.168.1.1; allow 192.168.1.2; deny all; } 根据正则限制访问: location ...

  10. Linux下chkconfig命令详解转载

    chkconfig命令主要用来更新(启动或停止)和查询系统服务的运行级信息.谨记chkconfig不是立即自动禁止或激活一个服务,它只是简单的改变了符号连接. 使用语法:chkconfig [--ad ...