bmy/ClassContent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

252
历届学生/font-end-nine/项目练习/学生项目/张婷/练习/html和cs/index.html Normal file
View File

@@ -0,0 +1,252 @@
<!-- <HTML>标签练习</HTML> -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul style="list-style: none;">
<li>王一鸣是1猪</li>
<li>王一鸣是2猪</li>
<li>王一鸣是3猪</li>
</ul>
<div>
<div class="item">王一鸣是1猪</div>
<div class="item">王一鸣是2猪</div>
<div class="item">王一鸣是3猪</div>
</div>
<form action="">
<input type="password" placeholder="请输入密码">
<input type="button" value="登录">
<button>登录</button>
<input type="submit" value="登录">
<input type="reset" value="登录">
</form>
<select name="城市" id="地点">
<option value="">-请选择-</option>
<option value="">四川</option>
<option value="">成都</option>
<option value="">猪头</option>
</select>
<textarea name="" id="" cols="30" rows="10" placeholder="听到滴声请留言"></textarea>
<video src="视频地址" autoplay loop muted controls poster="图片地址"></video>
<audio src="音乐地址" 其他属性相同></audio>
</body>
</html> -->
<!-- css标签练习 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 所属 */
/* .one > a {
color: aqua;
} */
/* 嵌套（所有a） */
/* .one a {
color: blue;
} */
/* 同时选中 */
/* .one h1 , .one h2 {
color: blueviolet;
} */
/* 同一级别 效果作用于第二个a*/
/* .one a + a {
color: blueviolet;
} */
/* 先写默认再写过程 */
/* 例如：h2默认隐藏，然后再写出经过（悬浮h1）后得到的结果（显现h2） */
/* .one h2 {
display: none;
} */
/* 在h1悬浮的同时作用于同级的h2，并对h2设置实现效果 */
/* .one h1:hover+h2 {
display: block;
} */
/* （网页格式 手动格式化） */
/* html {
font-size: 0;
} */
/* .one , .two{
width: 100px;
height: 100px;
border: 1px solid;
display: inline-block;
} */
/* 本地的插入有格式+在线的直接复制粘贴即可 */
/* .one{
width: 1000px;
height: 1000px;
background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.fengjinwei.com%2F2021%2F08%2F20210813100136196.png&refer=http%3A%2F%2Fimg.fengjinwei.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656683650&t=cc2cda93b3071d8088c022782456e231');
}
*/
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
p {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
}
.menu {
width: 100%;
height: 38px;
background-color: blueviolet;
}
.menu ul {
margin: 0 auto;
}
.menu ul li {
float: left;
}
</style>
</head>
<body>
<!-- <img src="地址" alt="出现问题的时候，设置字体"> -->
<!-- <div class="one">
<h1>111111111111</h1>
<h2>222222222222</h2>
<a href="">333333333333</a>
<a href="">4444444444444</a>
<div class="two">
<h3>55555555555555</h3>
<a href="">666666666</a>
</div>
</div> -->
<div class="one">
</div>
<!-- <div class="one">
</div>
<div class="two">
</div> -->
<!-- 实体字符练习 -->
<!-- 1、空格 -->
<div>好好学习&nbsp&nbsp&nbsp&nbsp&nbsp天天向上</div>
<!-- 大于 -->
<div>好好学习&gt&gt&gt&gt&gt&gt天天向上</div>
<!-- 小于 -->
<div>好好学习&lt&lt&lt&lt&lt天天向上</div>
<!-- emmet语法练习 -->
<!-- >后代节点：下一级（所属关系） -->
<!-- 写作:.one>.two>.three -->
<div class="one">
<div class="two">
<div class="three"></div>
</div>
</div>
<!-- >兄弟节点：同一级别（并列关系） -->
<!-- 写作:.top>.one+.two+.three -->
<div class="top">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
<!-- 上级节点^：返回上一级别 -->
<!-- 写作：.top>.top1>.one>.two^.top2 -->
<div class="top">
<div class="top1">
<div class="one">
<div class="two"></div>
</div>
<div class="top2"></div>
</div>
</div>
<!-- 浮动练习 -->
<div class="menu">
<ul>
<li>菜单</li>
<li>菜单</li>
<li>菜单</li>
<li>菜单</li>
<li>菜单</li>
<li>菜单</li>
<li>菜单</li>
<li>菜单</li>
<li>菜单</li>
</ul>
</div>
</body>
</html>