search

Hướng dẫn tuyển cắt html css

1 năms trước
Trả lời: 0
Lượt xem: 61

Dạo gần đây mình có làm 1 task cắt HTML, CSS và mình cảm thấy nó khá là thú vị. HTML và CSS thì chắc chắn chẳng xa lạ gì với mấy đứa biết code, nhưng khi thực sự bắt tay vào làm mới thấy phát sinh rất nhiều vấn đề, và thay vì phải mò mẫm như mình, mình sẽ hướng dẫn các bạn step-by-step để biến một file PSD thành giao diện web với HTML, CSS.

Bài viết này chỉ sử dụng CSS3 và HTML5, không sử dụng bất kì frameworks nào khác như Bootstrap hay Zurb Foundation. Sử dụng framework lẽ dĩ nhiên nhanh hơn nhiều, nhưng nếu CSS thuần bạn ngon rồi, thì dùng hay ko dùng framework chỉ là chuyện nhỏ, bạn sẽ không bị phụ thuộc vào nó.

Đây là trang web mà hôm nay chúng ta sẽ làm

Hướng dẫn tuyển cắt html css

Để bắt đầu, hãy download file PSD ở đây, sau đó mở nó trong PTS.

Hướng dẫn tuyển cắt html css

Tạo một thư mục với tên project mà bạn thích. Tại đây, tạo 2 thư mục: css (cho các file css) và images (cho ảnh).

Tiếp theo, mở phần mềm để code và tạo 2 file. File đầu tiên là index.html. Đây là giao diện chính của trang web, để nó ở thư mục gốc. Tạo file style.css trong thư mục css, đây là nơi chúng ta sẽ viết css để định dạng giao diện cho file index.html.

Giờ thì bắt đầu với những dòng đầu tiên mà file HTML nào cũng phải có:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Insight</title>
  <link rel="stylesheet" href="css/style.css">
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>
    Sample text
</body>

Trong đoạn code trên có 1 đoạn 

<header class="header">
    <div class="container">
        <div class="logo"><img src="images/logo.png" height="25" width="81" alt=""></div>
        <div class="slogan">your nice slogan</div>
        <nav>
            <ul class="nav">
                <li class="how-it-works"><a href="#">How it works</a></li>
                <li class="sign-up"><a href="#">Sign up</a></li>
                <li class="login"><a href="#">Login</a></li>
            </ul>
        </nav>
    </div>
</header>
0, nó sẽ cần thiết khi mà dùng các trình duyệt cũ như IE8 trở xuống. Nếu không quan tâm đến trình duyệt có thể bỏ qua.

Giờ mở file index.html trên trình duyệt, bạn sẽ thấy 1 dòng chữ "Sample text".

Giờ nhìn vào design và thử chia nó thành các phần. Phía trên cùng, bạn sẽ thấy 1 thanh màu đen với logo và navigation menu. Bạn có thể gọi nó là 

<header class="header">
    <div class="container">
        <div class="logo"><img src="images/logo.png" height="25" width="81" alt=""></div>
        <div class="slogan">your nice slogan</div>
        <nav>
            <ul class="nav">
                <li class="how-it-works"><a href="#">How it works</a></li>
                <li class="sign-up"><a href="#">Sign up</a></li>
                <li class="login"><a href="#">Login</a></li>
            </ul>
        </nav>
    </div>
</header>
1. Tiếp theo là một khối bức ảnh và dòng chữ quảng cáo, hãy gọi nó là 
<header class="header">
    <div class="container">
        <div class="logo"><img src="images/logo.png" height="25" width="81" alt=""></div>
        <div class="slogan">your nice slogan</div>
        <nav>
            <ul class="nav">
                <li class="how-it-works"><a href="#">How it works</a></li>
                <li class="sign-up"><a href="#">Sign up</a></li>
                <li class="login"><a href="#">Login</a></li>
            </ul>
        </nav>
    </div>
</header>
2. Sau đó là một khoảng màu trắng với nội dung chính, chúng ta có thể gọi nó là 
<header class="header">
    <div class="container">
        <div class="logo"><img src="images/logo.png" height="25" width="81" alt=""></div>
        <div class="slogan">your nice slogan</div>
        <nav>
            <ul class="nav">
                <li class="how-it-works"><a href="#">How it works</a></li>
                <li class="sign-up"><a href="#">Sign up</a></li>
                <li class="login"><a href="#">Login</a></li>
            </ul>
        </nav>
    </div>
</header>
3 (hoặc bất cứ tên nào bạn thích). Cuối cùng cũng là dưới cùng _ 
<header class="header">
    <div class="container">
        <div class="logo"><img src="images/logo.png" height="25" width="81" alt=""></div>
        <div class="slogan">your nice slogan</div>
        <nav>
            <ul class="nav">
                <li class="how-it-works"><a href="#">How it works</a></li>
                <li class="sign-up"><a href="#">Sign up</a></li>
                <li class="login"><a href="#">Login</a></li>
            </ul>
        </nav>
    </div>
