项目预览

代码

html:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  7.     <link rel="stylesheet" type="text/css" href="myblog.css">
  9. </head>
  10. <body>
  12. <div class="blog-left">
  13.     <div class="blog-avatar">
  14.         <img alt="avatar-img" class="avatar-img" src="mlq.png">
  15.     </div>
  16.     <div class="blog-title">passion</div>
  17.     <div class="blog-info">这个人很帅什么都没有留下</div>
  18.     <div class="blog-link">
  19.         <ul class="blog-link-title">
  20.             <li>关于我</li>
  21.             <li>微博号</li>
  22.             <li>公众号</li>
  23.         </ul>
  24.     </div>
  25.     <div class="blog-tag">
  26.         <ul class="blog-tag-title">
  27.             <li>#python</li>
  28.             <li>#golang</li>
  29.             <li>#javascript</li>
  30.         </ul>
  31.     </div>
  32. </div>
  34. <div class="blog-right">
  35.     <div class="blog-list ">
  36.         <div class="blog-box clearfix">  <!-- 防止塌陷 用伪类选择器（:after） 创造的空文本填充盒子-->
  37.             <span class="blog-box-title">论发财之道</span>
  38.             <span class="blog-box-time">2022-12-1</span>
  39.         </div>
  40.         <div class="blog-info">
  41.             <span class="blog-info-text">身体好、吃苦耐劳、坚韧不拔、软饭硬吃、你还在等什么 赶紧找xxx报名</span>
  42.         </div>
  43.         <div class="blog-tag-list">
  44.             <span class="blog-tag-content">#重金求子</span>
  45.             <span class="blog-tag-content">#全国可飞</span>
  46.         </div>
  47.     </div>
  48.     <!-- blog-list 可以多复制几个 -->
  50. </div>
  51. </body>
  52. </html>

css:

  1. /* background style */
  2. body{
  3.     background-color: gray;
  4.     margin: 0;
  5.     height : 1200px;
  6.     font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Noto Sans CJK SC,WenQuanYi Micro Hei,Arial,sans-serif;
  7.     /* font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。*/
  9. }
  11. /* left div box style */
  12. .blog-left{
  13.     float: left;
  14.     width: 25%;
  15.     height: 100%;
  16.     background-color:darksalmon;
  17.     position: fixed;
  18. }
  20. /* right div box style */
  21. .blog-right{
  22.     float: right;
  23.     width: 75%;
  24.     height: 100%;
  25. }
  27. /* general style */
  28. a{
  29.     text-decoration: none; /* remove the a tag underline */
  31. }
  32. ul{
  33.     list-style-type: none; /* remove the ul tag default style */
  34.     padding: 0;  /* ul tag default padding-left=40, remove it  */
  36. }
  38. /*avatar style */
  39. .blog-left .blog-avatar{
  40.     width: 100px;
  41.     height: 100px;
  42.     border: 8px outset white; /* border style is outset, don't forget set */
  43.     border-radius: 50% ; /* this property will Controls the border of the image to be rounded */
  44.     margin: 20px auto;  /* set the circle in div box middle */
  45.     overflow: hidden;  /* Resolving image overflows problem, set the img in the circle */
  46. }
  47. /* solved overflow problem !!!! */
  48. .clearfix:after {
  49.             content: '';  /* 填充空字符串 不会触发浏览器优先选择文本的机制*/
  50.             display: block;   /* 设置成块级标签 使其可以填充一整行 */
  51.             clear: both;   /* 当其左右两端有浮空元素时 就继续往下找到一个没有浮空元素的位置 作为一个块进行填充*/
  52.         }
  54. .avatar-img{
  55.     max-height: 100%; /* img is in the div box, set the max height=100% will cramming the div box  */
  56. }
  58. .blog-left .blog-title{
  59.     margin-top:20px;
  60.     margin-bottom:20px;
  61.     text-align: center; /* set the position of the text in the div tag */
  62.     font-weight: 900;  /* set the font of the text */
  63.     font-size: 2em;
  64.     color: #ff154c;
  65. }
  66. .blog-left .blog-link-title{
  67.     margin: 60px auto;
  68. }
  70. .blog-left .blog-link-title li{
  71.     margin: 10px auto;
  72.     text-align: center;
  73. }
  75. .blog-left .blog-tag-title li{
  76.     margin: 10px auto;
  77.     text-align: center;
  78. }
  79. .blog-left div.blog-info{
  80.     margin: 10px auto;
  81.     text-align: center;
  82. }
  84. .blog-right .blog-list{
  85.     background-color: gray;
  86.     width : auto;
  87.     height : 100px;
  88.     margin : 40px 40px;
  89.     border:5px solid coral;
  90.     border-radius: 10px 10px 10px 10px;
  91.     box-shadow: 10px 10px 10px rgba(255,127,80,0.8)  /* box-shadow style */;
  92.     font-size: 18px;
  94. }
  96. .blog-right :hover{
  97.     background-color: lightcoral;
  98. }
  100. .blog-right .blog-box span.blog-box-title {
  101.     float: left;
  102.     font-weight: 700;
  103.     font-size: 20px;
  105. }
  106. .blog-right .blog-box span.blog-box-time {
  107.     float: right;
  108. }
  110. .blog-right .blog-info {
  111.     margin: 10px 10px;
  113. }
  114. .blog-right .blog-tag-list {
  115.     margin: 10px 10px;
  116. }

