Hướng dẫn cách tạo Menu đơn giản sử dụng HTML và CSS

DIM GROUP 01/04/2014 Thủ thuật Web 29 Views Comments

Hướng dẫn cách tạo Menu sử dụng HTML và CSS

Sau đây mình xin giới thiệu với các bạn, các tạo một Menu đơn giản sử dụng HTML và CSS
 
Đây là hình ảnh giao diện Menu sau khi hoàn thành:
 
Navigator
 
Bước 1: các bạn copy đoạn code HTML sau
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="vi" xml:lang="vi">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link rel="stylesheet" href="style.css"  type="text/css" media="all"/>
</head>
<body>
<div id="wrapper">
<div class="nav">
<ul>
<li class="active"><a href="#"title"#">Trang chủ</a></li>
<li><a href="#"title"#">Đào tạo</a></li>
<li><a href="#"title"#">Tuyển sinh</a></li>
<li><a href="#"title"#">Tin tức</a></li>
<li><a href="#"title"#">Liên hệ</a></li>
<li><a href="#"title"#">Download</a></li>
<ul>
<div class="search">
<form action="tim-kiem.html" method="post">
<input type="text" class="text" value=" Tìm kiếm..." onfocus="if (this.value==' Tìm kiếm...') this.value='';" onblur="if (this.value=='') this.value=' Tìm kiếm...';" name="check" />
<input type="submit" class="submit" value="Tìm" />
</form>
</div>
</div>
 
</div>
</body>
</html>

==> Sau đó lưu lại thành file index.html
 
Bước 2: các bạn copy đoạn code CSS sau:

html, body, div, span, applet, object, iframe, p, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, u, i, center, dl, dt, dd, ol, fieldset, form, label, legend, caption, tbody, tfoot, thead, article, aside, details, embed, figure, figcaption, header, hgroup, nav, output, ruby, section, time, mark, audio, video {
    border: 0 none;
    font: inherit;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
ol, ul, li { list-style:none }
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: none;
}
.aligncenter { display:block; margin:0 auto }
.alignleft  { float:left }
.alignright { float:right }
.clear{clear:both;}
a{text-decoration:none;}
*{padding:0px; margin:0px;}
body{ 
 color: #000;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px; 
 line-height: 20px;
 background: #FFF;
 }
#wrapper{
margin:0px auto;
width:1024px;
background: none repeat scroll 0 0 #FFFFFF;
}
.nav{
width:1024px;
height:30px;
border:1px solid #DEDEDE;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
background:#FF0000;
margin-top:10px;
}
.nav ul{
float:left;
}
.nav ul li{
float: left;
padding: 5px 20px;
font-weight: bold;
}
.nav ul li a{
color:#FFF;
}
.nav ul .active, .nav ul li:hover {
background:#FFDFDF;
}
.nav ul li:hover a, .nav ul .active a{
color:#333;
}
.nav .search{
position: relative;
float: right;
z-index: 998;
width: 250px;
right: -220px;
top: 5px;
}
.nav .search .text{
width:188px;
}
.nav .search .submit{
width: 42px;
text-align: center;
background: #FF7474;
font-weight:bold;
}
 
==> Lưu lại thành file style.css
 
Bước 3: các bản copy 2 file index.html và style.css vào cùng 1 folder. Và chạy file index.html bằng trình duyêt.
 
Ở bài viết sau, mình sẽ hướng dẫn các bạn tạo Menu đổ dọc sử dụng JavaScript.
Để biết thêm nhiều cách tạo hiệu ứng và giao diện đẹp cho website, mời các bạn tìm hiểu thêm ở đây
Chúc các bạn thành công.

 
 

bg8

Bình luận

Hướng dẫn cách tạo Menu đơn giản sử dụng HTML và CSS
SEO là gì - Lợi ích của SEO

SEO là gì - Lợi ích của SEO

Khi người dùng internet gõ một từ khóa tìm kiếm trên công cụ tìm kiếm như Google, Bing, Yahoo…thì kết quả trả về sẽ là một bảng danh sách các trang web có chứa nội dung mà người dùng muốn tìm kiếm...

01/04/2014

Thiết kế website tại Bắc Ninh

Thiết kế website tại Bắc Ninh

Trong thời đại số hiện này, các doanh nghiệp tại Bắc Ninh đã và đang tận dụng rất tốt Internet để giới thiệu và quảng bá về doanh nghiệp của mình. Với sự phát triển mạnh mẽ của truyền thông mạng,...

01/04/2014

Nguyên tắc thiết kế Website

Nguyên tắc thiết kế Website

Ngày nay, quá trình thương mại điện tử đang phát triển một cách mạnh mẽ. Website đóng một vai trò quan trọng trong công cuộc phát triển đó.  Việc xây dựng một website là điều tất yếu song để phát...

01/04/2014

Xây dựng một website hoàn hảo như thế nào?

Xây dựng một website hoàn hảo như thế nào?

Website của doanh nghiệp bạn được xây dựng với chất lượng tốt, được nhiều người biết đến và truy cập, nhưng làm thế nào để biến những khách hàng này thành những người mua hàng tiềm năng

01/04/2014

Hướng dẫn tạo thư viện trình chiếu ảnh tuyệt đẹp bằng Jquery

Hướng dẫn tạo thư viện trình chiếu ảnh tuyệt đẹp bằng Jquery

Với ứng dụng công nghệ Js hiện nay, chúng ta có thể làm được nhiều thứ từ nó, để thay thế công nghệ dùng flash như trước kia, mà tối ưu website đạt hiệu quả cao, tốc độ nhanh.DIM Group sẽ hướng...

01/04/2014

Thiết kế website đồ điện tử, điện lạnh

Thiết kế website đồ điện tử, điện lạnh

Thiết kế website đồ điện tử âm thanh không chỉ đem đến một cửa hàng ảo với chi phí hợp lý mà còn mở ra cơ hội tiếp cận đến với nhiều khách hàng tiềm năng.

11/02/2017

Thiết kế website kinh doanh thực phẩm sạch - tạo niềm tin người dùng

Thiết kế website kinh doanh thực phẩm sạch - tạo niềm tin người dùng

Thực phẩm sạch hiện đang là mặt hàng bán đắt như “Tôm tươi” tại thị trường Việt Nam, khi mà các loại nông sản, thực phẩm bẩn, nhiễm chất độc hại ảnh hưởng đến sức khỏe người tiêu dùng đang dần bị...

09/02/2017

Thiết kế website thủ công mỹ nghệ - con đường xây dựng thương hiệu

Thiết kế website thủ công mỹ nghệ - con đường xây dựng thương hiệu

Sản phẩm thủ công mỹ nghệ là mặt hàng có truyền thống lâu đời ở Việt Nam, gắn với nền văn hóa lúa nước dân tộc. Sự phát triển của ngành thủ công mỹ nghệ đã đóng góp đáng kể vào sự phát triển chung...

07/02/2017

Thiết kế website kinh doanh đồ handmade

Thiết kế website kinh doanh đồ handmade

Với sự phát triển của công nghệ và mạng internet trên toàn cầu thì bên cạnh cửa hàng truyền thống, hoạt động kinh doanh đồ handmade online thông qua website, các trang rao vặt, mạng xã hội,… đã...

07/02/2017

Thiết kế website giáo dục, đào tạo, trường học - nơi tiếp nhận nhiều học viên tiềm năng

Thiết kế website giáo dục, đào tạo, trường học - nơi tiếp nhận nhiều học viên tiềm năng

Thiết kế website giáo dục không chỉ mở ra chân trời mới, năng động hơn, hiện đại hơn cho các cơ sở đào tạo, dạy nghề,..mà còn tăng khả năng tiếp cận và lan tỏa thương hiệu đến học viên.

07/02/2017

Tìm hiểu HTML5 với Flash

Tìm hiểu HTML5 với Flash

HTML5 là gì? Tại sao  sự ra đời của...

01/04/2014

Cách chèn video vào website

Cách chèn video vào website

Cách chèn video từ youtube vào website

01/04/2014

Phân biệt giữa website giá rẻ và website nhu cầu

Phân biệt giữa website giá rẻ và website nhu cầu

Hôm nay DIM Group sẽ hướng dẫn các bạn cách phân biệt giữa website giá rẻ và website theo nhu cầu trên thị trường internet ngày càng...

11/12/2016

Luật bảo vệ bản quyền tác giả DMCA

Luật bảo vệ bản quyền tác giả DMCA

DMCA là cụm từ viết tắt của Digital Millennium Copyright Act, được hiểu là luật bảo vệ bản quyền tác giả.Đây là luật được tổng thống Mỹ Bill Clinton ký thành luật vào ngày 28 tháng 11 năm...

01/04/2014

MÃ GIẢM GIÁ

Facebook