【免费】天空蓝三栏个人博客模板_蓝色博客html三栏简洁纯色.rar资源-CSDN文库

共15个文件

jpg：10个

png：2个

css：1个

需积分: 0 157 浏览量 2023-09-12 08:41:12 上传评论收藏 55KB RAR 举报

【天空蓝三栏个人博客模板】是一款基于HTML的网页设计模板，主要特色是采用蓝色调，结构为三栏布局，呈现出简洁且纯色的设计风格。这个压缩包包含了一系列的资源文件，用于构建一个完整的个人博客网站。我们来看一下压缩包中的文件列表： 1. `contact_icon.png`: 这个文件通常是联系图标，用于表示用户可以在博客上找到联系方式，如电子邮件或社交媒体链接。 2. `templatemo_image_02.jpg`, `templatemo_image_03.jpg`: 这些是模板图片，可能用于填充网站的背景或者内容区域，提供视觉吸引力。 3. `templatemo_button_01.jpg`: 这是一个按钮图片，通常用在页面上的交互元素，比如导航菜单、提交表单等。 4. `rss_icon.png`: RSS图标，代表Really Simple Syndication，用于订阅博客更新，方便用户通过RSS阅读器获取内容。 5. `templatemo_banner.jpg`: 作为博客顶部的横幅图片，可能是网站的logo或者主题展示。 6. `templatemo_footer_top_border.jpg`: 这可能是页脚上方的边框图片，用于美化页面底部的视觉效果。 7. `Thumbs.db`: 这是一个Windows系统自动生成的文件，用于存储缩略图信息，不直接作用于网页设计。 8. `index.html`: 这是网站的主页文件，包含了HTML代码，定义了网页的结构和内容。 9. `templatemo_top_panel.jpg`: 顶部面板图片，可能用于导航栏背景或其他顶部元素。 HTML（HyperText Markup Language）是网页设计的基础，它通过标记来组织网页内容和结构。在这个模板中，`index.html` 文件使用HTML语法创建了三栏布局，通常会包含头部、主体和底部三个部分。头部可能包含标题、元信息、导航链接等；主体部分则是三栏结构，左侧可能展示侧边栏信息，如最新文章、分类目录等；中间是主要内容区域；右侧则可以是广告、个人简介等。底部一般会有版权信息、页脚链接等。在创建这个博客模板时，开发者会利用CSS（Cascading Style Sheets）来控制样式和布局，JavaScript可能用于添加动态效果和交互功能。例如，按钮的点击效果、图片滑动展示、表单验证等。同时，为了适应不同设备，响应式设计也可能被应用，确保博客在手机、平板电脑和桌面电脑上都能良好显示。 “天空蓝三栏个人博客模板”是一个包含必要资源的HTML网页设计项目，旨在提供一个易于定制和部署的个人博客框架，用户可以根据自己的需求进行内容替换和个性化调整。使用这个模板，个人博主可以快速搭建起一个美观且功能齐全的在线空间。

资源推荐

资源详情

资源评论

收起资源包目录

天空蓝三栏个人博客模板_蓝色博客html三栏简洁纯色.rar （15个子文件）

templatemo_image_02.jpg 14KB

templatemo_footer_top_border.jpg 313B

Thumbs.db 27KB

templatemo_button_01.jpg 751B

templatemo_banner.jpg 361B

rss_icon.png 3KB

contact_icon.png 2KB

templatemo_image_03.jpg 5KB

templatemo_content_bg.jpg 614B

templatemo_menu_bg_repeat.jpg 332B

templatemo_menu_bg.jpg 1KB

index.html 11KB

templatemo_top_panel.jpg 2KB

templatemo_style.css 7KB

