'CSS' 태그의 글 목록 (6 Page)

필 오프 스타일 단추 디자인

질문 필 오프 스타일의 html / css로 button을 만들었습니다.내 질문은 button 디자인과 일치하도록 삼각형의 테두리 반경을 어떻게 설정합니까? 개선에 대한 제안도 감사하겠습니다. 감사 .offer-button-wrapper .coupon { font-family: Montserrat; font-style: normal; font-weight: bold; font-size: 14px; line-height: 17px; text-align: center; letter-spacing: 0.51px; text-transform: uppercase; color: #2C9E25; text-decoration: none; position: relative; text-transform: capitaliz..

카테고리 없음 2020. 8. 7. 20:47

전체 사이트의 기본 텍스트 색상을 변경하는 방법

질문 프로그램에서 제공하는 템플릿을 사용하여 WYSIWYG 웹 사이트 빌더로 웹 사이트를 구축했습니다. 그 이후로 템플릿을 버리고 CSS를 사용하여 모든 스타일을 지정했지만 어떤 이유로 전체 사이트의 기본 텍스트 색상을 변경할 수 없습니다. CSS에서 본체 색상을 변경하면 기본 색상이 변경 될 것이라고 생각했습니다. body { font-family: Lato; font-size: 14px; line-height: 1.42857143; color: #ff9900; background-color: #750204; 그래서 색상을 변경하려고했습니다 : # ff9900에서 "b6b6b6"로 변경했지만 작동하지 않았습니다. 그런 다음 CSS 파일에서 ff9900의 모든 인스턴스를 b6b6b6으로 바꾸고 웹 사이트..

카테고리 없음 2020. 8. 7. 20:26

Bootstrap 4 확장형 카드 헤더에 간격 및 배치 문제와 회전 아이콘이 있습니다.

질문 확장 및 축소가 가능한 제목 / 본문 및 닫기 button이있는 부트스트랩 4 카드를 만드는 중입니다. 이 튜토리얼을 따르고 있습니다. 카드 접기 요령! 나는 예제를 좋아하지만 두 가지를하고 싶다. move expand icon to left of card-header add close button to right of card-header 이 jsfiddle에서 다음 두 가지를 시도했습니다. https://jsfiddle.net/s0ygr35L/1/ my attempt: Collapsible Group Item #1 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf..

카테고리 없음 2020. 8. 7. 20:10

HTML의 상위 컨테이너에서 두 개의 UL 목록을 두 개의 다른 항목으로 표시하는 방법은 무엇입니까?

질문 FlexBox의 부모 / 자식 (항목) 사이에 개념적으로 뭔가 빠진 것 같습니다. 다음과 같은 NavBar를 만들려고합니다. 원하는 출력 : Logo Home Store(class "leftbar") About Search Contact Button(class "rightbar") Home Documentation Examples Icons Themes Expo Blog v4.5 Download 내 시도한 해결책 : header { border: 1px solid #2d2d2d; display: flex; justify-content: space-evenly; align-items: center; }; 문제는 위의 CSS 코드에서 justify-content : space-evenly; 를 사용할 ..

카테고리 없음 2020. 8. 7. 17:03

배경 이미지를 투명하게 만들지 않는 방법

질문 그림에서 볼 수 있듯이 배경 이미지로 인해 텍스트를 읽을 수 없습니다. 이 문제를 해결하기 위해 Z- 색인을 사용할지 또는 다른 속성을 사용할지 잘 모르겠습니다. .about { background-image: url(https://images.pexels.com/photos/2059736/pexels-photo-2059736.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260); background-size: cover; display: flex; flex-wrap: wrap; text-align: center; } .aboutme { background-color: rgba(106, 106, 106, 0.783); box-shadow: 2px 2px 2px;..

카테고리 없음 2020. 8. 7. 16:43

Grid에서 div를 정렬하는 방법은 무엇입니까?

질문 cms를 쓰고 페이지에 뉴스를 표시하고 싶습니다. 맨 위에는 제목과 뉴스가 있습니다. 나는 행에 2 열만 표시하려고했습니다. 어디에서 오류를 범하는지 모르겠습니다. 누군가 나를 도와 주길 바랍니다. *{ margin:0; padding:0; } #all { background-color:silver; display:grid; grid-template-columns: 400px 400px; row-gap:10px; } #all p{ border:3px solid red; box-sizing:border-box; font-size:10px; } 답변1 .tog { display: grid; grid-template-columns: 200px 200px; /* the rest is just to help..

카테고리 없음 2020. 8. 7. 16:26

div의 width를 변경하는 JavaScript 함수로 인해 미디어 화면이 깨졌습니다.

질문 내 웹페이지가 시작될 때로드 될 때 div에서 "확대"효과를 시뮬레이션하는 JavaScript 함수를 성공적으로 만들었습니다. 이 기능은 미디어 화면의 스케일링을 깨뜨 렸습니다. 나는 그것이 왜 망가 졌는지 이해하지만 그것을 고치기 위해 어떻게 다시 포맷해야할지 잘 모르겠습니다. $(document).ready(function(){ $('#zoom-box').animate({ width:'600px', height:'250px', top:'0', left:'0', }, 500); }); width : 600px가 미디어 화면에 비해 너무 크다는 것을 알고 있습니다 ...하지만 이것을 재정의하는 방법을 잘 모르겠습니다. maxWidth를 시도했지만 작동하지 않았습니다. 답변1 문제가 해결되는지 확인하..

카테고리 없음 2020. 8. 7. 16:10

Top 메뉴를 중앙으로 만드는 방법

질문 저의 Top 메뉴를 중앙으로 만들려고합니다 보시다시피 패딩을 실험 해 보았지만 화면이 매번 정확히 같은 크기 인 경우에만 작동합니다. #topnav { background-color: #1a1919; overflow: hidden; font-weight: bold; padding-left: 150px; margin: 0px 160px; } #topnav a { float: left; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } #topnav a:hover { color: rgb(26, 131, 22); } #topnav a.active { background-color:..

카테고리 없음 2020. 8. 7. 15:55

부모 div를 완벽하게 커버하는 CSS div 태그

질문 4 개의 자식 div가 부모의 아래쪽 테두리를 완전히 덮는 아래쪽 테두리를 갖기를 원합니다. 이유는 상위 하단 경계가 "클릭되지 않은"의 개요이고 하위 div가 "클릭 된"탭의 컬러 하단 경계인 것입니다. 이 동작을 어떻게 수행 할 수 있습니까? https://codesandbox.io/s/react-slick-playground-d5f1c?file=/Navbar.js import React, { useState } from "react"; import Tab from "./Tab"; import { StyledTabs, NavbarOutline } from "./StyledNavbar"; const Navbar = ({ value, children, tabFilter, contentFilter }..

카테고리 없음 2020. 8. 7. 15:38

vuetify, flexbox 및 목록을 사용한 단어 배치

질문 v-list가있는 flexbox가 있습니다. 내 문제는 v-list에 래핑되지 않은 텍스트가 있다는 것입니다. 나는 다음을 본다 : 목록을 포함하는 부분이 너비가 제한되지 않고 커지므로 래핑되지 않습니다. https://codepen.io/james-hudson3010/pen/GRobYRo문제를보여줍니다. 자바스크립트 : new Vue({ el: '#app', vuetify: new Vuetify(), props: { source: String, }, data: () => ({ selectedItem: null, flattened: [ { 'name': 'item 3 title content', 'comment': 'this is a really long comment to see what will..

카테고리 없음 2020. 8. 7. 15:17

텍스트와 이미지가 겹치나요?

질문 여기에 이미지 설명 입력 a += ' ' + data.response.lst[i].display_Name + '' 텍스트와 이미지가 표시되는 dropdown을 만들었지 만 텍스트 길이가 최대 일 때 이미지 하단에 표시됩니다. 해결 방법은 무엇입니까? 답변1 div를 래핑하고 자식 요소를 분리합니다. display : flex로 부모 div 스타일을 지정했습니다. 플렉스 방향 : 행; flex-wrap : wrap; 하지만 display : inline-block; 을 사용하여 하위 요소를 할당하여 수행 할 수도 있습니다. a += ' ' + data.response.lst[i].display_Name + '' 출처 : https://stackoverflow.com/questions/63177004/..

카테고리 없음 2020. 8. 7. 14:57

`object-fit : cover`를 사용하는 Img는 여전히 부모의 높이를 증가시킵니다.

질문 가변 내용을 포함하는 component를 만들고 있습니다. 그래서 나는 img가 bg img처럼 반응하고 높이를 정의하는 대신 컨테이너의 높이를 취하고 싶습니다. add object-fit : cover 를 정의하더라도 img는 여전히 부모의 높이에 영향을 미칩니다. 텍스트가 img가 아닌 부모의 높이를 정의하기를 원합니다. 이미지가 wysiwyg 편집기를 통해 채워지고 업로드 된 이미지가로드되는 위치를 제어 할 수 없기 때문에 배경 이미지를 사용하지 않는 것이 좋습니다 (즉, img 여야 함). 당신의 도움을 주셔서 감사합니다. Codesandbox CODE: .container { display: flex; flex-direction: row; padding: 20px; background: l..

카테고리 없음 2020. 8. 7. 14:51

잡동사니

CSS → (73)건