项目预览

代码

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. filebeat测试output连通性

    在默认的情况下,直接运行filebeat的话,它选择的默认的配置文件是当前目录下的filebeat.yml文件. filebeat.yml文件内容 filebeat.inputs: - type: l ...

  2. 1.nexus的安装

    1,Nexus 介绍 Nexus是什么 Nexus 是一个强大的maven仓库管理器,它极大地简化了本地内部仓库的维护和外部仓库的访问. 不仅如此,他还可以用来创建yum.pypi.npm.docke ...

  3. 使用docker方式安装wordpress

    mkdir -p /home/my_wordpress cd my_wordpress/ vim docker-compose.yml version: '3.3' services: db: ima ...

  4. Module加载的详细说明-保证你有所收获

    模块 HTML 网页中,浏览器通过<script>标签加载 JavaScript 脚本. <!-- 页面内嵌的脚本 --> <script type="appl ...

  5. BLS签名算法

    前言 [失踪人口回归 (*/ω\*)] 真的好久好久没有更新了,因为自己也还在找方向,但还是把新学的知识记录在博客里.今天要介绍的是BLS签名算法. 一.BLS签名算法简介 BLS签名算法[1]是由斯 ...

  6. git中 gitignore 忽略文件操作

    通常,.gitignore文件被放置在存储库的根目录中.根目录也称为父目录和当前工作目录.根文件夹包含组成项目的所有文件和其他文件夹.也就是说,您可以将它放在存储库中的任何文件夹中.你甚至可以有多个. ...

  7. JavaBean组件<jsp:forward>动作<jsp:param>动作登录页面输入用户名和密码,然后进入检查页面判断是否符合要求,符合要求跳转到成功界面,不符合要求返回登录界面,显示错误信息。

    JavaBean组件 JavaBean组件实际是一种java类.通过封装属性和方法成为具有某种功能或者处理某个业务的对象. 特点:1.实现代码的重复利用.2.容易编写和维护.3.jsp页面调用方便. ...

  8. go-zero docker-compose 搭建课件服务(七):prometheus+grafana服务监控

    0.转载 go-zero docker-compose 搭建课件服务(七):prometheus+grafana服务监控 0.1源码地址 https://github.com/liuyuede123/ ...

  9. 『现学现忘』Git分支 — 40、分支基本操作(一)

    目录 1.创建分支 (1)创建分支 (2)图示理解 2.查看分支列表 3.分支切换 4.查看所有分支的最后一个提交 5.删除分支 1.创建分支 (1)创建分支 Git 是怎么创建新分支的呢? 很简单, ...

  10. pta第一次博客

    目录 pta第一次博客 1.前言 2.设计与分析 第二次作业第二题 第三次作业第一题 第三次作业第二题 第三次作业第三题 3.踩坑心得: 4.改进建议 5.总结 pta第一次博客 1.前言 这三次pt ...