diff --git "a/\351\231\206\346\273\242\351\222\260/20241014-\344\274\252\347\261\273\351\200\211\346\213\251\345\231\250.md" "b/\351\231\206\346\273\242\351\222\260/20241014-\344\274\252\347\261\273\351\200\211\346\213\251\345\231\250.md" new file mode 100644 index 0000000000000000000000000000000000000000..f947e9b21dd863e6d4ad105143e10e5bbf35afaf --- /dev/null +++ "b/\351\231\206\346\273\242\351\222\260/20241014-\344\274\252\347\261\273\351\200\211\346\213\251\345\231\250.md" @@ -0,0 +1,237 @@ + +# CSS伪类选择器知识点 + +## 动态伪类选择器 +- `:hover`：鼠标悬停在元素上时。 +- `:active`：元素被激活（如点击）时。 +- `:focus`：元素获得焦点时，通常用于表单元素。 + +## 状态伪类选择器 +- `:enabled`：表单元素可用时。 +- `:disabled`：表单元素不可用时。 +- `:checked`：单选框或复选框被选中时。 + +## 结构伪类选择器 +- `:first-child`：选择作为其父元素的第一个子元素的元素。 +- `:last-child`：选择作为其父元素的最后一个子元素的元素。 +- `:only-child`：选择作为其父元素的唯一子元素的元素。 +- `:nth-child()`：选择父元素的特定位置的子元素。 +- `:nth-last-child()`：从父元素的末尾开始选择特定位置的子元素。 +- `:first-of-type`：选择其父元素中第一个特定类型的子元素。 +- `:last-of-type`：选择其父元素中最后一个特定类型的子元素。 +- `:only-of-type`：选择其父元素中唯一的特定类型的子元素。 +- `:nth-of-type()`：选择父元素中特定位置的特定类型的子元素。 +- `:nth-last-of-type()`：从父元素的末尾开始选择特定位置的特定类型的子元素。 + +## 目标伪类选择器 +- `:target`：选择当前活动的目标元素（例如，当URL的锚点指向页面中的某个元素时）。 + +## 否定伪类选择器（CSS4） +- `:not()`：选择不匹配指定选择器的元素。 +- `:is()`：选择匹配任何一组选择器的元素。 +- `:where()`：选择匹配任何一组选择器的元素，但更具体，允许在内联样式和`!important`规则中使用。 + +## 其他伪类选择器 +- `:empty`：选择没有子元素的元素。 +- `:root`：选择文档的根元素（通常是``）。 +- `:lang()`：选择指定语言的元素。 + +## 伪元素选择器 +- `::after`：在元素的内容之后插入内容。 +- `::before`：在元素的内容之前插入内容。 +- `::first-letter`：选择元素的第一个字母。 +- `::first-line`：选择元素的第一行。 +- `::selection`：选择用户选择的元素部分。 + +## 作业 + +### 效果图22.1 +![20241015174749](http://sjli7ulh3.hn-bkt.clouddn.com/20241015174749.png) + +### 主要代码22.1 +```html + + + + + + Document + + + +
+
+

Welcome

+

This is the introduction section.

+
+ +
+

Post Title

+

Post content...

+ +
+ + +
+ + +``` + +### 效果图22.3 +![20241015174813](http://sjli7ulh3.hn-bkt.clouddn.com/20241015174813.png) + +### 主要代码22.3 +```html + + + + + + Document + + + + + + +``` + +### 效果图22.4 +![20241015174847](http://sjli7ulh3.hn-bkt.clouddn.com/20241015174847.png) + +### 主要代码22.4 +```html + + + + + + Document + + + +

Special Title

