王孬孬young的html博客代码:)

最新推荐文章于 2021-11-01 09:31:55 发布

smallsmall_wang

最新推荐文章于 2021-11-01 09:31:55 发布

阅读量437

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/smallsmall_wang/article/details/84403837

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

小王的html博客代码~

我直接晒源代码了，嘻嘻:0
我的注册界面：

BisLite --myblog

<div id="header">
    
    <div class="container">
    
    <h1><a href="index.html">BisLite</a></h1>
    
    <div id="main_menu">
    
        <ul>
            <li class="first_list"><a href="index.html" class="main_menu_first main_current">回到首页</a></li>
            <li class="first_list"><a href="photo.html" class="main_menu_first">PHOTO</a></li>
            <li class="first_list with_dropdown">
                <a href="#"  class="main_menu_first">STUDY</a>
                <ul>
                    <li class="second_list second_list_border"><a href="http://www.runoob.com/sql/sql-tutorial.html" class="main_menu_second">SQL</a></li>
                    <li class="second_list second_list_border"><a href="http://www.runoob.com/java/java-tutorial.html" class="main_menu_second">JAVA</a></li>
                    <li class="second_list second_list_border"><a href="http://www.runoob.com/php/php-tutorial.html" class="main_menu_second">PHP</a></li>
                    <li class="second_list second_list_border"><a href="http://www.runoob.com/html/html-tutorial.html" class="main_menu_second">HTML</a></li>
                    <li class="second_list"><a href="http://www.runoob.com/cprogramming/c-tutorial.html" class="main_menu_second">c language</a></li>
                </ul>
     
            </li>
            <li class="first_list"><a href="myblog.html" class="main_menu_first">MY BLOG</a></li>
            <li class="first_list"><a href="checkin.html" class="main_menu_first">注册</a></li>
        </ul>
    
    </div> <!-- END #main_menu -->

    </div> <!-- END .container -->

</div> <!-- END #header -->

<div id="main_content">
        
    <div id="contact_area">
        
        <div class="container">
        
        <h2 id="contact">MY BLOG</h2>
        
        <div id="contact_info">
            
            <div id="contact_info_left">
                
                <p>欢迎来到Bislite
                <br />
                <br />
                如有疑问，请咨询: <a href="mailto:email 2746186865@qq.com" class="bold_text blue_text">email 2746186865@qq.com</a></p>
                
                <form action="#" method="post" id="contact_form">
                    <fieldset>                            
		    <ol>
                            <li>
			    <label for="name">昵称</label><input type="text" name="name" value="" size="77" maxlength="" id="name" />
		        </li>
		        <li>
                    	    <label for="email">邮箱地址</label><input type="text" name="email" value="" size="77" maxlength="" id="email" />
			</li>
                            <li>
                    	    <label for="email">所在行业</label><input type="text" name="email" value="" size="77" maxlength="" id="subject" />
			</li>
			<li>
			    <label for="message">来段个性的自我介绍吧~~</label><textarea name="message" rows="10" cols="79" id="message"></textarea>
			</li>
			<li>   &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;       
				<input type="submit" value="注册" size="" maxlength="" /> 
				&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;
				<input type="submit" value="登录" size="" maxlength="" /> 
			</li>
		    </ol>
                    </fieldset>
                </form>
                
            </div> <!-- END #contact_info_left -->
            
            <div id="contact_info_right">
                
                <div id="location_map">
                    
                    <h3>Share Life，Share Love</h3>
                    
                    <a href="#"><img src="images/blog4.jpg" alt="logo",width="420px",hheight="395px"/></a>
                    
                </div> <!-- END #location_map -->
                
                <div id="address">
                
                  
            <h3>联系我们</h3>
            <p><span class="bold_text">Welcome to BisLite </span>
            <br />
             <br />
                               地址：Always Street 265
            <br />
             <br />
            WeChat：BisLite
            <br />
            <br />
            Phone: 987-6543-210
             <br />
            <br />
            QQ：2746186865
             <br />
            </p>        
            </div> <!-- END #address -->
                
            </div> <!-- END #contact_info_right -->
            
        </div> <!-- END #contact_info -->
        
        </div> <!-- END .container -->
        
    </div> <!-- END #contact_area -->
    
</div> <!-- END #main_content -->

<div id="footer">
    
    <div class="container">
        
        <div id="footer_about" class="footer_info">
            
            <h4>关于我们</h4>
            <p>Bislite is a blog aimed at sharing life and the world. I hope you can find your own here，sharing love,sharing everything that warm the worlds Sometimes,what we need is to contact us on the 
            wonderful world,what we need is to see something we like and we want</p>
            
        </div> <!-- END #footer_about -->
        
        <div id="footer_explore" class="footer_info">
            
            <h4>发现</h4>
            <ul>
                <li><a href="index.html">主页</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#"> </a></li>
                <li><a href="portfolio.html"></a></li>
                <li><a href="checkin.html">博客</a></li>
            </ul>
            
        </div> <!-- END #footer_about -->
        
        <div id="footer_browse" class="footer_info">
            
            <h4>浏览设置</h4>
            <ul>
                <li><a href="#">职业</a></li>
                <li><a href="#">新闻 &amp; 媒体</a></li>
                <li><a href="contact.html">联系我们</a></li>
                <li><a href="#">服务条款</a></li>
                <li><a href="#">隐私条约</a></li>
            </ul>
            
        </div> <!-- END #footer_about -->
        
        <div id="footer_contact" class="footer_info">
            
            <h4>联系我们</h4>
            <p><span class="bold_text">Welcome to BisLite </span>
            <br />
                               地址：Always Street 265
            <br />
            WeChat：BisLite
            <br />
            <br />
            Phone: 987-6543-210
            <br />
            QQ：2746186865</p>
            
        </div> <!-- END #footer_about -->
        
        <div id="footer_connect" class="footer_info">
            
            <h4>分享到</h4>
            
            <ul>
                <li><a href="#" id="facebook" title="Facebook">Facebook</a></li>
                <li><a href="#" id="dribbble" title="Dribbble">Dribbble</a></li>
                <li><a href="#" id="pinterest" title="Pinterest">Pinterest</a></li>
                <li><a href="#" id="linkedin" title="LinkedIn">LinkedIn</a></li>
                <li><a href="#" id="skype" title="Skype">Skype</a></li>
                <li><a href="#" id="sharethis" title="Share This">ShareThis</a></li>
            </ul>
            
        </div> <!-- END #footer_about -->
        
        <p id="copyright">&copy; Copyright &copy; 2018 BisLite - 豫ICP备16005435号-1<a target="_blank" href="http//www.zjf88.com/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
        
    
    </div> <!-- END .container -->
    
