Tuyệt vời! Bây giờ ẩn layer background giống như trước đây và xuất khẩu như một PNG nhưng lần này gọi đó là xã hội sprite@2x.png. Đây là một quy ước đặt tên tiêu chuẩn cho phiên bản võng mạc của một tập tin hình ảnh.
Vì vậy, bây giờ chúng ta chỉ cần làm tương tự với các biểu tượng điều hướng. Các biểu tượng là các đối tượng vector bên trong PSD Những phương tiện chúng tôi chỉ có thể lặp lại chúng vào một tập tin mới và quy mô cho họ là cần thiết. Kích thước cần thiết cho phiên bản tiêu chuẩn là 49px bởi 18px và phiên bản võng mạc ở gấp đôi kích thước 98px bởi 36px là. Các hình ảnh thành nên như thế này:
Tuyệt vời! Lưu như trong sprite.png gốc và nav-nav-sprite@2x.png. Đó là kết thúc tốt đẹp tôi nghĩ rằng tất cả chúng ta cần làm cho những hình ảnh, vì vậy hãy đẩy vào viết một số mã!
HTML cơ bản và Sass
Chúng ta hãy bắt đầu với những laptop khung trang của chúng tôi. Trong index.html của chúng tôi, sao chép đánh dấu sau đây để bắt đầu vật tắt:
<DOCTYPE html>
<Html>
<đầu>
<meta charset = "UTF-8">
<meta name = "khung nhìn" content = "ban đầu quy mô = 1.0">
<Title> Danh Mục Của Tôi </ title>
<Liên kết rel = "stylesheet" href = "css / style.css">
<script src = "js / modernizr.js"> </ script>
</ Head>
<Body>
<Main class = "nhóm bọc">
<Ngoài class = "sidebar">
<Div class = "tôi-info">
</ Div>
<Class = nav "menu">
</ Nav>
</ Ngoài>
<Div class = "nội dung">
</ Div>
</ Main>
<script src = "// ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> </ script>
<script src = "js / app.js"> </ script>
</ Body>
</ Html>
Đó là cách bố trí đơn giản với các container chính có chứa một yếu tố bên gói sang một bên và một div nội dung. Bên trong bên chúng ta có hai phần, và một thông tin của tôi với một lớp học của các menu nav. Ngoài ra phụ thuộc của chúng tôi bao gồm tất cả, đặc biệt là phiên bản mới nhất của jQuery 1.x. Bây giờ chúng ta bắt đầu điền Sass của chúng tôi tập tin với một số biến.
$ Black: # 000;
$ trắng: #fff;
$ Màu xám: # f7f7f7;
$ Darkgrey: # 5e5e5e;
$ mạng: # d35136;
$ xanh: # 27b599;
$ Blue: # 088ecc;
$ thẫm: # 11171c;
$ Padding: 10px;
$ biên: 10px;
$ chính-width: 1000px;
$ Font-size: 14px;
$ Font-family: 'Lato', sans-serif;
$ Line-height: 1.4;
$ Break-bốn: 1050px;
$ Break-ba: 760px;
$ Break-hai: 520px;
$ Break-một: 360px;
@ url nhập khẩu ('http://fonts.googleapis.com/css?family=Lato:300,400,700');
@ nhập khẩu url ('normalize.css');
// tiện ích
.group: sau khi {
nội dung: "";
hiển thị: bảng;
rõ ràng: cả hai;
}
Đó là một đoạn hợp lý của mã để bắt đầu với! Điều này thực sự chỉ cần thiết lập một số mặc định và các biến để sử dụng tập tin SUỐT Sass của chúng tôi. Hầu hết Quan trọng ở đây là Điều đó phần nào giữ bốn biến điểm break. Những điểm này xác định bố trí của chúng tôi tại đó nên thay đổi. Sass có rất tiện dụng ở đây là chúng ta chỉ có thể tham khảo các biến trong gốc Khi viết các truy vấn phương tiện truyền thông của chúng tôi và nếu một điểm break cần phải thay đổi chỉ có một nơi để thay đổi nó.
Như bạn có thể nhìn thấy bằng cách tuyên bố @ nhập khẩu, Ngoài ra chúng tôi đang nhập khẩu các font của Google được sử dụng trong thiết kế và bản sao Normalize.css chúng tôi tải về trước đó. Tờ khai chỉ là cho đến nay các lớp học nhóm cho đó là một clearfix Đó là phần yếu tố lưu hành các yếu tố. Kiểm tra nicolasgallagher.com để biết thêm thông tin về điều này.
Nếu tất cả mọi thứ được thiết lập một cách chính xác, tiết kiệm styles.scss đồng bằng sẽ tạo ra các thông tin tập tin CSS, chúng tôi đã đưa vào trang của chúng tôi. Xem trang sẽ hiển thị một màn hình trắng khá nhàm chán, vì vậy hãy làm cho nó thú vị hơn bằng cách thêm vào một số phong cách hơn và bổ sung các khu vực bên.
Sidebar; Thông tin của tôi
Trước hết chúng ta hãy thêm dòng sau vào tập tin Sass của chúng tôi:
// Phong cách chính
* {
vị trí: tương đối;
webkit-box-kích thước: hộp biên giới;
-moz-box-kích thước: hộp biên giới;
-ms-ô-kích thước: hộp biên giới;
hộp kích thước: hộp biên giới;
}
html, cơ thể, .Wrap {
min-height: 100%;
}
body {
Màu sắc: màu xám $;
font-size: $ font-size;
font-family: $ font-family;
line-height: $ line-height;
background: $ darkblue;
}
Mỗi phần tử bây giờ có nên Nằm ở vị trí tương đối và cũng có hộp kích thước tài sản để cửa hộp trong tháng Chín, Cho phép Để có các yếu tố của độ rộng tỷ lệ phần trăm của họ bao gồm cả đệm. Phương tiện này chúng ta có thể thiết lập hai yếu tố cạnh nhau 50% chiều rộng, sau đó điều chỉnh padding trong mỗi một nhiều, chúng tôi thích mà không phá vỡ bố cục. Một CSS quy tắc rất, rất hữu ích! Hỗ trợ gần như tất cả các trình duyệt đi kèm thông qua nhà cung cấp tờ khai tiền tố.
Các phong cách còn lại ở đây hoạt động như mặc định cho trang của chúng tôi. Chúng ta phải đảm bảo các yếu tố chính đó Hãy ở lại chiều cao bao bì 100% ở tất cả các lần thanh bên của chúng tôi cần phải điền vào màn hình theo chiều dọc. Chúng tôi là nền tảng cơ thể trong tháng Chín đến $ thẫm ở đây, đó thực sự là màu sắc bên chúng tôi. Đây là gì Cung cấp cho sự xuất hiện của% chiều cao bên 100 của chúng tôi. Trong thực tế, các yếu tố bên mình sẽ chỉ có cao như nội dung của nó, nhưng sẽ có một nền tảng minh bạch, VẬY hiển thị màu sắc phía sau nó.
Hãy bắt đầu bổ sung các bên ...
<img src = "images / cj.jpg" alt = "Chris Johnson" class = "danh mục đầu tư hình ảnh">
<H1> Chris Johnson </ h1>
<H2> kinh nghiệm UX / UI Designer <br> có trụ sở tại London, Vương quốc Anh </ h2>
<Div class = "nhóm xã hội">
<a href="#" class="dribbble"> Dribbble </a>
<a href="#" class="twitter"> Twitter </a>
<a href="#" class="facebook"> Facebook </a>
<a href="#" class="googleplus"> </a> Google+
</ Div>
Thêm mã này vào .my-info div. Bạn có thể đã thay đổi tên của danh mục đầu tư hình ảnh Tùy thuộc vào những gì bạn đã gọi nó. Không có một awful xảy ra ở đây, nhưng hãy lưu tập tin và có một cái nhìn trong trình duyệt.
Đáng yêu. Bây giờ mở style.scss và nhập mã sau đây:
.sidebar {
width: 100%;
height: 100%;
màn hình phương tiện truyền thông và (min-width: $ break-ba) {
nổi: left;
width: 20%;
}
.my-info {
text-align: center;
padding: đệm * 3 $ 0;
cửa dưới: 1px rắn $ darkgrey;
.portfolio hình ảnh {
border-radius: 50%;
}
h1, h2 {
font-weight: bình thường;
}
h1 {
font-size: 120%;
}
h2 {
font-size: 100%;
}
}
}
Như chúng ta đang theo một chiến lược điện thoại di động đầu tiên ở đây, chúng ta cần phải sidebar của chúng tôi và đầy đủ chiều cao đầy đủ chiều rộng với độ phân giải điện thoại di động. Một câu truy vấn nhanh với $ trung bình nghỉ ba điểm break của chúng tôi nổi thanh bên trái và hạn chế chiều rộng đến 20%.
Các phong cách cho .my-thông tin dễ dàng, đủ. Chúng tôi chỉ muốn tập trung tất cả mọi thứ và cung cấp cho nó tất cả một số không gian xung quanh các cạnh. Để tách ra khỏi phần sắp được trình đơn của chúng tôi, chúng tôi chỉ sử dụng một biên giới 1px trên các cạnh đáy. Để thực hiện các vòng tròn danh mục đầu tư hình ảnh, cung cấp cho nó một 50% cửa bán kính và, cuối cùng, chúng ta phải ghi đè lên một số kiểu font cho bất kỳ h1 h2 hoặc các yếu tố bên trong phần này.
Liên kết Truyền thông xã hội
Bây giờ chúng ta cần phải giải quyết Những liên kết phương tiện truyền thông xã hội, sử dụng một trong những họa tiết, chúng tôi tạo ra trước đó. Đặt đoạn code sau đây Ngay sau khi tờ khai h2 trong khối cuối cùng của mã.
.social {
width: 120px;
margin: 0 auto;
để {
nổi: left;
chiều rộng: 25px;
chiều cao: 25px;
margin: 0 $ lợi nhuận / 5;
background: url (../ hình ảnh / xã hội sprite.png) no-repeat;
text-indent: -9999px;
màn hình và phương tiện truyền thông (webkit-min-thiết bị-pixel, tỷ lệ: 2), màn hình và (min-thiết bị-pixel, tỷ lệ: 2) {
background: url (../ images/social-sprite@2x.png) no-repeat;
nền-size: 51px 101px;
}
{& .dribbble
background-position: 0px 0px;
&: Di {
background-position: 0px -25px;
}
}
background-position: 0px -25px;
&: Di {
background-position: -25px -25px;
}
}
background-position: 0px -50px;
&: Di {
background-position: -50px -25px;
}
}
{& .googleplus
background-position: 0px -75px;
&: Di {
background-position: -75px -25px;
}
}
}
}
Điều đó có vẻ khá phức tạp, nhưng nó không phải là thực sự. Phần lớn các mã này được xử lý như thế nào và biểu tượng của họ xuất hiện trạng thái di chuột. Trước hết chúng ta phải nổi <a> mỗi nguyên tố, cung cấp cho họ một chiều rộng và chiều cao Và Ngoài ra một số lợi nhuận để không gian chúng ra. Điều tiếp theo chúng tôi làm là xác định hình nền. Điều này cần được xã hội vào tháng tới ma chúng tôi tạo ra trước đó. Cuối cùng, hãy chắc chắn thông tin, chúng tôi đã sử dụng các văn bản trong mỗi phần tử không xuất hiện trên trang. Thuộc tính text-indent Đó Takes sóc độc đáo.
Phần tiếp theo là một trong những thú vị. Ở đây, chúng ta đang Xác định nào nền để sử dụng cho mật độ điểm ảnh hiển thị cao. Khái niệm ở đây là sử dụng phiên bản "tăng gấp đôi lên" của sprite xã hội nếu tỷ lệ điểm ảnh của thiết bị là 2 tài sản nền có kích thước là cần thiết để mở rộng xuống các tập tin trở lại kích thước ban đầu, vì vậy tất cả các mã của chúng tôi chỉ định vị làm việc mà không cần phải lặp lại bất cứ điều gì.
Bốn phần tiếp theo là tất cả các khái niệm tương tự. Chúng tôi chỉ thiết lập vị trí nền cho mỗi biểu tượng tương ứng và trạng thái di chuột. Hãy cùng thiết kế web HCM nhìn vào trình duyệt:
Xem tiếp phần 3: tại đây.
Đăng nhận xét