据说,看我文章时 关注、点赞、收藏 的 帅哥美女们 心情都会不自觉的好起来。
前言:
作者简介:大家好我是 user_from_future ,意思是 “ 来自未来的用户 ” ,寓意着未来的自己一定很棒~
✨个人主页:点我直达,在这里肯定能找到你想要的~
专栏介绍:Html+Css+JS / jQuery小型网页综合实战 ,一个专注于分享网页制作实例的专栏~
使用jQuery操作标签的css属性实现箭头图片的设置。
└──网页文件夹
├── css
│ └──play.css
├── images
│ ├──flv01.jpg
│ ├──flv02.jpg
│ ├──green.jpg
│ └──orange.jpg
├── js
│ └──jquery-1.12.4.js
└──index.html
*{margin: 0; padding: 0;font-family: "微软雅黑";font-size: 14px;}
ul,ol,li{list-style: none;}
#play{margin: 0 auto; width:680px; overflow: hidden;}
#play h1{line-height: 40px; font-size: 22px;}
#play ul>li{
float: left;
width: 220px;
height: 308px;
overflow: hidden;
position: relative;
}
#play ol li{height: 37px; padding: 0px 0px 0 10px; position: relative;}
#play ul>li>span{display: block; position: absolute; left: 0; bottom: 0; font-size: 25px; color: #ffffff; font-weight: bold; padding: 5px 10px; z-index: 100;}
#play ul>li>p{position: absolute; left: 50px; bottom: 10px; color: #ffffff;}
#play ol{padding-top: 13px; padding-right: 5px;}
#play ol li span{display:inline-block; color: #ffffff; margin-right: 5px; width: 20px; height: 20px; font-size: 12px; font-weight: bold; text-align: center;}
#play ol li p{position: absolute; right: 0; top: 3px; color: #ffffff; background: #f0a30f; padding: 0 8px; font-size: 12px; display: none;}
自行下载,可以用高版本,也可私信联系获得。
DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>全网热播视频title>
<link rel="stylesheet" href="css/play.css">
head>
<body>
<section id="play">
<h1>全网热播视频h1>
<ul>
<li><img src="images/flv01.jpg">
<p>昊花梦p><span>1span>
li>
<li><img src="images/flv02.jpg">
<p>好先生p><span>2span>
li>
<li>
<ol>
<li><span>3span>三八线<p>加入看单p>
li>
<li><span>4span>吉详天宝<p>加入看单p>
li>
<li><span>5span>亲爱的翻译官<p>加入看单p>
li>
<li><span>6span>仙剑云之凡<p>加入看单p>
li>
<li><span>7span>权力的游戏第五季<p>加入看单p>
li>
<li><span>8span>琅琊榜<p>加入看单p>
li>
<li><span>9span>那年青春我们正好<p>加入看单p>
li>
<li><span>10span>乡村受情8(上)<p>加入看单p>
li>
ol>
li>
ul>
section>
<script type="text/javascript" src="js/jquery-1.12.4.js">script>
<script type="text/javascript">
$(document).ready(function() {
$("li:lt(2)").css("margin-right", "10px");
$("ol").css("background-color", "#f0f0f0");
$("span").css("background-color", "#a4a4a4");
$("span:lt(3)").css("background-color", "#fea418");
});
$("li").ready(function() {
$("ol li:lt(5)").css("background", "url(images/orange.jpg) no-repeat right top");
$("ol li:eq(1)").css("background", "url(images/green.jpg) no-repeat right top");
$("ol li:gt(4)").css("background", "url(images/green.jpg) no-repeat right top");
});
script>
body>
html>
这段代码中,
li:lt(5)
意思是 li
标签中索引小于 5 的标签列表;
li:eq(1)
意思是 li
标签中索引等于 1 的标签列表;
li:gt(4)
意思是 li
标签中索引大于 4 的标签列表。
本篇实例素材来自于 X Y H ~