ZhangYong
2 days ago
16 changed files with 476 additions and 0 deletions
-
BINsrc/CssStudy/1.webp
-
BINsrc/CssStudy/2.webp
-
25src/CssStudy/cssstudy1.html
-
18src/CssStudy/cssstudy2.html
-
8src/CssStudy/public.css
-
40src/CssStudy/关系选择器.html
-
22src/CssStudy/字体属性.html
-
64src/CssStudy/弹性盒子.html
-
31src/CssStudy/文本属性.html
-
57src/CssStudy/文档流.html
-
26src/CssStudy/盒子模型.html
-
54src/CssStudy/背景属性.html
-
46src/CssStudy/表格属性.html
-
68src/CssStudy/选择器.html
-
0src/htmlStudy/1.jfif
-
17src/htmlStudy/webtudy1.html
@ -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,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,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,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> |
|||
|
Before Width: 1200 | Height: 787 | Size: 730 KiB After Width: 1200 | Height: 787 | Size: 730 KiB |
Write
Preview
Loading…
Cancel
Save
Reference in new issue