• HTML期末大学生网页设计作业——奇恩动漫HTML (1页面) HTML+CSS+JS网页设计期末课程大作业

    HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

    ⚽精彩专栏推荐👇🏻👇🏻👇🏻

    ❤ 【作者主页——🔥获取更多优质源码】
    ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】

    文章目录🌰

    一、网页介绍📖

    1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。

    2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

    3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。

    一、网页效果🌌

    在这里插入图片描述

    二、代码展示😈

    1.HTML代码结构 🧱

    代码如下（示例）：以下仅展示部分代码供参考~

    DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>奇恩动漫title>
<link rel="stylesheet" type="text/css" href="pic/style.css" />
<script type="text/javascript" src="pic/jquery1.42.min.js">script>
<script type="text/javascript" src="pic/jquery.SuperSlide.2.1.1.js">script>
head>
<body>
<div id="header">
	<div class="header">
		<div class="logo">
			<h1><a href="#"><img src="pic/logo.png" width="367" height="120">a>h1>
		div>
		
		<div class="logor">
			<img src="pic/logor.png" width="262" height="120">
		div>
	div>
div>

<div id="menu">
	<div class="menu">
		<ul id="nav" class="nav clearfix">
			<li class="nLi color1">
				<h3><a href="#" target="_blank">首页a>h3>
			li>
			<li class="nLi color7">
					<h3><a href="#" target="_blank">关于奇恩a>h3>
					<ul class="sub">
						<li><a href="#">公司介绍a>li>
						<li><a href="#">三大业务a>li>
						<li><a href="#">最新资讯a>li>
						<li><a href="#">合作伙伴a>li>
						<li><a href="#">公司环境a>li>
					ul>
			li>
			<li class="nLi color2">
			
					<h3><a href="#" target="_blank">师资团队a>h3>
					<ul class="sub">
						<li><a href="#">个人简介a>li>
						<li><a href="#">老师作品a>li>
						<li><a href="#">教学经验a>li>
					ul>
			li>
			<li class="nLi color3">
					<h3><a href="#" target="_blank">课程设置a>h3>
					<ul class="sub">
						<li><a href="#">动漫课程a>li>
						<li><a href="#">动漫课程a>li>
						<li><a href="#">动漫课程a>li>
						<li><a href="#">动漫课程a>li>
					ul>
			li>
			<li class="nLi color4">
					<h3><a href="#" target="_blank">就业资讯a>h3>
					<ul class="sub">
						<li><a href="#">就业明显a>li>
						<li><a href="#">就业服务a>li>
						<li><a href="#">面试简历a>li>
						<li><a href="#">企业招聘a>li>
					ul>
			li>
			<li class="nLi color5">
					<h3><a href="#" target="_blank">学员天地a>h3>
					<ul class="sub">
						<li><a href="#">学生作品a>li>
						<li><a href="#">学习动态a>li>
						<li><a href="#">学生活动a>li>
					ul>
			li>
			<li class="nLi color6">
					<h3><a href="#" target="_blank">在线报名a>h3>
					<ul class="sub">
						<li><a href="#">快捷咨询a>li>
						<li><a href="#">在线留言a>li>
					ul>
			li>
			<li class="nLi color2">
					<h3><a href="#" target="_blank">联系我们a>h3>
					<ul class="sub">
						<li><a href="#">联系地址a>li>
						<li><a href="#">联系电话a>li>
					ul>
			li>
		ul>
	div>
div>
<script id="jsID" type="text/javascript">
			
			jQuery("#nav").slide({ 
				type:"menu",// 效果类型，针对菜单/导航而引入的参数（默认slide）
				titCell:".nLi", //鼠标触发对象
				targetCell:".sub", //titCell里面包含的要显示/消失的对象
				effect:"slideDown", //targetCell下拉效果
				delayTime:300 , //效果时间
				triggerTime:0, //鼠标延迟触发时间（默认150）
				returnDefault:true //鼠标移走后返回默认状态，例如默认频道是“预告片”，鼠标移走后会返回“预告片”（默认false）
			});
script>


		<div id="slideBox" class="slideBox">
			<div class="bd">
				<ul>
					<li style="background:url(pic/1.jpg) no-repeat 50% 0;"><a href="#" target="_blank">a>li>
					<li style="background:url(pic/2.jpg) no-repeat 50% 0;"><a href="#" target="_blank">a>li>
				ul>
			div>

			
			<a class="prev" href="javascript:void(0)">a>
			<a class="next" href="javascript:void(0)">a>

		div>

		<script type="text/javascript">
		jQuery(".slideBox").slide({mainCell:".bd ul",effect:"fold",autoPlay:true});
		script>
		
<div class="clear">div>
<div id="yewu">
	<div class="ititle">奇恩动漫三大业务div>
	
	<div class="yewu">
		<a class="yewu1" href="#">
			<div class="yewuimg"><img src="pic/yewu.png" width="63" height="63">div>
			<div class="yewup">
				<p class="yewup1">制作业务p>
				<p class="yewup2">致力于开发和制作高品质动画项目，拥有LAVA（臭屁虫）、PUCCA（中国娃娃）、FRANKY&FRIENDS、等，众多著名动画IP项目授权。p>
			div>
		a>
		<a class="yewu2" href="#">
			<div class="yewuimg"><img src="pic/yewu.png" width="63" height="63">div>
			<div class="yewup">
				<p class="yewup1">制作业务p>
				<p class="yewup2">致力于开发和制作高品质动画项目，拥有LAVA（臭屁虫）、PUCCA（中国娃娃）、FRANKY&FRIENDS、等，众多著名动画IP项目授权。p>
			div>
		a>
		<a class="yewu3" href="#">
			<div class="yewuimg"><img src="pic/yewu.png" width="63" height="63">div>
			<div class="yewup">
				<p class="yewup1">制作业务p>
				<p class="yewup2">致力于开发和制作高品质动画项目，拥有LAVA（臭屁虫）、PUCCA（中国娃娃）、FRANKY&FRIENDS、等，众多著名动画IP项目授权。p>
			div>
		a>
	div>			 
div>
<div class="clear">div>

<div id="news">
	<div class="news">
		<div class="ititle2"><p>新闻资讯p>div>
		<div class="border-box">
			<div class="border-box1">
			<a href="#" target="_blank">
			<div class="divimg"><img src="pic/news.jpg">div>
			<h3>“融汇深圳设计·服务中国创造”深圳市商业美术设计促进会h3>
			a>
			div>
			<div class="border-box2">
			<a href="#" target="_blank">
			<div class="divimg"><img src="pic/news.jpg">div>
			<h3>“融汇深圳设计·服务中国创造”深圳市商业美术设计促进会h3>
			a>
			div>
		div>
		<ul class="newsli">
		<li><a href="#" target="_blank">中鹏服装设计培训中心精英老师系列人物访谈之“做最好的职业教育”a>li>
		<li><a href="#" target="_blank">热烈祝贺中鹏培训2015年11月采购师与物流师考试通过率再创新高！a>li>
		<li><a href="#" target="_blank">热烈欢迎评估专家组到深圳市宝安区中鹏职业培训中心进行评估工作a>li>
		<li><a href="#" target="_blank"> 热烈祝贺中鹏培训参评“全国职工教育培训先进集体”初审通过a>li>
		ul>
	div>
	<div class="jishu">
		<div class="ititle2"><p>技术分享p>div>
		<div class="border-box">
			<div class="border-box1">
			<a href="#" target="_blank">
			<div class="divimg"><img src="pic/news.jpg">div>
			<h3>“融汇深圳设计·服务中国创造”深圳市商业美术设计促进会h3>
			a>
			div>
			<div class="border-box2">
			<a href="#" target="_blank">
			<div class="divimg"><img src="pic/news.jpg">div>
			<h3>“融汇深圳设计·服务中国创造”深圳市商业美术设计促进会h3>
			a>
			div>
		div>
		<ul class="newsli">
		<li><a href="#" target="_blank">中鹏服装设计培训中心精英老师系列人物访谈之“做最好的职业教育”a>li>
		<li><a href="#" target="_blank">热烈祝贺中鹏培训2015年11月采购师与物流师考试通过率再创新高！a>li>
		<li><a href="#" target="_blank">热烈欢迎评估专家组到深圳市宝安区中鹏职业培训中心进行评估工作a>li>
		<li><a href="#" target="_blank"> 热烈祝贺中鹏培训参评“全国职工教育培训先进集体”初审通过a>li>
		ul>
	div>
div>	

<div id="kecheng">
	<div class="ititle">精品课程div>
	<div class="kecheng">
		<div class="kechengl">
			<ul>
				<li><a href="#">影视动画全科班a>li>
				<li><a href="#">影视动画全科班a>li>
				<li><a href="#">影视动画全科班a>li>
				<li><a href="#">影视动画全科班a>li>
				<li><a href="#">影视动画全科班a>li>
				<li><a href="#">影视动画全科班a>li>
			ul>
		div>
		
		<div class="kechengr">
		
		<div class="multipleColumn">
		<div class="hd">
				<a class="next">a>
				<a class="prev">a>
			div>
			<div class="bd">

				<div class="ulWrap">

						<ul>
							<li>
								<div class="pic"><a href="#" target="_blank"><img src="pic/s1.jpg" />a>div>
							li>
						ul>
						<ul>
							<li>
								<div class="pic"><a href="#" target="_blank"><img src="pic/s2.jpg" />a>div>
							li>
						ul>
						<ul>
							<li>
								<div class="pic"><a href="#" target="_blank"><img src="pic/s3.jpg" />a>div>
							li>
						ul>
						<ul>
							<li>
								<div class="pic"><a href="#" target="_blank"><img src="pic/s1.jpg" />a>div>
							li>
						ul>
						<ul>
							<li>
								<div class="pic"><a href="#" target="_blank"><img src="pic/s2.jpg" />a>div>
							li>
						ul>
						<ul>
							<li>
								<div class="pic"><a href="#" target="_blank"><img src="pic/s3.jpg" />a>div>
							li>
						ul>

				div>
			div>
		div>		
		
		
		div>
	div>