简易博客页面小项目 html css的更多相关文章

  1. 12月2日内容总结——边框属性，display属性，css盒子模型，浮动、溢出、定位、z-index属性和建议博客页面搭建

    目录 一.边框 边框简介 border-style--边框样式 border-width--边框宽度 border-color--边框颜色 二.display属性 三.CSS盒子模型 概念 margi ...

  2. 简易博客[ html + css ] 练习

    1. 前言 通过使用 html + css 编写一个简易的博客作为入门练习 2. 代码及实现 2.1 目录结构 2.2 代码部分 <!DOCTYPE html> <html lang ...

  3. 用 Flask 来写个轻博客 (28) — 使用 Flask-Assets 压缩 CSS/JS 提升网页加载速度

    Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录 目录 前文列表 扩展阅读 Flask-Assets 将 Flask-Assets 应用 ...

  4. django 简易博客开发 1 安装、创建、配置、admin使用（转）

    Django 自称是“最适合开发有限期的完美WEB框架”.本文参考<Django web开发指南>,快速搭建一个blog 出来,在中间涉及诸多知识点,这里不会详细说明,如果你是第一次接触D ...

  5. Nodejs+MongoDB+Bootstrap+esj搭建的个人简易博客

    github:https://github.com/yehuimmd/myNodeBloy Nodejs+MongoDB+jQuery+Bootstrap-esj搭建的个人简易博客 主要功能 前台 : ...

  6. django 简易博客开发 4 comments库使用及ajax支持

    首先还是贴一下源代码地址  https://github.com/goodspeedcheng/sblog 上一篇文章我们介绍了静态文件使用以及如何使用from实现对blog的增删改,这篇将介绍如何给 ...

  7. django 简易博客开发 3 静态文件、from 应用与自定义

    首先还是贴一下源代码地址  https://github.com/goodspeedcheng/sblog 上一篇博客我们介绍了 django 如何在views中使用templates以及一些常用的数 ...

  8. django 简易博客开发 2 模板和数据查询

    首先还是贴一下项目地址  https://github.com/goodspeedcheng/sblog   因为代码全在上面 上一篇博客我们介绍了 django的安装配置,新建project,新建a ...

  9. django 简易博客开发 1 安装、创建、配置、admin使用

    首先贴一下项目地址吧  https://github.com/goodspeedcheng/sblog 到现在位置项目实现的功能有: 1.后台管理使用Admin ,前端显示使用bootstrap 2. ...

随机推荐

  1. 《Go 精进之路》 读书笔记 （第一次更新）

    <Go 精进之路> 读书笔记.简要记录自己打五角星的部分,方便复习巩固.目前看到p120 Go 语言遵从的设计哲学为组合 垂直组合:类型嵌入,快速让一个类型复用其他类型已经实现的能力,实现 ...

  2. Docker容器获取宿主机信息

    最近在做产品授权的东西,开始宿主机为Window,程序获取机器硬件信息相对简单些,后来部署时发现各种各样的的环境问题,所有后来改用dokcer部署,docker方式获取宿主机信息时花了些时间,特此记录 ...

  3. liunx文件定期本地备份、异地备份、删除备份脚本

    导航 一.背景二.依赖功能介绍三.本地备份脚本四.异地备份脚本五.定期删除备份六.github脚本地址 - - - - - - - - - - 分割线 - - - - - - - - - - 一.背景 ...

  4. 2022“杭电杯”中国大学生算法设计超级联赛（6）- 1011 Find different

    2022"杭电杯"中国大学生算法设计超级联赛(6)- 1011 Find different 比赛时队友开摆,还剩半个小时,怎么办?? 当然是一起摆 Solution 看到这个题没 ...

  5. Spring的自动装配和注解

    Bean的自动装配 自动装配说明 自动装配是使用spring满足bean依赖的一种方法 spring会在应用上下文中为某个bean寻找其依赖的bean. Spring的自动装配需要从两个角度来实现,或 ...

  6. redis 分布式锁 PHP

    redis分布式 1.redis是单线程操作 2.分布式会出现的问题,死锁 3.redis分布式(集群).多台服务器里面都有多个单机redis.然后这些redis之间相互链接.还有查看各个单台服务器之 ...

  7. django 生产环境部署手册

    Django 是 python 的 web 框架,以下是其部署到生产环境的详细步骤,包含 Apache 和 nginx 版本. 部署环境 操作系统:centeros7.3 数据库:MySQL5.6.5 ...

  8. vue Excel导入，下载Excel模板，导出Excel

    vue  Excel导入,下载Excel模板,导出Excel vue  Excel导入,下载Excel模板 <template> <div style="display: ...

  9. 并发编程之 ThreadLocal

    前言 了解过 SimpleDateFormat 时间工具类的朋友都知道,该工具类非常好用,可以利用该类可以将日期转换成文本,或者将文本转换成日期,时间戳同样也可以. 以下代码,我们采用通用的 Simp ...

  10. 图数据 3D 可视化在 Explorer 中的应用

    本文首发于 NebulaGraph 公众号 前言图数据可视化是现代 Web 可视化技术中比较常见的一种展示方式,NebulaGraph Explorer 作为基于 NebulaGraph 的可视化产品 ...