1

2

3

4

5

6

7

8

9

10

11

12

13

@import url(“bootstrap. tối thiểu. css”);

.container{

    chiều rộng tối đa. 960px;

}

ul{

    phần đệm. 0;

    kiểu-danh sách. không;

}

a. di chuột, một. đang hoạt động{

    trang trí văn bản. không;

    đại cương. không;

}

THÀNH PHẦN HEADER

1

2

3

4

tiêu đề{

    chiều cao. 106px;

    nền. url(. /img/header-background. png);

}

PHẦN DI CHUYỂN

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

#top-nav{

    lề trên. 50px;

    thả nổi. đúng;

}

#top-nav li{

    thả nổi. trái;

    lề trái. 2px;

}

#top-nav li a{

    chuyển đổi văn bản. chữ hoa;

    màu. #fff;

    hiển thị. chặn;

    chiều cao. 32px;

    chiều cao dòng. 32px;

    phần đệm. 0 15px;

    bán kính đường viền. 10px;

    -moz-border-radius. 5px;

    chuyển đổi. nền 0. 4s thoát ra;

    -o-transition. nền 0. 4s thoát ra;

    -moz-transition. nền 0. 4s thoát ra;

    -webkit-transition. nền 0. 4s thoát ra;

}

#top-nav li. kích hoạt a,#top-nav li a. di chuột {

    nền. #929e21;

}

THÀNH PHẦN BANNER

Đầu tiên chúng ta định dạng hiển thị cho phần khung, trình bao bọc

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

#banner-wrapper{

    phần đệm. 108px;

    chiều cao. 360px;

    đường viền dưới. 1px rắn #ccc;

    vị trí. tương đối;

}

#banner{

    chiều cao. 342px;

    phần đệm. 10px;

    đường viền. 1px rắn #ccc;

    bán kính đường viền. 5px;

    -moz-border-radius. 5px;

    nền. #fff;

}

#banner-container{

    nền. url(. /img/banner-background. png);

    chiều cao. 320px;

    phần đệm. 25px 40px;

}

Sau đó định dạng phần nội dung bên trong

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

#banner-container h1{

    cỡ chữ. 30px;

    màu. #fff;

    độ dày của phông chữ. đậm;

    text-shadow. 0px 0px 4px rgba( . 40,0,0,0.4);

}

#banner-container #slogan{

    lợi nhuận. 36px 0;

    chiều rộng. 310px;

    cỡ chữ. 18px;

    màu. #fff;

}

#banner-container. biểu ngữ btn{

    màu. #fff;

    cỡ chữ. đậm;

    hiển thị. chặn;

    thả nổi. trái;

    chiều rộng. 158px;

    chiều cao. 45px;

    lề phải. 35px;

    nền. url(. /img/banner-nút-nền. png);

    căn chỉnh văn bản. trung tâm;

    chiều cao dòng. 45px;

    cỡ chữ. 20px;

    độ dày của phông chữ. đậm;

}

#banner-container img{

    lề trái. 20px;

}

PHẦN MAIN

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

#main{

    đường viền trên cùng. 1px rắn #fff;

    đường viền dưới. 1px rắn #ccc;

    nền. #e9e9db;

    padding-top. 148px;

}

#chính. hộp{

    chiều cao. 165px;

    phần đệm. 20px 0;

    lề dưới. 34px;

    cỡ chữ. 13px;

    chiều cao dòng. 20px;

    khoảng cách giữa các chữ cái. -75;

    màu. #6b6b6c;

}

Định dạng riêng cho các hộp nằm bên trái

1

2

3

4

5

6

7

8

9

10

11

12

13

#chính. ô h3{

    cỡ chữ. 16px;

    màu. #6d7808;

    lợi nhuận. 0;

    khoảng cách giữa các chữ cái. 1px;

}

#chính. bên trái. hộp{

    đường viền. 1px rắn #cbcbcb;

    bán kính đường viền. 5px;

    nền. #fff;

    box-shadow. inset 0px 0px 5px 5px #f2f2f2;

    phần đệm. 20px 20px;

}

Danh sách các dịch vụ nằm trong Hộp chính 2

1

2

3

4

5

6

7

8

9

.service-list{

    cỡ chữ. 16px;

    khoảng cách giữa các chữ cái. -1px;

}

.service-list li{

    nền. url(. /img/ticker. png) không lặp lại;

    phần đệm. 5px;

    padding-left. 40px;

}

FOOTER FOOTER

Định dạng tiêu đề của hộp

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

chân trang{

    lề trên. 20px;

    nền. url(. /img/footer-nền. png) repeat-x;

    phần đệm. 120px 0;

    chiều cao. 480px;

}

chân trang h2{

    cỡ chữ. 23px;

    màu. #f5f5f5;

    độ dày của phông chữ. đậm;

    lề dưới. 20px;

}

chân trang h2. xám{

    màu. #999;

}

Box đầu tiên của Footer. sự đột biến

1

2

3

4

#sugestion chân trang{

    màu. #fff;

    chiều cao dòng. 23px;

}

Box next. Blog cuối cùng

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

footer #last-blog{

    phần đệm. 0 35px;

}

footer #last-blog a{

    màu. #fff;

    chiều cao dòng. 40px;

    padding-left. 5px;

}

footer #last-blog a. di chuột{

    trang trí văn bản. gạch chân;

}

footer #last-blog li{

    chiều cao. 40px;

    đường viền dưới. 1px chấm #fff;

}

Box cuối cùng Recen Work

1

2

3

footer #recent-work li{

    lề dưới. 20px;

}

Phần cuối cùng trong Footer là Menu footer

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

footer #nav-wrapper{

    lề trên. 70px;

    chiều cao. 90px;

    nền. #333;

    đường viền trên cùng. 1px rắn #fff;

    đường viền dưới. 1px rắn #fff;

}

#footer-nav{

    thả nổi. đúng;

}

#footer-nav li{

    thả nổi. trái;

    chiều cao dòng. 90px;

    padding-right. 26px;

}

#footer-nav li a{

    màu. #fff;

}

#footer-nav li a. di chuột{

    trang trí văn bản. gạch chân;

}

Chúng ta đã hoàn thành trang Exponet

TỔNG KẾT

Qua bài viết này, các bạn đã biết các bước cơ bản để hoàn thành một trang HTML/CSS kết hợp với Bootstrap, các bước này bao gồm cắt cấu hình, xây dựng cấu trúc HTML và định dạng CSS. Các bạn có thể tải mã nguồn trang Exponet tại đây