大学生体育运动网页设计模板代码 校园篮球网页作业成品 学校篮球网页制作模板 学生简单体育运动网站设计成品

网页知识点应用

DIV CSS布局、网页背景图片、图片轮播切换、CSS3简鼠标经过放大及动态载入效果、CSS3圆角及背景透明效果、鼠标经过变色效果。

网页作品介绍

大学生校园篮球静态HTML网页设计作品共5页，采用DIV CSS布局制作，内容包括：校园篮球、篮球技巧、运动规则、技术规则、经典动作。页面主体内容区域宽度为1200PX。网页整体使用CSS设置了网页背景图片。页面精美包含多个排版布局，学生网页作业水平制作。

首页使用JS制作了图片轮播切换（支持手动按钮切换），篮球技巧页面使用H5标签VIDEO插入了视频，LOGO区域使用CSS3简单制作了鼠标经过放大及动态载入效果，导航及主体内容区域均使用CSS3制作了圆角及背景透明效果，同时制作了导航鼠标经过及选中变色效果。

网页HTML代码

<div class="logo"><a href="index.html"><img src="images/logo.png" width="220"></a></div>
	<div class="menu">
    <ul>
    <a href=""><li class="this">校园篮球</li></a>
	<a href=""><li>篮球技巧</li></a>
	<a href=""><li>运动规则</li></a>
	<a href=""><li>技术规则</li></a>
    <a href=""><li>经典动作</li></a>
    </ul>
	</div>
    <div class="box">
	<div class="box-1">
		<ul>
			<li><img src="images/xya.jpg"></img><h2>篮球（basketball）</h2></li>
			<li><img src="images/xyb.jpg"></img><h2>打篮球是一件快乐的事</h2></li>
			<li><img src="images/xyc.jpg"></img><h2>培养学生的竞争意识和开拓精神</h2></li>
		</ul>
	</div>
	<div class="box-2">
		<ul>
			
		</ul>
	</div>
	<div class="box-3">
		<span class="prev"> < </span>
		<span class="next"> > </span>
	</div>
</div>
    <div class="text">
	<p>
	XXXX
	</p>
    </div>

网页效果预览

网页源地址

stu-works.com/html/tiyu/329.html