html 和css简单博客代码

最新推荐文章于 2025-11-01 09:21:06 发布

原创最新推荐文章于 2025-11-01 09:21:06 发布 · 4.9k 阅读

31 ·

CC 4.0 BY-SA版权

文章标签：

#htm;l #css

本文介绍了一个简单的个人博客布局设计，包括侧边栏和主要内容区域的样式设置，通过使用CSS实现过度动画效果和阴影效果，提高了用户体验。

过度动画

-webkit-transition: color 200ms;
  -o-transition: color 200ms;
  transition: color 200ms;

阴影

-webkit-box-shadow: 0 0 3px 2px rgba(0,0,0,.2);
box-shadow: 0 0 3px 2px rgba(0,0,0,.2)；

css代码

.side-bar
{
  float: left;
  width: 20%;
}
.main{
  float: right;
  width: 80%;

  color: #555;
}
a{
  text-decoration: none;
}
 a ,body{

  color: #eee;
}
body{
  background: #454545;
  line-height: 1.5;
}
.header .logo{
  padding: 10px 20px;
  font-size: 30px;
  display: inline-block;
  border: 5px solid #eee;
  margin-bottom: 10px;
  line-height: 1;
}
.side-bar > *{
  padding: 10px 15px;
}
.side-bar .nav a,
.side-bar .tag-list a{
  display: block;
  padding: 5px;
  color: #777;
}
.side-bar .nav a:hover,
.side-bar .tag-list a:hover{
  transition:

  color: #eee;
}
.side-bar .nav a,
.side-bar .tag-list a{
  font-weight: 700;
}
.article-list{
  margin-right: 30%;
  background: #fff;
  padding: 20px 30px;
}
.article-list .item .title{
  font-size:  22px;
  font-weight: 700;
  color: #454545;
}
.article-list .item .status
{
  font-size: 17px;
  color: #ccc;

}
.article-list .item>*
{
  margin:  10px 0px;
}
.article-list .item{
  margin-bottom: 20px;
}

html代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="http://cdn.bootcss.com/normalize/5.0.0/normalize.min.css">
  <link rel="stylesheet" href="css/main.css">
  <title>王花花</title>
</head>
<body>
  <div class="side-bar">
    <div class="header">
      <a href="index.html" class="logo">王花花</a>
      <div class="intro">Lorem ipsum dolor sit amet dolor sit ame.</div>
    </div>
    <div class="nav">
      <a href="#" class="item">关于我</a>
      <a href="#" class="item">联系我</a>
      <a href="#" class="item">捐助我</a>
    </div>
    <div class="tag-list">
      <a href="#" class="item"># 夸夸我</a>
      <a href="#" class="item"># 抱抱我</a>
      <a href="#" class="item"># 亲亲我</a>
    </div>
  </div>
  <div class="main">
    <div class="article-list">
      <div class="item">
        <a href="article.html" class="title">Lorem ipsum dolor sit amet dolor sit</a>
        <div class="status">发布于：2050-10-01 | 阅读：3500 | 标签：#两性 #HTML</div>
        <div class="content">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore nemo ea, magnam qui incidunt maxime commodi eveniet quam soluta, deserunt molestiae officiis adipisci assumenda, rerum, exercitationem architecto natus nihil quia.
        </div>
      </div>
      <div class="item">
        <a href="article.html" class="title">Lorem ipsum dolor sit amet dolor sit</a>
        <div class="status">发布于：2050-10-01 | 阅读：3500 | 标签：#两性 #HTML</div>
        <div class="content">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore nemo ea, magnam qui incidunt maxime commodi eveniet quam soluta, deserunt molestiae officiis adipisci assumenda, rerum, exercitationem architecto natus nihil quia.
        </div>
      </div>
      <div class="item">
        <a href="article.html" class="title">Lorem ipsum dolor sit amet dolor sit</a>
        <div class="status">发布于：2050-10-01 | 阅读：3500 | 标签：#两性 #HTML</div>
        <div class="content">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore nemo ea, magnam qui incidunt maxime commodi eveniet quam soluta, deserunt molestiae officiis adipisci assumenda, rerum, exercitationem architecto natus nihil quia.
        </div>
      </div>
      <div class="item">
        <a href="article.html" class="title">Lorem ipsum dolor sit amet dolor sit</a>
        <div class="status">发布于：2050-10-01 | 阅读：3500 | 标签：#两性 #HTML</div>
        <div class="content">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore nemo ea, magnam qui incidunt maxime commodi eveniet quam soluta, deserunt molestiae officiis adipisci assumenda, rerum, exercitationem architecto natus nihil quia.
        </div>
      </div>
      <div class="item">
        <a href="article.html" class="title">Lorem ipsum dolor sit amet dolor sit</a>
        <div class="status">发布于：2050-10-01 | 阅读：3500 | 标签：#两性 #HTML</div>
        <div class="content">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore nemo ea, magnam qui incidunt maxime commodi eveniet quam soluta, deserunt molestiae officiis adipisci assumenda, rerum, exercitationem architecto natus nihil quia.
        </div>
      </div>
      <div class="item">
        <a href="article.html" class="title">Lorem ipsum dolor sit amet dolor sit</a>
        <div class="status">发布于：2050-10-01 | 阅读：3500 | 标签：#两性 #HTML</div>
        <div class="content">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore nemo ea, magnam qui incidunt maxime commodi eveniet quam soluta, deserunt molestiae officiis adipisci assumenda, rerum, exercitationem architecto natus nihil quia.
        </div>
      </div>
      <div class="item">
        <a href="article.html" class="title">Lorem ipsum dolor sit amet dolor sit</a>
        <div class="status">发布于：2050-10-01 | 阅读：3500 | 标签：#两性 #HTML</div>
        <div class="content">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore nemo ea, magnam qui incidunt maxime commodi eveniet quam soluta, deserunt molestiae officiis adipisci assumenda, rerum, exercitationem architecto natus nihil quia.
        </div>
      </div>
      <div class="item">
        <a href="article.html" class="title">Lorem ipsum dolor sit amet dolor sit</a>
        <div class="status">发布于：2050-10-01 | 阅读：3500 | 标签：#两性 #HTML</div>
        <div class="content">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore nemo ea, magnam qui incidunt maxime commodi eveniet quam soluta, deserunt molestiae officiis adipisci assumenda, rerum, exercitationem architecto natus nihil quia.
        </div>
      </div>
      <div class="item">
        <a href="article.html" class="title">Lorem ipsum dolor sit amet dolor sit</a>
        <div class="status">发布于：2050-10-01 | 阅读：3500 | 标签：#两性 #HTML</div>
        <div class="content">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore nemo ea, magnam qui incidunt maxime commodi eveniet quam soluta, deserunt molestiae officiis adipisci assumenda, rerum, exercitationem architecto natus nihil quia.
        </div>
      </div>
      <div class="item">
        <a href="article.html" class="title">Lorem ipsum dolor sit amet dolor sit</a>
        <div class="status">发布于：2050-10-01 | 阅读：3500 | 标签：#两性 #HTML</div>
        <div class="content">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore nemo ea, magnam qui incidunt maxime commodi eveniet quam soluta, deserunt molestiae officiis adipisci assumenda, rerum, exercitationem architecto natus nihil quia.
        </div>
      </div>
    </div>
  </div>
</body>
</html>