<body>
<!--TODO块元素 -->
<!-- 用于一大部分内容 -->
<section></section>
<!-- 用于一块内容 -->
<div></div>
<!-- 用于一个段落 -->
<p></p>
<!-- 写标题 -->
<h1></h1>
<!-- 无序标签、有序标签 -->
<ul></ul>
<ol></ol>
<!-- 主要内容或主体部分 -->
<main> </main>
<!-- 写页脚 -->
<footer> </footer>
<!-- TODO行内元素 -->
<!-- 加粗 -->
<b></b>
<!-- 倾斜 -->
<i></i>
<!-- 链接 -->
<a href="#"></a>
<!-- 字体 -->
<font></font>
<!-- 删除 -->
<del></del>
<!-- TODO自闭元素 -->
<!-- 输入 -->
<input type="text">
<!-- 图片 -->
<img src="" alt="">
<!-- 换行 -->
<br>
<!-- 划线 -->
<hr>
<!-- TODO符号 -->
<!-- 大于 -->
>
<!-- 小于 -->
<
<!-- 空格 -->
<!-- TODO表单 -->
<!-- 定义表单,index.html提交地址,post提交方式 -->
<form action="index.html" method="post"></form>
<!-- 定义文本输入框 -->
<input type="text">
<!-- 定义密码输入框 -->
<input type="password">
<!-- 定义单选框 -->
<input type="radio" name="q">
<input type="radio" name="q">
<input type="radio" name="q">
<!-- 定义提交按钮(两种方式) -->
<input type="submit">
<input type="button" value="提交">
<!-- 定义复选框 -->
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<!-- 定义上传文件 -->
<input type="file">
<!-- 定义下拉框 -->
<select name="" id="">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
</select>
<!-- TODO表格-->
<table border="1" width="300px" cellspacing="10px" cellpadding="10px">
<th colspan="3">表格头</th>
<tr>
<td colspan="2">2</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td colspan="2">3</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td rowspan="2">3</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
</tr>
</table>
<br/><br/><br/>
<style>
.ziti {
font-weight: lighter; /*字体细*/
font-weight: bold; /*字体粗*/
font-weight: normal; /*字体正常*/
font-style: italic; /*字体倾斜*/
font-style: normal; /*字体不倾斜*/
font-size: 20px; /*字体尺寸*/
}
</style>
<div class="ziti">01字体样式</div>
<!-- 01字体 细、粗、正常字体、倾斜、不倾斜、尺寸 -->
<br/><br/>
<style>
.touying {
text-shadow: 3px 3px yellowgreen; /*向x正半轴打光3像素，向y正半轴打光3像素*/
box-shadow:-10px -10px 10px -5px red; /*向x负半轴打光10像素，向y负半轴打光10像素，模糊的10，向内收缩5px，*/
/*box-shadow:-10px -10px 10px -5px red,10px 10px 10px -5px blue; 整个盒子打光*/
}
</style>
<div class="touying" style="width: 150px;height: 50px;border: 1px solid red;text-align: center;line-height: 50px;">02盒子投影</div>
<!-- 02文字投影 过后盒子左边上边阴影 -->
<br/><br/>
<style>
.align {
text-indent: 50px; /*首行缩进*/
vertical-align: middle; /*垂直对齐*/
line-height: 30px; /*行高*/
letter-spacing: 5px; /*文字间距*/
text-align: center; /*文字居中对齐*/
text-align: right; /*文字居右对齐*/
text-align: justify; /*文字两端对齐*/
text-align-last: justify ; /*最后一行两端对齐*/
}
</style>
<div class="align" style="width: 500px;border: 1px solid red;">
03液体之火让你若梦若醒，飘飘欲仙让天地颠倒让世界旋转。把人类历史浇灌的跌宕起伏，将琴棋书画熏染的色彩斑斓，
醉了刘伶狂了诗仙张扬了曹孟德书写了鸿门宴，湿了清明杏花雨瘦了海棠李易安。景阳冈上助武松三拳毙虎，浔阳楼头纵宋江题诗造反。
你啊！成全了多少英雄豪杰，放倒了多少村夫莽汉。歌舞与你相佐美色与你为伴。催诗情万丈壮文人斗胆，有人借你发疯有人借你夺权。
有时你只是一个道具，烘托一下谈判桌上的氛围。有时你更像一种暗器，把贪杯的对手麻翻。
你呀！既入朱门豪宅又进村舍陋院，既流溢皇室的金樽又盛满农家的粗碗。愁也要你喜也要你，洞房花烛夜、他乡遇故知、金榜题名时、迁徙流放的囚犯、
落魄的文人骚客、得志的朝廷大员都是你的知己。你的伙伴甚至即将上路的死囚都要你为之饯别，因为你耽误了多少大事，因为你弄出了多少冤案。
因为你鲜活了多少逸事趣闻，因为你催生了多少佳作名篇。更因为你造就了多少人的肝癌而魂归天堂。真的是成也有你败也有你，生也有你死也有你。
你这浇愁愁更愁的琼浆啊！穷也有你富也有你。千家万户还都离不开你。</div>
<!-- 03首行缩进、垂直对齐、行高、文字间距、文字居中右、两端对齐、最后一行两端对齐 -->
<br/><br/>
<style>
.position {
position: relative; /*相对定位*/
position: absolute; /*绝对定位*/
position: fixed; /*固定定位*/
left: 100px;
top: 500px;
left: auto; /*恢复默认*/
top: auto; /*恢复默认*/
}
</style>
<div class="position">04定位</div>
<!-- 04相对定位、绝对定位、固定定位、默认 -->
<br/><br/>
<style>
.overflow {
overflow: hidden; /*隐藏盒子超出内容部分*/
overflow-y: scroll; /*生成y轴滚动条*/
}
</style>
<div class="overflow" style="width:500px;height: 200px; border:1px solid red ">05液体之火让你若梦若醒，飘飘欲仙让天地颠倒让世界旋转。把人类历史浇灌的跌宕起伏，将琴棋书画熏染的色彩斑斓，
醉了刘伶狂了诗仙张扬了曹孟德书写了鸿门宴，湿了清明杏花雨瘦了海棠李易安。景阳冈上助武松三拳毙虎，浔阳楼头纵宋江题诗造反。
你啊！成全了多少英雄豪杰，放倒了多少村夫莽汉。歌舞与你相佐美色与你为伴。催诗情万丈壮文人斗胆，有人借你发疯有人借你夺权。
有时你只是一个道具，烘托一下谈判桌上的氛围。有时你更像一种暗器，把贪杯的对手麻翻。
你呀！既入朱门豪宅又进村舍陋院，既流溢皇室的金樽又盛满农家的粗碗。愁也要你喜也要你，洞房花烛夜、他乡遇故知、金榜题名时、迁徙流放的囚犯、
落魄的文人骚客、得志的朝廷大员都是你的知己。你的伙伴甚至即将上路的死囚都要你为之饯别，因为你耽误了多少大事，因为你弄出了多少冤案。
因为你鲜活了多少逸事趣闻，因为你催生了多少佳作名篇。更因为你造就了多少人的肝癌而魂归天堂。真的是成也有你败也有你，生也有你死也有你。
你这浇愁愁更愁的琼浆啊！穷也有你富也有你。千家万户还都离不开你。</div>
<!-- 05影藏盒子超出内容、生y轴滚动条(注:英文无法自动换行) -->
<br/><br/><br/><br/><br/><br/><br/><br/>
<style>
.display {
display: block; /*转化块元素*/
display: inline-block; /*转化行内块元素*/
display: inline; /*转化行内元素*/
display: none; /*隐藏元素*/
}
</style>
<div class="display">06隐藏元素</div>
<!-- 06转化块元素、转化行内元素、转化行内块、隐藏元素(block显示) -->
<br/><br/>
<style>
.af::before {
content: "前面添加";
display: block;
clear: both;
}
.af::after {
content: "后面添加";
display: block;
clear: both;
}
</style>
<div class="af">07伪类</div>
<!-- 07使用伪类器在盒子前面和后面添加清楚浮动 --> <!--content、display、clear必写-->
<br/><br/>
<style>
.clear {
display: block; /*解决高度塌陷其一*/
display: table; /*解决高度塌陷其二*/
overflow: hidden; /*解决高度塌陷其三*/
position: relative; /*解决高度塌陷其四*/
}
</style>
<div style="clear:both"></div> <!--元素解决法-->
<div class="clear">08解决盒子高度塌陷的几种方法</div>
<!-- 08解决高度塌陷的几种方法 -->
<br/><br/>
<style>
.mayi {
text-decoration: overline; /*上线*/
text-decoration: line-through; /*中线*/
text-decoration: underline; /*下线*/
text-decoration:none; /*不线*/
}
</style>
<div class="mayi">09蚂蚁线</div>
<!-- 09上线、中线、下线、不线 -->
<br/><br/>
<style>
.bacgroud {
background: url(""); /*背景图*/
background: repeat no-repeat repeat-x ; /*平铺默认，不平铺，横向平铺*/
background-size: 20px 20px; /*更改图片尺寸*/
background-position: 20px 20px ; /*扣取精灵图*/
background: rgb(0,0,0,.1); /*背景半透明*/
}
</style>
<div class="bacgroud" style="width: 100px;height: 100px;">10背景设置</div>
<!-- 10背景图、平铺方式(默认，不平铺，横向平铺) 图片尺寸 扣取精灵图 背景半透明-->
<br/><br/>
<style>
.boder::before{ /*在前面添加一条绿色粗线*/
content: "";
display: block;
clear: both;
border: 5px solid green;
}
.boder {
border-style: solid; /*设置线型*/
border-color: yellow; /*设置线色*/
border-bottom-width: 10px; /*底部宽10px*/
border-top-left-radius: 50%; /*左上角画圆弧*/
border-radius: 50%; /*画圆*/
}
</style>
<div class="boder" style="width: 200px; height: 200px;">11边框设置</div>
<!-- 11在前面添加一条绿色粗线 设置线型号 设置颜色 设置下边框宽 左上角画圆弧 画圆(想一下长方形画圆px和%区别) -->
<br/><br/>
<style>
.max {
max-width: 1000px; /*最大宽*/
min-width: 500px; /*最小宽*/
}
</style>
<div class="max">12屏幕适配宽</div>
<!-- 12屏幕适配 最大宽最小宽 -->
<br/><br/>
<style>
.sizing {
box-sizing: content-box; /*标准盒子*/
box-sizing: border-box; /*IE盒子 #不撑开盒子原有宽高，内盒子不再减去内外边距等*/
}
</style>
<div class="sizing">13装箱尺寸</div>
<!-- 13标准盒子模型、IE盒子模型 -->
<br/><br/>
<style>
.a:link{} /*未访问时的状态*/
.a:hover{} /*悬停时的状态*/
.a:active{} /*点击时的状态*/
.a:visited{} /*点击过后的状态*/
</style>
<a class="a">14鼠标形状</a>
<!-- 14未访问状态、悬停、点击时、点击过 -->
<br/><br/>
<style>
.openg:nth-child(2n){} /*选择偶数*/
.openg:nth-child(2n+1){} /*选择奇数*/
.openg:first-child{} /*选择第一个*/
.openg:last-child{} /*选择最后一个*/
</style>
<div class="openg">15选择器</div>
<!-- 15选择偶数、选择奇数、选择第一个、选择最后一个。(当父级内部，元素不统一时选择器失效) -->
<br/><br/>
<style>
.text {
object-fit: cover; /*图片裁剪*/
}
/* ul>li */
</style>
<div class="text" style="background-color: aqua;width: 300px;height: 20px;line-height: 20px;">16图片裁剪</div>
<!--16图片裁剪 -->
<br/><br/>
<style>
.flex {
display: flex; /*设置弹性盒子 默认靠左*/
justify-content: right; /*靠右分布*/
justify-content: center; /*居中*/
justify-content: space-between; /*两端对齐*/
align-items: flex-end; /*靠下*/
align-items: center; /*居中*/
align-items: flex-start; /*靠上*/
flex-shrink: 0; /*不被压缩*/
flex-grow: 1; /*自增长*/
flex-wrap: wrap; /*可以换行*/
}
</style>
<div class="flex" style="width: 200px;height: 200px;border: 1px solid;">18Flex布局</div>
<!-- 18设置为弹性盒子 靠右分布 居中 两端分布 靠下 垂直居中 靠上 不被压缩 自增长 换行-->
<br/><br/>
<style>
@media (max-width:1000px) {}
</style>
<div class="mt">19媒体查询</div>
<!-- 19媒体查询 -->
<br/><br/>
<style>
.transform {
transform-origin: 20px 20px; /*设置元素基点位置*/
transform-style: preserve-3d; /*设置三维结构*/
transform: translate(30px,30px);/*原位置移动*/
transform: rotateZ(20deg) scale(2); /*Z轴旋转20° 放大2倍*/
}
</style>
<div class="transform">20变换</div>
<!-- 20设置元素基点位置 设置三维结构 原位置位移 旋转 放大 -->
<br/><br/>
<style>
.transition {
transition: all 3s linear ease steps(5) 2s alternate;
}
</style>
<div class="transition">21过度</div>
<!-- 21过度3秒 匀速 缓冲 步数 延时2秒 停留最后位置 --> <!--让图形动起来-->
<br/><br/>
<style>
@keyframes name {
from{}
to{}
}
@keyframes name {
0%{}
25%{}
50%{}
100%{}
}
.animation {
animation: name 2s ease 3s alternate
}
</style>
<div class="animation"></div>
<!-- 22动画帧的语法 -->
</body>
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
