36个精美完整网站网页完整源码HTML+CSS+JS网页课程设计

叶绿体不忘呼吸

已于 2024-09-17 14:58:41 修改

阅读量4.2w

点赞数 21

分类专栏：杂７杂８文章标签： javascript html css 前端网页网站网页设计

于 2022-07-13 20:49:12 首次发布

本文链接：https://blog.csdn.net/m0_46653805/article/details/125771951

版权

杂７杂８专栏收录该内容

68 篇文章 54 订阅

订阅专栏

文末获取完整源码源文件（打开.html文件均即可用）

在这里插入图片描述

以下列举前9个效果图，源码详见文末，可以自定义修改

①效果图
在这里插入图片描述

②效果图
在这里插入图片描述

③效果图
在这里插入图片描述

④效果图
在这里插入图片描述

⑤效果图
在这里插入图片描述

⑥效果图
在这里插入图片描述

⑦效果图
在这里插入图片描述

⑧效果图
在这里插入图片描述

⑨效果图
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
<title>About</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="css/layout.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.4.2.js" ></script>
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/cufon-replace.js"></script>
<script type="text/javascript" src="js/CabinSketch_700.font.js"></script>
<script type="text/javascript" src="js/EB_Garamond_400.font.js"></script>
<!-- [if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<style type="text/css">
.bg {behavior:url(js/PIE.htc)}
</style>
<![endif]-->
<!-- [if lt IE 7]>
<div style='clear:both;text-align:center;position:relative'>
	<a href="http://www.microsoft.com/windows/internet-explorer/default.aspx?ocid=ie6_countdown_bannercode"><img src="http://www.theie6countdown.com/images/upgrade.jpg" border="0" alt="" /></a>
</div>
<![endif]-->
</head>
<body id="page1">
<div class="main">
<!-- header -->
	<header>
		<div class="wrapper">
			<nav>
				<ul id="menu">
					<li id="menu_active"><a href="index.html"><span>A</span>bout</a></li>
					<li><a href="Services.html"><span>S</span>ervices</a></li>
					<li><a href="Gallery.html"><span>G</span>allery</a></li>
					<li><a href="Privacy.html"><span>P</span>rivacy</a></li>
					<li><a href="Contacts.html"><span>C</span>ontacts</a></li>
				</ul>
			</nav>
		</div>
		<h1><a href="index.html" id="logo">DesignStudio.com</a></h1>
	</header><div class="ic">More Website Templates at TemplateMonster.com!</div>
<!-- / header -->
<!-- content -->
	<section id="content">
		<div class="wrapper">
			<article class="col1">
				<h2>About Us</h2>
				<div class="pad_left1 pad_bot1">
					<div id="slider">
						<div id="for_img">
							<div id="nivo_slider">
								<img src="images/img1.jpg" alt="">
								<img src="images/img2.jpg" alt="">
								<img src="images/img3.jpg" alt="">
								<img src="images/img4.jpg" alt="">
								<img src="images/img5.jpg" alt="">
							</div>
						</div>
					</div>
					<div class="pad">
						<p><strong>Design Studio</strong> Template is one of <a href="http://blog.templatemonster.com/free-website-templates/" target="_blank">free website templates</a> created by TemplateMonster.com team. This website template is optimized for 1024X768 screen resolution. It is also XHTML &amp; CSS valid.</p>
						<p>This <a href="http://blog.templatemonster.com/2011/04/04/free-website-template-web-design-studio/" target="_blank">Free Design Studio Website Template</a> goes with two packages – with PSD source files and without them. PSD source files are available for free for the registered members of Templates.com. The basic package (without PSD source is available for anyone without registration).</p>
					</div>
				</div>
				<h2><span>Our Solutions</span></h2>
				<div class="pad_left1">
					<div class="pad_left1">
						<div class="wrapper pad_top1">
							<div class="col3">
								<div class="wrapper">
									<figure class="left marg_right1"><img src="images/page1_img3.png" alt=""></figure>
									<p class="cols"><strong class="font1">Development</strong><br>Error sit voluptatem accus antium doloremque laiantium totam rem aperiam, eaque tecto beatae.</p>
								</div>
							</div>
							<div class="col3 pad_left2">
								<div class="wrapper">
									<figure class="left marg_right1"><img src="images/page1_img5.png" alt=""></figure>
									<p class="cols"><strong class="font1">Creative Design</strong><br>Eorporis suscipit laboriosam, nisi ut aliquid ex ea commodi eum iure reprehenderit qui in ea voluptate.</p>
								</div>
							</div>
						</div>
						<div class="wrapper">
							<div class="col3">
								<div class="wrapper">
									<figure class="left marg_right1"><img src="images/page1_img4.png" alt=""></figure>
									<div class="cols"><strong class="font1">Planning</strong><br>Eius modi tempora incidunt aliquam quaerat enim ad minima veniam, quis nostrum exercitationem ullam.</div>
								</div>
							</div>
							<div class="col3 pad_left2">
								<div class="wrapper">
									<figure class="left marg_right1"><img src="images/page1_img6.png" alt=""></figure>
									<div class="cols"><strong class="font1">Effective Strategies</strong><br>Velit esse quam nihil molestiae consequatur, vel illumqui dolorem eum fugiat voluptas laiantium totam rem.</div>