Compare commits
merge into: lijikun:master
lijikun:master
lijikun:zhangyong
pull from: lijikun:zhangyong
lijikun:master
lijikun:zhangyong
No commits in common. 'master' and 'zhangyong' have entirely different histories.
23 changed files with 827 additions and 3 deletions
-
3README.md
-
BINsrc/CssStudy/1.webp
-
BINsrc/CssStudy/2.webp
-
BINsrc/CssStudy/3.png
-
25src/CssStudy/cssstudy1.html
-
18src/CssStudy/cssstudy2.html
-
29src/CssStudy/css新特性.html
-
8src/CssStudy/public.css
-
40src/CssStudy/关系选择器.html
-
43src/CssStudy/动画.html
-
39src/CssStudy/媒体查询.html
-
22src/CssStudy/字体属性.html
-
62src/CssStudy/定位.html
-
64src/CssStudy/弹性盒子.html
-
31src/CssStudy/文本属性.html
-
57src/CssStudy/文档流.html
-
26src/CssStudy/盒子模型.html
-
54src/CssStudy/背景属性.html
-
46src/CssStudy/表格属性.html
-
68src/CssStudy/选择器.html
-
35src/CssStudy/雪碧图.html
-
BINsrc/htmlStudy/1.jfif
-
160src/htmlStudy/webtudy1.html
@ -1,3 +0,0 @@ |
|||||
# FrontendLearning |
|
||||
|
|
||||
练习仓库 |
|
||||
|
After Width: 368 | Height: 161 | Size: 57 KiB |
@ -0,0 +1,25 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en"> |
||||
|
|
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<title>Document</title> |
||||
|
<style> |
||||
|
a{ |
||||
|
color:orange; |
||||
|
font-size: 30px; |
||||
|
} |
||||
|
</style> |
||||
|
</head> |
||||
|
|
||||
|
<body> |
||||
|
<p style="color: red; font-size: 20px;">这是内联样式</p> |
||||
|
<!-- 缺点：缺乏整体性和规划性，不利于维护 --> |
||||
|
|
||||
|
<a>这是内部样式</a> |
||||
|
<!-- 再单个页面实现了统一维护和管理，但是再多个页面上会显得不够统一，混乱 --> |
||||
|
<a href="./cssstudy2.html">点击跳转外部样式</a> |
||||
|
</body> |
||||
|
|
||||
|
</html> |
||||
@ -0,0 +1,18 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en"> |
||||
|
|
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<title>Document</title> |
||||
|
<link rel="stylesheet" href="./public.css"> |
||||
|
</head> |
||||
|
|
||||
|
<body> |
||||
|
<p style="color: red; font-size: 20px;">这是外部样式</p> |
||||
|
<!-- CSS 的优先级顺序是从低到高依次为外部样式表、内部样式表、内联样式。内联样式直接写在 HTML 元素的 style 属性中，所以它离目标元素最近，优先级也就最高。 --> |
||||
|
<a>这是外部样式</a> |
||||
|
<!-- 外部样式可以通过一个文件进行整个网页的样式调整，极大地增强了复用性和可维护性 --> |
||||
|
</body> |
||||
|
|
||||
|
</html> |
||||
@ -0,0 +1,29 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<title>Document</title> |
||||
|
<style> |
||||
|
.d1{ |
||||
|
width: 200px; |
||||
|
height: 200px; |
||||
|
background-color: red; |
||||
|
/* 设置圆角属性，为50%，100%是为一个圆 */ |
||||
|
border-radius: 20px; |
||||
|
} |
||||
|
.d2{ |
||||
|
width: 200px; |
||||
|
height: 200px; |
||||
|
background-color: red; |
||||
|
|
||||
|
border-radius: 20px; |
||||
|
box-shadow: 0 10px 20px blue; |
||||
|
} |
||||
|
</style> |
||||
|
</head> |
||||
|
<body> |
||||
|
<div class="d1"></div> |
||||
|
<div class="d2"></div> |
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,8 @@ |
|||||
|
a{ |
||||
|
font-size: large; |
||||
|
color: blue; |
||||
|
} |
||||
|
p{ |
||||
|
font: 100; |
||||
|
color: red; |
||||
|
} |
||||
@ -0,0 +1,40 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<title>Document</title> |
||||
|
<style> |
||||
|
/* 后代选择器 */ |
||||
|
ul li p{ |
||||
|
color: blueviolet; |
||||
|
} |
||||
|
/* 子代选择器 */ |
||||
|
ul>li{ |
||||
|
color: red; |
||||
|
} |
||||
|
/* 相邻兄弟选择器 */ |
||||
|
li+p{ |
||||
|
color: blue; |
||||
|
} |
||||
|
/* 通用兄弟选择器 */ |
||||
|
p~li{ |
||||
|
color:brown |
||||
|
} |
||||
|
</style> |
||||
|
</head> |
||||
|
<body> |
||||
|
<ul> |
||||
|
<li> |
||||
|
<p>你好</p> |
||||
|
<p>我是</p> |
||||
|
<a href="#">aaaaaaaaaaaaa</a> |
||||
|
<p>子代的子代</p> |
||||
|
</li> |
||||
|
<p>子代1</p> |
||||
|
<p>子代2</p> |
||||
|
<li>hahaha</li> |
||||
|
<a href="#">aaaaaaaaaa</a> |
||||
|
</ul> |
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,43 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<title>Document</title> |
||||
|
<style> |
||||
|
div{ |
||||
|
width: 200px; |
||||
|
height: 200px; |
||||
|
/*animation代表引入动画样式，mydh为自定义动画名，duration为动画持续时间； timing-function为动画播放速率（可取值为 ease逐渐变慢； linear匀速； ease-in加速； ease-out减速； ease-in-out先加速后减速） */ |
||||
|
/* delay表示延时执行时间； iteration-count为循环次数，infinite代表无限次执行 */ |
||||
|
animation: mydh 2s linear 0s infinite; |
||||
|
} |
||||
|
div:hover{ |
||||
|
/* 控制播放状态，running表示播放，paused代表暂停 */ |
||||
|
animation-play-state: paused; |
||||
|
background-color: orange; |
||||
|
} |
||||
|
/* |
||||
|
使用 @keyframes创建动画，后跟自定义的动画名；下面的百分比可自定义添加对动画进度进行控制 */ |
||||
|
@keyframes mydh { |
||||
|
0%{ |
||||
|
/* 表示透明度。范围为0——1 */ |
||||
|
opacity: 0.1; |
||||
|
background-color: brown; |
||||
|
} |
||||
|
50%{ |
||||
|
opacity: 0.5; |
||||
|
background-color: green; |
||||
|
} |
||||
|
100%{ |
||||
|
opacity: 1; |
||||
|
background-color: blue; |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</style> |
||||
|
</head> |
||||
|
<body> |
||||
|
<div></div> |
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,39 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en"> |
||||
|
|
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<title>Document</title> |
||||
|
<style> |
||||
|
@media screen and (max-width: 768px) { |
||||
|
|
||||
|
/* 设备小于768px加载样式 */ |
||||
|
body { |
||||
|
background-color: red; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@media screen and (max-width: 992px) and (min-width: 768px) { |
||||
|
|
||||
|
/* 设备小于768px但小于992px加载样式 */ |
||||
|
body { |
||||
|
background-color: pink; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@media screen and (min-width: 992px) { |
||||
|
|
||||
|
/* 设备大于992px加载样式 */ |
||||
|
body { |
||||
|
background-color: green; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
</head> |
||||
|
|
||||
|
<body> |
||||
|
|
||||
|
</body> |
||||
|
|
||||
|
</html> |
||||
@ -0,0 +1,22 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<title>Document</title> |
||||
|
</head> |
||||
|
<body> |
||||
|
<p style="color: red;">字体颜色</p> |
||||
|
<p style="color: #ff0000;">字体颜色</p> |
||||
|
<p style="color: rgb(255, 122, 0);">字体颜色</p> |
||||
|
<p style="color: rgba(255, 122, 0,.5);">字体颜色</p> |
||||
|
<p style="font-size: 50px ;">字体大小</p> |
||||
|
<p style="font-weight: bold ;">字体粗细</p> |
||||
|
<p style="font-weight: bolder ;">字体粗细</p> |
||||
|
<p style="font-weight: lighter ;">字体粗细</p> |
||||
|
<p style="font-weight: 700 ;">字体粗细</p> |
||||
|
<P style="font-style: normal;">字体样式</P> |
||||
|
<P style="font-style: italic;">字体样式</P> |
||||
|
<P style="font-family: 'Courier New', Courier, monospace; font-size: 50px;">字体</P> |
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,62 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<title>Document</title> |
||||
|
<style> |
||||
|
/* 相对定位,不会脱离文档流 */ |
||||
|
.d1{ |
||||
|
width: 200px; |
||||
|
height: 300px; |
||||
|
position: relative; |
||||
|
background-color: rebeccapurple; |
||||
|
left: 50px; |
||||
|
top: 100px; |
||||
|
} |
||||
|
/* 绝对定位：脱离文档流，每加一个绝对定位会加一层图层 */ |
||||
|
.d2{ |
||||
|
width: 100px; |
||||
|
height: 200px; |
||||
|
position: absolute; |
||||
|
background-color: red; |
||||
|
left: 50px; |
||||
|
top: 100px; |
||||
|
} |
||||
|
/* 固定定位：脱离图层且在文档的位置固定 */ |
||||
|
.d3{ |
||||
|
width: 100px; |
||||
|
height: 100px; |
||||
|
position: fixed; |
||||
|
background-color: blue; |
||||
|
left: 50px; |
||||
|
top: 100px; |
||||
|
} |
||||
|
|
||||
|
/* 相对定位和绝对定位是相对于设置了定位的父模块进行定位，如果父模块不具有定位，则继续向上进行查找，直到顶层文档 */ |
||||
|
.d4{ |
||||
|
width: 100px; |
||||
|
height: 200px; |
||||
|
position: fixed; |
||||
|
background-color: red; |
||||
|
left: 500px; |
||||
|
top: 200px; |
||||
|
} |
||||
|
.d5{ |
||||
|
width: 100px; |
||||
|
height: 100px; |
||||
|
position: relative; |
||||
|
background-color: blue; |
||||
|
left: 30px; |
||||
|
top: 10px; |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
|
</head> |
||||
|
<body> |
||||
|
<div class="d1"></div> |
||||
|
<div class="d2"></div> |
||||
|
<div class="d3"></div> |
||||
|
<div class="d4"><div class="d5"></div></div> |
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,64 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en"> |
||||
|
|
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<title>Document</title> |
||||
|
<style> |
||||
|
.maindiv { |
||||
|
width: 500px; |
||||
|
height: 500px; |
||||
|
background-color: aqua; |
||||
|
/* 开启弹性盒子 */ |
||||
|
display: flex; |
||||
|
/* row：横向从左到右排列（左对齐），默认的排列方式 |
||||
|
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面 |
||||
|
column：纵向排列 |
||||
|
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面*/ |
||||
|
flex-direction: row; |
||||
|
/* |
||||
|
start 弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放 |
||||
|
end 弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放 |
||||
|
center 弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出） |
||||
|
*/ |
||||
|
justify-content: center; |
||||
|
/* 垂直方向上的对齐方式，属性同上 */ |
||||
|
align-items: center; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.d1 { |
||||
|
width: 100px; |
||||
|
height: 100px; |
||||
|
background-color: red; |
||||
|
/* 按照比例分配空间 */ |
||||
|
flex:3; |
||||
|
} |
||||
|
|
||||
|
.d2 { |
||||
|
width: 100px; |
||||
|
height: 100px; |
||||
|
background-color: blue; |
||||
|
flex:2; |
||||
|
} |
||||
|
|
||||
|
.d3 { |
||||
|
width: 100px; |
||||
|
height: 100px; |
||||
|
background-color: green; |
||||
|
flex: 1; |
||||
|
} |
||||
|
</style> |
||||
|
</head> |
||||
|
|
||||
|
<body> |
||||
|
<div class="maindiv"> |
||||
|
<div class="d1"></div> |
||||
|
<div class="d2"></div> |
||||
|
<div class="d3"></div> |
||||
|
</div> |
||||
|
|
||||
|
</body> |
||||
|
|
||||
|
</html> |
||||
@ -0,0 +1,31 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<title>Document</title> |
||||
|
</head> |
||||
|
<body> |
||||
|
<!-- center; left; right; --> |
||||
|
<p style="text-align: center;">水平对齐方式</p> |
||||
|
|
||||
|
<p style="text-decoration: underline;">下划线</p> |
||||
|
<p style="text-decoration: overline;">上划线</p> |
||||
|
<p style="text-decoration: line-through;">删除线</p> |
||||
|
|
||||
|
<p style="text-transform: capitalize;">helloworld</p> |
||||
|
<p style="text-transform: uppercase;">ADXASlloworld</p> |
||||
|
<p style="text-transform: lowercase;">heASworld</p> |
||||
|
|
||||
|
|
||||
|
<p style="text-indent: 30px;">29日早晨到白天，全省多云转阵雨或雷阵雨；另外，29日早晨到上午，大连、丹东、葫芦岛地区局部有大雾或浓雾；全省最高气温25度到29度；全省最低气温22度到23度。 |
||||
|
|
||||
|
29日夜间到30日白天，沈阳、大连、鞍山、抚顺、本溪、丹东、营口、辽阳、铁岭地区和沈抚示范区有中雨，局部有大雨，个别乡镇（街道）有暴雨，其他地区有小雨或阵雨。 |
||||
|
|
||||
|
30日夜间到1日白天，大连、本溪、丹东地区有小雨到中雨，局部有大雨，其他地区有小雨或阵雨。 |
||||
|
|
||||
|
7月1日夜间，大连、抚顺、本溪、丹东地区及岫岩有小雨到中雨，局部大雨，朝阳地区多云，其他地区有阵雨或雷阵雨。</p> |
||||
|
|
||||
|
|
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,57 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en"> |
||||
|
|
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<title>Document</title> |
||||
|
<style> |
||||
|
.maindiv { |
||||
|
width: 200px; |
||||
|
height: 200px; |
||||
|
background-color: aqua; |
||||
|
} |
||||
|
|
||||
|
.d1 { |
||||
|
width: 100PX; |
||||
|
height: 100PX; |
||||
|
background-color: RED; |
||||
|
/* 脱离文档流之后，元素相当于在页面上面增加一个浮层来放置内容。此时可以理解为有两层页面，一层是底层的原页面，一层是脱 |
||||
|
离文档流的上层页面，所以会出现折叠现象; |
||||
|
浮动只能左右浮动 |
||||
|
*/ |
||||
|
float: right; |
||||
|
} |
||||
|
img{ |
||||
|
width: 150px; |
||||
|
float: left; |
||||
|
} |
||||
|
</style> |
||||
|
</head> |
||||
|
|
||||
|
<body> |
||||
|
<div class="maindiv"> |
||||
|
<div class="d1"></div> |
||||
|
<div class="d1"></div> |
||||
|
<div class="d1"></div> |
||||
|
</div> |
||||
|
<img src="./1.webp" alt=""> |
||||
|
<img src="./1.webp" alt=""> |
||||
|
</body> |
||||
|
|
||||
|
|
||||
|
<!-- 清除浮动的方法： |
||||
|
父元素设置高度 |
||||
|
受影响的元素增加clear属性： clear: both; |
||||
|
|
||||
|
overflow清除浮动(父元素中加)：overflow: hidden; |
||||
|
clear: both; |
||||
|
伪对象方式 |
||||
|
选择器::after { |
||||
|
content: ""; |
||||
|
display: block; |
||||
|
clear: both; |
||||
|
} |
||||
|
|
||||
|
--> |
||||
|
</html> |
||||
@ -0,0 +1,26 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<title>Document</title> |
||||
|
<style> |
||||
|
/* Margin(外边距) - 清除边框外的区域，外边距是透明的（两个值：第一个值上下，第二个值左右） |
||||
|
Border(边框) - 围绕在内边距和内容外的边框 |
||||
|
Padding(内边距) - 清除内容周围的区域（两个值：第一个值上下，第二个值左右） |
||||
|
Content(内容) - 盒子的内容，显示文本和图 |
||||
|
padding和margin都可以灵活设置top,left,right,bottom的值来控制div大小 */ |
||||
|
div{ |
||||
|
width: 200px; |
||||
|
height: 150px; |
||||
|
background-color: aqua; |
||||
|
padding:50px; |
||||
|
border: 2px solid red; |
||||
|
margin: 20px; |
||||
|
} |
||||
|
</style> |
||||
|
</head> |
||||
|
<body> |
||||
|
<div>wodshi div</div> |
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,54 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<title>Document</title> |
||||
|
</head> |
||||
|
<style> |
||||
|
.bac{ |
||||
|
width: 500px; |
||||
|
height: 510px; |
||||
|
background-color: green; |
||||
|
background-image: url("1.webp"); |
||||
|
/* 平铺方式： |
||||
|
repeat：默认方式； |
||||
|
repeat-x:只水平平铺 |
||||
|
repeat-y：只垂直平铺 |
||||
|
no-repeat：不平铺 |
||||
|
*/ |
||||
|
background-repeat: repeat-x; |
||||
|
/* length:只调整高或宽，另一个值等比例改变 |
||||
|
percentage:设定百分比 |
||||
|
cover:锁定比例并且充满容器，多余部分不显示 |
||||
|
contain:锁定比例且保证图片最大 */ |
||||
|
|
||||
|
background-size: 500px; |
||||
|
} |
||||
|
.bac2{ |
||||
|
width: 1000px; |
||||
|
height: 1100px; |
||||
|
background-color: green; |
||||
|
background-image: url("2.webp"); |
||||
|
background-repeat: no-repeat; |
||||
|
|
||||
|
background-size: contain; |
||||
|
} |
||||
|
.bac3{ |
||||
|
width: 200px; |
||||
|
height: 100px; |
||||
|
background-color: green; |
||||
|
background-image: url("2.webp"); |
||||
|
background-repeat: no-repeat; |
||||
|
/* 用left,right,top,bottom组合确定图像起始位置 |
||||
|
x% y%：只设置一个另一个默认为50%。 都不设置默认为0% 0%； |
||||
|
xpos ypos:像素表示 */ |
||||
|
background-position: left center; |
||||
|
} |
||||
|
</style> |
||||
|
<body> |
||||
|
<div class="bac"></div> |
||||
|
<div class="bac2"></div> |
||||
|
<div class="bac3"></div> |
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,46 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<title>Document</title> |
||||
|
<style> |
||||
|
table,td{ |
||||
|
border: 1px solid black; |
||||
|
} |
||||
|
table{ |
||||
|
border-collapse: collapse; |
||||
|
width: 50%; |
||||
|
} |
||||
|
td{ |
||||
|
width: 200px; |
||||
|
height: 100px; |
||||
|
text-align: center; |
||||
|
vertical-align: bottom; |
||||
|
padding: 20px; |
||||
|
background-color: aquamarine; |
||||
|
color: red; |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
|
</head> |
||||
|
<body> |
||||
|
<table> |
||||
|
<tr> |
||||
|
<td>单元格</td> |
||||
|
<td>单元格</td> |
||||
|
<td>单元格</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>单元格</td> |
||||
|
<td>单元格</td> |
||||
|
<td>单元格</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>单元格</td> |
||||
|
<td>单元格</td> |
||||
|
<td>单元格</td> |
||||
|
</tr> |
||||
|
</table> |
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,68 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en"> |
||||
|
|
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<title>Document</title> |
||||
|
<style> |
||||
|
* { |
||||
|
color: red; |
||||
|
} |
||||
|
|
||||
|
/* 全局选择器：能够匹配所有标签但是优先级较低 */ |
||||
|
p { |
||||
|
color: blue; |
||||
|
} |
||||
|
|
||||
|
/*标签选择器：能够选定所有选定的标签*/ |
||||
|
.content { |
||||
|
color: aquamarine; |
||||
|
} |
||||
|
|
||||
|
.size { |
||||
|
font-size: 20px; |
||||
|
} |
||||
|
|
||||
|
/* 类选择器:选择更加灵活 |
||||
|
可以被多个标签使用； |
||||
|
不一数字开头； |
||||
|
同一个标签可以使用多个类选择器，空格隔开 |
||||
|
*/ |
||||
|
#size0 { |
||||
|
color: chartreuse; |
||||
|
} |
||||
|
|
||||
|
/* id唯一；不以数字开头；只能使用一次 */ |
||||
|
.s1,.s2{ |
||||
|
color:red; |
||||
|
} |
||||
|
/* 提取相同代码，提高复用性 */ |
||||
|
|
||||
|
/* 选择器优先级： |
||||
|
行内样式>id选择器>类选择器>元素选择器 */ |
||||
|
</style> |
||||
|
|
||||
|
</head> |
||||
|
|
||||
|
<body> |
||||
|
|
||||
|
<p>diyige</p> |
||||
|
<p>dierger</p> |
||||
|
<a href="#">hahaha</a> |
||||
|
<div> |
||||
|
<ul> |
||||
|
<li> |
||||
|
<p>藏得深吧</p> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</body> |
||||
|
<p class="content">nihao</p> |
||||
|
<p class="content size">woshishei</p> |
||||
|
<p id="size0">ID选择器</p> |
||||
|
|
||||
|
<h3 class="s1">1111</h3> |
||||
|
<p class="s2">6666</p> |
||||
|
|
||||
|
</html> |
||||
@ -0,0 +1,35 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en"> |
||||
|
|
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<title>Document</title> |
||||
|
<style> |
||||
|
/* 通过background-image引入背景图片 |
||||
|
通过background-position把背景图片移动到自己需要的位置 */ |
||||
|
.icon1 { |
||||
|
display: block; |
||||
|
background-image: url(3.png); |
||||
|
background-position: -7px 0; |
||||
|
width: 25px; |
||||
|
height: 25px; |
||||
|
} |
||||
|
|
||||
|
.icon2 { |
||||
|
display: block; |
||||
|
background-image: url(3.png); |
||||
|
background-position: -93px -84px; |
||||
|
width: 25px; |
||||
|
height: 25px; |
||||
|
} |
||||
|
</style> |
||||
|
</head> |
||||
|
|
||||
|
<body> |
||||
|
<i class="icon1"></i> |
||||
|
<i class="icon2"></i> |
||||
|
|
||||
|
</body> |
||||
|
|
||||
|
</html> |
||||
|
After Width: 1200 | Height: 787 | Size: 730 KiB |
@ -0,0 +1,160 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<title>Document</title> |
||||
|
</head> |
||||
|
<body> |
||||
|
<p>你好</p> |
||||
|
<br> |
||||
|
zzz |
||||
|
<hr width="1000px" size="5px" align="center"> |
||||
|
<img src="1.jfif" alt="这是一个风景图" title="fenhgjing" width="300px"> |
||||
|
<!-- 路径分为相对和绝对路径 |
||||
|
绝对路径从盘符开始访问 |
||||
|
相对路径分为 |
||||
|
子级关系 / |
||||
|
同级关系 ./ |
||||
|
父级关系 ../ |
||||
|
--> |
||||
|
|
||||
|
<h3>超链接</h3> |
||||
|
<a href="https://www.baidu.com"><img src="./1.jfif" width="300px"></a> |
||||
|
|
||||
|
<h3>文本标签</h3> |
||||
|
<em>斜体且着重文字</em> |
||||
|
<i>斜体</i> |
||||
|
<b>粗体</b> |
||||
|
<strong>加重加粗</strong> |
||||
|
<del>删除字</del> |
||||
|
<span>空标签</span> |
||||
|
|
||||
|
<h3>有序列表</h3> |
||||
|
<ol> |
||||
|
<li>水果 |
||||
|
<ol type="A" |
||||
|
<li>苹果</li> |
||||
|
<li>桃子</li> |
||||
|
<li>栗子</li> |
||||
|
</ol> |
||||
|
</li> |
||||
|
<li> |
||||
|
蔬菜 |
||||
|
<ol type="a"> |
||||
|
<li>白菜</li> |
||||
|
<li>青菜</li> |
||||
|
<li>油菜</li> |
||||
|
</ol> |
||||
|
</li> |
||||
|
<li> |
||||
|
肉类 |
||||
|
<ol type="I"> |
||||
|
<li>zhurou</li> |
||||
|
<li>NIUROU</li> |
||||
|
<li>yangrou</li> |
||||
|
</ol> |
||||
|
</li> |
||||
|
</ol> |
||||
|
|
||||
|
<h3>无序列表</h3> |
||||
|
<!-- 快捷键 ul>li*n --> |
||||
|
<ul type="disc"> |
||||
|
<li>shucai |
||||
|
<ul type="circle"> |
||||
|
<li>1</li> |
||||
|
<li>2</li> |
||||
|
<li>3</li> |
||||
|
</ul> |
||||
|
</li> |
||||
|
<li>shuiguo |
||||
|
<ul type="square"> |
||||
|
<li>45</li> |
||||
|
<li>5</li> |
||||
|
<li>66</li> |
||||
|
</ul> |
||||
|
</li> |
||||
|
<li>roulei |
||||
|
<ul> |
||||
|
<li>22</li> |
||||
|
<li>33</li> |
||||
|
<li>44</li> |
||||
|
</ul> |
||||
|
</li> |
||||
|
</ul> |
||||
|
|
||||
|
<h3>表格</h3> |
||||
|
<!-- 快捷键 table>tr*3>td{单元格} --> |
||||
|
<table border="1" wigth="600" height="300"> |
||||
|
<tr> |
||||
|
<td>单元格</td> |
||||
|
<td>单元格</td> |
||||
|
<td>单元格</td> |
||||
|
<td>单元格</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>单元格</td> |
||||
|
<td>单元格</td> |
||||
|
<td>单元格</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>单元格</td> |
||||
|
<td>单元格</td> |
||||
|
<td>单元格</td> |
||||
|
<td>单元格</td> |
||||
|
</tr> |
||||
|
</table> |
||||
|
|
||||
|
<h3>表格合并</h3> |
||||
|
<table border="1" wigth="900" height="300"> |
||||
|
<tr> |
||||
|
<td colspan="2">单元格1</td> |
||||
|
<td rowspan="2">单元格3</td> |
||||
|
<td>单元格</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td colspan="2" rowspan="2">单元格4</td> |
||||
|
<td>单元格</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>单元格9</td> |
||||
|
<td>单元格</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>单元格9</td> |
||||
|
<td>单元格</td> |
||||
|
<td>单元格</td> |
||||
|
<td>单元格</td> |
||||
|
</tr> |
||||
|
</table> |
||||
|
|
||||
|
<h3>表单</h3> |
||||
|
<form action=""> |
||||
|
<input type="text" value="请输入文本"> |
||||
|
<input type="submit"><br> |
||||
|
<input type="password" value="请输入密码"> |
||||
|
<input type="submit" value="登录"> |
||||
|
</form> |
||||
|
</body> |
||||
|
|
||||
|
<!-- 块级元素和行内元素 --> |
||||
|
<!-- 常见块级元素： div,form,h1,hr,p,table, ul,ol等 独占一行，可以设置宽高，可以包含行内元素和其他块级元素 --> |
||||
|
<!-- 常见行内元素：a,b,em,strong,span等 不能独占一行，只能设置宽，一般不包含块级元素 --> |
||||
|
|
||||
|
<div id="header"></div> |
||||
|
<div id="nav"></div> |
||||
|
<div id="areticle"> |
||||
|
<div id="section"></div> |
||||
|
</div> |
||||
|
<div id="sidebar"></div> |
||||
|
<div id="footer"></div> |
||||
|
|
||||
|
<!-- html新特性 --> |
||||
|
<header></header> |
||||
|
<nav></nav> |
||||
|
<article> |
||||
|
<section></section> |
||||
|
</article> |
||||
|
<aside></aside> |
||||
|
<footer></footer> |
||||
|
</html> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue