【免费】黑色星光背景标准英文博客HTML5模板_黑色星光推广css3html5博客菜单标准透明.rar资源-CSDN文库

共28个文件

png：15个

js：4个

html：4个

需积分: 0 187 浏览量 2023-09-11 08:42:18 上传评论收藏 245KB RAR 举报

这个压缩包包含的是一个基于HTML5和CSS3的博客模板，设计风格为黑色星光背景，适合用于创建具有专业感和个性化的英文博客。模板的主要特点包括标准的HTML5结构、透明元素以及使用CSS3实现的动态效果。接下来，我们将详细探讨这些知识点。 1. HTML5: HTML5是超文本标记语言的最新版本，它引入了许多新的标签和功能，旨在提高网页的可读性、可访问性和互动性。例如，`<header>`、`<nav>`、`<article>`和`<footer>`等语义化标签，使得页面结构更加清晰，有利于搜索引擎优化（SEO）和无障碍访问。`index.html`、`another_page.html`和`page.html`可能就是使用HTML5编写的网页示例。 2. CSS3: CSS3是层叠样式表的第三个主要版本，它提供了许多增强的视觉和布局效果。例如，渐变（gradients）、阴影（shadows）、圆角（border-radius）和多列布局（multi-column layout）。`style.css`很可能是这个模板的主要样式表，其中包含了应用到页面元素的CSS3规则。 3. 透明元素: 在`style.css`中，可能会有CSS3的透明度控制，如`opacity`属性，或者通过`rgba()`函数来设置带有透明度的颜色。这使得星光背景和其他设计元素可以透过透明部分呈现出层次感。 4. 字体资源: `YanoneKaffeesatz-Regular.eot`是一种TrueType字体文件，可能被用作博客的定制字体，以提供更好的阅读体验。在CSS中，可以使用`@font-face`规则来引入这种自定义字体。 5. JavaScript: `jquery.js`是jQuery库的文件，这是一个广泛使用的JavaScript库，简化了DOM操作、事件处理和动画效果。`modernizr-1.5.min.js`是Modernizr，一个JavaScript库，用于检测浏览器对HTML5和CSS3特性的支持，帮助实现向后兼容。 6. 动态效果: `jquery.easing-sooper.js`是jQuery的扩展插件，提供了更多的缓动函数，用于创建更复杂的过渡和动画效果，比如平滑的滚动、淡入淡出等。 7. 图像资源: `graphic.jpg`可能是模板中的图像资源，用于装饰或增强博客的视觉效果。这个压缩包提供的模板展示了HTML5和CSS3在现代网页设计中的应用，结合JavaScript库和自定义字体，构建出一款具有专业外观且功能丰富的英文博客模板。对于学习和实践前端开发，特别是HTML5和CSS3的初学者来说，这是一个很好的参考资料。

资源推荐

资源详情

资源评论

收起资源包目录

黑色星光背景标准英文博客HTML5模板_黑色星光推广css3html5博客菜单标准透明.rar （28个子文件）

examples.html 8KB

style.css 9KB

contact.php 8KB

modernizr-1.5.min.js 11KB

examples.png 7KB

another_page.html 7KB

paperclip.png 5KB

jquery.sooperfish.js 4KB

menu_hover.png 181B

YanoneKaffeesatz-Regular.ttf 85KB

logo.png 91KB

graphic.jpg 917B

menubar.png 181B

browser.png 8KB

page.html 7KB

footer.png 145B

home.png 11KB

pattern.png 5KB

contact.png 6KB

arrows-white.png 938B

top.png 325B

bullet.png 761B

index.html 6KB

another_page.png 6KB

YanoneKaffeesatz-Regular.eot 28KB

jquery.easing-sooper.js 5KB

jquery.js 70KB

page.png 5KB

