웹 반응형 디자인의 예(미디어 쿼리 없음)
(0)전에 쓴 글
Zhihu에서 본 기사에 나온 사건을 이야기하니 마음이 열리고 너무 감탄해서 다음날 원본 기사를 찾아 칭찬했습니다
5위안 , 원래 주소, 케이스는 CSS3 속성을 많이 사용합니다.
(1) 효과 시연
(2) 지식 포인트 및 효과
<div class="trunc-list-wrapper" id="mylist">
<ul class="trunc-list">
<li>
<a href="#">Home</a>
</li>
...
<li aria-hidden="true" class="control control--open">
<a href="#mylist"><span>more</span></a>
</li>
<li aria-hidden="true" class="control control--close">
<a href=""><span>less</span></a>
</li>
</ul>
</div>
.trunc-list-wrapper {height: 2.25em;overflow: hidden;padding-right: 3.5em;
}.trunc-list {
display: flex;flex-wrap: wrap;position: relative;
}.trunc-list li {
flex: 1 0 auto;
}.control {position: absolute;top: 0;right: -3.5em;width: 3.5em;height: calc((2.25em - 100%) * -1000);max-height: 2.25em;overflow: hidden;
}.control--close {display: none;
}
위는 간단한 코드입니다
display: flex; 목록은 플렉스 항목이 됩니다
flex-wrap: Wrap; 너비가 충분하지 않으면 내부 요소가 래핑되므로 브라우저 창의 크기가 특정 너비로 조정되면 .trunc-list의 높이가 변경됩니다
.
.trunc-list-wrapper의 height: 2.25em;overflow: hide; 로 인해
요소가 숨겨지기 때문에 확대된 요소를 볼 수 없습니다.
trunc-list의 높이 변경으로 인해 height: calc((2.25em - 100%) * -1000);가 적용되며, 더 많은 내용을 볼 수 있습니다.
max-height: 2.25em;
더보기를 클릭하세요.
#myList가 유효한 스트로크 포인트이므로 다음 CSS가 적용됩니다
.trunc-list-wrapper:target .control--open { display: none;
}.trunc-list-wrapper:target .control--close { display: block;
}
동시에 다음 CSS가 적용됩니다
.trunc-list-wrapper:target { height: auto;
}숨겨진 요소를 볼 수 있습니다
덜 클릭하면 유효하지 않기 때문에 앵커 포인트는 위 효과의 클리어링을 기준으로 합니다.
4. 전체 코드
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>响应式的另一种思考</title><style>/* Basic common settings: */* { box-sizing: border-box;}html { line-height: 1.25; font-family: 'Lato', sans-serif;}.trunc-list-wrapper { height: 2.25em; overflow: hidden; padding-right: 3.5em;}.trunc-list { list-style: none; display: flex; flex-wrap: wrap; margin: 0; padding: 0; position: relative;}.trunc-list li { margin: 0; padding: 0; flex: 1 0 auto;}.trunc-list a { display: block; padding: 0.5em; text-align: center; white-space: nowrap;
color: #fff; background:red;}.trunc-list a:hover,
.trunc-list a:active,
.trunc-list a:focus { background: red; }.control { position: absolute; top: 0; right: -3.5em; width: 3.5em;
height: calc((2.25em - 100%) * -1000); max-height: 2.25em;
overflow: hidden;}.control a { text-decoration: none;}.control span { font-size: 0.75em; font-style: italic;}.control--close { display: none;}.trunc-list-wrapper:target { height: auto;}.trunc-list-wrapper:target .control--open { display: none;}.trunc-list-wrapper:target .control--close { display: block;}</style></head><body><div class="trunc-list-wrapper" id="mylist"> <ul class="trunc-list"><li> <a href="#">Home</a></li><li> <a href="#">Blog</a></li><li> <a href="#">About Us</a></li><li> <a href="#">Contact Us</a></li><li> <a href="#">Help</a></li><li> <a href="#">Login</a></li><li> <a href="#">Sign In</a></li><li aria-hidden="true" class="control control--open"> <a href="#mylist"><span>more</span></a></li><li aria-hidden="true" class="control control--close"> <a href=""><span>less</span></a></li> </ul></div><p>改变视口宽度大小来观察效果</p></body></html>
위 내용은 웹 반응형 디자인의 예(미디어 쿼리 없음)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7710
15
1640
14
1394
52
1288
25
1232
29
ZTE 5G 휴대용 Wi-Fi U50S는 초기 가격 NT$899에 판매됩니다: 최대 네트워크 속도 500Mbps
Apr 26, 2024 pm 03:46 PM
4월 26일 뉴스에 따르면 ZTE의 5G 휴대용 Wi-Fi U50S는 현재 899위안부터 공식 판매되고 있습니다. 외관 디자인 측면에서 ZTE U50S 휴대용 Wi-Fi는 심플하고 스타일리시하며 쥐기 쉽고 포장이 쉽습니다. 크기는 159/73/18mm로 휴대가 간편해 언제 어디서나 5G 고속 네트워크를 즐길 수 있어 방해받지 않는 모바일 오피스와 엔터테인먼트 경험을 선사합니다. ZTE 5G 휴대용 Wi-Fi U50S는 최대 1800Mbps의 속도로 고급 Wi-Fi 6 프로토콜을 지원합니다. Snapdragon X55 고성능 5G 플랫폼을 사용하여 사용자에게 매우 빠른 네트워크 경험을 제공합니다. 5G 듀얼 모드 SA+NSA 네트워크 환경과 Sub-6GHz 주파수 대역을 지원할 뿐만 아니라 측정된 네트워크 속도도 놀라운 500Mbps에 도달해 쉽게 만족할 수 있습니다.
12306 항공권 구매 내역 확인 방법 항공권 구매 내역 확인 방법
Mar 28, 2024 pm 03:11 PM
12306 티켓 예매 앱의 최신 버전을 다운로드하세요. 모두가 매우 만족하는 여행 티켓 구매 소프트웨어입니다. 소프트웨어에서 제공되는 다양한 티켓 소스가 있어 매우 편리합니다. - 실명인증으로 온라인 구매가 가능합니다. 모든 사용자가 쉽게 여행티켓과 항공권을 구매하고 다양한 할인 혜택을 누릴 수 있습니다. 또한 사전에 예약하고 티켓을 얻을 수도 있습니다. 호텔을 예약하거나 차량으로 픽업 및 하차할 수도 있습니다. 한 번의 클릭으로 원하는 곳으로 이동하고 티켓을 구매할 수 있어 여행이 더욱 간편해지고 편리해집니다. 모든 사람의 여행 경험이 더욱 편안해졌습니다. 이제 편집자가 온라인으로 자세히 설명합니다. 12306명의 사용자에게 과거 티켓 구매 기록을 볼 수 있는 방법을 제공합니다. 1. 철도 12306을 열고 오른쪽 하단의 My를 클릭한 후 My Order를 클릭합니다. 2. 주문 페이지에서 Paid를 클릭합니다. 3. 유료페이지에서
레트로 트렌드! HMD와 하이네켄, 투명 쉘 디자인 플립폰 공동 출시
Apr 17, 2024 pm 06:50 PM
17일 뉴스에 따르면 HMD는 유명 맥주 브랜드 하이네켄, 크리에이티브 기업 보데가와 손잡고 독특한 폴더폰 '보링폰(The Boring Phone)'을 출시했다. 이 전화기는 디자인 혁신으로 가득 차 있을 뿐만 아니라 기능면에서도 자연으로 돌아가 사람들을 진정한 대인 관계로 돌아가게 하고 친구들과 함께 술을 마시는 순수한 시간을 즐기는 것을 목표로 합니다. Boring 휴대폰은 독특한 투명 플립 디자인을 채택하여 단순하면서도 우아한 미학을 보여줍니다. 내부에는 2.8인치 QVGA 디스플레이, 외부에는 1.77인치 디스플레이가 탑재되어 사용자에게 기본적인 시각적 상호 작용 경험을 제공합니다. 사진의 경우 3000만 화소 카메라만 탑재되어 있지만 간단한 일상 업무를 처리하기에는 충분하다.
Xuexin.com에서 학업 자격을 확인하는 방법
Mar 28, 2024 pm 04:31 PM
Xuexin.com에서 내 학업 자격을 어떻게 확인하나요? Xuexin.com에서 학업 자격을 확인할 수 있습니다. 많은 사용자가 Xuexin.com에서 학업 자격을 확인하는 방법을 모릅니다. 다음으로 편집자는 Xuexin.com에서 학업 자격을 확인하는 방법에 대한 그래픽 튜토리얼을 제공합니다. 유저들이 와서 구경해 보세요! Xuexin.com 사용 튜토리얼: Xuexin.com에서 학업 자격을 확인하는 방법 1. Xuexin.com 입구: https://www.chsi.com.cn/ 2. 웹사이트 쿼리: 1단계: Xuexin.com 주소를 클릭합니다. 위의 홈페이지에 들어가려면 [교육 쿼리]를 클릭합니다. 2단계: 최신 웹페이지에서 아래 그림의 화살표와 같이 [쿼리]를 클릭합니다. 3단계: 새 페이지에서 [학점 파일에 로그인]을 클릭합니다. 4단계: 로그인 페이지에서 정보를 입력하고 [로그인]을 클릭합니다.
Honor Magic V3, AI 디포커스 눈 보호 기술 출시: 근시 발병을 효과적으로 완화
Jul 18, 2024 am 09:27 AM
7월 12일 뉴스에 따르면, 새로운 Honor Vision Soothing Oasis 눈 보호 화면을 탑재한 Honor Magic V3 시리즈가 오늘 공식 출시되었습니다. 화면 자체는 높은 사양과 품질을 갖추고 있으면서도 AI 능동형 눈 보호 장치 도입을 개척했습니다. 기술. 근시를 완화하는 전통적인 방법은 근시 안경의 도수가 고르게 분포되어 있어 중심 시력 영역은 망막에 맺히지만 주변 영역은 망막 뒤에 맺히는 것으로 알려져 있습니다. 망막은 상이 뒤쳐져 있음을 감지하여 눈의 축방향 성장을 촉진시켜 정도를 심화시킵니다. 현재 근시 발생을 완화시키는 주요 방법 중 하나가 '디포커스 렌즈'다. 중심 영역은 정상적인 도수를 갖고, 주변 영역은 광학 설계 파티션을 통해 조절해 주변 영역의 상이 안으로 들어가게 한다. 망막 앞.
Teclast M50 Mini 태블릿 출시: 8.7인치 IPS 화면, 5000mAh 배터리
Apr 04, 2024 am 08:31 AM
4월 3일 뉴스에 따르면 Taipower가 곧 출시할 M50 Mini 태블릿 컴퓨터는 풍부한 기능과 강력한 성능을 갖춘 장치입니다. 이 새로운 8인치 소형 태블릿에는 8.7인치 IPS 화면이 탑재되어 사용자에게 뛰어난 시각적 경험을 제공합니다. 메탈 바디 디자인은 아름다울 뿐만 아니라 기기의 내구성도 높여줍니다. 성능 측면에서 M50Mini에는 A75 코어 2개와 A55 코어 6개를 갖춘 Unisoc T606 8코어 프로세서가 탑재되어 원활하고 효율적인 실행 환경을 보장합니다. 동시에 태블릿에는 6GB+128GB 스토리지 솔루션이 탑재되어 있으며 8GB 메모리 확장을 지원하여 스토리지 및 멀티태스킹에 대한 사용자 요구 사항을 충족합니다. 배터리 수명 측면에서 M50Mini는 5000mAh 배터리가 장착되어 있으며 Ty를 지원합니다.
PPT 마지막 페이지를 매력적으로 디자인하는 방법
Mar 20, 2024 pm 12:30 PM
직장에서 ppt는 전문가들이 자주 사용하는 사무용 소프트웨어입니다. 완전한 ppt는 좋은 마무리 페이지를 가지고 있어야 합니다. 전문적인 요구 사항이 다르면 PPT 제작 특성도 달라집니다. 엔드페이지 제작에 있어서 어떻게 하면 좀 더 매력적으로 디자인할 수 있을까요? PPT의 마지막 페이지를 디자인하는 방법을 살펴보겠습니다! ppt 끝 페이지의 디자인은 텍스트와 애니메이션 측면에서 조정할 수 있으며 필요에 따라 단순하거나 눈부신 스타일을 선택할 수 있습니다. 다음으로는 요구사항에 맞는 PPT 엔드페이지를 만들기 위해 혁신적인 표현방법을 활용하는 방법에 대해 집중적으로 살펴보겠습니다. 그럼 오늘의 튜토리얼을 시작하겠습니다. 1. 끝 페이지 제작에는 사진 속 어떤 텍스트라도 사용할 수 있습니다. 끝 페이지에서 중요한 점은 프레젠테이션이 끝났다는 의미입니다. 2. 이 단어들 외에도,
신호가 가장 강한 Vivo의 휴대폰! vivo X100s에는 범용 신호 증폭 시스템이 탑재되어 있습니다: 안테나 21개, 360° 서라운드 디자인
Jun 03, 2024 pm 08:41 PM
5월 13일 뉴스에 따르면 vivoX100s는 오늘 밤 공식적으로 출시되었으며 뛰어난 이미지 외에도 신호 성능도 매우 뛰어납니다. vivo의 공식 소개에 따르면 vivoX100s는 최대 21개의 안테나가 장착된 혁신적인 범용 신호 증폭 시스템을 사용합니다. 이 디자인은 5G, 4G, Wi-Fi, GPS, NFC 등 다양한 신호 요구 사항의 균형을 맞추기 위해 다이렉트 화면을 기반으로 다시 최적화되었습니다. 이로써 vivoX100s는 생체 역사상 가장 강력한 신호 수신 기능을 갖춘 휴대폰이 되었습니다. 새 휴대폰은 또한 안테나가 본체 주위에 분산된 독특한 360° 서라운드 디자인을 사용합니다. 이 디자인은 신호 강도를 향상시킬 뿐만 아니라 다양한 일상 자세를 최적화하여 부적절한 쥐기 방법으로 인해 발생하는 문제를 방지합니다.