div>

<script type="text/javascript">
jQuery(".multipleColumn").slide({titCell:".hd ul",mainCell:".bd .ulWrap",autoPage:true,effect:"leftLoop",autoPlay:true,vis:3});
script>

<div class="clear">div>	
<div id="shizi">
	<div class="ititle">超强师资团队div>
	<div class="shizi">
	
		<div class="multipleColumn2">
		<div class="hd">
				<a class="next">a>
				<a class="prev">a>
			div>
			<div class="bd">

				<div class="ulWrap2">

						<ul>
							<li>
								<div class="pic"><a href="#" target="_blank"><img src="pic/shizi.jpg" />a>div>
								<div class="title"><a href="#" target="_blank">张依沱<br>maya影视动画讲师a>div>
								<div class="text">供职于环球数码、奥飞等国内知名动漫公司，参与制作过《大圣归来》、《maya the bee》《超级飞侠》《寂静岭》等大型动画项目div>
							li>
						ul>
						<ul>
							<li>
								<div class="pic"><a href="#" target="_blank"><img src="pic/shizi.jpg" />a>div>
								<div class="title"><a href="#" target="_blank">张依沱<br>maya影视动画讲师a>div>
								<div class="text">供职于环球数码、奥飞等国内知名动漫公司，参与制作过《大圣归来》、《maya the bee》《超级飞侠》《寂静岭》等大型动画项目div>
							li>
						ul>
						<ul>
							<li>
								<div class="pic"><a href="#" target="_blank"><img src="pic/shizi.jpg" />a>div>
								<div class="title"><a href="#" target="_blank">张依沱<br>maya影视动画讲师a>div>
								<div class="text">供职于环球数码、奥飞等国内知名动漫公司，参与制作过《大圣归来》、《maya the bee》《超级飞侠》《寂静岭》等大型动画项目div>
							li>
						ul>
						<ul>
							<li>
								<div class="pic"><a href="#" target="_blank"><img src="pic/shizi.jpg" />a>div>
								<div class="title"><a href="#" target="_blank">张依沱<br>maya影视动画讲师a>div>
								<div class="text">供职于环球数码、奥飞等国内知名动漫公司，参与制作过《大圣归来》、《maya the bee》《超级飞侠》《寂静岭》等大型动画项目div>
							li>
						ul>
						<ul>
							<li>
								<div class="pic"><a href="#" target="_blank"><img src="pic/shizi.jpg" />a>div>
								<div class="title"><a href="#" target="_blank">张依沱<br>maya影视动画讲师a>div>
								<div class="text">供职于环球数码、奥飞等国内知名动漫公司，参与制作过《大圣归来》、《maya the bee》《超级飞侠》《寂静岭》等大型动画项目div>
							li>
						ul>
						<ul>
							<li>
								<div class="pic"><a href="#" target="_blank"><img src="pic/shizi.jpg" />a>div>
								<div class="title"><a href="#" target="_blank">张依沱<br>maya影视动画讲师a>div>
								<div class="text">供职于环球数码、奥飞等国内知名动漫公司，参与制作过《大圣归来》、《maya the bee》《超级飞侠》《寂静岭》等大型动画项目div>
							li>
						ul>

				div>
			div>
		div>	
	
	div>
div>

<script type="text/javascript">
jQuery(".multipleColumn2").slide({titCell:".hd ul",mainCell:".bd .ulWrap2",autoPage:true,effect:"leftLoop",autoPlay:true,vis:4});
script>
<div class="clear">div>

<div id="youshi">
div>


