简洁美观个人博客搭建指南资源-CSDN下载

共153个文件

png：82个

jpg：26个

gif：15个

博客，界面

5星 · 超过95%的资源需积分: 50 192 浏览量 2013-11-01 15:41:06 上传评论 2 收藏 3.29MB ZIP 举报

：“漂亮的个人博客界面” 在这个主题中，“漂亮的个人博客界面”意味着我们要探讨的是如何创建或优化一个吸引人的、用户友好的个人博客设计。一个优秀的博客界面不仅应该美观，还要具备良好的用户体验，使得访客能够轻松浏览内容，找到他们感兴趣的信息。这包括合理的信息布局、色彩搭配、字体选择、交互设计等多个方面。：“简单的修改下就可以做个人的blog了，这个挺不错的” 这句话暗示我们可以从一个现有的模板或者基础设计出发，通过简单的定制和调整，就能打造出个性化的个人博客。这通常涉及到HTML、CSS和JavaScript等技术的应用。HTML用于构建页面结构，CSS负责样式设计，而JavaScript可以增加动态效果和交互性。对于初学者来说，找到一个合适的开源博客框架，如WordPress、Jekyll或Hexo，然后根据自己的需求进行修改，是快速建立个人博客的有效途径。：“博客”，“界面” “博客”标签意味着我们将重点讨论博客系统的设计与实现。博客作为一种在线日记或信息分享平台，其界面设计需兼顾内容展示和用户互动。而“界面”标签则提示我们需要关注视觉元素、布局、导航、响应式设计等方面，确保在不同设备上都能提供一致且舒适的浏览体验。【压缩包子文件的文件名称列表】：HTML1 看到“HTML1”这样的文件名，我们可以推断出这个压缩包可能包含一个基本的HTML文件，这可能是用来展示或作为个人博客界面的基础模板。HTML（HyperText Markup Language）是网页开发的基础，用于定义网页的结构和内容。通常，一个HTML文件会包含头部（head）、主体（body）和其他元素，如标题（title）、段落（p）、链接（a）等。开发者可以通过编辑这个文件，添加个人元素，比如头像、介绍、文章列表等，以创建独特的博客界面。创建一个“漂亮的个人博客界面”涉及多个步骤和技术，包括但不限于选择或创建HTML模板、自定义CSS样式以实现个性化设计、使用JavaScript增强交互性，并考虑响应式设计以适应不同的屏幕尺寸。这需要一定的编程知识，但通过学习和实践，任何人都可以打造一个既美观又实用的个人博客空间。

资源推荐

资源详情

资源评论

收起资源包目录

漂亮的个人博客界面（153个子文件）

prettyphoto.css 19KB

base.css 16KB

short-code.css 12KB

css3.css 4KB

slider.css 3KB

tiptip.css 2KB

reset.css 1KB

piecemaker.css 741B

tf_125x125_v5.gif 10KB

gr_125x125_v1.gif 10KB

tutorials_125x125_v2.gif 10KB

3d_125x125_v3.gif 10KB

aj_125x125_v3.gif 9KB

ad_125x125_v1.gif 8KB

preloader-dark.gif 7KB

loader.gif 6KB

preloader-light.gif 4KB

loader.gif 2KB

loading.gif 2KB

default_thumbnail.gif 227B

short-code.html 30KB

index.html 30KB

blog-detail.html 17KB

blog.html 16KB

portfolio.html 16KB

services.html 12KB

about.html 11KB

contact.html 11KB

index-3d-slider.html 10KB

full-width.html 10KB

404.html 8KB

slide4.jpg 351KB

slide2.jpg 344KB

slide5.jpg 281KB

slide1.jpg 258KB

slide3.jpg 212KB

demo_pretty_pt.jpg 90KB

motion-graphic2.jpg 80KB

locateus.jpg 71KB

about-1.jpg 65KB

website3.jpg 57KB

identity2.jpg 55KB

identity3.jpg 49KB

motion-graphic1.jpg 49KB

identity4.jpg 47KB

website4.jpg 45KB

identity1.jpg 45KB

website1.jpg 44KB

website2.jpg 44KB

motion-graphic3.jpg 40KB

logo1.jpg 34KB

logo2.jpg 31KB

logo3.jpg 30KB

logo4.jpg 23KB

video-light.jpg 3KB

maginifier-light.jpg 3KB

60x60.jpg 2KB

scripts.js 99KB

jquery-1.6.4.min.js 90KB

titilliumtext.font.js 34KB

jquery.nivo.slider.js 24KB

cufon-yui.js 18KB

