라디오 방송국 목록의 DIV+CSS 구현을 보여주는 예-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

라디오 방송국 목록의 DIV+CSS 구현을 보여주는 예

巴扎黑

Sep 02, 2017 am 09:57 AM

css

이 글에서는 라디오 방송국 목록 디자인을 구현하기 위한 p+CSS의 샘플 코드를 주로 소개합니다. 편집자는 꽤 좋다고 생각하여 지금 공유하고 참고용으로 제공하겠습니다. 편집기를 따라 살펴보겠습니다

CSS Spite 기술: CSS 스프라이트 기술이라고도 합니다. 실제로 CSS 스프라이트는 그림의 아이콘 요소로, 버튼, 라벨, 로고 등으로 사용될 수 있습니다. 이 기술은 많은 웹사이트에 적용되어 전송 요청 횟수를 효과적으로 줄일 수 있습니다. 필요한 아이콘은 한 장의 그림으로 요약되어 있으며, 한 번 다운로드하면 전체 페이지에 적용할 수 있습니다. 다음 예는 주로 CSS 마법사를 적용한 것입니다. 기술, 직접 Po 코드:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>酷狗电台列表设计</title>
    <style>
        #frm{
            margin:0;
            padding:0;
            list-style-type: none;
            width: 500px;
            border:1px solid #000;
            overflow: hidden;
        }
        #frm *{
            margin:0;
            padding: 0;
            font-size: 12px;
        }
        #frm li{
            padding:4px 0;
            width: 47%;
            float: left;
            margin:5px 15px 5px 0;
            cursor: pointer;
        }
        #frm li span{
            color:#999;
            position: relative;
        }
        #frm li .d{
            width: 38px;
            height: 38px;
            float: left;
            margin:0px 12px 6px 0;
            background-image: url(img/spite2.jpg);
            position: relative;
        }
        #frm li .cont{
            position: relative;
            height: 37px;
            overflow: hidden;
        }
        .cont p{
            margin:5px 0 5px 0;
        }
        .d p{
            position: absolute;
            width: 100%;
            height: 100%;
        }
        .d .img,.d .play{
            background-image: url(img/spite2.jpg);
        }
        .l1 .d .img{
            background-position: 38px 0;
        }
        .l2 .d .img{
            background-position: 76px 0;
        }
        .l3 .d .img{
            background-position: 114px 0;
        }
        .l4 .d .img{
            background-position: 152px 0;
        }
        .l5 .d .img{
            background-position: 190px 0;
        }
        .l6 .d .img{
            background-position: 228px 0;
        }
        .l7 .d .img{
            background-position: 266px 0;
        }
        .l8 .d .img{
            background-position: 304px 0;
        }
        .l9 .d .img{
            background-position: 342px 0;
        }
        .ll .d .img{
            background-position: 380px 0;
        }
        .d .mask,.d .play{
            visibility: hidden;
        }
        .choose .d{
            background-position: 38px 0;
            outline: 1px solid rgb(233,243,250);
        }
        .choose .d .mask{
            background-color: #000;
            filter:alpha(Opacity=50);
            opacity: 0.5;
            height: 32px;
            width: 32px;
            top:3px;
            left: 3px;
            visibility: visible;
        }
        .choose .d .play{
            background-position: 418px 0;
            visibility: visible;
        }
        .choose .cont p{
            font-weight: bold;
            color:rgb(0,155,250);
        }
    </style>
    <script>
        function mouseoverhandle(obj){
            obj.className += &#39; choose&#39;;
        }
        function mouseouthandle(obj){
            obj.className = obj.className.substring(0,2);
        }
    </script>
