html_study
/
index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
		<link rel="icon" type="image/x-icon" href="img/icon.ico" />
		<title>客户端</title>
		<style type="text/css">
			#dowebok {
				width: 80%;
				margin: 0 auto;
				font-size: 14px;
			}

			#dowebok li {
				float: left;
				width: 30%;
				margin-left: 2%;
				padding-top: 1%;
				list-style-type: none;
			}

			#dowebok li img {
				/* width: 100%; */
			}

			#dowebok li .dt {
				width: 100%;
				text-align: center;
			}

		</style>
	</head>
	<link rel="stylesheet" type="text/css" href="css/public.css" />
	<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
	<link rel="stylesheet" href="css/main.css">
	<body>
		<div class="wrap">
			<div class="header container">
				<div class="image">
					<img src="img/1.png" class="imageContent">
				</div>
				<div class="headerTitle">黄天亮</div>
				<div class="headerContent">179000524</div>
			</div>
			<div class="Content container">
				<div class="nav">
					<ul class="navContent">
						<a href="#index">
							<li>我的主页</li>
						</a>
						<a href="#zuopin">
							<li>我的作品</li>
						</a>
					</ul>
				</div>
			</div>
			<div class="production container" id="zuopin">
				<div class="productionTitle">作品</div>

				<ul id="dowebok">
					<li>
						<div><a href="webproject001/index.html"><img src="img/001.png" alt="web布局"></a></div>
						<div class="dt"><a href="webproject001/index.html">练习01：web布局</a></div>
					</li>
					<li>
						<div><a href="webproject002/index.html"><img src="img/002.jpg" alt="表格布局"></a></div>
						<div class="dt"><a href="webproject002/index.html">练习02：表格布局</a></div>
					</li>
					<li>
						<div><a href="webproject003/index.html"><img src="img/003.png" alt="登录页面"></a></div>
						<div class="dt"><a href="webproject003/index.html">练习03：登录页面</a></div>
					</li>
					<li>
						<div><a href="webproject004/打印图形.html"><img src="img/004.png" alt="打印图形"></a></div>
						<div class="dt"><a href="webproject004/打印图形.html">练习04：打印图形</a></div>
					</li>
					<li>
						<div><a href="webproject006/index.html"><img src="img/005.png" alt="DOM编程"></a></div>
						<div class="dt"><a href="webproject004/打印图形.html">练习05：DOM编程</a></div>
					</li>
					<li>
						<div><a href="webproject007/index.html"><img src="img/006.png" alt="坦克"></a></div>
						<div class="dt"><a href="webproject004/打印图形.html">练习06：事件</a></div>
					</li>
					<li>
						<div><a href="webproject008/index.html"><img src="img/007.png" alt="广告实验"></a></div>
						<div class="dt"><a href="webproject008/index.html">练习07：广告实验</a></div>
					</li>
					<li>
						<div><a href="webproject009/index.html"><img src="img/008.png" alt="钟表"></a></div>
						<div class="dt"><a href="webproject009/index.html">练习08：时钟</a></div>
					</li>
					<li>
						<div><a href="webproject010/index.html"><img src="img/009.png" alt="钟表"></a></div>
						<div class="dt"><a href="webproject010/index.html">练习09：jquery-DOM</a></div>
					</li>
					<li>
						<div><a href="webproject011/cart_task.html"><img src="img/010.png" alt="购物车"></a></div>
						<div class="dt"><a href="webproject011/cart_task.html">练习10：购物车</a></div>
					</li>
					<li>
						<div><a href="webproject013/tab_task.html"><img src="img/011.png" alt="选项卡"></a></div>
						<div class="dt"><a href="webproject013/tab_task.html">练习11：选项卡</a></div>
					</li>
					<li>
						<div><a href="webproject013/Player.html"><img src="img/012.png" alt="Play移动"></a></div>
						<div class="dt"><a href="webproject013/Player.html">练习11：Play移动</a></div>
					</li>
					<li>
						<div><a href="webproject014/ajax应用.html"><img src="img/013.jpg" alt="Play移动"></a></div>
						<div class="dt"><a href="webproject014/ajax应用.html">练习12：ajax应用</a></div>
					</li>
				</ul>
			</div>

			<div class="callme container" id="lianxiwo">
				<div class="callmeTitle">
					联系方式
				</div>
				<div class="callmeLeft">
					<ul>
						<li>电话:123456789</li>
						<li>邮箱:123456789@qq.com</li>
					</ul>
				</div>
			</div>
			<div class="end" id="end"></div>
		</div>

	</body>
</html>