About Me
Hướng dẫn page css - trang css
Đặng Thanh Long
Đà Nẵng - Việt Nam -
Chào mừng bạn đến với CV của mình!!
“Stay Hungry, Stay foolish”
Hiện giờ mình đang làm freelancer bên mảng front-end để kiếm cơm qua ngày. Ngoài ra mình còn làm bên mảng BE[NodeJS]. Anh em nào làm website hay thiết kế web thì liên hệ mình nha :]]
Blog của tui: //www.thanhlongdev.tk
SKILLS
PROGRAMMING LANGUAGES & TOOLS
Kiến Thức Là Vô Tận
- Mình sẽ cố gắng trao dồi thêm kiến thức và kĩ năng.
- Học thêm các ngôn ngữ và các công nghệ như: ReactJS, PHP, VueJS,..
- Chia sẽ kiến thức lập trình nói chung và lập trình web nói riêng.
- Làm giàu bằng chính niềm đam mê của mình. Giúp chúng ta sống có một cuộc đời có ý nghĩa.
Trên đây là các ngôn ngữ, công nghệ và các công cụ mà mình được học và làm việc với chúng trong quá trình làm web.
PROJECT & INTERESTS
PROJECT OF ME
- Building website Vingologo này cho khách hàng.
- Building shopping cart bằng NodeJS, Express và MongoDB [mình chưa deploy lên heroku các bạn thông cảm nha, Project mình làm sau khi học NodeJS].
- Building books-librarys bằng NodeJS, Express và MongoDB [Project mà mình làm sau khi học NodeJS].
- Building landing page VyTea cho khách hàng.
- Viết Tech Blog kể từ tháng 11/2019 //www.thanhlongdev.tk/
INTEREST OF ME
Ngoài công việc lập trình, viết blog và học lập trình. Thì mình còn có những sở thích như: đá bóng và chới FO4, tuy đá không được hay nhưng luôn đá hết mình :]]. Và đặc biệt mình có một đam mê khác là chế cháo. Mình hay chế lao bluetooh và dự định sắp tới là sẽ chế xe ô tô điện nhưng chưa có điều kiện.
© 2016-2019 - Bản quyền thuộc về thanhlongcv
CV-online
- About Me
- Skills
- Project & INTERESTS
Đặng Thanh Long
Đà Nẵng - Việt Nam -
Chào mừng bạn đến với CV của mình!!
“Stay Hungry, Stay foolish”
Hiện giờ mình đang làm freelancer bên mảng front-end để kiếm cơm qua ngày. Ngoài ra
mình còn làm bên mảng BE[NodeJS]. Anh em nào làm website hay thiết kế web thì liên hệ mình nha :]]
Blog của tui: //www.thanhlongdev.tk
SKILLS
PROGRAMMING LANGUAGES & TOOLS
-
-
-
-
-
-
-
-
-
-
-
-
Kiến Thức Là Vô Tận
Trên đây là các ngôn ngữ, công nghệ và các công cụ mà mình
được học và làm việc với chúng trong quá trình làm web.
- Mình sẽ cố gắng trao dồi thêm kiến thức và kĩ năng.
- Học thêm các ngôn ngữ và các công nghệ như: ReactJS, PHP, VueJS,..
- Chia sẽ kiến thức lập trình nói chung và lập trình web nói riêng.
- Làm giàu bằng chính niềm đam mê của mình. Giúp chúng ta sống có một cuộc đời có ý nghĩa.
PROJECT & INTERESTS
PROJECT OF ME
-
Building website Vingologo này cho khách hàng.
-
Building shopping cart
bằng NodeJS, Express và MongoDB
[mình chưa deploy lên heroku các bạn thông cảm nha, Project mình làm sau khi học NodeJS].
-
Building books-librarys bằng NodeJS,
Express và
MongoDB [Project mà mình làm sau khi học NodeJS].
-
Building landing page VyTea cho khách
hàng.
-
Viết Tech Blog kể từ tháng 11/2019 //www.thanhlongdev.tk/
INTEREST OF ME
Ngoài công việc lập trình, viết blog và học lập trình. Thì mình còn
có những sở thích như: đá bóng và chới FO4, tuy đá không được hay nhưng
luôn đá hết mình :]]. Và đặc biệt mình có một đam mê khác là chế cháo.
Mình hay chế lao bluetooh và dự định sắp tới là sẽ chế xe ô tô điện nhưng chưa có điều kiện.
© 2016-2019 - Bản quyền thuộc về thanhlongcv
Đơn giản phải không nào?
Nhúng tập tin CSS vào bên trong một tập tin CSS
Chẳng hạn bây giờ bạn có 3 tập tin CSS mà bạn không muốn thêm tất cả tụi nó vào website mà chỉ muốn thêm một tập tin CSS thôi, thì bạn có thể sử dụng cách nhúng các tập tin CSS vào bên trong một tập tin CSS với từ khóa
CV-online
- About Me
- Skills
- Project & INTERESTS
Đặng Thanh Long
Đà Nẵng - Việt Nam -
Chào mừng bạn đến với CV của mình!!
“Stay Hungry, Stay foolish”
Hiện giờ mình đang làm freelancer bên mảng front-end để kiếm cơm qua ngày. Ngoài ra
mình còn làm bên mảng BE[NodeJS]. Anh em nào làm website hay thiết kế web thì liên hệ mình nha :]]
Blog của tui: //www.thanhlongdev.tk
SKILLS
PROGRAMMING LANGUAGES & TOOLS
-
-
-
-
-
-
-
-
-
-
-
-
Kiến Thức Là Vô Tận
Trên đây là các ngôn ngữ, công nghệ và các công cụ mà mình
được học và làm việc với chúng trong quá trình làm web.
- Mình sẽ cố gắng trao dồi thêm kiến thức và kĩ năng.
- Học thêm các ngôn ngữ và các công nghệ như: ReactJS, PHP, VueJS,..
- Chia sẽ kiến thức lập trình nói chung và lập trình web nói riêng.
- Làm giàu bằng chính niềm đam mê của mình. Giúp chúng ta sống có một cuộc đời có ý nghĩa.
PROJECT & INTERESTS
PROJECT OF ME
-
Building website Vingologo này cho khách hàng.
-
Building shopping cart
bằng NodeJS, Express và MongoDB
[mình chưa deploy lên heroku các bạn thông cảm nha, Project mình làm sau khi học NodeJS].
-
Building books-librarys bằng NodeJS,
Express và
MongoDB [Project mà mình làm sau khi học NodeJS].
-
Building landing page VyTea cho khách
hàng.
-
Viết Tech Blog kể từ tháng 11/2019 //www.thanhlongdev.tk/
INTEREST OF ME
Ngoài công việc lập trình, viết blog và học lập trình. Thì mình còn
có những sở thích như: đá bóng và chới FO4, tuy đá không được hay nhưng
luôn đá hết mình :]]. Và đặc biệt mình có một đam mê khác là chế cháo.
Mình hay chế lao bluetooh và dự định sắp tới là sẽ chế xe ô tô điện nhưng chưa có điều kiện.
© 2016-2019 - Bản quyền thuộc về thanhlongcv
CV-online
- About Me
- Skills
- Project & INTERESTS
Đặng Thanh Long
Đà Nẵng - Việt Nam -
Chào mừng bạn đến với CV của mình!!
“Stay Hungry, Stay foolish”
Hiện giờ mình đang làm freelancer bên mảng front-end để kiếm cơm qua ngày. Ngoài ra
mình còn làm bên mảng BE[NodeJS]. Anh em nào làm website hay thiết kế web thì liên hệ mình nha :]]
Blog của tui: //www.thanhlongdev.tk
SKILLS
PROGRAMMING LANGUAGES & TOOLS
-
-
-
-
-
-
-
-
-
-
-
-
Kiến Thức Là Vô Tận
Trên đây là các ngôn ngữ, công nghệ và các công cụ mà mình
được học và làm việc với chúng trong quá trình làm web.
- Mình sẽ cố gắng trao dồi thêm kiến thức và kĩ năng.
- Học thêm các ngôn ngữ và các công nghệ như: ReactJS, PHP, VueJS,..
- Chia sẽ kiến thức lập trình nói chung và lập trình web nói riêng.
- Làm giàu bằng chính niềm đam mê của mình. Giúp chúng ta sống có một cuộc đời có ý nghĩa.
PROJECT & INTERESTS
PROJECT OF ME
-
Building website Vingologo này cho khách hàng.
-
Building shopping cart
bằng NodeJS, Express và MongoDB
[mình chưa deploy lên heroku các bạn thông cảm nha, Project mình làm sau khi học NodeJS].
-
Building books-librarys bằng NodeJS,
Express và
MongoDB [Project mà mình làm sau khi học NodeJS].
-
Building landing page VyTea cho khách
hàng.
-
Viết Tech Blog kể từ tháng 11/2019 //www.thanhlongdev.tk/
INTEREST OF ME
Ngoài công việc lập trình, viết blog và học lập trình. Thì mình còn
có những sở thích như: đá bóng và chới FO4, tuy đá không được hay nhưng
luôn đá hết mình :]]. Và đặc biệt mình có một đam mê khác là chế cháo.
Mình hay chế lao bluetooh và dự định sắp tới là sẽ chế xe ô tô điện nhưng chưa có điều kiện.
© 2016-2019 - Bản quyền thuộc về thanhlongcv
Ví dụ bạn có thể nhúng một tập tin demo.css vào trong tập tin style.css bằng cách chèn đoạn này vào tập tin style.css:
@import "demo.css";
Lời kết
Việc nhúng CSS vào website của bạn bây giờ đã hoàn tất rồi, mọi thứ vẫn còn rất đơn giản phải không nào? Cũng đúng thôi vì CSS cũng khá đơn giản mà. Và bắt đầu từ bài sau là chúng ta có thể đi sâu vào việc vận dụng một số thuộc tính CSS để trang trí website rồi.
Thạch Phạm
Bé Thạch 18 tuổi, hiện công tác tại AZDIGI với vị trí giữ xe và viết thuê tại ThachPham.Com. Sở thích nghiên cứu về website, DevOps, SysAdmin và xăm mình nữa. Phương châm sống của bé là "No Pain, No Gain".
Hiện tại blog tạm đóng bình luận vì mình cần tập trung thời gian vào cập nhật bài viết. Bình luận sẽ mở ra cho đến khi mình sẵn sàng.
Giới Thiệu Chung
Hôm nay mình sẽ hướng dẫn các bạn reponsive một trang CV-online do mình tự code nha. Reponsive là thuật ngữ không còn quá xa lạ với chúng ta nữa rồi đúng không ạ.
Reponsive là thuật ngữ không còn quá xa lạ với chúng ta nữa rồi đúng không ạ.
Vậy reponsive là gì? Reponsive web design viết tắt là RWD giúp website chúng ta hiển thị giao diện phù hợp với từng thiết bị và kích thước màn hình khác nhau.
Reponsive web design viết tắt là RWD giúp website chúng ta hiển thị giao diện phù hợp với từng thiết bị và kích thước màn hình khác nhau.
Mục Đích Bài Viết
Hướng dẫn các bạn có thể tự tạo cho mình được một CV-online viết bằng html,css và js không sử dụng framwork như bootstrap để chia layout mà sử dụng float để chia layout. Và sử dụng media query để reponsive cho page.
Bài viết này mình làm khá chuyên sâu để giúp các bạn hiểu rõ hơn về reponsive. Mong các bạn xem kĩ.
About Me
Đặng Thanh Long
Đà Nẵng - Việt Nam -
Chào mừng bạn đến với CV của mình!!
“Stay Hungry, Stay foolish”
Hiện giờ mình đang làm freelancer bên mảng front-end để kiếm cơm qua ngày. Ngoài ra mình còn làm bên mảng BE[NodeJS]. Anh em nào làm website hay thiết kế web thì liên hệ mình nha :]]
Blog của tui: //www.thanhlongdev.tk
SKILLS
PROGRAMMING LANGUAGES & TOOLS
Kiến Thức Là Vô Tận
- Mình sẽ cố gắng trao dồi thêm kiến thức và kĩ năng.
- Học thêm các ngôn ngữ và các công nghệ như: ReactJS, PHP, VueJS,..
- Chia sẽ kiến thức lập trình nói chung và lập trình web nói riêng.
- Làm giàu bằng chính niềm đam mê của mình. Giúp chúng ta sống có một cuộc đời có ý nghĩa.
Trên đây là các ngôn ngữ, công nghệ và các công cụ mà mình được học và làm việc với chúng trong quá trình làm web.
PROJECT & INTERESTS
PROJECT OF ME
- Building website Vingologo này cho khách hàng.
- Building shopping cart bằng NodeJS, Express và MongoDB [mình chưa deploy lên heroku các bạn thông cảm nha, Project mình làm sau khi học NodeJS].
- Building books-librarys bằng NodeJS, Express và MongoDB [Project mà mình làm sau khi học NodeJS].
- Building landing page VyTea cho khách hàng.
- Viết Tech Blog kể từ tháng 11/2019 //www.thanhlongdev.tk/
INTEREST OF ME
Ngoài công việc lập trình, viết blog và học lập trình. Thì mình còn có những sở thích như: đá bóng và chới FO4, tuy đá không được hay nhưng luôn đá hết mình :]]. Và đặc biệt mình có một đam mê khác là chế cháo. Mình hay chế lao bluetooh và dự định sắp tới là sẽ chế xe ô tô điện nhưng chưa có điều kiện.
© 2016-2019 - Bản quyền thuộc về thanhlongcv
Và đây là kết quả khi chưa css: Nhìn tù thật đúng không ạ. Bởi vì đây là html mà nó chỉ tạo cho chúng ta cái khung sườn, giờ muốn đẹp chúng ta phải css cho nó là đẹp hết.
Nhìn tù thật đúng không ạ. Bởi vì đây là html mà nó chỉ tạo cho chúng ta cái khung sườn, giờ muốn đẹp chúng ta phải css cho nó là đẹp hết.
Code CSS
Bây giờ chúng ta muốn trang page của mình đẹp hơn thì chúng ta phải css cho nó nha. Chia layout mình sử dụng float. Thanh nav bên trái mình sử dụng thuộc tính position:fixed để khi mình scroll nó vẫn không di chuyển. Phần content bên phải mình cũng sẽ sử dụng float:right để chia layout.
Chia
layout mình sử dụng float. Thanh nav bên trái mình sử dụng thuộc tính position:fixed để khi mình scroll nó vẫn không di chuyển.
Phần content bên phải mình cũng sẽ sử dụng float:right để chia layout.
Khi chúng ta sử dụng float:right hoặc left thì phần tử sẽ sang trái hoặc phải. Thế nhưng một vấn đề xảy ra đó là nav và content nó sẽ bao bọc chung bởi một container, chớ nó không bọc riêng từng thằng. Nên khi chúng ta sử dụng margin hay padding nhìn nó rất là củ chuối. Vì thế nên chúng ta sẽ tạo một div rổng với class="clear". Với thuộc tính .clear{clear:both}. Để tạo một điểm kết thúc cho float.
Vì thế nên chúng
ta sẽ tạo một div rổng với class="clear". Với thuộc tính .clear{clear:both}. Để tạo một điểm kết thúc cho float.
/* Nav */
nav{
background: #f1df11;
padding: 5rem 0;
left: 0;
top: 0;
z-index: 9999;
position: fixed;
height: 100%;
width: 20%;
text-align: center;
justify-content: center;
display: flex;
flex-direction: column;
}
/* content */
.wrapper{
width: 80%;
float: right;
height: 100%;
}
Và đây là kết quả khi mình chia xong layout: Thứ nhất các bạn sẽ nghĩ trong đầu là tại sao chiều cao của thằng nav nó lại không cao hết trang page mà chỉ một phần trên thôi. Thì mình cũng xin giải thích là khi chúng ta sử dụng position:fixed thì các nav nó sẽ không di chuyển mà đứng yên một chỗ mặc cho phần content nó scroll.Thành ra khi mình chụp toàn bộ trang page thì nav nó chỉ hiển thị chiều cao một phần ở trên thôi. Thế là chúng ta đã chia layout xong. Bây giờ thì mình sẽ style css cho các ảnh và các phần trong content một cách ổn nhất.full code CSS
Thứ nhất các bạn sẽ nghĩ trong đầu là tại sao chiều cao của thằng nav nó lại không cao hết trang page mà chỉ một phần trên thôi.
Thì mình cũng xin giải thích là khi chúng ta sử dụng position:fixed thì các nav nó sẽ không di chuyển mà đứng yên một chỗ mặc cho phần content nó scroll.Thành ra khi mình chụp toàn bộ trang page thì nav nó chỉ hiển thị chiều cao một phần ở trên thôi.
Thế là chúng ta đã chia layout xong. Bây giờ thì mình sẽ style css cho các ảnh và các phần trong content một cách ổn nhất.
full code CSS
*{
box-sizing: border-box;
margin:0;
padding:0;
}
body{
font-family: 'Muli', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}
li,ol{
list-style: none;
}
/* header */
nav{
background: #f1df11;
padding: 5rem 0;
left: 0;
top: 0;
z-index: 9999;
position: fixed;
height: 100%;
width: 20%;
text-align: center;
justify-content: center;
display: flex;
flex-direction: column;
}
nav .logo img{
margin: auto auto 0;
padding: 1rem;
width: 70%;
border-radius: 50%;
}
.header-content ul{
width: 100%;
flex-direction: column;
}
.header-content ul li a{
color: #43433e;
display: block;
padding: .5rem 1rem;
text-decoration: none;
text-transform: uppercase;
font-weight: 800;
letter-spacing: 0.05rem;
}
.header-content ul li a:hover{
color: #9c9797;
}
/* wrapper */
.wrapper{
width: 80%;
float: right;
height: 100%;
}
.wrapper #about-me{
padding: 3rem;
border-bottom: 1px solid rgba[0,0,0,.1];
}
.wrapper #about-me .about-content h2{
font-size: 6rem;
line-height: 5.5rem;
font-weight: 700;
text-transform: uppercase;
color: #343a40;
margin-bottom: 1rem;
}
.text-primary{
color: #f1df11;
}
.text-primary:hover{
color: #fe0000;
}
.wrapper #about-me .about-content .about-content-p{
font-size: 1.15rem;
font-weight: 400;
color: #34495e;
}
.wrapper #about-me .about-content .sub-about .about-content-p{
font-size: 1.1rem;
font-weight: 400;
margin-bottom: 3rem;
}
.wrapper #about-me .about-content .about-content-p-from{
text-transform: uppercase;
font-weight: 500;
font-size: 1.5rem;
margin-bottom: 3rem;
color: #343a40;
}
.wrapper #about-me .about-content .about-content-p-from a{
color: #f1df11;
text-decoration: none;
}
.wrapper #about-me .about-content .about-content-p-from a:hover{
text-decoration: underline;
color: #fe0000;
}
.about-exp .about-content-p:first-child{
margin-bottom: 1rem;
}
.about-exp .about-content-p{
margin-bottom: 3rem;
}
.about-exp .about-content-p a{
color: #f1df11;
text-decoration: none;
}
.about-exp .about-content-p a:hover{
text-decoration: underline;
color: #fe0000;
}
#about-me .social-contact {
margin-bottom: 4rem;
}
#about-me .social-contact a{
text-decoration: none;
font-size: 4rem;
margin-left: 0.5rem;
}
#skills-me, #project-interest{
padding: 3rem;
border-bottom: 1px solid rgba[0,0,0,.1];
}
#skills-me h2{
font-weight: 700;
text-transform: uppercase;
color: #343a40;
margin-bottom: 3rem;
font-size: 3rem;
}
#skills-me .sub-icon{
text-transform: uppercase;
font-weight: 500;
font-size: 1.5rem;
margin-bottom: 1rem;
color: #343a40;
}
#skills-me .skill-icon{
margin-bottom:2rem;
}
#skills-me .skill-icon ul .icon-content-skill{
display: flex;
}
#skills-me .skill-icon ul .icon-content-skill li{
margin-right: 3.5rem;
font-size: 3rem;
}
#skills-me .skill-icon ul .icon-content-skill li i:hover{
color: #f8c80a;
}
#skills-me .content-skills h3{
text-transform: uppercase;
font-weight: 500;
font-size: 1.5rem;
margin-bottom: 1rem;
color: #343a40;
}
#skills-me .content-skills ul p{
font-size: 1.5rem;
margin-bottom: 1rem;
color: #343a40;
font-weight: 500;
}
#skills-me .content-skills ul li{
font-size: 1.1rem;
line-height: 2;
color: #343a40;
font-weight: 500;
}
#project-interest h2{
font-weight: 700;
text-transform: uppercase;
color: #343a40;
margin-bottom: 3rem;
font-size: 3rem;
}
#project-interest .interest h3, .project h3{
color: #343a40;
font-size: 1.5rem;
margin-bottom: 0.8rem;
}
#project-interest .project .content-project ul{
margin-left: 1.5em;
margin-bottom: 3rem;
}
#project-interest .project .content-project ul li{
position: relative;
line-height: 1.8;
color: #343a40;
}
#project-interest .project .content-project ul li a{
text-decoration: none;
color: #f1df11;
font-style: italic;
}
#project-interest .project .content-project ul li a:hover{
text-decoration: underline;
color: #fe0000;
}
#project-interest .project .content-project ul li i{
color: #f1df11;
left: -2em;
width: 2em;
position: absolute;
text-align: center;
line-height: inherit;
}
#project-interest .interest .content-interest p{
line-height: 1.5;
color: #343a40;
}
#project-interest .interest .content-interest .img-interest{
display: flex;
}
#project-interest .interest .content-interest .img-interest .picture-interest {
width: 100%;
overflow: hidden;
}
#project-interest .interest .content-interest .img-interest .picture-interest img{
width: 98%;
margin-top:1rem;
transition: all .3s linear;
}
#project-interest .interest .content-interest .img-interest .picture-interest img:hover{
transform: scale[1.2];
}
/* footer */
.copyright{
background: #fff;
}
.copyright .copyright-p{
margin: 0.75rem auto;
font-family: Proxima Nova;
font-size: 12px;
line-height: 13px;
text-align: center;
color: #282364;
}
.header-content ul li .active {
color: #fff;
}
.clear { clear: both }
Và đây là kết quả khi chúng ta đã CSS cho giao diện desktop: Nhìn cũng ok rồi đúng không mọi người.
Nhìn cũng ok rồi đúng không mọi người.
Code Javascript
Bây giờ mình muốn là khi mình scroll đến phần nào thì cái thằng thẻ a[href='#'] sẽ được thay đổi color font chữ. Thì muốn làm được như vậy thì mình sẽ sử dụng scrollspy. Trong đây thì mình sẽ code phần scrollspy bằng vanilla js. Chúng ta sẽ đặt tên cho mỗi phần trong content một class="section"
Trong đây thì mình sẽ code phần scrollspy bằng vanilla js. Chúng ta sẽ đặt tên cho mỗi phần trong content một class="section"
var section = document.querySelectorAll[".section"];
var sections = {};
console.log[sections];
var i = 0;
// Lặp qua tất cả nội dung có trong class="section" mà nó bao bọc tất cả nội dung trên
Array.prototype.forEach.call[section, function[e] {
sections[e.id] = e.offsetTop;
//nó sẽ lấy giá trị mà mình scroll phần tử với mà mình chọn so với khoảng cách phần tử cha và gán cho id có trong class="section"
}];
Các bạn thử console.log[sections] thì các bạn sẽ biết độ cao của id="about-me",...
window.onscroll = function[] {
var scrollPosition = document.documentElement.scrollTop || document.body.scrollTop;
for [i in sections] {
// Nếu mà giá trị section
.........
.........
Chủ Đề