p와 CSS를 사용한 디자인도 흥미로운 디자인 효과입니다. 이번 글에서는 라디오 방송국 목록 디자인을 구현하기 위한 p와 CSS에 대해 간략하게 소개하고, 그 효과를 구현하는 방법과, p와 CSS를 구현하는 코드는 무엇인지 설명하겠습니다. 라디오 방송국 목록 디자인 효과를 실현하려면? 아래를 살펴보겠습니다.
CSS Sprite 기술: 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 += ' choose';
}
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('frm');
var li = document.getElementsByTagName('li');
var spans;
for(var i=0;i<li.length;i++){
spans = li[i].getElementsByTagName('span');
li[i].span_obj = spans[0];
}
var index = -1;
function showup(){
if(li[index].span_obj.style.top == ''){
li[index].span_obj.style.top = '13px';
}
if(parseInt(li[index].span_obj.style.top)<=0){
li[index].span_obj.style.top = '';
setTimeout('shownext()',1000);
}else{
li[index].span_obj.style.top = parseInt(li[index].span_obj.style.top)-1 +'px';
setTimeout('showup()',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() 함수는 노래 제목 올리기 효과를 생성하는 반면, visibleext() 함수는 다음 뮤직 스테이션에서 노래 재생으로 전환하는 역할을 합니다.
객체의 메소드는 스스로 타임아웃 기능을 설정할 수 없습니다
관련 권장 사항:
위 내용은 DIV 및 CSS로 라디오 방송국 목록 디자인을 구현하기 위한 DIV 및 CSS_ 코드로 라디오 방송국 목록 디자인을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
