Heim > Artikel > Web-Frontend > HTML und CSS ermöglichen eine einfache gemeinsame Nutzung von Blog-Code
HTML und CSS ermöglichen eine einfache gemeinsame Nutzung von Blog-Code
- 小云云Original
- 2018-02-28 09:38:062268Durchsuche
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;
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;}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>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!
Stellungnahme：
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
Vorheriger Artikel：Zusammenfassung und Weitergabe fortgeschrittener CSS-KenntnisseNächster Artikel：Zusammenfassung und Weitergabe fortgeschrittener CSS-Kenntnisse
In Verbindung stehende Artikel
Mehr sehen- Wie umschließe ich CSS-Rasterelemente ohne Medienabfragen?
- Wie verhindern Sie, dass Telefonnummern auf Ihrem iPhone in Hyperlinks umgewandelt werden?
- Wie wähle ich in CSS eine Beschriftung mit einem bestimmten „for“-Attribut aus?
- So verwenden Sie :nth-child in Internet Explorer 8: Eine Problemumgehung
- Wie kann man nebeneinanderliegende Divs auf die gleiche Höhe bringen?