【免费】黑色孔雀插画透明导航css3模板_黑色插画孔雀css3html5博客菜单简洁标准清新透明.rar资源-CSDN文库

共24个文件

png：6个

js：6个

html：4个

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

"黑色孔雀插画透明导航css3模板_黑色插画孔雀css3html5博客菜单简洁标准清新透明.rar" 所涉及的知识点主要集中在HTML、CSS3以及网页设计领域，特别是HTML5的新特性与CSS3的动画效果。这个模板可能是用于创建一个具有独特视觉风格的博客或网站，其特色在于使用了黑色背景与孔雀插图，以及透明导航菜单，为用户提供一种清新简洁的浏览体验。 HTML是网站的基础结构语言，`index.html`、`another_page.html`、`page.html`等文件名表明这些是网站的主要页面。HTML5引入了许多新元素，如`<header>`、`<nav>`、`<section>`、`<article>`等，它们使得页面结构更加语义化，易于理解和维护。同时，HTML5也提供了更好的离线存储和多媒体支持，例如`<video>`和`<audio>`标签用于内嵌视频和音频，而`<canvas>`则可用于动态图形。接下来，CSS3是样式表语言，用于定义HTML或XML（包括SVG、MathML等各种XML方言）文档的呈现。`style.css`是此项目的核心，它包含了一系列的CSS规则来定义页面布局、颜色、字体等视觉元素。CSS3引入了更丰富的选择器，如`:hover`、`:active`、`:focus`，以及媒体查询（Media Queries）用于响应式设计。此外，`YanoneKaffeesatz-Regular.eot`可能是一个字体文件，用于自定义网页的字体，CSS3的@font-face规则允许在网页上使用自定义字体。透明导航菜单是通过CSS3的透明度属性（opacity）和渐变（gradients）实现的，这提供了更动态的用户体验。而“黑色孔雀插画”可能体现在背景图像或页面元素的设计中，这可能利用了CSS3的背景图像属性（background-image）和定位（background-position）。图片文件如`1.jpg`、`2.jpg`、`3.jpg`和`graphic.jpg`可能被用作网页的装饰性元素，或者是文章内容的一部分。它们可以使用CSS3的背景图像属性或者`<img>`标签进行插入，并可以通过CSS进行布局和样式控制。这个压缩包中的资源展示了如何结合HTML5的新特性与CSS3的高级功能，创建一个富有个性且具有互动性的网站，特别是其对透明效果和动态导航的运用，充分体现了现代网页设计的趋势。对于学习HTML和CSS3的开发者来说，这是一个很好的实践案例。

资源推荐

资源详情

资源评论

收起资源包目录

黑色孔雀插画透明导航css3模板_黑色插画孔雀css3html5博客菜单简洁标准清新透明.rar （24个子文件）

examples.html 8KB

style.css 9KB

contact.php 8KB

2.jpg 62KB

modernizr-1.5.min.js 11KB

site_content.png 168B

another_page.html 5KB

jquery.sooperfish.js 4KB

menu_hover.png 181B

YanoneKaffeesatz-Regular.ttf 85KB

graphic.jpg 917B

1.jpg 25KB

menubar.png 199B

page.html 5KB

footer.png 199B

pattern.png 15KB

arrows-white.png 938B

image_slide.js 2KB

index.html 5KB

YanoneKaffeesatz-Regular.eot 28KB

jquery.easing-sooper.js 5KB

jquery.js 71KB

image_fade.js 2KB

3.jpg 24KB

<!DOCTYPE HTML> <html> <head> <title>CSS3_three</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">  <h1><a href="index.html">CSS<span class="logo_colour">3</span>_three</a></h1> </div> <nav> <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> </nav> </header> <div id="site_content"> <div id="sidebar_container"> <div class="sidebar"> <h1>Latest News</h1> <h2>New Website Launched</h2> <p>We've redesigned our own website. Take a look around and let us know what you think.</p> </div> <div class="sidebar"> <h1>Special Offers</h1> <h2>10% Discount</h2> <p>For the month of February 2012, we are offering a 10% discount for all new visitors.</p> </div> <div class="sidebar"> <h1>Contact Us</h1> <p>We'd love to hear from you. Call us on <strong style="color: #A50303;">01000 111 111</strong>, <a href="#">email us</a> or complete our <a href="contact.php">contact form</a>.</p> </div> </div> <div id="content"> <ul class="slideshow"> <li class="show"><img width="706" height="270" src="images/1.jpg" alt="image one" /></li> <li><img width="706" height="270" src="images/2.jpg" alt="image two" /></li> <li><img width="706" height="270" src="images/3.jpg" alt="image three" /></li> </ul> <div id="content_item"> <h1>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> <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_three | <a href="http://www.moobnn.com">模板在线</a> <a href="http://guantaow.taobao.com" target="_blank">厚朴网络淘宝店</a></p> </footer> <p> </p> <p> </p> </div>  <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.easing-sooper.js"></script> <script type="text/javascript" src="js/jquery.sooperfish.js"></script> <script type="text/javascript" src="js/image_fade.js"></script> <script type="text/javascript"> $(document).ready(funct

评论收藏

内容反馈