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

相关阅读:
Java的异常处理机制概述
 Maven详细总结
 Taro小程序富文本解析4种方法
 利用Python制作全网通用的点赞器，绝绝子！
MySQL第四讲·如何正确设置主键？
【出人意料】一种基于Vue2监听器（watch）和定时器（setInterval）的轨迹播放方法实现方案
 MediaCodec_Analyze-3-start
element中less，scss，sass穿透设置表格table头的背景色(样式)
Spring 简介和基础使用
 ArrayList和LinkedList的区别
原文地址：https://blog.csdn.net/m0_46653805/article/details/125771951