溯琳-CSDN博客

原创 CSS3新增结构伪类选择器

CSS3新增结构伪类选择器CSS3新增结构伪类选择器CSS3新增结构伪类选择器-nth-childCSS3新增选择器nth-type-of CSS3新增结构伪类选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"

2021-04-27 23:31:27 145 4

原创 CSS3新增属性选择器

CSS3新增属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" />

2021-04-27 10:16:28 238

原创 HTML5新增input表单

HTML5新增input表单input表单表单属性 input表单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" co

2021-04-27 00:00:25 105

原创 HTML5音频

HTML5音频 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" />

2021-04-18 00:10:04 642 9

原创 HTML5视频

HTML5视频 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" />

2021-04-17 00:31:01 744 4

原创 CSS小技巧、小知识

CSS小技巧、小知识鼠标样式图片文字垂直居中对齐文本域防拖拽解决图片底部有空白缝隙单行文本溢出显示省略号多行文本溢出显示省略号鼠标样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <m

2021-04-14 19:30:12 78 1

原创 CSS三角形

CSS三角形CSS三角形常用样式直角三角形 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-

2021-04-14 10:37:18 498

原创 CSS字体图标

CSS字体图标字体图标的和字体的属性相同首先需要下载图标推荐：icomoon字库http://icomoon.io 阿里iconfont字库http://www.iconfontcn/ icomoon字库选完自己想要的图标后点Generate Font 然后点Downlod下载将下载好的压缩包解压 .把下载包里面的fonts文件夹放入页面根目录下将style.css里面的这一部分复制到CSS或style里然后打开刚才压缩包里的demo.html 然后复制要用的图标的小方块到ht

2021-04-13 22:19:41 130

原创 CSS精灵图

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"

2021-04-13 21:32:41 78

原创 CSS元素的显示和隐藏

CSS元素的现实和隐藏displayvisibilityoverflow display <!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

2021-04-13 10:17:27 113 3

原创 CSS定位

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=devic

2021-04-12 21:39:16 136 4

原创 CSS浮动及清除浮动

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

2021-04-11 17:26:42 195 4

原创 CSS盒模型注意点

块级元素水平居中 .div{width:100px; margin: 0 auto; 行内元素或者行内块元素水平居中给其父元素添加text-align:center即可使用margin时嵌套块元素垂直外边距的塌陷可以为其父元素加overflow:hidden; 注意:行内元素为了照顾兼容性,尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了. ...

2021-04-10 23:45:01 98

原创 CSS元素显示模式

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=devic

2021-04-10 20:57:24 93 1

原创 CSS背景

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-sc

2021-04-10 20:45:52 2046 16

原创 CSS选择器总结

CSS选择器总结CSS基础选择器CSS复合选择器博主总结 CSS基础选择器 CSS复合选择器 CSS基础选择器 CSS复合选择器 ps：图片来自黑马程序员

2021-04-10 19:57:22 70

原创 CSS复合选择器

CSS复合选择器后代选择器子代选择器并集选择器伪类选择器链接伪类选择器:focus 伪类选择器后代选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="wid

2021-04-09 23:02:09 118 1

原创 Web大佬使用的快速敲代码方式——Emmet语法

Web Emmet语法注释部分为说明 <!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

2021-04-09 22:48:05 214 3

原创 CSS引入方式与文本属性

CSS引入方式与文本属性引入方式内部样式表行内样式表外部样式表文本属性文本对齐文本缩进文本颜色行间距装饰文本引入方式内部样式表 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conten

2021-04-09 17:35:14 85

原创 CSS字体

CSS字体字体系列字体大小字体粗细字体样式复合属性字体系列 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>字体系列</title> <style type="text/css"> p { font-family: 楷体; } h1 { font-family: "microsoft yahei",楷

2021-04-08 19:18:10 98

原创 CSS基础选择器

CSS基础选择器标签选择器类选择器ID选择器通配符选择器 h1 {color: aqua; font-size: 20px;} 选择器{属性：属性值;属性:属性值;} 标签选择器 p {color: red;} 标签选择器是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。标签选择器可以将某一类标签全部选择出来设置属性。优点：快速的将同类型的标签同一样式。缺点：不能有差异化的设计。类选择器类选择器使用class属性来调用class类。在HTML中 &lt

2021-04-07 23:24:14 310 7

原创 HTML注册页面

只用HTML写的注册页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>恋爱</title> </head> <body> <h3>青春不常在，抓紧谈恋爱</h3> <table border="0" cellspacing="5" cellpadding="5" width="600px

2021-04-07 21:59:36 242 1

原创 HTMLform表单

表单 <form action="index.php" method="post">  用户名：<input type="text" name="username" value="请输入用户名"/><br>  密码：&lt

2021-04-07 19:13:55 115

原创 HTML学习笔记1 特殊符号

HTML学习笔记1字符集HTML标签图片img文本格式化标签特殊符号超链接表格列表字符集 <meta charset="utf-8">  HTML标签 <h1>----<h6> <h1>一级标题</h1> <!-- 作为标题使用，根据重要性递减

2021-04-06 22:57:13 179

原创个人简历

个人简历 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>个人简历</title> <style type="text/css"> *{ margin: 50px auto; padding: 0; } .a,.b,.c,.d,.e{ background-color:skyblue; }

2021-04-05 22:03:49 2024 16

溯琳的博客