</header>
4.

Giờ hãy bắt đầu với các khối chính

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Insight</title>
  <link rel="stylesheet" href="css/style.css">
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>
    <header class="header">
        <div class="container">
            header is here
        </div>
    </header>

    <div class="hero">
        <div class="container">
            hero content is here
        </div>
    </div>

    <main class="middle">
        <div class="container">
            middle content is here
        </div>
    </main>

    <footer class="footer">
        <div class="container">
            footer is here
        </div>
    </footer>
    </body>
</html>

Thêm style cho nó. Đầu tiên, sử dụng Eric Meyer tool để reset toàn bộ thuộc tính của các thẻ tag. Chỉ cần copy và dán vào đầu file CSS (tin mình đi, cái này không thừa tí nào đâu, mấy cái margin, padding mặc định làm mình muốn phát điên). Sau đó thêm đoạn này, bạn có thể đọc về nó rõ hơn ở đây:

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

Giờ, bỏ các gạch chân ở thẻ 

<header class="header">
    <div class="container">
        <div class="logo"><img src="images/logo.png" height="25" width="81" alt=""></div>
        <div class="slogan">your nice slogan</div>
        <nav>
            <ul class="nav">
                <li class="how-it-works"><a href="#">How it works</a></li>
                <li class="sign-up"><a href="#">Sign up</a></li>
                <li class="login"><a href="#">Login</a></li>
            </ul>
        </nav>
    </div>
</header>
5, và lưu ý là đừng bao giờ tự động thêm gạch chân dù là 
<header class="header">
    <div class="container">
        <div class="logo"><img src="images/logo.png" height="25" width="81" alt=""></div>
        <div class="slogan">your nice slogan</div>
        <nav>
            <ul class="nav">
                <li class="how-it-works"><a href="#">How it works</a></li>
                <li class="sign-up"><a href="#">Sign up</a></li>
                <li class="login"><a href="#">Login</a></li>
            </ul>
        </nav>
    </div>
</header>
6, 
<header class="header">
    <div class="container">
        <div class="logo"><img src="images/logo.png" height="25" width="81" alt=""></div>
        <div class="slogan">your nice slogan</div>
        <nav>
            <ul class="nav">
                <li class="how-it-works"><a href="#">How it works</a></li>
                <li class="sign-up"><a href="#">Sign up</a></li>
                <li class="login"><a href="#">Login</a></li>
            </ul>
        </nav>
    </div>
</header>
7,... nếu không được yêu cầu.

a {
    text-decoration: none;
}

Giờ mở PTS và đo chiều rộng của trang, dùng "Rectangular Marquee Tool" hoặc ấn 

<header class="header">
    <div class="container">
        <div class="logo"><img src="images/logo.png" height="25" width="81" alt=""></div>
        <div class="slogan">your nice slogan</div>
        <nav>
            <ul class="nav">
                <li class="how-it-works"><a href="#">How it works</a></li>
                <li class="sign-up"><a href="#">Sign up</a></li>
                <li class="login"><a href="#">Login</a></li>
            </ul>
        </nav>
    </div>
</header>
8.

Hướng dẫn tuyển cắt html css

Theo bảng thông tin hoặc điểm trỏ chuột vào chúng ta thấy được chiều rộng là 1140px, nó cũng là chiều rộng của 

<header class="header">
    <div class="container">
        <div class="logo"><img src="images/logo.png" height="25" width="81" alt=""></div>
        <div class="slogan">your nice slogan</div>
        <nav>
            <ul class="nav">
                <li class="how-it-works"><a href="#">How it works</a></li>
                <li class="sign-up"><a href="#">Sign up</a></li>
                <li class="login"><a href="#">Login</a></li>
            </ul>
        </nav>
    </div>
</header>
9.

Nếu nhìn kĩ hơn, bạn có thể nhận ra phần header và footer có cùng background. Ẩn grid đi bằng cách ấn 

.logo {
    float: left;
    margin: 19px 17px 0 0;
}
0 và phóng to design lên để tìm phần tử được lặp lại. Chọn và copy nó bằng cách ấn 
.logo {
    float: left;
    margin: 19px 17px 0 0;
}
1.

Hướng dẫn tuyển cắt html css

Sau đó tạo 1 file mới, dán phần vừa copy vào, và lưu nó bằng cách ấn 

.logo {
    float: left;
    margin: 19px 17px 0 0;
}
2, chọn lưu vào thư mực images với tên bg-texture.jpg. Tiếp theo enable Eyedropper Tool và click vào footer. Giờ bạn đã có mã màu của khối màu tối, chúng ta sẽ set 
.logo {
    float: left;
    margin: 19px 17px 0 0;
}
3 cho nó, trong trường hợp bg-texture.jpg chưa được tải lên.

Hướng dẫn tuyển cắt html css

