252 lines
5.4 KiB
HTML
252 lines
5.4 KiB
HTML
<!-- <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>好好学习     天天向上</div>
|
||
|
||
<!-- 大于 -->
|
||
<div>好好学习>>>>>>天天向上</div>
|
||
|
||
<!-- 小于 -->
|
||
<div>好好学习<<<<<天天向上</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> |