</div> <!-- END #footer -->

我的博客代码： BisLite --myblog

<div id="header">
    
    <div class="container">
    
    <h1><a href="index.html">BisLite</a></h1>
    
    <div id="main_menu">
    
        <ul>
            <li class="first_list"><a href="index.html" class="main_menu_first main_current">回到首页</a></li>
            <li class="first_list"><a href="photo.html" class="main_menu_first">PHOTO</a></li>
            <li class="first_list with_dropdown">
                <a href="#"  class="main_menu_first">STUDY</a>
                <ul>
                    <li class="second_list second_list_border"><a href="http://www.runoob.com/sql/sql-tutorial.html" class="main_menu_second">SQL</a></li>
                    <li class="second_list second_list_border"><a href="http://www.runoob.com/java/java-tutorial.html" class="main_menu_second">JAVA</a></li>
                    <li class="second_list second_list_border"><a href="http://www.runoob.com/php/php-tutorial.html" class="main_menu_second">PHP</a></li>
                    <li class="second_list second_list_border"><a href="http://www.runoob.com/html/html-tutorial.html" class="main_menu_second">HTML</a></li>
                    <li class="second_list"><a href="http://www.runoob.com/cprogramming/c-tutorial.html" class="main_menu_second">c language</a></li>
                </ul>
     
            </li>
            <li class="first_list"><a href="myblog.html" class="main_menu_first">MY BLOG</a></li>
            <li class="first_list"><a href="checkin.html" class="main_menu_first">注册</a></li>
        </ul>
    
    </div> <!-- END #main_menu -->

    </div> <!-- END .container -->

</div> <!-- END #header -->

<div id="main_content">
        
    <div id="contact_area">
        
        <div class="container">
        
        <h2 id="contact">MY BLOG</h2>
        
        <div id="contact_info">
            
            <div id="contact_info_left">
                
             <p><font size="7">Welcome to my blog</font></p>
                </form>
                
            </div> <!-- END #contact_info_left -->
            
            <div id="contact_info_right">
                
                <div id="location_map">
                	
                    <a href="#"><img src="images/beijingtu _副本.jpg" alt="logo"/></a>
                    
                </div> <!-- END #location_map -->
                
                <div id="address">
          
            </div> <!-- END #address -->
                
            </div> <!-- END #contact_info_right -->
            
        </div> <!-- END #contact_info -->
        
        </div> <!-- END .container -->
        
    </div> <!-- END #contact_area -->
    
</div> <!-- END #main_content -->

<div id="footer">
    
    <div class="container">
        
        <div id="footer_about" class="footer_info">
            
            <h4>关于我们</h4>
            <p>Bislite is a blog aimed at sharing life and the world. I hope you can find your own here，sharing love,sharing everything that warm the worlds Sometimes,what we need is to contact us on the 
            wonderful world,what we need is to see something we like and we want</p>
            
        </div> <!-- END #footer_about -->
        
        <div id="footer_explore" class="footer_info">
            
            <h4>发现</h4>
            <ul>
                <li><a href="index.html">主页</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#"> </a></li>
                <li><a href="portfolio.html"></a></li>
                <li><a href="checkin.html">博客</a></li>
            </ul>
            
        </div> <!-- END #footer_about -->
        
        <div id="footer_browse" class="footer_info">
            
            <h4>浏览设置</h4>
            <ul>
                <li><a href="#">职业</a></li>
                <li><a href="#">新闻 &amp; 媒体</a></li>
                <li><a href="contact.html">联系我们</a></li>
                <li><a href="#">服务条款</a></li>
                <li><a href="#">隐私条约</a></li>
            </ul>
            
        </div> <!-- END #footer_about -->
        
        <div id="footer_contact" class="footer_info">
            
            <h4>联系我们</h4>
            <p><span class="bold_text">Welcome to BisLite </span>
            <br />
                               地址：Always Street 265
            <br />
            WeChat：BisLite
            <br />
            <br />
            Phone: 987-6543-210
            <br />
            QQ：2746186865</p>
            
        </div> <!-- END #footer_about -->
        
        <div id="footer_connect" class="footer_info">
            
            <h4>分享到</h4>
            
            <ul>
                <li><a href="#" id="facebook" title="Facebook">Facebook</a></li>
                <li><a href="#" id="dribbble" title="Dribbble">Dribbble</a></li>
                <li><a href="#" id="pinterest" title="Pinterest">Pinterest</a></li>
                <li><a href="#" id="linkedin" title="LinkedIn">LinkedIn</a></li>
                <li><a href="#" id="skype" title="Skype">Skype</a></li>
                <li><a href="#" id="sharethis" title="Share This">ShareThis</a></li>
            </ul>
            
        </div> <!-- END #footer_about -->
        
        <p id="copyright">&copy; Copyright &copy; 2018 BisLite - 豫ICP备16005435号-1<a target="_blank" href="http//www.zjf88.com/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
        
    
    </div> <!-- END .container -->
    