Thêm vào file css:

.container {
    width: 1140px;
    margin: 0 auto;
}

.header,
.footer {
    background: #15181f url(../images/bg-texture.jpg) repeat;
    color: #fff;
}

.middle {
    background: #fff;
}

Giờ refresh trình duyệt, đây là những gì bạn thấy:

Hướng dẫn tuyển cắt html css

Giờ lưu bức ảnh ở khối 

<header class="header">
    <div class="container">
        <div class="logo"><img src="images/logo.png" height="25" width="81" alt=""></div>
        <div class="slogan">your nice slogan</div>
        <nav>
            <ul class="nav">
                <li class="how-it-works"><a href="#">How it works</a></li>
                <li class="sign-up"><a href="#">Sign up</a></li>
                <li class="login"><a href="#">Login</a></li>
            </ul>
        </nav>
    </div>
</header>
2 và đặt tên bg-hero.jpg. Đo chiều cao của bức ảnh đã lưu (465px) và thêm vào file css

.hero {
    background: #333 url(../images/bg-hero.jpg) no-repeat 50% 50%;
    background-size: cover;
    height: 465px;
}

Giờ bạn đã thêm bức ảnh đó vào giữa khối 

<header class="header">
    <div class="container">
        <div class="logo"><img src="images/logo.png" height="25" width="81" alt=""></div>
        <div class="slogan">your nice slogan</div>
        <nav>
            <ul class="nav">
                <li class="how-it-works"><a href="#">How it works</a></li>
                <li class="sign-up"><a href="#">Sign up</a></li>
                <li class="login"><a href="#">Login</a></li>
            </ul>
        </nav>
    </div>
</header>
2 bằng cách setting 50% - 50%. Thuộc tính 
.logo {
    float: left;
    margin: 19px 17px 0 0;
}
6 yêu cầu trình duyệt kéo bức ảnh tới kích thước tối đa theo chiều rộng hoặc chiều cao, nó sẽ giúp bức ảnh ko bị méo.

Đây sẽ là những gì bạn nhìn thấy

Hướng dẫn tuyển cắt html css

Giờ tiếp tục với phần header. Lưu ảnh logo và đặt tên logo.png. Phần code HTML cho header sẽ như thế này:

<header class="header">
    <div class="container">
        <div class="logo"><img src="images/logo.png" height="25" width="81" alt=""></div>
        <div class="slogan">your nice slogan</div>
        <nav>
            <ul class="nav">
                <li class="how-it-works"><a href="#">How it works</a></li>
                <li class="sign-up"><a href="#">Sign up</a></li>
                <li class="login"><a href="#">Login</a></li>
            </ul>
        </nav>
    </div>
</header>

Quay lại trình duyệt

Hướng dẫn tuyển cắt html css

Giờ là lúc tạo style cho các phần tử này. Đo khoảng cách phía trên giữa logo và đầu trang trong PTS, thêm css:

.logo {
    float: left;
    margin: 19px 17px 0 0;
}

Giờ đến slogan

Hướng dẫn tuyển cắt html css

Font chữ là "Time New Roman", size 16px, in nghiêng và màu trắng với opacity 35%.

.slogan {
    float: left;
    margin-top: 22px;
    font: italic 16px "Times New Roman", Times, Georgia, serif;
    color: rgba(255, 255, 255, .35);
}

Tiếp theo đến phần navigation. Mỗi phần tử có một icon riêng. Để tiết kiệm thời gian tải trang, hãy tạo 1 sprite (chứa nhiều ảnh) từ các icon, trình duyệt sẽ chỉ phải load 1 ảnh thay vì 3 ảnh. Để làm được điều đó, tạo 1 file mới trong PTS và ném các icon vào đấy. Lưu dưới tên nav-icons.png.

Hướng dẫn tuyển cắt html css

Tiếp theo là viết css cho phần menu. Bạn cần set menu bên tay trái nên chúng ta sẽ sử dụng 

.logo {
    float: left;
    margin: 19px 17px 0 0;
}
7. Các thẻ 
.logo {
    float: left;
    margin: 19px 17px 0 0;
}
8 mặc định là sẽ xếp hàng dọc , chúng ta có thể cho nó thành 1 dòng bằng cách thêm 
.logo {
    float: left;
    margin: 19px 17px 0 0;
}
9 (hoặc là sử dụng 
.slogan {
    float: left;
    margin-top: 22px;
    font: italic 16px "Times New Roman", Times, Georgia, serif;
    color: rgba(255, 255, 255, .35);
}
0). Ngăn cách giữa các item trong menu có 1 đường kẻ màu xám, nên thêm 
.slogan {
    float: left;
    margin-top: 22px;
    font: italic 16px "Times New Roman", Times, Georgia, serif;
    color: rgba(255, 255, 255, .35);
}
1 cho mỗi item.