<!DOCTYPE HTML> <html> <head> <title>CSS3_two</title> <meta name="description" content="website description" /> <meta name="keywords" content="website keywords, website keywords" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="css/style.css" />  <script type="text/javascript" src="js/modernizr-1.5.min.js"></script> </head> <body> <div id="main"> <header> <div id="logo"> <div id="logo_text">  <h1><a href="index.html">CSS3<span class="logo_colour">_two</span></a></h1> <h2>Simple. Contemporary. Website Template.</h2> </div> </div> <nav> <div id="menu_container"> <ul class="sf-menu" id="nav"> <li><a href="index.html">Home</a></li> <li><a href="examples.html">Examples</a></li> <li><a href="page.html">A Page</a></li> <li><a href="another_page.html">Another Page</a></li> <li><a href="#">Example Drop Down</a> <ul> <li><a href="#">Drop Down One</a></li> <li><a href="#">Drop Down Two</a> <ul> <li><a href="#">Sub Drop Down One</a></li> <li><a href="#">Sub Drop Down Two</a></li> <li><a href="#">Sub Drop Down Three</a></li> <li><a href="#">Sub Drop Down Four</a></li> <li><a href="#">Sub Drop Down Five</a></li> </ul> </li> <li><a href="#">Drop Down Three</a></li> <li><a href="#">Drop Down Four</a></li> <li><a href="#">Drop Down Five</a></li> </ul> </li> <li><a href="contact.php">Contact Us</a></li> </ul> </div> </nav> </header> <div id="site_content"> <div id="sidebar_container"> <img class="paperclip" src="images/paperclip.png" alt="paperclip" /> <div class="sidebar"> <h3>Latest News</h3> <h4>New Website Launched</h4> <h5>January 1st, 2012</h5> <p>2012 sees the redesign of our website. Take a look around and let us know what you think.<br /><a href="#">Read more</a></p> </div> <img class="paperclip" src="images/paperclip.png" alt="paperclip" /> <div class="sidebar"> <h3>Useful Links</h3> <ul> <li><a href="#">First Link</a></li> <li><a href="#">Another Link</a></li> <li><a href="#">And Another</a></li> <li><a href="#">Last One</a></li> </ul> </div> <img class="paperclip" src="images/paperclip.png" alt="paperclip" /> <div class="sidebar"> <h3>More Useful Links</h3> <ul> <li><a href="#">First Link</a></li> <li><a href="#">Another Link</a></li> <li><a href="#">And Another</a></li> <li><a href="#">Last One</a></li> </ul> </div> </div> <div class="content"> <img style="float: left; vertical-align: middle; margin: 0 10px 0 0;" src="images/contact.png" alt="contact" /><h1 style="margin: 15px 0 0 0;">Contact Us</h1> <p>Say hello, using this contact form.</p> <?php // This PHP Contact Form is offered "as is" without warranty of any kind, either expressed or implied. // David Carter at www.css3templates.co.uk shall not be liable for any loss or damage arising from, or in any way // connected with, your use of, or inability to use, the website templates (even where David Carter has been advised // of the possibility of such loss or damage). This includes, without limitation, any damage for loss of profits, // loss of information, or any other monetary loss. // Set-up these 3 parameters // 1. Enter the email address you would like the enquiry sent to // 2. Enter the subject of the email you will receive, when someone contacts you // 3. Enter the text that you would like the user to see once they submit the contact form $to = 'enter email address here'; $subject = 'Enquiry from the website'; $contact_submitted = 'Your message has been sent.'; // Do not amend anything below here, unless you know PHP function email_is_valid($email) { return preg_match('/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i',$email); } if (!email_is_valid($to)) { echo '<p style="color: red;">You must set-up a valid (to) email address before this contact page will work.</p>'; } if (isset($_POST['contact_submitted'])) { $return = "\r"; $youremail = trim(htmlspecialchars($_POST['your_email'])); $yourname = stripslashes(strip_tags($_POST['your_name'])); $yourmessage = stripslashes(strip_tags($_POST['your_message'])); $contact_name = "Name: ".$yourname; $message_text = "Message: ".$yourmessage; $user_answer = trim(htmlspecialchars($_POST['user_answer'])); $answer = trim(htmlspecialchars($_POST['answer'])); $message = $contact_name . $return . $message_text; $headers = "From: ".$youremail; if (email_is_valid($youremail) && !eregi("\r",$youremail) && !eregi("\n",$youremail) && $yourname != "" && $yourmessage != "" && substr(md5($user_answer),5,10) === $answer) { mail($to,$subject,$message,$headers); $yourname = ''; $youremail = ''; $yourmessage = ''; echo '<p style="color: blue;">'.$contact_submitted.'</p>'; } else echo '<p style="color: red;">Please enter your name, a valid email address, your message and the answer to the simple maths question before sending your message.</p>'; } $number_1 = rand(1, 9); $number_2 = rand(1, 9); $answer = substr(md5($number_1+$number_2),5,10); ?> <form id="contact" action="contact.php" method="post"> <div class="form_settings"> <p><span>Name</span><input class="contact" type="text" name="your_name" value="<?php echo $yourname; ?>" /></p> <p><span>Email Address</span><input class="contact" type="text" name="your_email" value="<?php echo $youremail; ?>" /></p> <p><span>Message</span><textarea class="contact textarea" rows="5" cols="50" name="your_message"><?php echo $yourmessage; ?></textarea></p> <p style="line-height: 1.7em;">To help prevent spam, please enter the answer to this question:</p> <p><span><?php echo $number_1; ?> + <?php echo $number_2; ?> = ?</span><input type="text" name="user_answer" /><input type="hidden" name="answer" value="<?php echo $answer; ?>" /></p> <p style="padding-top: 15px"><span> </span><input class="submit" type="submit" name="contact_submitted" value="send" /></p> </div> </form> </div> </div> <div id="scroll"> <a title="Scroll to the top" class="top" href="#"><img src="images/top.png" alt="top" /></a> </div> <footer> <p><a href="index.html">Home</a> | <a href="examples.html">Examples</a> | <a href="page.html">A Page</a> | <a href="another_page.html">Another Page</a> | <a href="contact.php">Contact Us</a></p> <p>Copyright © CSS3_two | <a href="http://www.moobnn.com">模板在线</a> <a href="http://guantaow.taobao.com" target="_blank">厚朴网络淘宝店</a></p> </footer> </div> <!

评论收藏

内容反馈