【免费】白色简洁的博客模板_白色大图企业精品漂亮web20博客.rar资源-CSDN文库

共26个文件

jpg：9个

gif：8个

html：5个

需积分: 0 201 浏览量 2023-09-10 11:00:25 上传评论收藏 214KB RAR 举报

这篇博客模板设计主要基于HTML语言，呈现出一种白色简洁的风格，适合用于企业或者个人的精品博客站点。HTML（HyperText Markup Language）是构建网页的基础语言，通过标记式的语法来描述网页结构，包括头部、主体、段落、链接等内容。在这个模板中，HTML代码将负责组织页面元素的位置和布局，确保内容的层次清晰且易于阅读。 `style.css` 是这个博客模板的核心样式文件，它使用CSS（Cascading Style Sheets）来定义网页的视觉表现。CSS允许我们将样式与HTML内容分离，提高了代码的可维护性和可重用性。通过设置字体、颜色、边距、布局等属性，可以实现博客的白色主题和大图展示效果。例如，可能包含对背景色、文字颜色、链接样式、按钮样式等方面的定义。 `userpic.gif`、`submit.gif`、`search.gif`等文件是图形资源，这些通常用于增强用户界面的美观性和交互性。`userpic.gif`可能是用户头像的默认图像，`submit.gif`和`search.gif`可能分别代表提交按钮和搜索按钮的图标，这些图标使得操作更加直观易懂。 `test_img_1.gif`和`test_img_2.gif`可能是用于测试或者示例的图像，它们在博客文章中起到补充文字内容、吸引读者注意力的作用。博客模板通常会考虑到图片的展示方式，如设置图片大小、边框、对齐方式等。 `menu_a.gif`和`menu_a_hover.gif`是菜单项的普通状态和鼠标悬停状态的图像，这表明模板具有动态的导航菜单。通过CSS，我们可以设定不同状态下的菜单项样式，提高用户体验。例如，当鼠标移动到菜单项上时，图像会改变，提示用户可以点击。 `spacer.gif`是一个透明的像素图像，常用于在网页布局中创建空白区域，以调整元素之间的间距，保持整体的视觉平衡。 `blog.html`是博客的主要页面，它包含了博客文章、侧边栏、页脚等各个部分的HTML结构。这里可能会有文章列表、评论区、导航栏等元素，通过内联样式或引用外部`style.css`文件来呈现设计样式。这个“白色简洁的博客模板”是一个利用HTML进行结构化，CSS进行样式化的网页设计项目，旨在提供一个美观、易用的博客平台。它融合了图像元素和动态效果，展示了HTML和CSS在网页设计中的强大功能。

资源推荐

资源详情

资源评论

收起资源包目录

白色简洁的博客模板_白色大图企业精品漂亮web20博客.rar （26个子文件）

heder_img.jpg 44KB

style.css 6KB

cuf_run.js 59B

support.html 8KB

img_2.jpg 26KB

gallery_4.jpg 2KB

gallery_6.jpg 2KB

arial.js 454KB

cufon-yui.js 18KB

menu_a_hover.gif 81B

gallery_5.jpg 2KB

menu_a.gif 81B

search.gif 576B

test_img_2.gif 176B

gallery_3.jpg 2KB

userpic.gif 943B

index.html 9KB

contact.html 7KB

about.html 8KB

submit.gif 654B

spacer.gif 43B

gallery_1.jpg 2KB

blog.html 9KB

gallery_2.jpg 2KB

img_1.jpg 29KB