.nav {
    float: right;
}
.nav li {
    float: left;
    border-left: 1px solid #2c323d;
}
.nav a {
    display: block;
    line-height: 62px;
}

Kết quả thế này

Hướng dẫn tuyển cắt html css

Như bạn thấy, các thành phần đã ở đúng vị trí của nó, nhưng header và background lại bị mất. Đó là do thuộc tính float của các thành phần bên trong header. Bạn chỉ cần sửa 1 chút phần 

<header class="header">
    <div class="container">
        <div class="logo"><img src="images/logo.png" height="25" width="81" alt=""></div>
        <div class="slogan">your nice slogan</div>
        <nav>
            <ul class="nav">
                <li class="how-it-works"><a href="#">How it works</a></li>
                <li class="sign-up"><a href="#">Sign up</a></li>
                <li class="login"><a href="#">Login</a></li>
            </ul>
        </nav>
    </div>
</header>
9 bởi vì nó là phần tử cha của những phần tử đang được dùng 
.slogan {
    float: left;
    margin-top: 22px;
    font: italic 16px "Times New Roman", Times, Georgia, serif;
    color: rgba(255, 255, 255, .35);
}
3

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Insight</title>
  <link rel="stylesheet" href="css/style.css">
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>
    <header class="header">
        <div class="container">
            header is here
        </div>
    </header>

    <div class="hero">
        <div class="container">
            hero content is here
        </div>
    </div>

    <main class="middle">
        <div class="container">
            middle content is here
        </div>
    </main>

    <footer class="footer">
        <div class="container">
            footer is here
        </div>
    </footer>
    </body>
</html>
0

Mọi thứ lại hoạt động bình thường

Hướng dẫn tuyển cắt html css

Giờ thêm stype cho menu

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Insight</title>
  <link rel="stylesheet" href="css/style.css">
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>
    <header class="header">
        <div class="container">
            header is here
        </div>
    </header>

    <div class="hero">
        <div class="container">
            hero content is here
        </div>
    </div>

    <main class="middle">
        <div class="container">
            middle content is here
        </div>
    </main>

    <footer class="footer">
        <div class="container">
            footer is here
        </div>
    </footer>
    </body>
</html>
1

Còn 1 điều cần lưu ý là font chữ, click vào text link để xem font chữ. Nhưng nếu trong máy bạn không có font chữ đấy thì sao? Đừng lo lắng, click vào đấy nó sẽ báo cho bạn là bạn đang thiếu font chữ gì, nhớ click nhiều chỗ trên design để xem luôn kiểu chữ và độ dày nhé

Hướng dẫn tuyển cắt html css

Giờ vào trang Google fonts direction và tìm font đó

Hướng dẫn tuyển cắt html css

chọn kiểu

Hướng dẫn tuyển cắt html css

Hướng dẫn tuyển cắt html css

Giờ chỉ cần copy cái link này và dán vào trong 

.slogan {
    float: left;
    margin-top: 22px;
    font: italic 16px "Times New Roman", Times, Georgia, serif;
    color: rgba(255, 255, 255, .35);
}
4

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Insight</title>
  <link rel="stylesheet" href="css/style.css">
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>
    <header class="header">
        <div class="container">
            header is here
        </div>
    </header>

    <div class="hero">
        <div class="container">
            hero content is here
        </div>
    </div>

    <main class="middle">
        <div class="container">
            middle content is here
        </div>
    </main>

    <footer class="footer">
        <div class="container">
            footer is here
        </div>
    </footer>
    </body>
</html>
2

Giờ bạn có thể sử dụng font này trong file Css với thuộc tính 

.slogan {
    float: left;
    margin-top: 22px;
    font: italic 16px "Times New Roman", Times, Georgia, serif;
    color: rgba(255, 255, 255, .35);
}
5. Vì nó là font chính của trang nên có thể để luôn vào thẻ 
.slogan {
    float: left;
    margin-top: 22px;
    font: italic 16px "Times New Roman", Times, Georgia, serif;
    color: rgba(255, 255, 255, .35);
}
6

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Insight</title>
  <link rel="stylesheet" href="css/style.css">
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>
    <header class="header">
        <div class="container">
            header is here
        </div>
    </header>

    <div class="hero">
        <div class="container">
            hero content is here
        </div>
    </div>

    <main class="middle">
        <div class="container">
            middle content is here
        </div>
    </main>

    <footer class="footer">
        <div class="container">
            footer is here
        </div>
    </footer>
    </body>
</html>
3

Giờ refresh lại trình duyệt để thấy sự khác biệt. Được 1/3 rồi đấy, không khó nhỉ?

Hướng dẫn tuyển cắt html css

Hướng dẫn tuyển cắt html css

Thêm một chút hiệu ứng khi di chuột vào menu

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Insight</title>
  <link rel="stylesheet" href="css/style.css">
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>
    <header class="header">
        <div class="container">
            header is here
        </div>
    </header>

    <div class="hero">
        <div class="container">
            hero content is here
        </div>
    </div>

    <main class="middle">
        <div class="container">
            middle content is here
        </div>
    </main>

    <footer class="footer">
        <div class="container">
            footer is here
        </div>
    </footer>
    </body>