</head>
<body>
<ul id="frm">
    <li class="l1" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
        <p class="d">
            <p class="img"></p>
            <p class="mask"></p>
            <p class="play"></p>
        </p>
        <p class="cont">
            <p>酷狗热歌</p>
            <span href="#">徐朗 - 小夜曲</span>
        </p>
    </li>
    <li class="l2" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
        <p class="d">
            <p class="img"></p>
            <p class="mask"></p>
            <p class="play"></p>
        </p>
        <p class="cont">
            <p>DJ热碟</p>
            <span href="#">曾春年 - 最幸福的人</span>
        </p>
    </li>
    <li class="l3" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
        <p class="d">
            <p class="img"></p>
            <p class="mask"></p>
            <p class="play"></p>
        </p>
        <p class="cont">
            <p>网络红歌</p>
            <span href="#">徐志强 - 想你的时候</span>
        </p>
    </li>
    <li class="l4" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
        <p class="d">
            <p class="img"></p>
            <p class="mask"></p>
            <p class="play"></p>
        </p>
        <p class="cont">
            <p>新歌</p>
            <span href="#">孙俪 - 美丽信号</span>
        </p>
    </li>
    <li class="l5" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
        <p class="d">
            <p class="img"></p>
            <p class="mask"></p>
            <p class="play"></p>
        </p>
        <p class="cont">
            <p>经典</p>
            <span href="#">游鸿明 - 寻你</span>
        </p>
    </li>
    <li class="l6" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
        <p class="d">
            <p class="img"></p>
            <p class="mask"></p>
            <p class="play"></p>
        </p>
        <p class="cont">
            <p>怀旧粤语</p>
            <span href="#">陈慧娴 - 人生何处不相逢</span>
        </p>
    </li>
    <li class="l7" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
        <p class="d">
            <p class="img"></p>
            <p class="mask"></p>
            <p class="play"></p>
        </p>
        <p class="cont">
            <p>钢琴</p>
            <span href="#">July - My Soul</span>
        </p>
    </li>
    <li class="l8" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
        <p class="d">
            <p class="img"></p>
            <p class="mask"></p>
            <p class="play"></p>
        </p>
        <p class="cont">
            <p>KTV必点</p>
            <span href="#">蔡健雅 - 无底洞</span>
        </p>
    </li>
    <li class="l9" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
        <p class="d">
            <p class="img"></p>
            <p class="mask"></p>
            <p class="play"></p>
        </p>
        <p class="cont">
            <p>思念</p>
            <span href="#">张杰 - 这就是爱</span>
        </p>
    </li>
    <li class="ll" onmouseover="mouseoverhandle(this)" onmouseout="mouseouthandle(this)">
        <p class="d">
            <p class="img"></p>
            <p class="mask"></p>
            <p class="play"></p>
        </p>
        <p class="cont">
            <p>DJ外文舞曲</p>
            <span href="#">Jean Cloud Ades</span>
        </p>
    </li>
