実践模倣ブログページ
この記事はHTMLとCSSを真似て書いた簡単なブログページを中心に紹介していますので、興味のある方は参考にしてみてください。
コードは次のとおりです:
<!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>関連する推奨事項:
Vue.js + Node.js で個人ブログを作成する方法
シンプルなブログのコード共有の HTML および CSSS 実装
以上が実践模倣ブログページの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7657
15
1393
52
91
11
37
111
EdgeブラウザのショートカットとしてWebページをデスクトップに送信するにはどうすればよいですか?
Mar 14, 2024 pm 05:22 PM
Edge ブラウザのショートカットとして Web ページをデスクトップに送信するにはどうすればよいですか?多くのユーザーは、アクセスページを直接開くことができるように、頻繁に使用する Web ページをデスクトップにショートカットとして表示したいと考えていますが、その方法がわかりません。この問題に応えて、この号の編集者は大多数のユーザーが解決策を考えているので、今日のソフトウェア チュートリアルで共有されているコンテンツを見てみましょう。 Edge ブラウザで Web ページをデスクトップに送信するショートカット方法: 1. ソフトウェアを開き、ページ上の「...」ボタンをクリックします。 2. ドロップダウン メニュー オプションから [アプリケーション] で [このサイトをアプリケーションとしてインストールする] を選択します。 3. 最後に、ポップアップウィンドウでそれをクリックします
Webページの自動更新を設定する方法
Oct 26, 2023 am 10:52 AM
Web ページの自動更新を設定するには、HTML の「meta」タグ、JavaScript の「setTimeout」関数、「setInterval」関数、または HTTP の「Refresh」ヘッダーを使用できます。詳細な紹介: 1. HTML の「meta」タグを使用します。HTML ドキュメントの「<head>」タグで、「meta」タグを使用して Web ページの自動更新を設定できます。2. 「setTimeout」 JavaScriptの「機能」など
Web ページ上の画像を読み込めない場合はどうすればよいですか? 6つのソリューション
Mar 15, 2024 am 10:30 AM
一部のネチズンは、ブラウザの Web ページを開いたときに、Web ページ上の画像が長時間読み込めないことに気づきました。何が起こったのでしょうか?ネットワークは正常であることを確認しましたが、どこに問題があるのでしょうか?以下のエディタでは、Web ページの画像が読み込めない問題に対する 6 つの解決策を紹介します。 Web ページの画像を読み込めない: 1. インターネット速度の問題 Web ページに画像が表示されません。これは、コンピュータのインターネット速度が比較的遅く、コンピュータ上で開いているソフトウェアが多いためと考えられます。また、アクセスする画像が比較的大きいため、読み込みタイムアウトが原因である可能性があります。その結果、画像が表示されません。ネットワーク速度をより多く消費するソフトウェアをオフにすることができます。タスク マネージャーに移動して確認できます。 2. 訪問者が多すぎる Web ページに写真が表示されない場合は、訪問した Web ページが同時に訪問されたことが原因である可能性があります。
ネットワーク接続は正常であるにもかかわらず、ブラウザが Web ページにアクセスできない場合の考えられる理由
Feb 19, 2024 pm 03:45 PM
ブラウザは Web ページを開けませんが、ネットワークは正常です。多くの理由が考えられます。この問題が発生した場合は、段階的に調査して具体的な原因を特定し、問題を解決する必要があります。まず、Web ページを開けないのは特定のブラウザに限定されているのか、それともすべてのブラウザで Web ページを開けないのかを判断します。 1 つのブラウザだけで Web ページを開けない場合は、テストのために Google Chrome、Firefox などの他のブラウザを使用してみることができます。他のブラウザでページを正しく開くことができる場合、問題はその特定のブラウザにある可能性があります。
ゼロから始めて、Flask をインストールし、個人ブログを迅速に確立する方法を段階的にガイドします。
Feb 19, 2024 pm 04:01 PM
ゼロから始めて、Flask をインストールし、個人ブログをすぐに構築する方法を段階的に説明します。書くことが好きな人にとって、個人ブログを持つことは非常に重要です。軽量の Python Web フレームワークである Flask は、シンプルで完全に機能する個人ブログを迅速に構築するのに役立ちます。この記事では、ゼロから始めて、Flask をインストールして個人ブログを迅速に構築する方法を段階的に説明します。ステップ 1: Python と pip をインストールする 開始する前に、まず Python と pi をインストールする必要があります
Webページが開けない場合の対処法
Feb 21, 2024 am 10:24 AM
Web ページが開かない問題を解決する方法 インターネットの急速な発展に伴い、人々は情報を取得し、通信し、娯楽するためにますますインターネットに依存するようになりました。しかし、時々Webページが開けないという問題に遭遇し、多くのトラブルを引き起こします。この記事では、Web ページが開かない問題を解決するための一般的な方法をいくつか紹介します。まず、Web ページを開けない理由を特定する必要があります。考えられる原因には、ネットワークの問題、サーバーの問題、ブラウザの設定の問題などが含まれます。以下にいくつかの解決策を示します: ネットワーク接続を確認します: まず、
WebページでPHPを開く方法
Mar 22, 2024 pm 03:20 PM
Web ページで PHP コードを実行するには、Web サーバーが PHP をサポートし、適切に構成されていることを確認する必要があります。 PHP は 3 つの方法で開くことができます。 * **サーバー環境:** PHP ファイルをサーバーのルート ディレクトリに配置し、ブラウザを通じてアクセスします。 * **統合開発環境: **PHP ファイルを指定した Web ルート ディレクトリに配置し、ブラウザを通じてアクセスします。 * **リモート サーバー:** サーバーによって提供される URL アドレスを介して、リモート サーバー上でホストされている PHP ファイルにアクセスします。
JavaScript を使用して Web ページの下部にある固定ナビゲーション バーを表示または非表示にする方法は?
Oct 19, 2023 am 09:04 AM
JavaScript を使用して Web ページの下部にある固定ナビゲーション バーを表示または非表示にする方法は? Web デザインでは、固定ナビゲーション バーは、Web サイトにアクセスするためのクイック ナビゲーション機能をユーザーに提供する一般的なデザイン要素です。ユーザーがページをスクロールすると、ナビゲーション バーをページの下部に固定して、継続的なナビゲーション サービスを提供できます。この記事では、JavaScript を使用してこの効果を実現する方法を紹介し、具体的なコード例を示します。 Web ページの下部にある固定ナビゲーション バーの表示と非表示の効果を実現するには、次の手順に分けることができます。
