花之家
Posted 勤能补拙
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了花之家相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title> 6 7 </title> 8 <link rel="stylesheet" type="text/css" href="index.css"/> 9 </head> 10 11 <body> 12 <a name="sh"></a> 13 <!--导航--> 14 <div id="holder"> 15 <div id="begin"> 16 <div id="timu"> 17 <h1> 18 <a href="#">WILDFLOWERS</a> 19 </h1> 20 </div> 21 22 <div id="daoh"> 23 <ul> 24 <li><a href="#">HOMEPAGE</a></li> 25 <li><a href="#">BLOG</a></li> 26 <li><a href="#">PHOTOS</a></li> 27 <li><a href="#">ABOUT</a></li> 28 <li><a href="#">CONTACT</a></li> 29 </ul> 30 </div> 31 </div> 32 <div> 33 <img src="images/img03.png" width="1000" height="40"/> 34 </div> 35 <!--导航结束--> 36 37 <div id="pic"> 38 <img src="images/img04.jpg"> 39 </div> 40 41 <div> 42 <img src="images/img03.png" width="1000" height="40"/> 43 </div> 44 45 <!-- 文章部分--> 46 <div id="wenz"> 47 <div id="youb"> 48 <div class="post"> 49 <h2> 50 <a href="#">WELCOME TO WILDFLOWERS</a> 51 </h2> 52 53 <p class="meta"> 54 <span>September 02, 2012</span> 55 <span>Posted by Someone</span> 56 </p> 57 58 <div class="scrap"> 59 <p> 60
body{ background:yellow url("images/img01.jpg"); } /* 导航*/ #holder{ width:1000px; margin:50px auto auto; } #begin{ height:100px; background:url("images/img02.jpg"); margin:auto auto; } #timu{ width:300px; height:100px; float:left; line-height:100px; margin:auto 100px auto 50px; } #timu a{ font-size:1.5em ; color:white; } #daoh{ height:100px; line-height:100px; float:left; } #daoh li{ list-style-type:none; float:left; margin-left:50px; } #daoh li a{ color:white; } /* 相片*/ #pic{ width:1000px; height:300px; background:white; } #pic img{ margin:16px 10px; } /* 文章右侧*/ #wenz{ background:#FFF ; width:1000px ; height:1400px ; } /*w=文章开始*/ #youb{ width:580px; height:1400px; float:left; } .post h2 a { font-size:30px; color:#79A62E;; } .post h2{ padding:30px 30px 20px ; } .post p span:nth-child(1) { float:left ; color: #5E5E5E; } .post p span:nth-child(2) { float:right ; color: #5E5E5E; } span{ padding-left:30px; } .meta{ font-size: 14px; } .scrap{ clear:both ; padding-left:33px; padding-top:20px; color: #787878; } p { line-height:180% ; } .hdu img{ margin-top:15px; } .bd{ font-size:15px; } .yd a{ color: #5E5E5E; } p.yd { margin:30px auto 40px ; } .post{ border-bottom:1px solid #E7EBED ; } /* 右侧内容*/ #for{ width:300px; height:1400px; float:left; margin-left:50px; } #for ul li a{ line-height:40px; border-bottom:1px solid #E7EBED ; color:#5E5E5E; } #for ul li{ list-style-type:none; } #for h2 { margin:50px auto 45px; color:#5E5E5E; } #wb p{ color:#527800 ; margin:10px 130px 80px; } /* 固定图标*/ #tub{ width:38px; position:fixed; right:0px; bottom:0px; } .pic{ width:38px; height:37px; margin-top:2px; background:gray; border-radius:3px 0 0 3px ; font-family:myzt; /************************这里就是引用字体*************** ****************/ line-height:37px; text-align:center; color:white; font-size:35px; position:relative ; } .jl{ margin-bottom:170px; } .icon{ width:38px ; height:37px ; display:block ; position:absolute; right:0; top:0; z-index:100; overflow:hidden ; text-align:center ; transition:background .2s ; } .icon-text{ background:red; width:150px; height:38px; font-size:14px; line-height:38px; position:absolute; right:-150px; top:0; z-index:99; text-align:center ; padding-left:left; border-radius:2px 0 0 2px ; transition:right .2s ease-in-out ; } a{ color:white; } .pic:nth-child(1):hover .icon-text{ right:0 ; } .pic:nth-child(1):hover .icon { background:red ; } .pic:nth-child(2):hover .icon-text{ right:0 ; } .pic:nth-child(2):hover .icon { background:red ; } .pic:nth-child(3):hover .icon-text{ right:0 ; } .pic:nth-child(3):hover .icon { background:red ; } .pic:nth-child(4):hover .icon-text{ right:0 ; } .pic:nth-child(4):hover .icon { background:red ; } .pic:nth-child(5):hover .icon-text{ right:0 ; } .pic:nth-child(5):hover .icon { background:red ; } .pic:nth-child(6):hover .icon-text{ right:0 ; } .pic:nth-child(6):hover .icon { background:red ; } .pic:nth-child(7):hover .icon-text{ right:0 ; } .pic:nth-child(7):hover .icon { background:red ; } .pic:nth-child(8):hover .icon-text{ right:0 ; } .pic:nth-child(8):hover .icon { background:red ; }
This is <b> WildFlowers</b>,a free,fully standards-compliant CSS template designed by FCT. 61 The photos in this template are from Fotogrph.This free template is released under a Creative Commons Attributions 3.0 license, so you are pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Aside from that, have fun with it :) 62 </p> 63 <p class="hdu"> 64 <img src="images/img06.jpg" width="545" height="200"/> 65 66 </p> 67 <p class="bd"> 68 Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in felis. Donec ut ante. In id eros. Suspendisse lacus, cursus egestas at sem. 69 </p> 70 <p class="yd"> 71 <a href="#">Read More</a> 72 73 <a href="#">Comments</a> 74 </p> 75 </div> 76 </div> 77 <!--第二部分--> 78 <div class="post"> 79 <h2> 80 <a href="#">LOREM IPSUM SED ALIQUAM</a> 81 </h2> 82 83 <p class="meta"> 84 <span>September 01, 2012</span> 85 <span>Posted by Someone</span> 86 </p> 87 88 <div class="scrap"> 89 90 <p class="hdu"> 91 <img src="images/img05.jpg" width="545" height="200"/> 92 93 </p> 94 <p class="bd"> 95 Sed lacus. Donec lectus. Nullam pretium nibh ut turpis. Nam bibendum. In nulla tortor, elementum ipsum. Proin imperdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in felis. Donec ut ante. In id eros. Suspendisse lacus, cursus egestas at sem. 96 </p> 97 <p class="yd"> 98 <a href="#">Read More</a> 99 100 <a href="#">Comments</a> 101 </p> 102 </div> 103 </div> 104 </div> 105 106 <!-- 右侧内容--> 107 <div id="for"> 108 <h2>Categories</h2> 109 <ul> 110 <li><a href="#">Aliquam libero</a></li> 111 <li><a href="#">Consectetuer adipiscing elit</a></li> 112 <li><a href="#">Metus aliquam pellentesque</a></li> 113 <li><a href="#">Suspendisse iaculis mauris</a></li> 114 <li><a href="#">Urnanet non molestie semper</a></li> 115 <li><a href="#">Proin gravida orci porttitor</a></li> 116 </ul> 117 118 <h2>BLOGROLL</h2> 119 <ul> 120 <li><a href="#">Aliquam libero</a></li> 121 <li><a href="#">Consectetuer adipiscing elit</a></li> 122 <li><a href="#">Metus aliquam pellentesque</a></li> 123 <li><a href="#">Suspendisse iaculis mauris</a></li> 124 <li><a href="#">Urnanet non molestie semper</a></li> 125 <li><a href="#">Proin gravida orci porttitor</a></li> 126 </ul> 127 128 <h2>ARCHIVES</h2> 129 <ul> 130 <li><a href="#">Aliquam libero</a></li> 131 <li><a href="#">Consectetuer adipiscing elit</a></li> 132 <li><a href="#">Metus aliquam pellentesque</a></li> 133 <li><a href="#">Suspendisse iaculis mauris</a></li> 134 <li><a href="#">Urnanet non molestie semper</a></li>