36个精美完整网站网页完整源码HTML+CSS+JS

微信公众号：创享日记
发送：36
获取全部完整源码（打开.html文件均即可用）
在这里插入图片描述

以下列举前9个效果图，源码详见微信公众号下载

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

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

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

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

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

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

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

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

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

DOCTYPE html>
<html lang="en">
<head>
<title>Abouttitle>
<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>


head>
<body id="page1">
<div class="main">

	<header>
		<div class="wrapper">
			<nav>
				<ul id="menu">
					<li id="menu_active"><a href="index.html"><span>Aspan>bouta>li>
					<li><a href="Services.html"><span>Sspan>ervicesa>li>
					<li><a href="Gallery.html"><span>Gspan>allerya>li>
					<li><a href="Privacy.html"><span>Pspan>rivacya>li>
					<li><a href="Contacts.html"><span>Cspan>ontactsa>li>
				ul>
			nav>
		div>
		<h1><a href="index.html" id="logo">DesignStudio.coma>h1>
	header><div class="ic">More Website Templates at TemplateMonster.com!div>


	<section id="content">
		<div class="wrapper">
			<article class="col1">
				<h2>About Ush2>
				<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 Studiostrong> Template is one of <a href="http://blog.templatemonster.com/free-website-templates/" target="_blank">free website templatesa> created by TemplateMonster.com team. This website template is optimized for 1024X768 screen resolution. It is also XHTML & 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 Templatea> 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 Solutionsspan>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">Developmentstrong><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 Designstrong><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">Planningstrong><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 Strategiesstrong><br>Velit esse quam nihil molestiae consequatur, vel illumqui dolorem eum fugiat voluptas laiantium totam rem.div>
								div>
							div>
						div>
					div>
				div>
    		article>
			<article class="col2">
				<h3>Latest Worksh3>
				<ul class="ul_works">
					<li><a href="#"><img src="images/page1_img1.png" alt="">a>li>
					<li><a href="#"><img src="images/page1_img2.png" alt="">a>li>
				ul>
				<h4>Recent Tweetsh4>
				<div class="tweets">
					<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem.<br><a href="#">20 days agoa>p>
					<p>Accusantium doloremque laudatium, totam rem aperiam, eaque ipsa.<br><a href="#">36 days agoa>p>
					<p>Nemo enim ipsam voluptatem quia voluptas.<br><a href="#">54 days agoa>p>
				div>
    		article>
		div>
	section>


	<footer>
		<div class="wrapper">
			<article class="col">
				<h5>Why Ush5>
				<ul class="list1">
					<li><a href="#">Sedut perspiciatisa>li>
					<li><a href="#">Unde omnis istea>li>
					<li><a href="#">Natus error sit a>li>
					<li><a href="#">Volupttem accusa>li>
					<li><a href="#">Ntium doloremque a>li>
				ul>
			article>
			<article class="col pad_left2">
				<h5>Linksh5>
				<ul class="list1">
					<li><a href="#">Audantium, totama>li>
					<li><a href="#">Remaperiam, eaquea>li>
					<li><a href="#">Ipsa quae abilloa>li>
					<li><a href="#">Inventore veritatis et a>li>
					<li><a href="#">Quasi architecto a>li>
				ul>
			article>
			<article class="col pad_left2">
				<h5>Follow Ush5>
				<ul class="icons">
					<li><a href="#"><img src="images/icon1.jpg" alt="">Facebooka>li>
					<li><a href="#"><img src="images/icon2.jpg" alt="">Stumleupona>li>
					<li><a href="#"><img src="images/icon3.jpg" alt="">Twittera>li>
					<li><a href="#"><img src="images/icon4.jpg" alt="">Digga>li>
					<li><a href="#"><img src="images/icon5.jpg" alt="">RSS Feeda>li>
				ul>
			article>
			<article id="newsletter">
				<h5>Newsletterh5>
				<form id="newsletter_form">
					<div class="wrapper">
						<input class="input" type="text" value="Enter your email here" onblur="if(this.value=='') this.value='Enter your email here'" onFocus="if(this.value =='Enter your email here' ) this.value=''" >
					div>
					<a href="#" onClick="document.getElementById('newsletter_form').submit()">Subscribea>
				form>
			article>
		div>
		<article class="privacy">
			<a rel="nofollow" href="http://www.templatemonster.com/">Website templatea> designed by TemplateMonster.com<br><a href="http://www.templates.com/product/3d-models/">3D Modelsa> provided by Templates.com
		article>
		<a href="index.html" class="footer_logo">Design<span>Studiospan>.coma>
	footer>

div>
<script type="text/javascript">Cufon.now();script>
<script type="text/javascript">
	$(window).load(function() {
	$('#nivo_slider').nivoSlider({
		effect:'fold', //Specify sets like: 'fold,fade,sliceDown, sliceDownLeft, sliceUp, sliceUpLeft, sliceUpDown, sliceUpDownLeft'
		slices:7,
		animSpeed:500,
		pauseTime:6000,
		startSlide:0, //Set starting Slide (0 index)
		directionNav:true, //Next & Prev
		directionNavHide:false, //Only show on hover
		controlNav:true, //1,2,3...
		controlNavThumbs:false, //Use thumbnails for Control Nav
		controlNavThumbsFromRel:false, //Use image rel for thumbs
		controlNavThumbsSearch: '.jpg', //Replace this with...
		controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
		keyboardNav:true, //Use left & right arrows
		pauseOnHover:true, //Stop animation while hovering
		manualAdvance:false, //Force manual transitions
		captionOpacity:1, //Universal caption opacity
		beforeChange:function(){},
		afterChange:function(){},
		slideshowEnd:function(){} //Triggers after all slides have been shown
	});
});
script>
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

相关阅读:
汽车发电机三根线接线图图解，发电机调节器怎么接线
 Taurus .Net Core 微服务开源框架：Admin 插件【4-1】 - 配置管理-Kestrel【含https启用】
排序6：冒泡排序及优化思想
 Pandas列中的字典/列表拆分为单独的列
 locust与jmeter测试过程及结果对比
 【ROS进阶篇】第六讲 ROS中的录制与回放（rosbag）
C# 读取 Excel xlsx 文件，显示在 DataGridView 中
 51.基于SpringBoot + Vue实现的前后端分离-校园志愿者管理系统（项目 + 论文）
手把手教你做测开：开发Web平台之用户信息
 手撸时间轮
原文地址：https://blog.csdn.net/m0_46653805/article/details/125771951