</div> <!-- END #footer -->

我的主界面： Small wang's blog

<div id="header">
    
    <div class="container">
    
    <h1><a href="index.html">BisLite</a></h1>
    
    <div id="main_menu">
    
        <ul>
            <li class="first_list"><a href="index.html" class="main_menu_first main_current">首页</a></li>
            <li class="first_list"><a href="photo.html" class="main_menu_first">PHOTO</a></li>
            <li class="first_list with_dropdown">
                <a href="#"  class="main_menu_first">STUDY</a>
                <ul>
                    <li class="second_list second_list_border"><a href="http://www.runoob.com/sql/sql-tutorial.html" class="main_menu_second">SQL</a></li>
                    <li class="second_list second_list_border"><a href="http://www.runoob.com/php/php-tutorial.html" class="main_menu_second">PHP</a></li>
                    <li class="second_list second_list_border"><a href="http://www.runoob.com/css/css-tutorial.html" class="main_menu_second">CSS</a></li>
                    <li class="second_list second_list_border"><a href="http://www.runoob.com/java/java-tutorial.html" class="main_menu_second">JAVA</a></li>
                    <li class="second_list"><a href="http://www.runoob.com/html/html-tutorial.html" class="main_menu_second">HTML</a></li>
                </ul>
            </li>
            <li class="first_list"><a href="myblog.html" class="main_menu_first">MY BLOG</a></li>
            <li class="first_list"><a href="checkin.html" class="main_menu_first">注册</a></li>
        </ul>
    
    </div> <!-- END #main_menu -->

    </div> <!-- END .container -->

</div> <!-- END #header -->

<div id="main_content">
        
    <div id="slideshow_area">
    
    <div class="container">
        
        <div id="slideshow_container">
            
            <ul>
                <li><img src="" alt="" /></li>
            </ul>
            
            <div id="slideshow_pagination">
                
                <ul>
                    <li><a href="#"></a></li>
                    <li><a href="#"></a></li>
                    <li><a href="#" class="current"></a></li>
                    <li><a href="#"></a></li>
                    <li><a href="#"></a></li>
                </ul>
                
            </div> <!-- END #slideshow_pagination -->
        
        </div> <!-- END #slideshow_container -->
        
    </div> <!-- END .container -->

    </div> <!-- END #slideshow_area -->
        
    <div id="mid_content">
        
        <div class="container">
            
        <div class="mid_content_info mid_content_space">
                
            <h2 id="clean">《1984》</h2>
            <p> “千遍一律的时代，孤独的时代，老大哥的时代，双重思想的时代，向未来，向过去，向一个思想自由、人们各不相同、但生活并不孤独的时代——向一个真理存在、做过的事不能抹掉的时代致敬！”</p>
            <a href="https://baike.baidu.com/item/一九八四/2672?fr=aladdin"><img src="images/arrow_right.png" alt="arrow right" />了解更多</a>
                
        </div>
        <div class="mid_content_info mid_content_space">

            <h2 id="responsive">《放牛班的春天》</h2>
            <p>一个外表看起来懦弱，实则内心强大的落魄音乐家，平淡的外表，安静的内心，从来都没有寄希望于出名的音乐老师，他不是成功的音乐家，但又是成功的音乐家。电影当中，承载了所有对于伟大老师的描绘。。。</p>
            <a href="https://baike.baidu.com/item/放牛班的春天/6878535?fr=aladdin"><img src="images/arrow_right.png" alt="arrow right" />了解更多</a>
                
        </div>
            
        <div class="mid_content_info mid_content_space">
                
            <h2 id="fully">《love yourself》</h2>
            <p> 我也不想因为等喜欢的人的消息熬夜，最后失望睡去。但是还是想等到，love yourself，学会爱他人的同时也要学会爱自己，给自己一点空间与时间去充实自己，丰富自己，最后变成更好的自己。。。</p>
            <a href="https://music.163.com/#/song?id=36496695&market=baiduqk"><img src="images/arrow_right.png" alt="arrow right" />了解更多</a>
                
        </div>
            
        <div class="mid_content_info">
                
            <h2 id="ready">网站精选</h2>
            <p>知乎者也,知乎是网络问答社区,各行各业的用户分享着彼此的知识经验和见解,为中文互联网源源不断地提供多种多样的信息。对于发散思维的整合，是知乎的一大特色。来知乎，解答人生。</p>
            <a href="https://www.zhihu.com/"><img src="images/arrow_right.png" alt="arrow right" />了解更多</a>
                
        </div>
        
        </div> <!-- END .container -->
            
    </div> <!-- END #mid_content -->

    <div id="latest_works">
        
        <h3>精彩瞬间</h3>
        
        <div id="carousel_nav">
            
            <a href="#"><img src="images/bluearrow_left.png" alt="arrow left" /></a>
            <a href="#"><img src="images/bluearrow_right.png" alt="arrow right" /></a>
        
        </div> <!-- END #carousel_nav -->
    
        <div id="carousel_wrapper">
        
            <ul>
                <li id="work01">
                    <a href="#"><img src="images/sample_view.gif" alt="work01" /></a>
                </li>
                <li id="work02">
                    <a href="#"><img src="images/sample_view.gif" alt="work02" /></a>
                </li>
                <li id="work03">
                    <a href="#"><img src="images/sample_view.gif" alt="work03" /></a>
                </li>
                <li id="work04">
                    <a href="#"><img src="images/sample_view.gif" alt="work04" /></a>
                </li>
            </ul>
        
        </div> <!-- END #carousel_wrapper -->
    
    </div> <!-- END #latest_works -->

    <div id="bottom_content">

        <div id="testimonials">
    
            <h3>每日语句分享：</h3>
            <p>真正的爱，能够使人发生改变，在本质上是一种自我扩充，而非纯粹的自我牺牲。真正的爱，能使自我更为完善。爱，在某种意义上是自私的，最终的追求则是自我完善。当然，自私与否，不是判定爱的标准，惟一的判断标准是：爱———永远追求心智的成熟，除此以外，都不是真正的爱。
            <br />
            <br />
            <span class="testimonial_name">By《少有人走的路 》</span></p>
    
        </div> <!-- END #testimonials -->

        <div id="clients">
            
            <h3>合作媒体</h3>
    
            <ul>
                <li><img src="images/client01.jpg" alt="Cox Communications" /></li>
                <li><img src="images/client02.jpg" alt="CNN" /></li>
                <li><img src="images/client03.jpg" alt="Apartment Finder" /></li>
                <li><img src="images/client04.jpg" alt="John Deere" /></li>
                <li><img src="images/client05.jpg" alt="Banana Boat" /></li>
                <li><img src="images/client06.jpg" alt="Fuji Film" /></li>
            </ul>
    
        </div> <!-- END #clients -->

    </div> <!-- END #bottom_content -->

    <div id="download">
    
        <p> 如果你想更方便更快捷的使用Bislite来分享你的生活，请点击右侧按钮下载手机客户端。Share Life,Share Love。</p>
        <a href="#">APP 下载</a>
    
    </div> <!-- END #download -->
    
