Hướng dẫn tạo Slide đơn giản với HTML 5
Trang 1 trong tổng số 1 trang • Share
Hướng dẫn tạo Slide đơn giản với HTML 5
by thietkewebosvn 16/10/2014, 01:01
HTML 5 được coi là tương lai của công nghệ thiet ke web. Với nhiều ứng dụng và lợi ích vượt bậc trong lĩnh vực thiết kế website. HTML 5 sẽ thống lĩnh thị trường trong thời gian tới. Vậy tại sao bây giờ bạn chưa áp dụng HTML5 trong thiết kế website của bạn. Sau đây cong ty thiet ke web chuyên nghiệp OSVN sẽ hướng dẫn các bạn sử dụng HTML 5 kết hợp javaScrip tạo slide đơn giản cho website.
Khởi động trình soạn thảo code bất kỳ, ở đây tôi sử dụng Adobe Dreamweaver. Các bạn có thể sử dụng các công cụ lập trình hỗ trợ thiết kế web khác. Tạo một file demoslide.html và tạo đoạn code nội dung như sau:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Demo Sử dụng HTML 5 & javaScript tạo hiệu ứng đơn giản</title>
<link href=”CSS/style_tut.css” rel=”stylesheet” type=”text/css”>
<script src=”js/alert_tut.js”></script>
</head>
<body onLoad=”photoA()”>
<div id=”slider”>
<img src=”images/img1.jpg” id=”image” >
<div class=”left_hold”><img onClick=”photo(-1)” class=”left” src=”images/arrow_left.png”></div>
<div class=”right_hold”><img onClick=”photo(1)” class=”right” src=”images/arrow_right.png”></div>
</div>
<div>
Thực hiện bởi: <a href=”http://www.ithietkeweb.net”>Thiết kế web</a> OSVN
</div>
</body>
</html>
Sau đó chúng ta Css cho file demoslide.html. Và javaScript cho nó với 4 file .js
Xem và download file js tại bài hướng dẫn http://ithietkeweb.net/tao-slide-don-gian-voi-html-5-javascript/
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>Demo Sử dụng HTML 5 & javaScript tạo hiệu ứng đơn giản</title>
<link href=”CSS/style_tut.css” rel=”stylesheet” type=”text/css”>
<script src=”js/alert_tut.js”></script>
</head>
<body onLoad=”photoA()”>
<div id=”slider”>
<img src=”images/img1.jpg” id=”image” >
<div class=”left_hold”><img onClick=”photo(-1)” class=”left” src=”images/arrow_left.png”></div>
<div class=”right_hold”><img onClick=”photo(1)” class=”right” src=”images/arrow_right.png”></div>
</div>
<div>
Thực hiện bởi: <a href=”http://www.ithietkeweb.net”>Thiết kế web</a> OSVN
</div>
</body>
</html>
Sau đó chúng ta Css cho file demoslide.html. Và javaScript cho nó với 4 file .js
Xem và download file js tại bài hướng dẫn http://ithietkeweb.net/tao-slide-don-gian-voi-html-5-javascript/
thietkewebosvn- Cấp 0
- Bài gửi : 4
Điểm : 3699
Like : 0
Tham gia : 09/10/2014
Similar topics» Click HTML HTML HTML
» Tối giản xu hướng sofa phòng khách không gian
» Bếp từ Electrolux EHM6532FOK Điều khiển cảm ứng slide thông minh
» bán bút điều khiển slide, bút trình chiếu vp101, pp900, logitech R400, R800
» Xu hướng búi tóc tết đơn giản
» Tối giản xu hướng sofa phòng khách không gian
» Bếp từ Electrolux EHM6532FOK Điều khiển cảm ứng slide thông minh
» bán bút điều khiển slide, bút trình chiếu vp101, pp900, logitech R400, R800
» Xu hướng búi tóc tết đơn giản
Trang 1 trong tổng số 1 trang
Permissions in this forum:
Bạn không có quyền trả lời bài viết