</ul>
<script>
    var ul = document.getElementById(&#39;frm&#39;);
    var li = document.getElementsByTagName(&#39;li&#39;);
    var spans;
    for(var i=0;i<li.length;i++){
        spans = li[i].getElementsByTagName(&#39;span&#39;);
        li[i].span_obj = spans[0];
    }
    var index = -1;
    function showup(){
        if(li[index].span_obj.style.top == &#39;&#39;){
            li[index].span_obj.style.top = &#39;13px&#39;;
        }
        if(parseInt(li[index].span_obj.style.top)<=0){
            li[index].span_obj.style.top = &#39;&#39;;
            setTimeout(&#39;shownext()&#39;,1000);
        }else{
            li[index].span_obj.style.top = parseInt(li[index].span_obj.style.top)-1 +&#39;px&#39;;
            setTimeout(&#39;showup()&#39;,100);
        }
    }
    function shownext(){
        index++;
        index = index%li.length;
        showup();
    }
    setTimeout(shownext,1000);
</script>
</body>
</html>

로그인 후 복사

생성 효과:

코드 분석:

1.ul 태그에는 10개의 li 태그가 포함되어 있습니다. 왜냐하면 각 li 태그의 아이콘은 다른 하위 그림이기 때문입니다. , 각 li 태그에 다른 클래스 속성을 추가하십시오.

2. 각 li 태그의 클래스 속성이 d인 p 태그에는 img, 마스크 및 재생 태그가 차례로 포함되며 해당 상위 노드도 있습니다. p(클래스 속성은 d)는 배경 이미지를 테두리로 사용합니다.

3. 각 li 태그에 onmouseover 및 onmouseout 이벤트 응답 문자가 추가되었습니다.

4. js 코드의 마지막 부분은 오르골이 노래를 전환할 때 노래 이름이 올라가는 효과를 시뮬레이션하는 것입니다.

먼저 프로그램은 ID가 frm인 태그를 가져오고 태그의 모든 li 하위 태그도 가져오고 li의 모든 스팬 태그를 가져오고 첫 번째 스팬 태그를 li 태그 개체의span_obj에 바인딩합니다.

두 가지 시간 초과 기능: showext() 및 showup() showup() 함수는 노래 제목 올리기 효과를 생성하는 반면, showext() 함수는 다음 뮤직 스테이션에서 노래 재생으로 전환하는 역할을 합니다. .

객체의 메소드는 자신을 시간 초과 기능으로 설정할 수 없습니다

위 내용은 라디오 방송국 목록의 DIV+CSS 구현을 보여주는 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7400

자바 튜토리얼

1630

Cakephp 튜토리얼

1358

라라벨 튜토리얼

1268

PHP 튜토리얼

1217

Related knowledge

웹 페이지에 로컬로 설치된 'Jingnan Mai Round Body'를 올바르게 표시하는 방법은 무엇입니까? Apr 05, 2025 pm 10:33 PM

최근 웹 페이지에 로컬로 설치된 글꼴 파일을 사용하여 인터넷에서 무료 글꼴을 다운로드하여 시스템에 성공적으로 설치했습니다. 지금...

CSS를 통해 일류 이름 항목으로 자식 요소를 선택하는 방법은 무엇입니까? Apr 05, 2025 pm 11:24 PM

요소 수가 고정되지 않은 경우 CSS를 통해 지정된 클래스 이름의 첫 번째 자식 요소를 선택하는 방법. HTML 구조를 처리 할 때 종종 다른 요소를 만듭니다 ...

H5 페이지 생산에는 지속적인 유지 보수가 필요합니까? Apr 05, 2025 pm 11:27 PM

코드 취약점, 브라우저 호환성, 성능 최적화, 보안 업데이트 및 사용자 경험 개선과 같은 요소로 인해 H5 페이지를 지속적으로 유지해야합니다. 효과적인 유지 관리 방법에는 완전한 테스트 시스템 설정, 버전 제어 도구 사용, 페이지 성능을 정기적으로 모니터링하고 사용자 피드백 수집 및 유지 관리 계획을 수립하는 것이 포함됩니다.

모바일 터미널의 멀티 라인 오버 플로우 누락과 호환되는 방법은 무엇입니까? Apr 05, 2025 pm 10:36 PM

VUE 2.0을 사용하여 모바일 애플리케이션을 개발할 때 다른 장치에서 멀티 로우 오버플로의 호환성 문제가 종종 텍스트를 넘어서야 할 필요성을 만듭니다 ...

H5 페이지 제작에 적합한 응용 프로그램 시나리오 Apr 05, 2025 pm 11:36 PM

H5 (HTML5)는 마케팅 캠페인 페이지, 제품 디스플레이 페이지 및 기업 프로모션 마이크로 웨스 사이트와 같은 가벼운 응용 프로그램에 적합합니다. 그것의 장점은 교차 성형 및 풍부한 상호 작용에있어 있지만, 그 한계는 복잡한 상호 작용 및 애니메이션, 로컬 리소스 액세스 및 오프라인 기능에 있습니다.

중첩 된 div 요소의 스타일을 효율적으로 수정하는 방법은 무엇입니까? Apr 05, 2025 pm 10:45 PM

중첩 된 DIV 스타일 수정 방법에 대한 심층적 인 논의이 기사는 중첩 구조의 DIV 요소 스타일을 효과적으로 수정하는 방법을 자세히 설명합니다. 우리가 직면 한 도전은 어떻게 ...

H5로 진행률 표시 줄을 만드는 방법 Apr 06, 2025 pm 12:09 PM

HTML5 또는 CSS를 사용하여 진행률 표시 줄을 만듭니다. 진행률 표시 줄 컨테이너를 만듭니다. 진행률 막대 너비를 설정하십시오. 진행률 표시 줄의 내부 요소를 만듭니다. 진행률 표시 줄의 내부 요소 너비를 설정합니다. JavaScript, CSS 또는 Progress Bar 라이브러리를 사용하여 진행 상황을 표시하십시오.

H5 페이지 제작은 프론트 엔드 개발입니까? Apr 05, 2025 pm 11:42 PM

예, H5 페이지 제작은 HTML, CSS 및 JavaScript와 같은 핵심 기술을 포함하는 프론트 엔드 개발을위한 중요한 구현 방법입니다. 개발자는 & lt; canvas & gt; 그래픽을 그리거나 상호 작용 동작을 제어하기 위해 JavaScript를 사용하는 태그.

See all articles