</html>
4

Giờ thêm icon cho các item trong menu bằng cách dùng pseudo-element

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Insight</title>
  <link rel="stylesheet" href="css/style.css">
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>
    <header class="header">
        <div class="container">
            header is here
        </div>
    </header>

    <div class="hero">
        <div class="container">
            hero content is here
        </div>
    </div>

    <main class="middle">
        <div class="container">
            middle content is here
        </div>
    </main>

    <footer class="footer">
        <div class="container">
            footer is here
        </div>
    </footer>
    </body>
</html>
5

Mỗi item trong menu thì lại có icon riêng, nên chúng ta cần tìm ra vị trí và size của từng icon, dễ nhất là dùng tool này. Upload ảnh lên, click vào icon, nó sẽ trả về size và vị trí của icon đó.

Hướng dẫn tuyển cắt html css

Copy các giá trị và dán vào file CSS

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Insight</title>
  <link rel="stylesheet" href="css/style.css">
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>
    <header class="header">
        <div class="container">
            header is here
        </div>
    </header>

    <div class="hero">
        <div class="container">
            hero content is here
        </div>
    </div>

    <main class="middle">
        <div class="container">
            middle content is here
        </div>
    </main>

    <footer class="footer">
        <div class="container">
            footer is here
        </div>
    </footer>
    </body>
</html>
6

Vậy là xong cái menu

Hướng dẫn tuyển cắt html css

Tiếp tục với phần 

<header class="header">
    <div class="container">
        <div class="logo"><img src="images/logo.png" height="25" width="81" alt=""></div>
        <div class="slogan">your nice slogan</div>
        <nav>
            <ul class="nav">
                <li class="how-it-works"><a href="#">How it works</a></li>
                <li class="sign-up"><a href="#">Sign up</a></li>
                <li class="login"><a href="#">Login</a></li>
            </ul>
        </nav>
    </div>
</header>
2. Thêm nội dung HTML trước.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Insight</title>
  <link rel="stylesheet" href="css/style.css">
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>
    <header class="header">
        <div class="container">
            header is here
        </div>
    </header>

    <div class="hero">
        <div class="container">
            hero content is here
        </div>
    </div>

    <main class="middle">
        <div class="container">
            middle content is here
        </div>
    </main>

    <footer class="footer">
        <div class="container">
            footer is here
        </div>
    </footer>
    </body>
</html>
7

Đo size và độ dày của text, lề và line height trong PTS. Tất cả text đều màu trắng và căn giữa nên có thể thêm 

.slogan {
    float: left;
    margin-top: 22px;
    font: italic 16px "Times New Roman", Times, Georgia, serif;
    color: rgba(255, 255, 255, .35);
}
8 vào 
<header class="header">
    <div class="container">
        <div class="logo"><img src="images/logo.png" height="25" width="81" alt=""></div>
        <div class="slogan">your nice slogan</div>
        <nav>
            <ul class="nav">
                <li class="how-it-works"><a href="#">How it works</a></li>
                <li class="sign-up"><a href="#">Sign up</a></li>
                <li class="login"><a href="#">Login</a></li>
            </ul>
        </nav>
    </div>
</header>
2

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Insight</title>
  <link rel="stylesheet" href="css/style.css">
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>
    <header class="header">
        <div class="container">
            header is here
        </div>
    </header>

    <div class="hero">
        <div class="container">
            hero content is here
        </div>
    </div>

    <main class="middle">
        <div class="container">
            middle content is here
        </div>
    </main>

    <footer class="footer">
        <div class="container">
            footer is here
        </div>
    </footer>
    </body>
</html>
8

Hướng dẫn tuyển cắt html css

Giờ là cách tạo ra button. Mình đã tạo button bằng thẻ tag 

<header class="header">
    <div class="container">
        <div class="logo"><img src="images/logo.png" height="25" width="81" alt=""></div>
        <div class="slogan">your nice slogan</div>
        <nav>
            <ul class="nav">
                <li class="how-it-works"><a href="#">How it works</a></li>
                <li class="sign-up"><a href="#">Sign up</a></li>
                <li class="login"><a href="#">Login</a></li>
            </ul>
        </nav>
    </div>
