> 웹 프론트엔드 > CSS 튜토리얼 > DIV 및 CSS로 라디오 방송국 목록 디자인을 구현하기 위한 DIV 및 CSS_ 코드로 라디오 방송국 목록 디자인을 구현하는 방법

DIV 및 CSS로 라디오 방송국 목록 디자인을 구현하기 위한 DIV 및 CSS_ 코드로 라디오 방송국 목록 디자인을 구현하는 방법

不言
풀어 주다: 2018-03-30 14:04:58
원래의
1702명이 탐색했습니다.

p와 CSS를 사용한 디자인도 흥미로운 디자인 효과입니다. 이번 글에서는 라디오 방송국 목록 디자인을 구현하기 위한 p와 CSS에 대해 간략하게 소개하고, 그 효과를 구현하는 방법과, p와 CSS를 구현하는 코드는 무엇인지 설명하겠습니다. 라디오 방송국 목록 디자인 효과를 실현하려면? 아래를 살펴보겠습니다.

CSS Sprite 기술: CSS 스프라이트 기술이라고도 합니다. 실제로 CSS 스프라이트는 그림의 아이콘 요소로, 버튼, 라벨, 로고 등으로 사용될 수 있습니다. 이 기술은 많은 웹사이트에 적용되어 전송 요청 횟수를 효과적으로 줄일 수 있습니다. 필요한 아이콘은 하나의 이미지로 요약되어 있으며, 다운로드 후 전체 페이지에 적용할 수 있습니다

다음 예는 주로 CSS 마법사 기술을 Po 코드에 직접 적용한 것입니다.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

<!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>

로그인 후 복사

생성 효과:

DIV 및 CSS로 라디오 방송국 목록 디자인을 구현하기 위한 DIV 및 CSS_ 코드로 라디오 방송국 목록 디자인을 구현하는 방법

코드 분석:

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를 사용하여 탐색 모음을 만드는 방법

Div 학습 방법 그리고 CSS

위 내용은 DIV 및 CSS로 라디오 방송국 목록 디자인을 구현하기 위한 DIV 및 CSS_ 코드로 라디오 방송국 목록 디자인을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