</div> <!-- END #main_content -->

<div id="footer">
    
    <div class="container">
        
          <div id="footer_about" class="footer_info">
            
            <h4>关于我们</h4>
            <p>Bislite is a blog aimed at sharing life and the world. I hope you can find your own here，sharing love,sharing everything that warm the worlds Sometimes,what we need is to contact us on the 
            wonderful world,what we need is to see something we like and we want</p>
            
        </div> <!-- END #footer_about -->
        
        <div id="footer_explore" class="footer_info">
            
            <h4>发现</h4>
            <ul>
                <li><a href="index.html">主页</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#"> </a></li>
                <li><a href="portfolio.html"></a></li>
                <li><a href="checkin.html">博客</a></li>
            </ul>
            
        </div> <!-- END #footer_about -->
        
        <div id="footer_browse" class="footer_info">
            
            <h4>浏览设置</h4>
            <ul>
                <li><a href="#">职业</a></li>
                <li><a href="#">新闻 &amp; 媒体</a></li>
                <li><a href="contact.html">联系我们</a></li>
                <li><a href="#">服务条款</a></li>
                <li><a href="#">隐私条约</a></li>
            </ul>
            
        </div> <!-- END #footer_about -->
        
        <div id="footer_contact" class="footer_info">
            
            <h4>联系我们</h4>
            <p><span class="bold_text">Welcome to BisLite </span>
            <br />
                               地址：Always Street 265
            <br />
            WeChat：BisLite
            <br />
            <br />
            Phone: 987-6543-210
            <br />
            QQ：2746186865</p>
            
        </div> <!-- END #footer_about -->
        
        <div id="footer_connect" class="footer_info">
            
            <h4>分享到</h4>
            
            <ul>
                <li><a href="#" id="facebook" title="Facebook">Facebook</a></li>
                <li><a href="#" id="dribbble" title="Dribbble">Dribbble</a></li>
                <li><a href="#" id="pinterest" title="Pinterest">Pinterest</a></li>
                <li><a href="#" id="linkedin" title="LinkedIn">LinkedIn</a></li>
                <li><a href="#" id="skype" title="Skype">Skype</a></li>
                <li><a href="#" id="sharethis" title="Share This">ShareThis</a></li>
            </ul>
            
        </div> <!-- END #footer_about -->
        
        <p id="copyright">&copy; Copyright &copy; 2013.Company name All rights reserved.<a target="_blank" href="http//www.zjf88.com/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
        
    
    </div> <!-- END .container -->
    
</div> <!-- END #footer -->

我的照片墙：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http//www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>BisLite - Portfolio</title>
    <link rel="stylesheet" type="text/css" href="stylesheets/reset.css" />
    <link rel="stylesheet" type="text/css" href="stylesheets/main.css" />
    