</header>
5 với class chung là 
.nav {
    float: right;
}
.nav li {
    float: left;
    border-left: 1px solid #2c323d;
}
.nav a {
    display: block;
    line-height: 62px;
}
1, và class riêng cho 2 màu là 
.nav {
    float: right;
}
.nav li {
    float: left;
    border-left: 1px solid #2c323d;
}
.nav a {
    display: block;
    line-height: 62px;
}
2 và 
.nav {
    float: right;
}
.nav li {
    float: left;
    border-left: 1px solid #2c323d;
}
.nav a {
    display: block;
    line-height: 62px;
}
3 cho mỗi màu.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Insight</title>
  <link rel="stylesheet" href="css/style.css">
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>
    <header class="header">
        <div class="container">
            header is here
        </div>
    </header>

    <div class="hero">
        <div class="container">
            hero content is here
        </div>
    </div>

    <main class="middle">
        <div class="container">
            middle content is here
        </div>
    </main>

    <footer class="footer">
        <div class="container">
            footer is here
        </div>
    </footer>
    </body>
</html>
9

Sử dụng 

.nav {
    float: right;
}
.nav li {
    float: left;
    border-left: 1px solid #2c323d;
}
.nav a {
    display: block;
    line-height: 62px;
}
4 để bo tròn góc và 
.nav {
    float: right;
}
.nav li {
    float: left;
    border-left: 1px solid #2c323d;
}
.nav a {
    display: block;
    line-height: 62px;
}
5 để đổ bóng cho button.

Hướng dẫn tuyển cắt html css

Giờ đến phần footer. Thêm classs 

.nav {
    float: right;
}
.nav li {
    float: left;
    border-left: 1px solid #2c323d;
}
.nav a {
    display: block;
    line-height: 62px;
}
6 cho từng cột, mỗi cột thêm tiêu đề bằng thẻ 
.nav {
    float: right;
}
.nav li {
    float: left;
    border-left: 1px solid #2c323d;
}
.nav a {
    display: block;
    line-height: 62px;
}
7 và danh sách các link.

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
0

Thêm margin phía trên và phía dưới footer và thêm style cho tiêu đề và danh sách

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
1

Hướng dẫn tuyển cắt html css

Còn phải thêm icon của các mạng xã hội. Bạn có thể cắt nó từ bức ảnh và dán vào code hoặc sử dụng background-image cho link, nhưng tiện nhất là dùng icon font. Để làm được điều này, sử dụng tool sau

Hướng dẫn tuyển cắt html css

Chọn icon bạn cần, chọn size, màu sắc, link đến đâu. Tiếp theo click vào button socicon.zip để download file. Giờ bạn đã có 1 folder font mới trong project, giải nén chúng, sau đó copy HTML, dán vào ngay sau thẻ 

.nav {
    float: right;
}
.nav li {
    float: left;
    border-left: 1px solid #2c323d;
}
.nav a {
    display: block;
    line-height: 62px;
}
8. Chỉnh lại size cho phù hợp với design trong 
.nav {
    float: right;
}
.nav li {
    float: left;
    border-left: 1px solid #2c323d;
}
.nav a {
    display: block;
    line-height: 62px;
}
9.

Hướng dẫn tuyển cắt html css

Bổ sung nốt phần copyright

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
2

Hướng dẫn tuyển cắt html css

Phù, dài quá phải không, sắp xong rồi, chịu khó đọc tiếp nhé. Giờ ta sẽ bắt tay vào phần cuối cùng là phần nội dung chính của trang.

Hướng dẫn tuyển cắt html css

Nếu nhìn kĩ 3 khối này, sẽ thấy nó giống nhau, chỉ khác nội dung. Vì vậy chúng ta chỉ cần tạo 1 khối, thêm style cho nó, nhân nó lên và thêm nội dung cần thiết. Lưu các bức ảnh trong 3 khối dưới dạng jpg. Giờ, viết HTML và dán những bức ảnh vừa lưu vào. Tạo 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Insight</title>
  <link rel="stylesheet" href="css/style.css">
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>
    <header class="header">
        <div class="container">
            header is here
        </div>
    </header>

    <div class="hero">
        <div class="container">
            hero content is here
        </div>
    </div>

    <main class="middle">
        <div class="container">
            middle content is here
        </div>
    </main>

    <footer class="footer">
        <div class="container">
            footer is here
        </div>
    </footer>
    </body>
</html>
00 và dán 3 khối 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Insight</title>
  <link rel="stylesheet" href="css/style.css">
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>
    <header class="header">
        <div class="container">
            header is here
        </div>
    </header>

    <div class="hero">
        <div class="container">
            hero content is here
        </div>
    </div>

    <main class="middle">
        <div class="container">
            middle content is here
        </div>
    </main>

    <footer class="footer">
        <div class="container">
            footer is here
        </div>
    </footer>
    </body>
</html>
01 bên trong.

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
3

Một lần nữa, chúng ta thêm 

.logo {
    float: left;
    margin: 19px 17px 0 0;
}
9 để 3 khối xếp hàng ngang và nhớ thêm 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Insight</title>
  <link rel="stylesheet" href="css/style.css">
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>
    <header class="header">
        <div class="container">
            header is here
        </div>
    </header>

    <div class="hero">
        <div class="container">
            hero content is here
        </div>
    </div>

    <main class="middle">
        <div class="container">
            middle content is here
        </div>
    </main>

    <footer class="footer">
        <div class="container">
            footer is here
        </div>
    </footer>
    </body>
