目录
我们这一次没有太多的内容要讲( ̄▽ ̄)",主要是理解如何操作css,然后多几个举例,各位小伙伴们可以看一看呦╰( ̄ω ̄o)
一.css选择器
div{————选择器
color:rad-----样式规则
}
id选择器
#a{
id选择器需要在选择器前加#
}
class选择器
.a{
class选择器需要在选择器前面加一个点
}
标签(Tag)选择器
例如
p{
}
或者
input{
}
这样的标签
选择器的优先级:id选择器>class选择器>标签选择器
二.如何操作css
方法一:直接操作样式(style)
方法二:操作class
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.a{//class选择器
border: 5px solid skyblue;
box-shadow: 0px 0px 10px gold;
}
</style>
</head>
<body>
<img id="a1" src="img/1.gif" />
<img id="a2" src="img/2.gif" />
<img id="a3" src="img/3.gif" />
<p>
<button onclick="fn1()">添加边框</button>
<button onclick="fn2()">添加边框</button>
<button onclick="fn3()">添加边框</button>
</p>
<script>
function fn1(){
//操作css的第一种方式:直接操作style
//border边框,solid实线,opacity透明度
a1.style.border="5px solid black"
a1.style.which="50px"
a1.style.opacity=.5
}
function fn2(){
//第二种方式:操作class
//setAttribute设置值
a2.setAttribute("class","a")
}
function fn3(){
//第二种方式的简写
//class是关键字,标签中的class属性在js中写作className
a3.className="a"
}
</script>
</body>
</html>
class是关键字,标签中的class属性在js中写作className
三.例题
相信各位小伙伴们用电脑打开浏览器总会有小广告,我们滑动滑轮这些小广告也会跟着滑动,根据操作css,我们也可以完成滚动广告,让我们试一试吧
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{//标签选择器
border: 2px solid black;
/*为了让图片不遮住文字,我们可以设置绝对布局
绝对布局的特点:可以随便调整位置*/
position: absolute;
/*绝对布局有四个属性,分别是top,bottom,left,right
距离右边框20px,距离顶部40px*/
right: 20px;
top: 40px;
transition: .1s;
}
</style>
</head>
<body>
<div id="ad">
<button onclick="ad.style.display='none'">x</button>
<br>
<img src="img/5.gif">
</div>
//这里的内容是随便写的不要在意
<p>买它买它</p>
<p>买它买它</p>
<p>买它买它</p>
<p>买它买它</p>
<p>买它买它</p>
<p>买它买它</p>
<p>买它买它</p>
<p>买它买它</p>
<p>买它买它</p>
<p>买它买它</p>
<p>买它买它</p>
<p>买它买它</p>
<p>买它买它</p>
<p>买它买它</p>
<p>买它买它</p>
<p>买它买它</p>
<p>买它买它</p>
<p>买它买它</p>
<p>买它买它</p>
<p>买它买它</p>
<p>买它买它</p>
<p>买它买它</p>
<p>买它买它</p>
<p>买它买它</p>
<script type="text/javascript">
//为了让广告可以跟着下拉框滑动,我们需要写一个窗口的滑动事件
window.onscroll=()=>{
//获得窗口滑动的距离 scrollTop
ad.style.top=40+document.documentElement.scrollTop+"px"
}
</script>
</body>
</html>
运行结果:
让图片跟随鼠标移动
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 100px;
background: red;
//绝对布局
position: absolute;
}
</style>
</head>
<body>
<div id="div"></div>
<script>
// onclick 点击事件
// ondblclick 点击事件
// onmouseover 鼠标移入事件
// onmouseout 鼠标移出事件
// onmousemove 鼠标移动事件
window.onmousemove=(e)=>{
//需要事件对象 Event
console.log(e.clientX,e.clientY)
//让鼠标箭头位于中心
div.style.left=e.clientX-50+"px"
div.style.top=e.clientY-50+"px"
}
</script>
</body>
</html>
这是一个简单的放大镜
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 300px;
height: 300px;
background: red;
position: absolute;
/*设置事件全部无效*/
pointer-events: none;
display: none;
}
</style>
</head>
<body>
<img id="m1" src="img/1.gif" alt="">
<div id="div"></div>
<script>
// onclick 点击事件
// ondblclick 点击事件
// onmouseover 鼠标移入事件
// onmouseout 鼠标移出事件
// onmousemove 鼠标移动事件
m1.onmouseover=function (){
div.style.display="block";
}
m1.onmouseout=function (){
div.style.display="none";
}
m1.onmousemove=(e)=>{
//需要事件对象 Event
console.log(e.clientX,e.clientY)
div.style.left=e.clientX-50+"px"
div.style.top=e.clientY-50+"px"
div.style.background="url("+m1.src+") center/cover"
}
</script>
</body>
</html>
运行结果: