Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

2019-11-06-C组-js1小课堂 #1073

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

2019-11-06-C组-js1小课堂 #1073

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3cd96c2
Add files via upload
jfy1996 Nov 6, 2019
62910ec
Add files via upload
jfy1996 Jan 13, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 26 additions & 0 deletions 2019-11-06-C组-js1/demo-1.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@

/*.box #word {*/
/* background-color: red;*/
/* color: #222222;*/
/* font-size: 40px;*/
/*}*/

/*.live {*/
/* background-color: yellow!important;*/
/* color: #222222;*/
/* font-size: 40px;*/
/*}*/

/*!*!*#word {*!*!*/
/*!*!* background-color: #1D7AD9;*!*!*/
/*!*!* color: #222222;*!*!*/
/*!*!* font-size: 40px;*!*!*/
/*!*!*}*!*!*/

/*.game {*/
/* background-color: black;*/
/*}*/

/*.data {*/
/* background-color: #888888;*/
/*}*/
24 changes: 24 additions & 0 deletions 2019-11-06-C组-js1/demo-1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="demo-1.css" type="text/css">
<title>Title</title>
</head>
<body>

<div class="box">
<p id="word" class="live">苟利国家生死以</p>
<p class="name">岂因祸福避趋之</p>
<p class="text">我寄愁心与明月</p>
<p class="text">随风直到夜郎西</p>

<p class="game data">jojo我不做人啦</p>
<p class="game">但是我拒绝</p>

</div>

<script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
<script src="demo-1.js"></script>
</body>
</html>
7 changes: 7 additions & 0 deletions 2019-11-06-C组-js1/demo-1.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@


var box=document.getElementsByClassName("text");
box.style.color="blue";

var a=document.getElementById("word");
a.style.backgroundColor="red";
184 changes: 184 additions & 0 deletions 2019-11-06-C组-js1/js1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,184 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<title>葡萄藤PPT</title>

<link rel="stylesheet" href="https://ptteng.github.io/PPT/css/reveal/reveal.css">

<!-- PPT主题，可以在/css/reveal/theme/中选择其他主题，目前暂时只能使用该模板 -->
<link rel="stylesheet" href="https://ptteng.github.io/PPT/css/reveal/theme/ptt.css">

<!-- syntax highlighting 代码高亮主题 -->
<link rel="stylesheet" href="https://ptteng.github.io/PPT/lib/reveal/css/zenburn.css">

<!-- 打印和PDF输出样式 -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ?
'https://ptteng.github.io/PPT/css/reveal/print/pdf.css' : '../css/reveal/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
</head>
<body>
<img src="https://ptteng.github.io/PPT/img/demo/logo.png" alt="" usemap="#pttmap" class="base-logo">
<map name="pttmap">
<area shape="rect" coords="0,0,276,58" href="http://www.jnshu.com" alt="" target="_blank"/>
</map>
<div class="reveal">
<div class="slides">
<section>
<h2>ID和Class有什么区别？</h2>
<p></p>
<p>分享人：蒋奉苡</p>
</section>
<section>
<p>1.背景介绍</p>
<p>2.知识剖析</p>
<p>3.常见问题</p>
<p>4.解决方案</p>
<p>5.扩展思考</p>
<p>6.编码实战</p>
<p>7.参考文献</p>
<p>8.更多讨论</p>
</section>
<section>
<h3>1.背景介绍</h3>
</section>
<section>
<p>
id和class
</p>
<P>用css制作网页时，都会用到class和id来设置样式，它们都可以改变网页的样式，我们应该知道什么时场合使用class，什么时候用id。下面介绍一下两者的用法。</p>
<p>

</p>


</section>


<section>
<h3>2.知识剖析</h3>
</section>

<section>
<p>
类选择器和id选择器

<p>
1.class称为类选择器，可以为元素定义样式，它可以同时在多个标签中使用，为它们设置相同样式。
</p>
<p>
2.ID选择器，identity是身份的意思，如同我们的身份证一样，它具有唯一性，在网页中只能使用一次。

</p>
<p>
3.class在css中以小写的"."来命名，比如".color"。id以"#"号命名，如"#name",对大小写敏感。
</p>


</section>



<section>
<h3>3.常见问题</h3>

<p>
两者的优先级及场景使用
</p>

</section>

<section>
<h3>4.解决方案</h3>
<p>
id选择器的优先级要大于class选择器的优先级,如果加了!important,情况又将不同

</p>
</section>


<section>
<h3>5.扩展思考</h3>
<p>
1.如何选取子class
1.jQuery中如何调用class和id

</p>
</section>

<section>
<h3>6.编码实战</h3>
</section>

<section>
<h3>7.参考文献</h3>
<p>
参考一：https://www.xuewangzhan.net/webqd/16232.html

参考二：https://www.runoob.com/css/css-id-class.html

参考三：https://www.php.cn/js-tutorial-367717.html

</p>


</section>
<section>
<h3>8.更多讨论</h3>
<p>
1.class可以多次使用，id只能使用一次
2.jQuery中调用id和class稍有不同
3.优先级问题
</p>
</section>
<section>
<h4>结束语</h4>
<p>今天的分享就到这里啦，感谢大家观看</p>
</section>

</div>
</div>

<script src="https://ptteng.github.io/PPT/lib/reveal/js/head.min.js"></script>
<script src="https://ptteng.github.io/PPT/lib/reveal/reveal.js"></script>

<script>
// 以下为常见配置属性的默认值
// {
// controls: true, // 是否在右下角展示控制条
// progress: true, // 是否显示演示的进度条
// slideNumber: false, // 是否显示当前幻灯片的页数编号，也可以使用代码slideNumber: 'c / t' ，表示当前页/总页数。
// history: false, // 是否将每个幻灯片改变加入到浏览器的历史记录中去
// keyboard: true, // 是否启用键盘快捷键来导航
// overview: true, // 是否启用幻灯片的概览模式，可使用"Esc"或"o"键来切换概览模式
// center: true, // 是否将幻灯片垂直居中
// touch: true, // 是否在触屏设备上启用触摸滑动切换
// loop: false, // 是否循环演示
// rtl: false, // 是否将演示的方向变成RTL，即从右往左
// fragments: true, // 全局开启和关闭碎片。
// autoSlide: 0, // 两个幻灯片之间自动切换的时间间隔（毫秒），当设置成 0 的时候则禁止自动切换，该值可以被幻灯片上的 ` data-autoslide` 属性覆盖
// transition: 'default', // 切换过渡效果，有none/fade/slide/convex/concave/zoom
// transitionSpeed: 'default', // 过渡速度，default/fast/slow
// mouseWheel: true, //是否启用通过鼠标滚轮来切换幻灯片
// }
// 初始化幻灯片
Reveal.initialize({
history: true,
dependencies: [
{ src: 'https://ptteng.github.io/PPT/plugin/markdown/marked.js' },
{ src: 'https://ptteng.github.io/PPT/plugin/markdown/markdown.js' },
{ src: 'https://ptteng.github.io/PPT/plugin/notes/notes.js', async: true },
{ src: 'https://ptteng.github.io/PPT/plugin/highlight/highlight.js', async: true, callback: function() {
hljs.initHighlightingOnLoad(); } }
]
});
</script>
</body>
</html>
Loading