</html>
03 cho thằng cha.

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
4

Đo độ rộng mỗi khối nhỏ là 351px và khoảng cách giữa các khối là 43px. Chúng ta sẽ set 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Insight</title>
  <link rel="stylesheet" href="css/style.css">
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>
    <header class="header">
        <div class="container">
            header is here
        </div>
    </header>

    <div class="hero">
        <div class="container">
            hero content is here
        </div>
    </div>

    <main class="middle">
        <div class="container">
            middle content is here
        </div>
    </main>

    <footer class="footer">
        <div class="container">
            footer is here
        </div>
    </footer>
    </body>
</html>
04 trừ khối đầu tiên.

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
5

Thêm 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Insight</title>
  <link rel="stylesheet" href="css/style.css">
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>
    <header class="header">
        <div class="container">
            header is here
        </div>
    </header>

    <div class="hero">
        <div class="container">
            hero content is here
        </div>
    </div>

    <main class="middle">
        <div class="container">
            middle content is here
        </div>
    </main>

    <footer class="footer">
        <div class="container">
            footer is here
        </div>
    </footer>
    </body>
</html>
05 và 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Insight</title>
  <link rel="stylesheet" href="css/style.css">
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>
    <header class="header">
        <div class="container">
            header is here
        </div>
    </header>

    <div class="hero">
        <div class="container">
            hero content is here
        </div>
    </div>

    <main class="middle">
        <div class="container">
            middle content is here
        </div>
    </main>

    <footer class="footer">
        <div class="container">
            footer is here
        </div>
    </footer>
    </body>
</html>
06 phía ngoài các khối nhỏ, thông số cụ thể xem trong PTS, có một chút bo tròn nhỏ ở góc nên cần cả 
.nav {
    float: right;
}
.nav li {
    float: left;
    border-left: 1px solid #2c323d;
}
.nav a {
    display: block;
    line-height: 62px;
}
4.

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
6

Gần xong, còn thiếu vài cái đường gạch ngang phía dưới mỗi khối

Hướng dẫn tuyển cắt html css

Để thêm được cái này, ta lại sử dụng pseudo-selector :after và :before.

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
7

Giờ F5 và xem kết quả

Hướng dẫn tuyển cắt html css

Đến khối tiếp theo, ở đây cũng có 3 phần, mỗi phần lại có 1 bức ảnh hình tròn cùng với tiêu đề và ngày. Làm tương tự giống như cái trên. Lấy bức ảnh từ pts và biến nó thành hình tròn bằng cách sử dụng 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Insight</title>
  <link rel="stylesheet" href="css/style.css">
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>
    <header class="header">
        <div class="container">
            header is here
        </div>
    </header>

    <div class="hero">
        <div class="container">
            hero content is here
        </div>
    </div>

    <main class="middle">
        <div class="container">
            middle content is here
        </div>
    </main>

    <footer class="footer">
        <div class="container">
            footer is here
        </div>
    </footer>
    </body>
</html>
08. Ta sẽ gọi khối to nhất bên ngoài là 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Insight</title>
  <link rel="stylesheet" href="css/style.css">
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>
    <header class="header">
        <div class="container">
            header is here
        </div>
    </header>

    <div class="hero">
        <div class="container">
            hero content is here
        </div>
    </div>

    <main class="middle">
        <div class="container">
            middle content is here
        </div>
    </main>

    <footer class="footer">
        <div class="container">
            footer is here
        </div>
    </footer>
    </body>
</html>
09, mỗi khối bên trong là 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Insight</title>
  <link rel="stylesheet" href="css/style.css">
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>
    <header class="header">
        <div class="container">
            header is here
        </div>
    </header>

    <div class="hero">
        <div class="container">
            hero content is here
        </div>
    </div>

    <main class="middle">
        <div class="container">
            middle content is here
        </div>
    </main>

    <footer class="footer">
        <div class="container">
            footer is here
        </div>
    </footer>
    </body>
</html>
10, và nhớ đừng quên thêm 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Insight</title>
  <link rel="stylesheet" href="css/style.css">
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>
    <header class="header">
        <div class="container">
            header is here
        </div>
    </header>

    <div class="hero">
        <div class="container">
            hero content is here
        </div>
    </div>

    <main class="middle">
        <div class="container">
            middle content is here
        </div>
    </main>

    <footer class="footer">
        <div class="container">
            footer is here
        </div>
    </footer>
    </body>
</html>
03.

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
8

Kết quả

Hướng dẫn tuyển cắt html css

Còn khối cuối cùng ta sẽ dùng 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Insight</title>
  <link rel="stylesheet" href="css/style.css">
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>
    <header class="header">
        <div class="container">
            header is here
        </div>
    </header>

    <div class="hero">
        <div class="container">
            hero content is here
        </div>
    </div>

    <main class="middle">
        <div class="container">
            middle content is here
        </div>
    </main>

    <footer class="footer">
        <div class="container">
            footer is here
        </div>
    </footer>
    </body>