test_img_1.gif 175B

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>moobnn.com 模板在线,网站模板,Div+CSS模板</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link href="style.css" rel="stylesheet" type="text/css" />  <script type="text/javascript" src="js/cufon-yui.js"></script> <script type="text/javascript" src="js/arial.js"></script> <script type="text/javascript" src="js/cuf_run.js"></script>  </head> <body> <div class="main"> <div class="header"> <div class="header_resize"> <div class="logo"> <h1><a href="index.html">international link</a><small>Simple web template</small></h1> </div> <div class="clr"></div> <div class="menu_nav"> <ul> <li><a href="index.html">Home</a></li> <li><a href="support.html">Support</a></li> <li><a href="about.html">About Us</a></li> <li class="active"><a href="blog.html">Blog</a></li> <li class="last"><a href="contact.html">Contact Us</a></li> </ul> <div class="search"> <form id="form" name="form" method="post" action=""> <span> <input name="q" type="text" class="keywords" id="textfield" maxlength="50" value="Search..." /> <input name="b" type="image" src="images/search.gif" class="button" /> </span> </form> </div>  </div> <div class="clr"></div> <div class="header_img"> <img src="images/heder_img.jpg" alt="image" width="960" height="288" /></div> </div> </div> <div class="clr"></div> <div class="content"> <div class="content_resize"> <div class="mainbar"> <div class="article"> <h2><span>A Blog</span> Entry</h2><div class="clr"></div> <p>Posted by <a href="#">Owner</a> <span> • </span> Filed under <a href="#">templates</a>, <a href="#">internet</a></p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra condimentum, lorem tellus eleifend magna, eget fringilla velit magna id neque. Curabitur vel urna. In tristique orci porttitor ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo. </p> <p>Tagged: <a href="#">orci</a>, <a href="#">lectus</a>, <a href="#">varius</a>, <a href="#">turpis</a></p> <p><a href="#"><strong>Comments (3)</strong></a> <span> • </span> May 27, 2010 <span> • </span> <a href="#"><strong>Edit</strong></a></p> </div> <div class="article"> <h2><span>3</span> Responses</h2><div class="clr"></div> <div class="comment"> <a href="#"><img src="images/userpic.gif" width="40" height="40" alt="user" class="userpic" /></a> <p><a href="#">admin</a> Says:<br />April 20th, 2009 at 2:17 pm</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum.</p> </div> <div class="comment"> <a href="#"><img src="images/userpic.gif" width="40" height="40" alt="user" class="userpic" /></a> <p><a href="#">Owner</a> Says:<br />April 20th, 2009 at 3:21 pm</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc justo tempus leo.</p> </div> <div class="comment"> <a href="#"><img src="images/userpic.gif" width="40" height="40" alt="user" class="userpic" /></a> <p><a href="#">admin</a> Says:<br />April 20th, 2009 at 2:17 pm</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum.</p> </div> </div> <div class="article"> <h2><span>Leave a</span> Reply</h2><div class="clr"></div> <form action="#" method="post" id="leavereply"> <ol><li> <label for="name">Name (required)</label> <input id="name" name="name" class="text" /> </li><li> <label for="email">Email Address (required)</label> <input id="email" name="email" class="text" /> </li><li> <label for="website">Website</label> <input id="website" name="website" class="text" /> </li><li> <label for="message">Your Message</label> <textarea id="message" name="message" rows="8" cols="50"></textarea> </li><li> <input type="image" name="imageField" id="imageField" src="images/submit.gif" class="send" /> <div class="clr"></div> </li></ol> </form> </div> </div> <div class="sidebar"> <div class="gadget"> <h2>Sidebar Menu</h2> <div class="clr"></div> <ul class="sb_menu"> <li><a href="#">Home</a></li> <li><a href="#">TemplateInfo</a></li> <li><a href="#">Style Demo</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Archives</a></li> <li><a href="http://www.dreamtemplate.com" title="moobnn.com">Web Templates</a></li> </ul> </div> <div class="gadget"> <h2><span>Sponsors</span></h2> <div class="clr"></div> <ul class="ex_menu"> <li><a href="http://www.dreamtemplate.com" title="moobnn.com">DreamTemplate</a><br /> Over 6,000+ Premium Web Templates</li> <li><a href="http://www.templatesold.com" title="WordPress Themes">TemplateSOLD</a><br /> Premium WordPress & Joomla Themes</li> <li><a href="http://www.imhosted.com" title="Affordable Hosting">ImHosted.com</a><br /> Affordable Web Hosting Provider</li> <li><a href="http://www.myvectorstore.com" title="Stock Icons">MyVectorStore</a><br /> Royalty Free Stock Icons</li> <li><a href="http://www.evrsoft.com" title="Website Builder">Evrsoft</a><br /> Website Builder Software & Tools</li> <li><a href="http://www.csshub.com/" title="CSS Templates">CSS Hub</a><br /> Premium CSS Templates</li> </ul> </div> <div class="gadget"> <h2>Wise Words</h2> <div class="clr"></div> <p> <img src="images/test_img_1.gif" alt="image" width="19" height="18" /> <em>We can let circumstances rule us, or we can take charge and rule our lives from within </em>.<img src="images/test_img_2.gif" alt="image" width="19" height="18" /></p> <p style="float:right;"><strong>Earl Nightingale</strong></p> </div> </div> <div class="clr"></div> </div> </div> <div class="fbg"> <div class="fbg_resize"> <div class="col c1"> <h2><span>Image Gallery</span></h2> <a href="#"><img src="images/gallery_1.jpg" width="58" height="58

评论收藏

内容反馈