第一个网页(HTML/CSS)

清华大佬耗费三个月吐血整理的几百G的资源,免费分享!....>>>

<!--  Designed by Crumvey Chan (^_^)  -->
<!--  没有版权 错误之处请多多指教 支持侵权转载吐槽批评功能  -->
<!--  欢迎关注我的微博http://weibo.com/chenkunhui/home?topnav=1&wvr=6不过没有更新过就是了O__O"… -->

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <meta charset="UTF-8" />
    <title>RDC-We Want You</title>
    <link rel="stylesheet" type="text/css" href="css/main.css" />
</head>

<body>
	<div id="wrapper">    <!-- 在div"wrapper"内写整个网页的内容 -->
		<div id="home">
		    <div id="navigation">     <!-- div·navigation 网页顶部的导航栏 --> 
				<div class="title">           <!-- title RDC的logo -->
					<span class="title1">RDC</span>
					<span class="title2">研发中心</span>
				</div>
				<div id="menu">        <!-- 用fixed定位 使主导航栏一直悬挂在网页顶部 --> 
					<ul>
					    <li class="leading"><a class="style1" href="#contact">Contact</a></li>
					    <li class="leading"><a class="style1" href="#team">Team</a></li>
					    <li class="leading"><a class="style1" href="#direction">Direction</a></li>
					    <li class="leading"><a class="style1" href="#join">Join</a></li>
				        <li class="leading"><a class="style1" href="#home">Home</a></li>
				    </ul>				
				</div>
			</div>
			<div>         <!-- 网页封面页的三个标题 -->
				<p class="text1">RDC FAMILY</h1>      
			    <p class="text2">We want you to join us!</p>
			    <p class="text3">
			    	<span class="line"> </span>
			    	We are a team of IT
			    	<span class="line"> </span>
			    </p>
			</div>
			<div>           <!-- 还没有实现的部分 轮播图 -->
				<ul class="social">  
					<li class="social1"><a href="#"><img src="images/twitter.png"></a></li>
					<li class="social1"><a href="#"><img src="images/facebook.png"></a></li>
					<li class="social1"><a href="#"><img src="images/google.png"></a></li>
					<li class="social1"><a href="#"><img src="images/dribble.png"></a></li>
				</ul>
			</div>
		</div>
		<div id="join">      <!-- 介绍研发工作室考核的大致情况 -->
			<div>          <!-- 标题 -->
				<h1 class="joinh1">HOW TO JOIN US</h1>
				<img id="love" src="images/love1.jpg" />
			</div>
			<div class="assess">   
				<div class="joinAssess">
					<img style="float:left" src="images/firstexamine.png">
                    <a class="joinhref" href="#">一轮考核</a>
                    <p class="joinContent">想跟着师兄师姐学习基础知识,完成一轮考核作业,通过考核答辩,便通过了一轮考核。</p>
				</div>
				<div class="joinAssess">
					<img style="float:left" src="images/secondexamine.png">
                    <a class="joinhref" href="#">二轮考核</a>
                    <p class="joinContent">通过一轮考核的师弟师妹进入二轮考核,在一轮考核的基础上,学习更进一步的知识,继续做大作业,通过二轮考核答辩后,便通过二轮考核。</p>
				</div>
				<div class="joinAssess">
					<img style="float:left" src="images/joinyanfa.png">
                    <a class="joinhref" href="#">加入研发</a>
                    <p class="joinContent">通过一轮和二轮考核的师弟师妹将加入我们研发,开始与我们的研发之旅。</p>
				</div>
			</div>
			<div class="dot">   
				<ul>
					<li class="inline"><a class="style2"" href=""#">○</a></li>
					<li class="inline"><a class="style2"" href=""#">○</a></li>
					<li class="inline"><a class="style2"" href=""#">○</a></li>
				</ul>
			</div>
		</div>
		<div id="direction">        <!-- 介绍RDC团队4个分组 -->
			<div>    <!-- 标题 -->
				<h1 class="directionh1">OUR TEAM</h1>
				<img id="love" src="images/love2.jpg" />
				<p class="introduce">我们的团队,包含四个组,前端组,后台组,安卓组和C++组</p>
			</div>
			<div id="groups">  
				<div class="group">
					<img src="images/java.jpg" />
					<a class="groupname" href="#">后台组</a>
					<p class="groupcontent">Java</p>
				</div>
				<div class="group">
					<img src="images/html.jpg" />
					<a class="groupname" href="#">前端组</a>
					<p class="groupcontent">HTML,CSS,javascript</p>
				</div>
				<div class="group">
					<img src="images/android.jpg" />
					<a class="groupname" href="#">安卓组</a>
					<p class="groupcontent">Java,Android</p>
				</div>
				<div class="group">
					<img src="images/c++.jpg" />
					<a class="groupname" href="#">C++组</a>
					<p class="groupcontent">C++,cocos2dx,girectx</p>
				</div>
			</div>
			<div class="dot">
				<ul>
					<li class="inline"><a class="style2" href="#">○</a></li>
					<li class="inline"><a class="style2" href="#">○</a></li>
					<li class="inline"><a class="style2" href="#">○</a></li>
				</ul>
			</div>
		</div>
		<div id="team">           <!-- 介绍RDC团队成员 -->
			<div>    <!-- 标题 -->
				<h1 class="teamh1">SOME FUN FACTS</h1>
				<img id="love" src="images/love3.jpg" />
			</div>
			<div id="grades">
				<div class="grade">  <!-- 大一 -->
					<img src="images/grade1.png" />
					<a class="number" href="#">?</a>
					<p class="description">小鲜肉的大一</p>
				</div>
				<div class="grade">  <!-- 大二 -->
					<img src="images/grade2.png" />
					<a class="number" href="#">17</a>
					<p class="description">激情的大二</p>
				</div>
				<div class="grade">  <!-- 大三 -->
					<img src="images/grade3.png" />
					<a class="number" href="#">12</a>
					<p class="description">技术饱满的大三</p>
				</div>
				<div class="grade">  <!-- 大四 -->
					<img src="images/grade4.png" />
					<a class="number" href="#">16</a>
					<p class="description">稳重成熟的大四</p>
				</div>
			</div>
		</div>
		<div id="contact">          <!-- 分享交流社区 -->
			<div>    <!-- 标题 -->
				<h1 class="contacth1">LET'S DISCUSS</h1>
				<img id="love" src="images/love2.jpg" />
				<p class="discussion">有什么问题想跟我们讨论的可以写邮件给我们</p>
			</div>
			<div class="questionBox">      <!-- 疑问交流区域 -->
				<h2 class="questionh2">让我们一起讨论问题</h2>
				<ul class="question">
                    <li id="question1"><a class="style3" href="#">web前端问题</a></li>
                    <li id="question1"><a class="style3" href="#">Java后台问题</a></li>
                    <li id="question1"><a class="style3" href="#">Android问题</a></li>
                    <li id="question1"><a class="style3" href="#">C++问题</a></li>
                </ul>
			</div>
            <div class="form">        <!-- 表单部分 -->
                <form action="#" method="#">
                    <legend class="legend">Say hello!</legend>
                    <p>   <!-- 输入框中提示信息会在输入字段为空时显示,并会在字段获得时消失 -->
                        <input class="name" type="text" name="name" autocomplete="off" placeholder="Name" value="" />  <!-- 输入姓名 -->
                        <input class="email" type="text" name="Email" autocomplete="off" placeholder="Email" value="" /><br />  <!-- 输入邮箱 -->
                        <input class="message" type="text" name="message" autocomplete="off" placeholder="Message" value="" />     <!-- 输入邮件内容 -->              
                        <input class="send" type="image" name="send" src="images/message.png" /><span class="send2">Send message</span>  <!-- 用图片做发送邮件的按钮 -->
                    </p>    
                </form>            	
            </div>
            <div class="share">   <!-- 社交分享twitter/facebook/google/bribble -->
                <ul>
                   <li><a href="#"><img src="images/f.png"></a></li>
                   <li><a href="#"><img src="images/t.png"></a></li>
                   <li><a href="#"><img src="images/g.png"></a></li>
                   <li><a href="#"><img src="images/b.png"></a></li>
                </ul>
            </div>			
		</div>
		<div id="footer"><!--  版权信息 谢谢您的浏览  -->
 			<h6>@Copyright &nbsp; &nbsp; Design By Crumvey Chan</h5>   <!-- 抱歉打扰下 低调地介绍网页制作者 怕着以后没有机会了哈哈~ -->
            <p class="copyright">没有版权 错误之处请多多指教 支持侵权转载吐槽批评功能</p>
		</div>
	</div>
</body>

</html>