<div class="clear">div>
<div id="xiangmu">
	<div class="ititle">项目展示div>
	<div class="xiangmu">
		<div class="xiangmu1">
			<div class="xiangmut">
				<p class="p1">发布时间：2015-12-30p>
				<p class="p2">这里是项目的作品标题标题名称示范p>
				<p class="p3">这里是作品简介，这里是作品简介，这里是作品简介，这里是作品简介，这里是作品简介，这里是作品简介，这里是作品简介，这里是作品简介，这里是作品简介，这里是作品简介，这里是作品简介，这里是作品简介，这里是作品简介，这里是作品简介，这里是作品简介，这里是作品简介。p>
			div>
			<div class="xiangmup">
				<img src="pic/b1.jpg" width="684" height="343">
			div>
		div>
		<div class="clear">div>
		<div class="xiangmu2">
			<div class="xiangmut">
				<p class="p1">发布时间：2015-12-30p>
				<p class="p2">这里是项目的作品标题标题名称示范p>
				<p class="p3">这里是作品简介，这里是作品简介，这里是作品简介，这里是作品简介，这里是作品简介，这里是作品简介，这里是作品简介，这里是作品简介，这里是作品简介，这里是作品简介，这里是作品简介，这里是作品简介，这里是作品简介，这里是作品简介，这里是作品简介，这里是作品简介。p>
			div>
			<div class="xiangmup">
				<img src="pic/b2.jpg" width="684" height="343">
			div>
		div>
		<div class="clear">div>
		<div class="xiangmu3">
			<div class="xiangmut">
				<p class="p1">发布时间：2015-12-30p>
				<p class="p2">这里是项目的作品标题标题名称示范p>
				<p class="p3">这里是作品简介，这里是作品简介，这里是作品简介，这里是作品简介，这里是作品简介，这里是作品简介，这里是作品简介，这里是作品简介，这里是作品简介，这里是作品简介，这里是作品简介，这里是作品简介，这里是作品简介，这里是作品简介，这里是作品简介，这里是作品简介。p>
			div>
			<div class="xiangmup">
				<img src="pic/b3.jpg" width="684" height="343">
			div>
		div>
	div>
div>

<div class="clear">div>
<div id="hezuo">
	<div class="ititle">部分合作企业需求div>	
	<div class="hezuo">
		<img src="pic/hezuo1.jpg" width="1000" height="224">
		<img src="pic/hezuo2.jpg" width="1000" height="288">
		<img src="pic/hezuo3.jpg" width="1000" height="151">
	div>
div>

<div class="clear">div>
<div id="mengxiang">
	<div class="mengxiang">	
		<p class="p1">动漫梦想，始于奇恩！p>
		<p class="p2">与其碌碌无为，不如现在行动，加入奇恩动漫学习计划，改写自己的职场命运！p>
		<div class="p3"><a href="#"><img src="pic/mengxiang.png" width="139" height="54">a>div>
	div>
div>


<div class="clear">div>
<div id="footer">
<div class="footer">
	<div class="Top-List">
		<dl class="list-box">
			<dt>常见问题dt>
			<dd><a target="_blank" href="#m=guestbook&c=qq&a=init">零基础学设计能学会？a>dd>
			<dd><a target="_blank" href="#m=guestbook&c=qq&a=init">老师教得好不好？a>dd>
			<dd><a target="_blank" href="#m=guestbook&c=qq&a=init">上课时间怎么安排？a>dd>
			<dd><a target="_blank" href="#m=guestbook&c=qq&a=init">天琥怎么推荐就业？a>dd>
			<dd><a target="_blank" href="#m=guestbook&c=qq&a=init">最近有没有优惠？a>dd>
			<dd><a target="_blank" href="#m=guestbook&c=qq&a=init">重修的条件是什么？a>dd>
			
		dl>
		<dl class="list-box">
			<dt>核心课程dt>
			<dd><a target="_blank" href="#105-1.html">电商设计运营班a>dd>
			<dd><a target="_blank" href="#41-1.html">UI实战就业班a>dd>
			<dd><a target="_blank" href="#44-1.html">室内空间创意班a>dd>
			<dd><a target="_blank" href="#38-1.html">平面视觉创意班a>dd>
			<dd><a target="_blank" href="#97-1.html">PhotoShop全能特训班a>dd>
			<dd><a target="_blank" href="#98-1.html">CAD设计制图考证班a>dd>
		dl>
		<dl class="list-box">
			<dt>成功案例dt>
			<dd><a target="_blank" href="#16-1.html">就业明星a>dd>
			<dd><a target="_blank" href="#19-1.html">励志学员a>dd>
			<dd><a target="_blank" href="#18-1.html">零基础学员a>dd>
			<dd><a target="_blank" href="#17-1.html">中标明星a>dd>
		dl>
		<div class="last-box">
			<dl style="width: 100%;" class="list-box">
				<dt>联系我们dt>
				<dd><a target="_blank" href="#48-1.html">全国连锁分校a>dd>
				<dd><a target="_blank" href="#m=guestbook&c=qq&a=init">您问我们来答a>dd>
			dl>
			<div class="clear">div>
			<div class="callphone">
				<span class="smalltit">咨询热线:span>
				<p>400-000-0000p>
			div>
		div>
		<div class="clear">div>
	div>
	<div class="Bot-List">
		<div class="mid">
			<div class="fl">
				<dl class="dl-list">
					<dt>友情链接：dt>
					 <dd><a target="_blank" href="http://www.xtyunke.com/">厚学网a>dd>
                    <dd><a target="_blank" href="http://www.xtyunke.com/">教育联展网a>dd>
                    <dd><a target="_blank" href="http://www.xtyunke.com/">勤学教育a>dd>
                    <dd><a target="_blank" href="http://www.xtyunke.com/">搜课网a>dd>
                    <dd><a target="_blank" href="http://www.xtyunke.com/">广州培训通a>dd>
                    <dd><a target="_blank" href="http://www.xtyunke.com/">广州厚学培训a>dd>
                    <dd><a target="_blank" href="http://www.xtyunke.com/">会计学习网a>dd>
                    <dd><a target="_blank" href="http://www.xtyunke.com/">素材下载a>dd>
                    <dd><a target="_blank" href="http://www.xtyunke.com/">恒企教育a>dd>
					<dd><a target="_blank" href="http://www.xtyunke.com/">网站建设a>dd>
										
				dl>
				<dl class="dl-list">
					<dt>关键词：dt>
											
						<dd><a target="_blank" href="#97-1.html">PhotoShop学习a>dd>
						
						<dd><a target="_blank" href="#43-1.html">网页设计需要学什么a>dd>
						
						<dd><a target="_blank" href="#41-1.html">Web界面设计a>dd>
						
						<dd><a target="_blank" href="#105-1.html">电商培训班a>dd>
						
						<dd><a target="_blank" href="#43-1.html">网页设计培训机构a>dd>
						
						<dd><a target="_blank" href="#m=guestbook&c=qq&a=init">培训班多少钱a>dd>
						
				dl>
			div>
			<div class="fr">
				<div class="codeimg">
					<p>微网二维码p>
					<img alt="" src="http://img.tianhujy.com/pc/statics/css/newmain/newindex/2015112611.jpg">
				div>
				<div class="codeimg">
					<p>官方微信p>
					<img alt="" src="http://img.tianhujy.com/pc/statics/css/newmain/newindex/2015112612.jpg">
				div>
				<div class="codeimg">
					<p>设计改稿答疑p>
					<img alt="" src="http://img.tianhujy.com/pc/statics/css/newmain/newindex/2015112613.jpg">
				div>
			div>
			<div class="clear">div>
		div>
	div>
