前端博客页面练习

最新推荐文章于 2024-06-20 12:05:09 发布

时空无限

最新推荐文章于 2024-06-20 12:05:09 发布

阅读量259

点赞数 1

分类专栏： css 前端文章标签： css html

本文链接：https://blog.csdn.net/weixin_40548182/article/details/113107756

版权

前端同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

html代码

cat index.html
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>Blog页面示例</title>
<link rel="stylesheet" type="text/css" href="css/blog.css">
</head>
<body>
<!--左边栏开始-->
<div class="left">
  <div class="header-img">
    <img src="css/2.jpg" alt="">
  </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-name">圣墟</h1>
        <span class="article-date">2021-01-25</span>
      </div>
      <div class="article-info">仙路尽头谁为峰,一见无始道成空。
天道无始亦无终,宝镜虚空镇苍穹。
一株青莲惊万古,九圣凌霄保太平。
太阴太阳孰弱强,混化太极证帝王。
麒麟掌兵征仙路,天蚕十蜕终成皇。
狂猴斗战九天界,不忠不义不死王。
荒古之前帝尊天,世界化鼎欲成仙。
禁区炼兵始恒宇,龙呤道喝震伏羲。
九尊九秘九道极,生命古树话道衍。
妖皇有憾遗万古,冥尊九死终成仙。
斩我明道唯乱古,太皇龙剑敌万夫。
阿弥陀佛慧慈苦,道胎天证西皇出。</div>
      <div class="article-tag"></div>
      <div class="article-title">
        <h1 class="article-name">吞噬星空</h1>
        <span class="article-date">2020-01-27</span>
      </div>
      <div class="article-info">继《九鼎记》《盘龙》《星辰变》《寸芒》《星峰传说》后，番茄的第六本书！
——————
简介：
星空中。
“这颗星球，通体土黄色，没有任何生命存在，直径21000公里，咦，竟然蕴含‘星泪金’矿脉，真是天助我也，将这颗星球吞噬掉后，我的实力应该能恢复到受伤前的80％。”脸色苍白的罗峰盘膝坐在一颗飞行的陨石上，遥看远处的一颗无生命存在的行星。
——————
番茄第六部小说《吞噬星空》，将为大家展现出一个浩瀚广阔、神秘莫测的未来世界。</div>
    </div>
      <div class="article-title">
        <h1 class="article-name">完美世界</h1>
        <span class="article-date">2020-01-27</span>
      </div>
       <div class="article-info">　一粒尘可填海，一根草斩尽日月星辰，弹指间天翻地覆。
　　群雄并起，万族林立，诸圣争霸，乱天动地。问苍茫大地，谁主沉浮？！
　　一个少年从大荒中走出，一切从这里开始……</div>
  </div>
</div>
<!--右边栏结束-->
</body>
</html>
<!--左边栏结束-->
<!--右边栏开始-->
<div class="right"></div>
<!--右边栏结束-->
</body>
</html>

css代码

cat css/blog.css 
/*Blog页面相关样式*/
*{
font-family:".PingFang SC","Microsoft YaHei";
font-size:14px;
margin:0;
padding:0;
}
/*去掉a标签的下划线*/
a{
text-decoration:none;
}
/*左边栏样式*/
.left {
width: 20%;
background-color: rgba(25,25,112,0.8);
height: 100%;
position: fixed;
left: 0;
top: 0;
}
/*头像样式*/
.header-img{
height:128px;
width:128px;
border:5px solid white;
border-radius:50%;
overflow:hidden;
margin:0 auto;
margin-top:20px;
}
.header-img>img{
max-width:100%;
}
/*blog-name样式*/
.blog-name{
color:white;
font-size:24px;
font-weight:bold;
text-align:center;
margin-top:50px;
}
/*blog-info样式*/
.blog-info{
color:white;
font-size:18px;
font-weight:bold;
text-align:center;
}
/*links和tag样式*/
.blog-links,
.blog-tags{
margin-top:20px;
text-align:center;
}
.blog-links a,
.blog-tags a{
color:rgb(220,220,220)
}
/*右边栏样式*/
.right{
width:80%;
background-color:rgba(220,220,220,0.1);
height:100%;
position:fixed;
right:0;
top:0;
color:black;
}
.article-list{
/*background-color:rgba(189,183,107,0.8);*/
background-color:rgba(106,90,205,0.5);
margin-left:30px;
margin-right:10%;
}
.article-title{
padding:15px;
border-left:3px solid red;
}
.article-name{
display:inline-block;
}
.article-date{
float:right;
}
.article-info{
padding:15px;
border:3px 2px 1px 1px solid grey;
background-color:rgba(220,220,220);
}

效果图

在这里插入图片描述

颜色码对照表

在这里插入图片描述

定制图片网站

https://dummyimage.com/

时空无限

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
2
评论
前端博客页面练习

html代码cat index.html<!DOCTYPE html><html lang='en'><head><meta charset='UTF-8'><title>Blog页面示例</title><link rel="stylesheet" type="text/css" href="css/blog.css"></head><body>
复制链接

扫一扫