Hướng dẫn các bạn có thể tự tạo cho mình 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. And used media query to reponsive for 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
Đà Nẵng - Việt Nam - thanhlonghk41@gmail.com
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
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.
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
Bây giờ chúng ta muốn trang 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 điều hướng bên trái mình sử dụng thuộc tính vị trí. fixed to when my scroll it is still not di chuyển
Phần nội dung bên phải mình cũng sẽ sử dụng float. right to chia layout
Khi chúng ta sử dụng float. right or left thì phần tử sẽ sang trái hoặc phải. Thế nhưng một vấn đề xảy ra đó là điều hướng và nội dung của nó sẽ được bọc chung bởi một thùng chứa, chứ nó không bọc riêng từng thằng. Nên khi chúng ta sử dụng lề hay phần đệm nhìn nó rất là chuối
Vì thế chúng ta sẽ tạo ra một div tròn với class="clear". Thuộc tính. Rõ ràng rõ ràng. cả hai}. To make a end of 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 bố cục xong
*{
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 h1{
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 máy tính để bàn
Bây giờ mình muốn là khi mình cuộn đến phần nào thì cái thằng thẻ a[href='#'] sẽ được đổi màu chữ chữ. Thì muốn làm được như vậy thì mình 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 nội dung 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ủ Đề