div>
div>

	<div class="copy-right">
		<p><span style="color:#ed6d00">奇恩动漫span> Copyright ©2015 ALL Rights Reserved 备案号：粤ICP备15020078号-1 建议使用1280X768以上分辨率浏览本站p>
	div>

		
body>
html>




    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187
    • 188
    • 189
    • 190
    • 191
    • 192
    • 193
    • 194
    • 195
    • 196
    • 197
    • 198
    • 199
    • 200
    • 201
    • 202
    • 203
    • 204
    • 205
    • 206
    • 207
    • 208
    • 209
    • 210
    • 211
    • 212
    • 213
    • 214
    • 215
    • 216
    • 217
    • 218
    • 219
    • 220
    • 221
    • 222
    • 223
    • 224
    • 225
    • 226
    • 227
    • 228
    • 229
    • 230
    • 231
    • 232
    • 233
    • 234
    • 235
    • 236
    • 237
    • 238
    • 239
    • 240
    • 241
    • 242
    • 243
    • 244
    • 245
    • 246
    • 247
    • 248
    • 249
    • 250
    • 251
    • 252
    • 253
    • 254
    • 255
    • 256
    • 257
    • 258
    • 259
    • 260
    • 261
    • 262
    • 263
    • 264
    • 265
    • 266
    • 267
    • 268
    • 269
    • 270
    • 271
    • 272
    • 273
    • 274
    • 275
    • 276
    • 277
    • 278
    • 279
    • 280
    • 281
    • 282
    • 283
    • 284
    • 285
    • 286
    • 287
    • 288
    • 289
    • 290
    • 291
    • 292
    • 293
    • 294
    • 295
    • 296
    • 297
    • 298
    • 299
    • 300
    • 301
    • 302
    • 303
    • 304
    • 305
    • 306
    • 307
    • 308
    • 309
    • 310
    • 311
    • 312
    • 313
    • 314
    • 315
    • 316
    • 317
    • 318
    • 319
    • 320
    • 321
    • 322
    • 323
    • 324
    • 325
    • 326
    • 327
    • 328
    • 329
    • 330
    • 331
    • 332
    • 333
    • 334
    • 335
    • 336
    • 337
    • 338
    • 339
    • 340
    • 341
    • 342
    • 343
    • 344
    • 345
    • 346
    • 347
    • 348
    • 349
    • 350
    • 351
    • 352
    • 353
    • 354
    • 355
    • 356
    • 357
    • 358
    • 359
    • 360
    • 361
    • 362
    • 363
    • 364
    • 365
    • 366
    • 367
    • 368
    • 369
    • 370
    • 371
    • 372
    • 373
    • 374
    • 375
    • 376
    • 377
    • 378
    • 379
    • 380
    • 381
    • 382
    • 383
    • 384
    • 385
    • 386
    • 387
    • 388
    • 389
    • 390
    • 391
    • 392
    • 393
    • 394
    • 395
    • 396
    • 397
    • 398
    • 399
    • 400
    • 401
    • 402
    • 403
    • 404
    • 405
    • 406
    • 407
    • 408
    • 409
    • 410
    • 411
    • 412
    • 413
    • 414
    • 415
    • 416
    • 417
    • 418
    • 419
    • 420
    • 421
    • 422
    • 423
    • 424
    • 425
    • 426
    • 427
    • 428
    • 429
    • 430
    • 431
    • 432
    • 433
    • 434
    • 435
    • 436
    • 437
    • 438
    • 439
    • 440
    • 441
    • 442
    • 443
    • 444
    • 445
    • 446
    • 447
    • 448
    • 449
    • 450
    • 451
    • 452
    • 453
    • 454
    • 455
    • 456
    • 457
    • 458
    • 459
    • 460
    • 461
    • 462
    • 463
    • 464
    • 465
    • 466
    • 467
    • 468
    • 469
    • 470
    • 471
    • 472
    • 473
    • 474
    • 475
    • 476
    • 477
    • 478
    • 479
    • 480
    • 481
    • 482
    • 483
    • 484
    • 485
    • 486
    • 487
    • 488
    • 489
    • 490
    • 491
    • 492
    • 493
    • 494
    • 495
    • 496
    • 497
    • 498
    • 499
    • 500
    • 501
    • 502
    • 503
    • 504
    • 505
    • 506
    • 507
    • 508
    • 509
    • 510

    2.CSS样式代码 🏠

    
