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

作者：Gausst松鼠会 | 2024-02-26 04:29:51

踩

网站源码

前些天发现了一个巨牛的人工智能学习电子书，通俗易懂，风趣幽默，无广告，忍不住分享一下给大家。（点击查看学习资料）

在这里插入图片描述

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

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

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

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

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

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

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

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

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

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

<!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>
								</div>
							</div>
						</div>
					</div>
				</div>
    		</article>
			<article class="col2">
				<h3>Latest Works</h3>
				<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 Tweets</h4>
				<div class="tweets">
					<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem.<br><a href="#">20 days ago</a></p>
					<p>Accusantium doloremque laudatium, totam rem aperiam, eaque ipsa.<br><a href="#">36 days ago</a></p>
					<p>Nemo enim ipsam voluptatem quia voluptas.<br><a href="#">54 days ago</a></p>
				</div>
    		</article>
		</div>
	</section>
<!-- / content -->
<!-- footer -->
	<footer>
		<div class="wrapper">
			<article class="col">
				<h5>Why Us</h5>
				<ul class="list1">
					<li><a href="#">Sedut perspiciatis</a></li>
					<li><a href="#">Unde omnis iste</a></li>
					<li><a href="#">Natus error sit </a></li>
					<li><a href="#">Volupttem accus</a></li>
					<li><a href="#">Ntium doloremque </a></li>
				</ul>
			</article>
			<article class="col pad_left2">
				<h5>Links</h5>
				<ul class="list1">
					<li><a href="#">Audantium, totam</a></li>
					<li><a href="#">Remaperiam, eaque</a></li>
					<li><a href="#">Ipsa quae abillo</a></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 Us</h5>
				<ul class="icons">
					<li><a href="#"><img src="images/icon1.jpg" alt="">Facebook</a></li>
					<li><a href="#"><img src="images/icon2.jpg" alt="">Stumleupon</a></li>
					<li><a href="#"><img src="images/icon3.jpg" alt="">Twitter</a></li>
					<li><a href="#"><img src="images/icon4.jpg" alt="">Digg</a></li>
					<li><a href="#"><img src="images/icon5.jpg" alt="">RSS Feed</a></li>
				</ul>
			</article>
			<article id="newsletter">
				<h5>Newsletter</h5>
				<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()">Subscribe</a>
				</form>
			</article>
		</div>
		<article class="privacy">
			<a rel="nofollow" href="http://www.templatemonster.com/">Website template</a> designed by TemplateMonster.com<br><a href="http://www.templates.com/product/3d-models/">3D Models</a> provided by Templates.com
		</article>
		<a href="index.html" class="footer_logo">Design<span>Studio</span>.com</a>
	</footer>
<!-- / 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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/144027