templatemo_image_01.jpg 14KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Sky Blue - free website template</title> <meta name="keywords" content="sky blue, free website template, CSS, HTML, 3-column" /> <meta name="description" content="Sky Blue is a free website template provided by templatemo.com" /> <link href="templatemo_style.css" rel="stylesheet" type="text/css" /> <script language="javascript" type="text/javascript"> function clearText(field) { if (field.defaultValue == field.value) field.value = ''; else if (field.value == '') field.value = field.defaultValue; } </script> </head> <body> <div id="templatemo_top_bar"> <div class="rss_contact_section"> <div class="rss_contact rss_button"> <a href="#">Subscribe</a> </div> <div class="rss_contact contact_button"> <a href="#">Contact</a> </div> </div> </div>  <div id="templatemo_banner_bar_wrapper"> <div id="templatemo_banner_bar"> <h1> <a href="#">Sky Blue <span>free css template</span></a> </h1> </div>  </div>  <div id="templatemo_menu_wrapper"> <div id="templatemo_menu"> <ul> <li><a href="#" class="current fast">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Awards</a></li> <li><a href="#">Testimonials</a></li> </ul> </div>  </div>  <div id="templatemo_content"> <div id="main_column"> <div class="section_w500"> <h2>Welcome to Sky Blue</h2> <a href="http://www.moobnn.com/"><img class="image_wrapper fl_image" src="images/templatemo_image_01.jpg" alt="html css templates" /></a> <p><span class="em_text">Sky Blue is a free css template is provided by <a href="http://www.moobnn.com" target="_parent" title="模板在线">模板在线</a> <a href="http://guantaow.taobao.com" target="_blank">厚朴网络淘宝店</a> for anyone. Feel free to download and use this template for your websites. Credit goes to Free Photos for photos.</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae turpis quis dui pellentesque semper. Suspendisse potenti. Fusce ullamcorper pellentesque lacinia.</p> </div> <div class="margin_bottom_20"></div> <div class="section_w500"> <h2><span></span>Best Website Templates</h2> <a href="#"><img class="image_wrapper fr_image" src="images/templatemo_image_02.jpg" alt="web templates" /></a> <p>Validate <a href="#" rel="nofollow">XHTML</a> & <a href="#" rel="nofollow">CSS</a>. Nulla tellus nisl, malesuada eu dictum blandit, feugiat ac sem. Morbi justo lorem, dapibus sed aliquet id, aliquam eu justo. Etiam urna nisi, hendrerit eu pellentesque quis, aliquet nec velit. Etiam at justo et risus feugiat ullamcorper ac non ligula. Morbi dapibus, ipsum eu laoreet fermentum, mauris mauris sollicitudin ante, ac ultricies velit lectus at justo. Etiam mi lacus, faucibus eu egestas eget, lacinia in libero. Aenean libero mauris, convallis tristique molestie at, vehicula feugiat neque. Morbi fermentum, eros eget pulvinar sollicitudin, risus purus iaculis turpis, varius consectetur eros leo eget ipsum.</p> <div class="margin_bottom_20"></div> <ul class="list_01"> <li>Maecenas malesuada congue nisi in interdum.</li> <li>Donec mattis urna id lorem blandit vitae pulvinar risus aliquam.</li> <li>Vestibulum suscipit erat vitae libero varius aliquam. Phasellus at tortor dui, ac elementum mauris.</li> </ul> <div class="button_01"><a href="#">Read more</a></div> </div> <div class="cleaner"></div> </div>  <div class="side_column_w200"> <div class="box"> <h3>Categories</h3> <ul class="side_menu"> <li><a href="#">Lorem ipsum dolor</a></li> <li><a href="#">Donec mattis egestas</a></li> <li><a href="#">Phasellus id purus</a></li> <li><a href="#">Nulla consequat</a></li> <li><a href="#">Mauris varius risus</a></li> <li><a href="#">Aenean vulputate</a></li> <li><a href="#">Etiam ultricies</a></li> <li><a href="#">Fusce quis diam sit</a></li> <li><a href="#">Sed pellentesque</a></li> <li><a href="#">Donec euismod enim</a></li> </ul> </div> <div class="box"> <h3>Partners</h3> <ul class="side_menu"> <li><a href="#" target="_parent">CSS Templates</a></li> <li><a href="#" target="_parent">Flash Templates</a></li> <li><a href="http://www.koflash.com" target="_parent">Websites Gallery</a></li> <li><a href="http://www.webdesignmo.com/blog" target="_parent">Web Design Blog</a></li> </ul> </div> </div>  <div class="side_column_w200"> <div class="box"> <h3>Search</h3> <form action="#" method="get"> <input type="text" value="Enter keyword here..." name="q" size="10" class="inputfield" title="searchfield" onfocus="clearText(this)" onblur="clearText(this)" /> <input type="submit" name="Search" value="Search" alt="Search" class="submitbutton" title="Search" /> </form> <div class="cleaner"></div> </div> <div class="box"> <h3>Popular Topics</h3> <div class="news_section"> <div class="news_title"><a href="#">Lorem ipsum dolor sit amet consectetur </a></div> <p>Maecenas tellus erat, dictum vel semper a, dapibus ac elit. Nunc rutrum pretium porta.</p> </div> <div class="news_section"> <div class="news_title"><a href="#">Aenean feugiat mattis est nec egestas</a></div> <p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p> </div> </div> <div class="box"> <h3>Quick Contact</h3> <form action="#" method="get"> <input type="text" value="Enter your name" name="name" size="10" class="inputfield" title="name" onfocus="clearText(this)" onblur="clearText(this)" /> <input type="text" value="Enter your email address" name="email" size="10" class="inputfield" title="email" onfocus="clearText(this)" onblur="clearText(this)" /> <textarea id="message_input" rows="5" cols=""></tex

评论收藏

内容反馈