Page de blog d'imitation pratique
Cet article présente principalement une simple page de blog écrite en imitant le html et le css. Les amis intéressés peuvent s'y référer.
Le code est le suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>myBlog</title>
<style>
body{
margin:0;
padding:0;
}
#container{
width:1349px;
height:1500px;
background-color:#eee;
}
#header{
background-color:white;
height:50px;
width:1349px;
}
#header .title li{
height:50px;
line-height:50px;
font-size:15px;
margin-left:20px;
margin-right:10px;
list-style-type:none;
float:left;
}
.title li a:link{
color:black;
text-decoration:none;
}
.title li a:hover{
color:red;
}
#header .subtitle li {
line-height:50px;
float:left;
list-style-type:none;
font-size:15px;
margin-right:10px;
color:black;
}
.subtitle li a:link{
color:black;
text-decoration:none;
}
.subtitle li a:hover{
color:red;
}
#main{
width:1349px;
height:1500px;
background-image:url(./images/bkg.jpg);
}
#main h{
margin:50px 900px 50px 80px;
font-size:40px;
font-weight:700px;
float:left;
}
#main .mana li {
float:left;
margin-right:20px;
margin-top:40px;
list-style-type:none;
font-size:15px;
color:white;
}
.mana li a{
border:1px solid white;
padding:2px;
color:white;
text-decoration:none;
}
.mana a:hover{
background:red;
color:white;
}
#lside{
width:800px;
height:700px;
background:white;
margin:0px 50px 50px 80px;
padding:5px;
float:left;
}
#rside{
width:300px;
height:1000px;
background:white;
float:left;
}
#state h{
margin:20px 400px 20px 15px;
color:#999;
font-size:18px;
border:1px solid gray;
padding:2px;
font-family:'PingFang SC','Microsoft YaHei',SimHei,Arial,SimSun;
}
#state img{
margin:20px 20px 10px 15px;
}
#artitlrtitle h{
font-size:20px;
font-weight:700px;
margin:10px 200px 10px 15px;
float:left;
clear:both;
}
#content p{
font-size:10px;
margin:5px 15px;
clear:both;
color:#999;
}
#time h{
margin:3px 10px 5px 15px;
font-size:15px;
float:left;
color:#999;
}
#time .oth{
margin:3px 10px 5px 15px;
font-size:15px;
float:left;
color:#999;
}
#head img{
margin:15px;
}
#head p{
float:left;
font-size:20px;
margin:30px 10px;
font-weight:700px;
color:#999;
font-weight:600px;
}
#four .yuan{
font-size:16px;
font-weight:700px;
margin:5px 10px 10px 40px;
color:gray;
float:left;
}
#four .num1{
font-size:14px;
font-weight:700px;
margin:5px 6px 20px 51px;
color:#999;
}
#four .num2{
font-size:14px;
font-weight:700px;
margin:5px 7px 20px 50px;
color:#999;
}
#four .num3{
font-size:14px;
font-weight:700px;
margin:5px 7px 20px 46px;
color:#999;
}
#four .num4{
font-size:14px;
font-weight:700px;
margin:5px 7px 20px 29px;
color:#999;
}
#intro{
height:260px;
width:300px;
margin-top:10px;
}
#intro .ff{
font-size:10px;
margin:5px 20px;
clear:both;
}
#fenlei h{
font-size:15px;
font-weight:700px;
float:left;
margin:10px 20px;
font-weight:700px;
}
#fenlei p .ti1 {
float:left;
clear:left;
font-size:10px;
margin:5px 20px;
color:gray;
text-decoration:none;
}
#fenlei p .ti1:hover{
color:red;
}
#fenlei .tii1{
float:right;
clear:right;
font-size:8px;
margin:5px 20px;
color:#bbb;
}
#cundang h{
font-size:15px;
font-weight:700px;
float:left;
clear:left;
margin:20px 20px;
}
#cundang p .ti1{
float:left;
clear:left;
font-size:10px;
margin:5px 20px;
color:gray;
text-decoration:none;
}
#cundang p .ti1:hover{
color:red;
}
#cundang .tii1{
float:right;
clear:right;
font-size:8px;
margin:5px 20px;
color:#bbb;
}
#paiming h{
font-size:15px;
font-weight:700px;
float:left;
clear:left;
margin:20px 20px;
font-weight:700px;
}
#pm .tiname{
float:left;
clear:left;
font-size:15px;
margin:5px 20px;
color:gray;
text-decoration:none;
}
#pm .tiname:hover{
color:red;
}
#pm .tinum{
float:left;
clear:left;
font-size:8px;
margin:3px 20px;
color:#bbb;
}
#callus h{
font-size:15px;
font-weight:700px;
float:left;
clear:left;
margin:20px 20px;
font-weight:700px;
}
#callus .us{
font-size:10px;
margin:5px 2px 5px 20px;
float:left;
clear:left;
}
#callus .weibo{
font-size:10px;
margin:5px 5px;
padding-right:80px;
float:right;
clear:right;
}
#callus .us1{
font-size:10px;
margin:5px 20px;
float:left;
clear:left;
}
#callus .oo1{
margin:40px 80px 10px 80px;
font-size:10px;
float:left;
clear:left;
}
#callus .oo2{
margin:10px 80px 10px 80px;
font-size:10px;
float:left;
clear:left;
}
</style>
<!-- <link rel = "stylesheet" type = "text/css" href = "blog.css"> -->
</head>
<body>
<div id = "container">
<div id = "header">
<div id = "firstpic" >
<img a href = "" src = "./images/csdn.jpg" alt = "" width="80" height="50" style="float:left"></a>
</div>
<div id = "menu">
<ul class = "title" >
<li><a href = "#" >博客</a></li>
<li><a href = "#" >学院</a></li>
<li><a href = "#" >下载</a></li>
<li><a href = "#" >GitChat</a></li>
<li><a href = "#" >论坛</a></li>
<li><a href = "#" >问答</a></li>
<li><a href = "#" >商城</a></li>
<li><a href = "#" >头条</a></li>
<li><a href = "#" >活动</a></li>
<li><a href = "#" >码云</a></li>
<li><a href = "#" style = "margin-right:150px">ITeye</a></li>
</ul>
</div>
<div id = "secondpic" >
<img id = "search" src = "./images/search.jpg" alt = "" height="40" width = "200" style="float:left" >
</div>
<div id = "other">
<ul class = "subtitle" >
<li><a href = "#" style="margin-left:23px">写博客</a></li>
<li><a href = "#" style="margin-left:23px">发Chat</a></li>
</ul>
</div>
<div id = "thirdpic">
<img a href = "" src = "./images/c.gif" alt = "" width = "50" height = "50" style="float:left"></a>
</div>
</div>
<div id = "main">
<h>我的博客</h>
<ul class = "mana">
<li><a href = " " >修改个人资料</a></li>
<li><a href = " " >管理博客</a></li>
</ul>
<div id = "lside">
<div id = "state">
<h>只看原创</h>
<div id = "fourthpic">
<img src = "./images/search.jpg" alt = "" >
</div>
</div>
<div id = "artitlrtitle">
<h > listview实现列表</h>
</div>
<div id = "content">
<p>listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表. listview实现一个列表.listview实现一个列表.</p>
</div>
<div id = "time">
<h>原创</h>
<p class = "oth">2018-01-01 00:00:00</p>
<p class = "oth">阅读量：1000</p>
<p class = "oth">评论：2</p>
</div>
<div id = "artitlrtitle">
<h>listview实现列表</h>
</div>
<div id = "content">
<p>listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表. listview实现一个列表.listview实现一个列表.</p>
</div>
<div id = "time">
<h>原创</h>
<p class = "oth">2018-01-01 00:00:00</p>
<p class = "oth">阅读量：1000</p>
<p class = "oth">评论：2</p>
</div>
<div id = "artitlrtitle">
<h>listview实现列表</h>
</div>
<div id = "content">
<p>listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表. listview实现一个列表.listview实现一个列表.</p>
</div>
<div id = "time">
<h>原创</h>
<p class = "oth">2018-01-01 00:00:00</p>
<p class = "oth">阅读量：1000</p>
<p class = "oth">评论：2</p>
</div>
<div id = "artitlrtitle">
<h>listview实现列表</h>
</div>
<div id = "content">
<p>listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表. listview实现一个列表.listview实现一个列表.</p>
</div>
<div id = "time">
<h>原创</h>
<p class = "oth">2018-01-01 00:00:00</p>
<p class = "oth">阅读量：1000</p>
<p class = "oth">评论：2</p>
</div>
<div id = "artitlrtitle">
<h>listview实现列表</h>
</div>
<div id = "content">
<p>listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表。listview实现一个列表. listview实现一个列表.listview实现一个列表.</p>
</div>
<div id = "time">
<h>原创</h>
<p class = "oth">2018-01-01 00:00:00</p>
<p class = "oth">阅读量：1000</p>
<p class = "oth">评论：2</p>
</div>
</div>
<div id = "rside">
<div id = "head">
<img a href = "" src = "./images/c.gif" alt = "" width = "50" height = "50" style="float:left"></a>
<p>XXX</p>
<div id = "four">
<p class = "yuan" style="word-spacing:22px;text-indent:6px;">原创 粉丝 喜欢 码云 </p>
<p class = "num1" > 8 </p>
<p class = "num2" > 8 </p>
<p class = "num3" > 8 </p>
<p class = "num4"> 未开通 </p>
</div>
</div>
<div id = "intro">
<p class = "ff" >访问量： 1000 </p>
<p class = "ff" >等级： 2 </p>
<p class = "ff" >排名： 10000 </p>
<p class = "ff" >勋章： 恒 </p>
</div>
<div id = "fenlei">
<h>文章分类 </h>
<p><a class = "ti1" href = "#" > Android</a></p>
<p class = "tii1">8篇</p>
<p><a class = "ti1" href = "#" > CSS </a></p>
<p class = "tii1">8篇</p>
<p><a class = "ti1" href = "#" > JAVA </a></p>
<p class = "tii1">8篇</p>
</div>
<div id = "cundang">
<h>文章存档 </h>
<p><a class = "ti1" href = "#" > 2017年10月</a></p>
<p class = "tii1">2篇</p>
<p><a class = "ti1" href = "#" > 2018年01月 </a></p>
<p class = "tii1">2篇</p>
<p><a class = "ti1" href = "#" > 2019年03月 </a></p>
<p class = "tii1">6篇</p>
</div>
<div id = "paiming">
<h>阅读排名</h>
<div id = "pm">
<p><a class = "tiname" href = "#">css链接</a></p>
<p class = "tinum">阅读量：200</p>
</div>
<div id = "pm">
<p><a class = "tiname" href = "#">css链接</a></p>
<p class = "tinum">阅读量：200</p>
</div>
<div id = "pm">
<p><a class = "tiname" href = "#">css链接</a></p>
<p class = "tinum">阅读量：200</p>
</div>
</div>
<div id = "callus">
<h>联系我们</h>
<p class = "us">网站客服</p>
<p class = "weibo"> 微博客服</p>
<p class = "us1"> www.php.cn</p>
<p class = "us1">400-100-200</p>
<p class = "oo1">京ICP证00000000号</p>
<p class = "oo2">关于|招聘|广告服务</p>
</div>
</div>
</div>
</div>
</body>
</html>Recommandations associées :
Que diriez-vous des débutants ? Créez un blog personnel avec Vue.js + Node.js
Créez un blog personnel avec WordPress
Node.js Partage d'expériences de développement de projets de blog
HTML et CSS réalisent un partage simple de code de blog
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment envoyer des pages Web sur le bureau comme raccourci dans le navigateur Edge ?
Mar 14, 2024 pm 05:22 PM
Comment envoyer des pages Web sur le bureau sous forme de raccourci dans le navigateur Edge ? Beaucoup de nos utilisateurs souhaitent afficher les pages Web fréquemment utilisées sur le bureau sous forme de raccourcis pour faciliter l'ouverture directe des pages d'accès, mais ils ne savent pas comment procéder. En réponse à ce problème, l'éditeur de ce numéro partagera le. solution avec la majorité des utilisateurs, jetons un coup d’œil au contenu partagé dans le didacticiel du logiciel d’aujourd’hui. La méthode de raccourci pour envoyer des pages Web au bureau dans le navigateur Edge : 1. Ouvrez le logiciel et cliquez sur le bouton "..." sur la page. 2. Sélectionnez « Installer ce site en tant qu'application » dans « Application » dans l'option du menu déroulant. 3. Enfin, cliquez dessus dans la fenêtre pop-up
Comment configurer l'actualisation automatique d'une page Web
Oct 26, 2023 am 10:52 AM
Pour paramétrer le rafraîchissement automatique d'une page web, vous pouvez utiliser la balise HTML "meta", la fonction JavaScript "setTimeout", la fonction "setInterval" ou encore l'en-tête HTTP "Refresh". Introduction détaillée : 1. Utilisez la balise "meta" du HTML Dans la balise "<head>" du document HTML, vous pouvez utiliser la balise "meta" pour définir l'actualisation automatique de la page Web. 2. Le "setTimeout" ; " fonction de JavaScript, etc.
Que dois-je faire si les images de la page Web ne peuvent pas être chargées ? 6 solutions
Mar 15, 2024 am 10:30 AM
Certains internautes ont constaté que lorsqu'ils ouvraient la page Web du navigateur, les images de la page Web ne pouvaient pas être chargées pendant une longue période. Que s'est-il passé ? J'ai vérifié que le réseau est normal, alors quel est le problème ? L'éditeur ci-dessous vous présentera six solutions au problème de l'impossibilité de charger les images de pages Web. Les images de la page Web ne peuvent pas être chargées : 1. Problème de vitesse Internet La page Web ne peut pas afficher les images. Cela peut être dû au fait que la vitesse Internet de l'ordinateur est relativement lente et qu'il y a davantage de logiciels ouverts sur l'ordinateur et que les images auxquelles nous accédons sont relativement volumineuses. peut être dû à un délai de chargement. Par conséquent, l'image ne peut pas être affichée. Vous pouvez désactiver le logiciel qui utilise la vitesse du réseau et le vérifier dans le gestionnaire de tâches. 2. Trop de visiteurs Si la page Web ne peut pas afficher d'images, c'est peut-être parce que les pages Web que nous avons visitées ont été visitées en même temps.
Raisons possibles pour lesquelles la connexion réseau est normale mais le navigateur ne peut pas accéder à la page Web
Feb 19, 2024 pm 03:45 PM
Le navigateur ne peut pas ouvrir la page Web mais le réseau fonctionne normalement. Il existe de nombreuses raisons possibles. Lorsque ce problème survient, nous devons enquêter étape par étape pour déterminer la cause spécifique et résoudre le problème. Tout d’abord, déterminez si la page Web ne peut pas être ouverte est limitée à un navigateur spécifique ou si tous les navigateurs ne peuvent pas ouvrir la page Web. Si un seul navigateur ne parvient pas à ouvrir la page Web, vous pouvez essayer d'utiliser d'autres navigateurs, tels que Google Chrome, Firefox, etc., à des fins de test. Si d'autres navigateurs parviennent à ouvrir la page correctement, le problème vient probablement de ce navigateur spécifique, peut-être
Partez de zéro et vous guidez étape par étape pour installer Flask et créer rapidement un blog personnel
Feb 19, 2024 pm 04:01 PM
En partant de zéro, je vais vous apprendre étape par étape comment installer Flask et créer rapidement un blog personnel. En tant que personne qui aime écrire, il est très important d'avoir un blog personnel. En tant que framework Web Python léger, Flask peut nous aider à créer rapidement un blog personnel simple et entièrement fonctionnel. Dans cet article, je vais repartir de zéro et vous apprendre étape par étape comment installer Flask et créer rapidement un blog personnel. Étape 1 : Installer Python et pip Avant de commencer, nous devons d'abord installer Python et pi
Que faire si la page Web ne peut pas être ouverte
Feb 21, 2024 am 10:24 AM
Comment résoudre le problème des pages Web qui ne s'ouvrent pas Avec le développement rapide d'Internet, les gens comptent de plus en plus sur Internet pour obtenir des informations, communiquer et se divertir. Cependant, nous rencontrons parfois le problème que la page Web ne peut pas être ouverte, ce qui nous pose beaucoup de problèmes. Cet article vous présentera quelques méthodes courantes pour vous aider à résoudre le problème des pages Web qui ne s'ouvrent pas. Tout d’abord, nous devons déterminer pourquoi la page Web ne peut pas être ouverte. Les raisons possibles incluent des problèmes de réseau, des problèmes de serveur, des problèmes de paramètres du navigateur, etc. Voici quelques solutions : Vérifiez la connexion réseau : Tout d'abord, nous avons besoin
Mar 22, 2024 pm 03:20 PM
L'exécution de code PHP dans une page Web nécessite de s'assurer que le serveur Web prend en charge PHP et est correctement configuré. PHP peut être ouvert de trois manières : * **Environnement du serveur :** Placez le fichier PHP dans le répertoire racine du serveur et accédez-y via le navigateur. * **Environnement de développement intégré : **Placez les fichiers PHP dans le répertoire racine Web spécifié et accédez-y via le navigateur. * **Serveur distant :** Accédez aux fichiers PHP hébergés sur un serveur distant via l'adresse URL fournie par le serveur.
Comment utiliser JavaScript pour afficher et masquer la barre de navigation fixe en bas de la page Web ?
Oct 19, 2023 am 09:04 AM
Comment utiliser JavaScript pour afficher et masquer la barre de navigation fixe en bas de la page Web ? Dans la conception Web, les barres de navigation fixes sont un élément de conception courant qui peut fournir aux utilisateurs des fonctions de navigation rapides pour accéder au site Web. Lorsque l'utilisateur fait défiler la page, la barre de navigation peut être fixée en bas de la page pour fournir des services de navigation continus. Cet article explique comment utiliser JavaScript pour obtenir cet effet et fournit des exemples de code spécifiques. Pour réaliser l'effet d'affichage et de masquage de la barre de navigation fixe en bas de la page Web, celle-ci peut être divisée en les étapes suivantes : Étape
