<!DOCTYPE html>
    <html lang="vi" xmlns="http://www.w3.org/1999/xhtml" prefix="og: http://ogp.me/ns#">
    <head>
<title>Cách xây dựng trang web PHP đơn giản</title>
<meta name="description" content="Cách xây dựng trang web PHP đơn giản - Savefile - Tin Tức -...">
<meta name="author" content=".: Nguoicodonvn2008.info - Cõi lòng người cô đơn :.">
<meta name="copyright" content=".: Nguoicodonvn2008.info - Cõi lòng người cô đơn :. [admin@nguoicodonvn2008.info]">
<meta name="robots" content="index, archive, follow, noodp">
<meta name="googlebot" content="index,archive,follow,noodp">
<meta name="msnbot" content="all,index,follow">
<meta name="generator" content="NukeViet v4.5">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta property="og:title" content="Cách xây dựng trang web PHP đơn giản">
<meta property="og:type" content="website">
<meta property="og:description" content="Savefile - Tin Tức - https&#x3A;&#x002F;&#x002F;www.nguoicodonvn2008.info&#x002F;vi&#x002F;news&#x002F;savefile&#x002F;kien-thuc-may-tinh&#x002F;cach-xay-dung-trang-web-php-don-gian-871.html">
<meta property="og:site_name" content=".&#x3A; Nguoicodonvn2008.info - Cõi lòng người cô đơn &#x3A;.">
<meta property="og:url" content="https://www.nguoicodonvn2008.info/vi/news/savefile/kien-thuc-may-tinh/cach-xay-dung-trang-web-php-don-gian-871.html">
<link rel="shortcut icon" href="https://www.nguoicodonvn2008.info/favicon.ico">
<link rel="canonical" href="https://www.nguoicodonvn2008.info/vi/news/savefile/kien-thuc-may-tinh/cach-xay-dung-trang-web-php-don-gian-871.html">
<link rel="alternate" href="https://www.nguoicodonvn2008.info/vi/news/rss/" title="Tin Tức" type="application/rss+xml">
<link rel="alternate" href="https://www.nguoicodonvn2008.info/vi/news/rss/karaoke-dual/" title="Tin Tức - Karaoke Dual" type="application/rss+xml">
<link rel="alternate" href="https://www.nguoicodonvn2008.info/vi/news/rss/nhac-tre/" title="Tin Tức - Nhạc trẻ" type="application/rss+xml">
<link rel="alternate" href="https://www.nguoicodonvn2008.info/vi/news/rss/tru-tinh/" title="Tin Tức - Trữ tình" type="application/rss+xml">
<link rel="alternate" href="https://www.nguoicodonvn2008.info/vi/news/rss/nuoc-ngoai/" title="Tin Tức - Nước ngoài" type="application/rss+xml">
<link rel="alternate" href="https://www.nguoicodonvn2008.info/vi/news/rss/remix/" title="Tin Tức - Remix" type="application/rss+xml">
<link rel="alternate" href="https://www.nguoicodonvn2008.info/vi/news/rss/tam-su-tinh-yeu/" title="Tin Tức - Tâm sự tình yêu" type="application/rss+xml">
<link rel="alternate" href="https://www.nguoicodonvn2008.info/vi/news/rss/tho-suu-tam/" title="Tin Tức - Thơ sưu tầm" type="application/rss+xml">
<link rel="alternate" href="https://www.nguoicodonvn2008.info/vi/news/rss/cuoc-song/" title="Tin Tức - Cuộc sống" type="application/rss+xml">
<link rel="alternate" href="https://www.nguoicodonvn2008.info/vi/news/rss/phan-mem/" title="Tin Tức - Phần mềm" type="application/rss+xml">
<link rel="alternate" href="https://www.nguoicodonvn2008.info/vi/news/rss/kien-thuc-may-tinh/" title="Tin Tức - Kiến thức máy tính" type="application/rss+xml">
<link rel="alternate" href="https://www.nguoicodonvn2008.info/vi/news/rss/hoc-tap/" title="Tin Tức - Học tập" type="application/rss+xml">
<link rel="alternate" href="https://www.nguoicodonvn2008.info/vi/news/rss/tai-lieu/" title="Tin Tức - Tài liệu" type="application/rss+xml">
<link rel="alternate" href="https://www.nguoicodonvn2008.info/vi/news/rss/de-thi/" title="Tin Tức - Đề thi" type="application/rss+xml">
<link rel="preload" as="style" href="https://www.nguoicodonvn2008.info/assets/css/font-awesome.min.css" type="text/css">
<link rel="preload" as="style" href="https://www.nguoicodonvn2008.info/themes/default/css/bootstrap.non-responsive.css" type="text/css">
<link rel="preload" as="style" href="https://www.nguoicodonvn2008.info/themes/default/css/style.css" type="text/css">
<link rel="preload" as="style" href="https://www.nguoicodonvn2008.info/themes/default/css/style.non-responsive.css" type="text/css">
<link rel="preload" as="style" href="https://www.nguoicodonvn2008.info/themes/default/css/news.css" type="text/css">
<link rel="preload" as="style" href="https://www.nguoicodonvn2008.info/themes/default/css/custom.css" type="text/css">
<link rel="preload" as="script" href="https://www.nguoicodonvn2008.info/assets/js/jquery/jquery.min.js" type="text/javascript">
<link rel="preload" as="script" href="https://www.nguoicodonvn2008.info/assets/js/language/vi.js" type="text/javascript">
<link rel="preload" as="script" href="https://www.nguoicodonvn2008.info/assets/js/DOMPurify/purify3.js" type="text/javascript">
<link rel="preload" as="script" href="https://www.nguoicodonvn2008.info/assets/js/global.js" type="text/javascript">
<link rel="preload" as="script" href="https://www.nguoicodonvn2008.info/assets/js/site.js" type="text/javascript">
<link rel="preload" as="script" href="https://www.nguoicodonvn2008.info/themes/default/js/news.js" type="text/javascript">
<link rel="preload" as="script" href="https://www.nguoicodonvn2008.info/themes/default/js/main.js" type="text/javascript">
<link rel="preload" as="script" href="https://www.nguoicodonvn2008.info/themes/default/js/custom.js" type="text/javascript">
<link rel="preload" as="script" href="https://www.nguoicodonvn2008.info/themes/default/js/bootstrap.min.js" type="text/javascript">
<link rel="stylesheet" href="https://www.nguoicodonvn2008.info/assets/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.nguoicodonvn2008.info/themes/default/css/bootstrap.non-responsive.css">
<link rel="stylesheet" href="https://www.nguoicodonvn2008.info/themes/default/css/style.css">
<link rel="stylesheet" href="https://www.nguoicodonvn2008.info/themes/default/css/style.non-responsive.css">
<link rel="StyleSheet" href="https://www.nguoicodonvn2008.info/themes/default/css/news.css">
<link rel="stylesheet" href="https://www.nguoicodonvn2008.info/themes/default/css/custom.css">
<style type="text/css">
	body{background: #fff;}
</style>
    </head>
    <body>
<div id="print">
	<div id="hd_print">
		<h2 class="pull-left">.&#x3A; Nguoicodonvn2008.info - Cõi lòng người cô đơn &#x3A;.</h2>
		<p class="pull-right"><a title=".&#x3A; Nguoicodonvn2008.info - Cõi lòng người cô đơn &#x3A;." href="https://www.nguoicodonvn2008.info/">https://www.nguoicodonvn2008.info</a></p>
	</div>
	<div class="clear"></div>
	<hr />
	<div id="content">
		<h1>Cách xây dựng trang web PHP đơn giản</h1>
		<ul class="list-inline">
			<li>Thứ bảy - 31/08/2019 01:54</li>
			<li class="hidden-print txtrequired"><em class="fa fa-print">&nbsp;</em><a title="In ra" href="javascript:;" onclick="window.print()">In ra</a></li>
			<li class="hidden-print txtrequired"><em class="fa fa-power-off">&nbsp;</em><a title="Đóng cửa sổ này" href="javascript:;" onclick="window.close()">Đóng cửa sổ này</a></li>
		</ul>
		<div class="clear"></div>
		<div id="hometext">
		</div>
				<div class="imghome">
			<img alt="Cách xây dựng trang web PHP đơn giản" src="https://st.quantrimang.com/photos/image/2019/08/30/xay-dung-trang-web-php-don-gian-5.jpg" width="460" class="img-thumbnail" />
		</div>
		<div class="clear"></div>
		<div id="bodytext" class="clearfix">
			<p style="text-align: justify;">Bạn muốn tìm hiểu làm thế nào để xây dựng một trang web cơ bản? Trước đây, bạn có thể bắt đầu với&nbsp;<a href="https://quantrimang.com/html" title="Chuyên mục HTML">HTML</a>, nhưng hiện nay, giải pháp tốt nhất là PHP. Mặc dù bạn sẽ cần một số kiến ​​thức về HTML để bắt đầu, nhưng PHP đã trở thành lựa chọn tối ưu để xây dựng trang web, cả tĩnh và động.</p>

<p style="text-align: justify;">Để học PHP, cách tốt nhất để bắt đầu là với một trang web PHP đơn giản.</p>

<h2 id="mcetoc_1djgeehmq0" style="text-align: justify;">Tại sao lại chọn PHP để phát triển trang web?</h2>

<p style="text-align: justify;">Nhiều tùy chọn có sẵn để phát triển web trong những năm qua. Bắt đầu với HTML đơn giản, sau đó là HTML với CSS được nhúng hoặc tham chiếu file CSS. Khi các trang web động xuất hiện, có hai lựa chọn chính: ASP (sau này là ASP.NET) và PHP.</p>

<p style="text-align: justify;">Theo số liệu (như khảo sát của W3Techs), PHP phổ biến hơn nhiều, với gần 82% các trang web sử dụng nó làm ngôn ngữ lập trình phía máy chủ. So sánh điều này với chỉ dưới 16% sử dụng ASP.</p>

<p style="text-align: justify;">ASP được hỗ trợ cho đến năm 2022. PHP (từ viết tắt của PHP Hypertext Preprocessor) đã chứng minh mình thành công hơn, chủ yếu nhờ tích hợp dễ dàng hơn với&nbsp;Linux.</p>

<p style="text-align: justify;">Vì hệ điều hành mã nguồn mở này chạy trên hầu hết các máy chủ web, nên điều này không quá ngạc nhiên.</p>

<h2 id="mcetoc_1djgeehmq1" style="text-align: justify;">Bạn cần gì để xây dựng một trang web PHP?</h2>

<p style="text-align: justify;">Trước khi bắt đầu, hãy chắc chắn rằng bạn đã cài đặt trình soạn thảo plain text hoặc môi trường phát triển sẵn sàng cho PHP. Bạn có thể bắt đầu mã hóa PHP bằng một công cụ đơn giản như Windows Notepad. Các ví dụ được tìm thấy trong hướng dẫn này đã được viết trong Notepad++.</p>

<p style="text-align: justify;">Bạn cũng nên có một máy chủ web PHP để upload các file của mình lên. Đây có thể là máy chủ từ xa hoặc máy tính cục bộ có môi trường LAMP (Linux, Apache, MySQL, PHP) hoặc WAMP (Windows, Apache, MySQL, PHP) được cài đặt. Nếu bạn sử dụng Windows, hãy làm theo hướng dẫn cài đặt WAMP này để bắt đầu.</p>

<p style="text-align: justify;">Cuối cùng, bạn sẽ cần một chương trình FTP để upload các file của mình lên máy chủ web.</p>

<h2 id="mcetoc_1djgeehmq2" style="text-align: justify;">Bắt đầu với PHP: Cú pháp</h2>

<p style="text-align: justify;">Cú pháp cơ bản cho PHP đã sử dụng một tập hợp các dấu ngoặc nhọn, với mỗi hàm kết thúc bằng dấu chấm phẩy, như sau:</p>

<pre id="pre0">
<code>&lt;?php &#91;CODE…CODE&#93;; ?&gt;</code></pre>

<p style="text-align: justify;">Về các trang web, hầu hết mọi trường hợp sử dụng PHP đều phụ thuộc vào lệnh&nbsp;<strong>echo.</strong>Lệnh này hướng dẫn trình duyệt xuất văn bản và nội dung trong dấu ngoặc kép. Ví dụ:</p>

<pre id="pre1">
<code>&lt;?php &quot;&lt;p&gt;Hello World!&lt;/p&gt;&quot;; ?&gt;</code></pre>

<p style="text-align: justify;">Lưu ý rằng HTML cũng được bao gồm trong dấu ngoặc kép. Đầu ra cho lệnh này thường sẽ xuất hiện dưới dạng:</p>

<p style="text-align: justify;"><img alt="Đầu ra ví dụ" data-i="0" height="33" src="https://st.quantrimang.com/photos/image/2019/08/30/xay-dung-trang-web-php-don-gian-1.jpg" width="145" /></p>

<h2 id="mcetoc_1djgeehmq3" style="text-align: justify;">Xây dựng một trang web: Cấu trúc</h2>

<p style="text-align: justify;">Cho dù bạn viết bất cứ code nào cho trang web của mình, bạn sẽ cần biết cấu trúc của trang web trước khi tiếp tục. Hướng dẫn này sẽ chỉ cho bạn cách tạo một trang duy nhất từ ​​các file PHP có thể sử dụng lại. Chúng có thể được sử dụng để tạo các trang bổ sung hoặc bạn có thể chọn một cách tiếp cận khác.</p>

<p style="text-align: justify;">Cho dù bạn thấy trước trang web đang phát triển theo hướng nào, hãy dành thời gian để ghi lại một kế hoạch nhanh chóng trên giấy. Sau đó, bạn có thể tham khảo điều này, nhằm kiểm tra nội dung dự định hoặc xem trang nào để liên kết nó.</p>

<div style="text-align: justify;">&nbsp;</div>

<p style="text-align: justify;">Ví dụ trong bài viết sẽ là một trang chủ cơ bản, bao gồm thông tin tiểu sử và một số hình ảnh.</p>

<p style="text-align: justify;">Đối với trang web PHP đơn giản này, bạn sẽ tạo một trang PHP duy nhất được điền bởi nội dung từ 3 trang HTML. Sau đó, file&nbsp;<strong>index.php</strong>&nbsp;bạn tạo có thể được chỉnh sửa bằng cách điều chỉnh các từ và hình ảnh từ file HTML gốc.</p>

<p style="text-align: justify;">Các ví dụ code hiển thị dưới đây là ảnh chụp màn hình. Bạn sẽ tìm thấy code gốc trong kho GitHub, miễn phí cho mọi người tải xuống tại:</p>

<pre id="pre2">
<code>https://github.com/atomickarma/muobasicphp</code></pre>

<h2 id="mcetoc_1djgeehmq4" style="text-align: justify;">Bắt đầu website của bạn: PHP header</h2>

<p style="text-align: justify;">Để bắt đầu với website, bạn sẽ cần xây dựng 3 trang web. Chúng dựa trên cấu trúc cơ bản gồm header, body và footer.</p>

<p style="text-align: justify;">Như bạn có thể đoán, header bao gồm thông tin tiêu đề. Tuy nhiên, thông tin cho trình duyệt cũng được bao gồm, chẳng hạn như tiêu chuẩn HTML được sử dụng, cùng với các tham chiếu CSS.</p>

<p style="text-align: justify;">Bắt đầu bằng cách tạo một file có tên là&nbsp;<strong>header.html</strong>&nbsp;sau đó thêm thông tin header cần thiết.</p>

<p style="text-align: justify;"><img alt="Bắt đầu bằng cách tạo một file có tên là header.html" data-i="1" height="400" src="https://st.quantrimang.com/photos/image/2019/08/30/xay-dung-trang-web-php-don-gian-2.png" width="650" /></p>

<p style="text-align: justify;">Trong ví dụ này, bài viết đã sử dụng một file CSS cơ bản mà bạn sẽ thấy được tham chiếu trong thư mục&nbsp;<strong>/css/</strong>&nbsp;của chính nó. File này sẽ được gọi khi trang load trong trình duyệt của bạn, áp dụng phông chữ và bố cục cần thiết.</p>

<h2 id="mcetoc_1djgeehmq5" style="text-align: justify;">Đặt nội dung trong phần body của trang web PHP</h2>

<p style="text-align: justify;">Mỗi trang web đều có một phần nội dung được biết đến với tên gọi “body”. Đây là một phần của trang mà bạn đọc, những gì bạn đang đọc hiện tại là phần body của trang này.</p>

<p style="text-align: justify;"><img alt="Đặt nội dung trong phần body của trang web PHP" data-i="2" height="135" src="https://st.quantrimang.com/photos/image/2019/08/30/xay-dung-trang-web-php-don-gian-3.jpg" width="650" /></p>

<p style="text-align: justify;">Tạo một file có tên&nbsp;<strong>body.html</strong>&nbsp;và thêm thông tin bạn muốn đưa vào trang. Bạn có thể thêm bất cứ điều gì bạn thích.</p>

<h2 id="mcetoc_1djgeehmq6" style="text-align: justify;">Sử dụng PHP footer trong trang web</h2>

<p style="text-align: justify;">Tiếp theo là phần footer của trang web. Tạo phần này dưới dạng&nbsp;<strong>footer.html</strong>&nbsp;và thêm một số nội dung. Đây có thể là thông tin bản quyền hoặc có lẽ một số liên kết hữu ích cho bất kỳ ai truy cập trang của bạn.</p>

<p style="text-align: justify;">Footer có thể là một cái gì đó chẳng hạn như:</p>

<p style="text-align: justify;"><img alt="Ví dụ về Footer" data-i="3" height="202" src="https://st.quantrimang.com/photos/image/2019/08/30/xay-dung-trang-web-php-don-gian-4.jpg" width="650" /></p>

<p style="text-align: justify;">Với code đã được thêm vào, hãy lưu file.</p>

<h2 id="mcetoc_1djgeehmq7" style="text-align: justify;">Kết hợp tất cả các phần với nhau</h2>

<p style="text-align: justify;">Với 3 file HTML riêng biệt trong&nbsp;<strong>/html/,</strong>&nbsp;bạn có thể sử dụng PHP echo để kết hợp chúng thành một trang duy nhất.</p>

<p style="text-align: justify;">Tạo một file PHP mới có tên là index.php với ba dòng sau:</p>

<pre id="pre3">
<code>&lt;?php echo file_get_contents(&quot;html/header.html&quot;); ?&gt;
 &lt;?php echo file_get_contents(&quot;html/body.html&quot;); ?&gt;
 &lt;?php echo file_get_contents(&quot;html/footer.html&quot;); ?&gt;</code></pre>

<p style="text-align: justify;">Lưu, upload lên máy chủ, sau đó duyệt đến&nbsp;<strong>index.php.</strong>&nbsp;Bạn sẽ thấy trang web hoàn chỉnh trong trình duyệt của mình. Hãy nhớ rằng file PHP thực tế bạn đã mở trong trình duyệt của mình chỉ gồm ba dòng.</p>

<p style="text-align: justify;">Cuối cùng, bạn có thể thêm một vài nét tô điểm cho PHP với dòng cuối cùng, bao gồm một thông báo bản quyền:</p>

<pre id="pre4">
<code>&lt;p&gt;Copyright © CM Cawley &lt;?php echo date(&quot;Y&quot;); ?&gt;&lt;/p&gt;</code></pre>

<p style="text-align: justify;">Thông báo này sẽ xuất hiện trong file&nbsp;<strong>index.php</strong>&nbsp;theo footer. Lưu ý cách&nbsp;<strong>echo date(“Y”)</strong>hiển thị năm hiện tại theo 4 chữ số. Bạn có thể thay đổi cách hiển thị bằng cách tham khảo danh sách tùy chọn W3Schools này. Ví dụ, một chữ thường&nbsp;<strong>“y”</strong>&nbsp;sẽ hiển thị năm ở định dạng 2 chữ số, thay vì 4.</p>

<p style="text-align: justify;">Sử dụng CSS để định vị và định kiểu nó, như bạn làm với bất kỳ yếu tố nào khác. Tìm CSS cho dự án này trong GitHub, cùng với các file khác.</p>

<p style="text-align: justify;">Chúc mừng, bạn đã tạo ra trang web PHP đơn giản đầu tiên của mình rồi đấy.</p>

<h2 id="mcetoc_1djgeehmq8" style="text-align: justify;">PHP có phải là sự lựa chọn tốt nhất cho các trang web mã hóa không?</h2>

<p style="text-align: justify;"><img alt="PHP có phải là sự lựa chọn tốt nhất cho các trang web mã hóa không?" data-i="4" height="171" src="https://st.quantrimang.com/photos/image/2019/08/30/xay-dung-trang-web-php-don-gian-5.jpg" width="650" /></p>

<p style="text-align: justify;">Như bạn đã biết, PHP không phải là cách duy nhất để phát triển trang web. Nhiều framework đã tồn tại cho các trải nghiệm web dựa trên cơ sở dữ liệu động, có&nbsp;JavaScript, các công nghệ liên quan và phần mềm như&nbsp;Adobe Dreamweaver.</p>

<p style="text-align: justify;">Tuy nhiên, nếu bạn đang muốn bắt đầu với việc phát triển web, thì hãy thông minh trong việc có được sự đánh giá cao về những điều cơ bản. Nếu hiểu rõ về các building block cho website của HTML, CSS và PHP, bạn sẽ hoàn thành tốt công việc.</p>
		</div>
				<div id="author">
						<p>
				<strong>Nguồn tin:</strong>
				Quantrimang.com
			</p>
		</div>
	</div>
	<div id="footer" class="clearfix">
		<div id="url">
			<strong>URL của bản tin này: </strong><a href="https://www.nguoicodonvn2008.info/vi/news/savefile/kien-thuc-may-tinh/cach-xay-dung-trang-web-php-don-gian-871.html" title="Cách xây dựng trang web PHP đơn giản">https://www.nguoicodonvn2008.info/vi/news/savefile/kien-thuc-may-tinh/cach-xay-dung-trang-web-php-don-gian-871.html</a>

		</div>
		<div class="clear"></div>
		<div class="copyright">
			&copy; .&#x3A; Nguoicodonvn2008.info - Cõi lòng người cô đơn &#x3A;.
		</div>
		<div id="contact">
			<a href="mailto:admin@nguoicodonvn2008.info">admin@nguoicodonvn2008.info</a>
		</div>
	</div>
</div>
        <div id="timeoutsess" class="chromeframe">
            Bạn đã không sử dụng Site, <a onclick="timeoutsesscancel();" href="https://www.nguoicodonvn2008.info/#">Bấm vào đây để duy trì trạng thái đăng nhập</a>. Thời gian chờ: <span id="secField"> 60 </span> giây
        </div>
        <div id="openidResult" class="nv-alert" style="display:none"></div>
        <div id="openidBt" data-result="" data-redirect=""></div>
		</script>
		<div class="car-top">
  <span><img src="https://www.nguoicodonvn2008.info/themes/default/images/car.png" alt=""></span>
</div>
<script src="https://www.nguoicodonvn2008.info/assets/js/jquery/jquery.min.js"></script>
<script>var nv_base_siteurl="/",nv_lang_data="vi",nv_lang_interface="vi",nv_name_variable="nv",nv_fc_variable="op",nv_lang_variable="language",nv_module_name="news",nv_func_name="savefile",nv_is_user=0, nv_my_ofs=-4,nv_my_abbr="EDT",nv_cookie_prefix="nv4c_e856T",nv_check_pass_mstime=1738000,nv_area_admin=0,nv_safemode=0,theme_responsive=0,nv_recaptcha_ver=2,nv_recaptcha_sitekey="",nv_recaptcha_type="image",XSSsanitize=1;</script>
<script src="https://www.nguoicodonvn2008.info/assets/js/language/vi.js"></script>
<script src="https://www.nguoicodonvn2008.info/assets/js/DOMPurify/purify3.js"></script>
<script src="https://www.nguoicodonvn2008.info/assets/js/global.js"></script>
<script src="https://www.nguoicodonvn2008.info/assets/js/site.js"></script>
<script src="https://www.nguoicodonvn2008.info/themes/default/js/news.js"></script>
<script src="https://www.nguoicodonvn2008.info/themes/default/js/main.js"></script>
<script src="https://www.nguoicodonvn2008.info/themes/default/js/custom.js"></script>
<script type="application/ld+json">
        {
            "@context": "https://schema.org",
            "@type": "Organization",
            "url": "https://www.nguoicodonvn2008.info",
            "logo": "https://www.nguoicodonvn2008.info/uploads/angel.gif"
        }
        </script>
<script src="https://www.nguoicodonvn2008.info/themes/default/js/bootstrap.min.js"></script>
<script type="text/javascript">
var $scrolltop = $('.car-top');
$scrolltop.on('click', function () {
    $('html,body').animate({
        scrollTop: 0
    }, 800);
    $(this).addClass("car-run");
    setTimeout(function(){ $scrolltop.removeClass('car-run');}, 1000);
    return false;
});
$(window).on('scroll', function ()
{ 
    if($(window).scrollTop() >= 200)
    {
        $scrolltop.addClass("show");
        $scrolltop.addClass("car-down");
    }
    else
    {
       $scrolltop.removeClass("show");
       setTimeout(function(){ $scrolltop.removeClass('car-down');}, 300);
    }
});
</script>
</body>
</html>