项目预览

代码

html:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

</head>

<body>

<div class="blog-left">

    <div class="blog-avatar">

        <img alt="avatar-img" class="avatar-img" src="mlq.png">

    </div>

    <div class="blog-title">passion</div>

    <div class="blog-info">这个人很帅什么都没有留下</div>

    <div class="blog-link">

        <ul class="blog-link-title">

            <li>关于我</li>

            <li>微博号</li>

            <li>公众号</li>

        </ul>

    </div>

    <div class="blog-tag">

        <ul class="blog-tag-title">

            <li>#python</li>

            <li>#golang</li>

            <li>#javascript</li>

        </ul>

    </div>

</div>

<div class="blog-right">

    <div class="blog-list ">

        <div class="blog-box clearfix">  <!-- 防止塌陷 用伪类选择器（:after） 创造的空文本填充盒子-->

            <span class="blog-box-title">论发财之道</span>

            <span class="blog-box-time">2022-12-1</span>

        </div>

        <div class="blog-info">

            <span class="blog-info-text">身体好、吃苦耐劳、坚韧不拔、软饭硬吃、你还在等什么 赶紧找xxx报名</span>

        </div>

        <div class="blog-tag-list">

            <span class="blog-tag-content">#重金求子</span>

            <span class="blog-tag-content">#全国可飞</span>

        </div>

    </div>

    <!-- blog-list 可以多复制几个 -->

</div>

</body>

</html>

css:

/* background style */

body{

    background-color: gray;

    margin: 0;

    height : 1200px;

    font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Noto Sans CJK SC,WenQuanYi Micro Hei,Arial,sans-serif;

    /* font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。*/

}

/* left div box style */

.blog-left{

    float: left;

    width: 25%;

    height: 100%;

    background-color:darksalmon;

    position: fixed;

}

/* right div box style */

.blog-right{

    float: right;

    width: 75%;

    height: 100%;

}

/* general style */

a{

    text-decoration: none; /* remove the a tag underline */

}

ul{

    list-style-type: none; /* remove the ul tag default style */

    padding: 0;  /* ul tag default padding-left=40, remove it  */

}

/*avatar style */

.blog-left .blog-avatar{

    width: 100px;

    height: 100px;

    border: 8px outset white; /* border style is outset, don't forget set */

    border-radius: 50% ; /* this property will Controls the border of the image to be rounded */

    margin: 20px auto;  /* set the circle in div box middle */

    overflow: hidden;  /* Resolving image overflows problem, set the img in the circle */

}

/* solved overflow problem !!!! */

.clearfix:after {

            content: '';  /* 填充空字符串 不会触发浏览器优先选择文本的机制*/

            display: block;   /* 设置成块级标签 使其可以填充一整行 */

            clear: both;   /* 当其左右两端有浮空元素时 就继续往下找到一个没有浮空元素的位置 作为一个块进行填充*/

        }

.avatar-img{

    max-height: 100%; /* img is in the div box, set the max height=100% will cramming the div box  */

}

.blog-left .blog-title{

    margin-top:20px;

    margin-bottom:20px;

    text-align: center; /* set the position of the text in the div tag */

    font-weight: 900;  /* set the font of the text */

    font-size: 2em;

    color: #ff154c;

}

.blog-left .blog-link-title{

    margin: 60px auto;

}

.blog-left .blog-link-title li{

    margin: 10px auto;

    text-align: center;

}

.blog-left .blog-tag-title li{

    margin: 10px auto;

    text-align: center;

}

.blog-left div.blog-info{

    margin: 10px auto;

    text-align: center;

}

.blog-right .blog-list{

    background-color: gray;

    width : auto;

    height : 100px;

    margin : 40px 40px;

    border:5px solid coral;

    border-radius: 10px 10px 10px 10px;

    box-shadow: 10px 10px 10px rgba(255,127,80,0.8)  /* box-shadow style */;

    font-size: 18px;

}

.blog-right :hover{

    background-color: lightcoral;

}

.blog-right .blog-box span.blog-box-title {

    float: left;

    font-weight: 700;

    font-size: 20px;

}

.blog-right .blog-box span.blog-box-time {

    float: right;

}

.blog-right .blog-info {

    margin: 10px 10px;

}

.blog-right .blog-tag-list {

    margin: 10px 10px;

}

简易博客页面小项目 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. Nginx配置中一个不起眼字符"/"的巨大作用

    文章转载自:https://mp.weixin.qq.com/s/QwsbuNIqLpxi_FhQ5pSV3w Nginx作为一个轻量级的,高性能的web服务软件,因其占有内存少,并发能力强的特点,而 ...

  2. prometheus设置使用密码nginx反向代理访问

    注意: 1.设置访问密码的方式 2.ngixn反向代理的配置 # 安装 Apache工具包 apt install apache2-utils htpasswd -bc /etc/nginx/.pro ...

  3. 4_Spring

    一. Spring Spring的基本组成: 1.最完善的轻量级核心框架. 2.通用的事务管理抽象层. 3.JDBC抽象层. 4.集成了Toplink, Hibernate, JDO, and iBA ...

  4. 为什么阿里Java开发手册不推荐使用Timestamp

    开发手册 不推荐用java.sql.Date.java.sql.Time网上说的文章有很多. 参考文章:一文告诉你Java日期时间API到底有多烂 但为什么不推荐使用java.sql.Timestam ...

  5. 一文搞定 Spring事务

    Spring 事务 上文 使用SpringJDBC 1.JDBC事务控制 ​ 不管你现在使用的是那一种ORM开发框架,只要你的核心是JDBC,那么所有的事务处理都是围绕着JDBC开展的,而JDBC之中 ...

  6. mysql工具的使用、增删改查

    mysql工具使用 目录 mysql工具使用 mysql的程序组成 mysql工具使用 服务器监听的两种socket地址 mysql数据库操作 DDL操作 数据库操作 表操作 用户操作 查看命令SHO ...

  7. React魔法堂：echarts-for-react源码略读

    前言 在当前工业4.0和智能制造的产业升级浪潮当中,智慧大屏无疑是展示企业IT成果的最有效方式之一.然而其背后怎么能缺少ECharts的身影呢?对于React应用而言,直接使用ECharts并不是最高 ...

  8. ubuntu20.04 利用xrandr命令修改多显示器分辨率

    问题描述 笔记本是ThinkPad X1 Extreme Gen3 4K屏,外接了一个27寸的1080P显示器.目标是让两个显示器的"显示效果"分辨率能一致,就如winwods和m ...

  9. Typora设置代码块Mac风格三个圆点

    写作不停,美化不止! mac小圆点效果 原本代码块样式就挺....干净的,光秃秃的,太单调了: 是吧很丑,于是自己发挥改成了这样: 好吧还是太单调,也没好看到哪里去,于是隔了两天又重新改,DuangD ...

  10. Educational Codeforces Round 122 (Rated for Div. 2)/codeforces1633

    CodeForces1633 Div. 7 解析: 题目大意 给定 \(t\) 组数据.每组数据给定一个数 \(n\)(\(10\le n\le 999\)). 每次操作可以修改 \(n\) 任意一位 ...