ấn vào ĐÂY để xem site
nếu không được thì coppy link sau:
https://bca001421836e318f942daad33b99f2d19905a3a-www.googledrive.com/host/0B2auljPt4_56fi1MdDJqM1ZKbE9saUtWV2VpeWRVY2JTSGlxcUg1NTE0SDZrSWRZcmR1RGM/the%20sound%20of%20the%20sea/
code HTML
<!DOCTYPE html> <!-- To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. --> <html> <link type="text/css" rel="stylesheet" href="css.css"/> <head> <title>sum mờ vơ cây sần :v :v</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div id="main"> <div id="banner_top"><img src="images/logo.png"/></div> <div id="menu_top"> <div> <a href="#" class="menutop"><li><strong>TRANG CHỦ</strong></li></a> <a href="#" class="menutop"><li><strong>THÔNG TIN</strong></li></a> <a href="#" class="menutop"><li><strong>XEM PHÒNG</strong></li></a> <a href="#" class="menutop"><li><strong>DRIVE SITE</strong></li></a> <a href="#" class="menutop"><li><strong>ẨM THỰC</strong></li></a> <a href="#" class="menutop"><li><strong>TIN MỚI</strong></li></a> <a href="#" class="menutop"><li><strong>LIÊN HỆ</strong></li></a> </div> </div> <div id="banner_mid"></div> <div id="content_banner"> <a href="#"><li style="color:#316e6a; font-size: 25px;">HÃY CÙNG THƯỞNG THỨC MÙA HÈ VỚI CHÚNG TÔI!</li></a> <li style="color: #664738; font-size: 20px;"> <br>Site này là bài tập do cô Thi <u> BẮT</u> làm... ~(^.^)~ lúc đầu thấy khó lắm... cơ mà làm được 1 luc sau làm xong xuôi thấy cũng dễ nên tính ra không có gì khiến mệt mỏi kekekekeee</li> <li style="color: #664738; font-size: 20px;"> <br>Còn cái nữa là bản mẫu bằng tiếng anh cơ mà không thích tiếng anh nên làm tiếng việt cho nó dễ hiểu... :v :v :v </li> </div> <div id="content_first"> <a href="#"><li style="color:#316e6a; font-size: 18px;">BLOG MỚI NHẤT</li></a> <li>____________________________________________________________________________</li> <a href="#"><li style="color: #664738"><br><strong>Người Chiến Thắng Cuộc Thi Bikini 2015</strong></li></a> <li style="color: #664738"><br>Từ Tú Bằng...một thí sinh tới từ Yên Bái đã xuất sắc giành được giải quán quân cuộc thi <br>bikini năm nay...xin chúc mừng anh...</li> <li>____________________________________________________________________________</li> <a href="#"><li style="color: #664738"><br><strong>10 Điểm Lặn Nổi Tiếng</strong></li></a> <li style="color: #664738"><br>Wc, nhà tắm, phòng tắm nữ, phòng tắm nam, đôi khi chỉ là vũng nước mưa ngoài đường<br> cũng trở thành địa điểm lặn vô cùng lí thú...</li> <li>____________________________________________________________________________</li> </div> <a href="#"><div id="img_first"> </div></a> <a href="#"><div id="img_second"></div></a> <div id="content_second"> <a href="#"><li style="color:#316e6a; font-size: 18px;">GIẤY CHỨNG NHẬN</li></a> <li style="color: #664738"><br>"Sau nhiều năm công tác và kinh doanh trên lĩnh vực nhà nghỉ dưỡng... chúng tôi tự hào rằng chúng tôi không có cái gì để khoe với các bạn cả... đó là điều mà tôi tâm đắc nhất"</li> <a href="https://www.facebook.com/100004129663905/"><p style="color:#316e6a; text-align: right;"><br>.<br>Tổng Giám Đốc Điều Hành: PTN...</p></a> </div> <a href="#"><div id="img_third"></div></a> <div id="menu_bot"> <a href="#" class="menubot"><li>TRANG CHỦ</li></a> <a href="#" class="menubot"><li>THÔNG TIN</li></a> <a href="#" class="menubot"><li>XEM PHÒNG</li></a> <a href="#" class="menubot"><li>DRIVE SITE</li></a> <a href="#" class="menubot"><li>ẨM THỰC</li></a> <a href="#" class="menubot"><li>TIN MỚI</li></a> <a href="#" class="menubot"><li>LIÊN HỆ</li></a> <a href="http://www.google.com/" class="icon1"><li><img src="images/iconG2.png"/></li></a> <a href="http://twitter.com/" class="icon2"><li><img src="images/icontw2.png"/></li></a> <a href="http://www.facebook.com/" class="icon3"><li><img src="images/iconFB2.png"/></li></a> <a href="http://yahoo.com/" class="icon4"><li><img src="images/iconP2.png"/></li></a> </div> <div id="title_bot"><p>2015 By Phương Thế Ngọc</p></div> </div> </html>
code css:
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
Created on : Mar 23, 2015, 1:40:45 PM
Author : Panda
*/
body{
background-image: url(images/bg-pattern.jpg);
background-size: 980px 1490px;
}
/*a:link {
text-decoration: none;
color: white;
}
a:visited {
text-decoration: none;
color: white;
}
a:hover {
text-decoration: none;
color: wheat;
}
a:active {
text-decoration: none;
} */
#main{
width:1000px;
height: 1470px;
padding: 0;
margin-left: auto;
margin-right: auto;
}
#banner_top{
height: 150px;
width: 940px;
margin: auto;
margin-top: 10px;
margin-bottom: 10px;
}
#menu_top{
height: 50px;
width: 940px;
margin: auto;
margin-top: 10px;
margin-bottom: 10px;
background-image: url(images/bg-navigation.png);
border: 1px solid #41968b;
}
.menutop{
font-family: calibri;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding-left: 30px;
padding-right: 0px;
height: 33px;
width: 102.2px;
border: 1px solid #41968b;
float: left;
padding-top: 15px;
text-align: center;
cursor: pointer;
}
.menutop:link{
color: white;
}
.menutop:visited{
color: white;
}
.menutop:hover{
background-image: url(images/bg-menu.png);
color: wheat;
}
div li{
list-style: none;
float: left;
}
#banner_mid{
height: 430px;
width: 935px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
border:5px solid white;
background-image: url(images/sea-sound.jpg);
background-size: 935px 430px;
}
#content_banner{
height: 190px;
width: 940px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
}
#content_first{
height: 275px;
width: 615px;
margin-left: 29px;
float: left;
background-color: white;
padding-top: 15px;
padding-left: 15px;
padding-top: 15px;
padding-right: 15px;
padding-bottom: 0px;
text-align: left;
}
#img_first{
height: 140px;
width: 280px;
margin-right: 29px;
float: right;
background-image: url(images/rooms.png);
}
#img_first:hover{
background-image: url(images/first-class.jpg);
background-size: 280px 140px;
}
#img_second{
height: 140px;
width: 280px;
margin-right: 29px;
margin-top: 10px;
margin-bottom: 10px;
float: right;
background-image: url(images/dive-site.png);
}
#img_second:hover{
background-image: url(images/reef1.jpg);
background-size: 280px 140px;
}
#content_second{
height: 125px;
width: 615px;
margin-top: 10px;
margin-left: 29px;
float: left;
background-color: white;
padding-left: 15px;
padding-top: 15px;
padding-right: 15px;
padding-bottom: 0px;
}
#img_third{
height: 140px;
width: 280px;
margin-right: 29px;
margin-bottom: 10px;
float: right;
background-image: url(images/food.png);
}
#img_third:hover{
background-image: url(images/seafoods.jpg);
background-size: 280px 140px;
}
#menu_bot{
height: 50px;
width: 940px;
margin-left: 29px;
float: left;
background-image: url(images/icons.png);
}
.menubot{
font-size: 11.5px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
height: 35px;
width: 70px;
padding-left: 10px;
float: left;
text-align:center;
padding-top: 20px;
}
.menubot:link{
color: wheat;
}
.menubot:visited{
color: #594334;
}
.menubot:hover{
color: white;
}
.menubot:active{
color: wheat;
}
.icon1,.icon2,.icon3,.icon4{
height: 30px;
width: 30px;
float: right;
margin-right: 10px;
margin-top: 15px;
}
.icon1:hover{
background-image: url(images/iconG1.png);
background-repeat: no-repeat;
}
.icon2:hover{
background-image: url(images/icontw1.png);
background-repeat: no-repeat;
}
.icon3:hover{
background-image: url(images/iconFB1.png);
background-repeat: no-repeat;
}
.icon4:hover{
background-image: url(images/iconP1.png);
background-repeat: no-repeat;
}
#title_bot{
height: 50px;
width: 940px;
margin-top: 0px;
margin-left: 29px;
float: left;
padding-top: 35px;
text-align: center;
}
kết quả
Không có nhận xét nào:
Đăng nhận xét