</head>
<body>
    <div id="header">
        <div class="container">
        <h1><a href="index.html">BisLite</a></h1>
        <div id="main_menu">
            <ul>
                <li class="first_list"><a href="index.html" class="main_menu_first">首页</a></li>
                <li class="first_list"><a href="#" class="main_menu_first">PHOTO</a></li>
                <li class="first_list with_dropdown">
                    <a href="#"  class="main_menu_first">STUDY</a>
                <ul>
                        <li class="second_list second_list_border"><a href="http://www.runoob.com/sql/sql-tutorial.html" class="main_menu_second">SQL</a></li>
                        <li class="second_list second_list_border"><a href="http://www.runoob.com/php/php-tutorial.html" class="main_menu_second">PHP</a></li>
                        <li class="second_list second_list_border"><a href="http://www.runoob.com/css/css-tutorial.html" class="main_menu_second">CSS</a></li>
                        <li class="second_list second_list_border"><a href="http://www.runoob.com/java/java-tutorial.html" class="main_menu_second">JAVA</a></li>
                        <li class="second_list"><a href="http://www.runoob.com/html/html-tutorial.html" class="main_menu_second">HTML</a></li>
                    </ul>
                </li>
                <li class="first_list"><a href="myblog.html" class="main_menu_first">MY BLOG</a></li>
                <li class="first_list"><a href="checkin.html" html" class="main_menu_first">注册</a></li>
            </ul>
        
        </div> <!-- END #main_menu -->
    
        </div> <!-- END .container -->
    
    </div> <!-- END #header -->
    
    <div id="main_content">
            
        <div id="portfolio_area">
            
            <div class="container">
            
            <h2 id="portfolio">Show yourself</h2>
            
            <div id="portfolio_menu">
                
                <ul>
                    <li><a href="#" class="portfolio_menu_current"><b>相册集&emsp; &emsp; &emsp; &emsp; &emsp; &emsp;</b></a></li>
                    <li><a href="#"><b>life&emsp; &emsp; &emsp; &emsp; &emsp; &emsp;</b></a></li>
                    <li><a href="#"><b>Music&emsp; &emsp; &emsp; &emsp; &emsp; &emsp;</b</a></li>
                    <li><a href="#"><b>Book&emsp; &emsp; &emsp; &emsp; &emsp; &emsp;</b</a></li>
                   </b
                </ul>
                
            </div> <!-- END #portfolio_menu -->
            
            <div id="portfolio_list">
                
                <ul>
                    <li id="work01">
                        <a href="#"><img src="images/sample_view.gif" alt="work01" /></a>
                    </li>
                    <li id="work02">
                        <a href="#"><img src="images/sample_view.gif" alt="work02" /></a>
                    </li>
                    <li id="work03">
                        <a href="#"><img src="images/sample_view.gif" alt="work03" /></a>
                    </li>
                    <li id="work04">
                        <a href="#"><img src="images/sample_view.gif" alt="work04" /></a>
                    </li>
                    <li id="work05">
                        <a href="#"><img src="images/sample_view.gif" alt="work05" /></a>
                    </li>
                    <li id="work06">
                        <a href="#"><img src="images/sample_view.gif" alt="work06" /></a>
                    </li>
                    <li id="work07">
                        <a href="#"><img src="images/sample_view.gif" alt="work07" /></a>
                    </li>
                    <li id="work08">
                        <a href="#"><img src="images/sample_view.gif" alt="work08" /></a>
                    </li>
                    <li id="work09">
                        <a href="#"><img src="images/sample_view.gif" alt="work09" /></a>
                    </li>
                    <li id="work10">
                        <a href="#"><img src="images/sample_view.gif" alt="work10" /></a>
                    </li>
                    <li id="work11">
                        <a href="#"><img src="images/sample_view.gif" alt="work11" /></a>
                    </li>
                    <li id="work12">
                        <a href="#"><img src="images/sample_view.gif" alt="work12" /></a>
                    </li>
                    <li id="work13">
                        <a href="#"><img src="images/sample_view.gif" alt="work13" /></a>
                    </li>
                    <li id="work14">
                        <a href="#"><img src="images/sample_view.gif" alt="work14" /></a>
                    </li>
                    <li id="work15">
                        <a href="#"><img src="images/sample_view.gif" alt="work15" /></a>
                    </li>
                    <li id="work16">
                        <a href="#"><img src="images/sample_view.gif" alt="work16" /></a>
                    </li>
                </ul>
                
            </div> <!-- END #portfolio_list -->
            
            <div id="portfolio_pagination">
                
                <ul>
                    <li><a href="#" class="pagination_current">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#" id="pagination_next"><img src="images/next_button.png" alt="next" /></a></li>
                    
                </ul>
                
            </div> <!-- END #portfolio_pagination -->
            
            </div> <!-- END .container -->
            
        </div> <!-- END #portfolio_area -->
        
    </div> <!-- END #main_content -->
    
    <div id="footer">
        
        <div class="container">
            
            <div id="footer_about" class="footer_info">
                <h4>关于我们</h4>
                <p>Bislite is a blog aimed at sharing life and the world. I hope you can find your own here，sharing love,sharing everything that warm the worlds Sometimes,what we need is to contact us on the 
                wonderful world,what we need is to see something we like and we want</p>
                
            </div> <!-- END #footer_about -->
            
            <div id="footer_explore" class="footer_info">
                
                <h4>发现</h4>
                <ul>
                    <li><a href="index.html">主页</a></li>
                    <li><a href="#">关于我们</a></li>
                    <li><a href="#"> </a></li>
                    <li><a href="portfolio.html"></a></li>
                    <li><a href="checkin.html">博客</a></li>
                </ul>
                
            </div> <!-- END #footer_about -->
            
            <div id="footer_browse" class="footer_info">
                
                <h4>浏览设置</h4>
                <ul>
                    <li><a href="#">职业</a></li>
                    <li><a href="#">新闻 &amp; 媒体</a></li>
                    <li><a href="contact.html">联系我们</a></li>
                    <li><a href="#">服务条款</a></li>
                    <li><a href="#">隐私条约</a></li>
                </ul>
                
            </div> <!-- END #footer_about -->
            
            <div id="footer_contact" class="footer_info">
                
                <h4>联系我们</h4>
                <p><span class="bold_text">Welcome to BisLite </span>
                <br />
                                   地址：Always Street 265
                <br />
                WeChat：BisLite
                <br />
                <br />
                Phone: 987-6543-210
                <br />
                QQ：2746186865</p>
                
            </div> <!-- END #footer_about -->
            
            <div id="footer_connect" class="footer_info">
                
                <h4>分享到</h4>
                
                <ul>
                    <li><a href="#" id="facebook" title="Facebook">Facebook</a></li>
                    <li><a href="#" id="dribbble" title="Dribbble">Dribbble</a></li>
                    <li><a href="#" id="pinterest" title="Pinterest">Pinterest</a></li>
                    <li><a href="#" id="linkedin" title="LinkedIn">LinkedIn</a></li>
                    <li><a href="#" id="skype" title="Skype">Skype</a></li>
                    <li><a href="#" id="sharethis" title="Share This">ShareThis</a></li>
                </ul>
                
            </div> <!-- END #footer_about -->
            </div> <!-- END #footer_about -->
            
            <p id="copyright">&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&copy; Copyright &copy; 2013.Company name All rights reserved.<a target="_blank" href="http//www.zjf88.com/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
            
        
        </div> <!-- END .container -->
        
    </div> <!-- END #footer -->
    
