分类前端下的文章 - 蘇阿細

登录

标签搜索

蘇阿細

累计撰写 402 篇文章
累计收到 4 条评论

搜索到 98 篇与的结果

2024-03-05
鼠标相关的属性 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>鼠标相关的属性</title> <style> div { width: 400px; height: 400px; background-color: skyblue; cursor: url("../images/touxiang.jpg"), pointer; } button { cursor: pointer; } </style> </head> <body> <div> 把鼠标放进来看一看 <input type="text"> <a href="#">百度</a> <button>点我</button> </div> </body> </html>
- 2024年03月05日
- 79 阅读
- 0 评论
- 0 点赞
2024-03-05
背景相关的属性 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>背景相关的属性</title> <style> div { width: 400px; height: 400px; border: 2px solid black; font-size: 40px; /* 默认值：transparent */ /* background-color: skyblue; */ /* background-image: url("../images/touxiang.jpg"); */ /* 设置背景图片的重复方式 */ /* background-repeat: no-repeat; */ /* 控制背景图片的位置第一种写法：关键词 */ /* background-position: center; */ /* 控制背景图片的位置第二种写法：用具体的像素值 */ /* background-position: 150px 150px; */ /* 复合属性 */ background: skyblue url("../images/touxiang.jpg") no-repeat 150px 150px; } </style> </head> <body> <div>孙笑川</div> </body> </html>
- 2024年03月05日
- 72 阅读
- 0 评论
- 0 点赞
2024-03-05
表格相关的属性 1. 表格相关的属性<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>表格相关的属性</title> <style> table { /* border-width: 2px; border-color: black; border-style: solid; */ border: 2px green solid; } td,th { border: 2px green solid; } h2 { border: 3px red solid; } span { border: 3px skyblue dotted; } </style> </head> <body> <h2>边框相关的属性不仅仅是表格才能使用</h2> <span>药水哥</span> <table> <caption>人员信息</caption> <thead> <tr> <th>序号</th> <th>姓名</th> <th>年龄</th> <th>政治面貌</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>孙笑川</td> <td>33</td> <td>党员</td> </tr> <tr> <td>2</td> <td>刘波</td> <td>30</td> <td>团员</td> </tr> <tr> <td>3</td> <td>药水哥</td> <td>30</td> <td>群众</td> </tr> </tbody> </table> </body> </html>2. 表格独有的属性<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>表格独有的属性</title> <style> table { border: 2px green solid; width: 500px; /* 控制表格的列宽 */ table-layout: fixed; /* 单元格间距（生效的前提是：不能合并边框） */ border-spacing: 10px; /* 合并相邻单元格的边框 */ border-collapse: collapse; /* 隐藏没有内容的单元格（生效的前提是：不能合并边框） */ empty-cells: hide; /* 设置表格标题的位置 */ caption-side: top; } td,th { border: 2px orange solid; } .number { width: 50px; height: 50px; } </style> </head> <body> <table> <caption>人员信息</caption> <thead> <tr> <th class="number">序号</th> <th>姓名</th> <th>年龄</th> <th>政治面貌</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>孙笑川</td> <td>33</td> <td>党员</td> </tr> <tr> <td>2</td> <td>刘波</td> <td></td> <td>团员</td> </tr> <tr> <td>3</td> <td>药水哥</td> <td>30</td> <td>群众</td> </tr> </tbody> </table> </body> </html>
- 2024年03月05日
- 41 阅读
- 0 评论
- 0 点赞
2024-03-05
列表相关的属性 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>列表相关的属性</title> <style> li { background-color: skyblue; } ul { /* 列表符号 */ /* list-style-type: decimal; */ /* 列表符号的位置 */ /* list-style-position: outside; */ /* 自定义列表符号 */ /* list-style-image: url(""); */ /* 复合属性 */ list-style: decimal outside; } </style> </head> <body> <ul> <li>《凶手找到了，@带带大师兄》</li> <li>《一夜暴富》</li> <li>《白日做梦》</li> </ul> </body> </html>
- 2024年03月05日
- 26 阅读
- 0 评论
- 0 点赞
2024-03-05
常用文本属性 1. 文本颜色<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>文本颜色</title> <style> div { font-size: 100px; } .test1 { color: rgb(255, 0, 0); } .test2 { color: rgba(255, 0, 0, 0.5); } .test3 { color: #0000FF; } .test4 { color: #0000FF88; } .test5 { color: hsl(0, 100%, 50%); } .test6 { color: hsl(0, 100%, 50%, 0.5); } </style> </head> <body> <div class="test1">孙笑川1</div> <div class="test2">孙笑川2</div> <div class="test3">孙笑川3</div> <div class="test4">孙笑川4</div> <div class="test5">孙笑川5</div> <div class="test6">孙笑川6</div> </body> </html>2. 文本间距<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>文本间距</title> <style> div { font-size: 30px; } .test1 { /* 字母间距 */ letter-spacing: 20px; } .test2 { /* 单词间距（通过空格识别单词） */ word-spacing: 12px; } </style> </head> <body> <div>hello world！孙笑川</div> <div class="test1">hello world！孙笑川</div> <div class="test2">hello world！孙笑川</div> </body> </html>3. 文本修饰<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>文本修饰</title> <style> div { font-size: 40px; } .test1 { /* 上划的红色波浪线 */ text-decoration: overline wavy red; } /* 下划的绿色虚线 */ .test2 { text-decoration: underline dotted green; } /* 删除线 */ .test3 { text-decoration: line-through; } .test4, ins, del { /* 没有各种线 */ text-decoration: none; } </style> </head> <body> <div class="test1">孙笑川1</div> <div class="test2">孙笑川2</div> <div class="test3">孙笑川3</div> <div class="test4">孙笑川4</div> <ins>孙笑川4</ins> <del>孙笑川4</del> </body> </html>4. 文本缩进<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>文本缩进</title> <style> div { font-size: 40px; text-indent: 80px; } </style> </head> <body> <div>欢迎来到家里蹲大学！欢迎来到家里蹲大学！欢迎来到家里蹲大学！欢迎来到家里蹲大学！欢迎来到家里蹲大学！欢迎来到家里蹲大学！欢迎来到家里蹲大学！欢迎来到家里蹲大学！</div> </body> </html>5. 文本对齐—水平<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>文本对齐_水平</title> <style> div { font-size: 40px; background-color: aquamarine; text-align: right; } </style> </head> <body> <div>孙笑川</div> </body> </html>6. font-size<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>font-size</title> </head> <body>  </body> </html>7. 行高<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>行高</title> <style> .test { font-size: 40px; background-color: skyblue; /* 第一种写法：值为像素值 */ /* line-height: 40px; */ /* 第二种写法：值为normal */ /* line-height: normal; */ /* 第三种写法：值为数值，参考自身font-size的倍数 */ /* line-height: 1.5; */ /* 第三种写法：值为百分比 */ /* line-height: 150%; */ } </style> </head> <body> <div class="test">sunxiaochuan孙笑川，带带大师兄，药水哥yaoshuigesunxiaochuan孙笑川，带带大师兄，药水哥yaoshuigesunxiaochuan孙笑川，带带大师兄，药水哥yaoshuige</div> </body> </html>8.行高注意事项<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>行高注意事项</title> <style> /* 1.行高过小，文字会重叠，且最小值为0，不能为负数 */ /* #test { font-size: 40px; background-color: skyblue; line-height: 60px; } */ /* 2.行高是可以继承的 */ /* #test { font-size: 40px; background-color: skyblue; line-height: 1.5; } span { font-size: 200px; color: red; } */ /* line-height 和 height 的关系：设置了height，高度就是height的值没有设置height，高度就是 line-height * 行数 */ /* #test { font-size: 40px; background-color: yellowgreen; line-height: 100px; height: 300px; } */ /* 没有设置height，高度是 line-height * 行数，此处 line-height 为0，所以也就是为什么背景色没有了的原因 */ #test { font-size: 40px; background-color: skyblue; line-height: 0px; } /* 应用场景： 1.调整多行文字的间距 2.单行文字的垂直居中 3. */ </style> </head> <body>    <div id="test">孙笑川sunxiaochuan带带大师兄daidaidashixoiong刘波药水哥药水哥刘波孙笑川sunxiaochuan带带大师兄daidaidashixoiong刘波药水哥药水哥刘波</div> </body> </html>10. 文本对齐—垂直<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>文本对齐_垂直</title> <style> /* 1.顶部：无需任何属性，在垂直方向上，默认就是顶部对齐 2.居中：对于单行文字，让 height=line-height即可 3.底部：对于单行文字，目前临时的解决方案是：让 line-height = (height * 2) - x x是根据字体族动态决定的一个值 */ div { font-size: 40px; background-color: skyblue; height: 400px; line-height: 750px; } </style> </head> <body> <div>孙笑川</div> </body> </html>11. vertical-align<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>vertical-align</title> <style> /* vertical-align 用于指定同一行元素之间，或表格单元格内文字的垂直对齐方式注：不能控制块级元素 */ div { font-size: 100px; height: 300px; background-color: skyblue; } span { font-size: 40px; background-color: orange; vertical-align: top; } img { height: 150px; /* vertical-align: middle; */ } .test { vertical-align: top; } </style> </head> <body> <div> sunxiaochuan孙笑川x<span>x是根据字体族动态决定的一个值</span> </div> <hr> <div> sunxiaochuan孙笑川x<img src="../images/IMG_0003.JPG"> </div> <hr> <table border="1" cellspacing="0"> <caption>人员信息</caption> <thead> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <th height="200px" class="test">孙笑川</th> <th>男</th> <th>33</th> </tr> <tr> <th>刘波</th> <th>男</th> <th>30</th> </tr> <tr> <th>药水哥</th> <th>男</th> <th>29</th> </tr> </tbody> </table> </body> </html>
- 2024年03月05日
- 39 阅读
- 0 评论
- 0 点赞
2024-03-05
字体常用属性 1. 字体大小<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>字体大小</title> <style> body { font-size: 20px; } .test1 { font-size: 40px; } /* .test2 { font-size: 30px; } .test3 { font-size: 20px; } .test4 { font-size: 10px; } */ </style> </head> <body> <div class="test1">孙笑川1</div> <div class="test2">孙笑川2</div> <div class="test3">孙笑川3</div> <div class="test4">孙笑川4</div> </body> </html>2. 字体族<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>字体族</title> <style> /* 字体族：衬线字体（笔锋强劲的那种）/非衬线字体可以设置多个字体，浏览器解析时按从左到右的顺序查找，没找到就使用后面的，且通常在最后写上 serif 或 sans-serif作为这一组的标识，如果都没找到，浏览器会联合系统选择一种合适的字体 */ .test1 { font-size: 100px; font-family: "微软雅黑"; } .test2 { font-size: 100px; font-family: "楷体"; } .test3 { font-size: 100px; font-family: "宋体"; } .test4 { font-size: 100px; font-family: "华文彩云"; } .test5 { font-size: 100px; font-family: "STCaiyun", "STHupo", "Microsoft YaHei", sans-serif; } </style> </head> <body> <div class="test1">孙笑川1</div> <div class="test2">孙笑川2</div> <div class="test3">孙笑川3</div> <div class="test4">孙笑川4</div> <div class="test5">孙笑川4</div> </body> </html>3. 字体风格<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>字体风格</title> <style> .test1 { font-size: 100px; font-style: normal; } .test2 { font-size: 100px; font-style: italic; } .test3 { font-size: 100px; font-style: oblique; } em { font-size: 100px; } </style> </head> <body> <div class="test1">孙笑川1</div> <div class="test2">孙笑川2</div> <div class="test3">孙笑川3</div> <em>孙笑川4</em> </body> </html>4. 字体粗细<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>字体粗细</title> <style> div { font-size: 100px; } .test1 { font-weight: lighter; } .test2 { font-weight: normal; } .test3 { font-weight: bold; } .test4 { font-weight: bolder; } .test5 { font-weight: 300; } </style> </head> <body> <div class="test1">孙笑川1</div> <div class="test2">孙笑川2</div> <div class="test3">孙笑川3</div> <div class="test4">孙笑川4</div> <div class="test5">孙笑川5</div> </body> </html>5. 字体复合属性<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>字体复合属性</title> <style> /* 编写规则： 1.字体大小、字体族必须写上 2.字体族必须是最后一位，字体大小必须是倒数第二位 3.各个属性间用空格隔开 */ .test1 { font: bold italic 100px "华文彩云1","华文琥珀"; } </style> </head> <body> <div class="test1">孙笑川1</div> </body> </html>
- 2024年03月05日
- 26 阅读
- 0 评论
- 0 点赞
2024-03-05
像素、颜色 1. 像素<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>像素</title> <style> .test { width: 100px; height: 100px; background-color: red; } </style> </head> <body> <div class="test"></div> </body> </html>2. 颜色表示方式—颜色名<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>颜色_第1种表示_颜色名</title> <style> .test { color: red; } </style> </head> <body> <h2 class="test">孙笑川</h2> </body> </html>3. 颜色表示方式—rgb/rgba<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>颜色_第2种表示_rgb或rgba</title> <style> /* 若三种颜色的值相同，呈现的是灰色，值越大，灰色越浅 */ .test1 { color: rgb(255, 0, 0); } .test2 { color: rgb(0, 255, 0); } .test3 { color: rgb(0, 0, 255); } .test4 { color: rgb(138, 43, 226); } .test5 { color: rgba(138, 43, 226, 0.5); } </style> </head> <body> <h2 class="test1">孙笑川1</h2> <h2 class="test2">孙笑川2</h2> <h2 class="test3">孙笑川3</h2> <h2 class="test4">孙笑川4</h2> <h2 class="test5">孙笑川5</h2> </body> </html>4. 颜色表示方式—HEX/HEXA<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>颜色_第3种表示_HEX或HEXA</title> <style> /* 格式 #ff0000 每一位数字的取值范围是0 ~ f，即：(1,2,3,4,5,6,7,8,9,a,b,c,d,e,f) 所以每一种光的最小值是00，最大值是ff */ .test1 { color: #FF0000; } .test2 { color: #00FF00; } .test3 { color: #0000FF; } .test4 { color: #c7edcc; } .test5 { color: rgba(138, 43, 226, 0.5); } </style> </head> <body> <h2 class="test1">孙笑川1</h2> <h2 class="test2">孙笑川2</h2> <h2 class="test3">孙笑川3</h2> <h2 class="test4">孙笑川4</h2> <h2 class="test5">孙笑川5</h2> </body> </html>5. 颜色表示方式—HSL/HSLA<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>颜色_第4种表示_HSL或HSLA</title> <style> /* hsl(色相, 饱和度, 亮（明）度) 色相：取值范围 0 - 360度饱和度：0% 全灰，100% 没有灰亮度：0% 亮度没了黑色，100% 太亮了白色 */ .test1 { color: hsl(0deg, 100%, 50%); } .test2 { color: hsl(60deg, 100%, 50%); } .test3 { color: hsl(120deg, 100%, 50%); } .test4 { color: hsl(0deg, 50%, 50%); } .test5 { color: hsla(0deg, 50%, 50%, 60%); } </style> </head> <body> <h2 class="test1">孙笑川1</h2> <h2 class="test2">孙笑川2</h2> <h2 class="test3">孙笑川3</h2> <h2 class="test4">孙笑川4</h2> <h2 class="test5">孙笑川5</h2> </body> </html>
- 2024年03月05日
- 31 阅读
- 0 评论
- 0 点赞
2024-03-05
三大特性 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>CSS三大特性</title> </head> <body>  </body> </html>
- 2024年03月05日
- 22 阅读
- 0 评论
- 0 点赞

蘇阿細

402 文章数

4 评论量

标签

舔狗日记