+ + +``` + +### 效果图22.5 +![20241015174919](http://sjli7ulh3.hn-bkt.clouddn.com/20241015174919.png) + +### 主要代码22.5 +```html + + + + + + Document + + + + + + + +``` + +### 效果图22.6 +![20241015174720](http://sjli7ulh3.hn-bkt.clouddn.com/20241015174720.png) + +### 主要代码22.6 +```html + + + + + + Document + + + +
+
+ + + + + +
+
+ + +``` \ No newline at end of file diff --git "a/\351\231\206\346\273\242\351\222\260/20241016-\345\261\202\345\217\240\345\222\214\347\273\247\346\211\277.md" "b/\351\231\206\346\273\242\351\222\260/20241016-\345\261\202\345\217\240\345\222\214\347\273\247\346\211\277.md" new file mode 100644 index 0000000000000000000000000000000000000000..b66012b6d64276b97b2bf1978257384adabc9d47 --- /dev/null +++ "b/\351\231\206\346\273\242\351\222\260/20241016-\345\261\202\345\217\240\345\222\214\347\273\247\346\211\277.md" @@ -0,0 +1,75 @@ +## 笔记 +### 统计权重顺序： +1. id 选择器 +2. 类选择器、属性选择器、伪类选择器 +3. 标签选择器、伪元素选择器 + +### CSS样式表的冲突的总结 +1. 对于相同的选择器（比如同样都是类选择器），其样式表排序：行级样式 > 内嵌样式表 > 外部样式表（就近原则） +2. 对于相同类型的样式表（比如同样都是内部样式表），其选择器排序：ID选择器 > 类选择器 > 标签选择器 +3. 外部样式表的ID选择器 > 内嵌样式表的标签选择器 +4. 对同一个标签，如果用到的都是内嵌样式表，且权重一致，那它的优先级：定义的CSS样式表中，谁最近，就用谁。 +5. 对于同一个标签，如果用到的都是外部样式表，且权重一致，那它的优先级：html文件中，引用样式表的位置越近，就用谁 + +## 作业 + +### 1效果图 +![20241019204912](http://sjli7ulh3.hn-bkt.clouddn.com/20241019204912.png) + +### 2效果图 +![20241019204925](http://sjli7ulh3.hn-bkt.clouddn.com/20241019204925.png) + +### 3主要代码 +```html + + + + + + Document + + + +
+ +
+ + +``` + +### 4主要代码 +```html + + + + + + Document + + + +
+ + +``` \ No newline at end of file diff --git "a/\351\231\206\346\273\242\351\222\260/20241017-\346\265\256\345\212\250.md" "b/\351\231\206\346\273\242\351\222\260/20241017-\346\265\256\345\212\250.md" new file mode 100644 index 0000000000000000000000000000000000000000..f7e9408f6d868c891c5da74496e2b9dc0bba9fc2 --- /dev/null +++ "b/\351\231\206\346\273\242\351\222\260/20241017-\346\265\256\345\212\250.md" @@ -0,0 +1,296 @@ +## 基本概念 +浮动（float）是一种CSS定位技术，用于将元素从文档流中移出，并向左或向右浮动，直到它的外边缘碰到包含框或另一个浮动元素的边缘。 + +## 浮动属性 +- `float: left;`：元素向左浮动。 +- `float: right;`：元素向右浮动。 +- `float: none;`：元素不浮动（默认值）。 + +## 浮动的影响 +- 浮动的元素会脱离正常的文档流，不占据原本的空间。 +- 浮动的元素可以被其他元素环绕。 +- 浮动的元素会影响其他元素的布局，尤其是父元素和后续的兄弟元素。 + +## 清除浮动 +由于浮动元素会影响其他元素的布局，因此需要清除浮动以防止布局混乱。常见的清除浮动方法有： +- 使用额外的清除元素：在浮动元素之后添加一个空的元素，并设置`clear: both;`属性。 +- 使用父元素的`overflow`属性：设置`overflow: auto;`或`overflow: hidden;`可以清除内部浮动。 +- 使用`clearfix`技术：给父元素添加一个类，该类通过`::before`和`::after`伪元素来清除浮动。 + + + +## 作业 + +### 效果图 +![20241019204309](http://sjli7ulh3.hn-bkt.clouddn.com/20241019204309.png) + +### 主要代码 +```html + + + + + + Document + + + + + + +
+
+
+ +
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+
+ +
+
+ +
+
+
+ +
+
+ + +``` + +```css +.hong{ + width: 277px; + height: 103px; + background-color: red; + float: left; +} + +.lv{ + height: 103px; + width: 693PX; + float: left; +} + +.lv1{ + width: 137px; + height: 49px; + background-color: green; + float: right; +} + +.lv2{ + width: 679px; + height: 46px; + background-color: green; + float: right; + margin-top: 8px; +} +``` + +```css +.huang{ + width: 310px; + height: 435px; + background-color: rgb(255, 215, 0); + margin-top: 8px; + float: left; +} + +.lan{ + width: 450px; + height: 400px; + float: left; +} + +.lan1{ + width: 450px; + height: 240px; + background-color: rgb(135, 207, 235); + float: left; + + +} + +.lan2{ + width: 450px; + height: 110px; + background-color: rgb(135, 207, 235); + float: left; + + margin-top: 10px; +} + +.lan3{ + width: 450px; + height: 30px; + background-color: rgb(135, 207, 235); + float: left; + + margin-top: 10px; +} + +.zi{ + height: 400px; + width: 190px; + background-color: rgb(128, 0, 128); + float: left; + + margin-left: 10px; +} + +.lanzi{ + width: 650px; + height: 400px; +} + +.lanzilan{ + width: 650px; + height: 435px; + float: left; + margin-left: 10px; + + margin-top: 8px; +} + +.shenlan{ + width: 650px; + height: 25px; + background-color: rgb(27, 0, 255); + float: left; + margin-top: 10px; +} + +``` + +```css +.zong{ + width: 970px; + height: 586px; +} + +.shang{ + height: 103px; + width: 970px; +} + +.zhong{ + height: 435px; + width: 970px; +} + +.xia{ + height: 30px; + width: 970px; + background-color: rgb(218, 165, 32); + margin-top: 10px; + float: left; +} +``` + +### 效果图 +![20241019204223](http://sjli7ulh3.hn-bkt.clouddn.com/20241019204223.png) + +### 主要代码 + +```html + + + + + + Document + + + +
+
+ | + 通知公告 + 更多 >> +
+ +
+ +
+ +
+
+ + + + +``` \ No newline at end of file