Heim > Web-Frontend > CSS-Tutorial > Hauptteil

HTML und CSS ermöglichen eine einfache gemeinsame Nutzung von Blog-Code

小云云
Freigeben: 2018-02-28 09:38:06
Original
2274 Leute haben es durchsucht

Dieser Artikel teilt Ihnen hauptsächlich HTML und CSS zur Implementierung von einfachem Blog-Code mit und hofft, Ihnen dabei zu helfen, einen einfachen Blog mit HTML und CSS zu erstellen.

Überanimation

-webkit-transition: color 200ms;
  -o-transition: color 200ms;
  transition: color 200ms;
Nach dem Login kopieren

Schatten

-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;}
Nach dem Login kopieren

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>
Nach dem Login kopieren

Verwandte Empfehlungen:

Detaillierte Erläuterung des Blog-Content-Management-Systems

Wie man mit PHP einen einfachen Blog erstellt

HTML5- und CSS3-Ressourcenfreigabe für Blog-Tutorials im flachen Stil

Das obige ist der detaillierte Inhalt vonHTML und CSS ermöglichen eine einfache gemeinsame Nutzung von Blog-Code. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage