Advanced css styling 1 WordPress, Bootstrap and HTML

안녕하세요 여러분,이 비디오에 오신 것을 환영합니다 www

system22net 및 https://great-webdesigncom의 Jamie입니다 디자인 커뮤니케이션이 비디오에서 우리는 약간의 고급 CSS 스타일링을 할 것입니다 내가 고급 CSS 스타일링이라고 할 때 메뉴 효과가 발생했을 때보 다 조금 더 움직일 것입니다

그 집 태그를 아래에서 본다 네가 실제로 국경을 가졌어 왼쪽에서 쓸어 버릴 정도의 움직임이있어 오른쪽으로 그리고 이것들은 꽤 많은 CSS가 포함 된 큰 효과들입니다 이 글을 쓰지 만 오늘은 쉬울 것입니다

hover CSS라고 불리는 사이트에서 환상적인 효과를 얻었습니다 우리는 꽤 많이 복사하여 우리의 필요에 맞게 사용자 정의 할 수 있습니다 CSS를 많이 쓰고 싶습니다 사용하고 싶은 것은 제가 밑줄 친 것입니다 왼쪽과 현재의 비디오에서 우리는이 드롭 다운을 할 것입니다

여기에 메뉴도 있습니다하지만 오늘은이 영화에 밑줄을 긋고 있습니다 우리 메뉴 항목은 여기에 노래에 대한이 비디오 아래에이 링크를 넣을거야 CSS를 가져 가면 그냥 다운로드 할 수 있습니다 사용하고 싶다면 다운로드 할 수 있습니다

상용 프로젝트에서이 라이선스를 여기에서보고 싶다면 14 달러입니다 한 프로젝트에 대해서는 알지만 무제한 프로젝트에 대해서는 겨우 18 달러입니다 그게 내가 갈 거고 돈 많이 들릴지도 모르지만 그게 다야 이 일을 할 수 있도록 코드를 작성하는 데 너무 많은 시간을 절약 할 수 있습니다 그것을 다운로드 받으십시오

github에서 다운로드하십시오 복제본 또는 다운로드 버튼 누르기 download zip '을 다운로드하면 다운로드가 끝납니다 여기에 master zip을 가져 가면 압축을 풀어서이 파일을 여기에 남겨 둘 것입니다 그리고 나는 CSS에 관심이 있습니다 덜 CSS가 아니기 때문에 CSS를 열면됩니다

내 브래킷 소프트웨어와 함께 호버 계단식 스타일 시트이 브래킷 소프트웨어 또한 무료 소프트웨어입니다이 텍스트 편집기의 링크를 아래에두고 여기에 우리의 공중 선회 CSS CSS가 있습니다 우리가 거기에서 원한다라고 표제를 붙이게되면서, 그것이 바로 왼쪽에 밑줄을 긋는다라는 것이다 내가 할 일은 그곳에서부터 그 직전까지 복사 할거야 다음 ctrl C 이제 다른 테마로 이동합니다

내가보고있는 것은 이미있다 이것이 우리가 메뉴에 영향을 줄 수있는 것이다 이 3 번째 메뉴는 여기에 3 개 있습니다 테마로 이동하면 메뉴에 대한 CSS를 조정해야 할 수도 있습니다 대시 보드 테마 테마 옵션 아래로 스크롤하면 맞춤 CSS 탭이 아래로 스크롤됩니다

적당한 장소 나는 메뉴 3을 여기 어딘가에 가지고 있어야한다 그래서 그것은 그렇다 저기서 나는 공중 선회를 할거야 제목이 있지만 어쨌든 다른 제목을 붙이겠습니다 왜냐하면 우리는 나중에 그것을 더 추가 할 것이고, 우리는 우리가 여기에 우리의 괄호에서 복사 한 지금은 Divi 테마로 작업하고 있습니다

더 낫고 나아지고있는 굉장한 WordPress 주제이다 당신은 단지 그것을 계속 유지합니다 나는 믿을 수없는 많은 프로젝트에서 그것을 사용했습니다 하지만 이것은 실제로 모든 WordPress 테마 또는 그 밖의 모든 것에 작동합니다 순수한 CSS이기 때문에 부트 스트랩 또는 순수 HTML 만 사용하면됩니다

여기에 어떤 영향을 주길 원하는지 클래스를 지정하십시오 여기에 점 호버 왼쪽부터 밑줄을 긋고 그걸 복사 할거야 다른 WordPress 테마에서 사용하는 경우에는 자식 테마 일반적으로 당신이 원하는 많은 주제들을 사용자 정의한다면 테마를 업데이트 할 때 덮어 쓸 수 있으므로 하위 테마를 만듭니다 귀하의 사용자 정의 CSS를하지만 Divi는 여기에 많은 것들이 있습니다 귀하의 사용자 정의 CSS에 대한 그래서 여기에 내가봤을 때 그것을 업데이 트 덮어 쓰지 않을거야 저기에 내가 갈거야

지금이 메뉴 항목들에 대해서 나는 그에게 내가 말하는 수업을 줄 필요가있다 왼쪽 도킹 호버에서 점 호버 밑줄이있는 곳 왼쪽부터 밑줄을 긋고 복사했습니다 우리 메뉴에 가보겠습니다 외관 주제 및 메뉴 메뉴 3 바로 지금 바로 거기에 있어요 CSS를보아야하는 메뉴 항목을 열면 클래스를 제공해야합니다

수업이 거기에 나타나지 않는다면 거기에 가끔 숨어 있지는 않습니다 오른쪽 상단의 화면 옵션에서 표시하려는 상자를 확인할 수 있습니다 CSS 클래스를 만들면 참조하십시오 이 작은 상자를 거기에 넣을 것을 확인 했으니 까 내가 그냥 거기에 붙여 넣은거야 그냥 다른 모든 사람들에게 그것을 할 편리합니다

네가 원하는대로 내가 이미 여기에 그들을 붙여 넣은 것 같아 왼쪽에서 밑줄을 그 으세요하지만 그럴 필요는 없습니다 작은 문을 두지 마십시오 그것의 앞에 당신은 단지 hvr을 필요로하고 당신이 원하는 모든 메뉴 항목들에 그것을하기 위해 우리는 가서 메뉴를 저장하고 우리 사이트로 돌아가서 새로 고침을 해봅시다

잘만되면 우리가 이것들 위에 마우스를 가져갈 때 작은 줄이 저 밑에있다 나는 그것을 더러움을 볼 수 있도록 하얗게 만들 것이지만 실제로 거기에서 일하고있다 어느 정도 그것은 내가 원하는 것을하고 있지만 내가 원하는 것을하지는 않습니다 그래서 저는 이 메뉴 항목을 여기 조정해야 할거야 그래서 돌아 가자

우리의 색을 바꾼다 큰 색으로 여기에 배경이있다 color 나는 그저 흰색으로 만들어서 좀 더 쉽게 볼 수있다 FFF FFF FFF 6s라는 것을 알고있는 사람들을 위해,하지만 6 명이 동일한 것은 당신입니다 우리는 그것을 다시 사이트에 저장 한 것을 변경하기 만하면된다

우리가 어디에서 흰색인지 볼 수있는 곳을 좀 더 쉽게 볼 수있게해야합니다 밑에 선은 잘 했어 약속 한대로 끝났지 만 그건 내가 아니야 내가 그 라인을 조금 더 가까이에서 더 가깝게하고 싶다 그리고 나는 정말로 그것을 원한다

저기있는 아이템 중 하나 길이 그래서 우리는 약간의 관습을해야 할거야 CSS Inge는 우리가 여기서해야 할 일을 보자 나는 정말로 그것을 원하지 않았다 이전 비디오를 구독하려면 플러그인을 사용하여 빌드하는 방법을 만들었습니다 거기 당신의 전자 우편 명부는 튀어 나오고있다 여기 우리가 간다

우리가 원하는 것은이 패딩을 바꿔 보자 20 픽스 꼭대기 내가 그걸 중요하게 남겨 둘 거라고 생각해 아마 필요할거야 0은 오른쪽 아래쪽 20 픽셀을 선택하고 0은 왼쪽을 선택합니다 맨 위 쪽에선 그 선들이 조금 더 가깝게 보인다

이제 그냥 복사해서 그냥 여분의 패딩을 없애고 싶다고 생각합니다 거기서 이것을 복사하여 우리의 스타일 시트에 넣을 것입니다 우리 테마 옵션은 여기에 넣을거야 나는 그것을 공중에 올려 놓을거야 그것은 그 종류에 영향을 미치고 우리의 사이트로 빨리 되돌아갑니다

그밖에 예, 당신이 그것을 본다면 오래 걸릴 것입니다 실제 목록 항목 종류가 길어서 내가 그걸 여백으로 바꾼다면 조금 여유가 있을지도 모르지만 오른쪽 여백이 있습니다 너무 길지만 아직 다음 줄로 밀어 넣었 어 그것을 너무 조금 밀어 냈다 당분간은 괜찮아요

패딩을 바로 덧붙여서 패딩이 없다 당신 좋아요 베티는 그 선이 광범위하다는 것을 보았습니다 내가 정말로 원했던 단어의 길이 보자

나는 그걸 조금 더 꺼낼 수 있다고 생각해 보자 패딩 멀리 그래서 그것을 파업하자 12 너무 많이 싫어 11 괜찮아요 작동합니다 이제 이것을 가져 와서 사용자 지정 CSS로 다시 복사 해 보겠습니다 그 마지막 엔트리와 빠른 저장을해라 이제 우리가해야 할 일을 보자

좀 더 대칭으로 만들면 그 간격을 좀 더 짧게 만들어서 아마 실제로 앵커 태그에 실제 목록 항목의 패딩을 변경하십시오 저기 저기 작은 녹색 부분이 보입니다 29 살이 며 20 살이되자 거기서 피부가 무엇을하는지 보자 그것을 조금 더 떨어 뜨릴 필요가있다

바로 아래에 나타나는 우리의 작은 선이 훨씬 더 효과적입니다 나는 거기에서 원했기 때문에이 말은 필요 없다고 말하지만, 어쨌든 우리의 커스텀 CSS로 돌아가서 전체적으로 많은 것을 가져 가라 마지막 항목 바로 아래에있는 단어이며 랩이라는 단어가 필요하지 않습니다 변경 사항을 저장하지 않고 변경하지 않았습니다 검사원을 닫고 새로 고침을 해보시겠습니까? 우리는 거기에 갈 좋아, 그렇게 할게 우리 메뉴에 대한 우리의 고급 CSS에서 우리의 첫 번째 부분이야

여기 Divi 테마에서 다음 비디오에서 우리는 하위 메뉴 드롭을 할 것입니다 아래처럼 이미지를 백그라운드에서 이렇게 꾸며보세요 그 바닥에 대한 그 상승 효과와 마찬가지로 거기에서 당신은 그것을 가지고 있습니다 내가 사용하고있는 메뉴 항목에 고급 CSS 전환을 추가하는 방법입니다 Divi 테마는 여기에 있지만 이것은 모든 WordPress 테마 또는 실제로 사용할 수 있습니다

부트 스트랩 또는 HTML 테마를 계단식 스타일 시트를 사용하여 다시 한 번 더 많은 정보를 원하시면 채널에 가입 해 주셔서 감사합니다 위대한 조언과 업데이트가 시스템 22의 Jamie와 웹 디자인 통신 감사를위한 좋은 하루 되세요