</html>
12 cho danh sách các ảnh và thẻ 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Insight</title>
  <link rel="stylesheet" href="css/style.css">
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>
    <header class="header">
        <div class="container">
            header is here
        </div>
    </header>

    <div class="hero">
        <div class="container">
            hero content is here
        </div>
    </div>

    <main class="middle">
        <div class="container">
            middle content is here
        </div>
    </main>

    <footer class="footer">
        <div class="container">
            footer is here
        </div>
    </footer>
    </body>
</html>
13 cho phần tiêu đề. Ở đây có 1 cái hiệu ứng là khi di vào ảnh nó sẽ hiện rõ ra, nhưng khi lưu ảnh bạn vẫn phải lưu độ trong suốt 100% nhé, ta sẽ dùng thuộc tính opacity cho cái này.

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
9

Vậy là xong rồi đó, giờ bạn đã biết cách chuyển từ file PSD thành HTML rồi chứ? Tất nhiên mỗi trang 1 kiểu, đây chỉ là 1 ví dụ rất nhỏ và đơn giản để bạn hiểu các bước cần thực hiện. Hy vọng bài viết sẽ giúp ích bạn phần nào, có thể down toàn bộ source code ở đây nhé.

programming html

Bài Viết Liên Quan

Con trăn gấp 2 lần của nó
Con trăn gấp 2 lần của nó

Summer fashion 2023 man
Summer fashion 2023 man

Ai sẽ là lựa chọn số 1 trong dự thảo NHL 2023?
Ai sẽ là lựa chọn số 1 trong dự thảo NHL 2023?

Hướng dẫn lịch sử python
Hướng dẫn lịch sử python

Thuật toán Princeton Python
Thuật toán Princeton Python

Bảng kiểu CSS
Bảng kiểu CSS

Cái gì không phải là () trong css?
Cái gì không phải là () trong css?

Giải mã HTML là gì?
Giải mã HTML là gì?

Làm thế nào để bạn sử dụng .2f trong python?
Làm thế nào để bạn sử dụng .2f trong python?

Bộ dữ liệu python có thể trùng lặp không?
Bộ dữ liệu python có thể trùng lặp không?

MỚI CẬP NHẬP

Các loài cây phổ biến của rừng thanh hóa năm 2024
9 phúts trước . bởi InfatuatedStylus
Thay đổi mẫu dấu công ty tiếng anh là gì năm 2024
21 phúts trước . bởi SullenMatrix
Công văn sở giáo dục đào tạo tỉnh quảng ngãi năm 2024
56 phúts trước . bởi DapperFoothold
Bánh xe luân hồi là gì năm 2024
57 phúts trước . bởi BluntTranslation
12 hạc thành phường tân sơn tp thanh hóa năm 2024
59 phúts trước . bởi GubernatorialDiversity
Bài tập toán 8 chương 1 hình học năm 2024
1 giờs trước . bởi RiotousAbsurdity
Giai cấp tiểu tư sản là gì năm 2024
1 giờs trước . bởi CerebralVicinity
Tỷ giá trung bình tháng 6 2023 năm 2024
1 giờs trước . bởi Three-wayBasis
15 trần hưng đạo hoàn kiếm hà nội phường nào năm 2024
2 giờs trước . bởi DreamlikeSoccer
Đặc sản cà mau là món gì năm 2024
2 giờs trước . bởi BeneficentCyclone

Xem Nhiều

Yeu tố nước trong kiến trúc cảnh quan là gì năm 2024
6 ngàys trước . bởi PreservingWiring
File kẹp tài liệu đục lỗ tiếng anh là gì năm 2024
1 ngàys trước . bởi InsidiousReceptor
Lỗi khi mở folder màn hình view bị thu nhỏ năm 2024
2 ngàys trước . bởi RegimentalAdoption
Viết bài văn nghị luận về bảo vệ môi trường năm 2024
13 giờs trước . bởi RaspingPatchwork
Công văn sở giáo dục đào tạo tỉnh quảng ngãi năm 2024
56 phúts trước . bởi DapperFoothold
Uống vitamin d vào lúc nào tốt nhất năm 2024
1 ngàys trước . bởi PrimordialHacker
Rách giời rơi xuống nghĩa là gì năm 2024
3 ngàys trước . bởi VastOrientation
Chính sách kế hoạch hóa gia đình 2023 năm 2024
6 ngàys trước . bởi FinancialAllotment
Những bài toán lớp 1 giúp trẻ tư duy năm 2024
17 giờs trước . bởi AnnoyedWomanhood
He had two trains but they were armored là gì năm 2024
6 ngàys trước . bởi ItinerantDominion

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

Bản quyền © 2024 Inc.