html+css實戰之仿部落格網頁

阿新 • • 發佈：2019-02-12

這幾天學習了一些html+css的知識，於是就動手仿部落格頁面做了一個靜態的頁面。

下面為實現的程式碼：

blog.html:

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>myBlog</title>
<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">  
[email protected]</p>
<p class = "us1">400-100-200</p>
<p class = "oo1">京ICP證00000000號</p>
<p class = "oo2">關於|招聘|廣告服務</p>
 </div>
 
</div>


</div>

</div>
</body>
</html>

blog.css:

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 {
height:50px;
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;
}

效果：

因為剛接觸html和css，所以我只能以我目前對其的理解做出這個頁面。有不足，但記錄下來可以作為我自己學習的一個過程筆記。接下去不斷深入學習後，有時間可以回過頭來進行優化。

html+css實戰之仿部落格網頁

這幾天學習了一些html+css的知識，於是就動手仿部落格頁面做了一個靜態的頁面。下面為實現的程式碼： blog.html: <!DOCTYPE html> <html> <head> <meta charset = "u

重磅迴歸-SSM整合進階專案實戰之個人部落格系統

歷經一個多月的重新設計，需求分析以及前後端開發，終於有了一定的輸出：我自己實現的spring4+springmvc+mybatis3整合的進階專案實戰-個人部落格系統已然完成了，系統採用mvc三層模式進行整體的開發，涉及到技術一下子很難全部列出，其中不得不提的有：整

SpringBoot專案實戰之開源部落格（一）多模組結構搭建

用springboot開發專案已經有挺長的一段時間了，不得不說boot是一個很好的應用層框架。之前也寫過一些關係Boot的東西，但是講的比較粗略，程式碼也沒有貼出來。最近我自己想做個開源部落格專案，所有就打算記錄點東西下來，把0到1,1到100的過程展現給大家，如有不足之處懇

純HTML+CSS實戰之實現帶圖示的二級導航選單

效果圖如上程式碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>純CSS實現帶圖示的二級導航選單</t

純HTML+CSS實戰之高階字型的實現

本次分享內容較為基礎，主要知識點便是css中盒子及文字陰影的應用字型效果如下：程式碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

HTML/CSS初寫仿csdn部落格頁面框架

初寫仿csdn部落格頁面步驟一、觀察頁面構造，畫圖頁面根據頁面，畫框架二、利用div，從上到下先寫出整體框架 HTML部分（先整體） <!DOCTYPE

安卓專案實戰之仿微信朋友圈的九宮格自定義控制元件

效果圖圖片展示形式 1、當只有1張圖時，可以自己定製圖片寬高，也可以使用預設九宮格的寬高； 2、當只有4張圖時，以2*2的方式顯示； 3、除以上兩種情況下，都是按照3列方式顯示，但這時有一些細節： a、如果只有9張圖，當然是以3*3的方式顯示；

【HTML+CSS實戰】商城網頁前端

1、網頁前端基礎分析我們知道網頁是由HTML+CSS+JavaScript結合起來共同完成靜態/動態網頁的開發，如果把一個網頁比喻成一個人，HTML相當於人的骨架，CSS是包裹骨架的肉和衣服，JavaScript是人做出的各種動作，而後臺語言是告訴前端需要做什麼，相

python3 [入門基礎實戰] 爬蟲入門之刷部落格瀏覽量

爬取結果程式碼很簡單： # encoding=utf8 import requests import re import time from bs4 import BeautifulSoup firstUrl = 'http://

BBS+ BLOG系統（仿部落格園）

一、基本要求作業題目：開發BBS+BLOG系統作業需求: 1 基於ajax和使用者認證元件實現登入驗證 2 基於ajax和form元件實現註冊功能 3 系統首頁文章列表的渲染 4 個人站點頁面設計5 文章詳細頁的繼承6 點贊與踩滅7 評論功能8 富文字編輯器的使用9 防止xss攻擊

仿部落格園

仿部落格園 api:部落格專案的介面專案 web:部落格專案的介面專案主張：介面和檢視分離。主要實現的功能，註冊，登入，退出，打通主頁不同登入狀態顯示，釋出文章。主要用到的技術：MongoDB 資料驗證，cookie跨域共享。執行專案說明：先把api專案

Spring Boot實現仿部落格園傳送通知郵件

郵件服務已經是基礎性服務了，是網站的必備功能之一，當註冊了某些網站的時候，郵箱裡通常會收到一封註冊成功通知郵件或者點選啟用賬號的郵件，部落格園也是如此。本文使用Spring Boot，通過QQ郵箱來模仿部落格園傳送一封通知郵件。部落格園傳送的“歡迎您加入部落格園”的主題郵件如圖所示。這種通知郵件，只有登

Python3網路爬蟲：Scrapy入門實戰之爬取動態網頁圖片

Python版本： python3.+ 執行環境： Mac OS IDE： pycharm 一前言二 Scrapy相關方法介紹 1 搭建Scrapy專案 2 shell分析三網頁分析

Django重置密碼實戰（未部落格）

一編寫模板檔案 1 mysite/templates/account/password_reset_form.html {% extends "base.html" %} {% block title %}重置密碼{% endblock %} {% block co

Elasticsearch學習之有用部落格

推薦閱讀：1、阿里：https://elasticsearch.cn/article/61712、滴滴：http://t.cn/EUNLkNU3、騰訊：http://t.cn/E4y9ylL4、攜程：https://elasticsearch.cn/article/62055、社群：https://elast

html-css練習題（天天生鮮靜態網頁製作）

先來看一下效果圖：主要要求：注：最下面有素材連結地址可以自己練習使用 /* 1.login最外側盒子設定高29 背景顏色#f7f7f7 下邊框1 */ /* 1.1 login內容部分

HTML+CSS實戰提升

1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>幾米簡介</title>

Spark調優之Cloudera部落格(Part 2)

概述 Cloudera關於Spark調優方面的第二篇部落格How-to: Tune Your Apache Spark Jobs (Part 2)，主要關注resource tuning(資源使用)、parallelism(並行度)、data represen

ElasticSearch實戰：個人部落格搜尋和首頁內容展示

前言最近學習了SpringBoot，搞了一個小型部落格系統，在這個系統中的首頁內容展示、全文搜尋用到了elasticsearch。系統中持久層使用的是Springdata，但是沒有使用spring-data-elasticsearch，而是單獨引入的elas

MIPCMS高仿部落格一號部落格/新聞/資訊自適應模版

模版基於MIPCMS系統做的，仿部落格一號WP模版，模版適合PC和手機端，本模版通過MIP檢測，各位朋友可以自行測試，這次模版不免費提供了，需要各位付個辛苦費10元就行了。右邊掃描支付，支付點選部落格右上角灰色QQ按鈕聯絡廠長。還是把模版位置明細提供大家，大家可以根據自己

html+css實戰之仿部落格網頁

相關推薦