Cắt Header với bootstrap – Part 2: CSS hoàn chỉnh
Xem part 1 tại đây và tải các file chuẩn bị: http://adf.ly/sl4rk
Full code dành cho mọi người tham khảo : http://adf.ly/srnBm
File psd : http://adf.ly/srnF3
Các file img cần thiết trong part 2:
logo
--> file search_bg dùng làm bg box search và bodyTiếp tục với phần menu : Trong menu có 2 row là menu và box Serach, rất đơn giản chúng ta chỉ việc khai báo cho 2 thành phần này nằm trong 2 row.
Thay thế Menu bằng code :
<div
class="row">
<a class="btn
btn-link" id="active" href="" >Specials</a>
<a class="btn
btn-link" href="">Fruits& Vegetable</a>
<a class="btn
btn-link" href="">Food Products</a>
<a class="btn
btn-link" href="">Locate Store</a>
<a class="btn btn-link"
href="">Fan Club</a>
</div>
<div class="row
text-center" id="box-search">
<input placeholder="Enter
products details" type="text" style="width:400px; display:
inline; padding-bottom: 15px;" class="form-control"
size="50" /><label><a class="btn btn-danger"
href="">Search <i class="fa fa-search"></i></a></label>
</div>
Giải thích:
Class “btn
btn-link” định dạng cho tag a là một button, gán id=”active” để chúng ta sẽ định
dạng cho hiệu ứng active khi 1 button được select
Ở div thứ 2
ngoài class row chúng ta thêm class text-center để canh giữa vị trí các input,
gán id=”box-search” để định dạng lại theo ý chúng ta muốn.
<i
class="fa fa-search"></i>: xem thêm bài viết này để có những
icon FAI theo ý bạn thích.
Tiếp tục với
phần Sign-up:
Quan sát phần
này chúng ta thấy có 2 button nằm trên 2 row sát nhau. Khai báo như sau:
<div
class="row" id="sign">
<a class="btn" href="">Sign-up</a>
</div>
<div class="row"
id="reg">
<a class="btn" href="">Reg</a>
</div>
Cuối cùng là định dạng css để có 1 cấu trúc hoàn chỉnh.
Sau đây là
full Css cà 2 part cho bạn nào tải về nghiên cứu ;)
@import
url("bootstrap.min.css");
body{
margin:auto;
background-image:url(../image/search_bg.png);
background-repeat:repeat;
}
#header{
background-image:url(../image/head_bg.png);
background-size:cover;
}
#number{
color:white;
font-size:18px;
}
#text-dec{
color:#9BAFC8;
}
#header-top{
padding-top:2px;
background-image:url(../image/header_bg1.png);
background-repeat:repeat-x;
background-repeat:repeat-x;
padding-bottom:10px;
}
#main a{
margin-top:30px;
text-transform:uppercase;
color:#FFF;
text-decoration:none;
font-weight:bold;
}
#main
#active{
border: solid 1px rgba(0, 0, 0,
0.42);
box-shadow: 100px 10px rgba(0, 0, 0,
0.42) inset;
border-radius: 5px;
}
#sign a{
margin-top:0px;
color:#F00;
}
#sign{
border-bottom:solid 2px #259696;
background-color:#E6F3F3;
border-top-left-radius:5px;
border-top-right-radius:5px;
background:
-moz-linear-gradient(bottom, #D5CFCF 30%, #FDFDFD 70%);
background: -o-linear-gradient(bottom,
#D5CFCF 30%, #FDFDFD 70%);
background: -ms-linear-gradient(bottom,
#D5CFCF 30%, #FDFDFD 70%);
background: -webkit-gradient(linear,left
bottom,left top,color-stop(0.1, #D5CFCF),color-stop(0.7, #FDFDFD));
}
#btn-log{
border:solid 2px #259696;
width: 100px;
border-radius: 5px;
margin-top: 25px;
margin-left: 0px;
box-shadow: -1px 2px rgba(10, 10,
10, 0.19);
}
#reg a{
text-align:center;
margin-top:0px;
}
#reg{
background:
-webkit-gradient(linear,left bottom,left top,color-stop(0.1,
#40B4B4),color-stop(0.7, #84D6D6));
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
}
#main
#box-search a{
margin-top:8px;
}
#box-search{
margin-top:5px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
padding-top: 5px;
background-image:url(../image/search_bg.png);
background-repeat:repeat;
border-top: solid 1px #1A876D;
margin-right: 90px;
}
Kích thước Desktop
Kích thước mobile:
