静态网页实训一
贴上效果图：
界面很渣，鉴于还是初步自学阶段，也没有太大的要求，能出来就行.（附上源代码）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ventus - Unique responsive multi-purpose template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Google Fonts
================================================== -->
<link href='http://fonts.useso.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link href='http://fonts.useso.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<!-- Le Styles
================================================== -->
<!-- These are the awesome CSS files -->
<link href="./assets/css/bootstrap.css" rel="stylesheet">
<link href="./assets/css/flexslider.css" rel="stylesheet">
<link href="./assets/css/style.css" rel="stylesheet">
<link href="./assets/css/responsive.css" rel="stylesheet">
<link href="./assets/css/style_switcher.css" rel="stylesheet">
<link href="./assets/css/dropkick.css" rel="stylesheet">
<link href="./assets/css/isotope.css" rel="stylesheet">
<link href="./assets/css/jquery.fancybox.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
<style type="text/css">
body{
font-family: "楷体";
}
dt{
font-family: "楷体";
}
dd{
font-family: "楷体";
}
.heading{
font-family: "楷体";
font-size: 18px;
}
</style>
</head>
<body>
<ul id="navigation">
<li><span></span>
<div id="panel">
<div class="colour-container">
<a class="style_green"></a>
<a class="style_blue"></a>
<a class="style_red"></a>
<a class="style_turquoise"></a>
<a class="style_turquoise2"></a>
<a class="style_purple"></a>
<a class="style_orange"></a>
<a class="style_brown"></a>
<a class="style_black"></a>
</div>
</div>
</li>
</ul>
<!-- BEGIN NAVIGATION
================================================== -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#"><img src="assets/images/logo.png" alt=""></a>
<div class="nav-collapse collapse">
<ul class="nav">
<!-- HOME -->
<li><a href="index.html">HOME</a></li>
<!-- ELEMENTS -->
<li><a href="elements.html">ELEMENTS</a></li>
<!-- PORTFOLIO (DROP-DOWN) -->
<li class="dropdown nav-active">
<a href="#about" class="dropdown-toggle" data-toggle="dropdown">PORTFOLIO</a>
<ul class="dropdown-menu">
<li><a href="portfolio.html">PORTFOLIO 3-COL</a></li>
<li><a href="portfolio2.html">PORTFOLIO 2-COL</a></li>
<li><a href="portfolio3.html">FILTERED PORTFOLIO</a></li>
<li><a href="portfolio-view.html">PORTFOLIO SINGLE</a></li>
</ul>
</li>
<!-- BLOG (DROP-DOWN) -->
<li class="dropdown">
<a href="#about" class="dropdown-toggle" data-toggle="dropdown">BLOG</a>
<ul class="dropdown-menu">
<li><a href="blog-list.html">BLOG LIST</a></li>
<li><a href="blog-view.html">BLOG SINGLE</a></li>
</ul>
</li>
<!-- PAGES (DROP-DOWN) -->
<li class="dropdown last">
<a href="#about" class="dropdown-toggle" data-toggle="dropdown">PAGES</a>
<ul class="dropdown-menu">
<li><a href="about.html">ABOUT</a></li>
<li><a href="what-we-do.html">WHAT WE DO</a></li>
<li><a href="team.html">OUR TEAM</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="testimonials.html">TESTIMONIALS</a></li>
<li><a href="pricing.html">PRICING</a></li>
<li><a href="comparison.html">COMPARISON TABLE</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
<div class="slider">
<div class="container">
<div class="row">
<div class="span12">
<div class="slider-area">
<ul class="slides">
<!-- SLIDE #1
==================================== -->
<li>
<div class="row">
<div class="span12">
<!-- slide #1 content -->
<div class="vcenter">
<h3 class="slider-heading"><span class="slider-highlight">会员系统界面 </span> </h3>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span12 relative">
<div class="bubble">
<h4 class="left">你想查看 <span class="bold italic">WHAT</span> MESSAGE!</h4>
<a class="btn btn-padded right">我的信息</a>
</div>
<div class="bubble-triangle"></div>
</div>
</div>
</div>
<div class="bubble-stripes"></div>
<!-- BEGIN BREADCRUMB NAVIGATION
================================================== -->
<div class="container">
<div class="row">
<div class="span12">
<div class="breadcrumb-container">
<ul class="breadcrumb">
<li><a href="#">Home</a> <span class="divider">/</span></li>
<li class="active"><a href="#">Portfolio</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- BEGIN SLIDER
================================================== -->
<div class="slider">
<div class="container">
<div class="row">
<div class="all" style="width: 100%;height: 200px;">
<div class="fir" style="width: 100%;height: 45px;margin-top:1px;margin-left:1px;">
<div class="fir_1" style="width: 275px;height: 40px;float: left;border: 5px #40B5E2;">
<p style="font-size: 23px; padding-top: 10px;font-family: '楷体';"> 水晶: 积分: </p>
</div>
<div class="fir_2" style="width: 170px;height: 38px;float: left;">
</div>
<div class="fir_3" style="width: 200px;height: 40px;float: left;font-size: large;font-family: '楷体';">
<form name="test" method="get">
<p><a class="btn">邮箱</a>
<a class="btn">储物箱</a></p>
</form>
</div>
<div class="fir_4" style="width: 150px;height: 40px;float: left;">
</div>
<div class="fir_5">
<p style="font-size: 18px;width: 176px;height: 40px;float: left;font-family: '楷体';">V:VIP等级
<br> P:普通会员等级</p>
</div>
</div>
<div class="sec" style="width: 100%;height: 96px;margin-top: 1px;margin-left :1px;border: blueviolet;">
<img src="img/进度条.jpg">
</div>
<div class="thi" style="width: 100%;height: 45px;margin-top:2px;margin-left:1px;">
<p style="margin: 10px auto;text-align: center;">示例：经验值(49367,积累经验42367，消费经验2000，寄存经验5000),会员等级(P12)</p>
</div>
</div>
</div>
</div>
</div>
<div class="content">
<div class="container">
<div class="row">
<!-- PAGE HEADING -->
<!-- SIDE BAR NAVIGATION -->
<div class="span3">
<div class="row">
<div class="span3">
<ul class="nav nav-list" id="myTab" style="font-weight: bold;font-family: '楷体';">
<li><a href="#" data-filter=".recent" style="font-size: 20px;">我的注册信息</a></li>
<li><a href="#" data-filter=".graphic" style="font-size: 20px;">我的历程</a></li>
<!--<li><a href="#" data-filter=".web">WEB DESIGN</a></li>
<li><a href="#" data-filter=".illustration">ILLUSTRATION</a></li>
<li class="last"><a href="#" data-filter=".branding">BRAND IDENTITY</a></li>-->
</ul>
</div>
</div>
</div>
<div class="span9">
<div class="row">
<div id="container">
<!-- My registration information -->
<div class="span9 element recent">
<div class="content-bubble drop-shadow curved">
<h5 class="heading">我的注册信息</h5>
<div class="container">
<div class="row">
<div class="span12">
<div class="accordion" id="accordion-998200">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-998200" href="#accordion-element-338049">个人资料：</a>
</div>
<div id="accordion-element-338049" class="accordion-body collapse in">
<div class="accordion-inner">
个人资料展示：
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-998200" href="#accordion-element-193754">我的标签：</a>
</div>
<div id="accordion-element-193754" class="accordion-body collapse">
<div class="accordion-inner">
图片标签展示：
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="content-bubble-triangle"></div>
</div>
<!--My course-->
<div class="span9 element graphic">
<div class="content-bubble drop-shadow curved">
<h5 class="heading">我的历程</h5>
<div class="container">
<div class="row">
<div class="span12">
<dl>
<dt>
注册会员：
</dt>
<dt>
2015年七月二十一
</dt>
<dt>
第一次（服务项目）：
</dt>
<dd>
2015年七月二十一
</dd>
<dt>
第一次上传游戏资源素材：
</dt>
<dd>
2015年七月二十一
</dd>
<dt>
第一次获得水晶：
</dt>
<dd>
2015年七月二十一
</dd>
</dl>
</div>
</div>
</div>
</div>
<div class="content-bubble-triangle"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- BEGIN FOOTER BUBBLE
================================================== -->
<div class="container">
<div class="row">
<div class="span12">
<div class="footer-bubble">
<div class="bubble">
<h4 class="left">GET IN TOUCH <span class="bold italic">NOW</span></h4>
<a class="btn btn-padded right">CONTACT US</a>
</div>
<div class="bubble-triangle"></div>
</div>
</div>
</div>
</div>
<!-- BEGIN SUB-FOOTER
================================================== -->
<div class="sub-footer">
<div class="container">
<div class="row">
<div class="span3">
<h5 class="heading">ABOUT US</h5>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
<br>
<br> 54 Awesome street
<br> Awesome Road
<br> Awesome City
<br> (123) 456 - 789
</p>
</div>
<div class="span3">
<h5 class="heading">LATEST TWEETS</h5>
<p>
<a>@Jaynesh</a> Just submitted another great item on <a>#themeforest</a>
<br>
<small>about 3 hours ago</small>
<br>
<br>
<a>@Jaynesh</a> Working on an awesome theme for <a>#themeforest</a>
<br>
<small>about 3 weeks ago</small>
</p>
</div>
<div class="span3">
<div class="latest-posts">
<h5 class="heading">LATEST POSTS</h5>
<a>Lorem ipsum dolor sit amet, consect</a>
<a>sed do eiusmod tempor incididunt</a>
<a>ut labore et dolore magna sed do eiusmod tempor</a>
<a class="last">consectetur adipisicing elit, sed do</a>
</div>
</div>
<div class="span3">
<div class="contact-alerts"></div>
<input placeholder="Your Name" type="text" name="name" id="name">
<input placeholder="Your Email" type="text" name="email" id="email">
<textarea placeholder="Message" rows="3" cols="50" name="message" id="message"></textarea>
<button id="submit" class="btn btn-black btn-full">Submit</button>
</div>
</div>
</div>
</div>
<!-- BEGIN FOOTER
================================================== -->
<div class="footer">
<div class="container">
<div class="row">
<div class="span6">
<p>COPYRIGHT 2003-2012.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
</div>
<div class="span6">
<ul class="social-icons">
<li class="twitter">
<a rel="alternate" title="Twitter"></a>
</li>
<li class="facebook">
<a rel="alternate" title="Facebook"></a>
</li>
<li class="vimeo">
<a rel="alternate" title="Vimeo"></a>
</li>
<li class="dribbble">
<a rel="alternate" title="Dribbble"></a>
</li>
<li class="google">
<a rel="alternate" title="Google +"></a>
</li>
<li class="pinterest">
<a rel="alternate" title="Pinterest"></a>
</li>
</ul>
</div>
</div>
</div>
<a rel="alternate" title="Back to top" class="up"><img src="assets/img/icon_up.png" alt="" /></a>
</div>
<!-- Le javascript
================================================== -->
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap.js"></script>
<script src="assets/js/tinynav.js"></script>
<script src="assets/js/scroll.js"></script>
<script src="assets/js/jquery.flexslider-min.js"></script>
<script src="assets/js/custom.js"></script>
<script src="assets/js/style_switcher.js"></script>
<script src="assets/js/jquery.fancybox.js"></script>
<script src="assets/js/jquery.isotope.min.js"></script>
<script>
$(function() {
var $container = $('#container');
$container.isotope({
itemSelector: '.element',
masonry: {
columnWidth: 1,
}
});
// filter items when filter link is clicked
$('.nav-list a').click(function() {
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector
});
return false;
});
});
</script>
</body>
</html>