반응형 웹 바닥글 | 인도 데일리 뉴스 네트워크
13797 단어 cssopensourcehtmlshowdev
<h6><strong>Trending Search</strong></h6>
<ul>
<li><a href="https://indiadaily-news.blogspot.com/2022/09/iphone-14-can-now-be-delivered-to-you.html" rel="nofollow">IPhone 14 (30 mins) delivery</a></li>
<li><a href="https://indiadaily-news.blogspot.com/2022/09/flipkart-big-billion-days-sale-starts.html" rel="nofollow">Flipkart Big Billion Day Sale</a></li>
<li><a href="https://indiadaily-news.blogspot.com/search/label/Amazon%20Great%20Indian%20Festival" rel="nofollow">Amazon Great Indian Festival</a></li>
<li><a href="https://indiadaily-news.blogspot.com/search/label/West%20Bengal%20News" rel="nofollow">West Bengal News</a></li>
<li><a href="https://www.arcgis.com/apps/dashboards/bda7594740fd40299423467b48e9ecf6" rel="nofollow">COVID-19 LIVE</a></li>
</ul>
<h6><strong>Top Trends</strong></h6>
<ul>
<li><a href="https://analytics.icmr.org.in/public/dashboard/149a9c89-de6d-4779-9326-5e8fed3323b6" rel="nofollow">COVID-19 VACCINE TRACKER</a></li>
<li><a href="https://indiadaily-news.blogspot.com/search/label/Amazon%20India%20News" rel="nofollow">Amazon India News</a></li>
<li><a href="https://indiadaily-news.blogspot.com/search/label/Goa%20News" rel="nofollow">Goa News</a></li>
<li><a href="https://indiadaily-news.blogspot.com/search/label/iPhone%2014" rel="nofollow">iPhone 14 Launch</a></li>
</ul>
<h6><strong>Popular Categories</strong></h6>
<ul>
<li><a href="https://indiadaily-news.blogspot.com/search/label/India%20News" rel="nofollow">India News</a></li>
<li><a href="https://indiadaily-news.blogspot.com/search/label/Sports%20News" rel="nofollow">Sports News</a></li>
<li><a href="https://indiadaily-news.blogspot.com/search/label/World%20News" rel="nofollow">World News</a></li>
<li><a href="https://indiadaily-news.blogspot.com/search/label/City%20News" rel="nofollow">City News</a></li>
<li><a href="https://indiadaily-news.blogspot.com/search/label/Bollywood%20News" rel="nofollow">Bollywood News</a></li>
<li><a href="https://indiadaily-news.blogspot.com/search/label/Celebrity%20News" rel="nofollow">Celebrity News</a></li>
<li><a href="https://indiadaily-news.blogspot.com/search/label/AUTO%20NEWS" rel="nofollow">AUTO News</a></li>
<li><a href="https://indiadaily-news.blogspot.com/search/label/Education%20News" rel="nofollow">Education News</a></li>
<li><a href="https://indiadaily-news.blogspot.com/search/label/Bollywood%20Movies" rel="nofollow">Bollywood Movies</a></li>
<li><a href="https://indiadaily-news.blogspot.com/search/label/Technology" rel="nofollow">Technology</a></li>
<li><a href="https://indiadaily-news.blogspot.com/search/label/Celebs%20Saree%20Looks" rel="nofollow">Celebs Saree Look</a></li>
</ul>
<h6><strong>Trending Topics</strong></h6>
<ul>
<li><a href="https://indiadaily-news.blogspot.com/search/label/Janhvi%20Kapoor%20News" rel="nofollow">Janhvi Kapoor</a></li>
<li><a href="https://indiadaily-news.blogspot.com/search/label/Deepika%20Padukone%20News" rel="nofollow">Deepika Padukone</a></li>
<li><a href="https://indiadaily-news.blogspot.com/search/label/Rashmika%20Mandanna%20News" rel="nofollow">Rashmika Mandanna</a></li>
<li><a href="https://indiadaily-news.blogspot.com/search/label/Disha%20Patani%20News" rel="nofollow">Disha Patani</a></li>
<li><a href="https://indiadaily-news.blogspot.com/search/label/Mouni%20Roy%20News" rel="nofollow">Mouni Roy</a></li>
<li><a href="https://indiadaily-news.blogspot.com/search/label/Alia%20Bhatt%20News" rel="nofollow">Alia Bhatt</a></li>
<li><a href="https://indiadaily-news.blogspot.com/search/label/Urfi%20Javed%20News" rel="nofollow">Urfi Javed</a></li>
<li><a href="https://indiadaily-news.blogspot.com/search/label/Neha%20Sharma%20News" rel="nofollow">Neha Sharma</a></li>
<li><a href="https://indiadaily-news.blogspot.com/search/label/Nikki%20Tamboli%20News" rel="nofollow">Nikki Tamboli</a></li>
<li><a href="https://indiadaily-news.blogspot.com/search/label/Urvashi%20Rautela%20News" rel="nofollow">Urvashi Rautela</a></li>
<li><a href="https://indiadaily-news.blogspot.com/search/label/Karishma%20Sharma%20News" rel="nofollow">Karishma Sharma</a></li>
<li><a href="https://indiadaily-news.blogspot.com/search/label/Kiara%20Advani%20News" rel="nofollow">Kiara Advani</a></li>
<li><a href="https://indiadaily-news.blogspot.com/search/label/Shah%20Rukh%20Khan%20News" rel="nofollow">Shah Rukh Khan</a></li>
<li><a href="https://indiadaily-news.blogspot.com/search/label/Tamannaah%20Bhatia%20News" rel="nofollow">Tamannaah Bhatia</a></li>
<li><a href="https://indiadaily-news.blogspot.com/search/label/Gauri%20Khan%20News" rel="nofollow">Gauri Khan</a></li>
<li><a href="https://indiadaily-news.blogspot.com/search/label/Palak%20Tiwari%20News" rel="nofollow">Palak Tiwari</a></li>
</ul>
<h6><strong>Radio</strong></h6>
<ul>
<li><a href="https://www.ishq.com/" rel="nofollow">Ishq FM</a></li>
</ul>
<h6><strong>News & Entertainment</strong></h6>
<ul>
<li><a href="http://www.filmfare.com/" rel="nofollow"><strong>Filmfare</strong></a></li>
<li><a href="https://gaana.com/newrelease" rel="nofollow"><strong>Online Songs</strong></a></li>
<li><a href="https://www.zoomtventertainment.com/" rel="nofollow"><strong>Zoom</strong></a></li>
<li><a href="https://www.whatshot.in/" rel="nofollow"><strong>Whats Hot</strong></a></li>
<li><a href="https://indiadaily-news.blogspot.com/search/label/Entertainment" rel="nofollow"><strong>Entertainment</strong></a></li>
<li><a href="https://indiadaily-news.blogspot.com/search/label/Celeb%20Photoshoots" rel="nofollow"><strong>Celeb Photoshoots</strong></a></li>
</ul>
<h6><strong>Follow Us</strong></h6>
<ul>
<li>
<a href="https://twitter.com/IndiaDailyIN" title="Twitter">
<img alt="Follow us on Twitter" src="https://www.pngitem.com/pimgs/m/39-390507_transparent-follow-us-png-twitter-png-download.png">
</a>
</li>
</ul>
<p>© 2022 India Daily News Network and it's affiliates. All Rights Reserved. | <a href="https://indiadaily-news.blogspot.com/p/privacy-policy-india-daily-news-network.html" rel="nofollow">Privacy Policy</a> | <a href="https://indiadaily-news.blogspot.com/p/correction-policy.html" rel="nofollow">Correction Policy</a> | <a href="https://indiadaily-news.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=500" rel="nofollow">Sitemap</a> | <a href="https://developer-indiadaily.w3spaces.com/" rel="nofollow">Developer Logs</a> | <a href="https://linktr.ee/indiadaily" rel="nofollow">Source Code</a> | <a href="https://indiadaily-beta.blogspot.com/?utm_source=indiadaily-beta&utm_medium=auth-accounts&utm_campaign=beta-version" rel="nofollow">Beta Version</a></p>
<p><a href="http://classify-technologies.mailchimpsites.com/?utm_source=india-daily-news-network&utm_medium=web-auth-share&utm_campaign=referral">This website is developed and managed by Classify Technologies LLC.</a> | Version: 1.0.6(22)</p>
<p>This website is optimized for best viewing experience on Chrome, Safari, Microsoft Edge & Firefox.</p>
CSS 코드
신체,
html {
여백: 0;
패딩: 0;
}
.숨겨진 {
디스플레이: 없음;
}
.바닥글-회색 {
배경색: #FF0000;
폭: 100%;
}
.바닥글-맞춤 {
색상: #FFFFFF;
글꼴: normal normal 12px/1.4 "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
최대 너비: 1008px;
박스 크기 조정: 테두리 상자;
여백: 0 자동;
패딩: 24px;
}
.footer-custom:이후 {
디스플레이: 테이블;
명확한: 둘 다;
콘텐츠: "";
}
.footer-lists:이후 {
디스플레이: 테이블;
명확한: 둘 다;
콘텐츠: "";
}
.ftr-hdr {
색상: #FFFFFF;
글꼴: 22px/1.4 'BebasNeueRegular', BebasNeue, 'Bebas Neue', Arial, sans-serif;
여백: 1em 0 0;
}
@미디어 전용 화면 및 (최소 너비: 768px) {
.ftr-hdr {
글꼴 크기: 18px;
}
}
.footer-list-wrap {
폭: 50%;
왼쪽으로 뜨다;
박스 크기 조정: 테두리 상자;
}
@미디어 전용 화면 및 (최소 너비: 568px) {
.footer-list-wrap {
폭: 33.3333%;
}
}
@미디어 전용 화면 및 (최소 너비: 768px) {
.footer-list-wrap {
폭: 25%;
}
}
.ftr-링크-서브 {
패딩: 0;
여백: 0;
}
.ftr-links-sub:후 {
디스플레이: 테이블;
명확한: 둘 다;
콘텐츠: "";
}
.ftr-links-sub li {
디스플레이: 블록;
목록 스타일 유형: 없음;
여백: 0;
패딩: 3px 0;
색상: #FFFFFF;
글꼴: 일반 일반 12px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
텍스트 변환: 대문자;
/폭: 150px;/
}
.footer-custom a,
.footer-custom a:링크,
.footer-custom a:방문,
.ftr-links-sub li .link {
텍스트 장식: 없음;
색상: #FFFFFF;
패딩: 5px 0;
디스플레이: 블록;
}
.footer-custom .footer-legal a {
디스플레이: 인라인;
}
.footer-custom a:호버,
.footer-custom a:활성,
.ftr-links-sub li .link:hover {
텍스트 장식: 밑줄;
색상: #FFFFFF;
커서: 포인터;
}
@미디어 전용 화면 및 (최소 너비: 768px) {
.footer-custom a, .footer-custom a:link, .footer-custom a:visited, .ftr-links-sub li .link {
패딩: 0;
}
}
/* 소셜 스타일 시작*/
.바닥글-사회 {
텍스트 정렬: 가운데;
}
.footer-social ul {
패딩: 0;
디스플레이: 인라인 블록;
목록 스타일 유형: 없음;
}
.footer-social ul:after {
디스플레이: 테이블;
명확한: 둘 다;
콘텐츠: "";
}
.footer-social li {
왼쪽으로 뜨다;
여백: 0 15px 0 0;
패딩: 0;
}
@미디어 전용 화면 및 (최소 너비: 768px) {
.바닥글 목록 {
폭: 100%;
}
.바닥글-이메일 {
폭: 50%;
왼쪽으로 뜨다;
텍스트 정렬: 왼쪽;
}
.바닥글-사회 {
폭: 45%;
여백 왼쪽: 5%;
왼쪽으로 뜨다;
텍스트 정렬: 왼쪽;
}
}
@미디어 전용 화면 및 (최소 너비: 1008px) {
.바닥글 목록 {
폭: 66.6666%;
왼쪽으로 뜨다;
}
.바닥글-이메일 {
폭: 33.3333%;
}
.바닥글-사회 {
폭: 33.3333%;
플로트: 오른쪽;
여백-왼쪽: 0;
}
}
.바닥글-법률 {
패딩: 15px 0 0;
지우기: 왼쪽;
}
.바닥 결제 {
텍스트 정렬: 가운데;
}
@미디어 전용 화면 및 (최소 너비: 768px) {
.바닥글-법률 {
폭: 66.6666%;
왼쪽으로 뜨다;
}
.바닥 결제 {
폭: 33.3333%;
왼쪽으로 뜨다;
}
}
@미디어 전용 화면 및 (최소 너비: 1008px) {
.바닥 결제 {
텍스트 정렬: 왼쪽;
}
}
.footer-payment ul {
패딩: 0;
디스플레이: 인라인 블록;
목록 스타일 유형: 없음;
}
.footer-payment ul li {
디스플레이: 인라인 블록;
여백: 0 6px;
}
@미디어 전용 화면 및 (최소 너비: 1008px) {
.footer-payment ul li.ftr-stella {
여백-왼쪽: 0;
}
}
.ftr-bbb 스팬,
.ftr-스텔라 범위 {
배경 이미지: url("http://cache1.artprintimages.com/images/jump_pages/rebrand2/images/subnav2.png" );
background-repeat: 반복하지 않음;
배경색: 투명;
커서: 포인터;
디스플레이: 인라인 블록;
높이: 36px;
여백: 0;
패딩: 0;
}
.ftr-bbb 범위 {
배경 위치: -339px -8px;
너비: 96px;
}
.ftr-스텔라 범위 {
배경 위치: -339px -107px;
너비: 57px;
}
Reference
이 문제에 관하여(반응형 웹 바닥글 | 인도 데일리 뉴스 네트워크), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/indiadaily/responsive-web-footer-2fn1텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)