Home > Article > Web Front-end > HTML and csss implement simple blog code sharing

HTML and csss implement simple blog code sharing

小云云Original: 2018-02-28 09:38:062267browse

This article mainly shares with you HTML and CSS to implement simple blog code, hoping to help you complete a simple blog using HTML and CSS.

Over animation

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

Shadow

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

css code

.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 code

<!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>
  <p class="side-bar">
    <p class="header">
      <a href="index.html" class="logo">王花花</a>
      <p class="intro">Lorem ipsum dolor sit amet dolor sit ame.</p>
    </p>
    <p class="nav">
      <a href="#" class="item">关于我</a>
      <a href="#" class="item">联系我</a>
      <a href="#" class="item">捐助我</a>
    </p>
    <p class="tag-list">
      <a href="#" class="item"># 夸夸我</a>
      <a href="#" class="item"># 抱抱我</a>
      <a href="#" class="item"># 亲亲我</a>
    </p>
  </p>
  <p class="main">
    <p class="article-list">
      <p class="item">
        <a href="article.html" class="title">Lorem ipsum dolor sit amet dolor sit</a>
        <p class="status">发布于：2050-10-01 | 阅读：3500 | 标签：#两性 #HTML</p>
        <p 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.
        </p>
      </p>
      <p class="item">
        <a href="article.html" class="title">Lorem ipsum dolor sit amet dolor sit</a>
        <p class="status">发布于：2050-10-01 | 阅读：3500 | 标签：#两性 #HTML</p>
        <p 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.
        </p>
      </p>
      <p class="item">
        <a href="article.html" class="title">Lorem ipsum dolor sit amet dolor sit</a>
        <p class="status">发布于：2050-10-01 | 阅读：3500 | 标签：#两性 #HTML</p>
        <p 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.
        </p>
      </p>
      <p class="item">
        <a href="article.html" class="title">Lorem ipsum dolor sit amet dolor sit</a>
        <p class="status">发布于：2050-10-01 | 阅读：3500 | 标签：#两性 #HTML</p>
        <p 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.
        </p>
      </p>
      <p class="item">
        <a href="article.html" class="title">Lorem ipsum dolor sit amet dolor sit</a>
        <p class="status">发布于：2050-10-01 | 阅读：3500 | 标签：#两性 #HTML</p>
        <p 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.
        </p>
      </p>
      <p class="item">
        <a href="article.html" class="title">Lorem ipsum dolor sit amet dolor sit</a>
        <p class="status">发布于：2050-10-01 | 阅读：3500 | 标签：#两性 #HTML</p>
        <p 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.
        </p>
      </p>
      <p class="item">
        <a href="article.html" class="title">Lorem ipsum dolor sit amet dolor sit</a>
        <p class="status">发布于：2050-10-01 | 阅读：3500 | 标签：#两性 #HTML</p>
        <p 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.
        </p>
      </p>
      <p class="item">
        <a href="article.html" class="title">Lorem ipsum dolor sit amet dolor sit</a>
        <p class="status">发布于：2050-10-01 | 阅读：3500 | 标签：#两性 #HTML</p>
        <p 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.
        </p>
      </p>
      <p class="item">
        <a href="article.html" class="title">Lorem ipsum dolor sit amet dolor sit</a>
        <p class="status">发布于：2050-10-01 | 阅读：3500 | 标签：#两性 #HTML</p>
        <p 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.
        </p>
      </p>
      <p class="item">
        <a href="article.html" class="title">Lorem ipsum dolor sit amet dolor sit</a>
        <p class="status">发布于：2050-10-01 | 阅读：3500 | 标签：#两性 #HTML</p>
        <p 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.
        </p>
      </p>
    </p>
  </p>
</body>
</html>

Related recommendations:

Detailed explanation of blog content management system

How to make a simple blog with PHP

HTML5 and CSS3 flat style blog Tutorial resource sharing

The above is the detailed content of HTML and csss implement simple blog code sharing. For more information, please follow other related articles on the PHP Chinese website!

php html5 css css3 html webkit

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Summary and sharing of advanced CSS skillsNext article：Summary and sharing of advanced CSS skills

See more

HTML and csss implement simple blog code sharing

Over animation

Shadow

css code

html code

Related articles