<div style="display:none"><script src='http//v7.cnzz.com/stat.php?id=155540&web_id=155540' language='JavaScript' charset='gb2312'></script></div>
</body>
</html>

因为自身技术的原因，我仿照了一些模板，然后在STUDY的板块，我直接用超链接连接到了其他的一些学习网站，这样只是为了…emmm 好看（/w)，所以多多包涵~~在照片墙里面我插入了16张图片… ps:代码中的图片格式需要调整，图片我就不放上来了，下面是一些有关网页css的代码…

这是主界面的css代码：

 /* ----- General Styling ----- */

body {
    font-family: Arial, sans-serif;
}

.container, #latest_works, #bottom_content, #download {
    margin: auto;
    width: 1000px;
}

.bold_text {
    font-weight: bold;
}

.blue_text {
    color: #2aacc8;
    font-size: 15px;
}

/* ----- General Styling ----- */

/* ----- Header Styling ----- */

#header {
    background: #e8ebf1;
    height: 120px;
}

h1 {
    float: left;
    margin-top: 37px;
}

h1 a {
    background: url(../images/logo.png) no-repeat;
    display: block;
    height: 37px;
    text-indent: -9999px;
    width: 148px;
}

/* ----- Header Styling ----- */

/* ----- Main Navigation Styling ----- */

#main_menu {
    float: right;
    margin-top: 54px;
}

.first_list {
    float: left;
    margin: 0 14px;
}

.main_menu_first {
    color: #000;
    font-size: 13px;
    font-weight: bold;
    padding: 8px 8px;
    text-transform: uppercase;
}

.main_menu_first:hover {
    border-top: 5px solid #2aacc8;
}

.with_dropdown {
    position: relative;
}

.with_dropdown li a {
    display: block;
}

.with_dropdown ul {
    background: #fff;
    border-bottom: 5px solid #2aacc8;
    padding: 12px 0;
    position: absolute;
    top: 24px;
    visibility: hidden;
    width: 197px;
}

.first_list:hover.first_list ul {
    visibility: visible;
}

.with_dropdown .main_menu_first {
    background: url(../images/arrow_down.png) no-repeat 92%;
    padding-right: 23px;
}

.with_dropdown:hover .main_menu_first {
    background: #fff url(../images/arrow_down.png) no-repeat 92%;
    border-top: 5px solid #2aacc8;
    color: #2aacc8;
}

.second_list {
    margin: 0 5px;
    padding: 10px;
}

.second_list_border {
    border-bottom: 1px solid #e7e7e7;
}

.main_menu_second {
    color: #000;
    font-size: 13px;
    text-transform: capitalize;
}

.main_menu_second:hover {
    color: #2aacc8;
}

.main_current {
    border-top: 5px solid #2aacc8;
}

/* ----- Main Navigation Styling ----- */

/* ----- Slideshow Styling ----- */

#slideshow_area {
    background: #81e4ed url(../images/banner_shadow.png) repeat-x;
    border-top: 1px solid #6ec2ca;
    padding: 19px 0 28px 0;
}

#mid_content {
    border-bottom: 1px solid #d9d9d9;
    background: #e8ebf1;
    height: 300px;
}

#slideshow_pagination {
    margin: 10px auto;
    width: 160px;
}

#slideshow_pagination li {
    float: left;
    margin: 0 9px;
}

#slideshow_pagination a {
    background: url(../images/grey_button.png) no-repeat;
    display: block;
    height: 14px;
    width: 14px;
}

#slideshow_pagination a.current {
    background: url(../images/white_button.png) no-repeat;
}

/* ----- Slideshow Styling ----- */

/* ----- Home Mid Content Styling ----- */

.mid_content_info {
    float: left;
    font-size: 13px;
    margin-top: 60px;
    width: 220px;
}

.mid_content_info h2 {
    font-size: 15px;
    font-weight: bold;
    height: 28px;
    margin-bottom: 15px;
    padding: 12px 0 0 59px;
}

.mid_content_info p {
    color: #363636;
    line-height: 20px;
    margin-bottom: 22px;
}

.mid_content_info a {
    color: #2aacc8;
}

.mid_content_info a img {
    margin: 0 8px 1px 0;
}

.mid_content_info a:hover {
    text-decoration: underline;
}

.mid_content_space {
    margin-right: 40px;
}