*{margin:0; padding:0;}
body{font-size:12px; font-family:"微软雅黑"; color:#666666;}
img{border:none;}
ul,li,ol{list-style:none;}
a{color:#666666; text-decoration:none;}
a:hover{color:#666666; text-decoration:none;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clear{clear:both;}
.clear:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.fl{float:left;}
.fr{float:right;}

#header{width:100%; height:120px; background:#000;}
.header{width:1170px; height:120px; margin:0 auto;}
.logo{width:367px; height:120px; float:left;}
.logor{width:262px; height:120px; float:right;}


#menu{width:100%; height:29px; background:#000;}
.menu{width:1170px; height:29px; margin:0 auto;}
.nav{height:58px; line-height:58px; background:#39A4DC;  position:relative; z-index:1;}
.nav a{ color:#fff;}
.nav .nLi{ float:left;  position:relative; display:inline;width:146.25px; height:58px;}
.nav .nLi h3{display:block; text-align:center;}
.nav .nLi h3 a{ display:block; text-align:center; font-size:16px; font-weight:bold;  }
.nav .sub{ display:none; width:146.25px; left:0; top:58px;  position:absolute; background:#4E4E4E;}
.nav .sub li{ zoom:1;  line-height:58px; height:58px; text-align:center; }
.nav .sub a{ display:block;}

.color1{background: #5bb2fc;}
.color2{background:#ffa659;}
.color3{background: #B881CF;}
.color4{background: #fec63f;}
.color5{background:#58ebd3;}
.color6{background:#ff7a85;}
.nav .nLi h3 a:hover{opacity:0.8;}



/* 本例子css */
.slideBox{ width:100%; height:600px; overflow:hidden; position:relative; top:-29px;}
.slideBox .bd{ position:relative; height:100%; z-index:0;   }
.slideBox .bd li{ zoom:1; vertical-align:middle;width:100%; height:600px; }
.slideBox .bd img{ width:100%; height:600px; display:block;  }

/* 下面是前/后按钮代码，如果不需要删除即可 */
.slideBox .prev,
.slideBox .next{ position:absolute; left:3%; top:50%; margin-top:-25px; display:block; width:32px; height:40px; background:url(slider-arrow.png) -110px 5px no-repeat; filter:alpha(opacity=50);opacity:0.5;   }
.slideBox .next{ left:auto; right:3%; background-position:8px 5px; }
.slideBox .prev:hover,
.slideBox .next:hover{ filter:alpha(opacity=100);opacity:1;  }
.slideBox .prevStop{ display:none;  }
.slideBox .nextStop{ display:none;  }

#yewu{width:1170px; height:180px; margin:0 auto; margin-top:-29px;}
.ititle{font-size:32px; width:1170px; height:120px; letter-spacing:3px; line-height:100px; text-align:center; color:#CC3300; background:url(line.png) no-repeat 515px 80px;}

.yewu{width:1170px; height:180px;}
a.yewu1{width:390px; height:180px; float:left; background:#1A95BE; color:#fff;}
a.yewu2{width:390px; height:180px; float:left; background:#F6B939; color:#fff;}
a.yewu3{width:390px; height:180px; float:left; background:#FF7A85; color:#fff;}

.yewuimg{width:114px; height:180px; float:left;}
.yewuimg img{margin:30px 0 0 50px;}

.yewup{width:230px; float:left; padding:30px 30px 0 8px;}
p.yewup1{font-size:18px; font-weight:bold;}
p.yewup2{line-height:20px; margin-top:10px;}

#news{width:1170px; margin:0 auto; height:380px; margin-top:20px;}
.news{width:575px; float:left; height:380px;}
.jishu{width:575px; float:right; height:380px;}

.ititle2{width:575px; height:40px; line-height:40px; font-size:14px; color:#FA8334; border-bottom:1px solid #CCCCCC;}
.ititle2 p{width:200px; height:40px; border-bottom:1px solid #FA8334;}

.border-box{width:575px; height:180px; overflow:hidden; margin-top:10px;}
.border-box a;hover{color:#FA8334;}
.border-box1{width:282px; float:left; height:180px;}
.border-box2{width:282px; float:right; height:180px;}
.border-box h3{height:36px; line-height:36px; overflow:hidden; font-weight:normal; color:#FA8334;}

.divimg{width:282px; height:140px; overflow:hidden;}
.divimg img{width:282px; min-height:140px;}

ul.newsli{width:575px; margin-top:10px;}
ul.newsli li{width:272px; line-height:26px; float:left; margin:1%;}
ul.newsli li a{background:url("newsli.png") no-repeat ; display:block; padding-left:45px;}
ul.newsli li a:hover{color:#FA8334;background:url("thumb.png") no-repeat scroll -106px -224px; display:block; padding-left:45px;}

#kecheng{width:1170px; margin:0 auto;}
.kecheng{width:1170px; height:420px; background:#FEC63F;}

.kechengl{width:320px; height:436px; float:left;}
.kechengl ul{padding:30px 0; height:360px;}
.kechengl li{line-height:60px; height:60px; text-align:center;}
.kechengl li a{color:#fff; font-size:30px;}
.kechengr{width:850px; height:436px; float:right;}


.multipleColumn{ overflow:hidden; position:relative; width:850px;}

.multipleColumn .hd .prev{ display:block;  width:36px; height:70px; position:absolute;left:10px; top:200px; overflow:hidden; cursor:pointer; background:url("arrows.png") no-repeat -37px 0; z-index:999;}
.multipleColumn .hd .next{ display:block;  width:36px; height:70px; position:absolute;right:3px; top:200px; overflow:hidden; cursor:pointer; background:url("arrows.png") no-repeat 0 0; z-index:999;}



.multipleColumn .bd{ padding:10px; overflow:hidden;  }
.multipleColumn .bd ul{ overflow:hidden; zoom:1; width:270px;margin:0 5px;  float:left; _display:inline;  }
.multipleColumn .bd ul li{ float:left; _display:inline; overflow:hidden; text-align:center;  }
.multipleColumn .bd ul li .pic{ text-align:center; }
.multipleColumn .bd ul li .pic img{ width:270px; height:400px; display:block;}
.multipleColumn .bd ul li .pic a:hover img{ border-color:#999;  }
.multipleColumn .bd ul li .title{ line-height:24px;   }


#shizi{width:1170px; margin:0 auto;}
.multipleColumn2{ overflow:hidden; position:relative; width:1170px;}
.multipleColumn2 .hd .prev{ display:block;  width:36px; height:70px; position:absolute;left:10px; top:260px; overflow:hidden; cursor:pointer; background:url("arrows.png") no-repeat -37px 0; z-index:999;}
.multipleColumn2 .hd .next{ display:block;  width:36px; height:70px; position:absolute;right:0; top:260px; overflow:hidden; cursor:pointer; background:url("arrows.png") no-repeat 0 0; z-index:999;}


.multipleColumn2 .bd{ padding:10px; overflow:hidden;  }
.multipleColumn2 .bd ul{ overflow:hidden; zoom:1; width:285px;margin:0 5px;  float:left; _display:inline;  }
.multipleColumn2 .bd ul li{ float:left; _display:inline; overflow:hidden; text-align:center;  }
.multipleColumn2 .bd ul li .pic{ text-align:center; }
.multipleColumn2 .bd ul li .pic img{ width:285px; height:300px; display:block;}
.multipleColumn2 .bd ul li .pic a:hover img{ border-color:#999;  }
.multipleColumn2 .bd ul li .title{ line-height:24px; font-size:16px; margin-top:6px; color:#FA8334;}
.multipleColumn2 .bd ul li .title a{color:#FA8334;}
.multipleColumn2 .bd ul li .text{ line-height:24px;   }

#youshi{width:100%; height:; background:url(w.gif) center 25px no-repeat #EEEEEE; height:350px;}

#xiangmu{width:1170px; margin:0 auto;}
.xiangmu{width:1170px; height:1057px; background:#5BB2FC;}
.xiangmu1{width:1170px; height:353px; float:left;}
.xiangmu2{width:1170px; height:353px; float:left;}
.xiangmu3{width:1170px; height:353px; float:left;}

.xiangmu1 .xiangmut, .xiangmu3 .xiangmut{width:466px; height:353px; float:left; color:#fff; text-align:center;}
.xiangmu1 .xiangmup, .xiangmu3 .xiangmup{width:684px; height:384px; float:right;}
.xiangmu2 .xiangmut{width:466px; height:353px; float:right; color:#fff; text-align:center;}
.xiangmu2 .xiangmup{width:684px; height:384px; float:left;}
.xiangmu p{line-height:24px; padding:0 25px;}
.xiangmu .p1{margin-top:60px;}
.xiangmu .p2{font-size:18px; color:#FEC63F; line-height:66px;}
.xiangmu .p2 a{font-size:18px; color:#FEC63F;}


#hezuo{width:1170px; margin:0 auto;}
.hezuo img{float:left;}


#mengxiang{width:100%; height:220px; background:#F7BE68;}
.mengxiang{width:1170px; margin:0 auto;  color:#333333;}
.mengxiang p{text-align:center;}
.mengxiang .p1{ font-size:32px; height:60px; line-height:60px; padding-top:30px;}
.mengxiang .p2{line-height:34px; font-size:16px;}
.mengxiang .p3{width:139px; height:54px; margin-top:10px; margin-left:515px;}


/*页脚*/
#footer {padding-top: 64px;background:#2c2b33;}
.footer{width:1170px; margin:0 auto;}
.footer .Top-List{width: 1000px;margin:0 auto;padding-bottom:16px;}
.footer .list-box{float: left;width: 25%;}
.footer .last-box{width: 25%;float: left;}
.footer .Top-List dt{color:#fff;font-size: 14px;margin-bottom:22px;}
.footer .Top-List dd{line-height: 26px;}
.footer a{text-decoration: none;font-size: 12px;font-family: "宋体";color:#717077;}
.footer a:hover{text-decoration: underline;}
.footer .callphone{padding-top: 30px;}
.footer .callphone .smalltit{display: block;width: 64px;height: 18px;background-color:#5c5c61;color:#fff;font-family: "宋体";font-size: 12px;line-height: 18px;text-align: center;margin-bottom:14px;}
.footer .callphone p{font-family: "Arial";font-size: 22px;color:#ed6d00;}
.footer .Bot-List{width: 100%;padding:20px 0;border-top:1px solid #3b3a41;}
.footer .Bot-List .fl{width: 795px;padding-top:28px;text-align: left;}
.footer .Bot-List .fr{width: 340px;}
.footer .Bot-List .codeimg{width: 84px;margin-left: 26px;color: #717077;font-family: "宋体";font-size: 12px;text-align: center;float: left;line-height: 42px;margin-top: 8px;}
.footer .Bot-List dl{margin-top:1em;}
.footer .Bot-List dt{display: inline-block;font-family:"宋体";font-size: 12px;color:#717077;}
.footer .Bot-List dd{display: inline-block;height: 14px;line-height: 10px;padding: 0 .6em;border-right: 1px solid #717077;*display: inline;*border: 0;*height: auto;*line-height: 20px;}

.copy-right{width:100%;background: #060607;height: 46px;line-height: 46px;text-align: center;font-family:"宋体";font-size: 12px;color:#717077;}
.copy-right span{color:#ed6d00;}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139
    • 140
    • 141
    • 142
    • 143
    • 144
    • 145
    • 146
    • 147
    • 148
    • 149
    • 150
    • 151
    • 152
    • 153
    • 154
    • 155
    • 156
    • 157
    • 158
    • 159
    • 160
    • 161
    • 162
    • 163
    • 164
    • 165
    • 166
    • 167
    • 168
    • 169
    • 170
    • 171
    • 172
    • 173
    • 174
    • 175
    • 176
    • 177
    • 178
    • 179
    • 180
    • 181
    • 182
    • 183
    • 184
    • 185
    • 186
    • 187

    三、个人总结😊

    一套合格的网页应该包含(具体可根据个人要求而定)

    1. 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；
    2. 所有页面相互超链接，可到三级页面，有5-10个页面组成；
    3. 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；
    4. 菜单美观、醒目，二级菜单可正常弹出与跳转；
    5. 要有JS特效，如定时切换和手动切换图片新闻；
    6. 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
    7. 页面清爽、美观、大方，不雷同。
    8. 网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

    四、更多干货🚀

    1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

    2.❤️【关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！

    3.以上内容技术相关问题😈欢迎一起交流学习🔥在这里插入图片描述

  • 相关阅读:
    uni-app 微信小程序问题集锦
    【21天学习挑战赛】折半插入排序
    如何修复epic中的 EasyAntiCheat
    Echarts的配置修改
    git log
    SSM基于小程序的医院预约挂号系统 毕业设计-附源码260839
    mysql——数据库之间的迁移
    顺丰快递：请签收 MySQL 灵魂十连
    kotlin 类
    一文解开主流开源变更数据捕获技术之Flink CDC的入门使用
  • 原文地址：https://blog.csdn.net/wx_365392777/article/details/128196695