Sau đây là phần 3 bài viết "Xây dựng trang Portfolio Responsive Timeline" do thiết kế website tại HCM thực hiện.
Awesome! Đó là tìm kiếm thực sự tốt. Nếu tất cả mọi thứ là chính xác các trạng thái di chuột nên tất cả công việc và họ nên tất cả trông sắc nét trên iPhone / iPad vv Bây giờ, chúng ta hãy bắt đầu giải quyết menu bên.
Các đơn Sidebar
Bắt đầu bằng cách nhập sau vào index.htm trong trình đơn container.
<H3 class = "làm việc"> làm việc </ h3>
<Ul>
<Li> <a href="#" class="current-menu-item"> mới nhất </a> </ li>
<Li> <a href="#"> </a> Thiết kế Web </ li>
<Li> <a href="#"> Xây dựng thương hiệu </a> </ li>
<Li> <a href="#"> Nhiếp ảnh </a> </ li>
<Li> <a href="#"> In </a> </ li>
<Li> <a href="#"> thiết kế di động </a> </ li>
</ Ul>
<H3 class = "về"> Giới thiệu </ h3>
<Ul>
<Li> <a href="#"> </a> Kỹ năng </ li>
<Li> <a href="#"> </a> Kinh nghiệm </ li>
<Li> <a href="#"> Giáo dục </a> </ li>
<Li> <a href="#"> Khách hàng </a> </ li>
<Li> <a href="#"> Chứng </a> </ li>
<Li> <a href="#"> Blog </a> </ li>
</ Ul>
<H3 class = "liên hệ"> Liên hệ </ h3>
<Ul>
<Li> <a href="#"> Địa chỉ </a> </ li>
<Li> <a href="#"> Điện thoại </a> </ li>
<Li> <a href="#"> </a> mạng xã hội </ li>
<Li> <a href="#"> Email </a> </ li>
</ Ul>
Khá tự giải thích tôi nghĩ, vì vậy hãy tiếp tục bằng cách nhập các phong cách sau đây sau khi các phần của tôi, thông tin, nhưng vẫn còn bên trong các yếu tố bên tổng thể.
.Menus {
text-align: center;
màn hình phương tiện truyền thông và (min-width: $ break-ba) {
padding: $ đệm đệm * $ 2 * 3;
}
h3 {
văn bản chuyển đổi: hoa;
font-size: 120%;
font-weight: bình thường;
padding-left: đệm * $ 2.5;
con trỏ: con trỏ;
width: 20%;
margin: lề $ * $ 2 * $ 11 biên lợi nhuận;
màn hình phương tiện truyền thông và (min-width: $ break-một) {
margin: $ $ lề tự động biên * 2 * 2;
}
màn hình phương tiện truyền thông và (min-width: $ break-ba) {
margin: tỷ suất lợi nhuận $ * 2 0 $ 0;
}
&: Trước khi {
nội dung: "";
vị trí: tuyệt đối;
top: 0px;
trái: 0px;
chiều cao: 18px;
display: block;
background: url (../ hình ảnh / nav-sprite.png) no-repeat;
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/nav-sprite@2x.png) no-repeat;
nền-size: 49px 18px;
}
}
{& .work
Màu sắc: $ mạng;
&: Trước khi {
chiều rộng: 15px;
background-position: 0px 0px;
}
}
{& .about
Màu sắc: màu xanh lá cây $;
&: Trước khi {
chiều rộng: 17px;
background-position: 0px -15px;
}
}
{& .contact
Màu sắc: màu xanh $;
&: Trước khi {
chiều rộng: 17px;
background-position: 0px -32px;
}
}
}
}
Điều này thực sự rất giống với các biểu tượng xã hội như xa như các khái niệm và thực hiện của khái niệm. Đối với các mục menu chính, chúng tôi chỉ muốn tất cả mọi thứ để được làm trung tâm. Một khi chúng tôi nhận được $ của chúng tôi ở trên chia ba điểm break chúng tôi sẽ cần một số đệm để vị trí các menu xa các cạnh hơi.
Mỗi phòng trong số các yếu tố h3 nên có màu sắc khác nhau và các biểu tượng khác nhau. Chúng tôi đang sử dụng một sự kết hợp của: trước khi yếu tố giả, họa tiết và các truy vấn phương tiện truyền thông để đạt này. Ngoài Từ đây chúng ta có một vài phương tiện truyền thông truy vấn để kiểm soát lợi nhuận của các yếu tố h3 với kích thước màn hình lớn hơn. Điều này là để họ luôn luôn liên quan đến một cách chính xác Nằm ở vị trí menu của họ.
Phát biểu của các menu, chúng ta sẽ thêm CSS cho họ trong một thời điểm. Đầu tiên, chúng ta hãy có một cái nhìn trong trình duyệt:
Các tiêu đề trông thực sự tốt đẹp! Các menu không quá nhiều. Hãy chăm sóc đó một cách nhanh chóng trước khi mặc màu xanh khiến chúng ta đau nhiều hơn ...
Danh sách đơn
ul {
list-style: none;
padding: 0;
display: none;
margin: 0 $ lề * $ 13,5 tỷ suất lợi nhuận;
text-align: left;
màn hình phương tiện truyền thông và (min-width: $ break-ba) {
margin: 0 0 $ 0 lề * 2,5;
display: block;
width: auto;
}
{& .open
display: inline-block;
margin: 0 auto lề * $ lợi nhuận $ 6;
màn hình phương tiện truyền thông và (min-width: $ break-ba) {
margin: 0 0 $ 0 lề * 2,5;
display: block;
width: auto;
}
}
li {
để {
Màu sắc: $ darkgrey;
text-decoration: none;
webkit-transition: 0.4s màu một cách dễ dàng;
-moz-chuyển tiếp: màu 0.4s cách dễ dàng;
-o-chuyển tiếp: 0.4s dễ dàng pha màu;
-ms-chuyển tiếp: 0.4s màu một cách dễ dàng;
quá trình chuyển đổi: 0.4s dễ dàng pha màu;
&: Di chuột, và .current-menu-item {
Màu sắc: trắng $;
webkit-transition: 0.4s màu một cách dễ dàng;
-moz-chuyển tiếp: màu 0.4s cách dễ dàng;
-o-chuyển tiếp: 0.4s dễ dàng pha màu;
-ms-chuyển tiếp: 0.4s màu một cách dễ dàng;
quá trình chuyển đổi: 0.4s dễ dàng pha màu;
}
}
}
}
Ở độ phân giải điện thoại di động, chúng tôi muốn thực đơn của chúng tôi để được ẩn, vì vậy người dùng có thể chọn để ẩn hoặc hiển thị chúng khi họ cần truy cập vào chúng. Một khi chúng ta đạt $ nghỉ điểm của chúng tôi ba đơn nên có thể nhìn thấy tất cả các thời gian.
Lớp xử lý .open việc hiển thị menu khi họ mở cửa. Các thiết kế đã khá Chính Được đặt chúng, vì vậy chúng tôi làm như vậy ở đây sử dụng lợi nhuận. Một lần nữa, phá vỡ điểm $ 3 đến chơi và ghi đè lên lề Đối với những nghị quyết trên. Các phong cách cho các phần tử li là khá đơn giản. Điều quan trọng cần lưu ý là việc sử dụng CSS3 chuyển tiếp. Tôi đã sử dụng chúng ở đây để cung cấp cho một sự xuất hiện mờ dần đẹp Khi lơ lửng trên phần tử. Khuyến khích bạn để chơi xung quanh với các chuyển động để xem những gì các hiệu ứng thú vị mà bạn có thể đạt được!
Hãy lưu tập tin và xem kết quả trong trình duyệt.
Mở app.js và nhập các chức năng sau:
$ (Function () {
$ ('. đơn h3'). On ('click', function (e) {
$ (này) .next ('ul') toggleClass ("mở") .;
e.preventDefault (); return false;
});
});
Thiết kế website ở HCM đang bắt đầu từ tập tin này với các tài liệu jQuery chức năng nào về cơ bản đã sẵn sàng chờ đợi cho tài liệu là hoàn toàn sẵn sàng trước khi chạy bất kỳ mã. Tìm hiểu thêm về các sự kiện đã sẵn sàng trên api.jquery.com.
Chúng tôi sau đó được gắn một sự kiện click vào bất kỳ h3 phần tử bên trong trình đơn của chúng tôi. Khi sự kiện này xảy ra (khi người dùng nhấp vào h3), chúng tôi sử dụng jQuery để tìm các phần tử ul "bên cạnh" và chuyển đổi các lớp mở vào nó. Vì vậy, nếu các yếu tố có lớp Đã nó sẽ loại bỏ nó, và ngược lại nếu nó không. Dòng cuối cùng là có để ngăn chặn bất kỳ hành động mặc định cho phần tử. Điều này có thể không áp dụng ở đây Bởi vì các yếu tố h3 không có một hành động mặc định, Trong khi đó, một thẻ neo, ví dụ, thực hiện. Tuy nhiên, nó là thực hành tốt để có được vào các thói quen của nó bao gồm Khi sử dụng nhấp chuột xử lý sự kiện.
Lưu tập tin này và quay trở lại trình duyệt. Khi ở độ phân giải điện thoại di động, nếu bạn nhấp vào tiêu đề menu Bạn sẽ thấy menu mở ra bên dưới nó. Nếu này không xảy ra, hãy kiểm tra JavaScript cho bất kỳ lỗi nào, hoặc làm mới trình duyệt của bạn và thử lại.
Đó là kết thúc tốt đẹp các khu vực bên! Hãy đẩy về phía trước và nhận được một số nội dung trên trang.
nội dung chính
Bước đầu tiên ở đây là để thêm HTML vào trang chúng ta cần.
<Điều class = "nhóm danh mục đầu tư, mục đầu tiên">
<class = tiêu đề "danh mục đầu tư-info">
<Div class = "ngày"> 07 Tháng Mười Một 2013 </ div>
<Div class = "description">
Miễn phí mẫu PSD cho phần khởi động, các doanh nghiệp nhỏ và về cơ bản tất cả mọi người thích cho thiết kế tốt.
</ Div>
<Div class = "meta">
<P> <strong> Khách hàng: </ strong> Despreneur </ p>
<P> <strong> tags: </ strong> Thiết kế Web </ p>
</ Div>
</ Header>
<Hình class = "danh mục đầu tư hình ảnh">
<img src = "images / danh mục đầu tư / free-psd-templates.jpg" alt = "Mẫu PSD miễn phí">
</ Hình>
</ Điều>
<Điều class = "nhóm danh mục đầu tư mục">
<class = tiêu đề "danh mục đầu tư-info">
<Div class = "ngày"> 07 Tháng Mười Một 2013 </ div>
<Div class = "description">
Miễn phí mẫu PSD cho phần khởi động, các doanh nghiệp nhỏ và về cơ bản tất cả mọi người thích cho thiết kế tốt.
</ Div>
<Div class = "meta">
<P> <strong> Khách hàng: </ strong> Despreneur </ p>
<P> <strong> tags: </ strong> Thiết kế Web </ p>
</ Div>
</ Header>
<Hình class = "danh mục đầu tư hình ảnh">
<img src = "images / danh mục đầu tư / ủ rũ-shot.jpg" alt = "Moody Shot">
</ Hình>
</ Điều>
<Điều class = "nhóm danh mục đầu tư mục">
<class = tiêu đề "danh mục đầu tư-info">
<Div class = "ngày"> 07 Tháng Mười Một 2013 </ div>
<Div class = "description">
Miễn phí mẫu PSD cho phần khởi động, các doanh nghiệp nhỏ và về cơ bản tất cả mọi người thích cho thiết kế tốt.
</ Div>
<Div class = "meta">
<P> <strong> Khách hàng: </ strong> Despreneur </ p>
<P> <strong> tags: </ strong> Thiết kế Web </ p>
</ Div>
</ Header>
<Hình class = "danh mục đầu tư hình ảnh">
<img src = "images / danh mục đầu tư / mới york.jpg" alt = "New York">
</ Hình>
</ Điều>
<Điều class = "nhóm danh mục đầu tư mục tải-wrap">
<class = tiêu đề "danh mục đầu tư-info">
</ Header>
<Hình class = "danh mục đầu tư hình ảnh">
<Div class = "tải">
<img src = "images / loading.png" alt = "Loading" class = "xoay"> & nbsp; Loading ...
</ Div>
</ Hình>
</ Điều>
Đặt mã này trong .content div. Chúng tôi có ba bài báo tính năng trong thiết kế đó Và Cũng là một "Nạp" bài viết. Tôi đã Được đặt bên trong biểu tượng riêng của nó tải danh mục đầu tư mục vì vậy chúng tôi có thể giữ được cấu trúc của trang. Tôi có thể sau đó chỉ cần tải vị trí biểu tượng riêng của mình bên trong phần tử danh mục đầu tư hình ảnh. Bạn sẽ thấy ở đây là tốt-Đó là mục đầu tiên có một danh mục đầu tư của lớp đầu tiên. Đây sẽ là quan trọng trong CSS của chúng tôi đó chúng tôi sẽ nhận được vào sau khi uống một cái nhìn nhanh chóng trong trình duyệt:
Tốt đẹp, nhưng không hoàn toàn những gì chúng ta muốn, vì vậy chúng ta hãy thẳng vào phong cách.
.content {
width: 100%;
min-height: 100%;
background: $ trắng;
màn hình phương tiện truyền thông và (min-width: $ break-ba) {
nổi: left;
width: 80%;
}
.portfolio mục {
background: $ màu xám;
&: Trước khi {
nội dung: "";
vị trí: tuyệt đối;
chiều rộng: 3px;
background: tối ($ màu xám, 5%);
top: 0px;
left: 17px;
bottom: 0px;
}
{& .first
&: Trước khi {
top: 30px;
}
}
.portfolio-info {
min-height: 100%;
Màu sắc: $ darkgrey;
padding: đệm $ * $ 2 * $ 2 đệm lót đệm * $ 2 * 4;
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;
màn hình phương tiện truyền thông và (min-width: $ break-ba) {
nổi: left;
width: 30%;
}
.date {
font-size: 110%;
Màu sắc: đen $;
margin-bottom: $ lợi nhuận;
&: Trước khi {
nội dung: "";
vị trí: tuyệt đối;
chiều rộng: 11px;
chiều cao: 11px;
border-radius: 50%;
border: 2px rắn màu xám $;
background: $ mạng;
trái: -29px;
top: 3px;
}
}
.meta {
Màu sắc: đen $;
margin-top: $ lợi nhuận;
p {
margin: 0;
}
}
}
}
}
Một đoạn lớn của mã đó! Chúng ta hãy chia nó ra từng mảnh. Các phong cách .content tương tự như phong cách trong thanh bên ở độ phân giải điện thoại di động đó, chúng tôi chỉ cần nó đầy đủ chiều rộng, nhưng bất cứ điều gì tại hoặc cao hơn $ nghỉ ba điểm của chúng tôi Chúng tôi có nên thả nổi và kéo nó trong chiều rộng tới 80%. Chúng tôi cũng cần phải cung cấp cho các div nội dung nền trắng để phần nó đi từ thanh bên.
Các yếu tố danh mục đầu tư mục nên có nền màu xám. Để tạo ra thời gian chạy xuống cạnh trái của khu vực nội dung, chúng tôi sẽ cung cấp cho mỗi danh mục đầu tư mục: trước khi yếu tố. Ở đây chúng ta chỉ hoàn toàn vị trí của nó 17px từ cạnh bên trái và sử dụng / lừa dưới đầu để buộc nó Để có 100% chiều cao. Liên quan đến việc thiết lập này Cả hai đầu và tài sản dưới 0, nào là có hiệu lực được nói với các yếu tố để được ở cả hai vị trí, quả là một yếu tố đầy đủ chiều cao. Điều này cũng làm việc cho bên trái và thuộc tính bên phải để tạo ra một yếu tố đầy đủ chiều rộng. Chúng ta phải xác định vị trí danh mục đầu tư, mục đầu tiên của chúng tôi đi từ mép trên của cửa sổ nào Chúng tôi đạt được ở đây bằng cách thiết lập thuộc tính hàng đầu để 30px.
Danh mục đầu tư, thông tin nên các bài báo, một lần nữa, được rộng 100% $ trừ khi chúng ta đang ở break-ba trở lên. Để tạo ra các vòng tròn nhỏ màu đỏ nhìn thấy trên các thiết kế Tôi Quyết định sử dụng các yếu tố ngày, khi cả hai dường như có liên quan. Trong CSS cách tốt nhất để đạt được nó là sử dụng một: trước khi yếu tố giả. Để làm cho nó một vòng tròn nó phải có một số chiều cao và chiều rộng và biên giới-bán kính là 50%. Chúng tôi sau đó hoàn toàn vị trí của nó ra bên trái của ngày. Để có được khoảng cách nhỏ xung quanh nó, chỉ đơn giản là áp dụng đối với biên giới màu sắc tương tự như các yếu tố danh mục đầu tư mục.
Các thông tin meta rất đơn giản. Chỉ trong tháng chín văn bản màu đen và cho nó một lề trên. Bất kỳ <p> bên trong nên ở đây không có lợi nhuận. Lưu tập tin và nhìn vào những gì relativamente Phần này mã ngắn đã đạt được.
Đây là nhận được rất gần ngay bây giờ! Chúng ta hãy tiếp tục với phong cách nội dung của chúng tôi ...
.portfolio hình ảnh {
padding: đệm * $ 2;
background: $ trắng;
cửa bên trái: 1px Darken giỏi ($ màu xám, 10%);
text-align: center;
màn hình phương tiện truyền thông và (min-width: $ break-ba) {
nổi: left;
width: 70%;
}
img {
width: 100%;
max-width: 610px;
chiều cao: tự động;
}
div.loading {
img {
width: auto;
chiều cao: tự động;
}
}
}
Nơi này Ngay sau khi thông tin phong cách danh mục đầu tư. Khối này mã ngắn sẽ làm cho hình ảnh bên trong các danh mục đầu tư các mặt hàng đáp ứng. Khái niệm là mở rộng các hình ảnh xuống nhỏ như chúng ta cần, nhưng chỉ lên đến quy mô chiều rộng hiện tại của họ. Điều này có nghĩa là Bạn có Để có hình ảnh chiều rộng cố định, nhưng nó hoàn toàn khả thi trong một bố cục / mẫu như thế này, là những hình ảnh có lẽ sẽ được tự động tạo ra và cắt một Un kích thước nhất định.
Chúng tôi cũng sử dụng các yếu tố danh mục đầu tư hình ảnh để thêm một chi tiết thiết kế, đó là ranh giới mỏng giữa những hình ảnh và thông tin. Nếu bạn có một cái nhìn trong trình duyệt hiện nay, bạn sẽ thấy những hình ảnh độc đáo Với sự mở rộng quy mô chung trình duyệt và chỉ cần nhìn tuyệt vời!
Tiếp theo
Đó là thời gian để nghỉ giải lao! Trong phần tiếp theo, và cuối cùng de esta phần loạt, chúng ta sẽ thêm một số ngọn lửa để bố trí. Chúng tôi sẽ xây dựng biểu tượng tải ở dưới cùng của khu vực nội dung của chúng tôi, tạo hiệu ứng động It Với CSS3, sau đó bắt chước danh mục đầu tư di chuyển vô hạn như các mặt hàng khác được nạp.
Đăng nhận xét