#clean {
    background: url(../images/pen_icon.png) no-repeat left;
}

#responsive {
    background: url(../images/screen_icon.png) no-repeat left;
}

#fully {
    background: url(../images/layer_icon.png) no-repeat left;
}

#ready {
    background: url(../images/paperplane_icon.png) no-repeat left;
}

#latest_works {
    clear: left;
}

#latest_works h3 {
    background: url(../images/cursor_icon.png) no-repeat left;
    float: left;
    font-size: 15px;
    font-weight: bold;
    height: 16px;
    margin: 19px 0 15px 0;
    padding: 8px 0 0 38px;
}

#carousel_nav {
    float: right;
    margin-top: 20px;
}

#carousel_nav a {
    margin-left: 6px;
}

#carousel_wrapper {
    border-top: 1px solid #dfe1e5;
    border-bottom: 1px solid #dfe1e5;
    clear: left;
    height: 220px;
}

#carousel_wrapper li {
    float: left;
    margin: 30px 15px;
}

/* ----- Carousel and Portfolio Styling ----- */

#carousel_wrapper li, #portfolio_list li {
    height: 160px;
    position: relative;
    width: 220px;
}

#carousel_wrapper li a img, #portfolio_list li a img {
    bottom: 0;
    position: absolute;
    visibility: hidden;
}

#carousel_wrapper li:hover a img, #portfolio_list li:hover a img {
    visibility: visible;
}

#work01 {
    background: url(../images/latest_work01.jpg) no-repeat;
}

#work02 {
    background: url(../images/latest_work02.jpg) no-repeat;
}

#work03 {
    background: url(../images/latest_work03.jpg) no-repeat;
}

#work04 {
    background: url(../images/latest_work04.jpg) no-repeat;
}

#work05 {
    background: url(../images/latest_work05.jpg) no-repeat;
}

#work06 {
    background: url(../images/latest_work06.jpg) no-repeat;
}

#work07 {
    background: url(../images/latest_work07.jpg) no-repeat;
}

#work08 {
    background: url(../images/latest_work08.jpg) no-repeat;
}

#work09 {
    background: url(../images/latest_work09.jpg) no-repeat;
}

#work10 {
    background: url(../images/latest_work10.jpg) no-repeat;
}

#work11 {
    background: url(../images/latest_work11.jpg) no-repeat;
}

#work12 {
    background: url(../images/latest_work12.jpg) no-repeat;
}

#work13 {
    background: url(../images/latest_work13.jpg) no-repeat;
}

#work14 {
    background: url(../images/latest_work14.jpg) no-repeat;
}

#work15 {
    background: url(../images/latest_work15.jpg) no-repeat;
}

#work16 {
    background: url(../images/latest_work16.jpg) no-repeat;
}

/* ----- Carousel and Portfolio Styling ----- */


#testimonials {
    clear: left;
    float: left;
    width: 430px;
}

#testimonials h3 {
    background: url(../images/speechcloud_icon.png) no-repeat left;
    font-size: 15px;
    font-weight: bold;
    height: 18px;
    margin: 19px 0 15px 0;
    padding: 5px 0 0 38px;
}

#testimonials p {
    color: #363636;
    font-size: 14px;
    line-height: 24px;
}

.testimonial_name {
    font-style: italic;
    font-weight: bold;
}

#clients {
    float: right;
    margin-bottom: 40px;
}

#clients h3 {
    background: url(../images/people_icon.png) no-repeat left;
    font-size: 15px;
    font-weight: bold;
    height: 16px;
    margin: 19px 0 15px 0;
    padding: 4px 0 0 38px;
}

#clients ul {
    background: #e8ebf1;
    height: 200px;
    width: 480px;
}

#clients img {
    float: left;
    margin: 1px;
}

#download {
    background: #e8fcfe;
    border: 1px solid #81e4ed;
    clear: both;
    height: 78px;
    padding: 30px 30px;
    width: 940px;
}

#download p {
    color: #363636;
    float: left;
    font-size: 16px;
    line-height: 26px;
    width: 608px;
}

#download a {
    background: url(../images/download_button.png) no-repeat;
    display: block;
    color: #0d0707;
    font-size: 18px;
    font-weight: bold;
    float: right;
    height: 42px;
    margin: 8px 8px 0 0;
    padding: 22px 0 0 72px;
    width: 172px;
}

#download a:hover {
    color: #fff;
}

/* ----- Home Mid Content Styling ----- */

/* ----- Portfolio Content Styling ----- */

#portfolio_area {
    background: url(../images/banner_shadow.png) repeat-x;
    border-top: 1px solid #d9d9d9;
    padding-top: 38px;
}

#portfolio {
    background: url(../images/paintbrush_icon.png) no-repeat;
    font-size: 15px;
    font-weight: bold;
    height: 19px;
    margin-bottom: 12px;
    padding: 6px 0 0 40px;
}

#portfolio_menu {
    border-bottom: 1px solid #dfe1e5;
    border-top: 1px solid #dfe1e5;
    margin-bottom: 25px;
    padding-bottom: 20px;
}

#portfolio_menu ul {
    padding: 20px 0;
}

#portfolio_menu li, #portfolio_list li {
    float: left;
}

#portfolio_menu li {
    margin-right: 2px;
}

#portfolio_menu a {
    color: #000;
    font-size: 14px;
    padding: 7px 18px;
}

#portfolio_menu a:hover {
    background: #81e4ed;
}

.portfolio_menu_current {
    background: #81e4ed;
}

#portfolio_list {
    height: 760px;
}

#portfolio_list li {
    margin: 15px 15px;
}

