css 例子

csspress/1.css基础.md

@@ -155,3 +155,36 @@ body{
 7. 浏览器自定义或继承
 
    **总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性**
+
+
+
+### css 常用属性
+
+width:数值 px （单位）  		设置宽度
+
+height:数值  px（单位）  		设置高度
+
+background: 英文颜色或者16进制颜色码（如\#ff0000）或者rgb颜色码（如rgb(255,0,0)）或者图片( url('文件路径')  )		设置背景颜色
+
+color:英文颜色或者16进制颜色码（如\#ff0000）或者rgb颜色码（如rgb(255,0,0)）	设置字体颜色
+
+border: 1px solid red   1px 是边框宽度  solid 是线条类型为直线   red 为边框颜色 
+
+border-radius：29px  边框圆角
+
+font-size：13px  字体大小
+
+font-weight:normal(正常默认) 或者 bold(加粗)
+
+line-height:20px   设置行高
+
+text-align:left( 左对齐) center (居中) right(右对齐)  文字对齐方式
+
+overflow :auto（滚动条）/ hidden (隐藏) 横向和纵向内容溢出的表现
+
+overflow-x:auto（滚动条）/ hidden (隐藏) 横向内容溢出的表现
+
+overflow-y:auto（滚动条）/ hidden (隐藏) 纵向内容溢出的表现
+
+
+

csspress/2.盒模型.md

@@ -38,11 +38,11 @@ css 盒模型包括如下要素
 - 边框（border）
 - 外边距（margin）
 
-![image-20201218160440679](E:\web\测试lesson\kejian\css\盒模型.assets\image-20201218160440679.png)
+![image-20201218160440679](E:\web\lessons\课件\csspress\2.盒模型.assets\image-20201218160440679.png)
 
 
 
-![image-20210104085742577](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210104085742577.png)
+![image-20210104085742577](E:\web\lessons\课件\csspress\2.盒模型.assets\image-20210104085742577.png)
 
 
 
@@ -97,7 +97,7 @@ css 盒模型包括如下要素
 
 (一）
 
-![image-20210112113853593](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210112113853593.png)
+![image-20210112113853593](E:\web\lessons\课件\csspress\2.盒模型.assets\image-20210112113853593.png)
 
 
 
@@ -151,7 +151,7 @@ div11的高度为0 的时候，div1的margin值由 div1,div11,div12的margin合
 
 如此例中，div1的margin 值为30
 
-![image-20210112114420660](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210112114420660.png)
+![image-20210112114420660](E:\web\lessons\课件\csspress\2.盒模型.assets\image-20210112114420660.png)
 
 
 
@@ -206,5 +206,72 @@ div11的高度为0 的时候，div1的margin值由 div1,div11,div12的margin合
 
 
 
+解决措施：
+
+给外边距加上如下属性，可以解决外边距合并的问题
+
+​      border-top: 1px solid white;  给父元素加上边框
+
+​      overflow: hidden;	设置超出隐藏
+
+ 	padding-top:50px;		给父盒子加padding-top 可以实现同样的效果
 
 
+
+margin 复合属性
+
+上右下左
+
+例如：
+
+            margin 一个值得时候定义的是上下左右四个方向的边距
+           两个值得时候定义的前一个值是上下的边距  后面的值是左右的边距
+            三个值得时候第一个值是上边距 第二个值是左右边距  第三个值是下边距
+           四个值得时候是上右下左的边距
+
+
+
+
+
+
+padding复合属性
+
+上右下左
+
+例如：
+
+            padding一个值得时候定义的是上下左右四个方向的边距
+           两个值得时候定义的前一个值是上下的边距  后面的值是左右的边距
+            三个值得时候第一个值是上边距 第二个值是左右边距  第三个值是下边距
+           四个值得时候是上右下左的边距
+
+
+
+
+
+练习1：
+
+五环之歌 效果如下：
+![image-20210118112058180](E:\web\lessons\课件\csspress\2.盒模型.assets\image-20210118112058180.png)
+
+作业2：
+
+分类菜单 效果如下
+
+![image-20210118112453705](E:\web\lessons\课件\csspress\2.盒模型.assets\image-20210118112453705.png)
+
+作业三：
+
+效果如下：
+
+![img](E:\web\lessons\课件\csspress\2.盒模型.assets\1072590-20161225165033198-1543996399.png)
+
+
+
+
+
+注：
+
+左下角录制工具的水印不用做
+
+图片可以自定义

csspress/3.定位.md

@@ -1,5 +1,31 @@
 # 定位(position)
 
+### 为什么要使用定位
+
+请问以下状况用标准流或者浮动可以实现吗？
+
+- 想让广告右下角的切换的那三个点图标 在广告框内自由移动位置，并且会压住下面的盒子  覆盖在最上面
+
+![image-20210118113158799](E:\web\lessons\课件\csspress\3.定位.assets\image-20210118113158799.png)
+
+
+
+- 不管滚动条滚动到什么位置 ，元素都始终固定在原来的位置不变
+
+  ![image-20210118113652011](E:\web\lessons\课件\csspress\3.定位.assets\image-20210118113652011.png)
+
+**结论** ：
+
+1. 以上的两种情况 用普通的文档流和浮动都不能快速实现，此时要用定位来实现
+
+2. 浮动和定位的区别
+
+   浮动可以让多个块级盒子一行内没有缝隙排列显示 经常用于
+
+   
+
+
+
 position 用来定义元素在网页上的位置，常用的有五种：
 
 - static				正常的页面流，position属性的默认值
@@ -8,13 +34,19 @@ position 用来定义元素在网页上的位置，常用的有五种：
 - fixed                 固定定位
 - sticky                粘性布局
 
+语法：
+
+position:定位方式   
+
+方向：偏移值
+
 
 
 ### static 
 
 这时浏览器会按照源码的顺序决定元素的位置，这样称为“正常的页面流”。块级元素占据自己的区块，元素之间不重叠。
 
-![image-20210104095232481](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210104095232481.png)
+![image-20210104095232481](E:\web\lessons\课件\csspress\3.定位.assets\image-20210104095232481.png)
 
 html：
 
@@ -57,7 +89,7 @@ absolute 基于父元素定位，通过 top,bottom,left,right 四个属性规定
 
 
 
-![image-20210104101111002](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210104101111002.png)
+![image-20210104101111002](E:\web\lessons\课件\csspress\3.定位.assets\image-20210104101111002.png)
 
 html 不变 css如下：
 
@@ -79,7 +111,7 @@ div{
 
 上面的例子里，第一个灰色的div（以下叫A）并没有出现在页面上，因为这时候给A 添加了position:absolute 属性，使他脱离正常的文档流  然后他下面（从上到下依次叫B,C），B,C并没有脱离文档流，所以会移动到上面来，把A覆盖
 
-![image-20210104102616301](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210104102616301.png)
+![image-20210104102616301](E:\web\lessons\课件\csspress\3.定位.assets\image-20210104102616301.png)
 
 html：
 
@@ -120,7 +152,7 @@ css:
 
 相对定位，选中元素不会脱离文档流，相对于其自身位置进行移动，通过top,bottom,left,right 属性进行规定
 
-![image-20210104104339420](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210104104339420.png)
+![image-20210104104339420](E:\web\lessons\课件\csspress\3.定位.assets\image-20210104104339420.png)
 
 ```
  <style>
@@ -186,7 +218,7 @@ css:
     </style>
 ```
 
-![image-20210104113658613](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210104113658613.png)
+![image-20210104113658613](E:\web\lessons\课件\csspress\3.定位.assets\image-20210104113658613.png)
 
 
 
@@ -242,10 +274,38 @@ css:
 
 滚动前：
 
-![image-20210104115013701](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210104115013701.png)
+![image-20210104115013701](E:\web\lessons\课件\csspress\3.定位.assets\image-20210104115013701.png)
 
 
 
 滚动后：
 
-![image-20210104115040341](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210104115040341.png)
+![image-20210104115040341](E:\web\lessons\课件\csspress\3.定位.assets\image-20210104115040341.png)
+
+作业一
+
+![image-20210118172837051](E:\web\lessons\课件\csspress\3.定位.assets\image-20210118172837051.png)
+
+
+
+作业二
+
+![image-20210118172910611](E:\web\lessons\课件\csspress\3.定位.assets\image-20210118172910611.png)
+
+
+
+作业三
+
+![image-20210118172934691](E:\web\lessons\课件\csspress\3.定位.assets\image-20210118172934691.png)
+
+
+
+作业4
+
+![image-20210118173020931](E:\web\lessons\课件\csspress\3.定位.assets\image-20210118173020931.png)
+
+
+
+作业5
+
+![image-20210118173115050](E:\web\lessons\课件\csspress\3.定位.assets\image-20210118173115050.png)

csspress/demo/.idea/demo.iml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="PYTHON_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

csspress/demo/.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,12 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="PyPep8NamingInspection" enabled="true" level="WEAK WARNING" enabled_by_default="true">
+      <option name="ignoredErrors">
+        <list>
+          <option value="N802" />
+        </list>
+      </option>
+    </inspection_tool>
+  </profile>
+</component>

csspress/demo/.idea/inspectionProfiles/profiles_settings.xml

@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <settings>
+    <option name="USE_PROJECT_PROFILE" value="false" />
+    <version value="1.0" />
+  </settings>
+</component>

csspress/demo/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/demo.iml" filepath="$PROJECT_DIR$/.idea/demo.iml" />
+    </modules>
+  </component>
+</project>

csspress/demo/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$/../.." vcs="Git" />
+  </component>
+</project>

csspress/demo/.idea/workspace.xml

@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ChangeListManager">
+    <list default="true" id="1a809e5f-af9b-4af6-ad05-8377cd49b05b" name="Default Changelist" comment="" />
+    <option name="SHOW_DIALOG" value="false" />
+    <option name="HIGHLIGHT_CONFLICTS" value="true" />
+    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
+    <option name="LAST_RESOLUTION" value="IGNORE" />
+  </component>
+  <component name="Git.Settings">
+    <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$/../.." />
+  </component>
+  <component name="ProjectId" id="1nEKiqsAzxjfTabj7kX1m5ezM5s" />
+  <component name="ProjectLevelVcsManager" settingsEditedManually="true" />
+  <component name="ProjectViewState">
+    <option name="hideEmptyMiddlePackages" value="true" />
+    <option name="showLibraryContents" value="true" />
+  </component>
+  <component name="PropertiesComponent">
+    <property name="RunOnceActivity.OpenProjectViewOnStart" value="true" />
+    <property name="RunOnceActivity.ShowReadmeOnStart" value="true" />
+    <property name="settings.editor.selected.configurable" value="configurable.group.appearance" />
+  </component>
+  <component name="SvnConfiguration">
+    <configuration />
+  </component>
+  <component name="TaskManager">
+    <task active="true" id="Default" summary="Default task">
+      <changelist id="1a809e5f-af9b-4af6-ad05-8377cd49b05b" name="Default Changelist" comment="" />
+      <created>1610949940462</created>
+      <option name="number" value="Default" />
+      <option name="presentableId" value="Default" />
+      <updated>1610949940462</updated>
+    </task>
+    <servers />
+  </component>
+</project>

csspress/demo/boxsize.html

@@ -0,0 +1,37 @@
+<!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>
+        .box{
+            width:1000px;
+            height:300px;
+            background: gold;
+        }
+        .box1{
+            width:50px;
+            height: 50px;
+            background:red;
+        }
+        .box2{
+            width:500px;
+            height:500px;
+            background: blue;
+        }
+        .box3{
+            background:pink;
+        }
+    </style>
+</head>
+<body>
+    <div class="box">
+        <div class="box1">aaa</div>
+        <span class="box2">bbb</span>
+        <span class="box3">cccc</span>
+    
+    </div>
+       
+</body>
+</html>

csspress/demo/float.html

@@ -16,11 +16,11 @@
             margin: 20px;
         }
         .box1{
-            width:60px;
-            height: 60px;
+            /* width:60px;
+            height: 60px; */
             background: red;
             /* background: rgba(255, 0, 0, 0.363); */
-            float: left;
+            /* float: left; */
             
 
         }
@@ -30,7 +30,7 @@
             background: gray;
             border: 1px solid pink;
             /* float:right */
-            float: right;
+            float: left;
         }
         .a{
             /* width: 70px;
@@ -43,7 +43,10 @@
 </head>
 <body>
     <div class="box">
-        <div class="box1"></div>
+        <div class="box1">asaaaa</div>
+        <div class="box2"></div>
+        <div class="box2"></div>
+        <!-- <div class="box1"></div>
         <div class="box1"></div>
         <div class="box1"></div>
         <div class="box1"></div>
@@ -57,7 +60,7 @@
         <div class="box2">5</div>
         <div class="box2" style="height: 180px;">6</div>
         <div class="a"></div>
-        <div>nhjksahkihfi</div>
+        <div>nhjksahkihfi</div> -->
     </div>
 </body>
 </html>

csspress/demo/margin.html

@@ -0,0 +1,45 @@
+<!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>
+        .box{
+            width:1000px;
+            height:300px;
+            background: gold;
+        }
+        .box1{
+            width:50px;
+            height: 50px;
+            background:red;
+        }
+        .box2{
+            /* width:80px; */
+            height:50px;
+            background: blue;
+            margin-left: 20px;
+            margin-right: 20px;
+        }
+        .box3{
+            background:pink;
+        }
+    </style>
+</head>
+<body>
+        <div class="box1">aaa</div>
+        <div class="box2">bbb</div>
+
+        <p>
+            总结margin 一个值得时候定义的是上下左右四个方向的边距
+            <p>两个值得时候定义的前一个值是上下的边距  后面的值是左右的边距</p>
+            <p>三个值得时候第一个值是上边距 第二个值是左右边距  第三个值是下边距</p>
+            <p>四个值得时候是上右下左的边距</p>
+            
+            
+            
+        </p>
+       
+</body>
+</html>

csspress/demo/margin2.html

@@ -0,0 +1,42 @@
+<!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>
+        .box{
+            width:1000px;
+            height:300px;
+            background: gold;
+        }
+        .box1{
+            width:50px;
+            height: 50px;
+            background:red;
+            margin-bottom: 50px;
+        }
+        .box2{
+            width:50px;
+            height:50px;
+            background: blue;
+            margin-top: 100px;
+        }
+        .box3{
+            background:pink;
+        }
+    </style>
+</head>
+<body>
+        <div class="box1">中国</div>
+        <div class="box2">美国</div>
+
+       <p>
+           总结：当给中国加下边距（100px）和给美国(50)加上边距的时候 ，会发生外边距合并的现象 
+           即 中国和美国的外边距等于中国和美国的外边距中较大的那个值 此例中 中美外边距为100px
+       </p>
+       
+
+       
+</body>
+</html>

csspress/demo/margin3.html

@@ -0,0 +1,47 @@
+<!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>
+        .box{
+            width:600px;
+            height:300px;
+            background: gold;
+            /* padding-top:50px;
+            border-top: 1px solid white;
+            overflow: hidden; */
+        }
+        .box1{
+            width:50px;
+            height: 50px;
+            background:red;
+            
+            /* margin-top: 50px; */
+        }
+        .box2{
+            width:50px;
+            height:50px;
+            background: blue;
+            margin-top: 100px;
+        }
+        .box3{
+            background:pink;
+        }
+    </style>
+</head>
+<body>
+    <div class="box">
+        <div class="box1">中国</div>
+    </div>
+       
+    <p>总结：当只给中国加上边距时，他外层的父元素也会跟着往下移动 ，这种现象叫父子级的边距合并
+        解决方式：padding-top:50px; 
+        border-top: 1px solid white; 
+        overflow: hidden
+
+    </p>
+       
+</body>
+</html>

csspress/demo/paddiing.html

@@ -0,0 +1,53 @@
+<!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>
+        .box{
+            width:600px;
+            height:300px;
+            background: gold;
+            /* padding-top:50px;
+            border-top: 1px solid white;
+            overflow: hidden; */
+        }
+        .box1{
+            background:red;
+            /* padding: 30px; */
+            /* margin-top: 50px; */
+        }
+        .box2{
+            background: blue;
+            /* padding-left: 20px;
+           padding-top: 20px;
+           padding-right: 20px;
+           padding-bottom: 20px; */
+           /* padding:20px 10px; */
+           padding: 30px 20px 5px;
+           /* padding: 40px 20px 5px 10px; */
+        }
+        .box3{
+            background:pink;
+        }
+    </style>
+</head>
+<body>
+    <span class="box2">盘古</span>
+    <span class="box3">女娲</span>
+
+    <div class="box1">京东</div>
+
+    <p>
+        总结：padding 一个值得时候定义的是上下左右四个方向的边距
+        <p>两个值得时候定义的前一个值是上下的边距  后面的值是左右的边距</p>
+        <p>三个值得时候第一个值是上边距 第二个值是左右边距  第三个值是下边距</p>
+        <p>四个值得时候是上右下左的边距</p>
+        
+        
+        
+    </p>
+       
+</body>
+</html>

csspress/demo/position.html

@@ -0,0 +1,11 @@
+<!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>
+    
+</body>
+</html>

csspress/demo2/boxmodel.html

@@ -0,0 +1,55 @@
+<!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: 0;
+            padding: 0;
+        }
+
+        div {
+            width: 120px;
+            height: 120px;
+            float: left;
+        }
+
+        .box1 {
+            background: blue;
+        }
+
+        .box2 {
+            background: green;
+            height: 80px;
+            border: 1px solid white;
+
+        }
+
+        .box {
+            width: 900px;
+            height: 600px;
+            background: pink;
+            
+        }
+        .box3{
+            width: 120px;
+            height:120px;
+            background:gold;
+            /* clear: both; */
+        }
+    </style>
+</head>
+
+<body>
+    <div class="box">
+        <div class="box1"></div>
+        <div class="box2"></div>
+        <p class="box3">暖暖</p>
+    </div>
+
+</body>
+
+</html>

csspress/demo2/position.html

@@ -0,0 +1,44 @@
+<!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: 0;
+            padding: 0;
+        }
+
+        body{
+            overflow: auto;
+        }
+        .box1 {
+            background: yellow;
+            position: sticky;
+            top: 0;
+            width: 100%;
+            /* height: 50px; */
+        }
+
+        .box2 {
+            width: 50px;
+            height: 20px;
+            background: red;
+        }
+        .box3{
+            width: 60px;
+            height: 900px;
+            background: pink;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="box1">暖暖</div>
+    <div class="box2"></div>
+    <div class="box3"></div>
+</body>
+
+</html>

csspress/float.md

@@ -0,0 +1,3 @@
+# 浮动（float）
+
+