custom.js 11KB

swfobject.js 10KB

shortcode.js 3KB

cufon-replace.js 2KB

light-bg.png 206KB

mock.png 71KB

top-abstract-bg.png 30KB

sprite.png 30KB

flick-img6.png 15KB

flick-img4.png 15KB

slider-bg.png 13KB

05_blog-detail_11.png 12KB

flick-img2.png 12KB

01_home_14.png 10KB

slide-overlay.png 9KB

logo.png 9KB

flick-img3.png 8KB

flick-img5.png 7KB

help_48.png 7KB

bug_48.png 7KB

flick-img1.png 7KB

01_home_05.png 7KB

sprite.png 7KB

05_blog-detail_20.png 6KB

05_blog-detail_15.png 6KB

05_blog-detail_18.png 6KB

01_home_14-05.png 6KB

pencil_48.png 5KB

briefcase_48.png 5KB

star1_48.png 5KB

logo-footer.png 5KB

seperator-980.png 5KB

statistics_48.png 5KB

print_48.png 5KB

clipboard_48.png 4KB

共 153 条

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Maxx</title><link rel="stylesheet" type="text/css" href="css/reset.css"><link rel="stylesheet" type="text/css" href="css/base.css"><link rel="stylesheet" type="text/css" href="css/tipTip.css"><link rel="stylesheet" type="text/css" href="css/short-code.css"><link rel="stylesheet" type="text/css" href="css/prettyPhoto.css"><link rel="stylesheet" type="text/css" href="css/css3.css"><link rel="stylesheet" type="text/css" href="css/slider.css"><script type="text/javascript" src="js/jquery-1.6.4.min.js"></script><script type="text/javascript" src="js/jquery.nivo.slider.js"></script><script type="text/javascript" src="js/cufon-yui.js"></script><script type="text/javascript" src="js/TitilliumText.font.js"></script><script type="text/javascript" src="js/cufon-replace.js"></script><script type="text/javascript" src="js/scripts.js"></script><script type="text/javascript" src="js/custom.js"></script><script type="text/javascript" src="js/shortcode.js"></script></head><body><div class="full-width-wrapper" id="header"> <div class="full-width-wrapper" id="abstract-bg">  <div class="fixed-width-wrapper" id="banner"> <a href="index.html" title="" class="logo"><img src="images/logo.png" alt="Maxx - The Modern HTML template" ></a> <ul class="social-network"> <li><a href="#" title="Facebook"><img src="images/icons/facebook.png" alt="" ></a></li> <li><a href="#" title="Twitter"><img src="images/icons/twitter.png" alt="" ></a></li> <li><a href="#" title="Delicious"><img src="images/icons/delicious.png" alt="" ></a></li> </ul> </div>   <div class="fixed-width-wrapper border-radius-5px" id="navigation-bar"> <div id="g-navigation"> <ul class="simple-drop-down-menu"> <li class="home-page border-radius-left-5px"><a href="index.html">Home</a></li> <li><a href="about.html" title="">About us</a></li> <li><a href="services.html" title="">Services</a> <ul> <li><a href="index.html" title="">Home Nivo Slider</a></li> <li><a href="index-3d-slider.html" title="">Home 3D Piece Maker</a></li> <li><a href="404.html" title="">404 page</a></li> <li><a href="#" title="">Demo submenu</a> <ul> <li><a href="#" title="">Sub menu 1</a></li> <li><a href="#" title="">Sub menu 2</a></li> <li><a href="#" title="">Sub menu 3</a></li> <li><a href="#" title="">Sub menu 4</a></li> <li><a href="#" title="">Sub menu 5</a></li> </ul> </li> <li><a href="services.html" title="">Our Services</a> </ul> </li> <li><a href="portfolio.html" title="">Portfolio</a></li> <li class="current"><a href="blog.html" title="">Blog</a> <ul> <li><a href="blog.html" title="">Blog post</a></li> <li><a href="blog-detail.html" title="">Single posts</a></li> <li><a href="full-width.html" title="">Full-Width</a></li> <li><a href="short-code.html" title="">Shortcode</a></li> </ul> </li> <li><a href="contact.html" title="">Contact us</a></li> </ul> </div> <div id="g-search"> <form action="" method="post"> <div><input type="text" class="input-field border-radius-left-3px reset-text" value="Search here..."></div> <div><button type="submit" title="Search" class="sprite"><em>Search</em></button></div> </form> </div> </div>  </div> </div>   <div class="full-width-wrapper"> <div class="fixed-width-wrapper" id="body-content">  <div id="content" class="fixed-width-wrapper"> <div class="header-text"> <ul id="breadcrumbs"> <li><a href="#" title="">Home</a></li> <li class="current"><a href="#" title="">Short code</a></li> </ul> <h1 class="first-word double-color sp">Short code</h1> </div>  <div class="post entry-content">  <h1><strong>Typography</strong></h1> <div class="hr clear sp"></div> <div class="one-third first"> <h3><strong>Heading title</strong></h3> <h1>This is <strong>Heading</strong> tag</h1> <h2>This is <strong>Heading</strong> tag</h2> <h3>This is <strong>Heading</strong> tag</h3> <h4>This is <strong>Heading</strong> tag</h4> </div> <div class="one-third"> <h3><strong>Unordered list</strong></h3> <ul class="unordered-list"> <li>Lorem ipsum dolor sit amet, consectetur</li> <li>Donec ligula mauris</li> <li>Aenean sed</li> <li>Nullam ven tincidunt dolor</li> <li>Lorem ipsum dolor</li> </ul> </div> <div class="one-third"> <h3><strong>Ordered list</strong></h3> <ol class="ordered-list"> <li>Lorem ipsum dolor sit amet, consectetur</li> <li>Donec ligula mauris</li> <li>Aenean sed</li> <li>Nullam ven tincidunt dolor</li> <li>Lorem ipsum dolor</li> </ol> </div> <div class="hr clear sp"></div> <div class="one-third first"> <h3>Align <strong>Left</strong></h3> <img src="images/pix/ad_125x125_v1.gif" class="align-left img-border"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ullamcorper ornare nulla, a mattis urna adipiscing sit amet. Duis luctus lacinia nulla a facilisis</p> </div> <div class="one-third"> <h3><strong>No image</strong></h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ullamcorper ornare nulla, a mattis urna adipiscing sit amet. Duis luctus lacinia nulla a facilisis. Quisque dignissim neque sit amet lectus adipiscing auctor at eu orci. Fusce vehicula bibendum mollis. Ut rutrum neque et sapien auctor feugiat. </p> </div> <div class="one-third"> <h3>Align <strong>Right</strong></h3> <img src="images/pix/aj_125x125_v3.gif" class="align-right img-border"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ullamcorper ornare nulla, a mattis urna adipiscing sit amet. Duis luctus lacinia nulla a facilisis</p> </div> <div class="hr clear sp"></div> <div class="two-third first"> <h3><strong>Table 1</strong></h3> <table width="100%" class="m-table"> <thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> <th>Header 4</th> <th>Header 5</th> </tr> </thead> <tbody> <tr> <td>Division 1</td> <td>Division 1</td> <td>Division 1</td> <td>Division 1</td> <td>Division 1</td> </tr> <tr> <td>Division 2</td> <td>Division 2</td> <td>Division 2</td> <td>Division 2</td> <td>Division 2</td> </tr> <tr> <td>Division 3</td> <td>Division 3</td> <td>Division 3</td> <td>Division 3</td> <td>Division 3</td> </tr> <tr> <td>Division 4</td> <td>Division 4</td> <td>Division 4</td> <td>Division 4</td> <td>Division 4</td> </tr> <tr> <td>Division 5</td> <td>Division 5</td> <td>Division 5</td> <td>Division 5</td> <td>Division 5</td> </tr> </tbody> </table> </div> <div class="one-third"> <h3><strong>Table 2</strong></h3> <table width="100%" class="m-table"> <tbody> <tr> <th>1</th> <td>Division 1</td> <td>Division 1</td> </tr> <tr> <th>2</th> <td>Division 2</td> <td>Division 2</td> </tr> <tr> <th>3</th> <td>Division 3</td> <td>Division 3</td> </tr> <tr> <th>4</th> <td>Division 4</td> <td>Division 4</td> </tr> <tr> <th>5</th> <td>Division 5</td> <td>Division 5</td> </tr> <tr> <th>6</th> <td>Division 6</td> <td>Division 6</td> </tr> </tbody> </table> </div>  <div class="hr clear sp"></div> <h1><strong>Colums</strong></h1> <div class="hr clear sp"></div>  <h3 class="first-word">Two column</h3> <div class="one-half first"> <p><span class="drop-cap circle">1</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dui nulla, vulputate vel tincidunt non, posuere quis tortor. Suspendisse potenti. Sed varius egestas dui, at molestie dolor volutpat sit amet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed aliquet volutpat dolor.</p> <blockquote><code><div class="one-half first"><p><span class

评论收藏

内容反馈