#portfolio_pagination {
    border-top: 1px solid #dfe1e5;
    clear: left;
    margin-top: 30px;
    padding: 25px 0;
}

#portfolio_pagination ul {
    margin: auto;
    width: 233px;
}

#portfolio_pagination li {
    float: left;
    margin: 0 2px;
}

#portfolio_pagination a {
    color: #000;
    display: block;
    font-size: 14px;
    padding: 6px 9px;
}

#portfolio_pagination a:hover {
    background: #81e4ed;
}

a#pagination_next, a#pagination_end {
    background: #e8ebf1;
}

a#pagination_next:hover, a#pagination_end:hover {
    background: #bfc1c6;
}

#pagination_end {
    margin-left: 22px;
}

.pagination_current {
    background: #81e4ed;
}

/* ----- Portfolio Content Styling ----- */

/* ----- Contact Content Styling ----- */

#contact_area {
    background: url(../images/banner_shadow.png) repeat-x;
    border-top: 1px solid #d9d9d9;
    padding-top: 38px;
}

#contact {
    background: url(../images/envelope_icon.png) no-repeat;
    font-size: 15px;
    font-weight: bold;
    height: 15px;
    margin: 6px 0 17px 0;
    padding: 2px 0 0 40px;
}

#contact_info {
    border-top: 1px solid #dfe1e5;
    padding-top: 10px;
}

#contact_info_left {
    float: left;
    margin: 27px 0 33px 0;
    width: 574px;
}

#contact_info p {
    font-size: 14px;
    line-height: 16px;
    margin-bottom: 20px;
}

#contact_info_left p a:hover {
    text-decoration: underline;
}

#contact_info_right {
    float: right;
    margin-top: 30px;
}

#location_map {
    background: #e8fcfe;
    border: 1px solid #81e4ed;
    margin: 0 15px 36px 0;;
    padding: 20px;
}

#location_map h3 {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 20px;
}

#location_map img {
    border: 5px solid #fff;
}

#address h3 {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 20px;
}

#address p {
    color: #363636;
}

/* ----- Contact Content Styling ----- */

/* ----- Form Styling ----- */

#contact_form {
    width: 480px;
}
	 
#contact_form li {
    font-size: 14px;
    padding: 2px 0px;
}
	 
#contact_form label {
    display: block;
    margin: 12px 0;
}
         
#contact_form input {
    height: 35px;
}

#contact_form input:focus, #contact_form textarea:focus {
    border: 1px solid #2aacc8;
}

#contact_form input, #contact_form textarea {
    border: 1px solid #b4bac5;
}

#contact_form input[type="submit"] {
    background: url(../images/submit_button.png) no-repeat;
    border: none;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    height: 64px;
    margin-top: 20px;
    padding: 0 0 6px 30px;
    width: 160px;
}

#contact_form input[type="submit"]:hover {
    color: #fff;
}

/* ----- Form Styling ----- */

/* ----- Footer Styling ----- */

#footer {
    background: #e8ebf1;
    border-top: 1px solid #d9d9d9;
    clear: both;
    height: 320px;
    margin-top: 40px;
}

#footer p, #footer a {
    color: #363636;
    font-size: 14px;
}

#footer h4 {
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0 0 21px 0;
}

.footer_info {
    float: left;
    margin: 32px 0 40px 0;
}

#footer_about, #footer_explore, #footer_browse {
    margin-right: 64px;
}

#footer_about {
    width: 238px;
}

#footer_about p, #footer_contact p, #copyright {
    line-height: 17px;
}

#footer_explore li, #footer_browse li {
    margin: 12px 0;
}

#footer_explore li a, #footer_browse li a {
    text-transform: capitalize;
}

#footer_explore li a:hover, #footer_browse li a:hover {
    color: #2aacc8;
}

#footer_connect {
    float: right;
    width: 213px;
}

#footer_connect h4 {
    margin-left: 24px;
}

#footer_connect a {
    display: block;
    float: left;
    height: 51px;
    margin: 0 0 10px 18px;
    text-indent: -9999px;
    width: 53px;
}

#facebook {
    background: url(../images/facebook_icon.png) no-repeat;
}

#dribbble {
    background: url(../images/dribbble_icon.png) no-repeat;
}

#pinterest {
    background: url(../images/pinterest_icon.png) no-repeat;
}

#linkedin {
    background: url(../images/linkedin_icon.png) no-repeat;
}

#skype {
    background: url(../images/skype_icon.png) no-repeat;
}

#sharethis {
    background: url(../images/sharethis_icon.png) no-repeat;
}

p#copyright {
    clear: both;
    float: left;
    font-size: 13px;
}

#footer_logo {
    background: url(../images/logo.png) no-repeat;
    display: block;
    float: right;
    height: 37px;
    text-indent: -9999px;
    width: 148px;
}

/* ----- Footer Styling ----- */

~ 下面是其他界面的css代码

  /* http//meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 201801110
   License: none (public domain)
*/

html, body, div, span,
h1, h2, h3, h4, h5, h6, p,
a, img, ol, ul, li,
fieldset, form, label {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
a {
	text-decoration: none;
}

效果如图所示：在这里插入图片描述

smallsmall_wang

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
王孬孬young的html博客代码:)

小王的html博客代码~我直接晒源代码了，嘻嘻:0我的注册界面： BisLite --myblog &amp;amp;lt;div id=&amp;quot;header&amp;quot;&amp;amp;gt; &amp;amp;lt;div class=&amp;quot;container&amp;quot;&amp;amp;gt;
复制链接

扫一扫