Compare commits
21 Commits
de877bd04f
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
| 907511778b | |||
| c5f18c6051 | |||
| 011d9328b0 | |||
| f18f1cb9a5 | |||
| 55c598cdb1 | |||
| 73467822cb | |||
| 812be57880 | |||
| 71190d870d | |||
| 9bf8e8d020 | |||
| eca64f86c0 | |||
| 5d39890424 | |||
| f230cfc37f | |||
| 6dacee749f | |||
| b8df71627e | |||
| 9853dbdd91 | |||
| 1c003714c3 | |||
| dd41f144fc | |||
| 9c626405fd | |||
cb53e8f37d
|
|||
|
311192c54c
|
|||
|
bc0fdce976
|
12
.idea/inspectionProfiles/Project_Default.xml
generated
Normal file
12
.idea/inspectionProfiles/Project_Default.xml
generated
Normal file
@@ -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>
|
||||
6
.idea/inspectionProfiles/profiles_settings.xml
generated
Normal file
6
.idea/inspectionProfiles/profiles_settings.xml
generated
Normal file
@@ -0,0 +1,6 @@
|
||||
<component name="InspectionProjectProfileManager">
|
||||
<settings>
|
||||
<option name="USE_PROJECT_PROFILE" value="false" />
|
||||
<version value="1.0" />
|
||||
</settings>
|
||||
</component>
|
||||
8
.idea/modules.xml
generated
Normal file
8
.idea/modules.xml
generated
Normal file
@@ -0,0 +1,8 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectModuleManager">
|
||||
<modules>
|
||||
<module fileurl="file://$PROJECT_DIR$/.idea/课件.iml" filepath="$PROJECT_DIR$/.idea/课件.iml" />
|
||||
</modules>
|
||||
</component>
|
||||
</project>
|
||||
6
.idea/vcs.xml
generated
Normal file
6
.idea/vcs.xml
generated
Normal file
@@ -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>
|
||||
33
.idea/workspace.xml
generated
Normal file
33
.idea/workspace.xml
generated
Normal file
@@ -0,0 +1,33 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ChangeListManager">
|
||||
<list default="true" id="7562293e-4f6e-4efe-9f55-2c2b789e6836" 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="1mxNVxsC6UEcXEtHROKSTbybAwC" />
|
||||
<component name="ProjectLevelVcsManager" settingsEditedManually="true" />
|
||||
<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="7562293e-4f6e-4efe-9f55-2c2b789e6836" name="Default Changelist" comment="" />
|
||||
<created>1610431311581</created>
|
||||
<option name="number" value="Default" />
|
||||
<option name="presentableId" value="Default" />
|
||||
<updated>1610431311581</updated>
|
||||
</task>
|
||||
<servers />
|
||||
</component>
|
||||
</project>
|
||||
8
.idea/课件.iml
generated
Normal file
8
.idea/课件.iml
generated
Normal file
@@ -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>
|
||||
@@ -154,4 +154,45 @@ body{
|
||||
6. 通配符选择器
|
||||
7. 浏览器自定义或继承
|
||||
|
||||
**总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性**
|
||||
**总结排序：!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 (隐藏) 纵向内容溢出的表现
|
||||
|
||||
verticle-align 设置元素的垂直对齐方式
|
||||
属性值：
|
||||
* baseline 默认值，元素放置在父元素的基线上
|
||||
* text-top 元素顶端和父元素字体顶端对齐
|
||||
* text-bottom 元素顶端和父元素字体底部对齐
|
||||
* middle 元素位于父元素的中部
|
||||
...
|
||||
|
||||
|
||||
|
||||
|
||||
BIN
csspress/2.盒模型.assets/1072590-20161225165033198-1543996399.png
Normal file
BIN
csspress/2.盒模型.assets/1072590-20161225165033198-1543996399.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 365 KiB |
BIN
csspress/2.盒模型.assets/image-20201218160440679.png
Normal file
BIN
csspress/2.盒模型.assets/image-20201218160440679.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
csspress/2.盒模型.assets/image-20210104085742577.png
Normal file
BIN
csspress/2.盒模型.assets/image-20210104085742577.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
BIN
csspress/2.盒模型.assets/image-20210112113853593.png
Normal file
BIN
csspress/2.盒模型.assets/image-20210112113853593.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
BIN
csspress/2.盒模型.assets/image-20210112114420660.png
Normal file
BIN
csspress/2.盒模型.assets/image-20210112114420660.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
BIN
csspress/2.盒模型.assets/image-20210118112058180.png
Normal file
BIN
csspress/2.盒模型.assets/image-20210118112058180.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
csspress/2.盒模型.assets/image-20210118112453705.png
Normal file
BIN
csspress/2.盒模型.assets/image-20210118112453705.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
@@ -38,11 +38,11 @@ css 盒模型包括如下要素
|
||||
- 边框（border）
|
||||
- 外边距（margin）
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -58,4 +58,220 @@ css 盒模型包括如下要素
|
||||
|
||||
> 元素的总宽度= 元素的width+左右padding +左右margin+border的左右宽度
|
||||
>
|
||||
> 元素的总高度=元素的height+上下padding + 上下margin+border的上下宽度
|
||||
> 元素的总高度=元素的height+上下padding + 上下margin+border的上下宽度
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## css外边距合并（叠加）
|
||||
|
||||
定义： 当两个元素垂直外边距相遇时，他们形成一个外边距，合并后的外边距等于两个发生合并的外边距较大的那个值，左右外边距不会合并
|
||||
|
||||
而且只在普通文档流中会发生外边距合并的状况。 行内，浮动，绝对定位的外边距不会合并
|
||||
|
||||
|
||||
|
||||
合并的结果计算：
|
||||
|
||||
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
|
||||
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
|
||||
两个外边距一正一负时，折叠结果是两者的相加的和。
|
||||
|
||||
|
||||
|
||||
合并的原因：
|
||||
|
||||
而根据w3c规范，两个margin是邻接的必须满足以下条件
|
||||
4.1、必须是处于常规文档流（非float和绝对定位）的块级盒子,并且处于同一个BFC当中。
|
||||
4.2、没有线盒，没有空隙（clearance，下面会讲到），没有padding和border将他们分隔开
|
||||
4.3、都属于垂直方向上相邻的外边距，可以是下面任意一种情况：
|
||||
a:元素的margin-top与其第一个常规文档流的子元素的margin-top
|
||||
b:元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-top
|
||||
c:height为auto的元素的margin-bottom与其最后一个常规文档流的子元素的margin-bottom
|
||||
d:高度为0并且最小高度也为0，不包含常规文档流的子元素，并且自身没有建立新的BFC的元素的margin-top和margin-bottom
|
||||
|
||||
|
||||
|
||||
出现的情况：
|
||||
|
||||
(一）
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
* {
|
||||
margin:0;
|
||||
padding:0;
|
||||
border:0;
|
||||
}
|
||||
|
||||
#outer {
|
||||
width:300px;
|
||||
height:300px;
|
||||
background-color:red;
|
||||
margin-bottom:20px;
|
||||
}
|
||||
|
||||
#inner {
|
||||
width:50px;
|
||||
height:50px;
|
||||
background-color:blue;
|
||||
margin-top:10px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="outer">
|
||||
<div id="inner">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>注释：请注意，如果不设置 div 的内边距和边框，那么内部 div 的上外边距将与外部
|
||||
div 的上外边距合并（叠加）。</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
|
||||
（二）
|
||||
|
||||
多个子元素外边距合并：
|
||||
|
||||
div11的高度为0 的时候，div1的margin值由 div1,div11,div12的margin合并结果决定
|
||||
|
||||
如此例中，div1的margin 值为30
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>
|
||||
盒子模型
|
||||
</title>
|
||||
<style>
|
||||
*{
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
body{
|
||||
text-align:center;
|
||||
}
|
||||
div{
|
||||
width:200px;
|
||||
height:200px;
|
||||
margin:0 auto;
|
||||
}
|
||||
#div1{
|
||||
margin-top:10px;
|
||||
background:red;
|
||||
}
|
||||
#div11{
|
||||
margin-top:20px;
|
||||
width:0;
|
||||
height:0;
|
||||
background:yellow;
|
||||
}
|
||||
#div12{
|
||||
margin-top:30px;
|
||||
width:50px;
|
||||
height:50px;
|
||||
background:blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="div1">
|
||||
<div id="div11"></div>
|
||||
<div id="div12"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
|
||||
解决措施：
|
||||
|
||||
给外边距加上如下属性，可以解决外边距合并的问题
|
||||
|
||||
border-top: 1px solid white; 给父元素加上边框
|
||||
|
||||
overflow: hidden; 设置超出隐藏
|
||||
|
||||
padding-top:50px; 给父盒子加padding-top 可以实现同样的效果
|
||||
|
||||
|
||||
|
||||
margin 复合属性
|
||||
|
||||
上右下左
|
||||
|
||||
例如：
|
||||
|
||||
margin 一个值得时候定义的是上下左右四个方向的边距
|
||||
两个值得时候定义的前一个值是上下的边距 后面的值是左右的边距
|
||||
三个值得时候第一个值是上边距 第二个值是左右边距 第三个值是下边距
|
||||
四个值得时候是上右下左的边距
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
padding复合属性
|
||||
|
||||
上右下左
|
||||
|
||||
例如：
|
||||
|
||||
padding一个值得时候定义的是上下左右四个方向的边距
|
||||
两个值得时候定义的前一个值是上下的边距 后面的值是左右的边距
|
||||
三个值得时候第一个值是上边距 第二个值是左右边距 第三个值是下边距
|
||||
四个值得时候是上右下左的边距
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
练习1：
|
||||
|
||||
五环之歌 效果如下：
|
||||
|
||||
|
||||
作业2：
|
||||
|
||||
分类菜单 效果如下
|
||||
|
||||
|
||||
|
||||
作业三：
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
注：
|
||||
|
||||
左下角录制工具的水印不用做
|
||||
|
||||
图片可以自定义
|
||||
BIN
csspress/3.定位.assets/image-20210104095232481.png
Normal file
BIN
csspress/3.定位.assets/image-20210104095232481.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
csspress/3.定位.assets/image-20210104101111002.png
Normal file
BIN
csspress/3.定位.assets/image-20210104101111002.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 992 B |
BIN
csspress/3.定位.assets/image-20210104102616301.png
Normal file
BIN
csspress/3.定位.assets/image-20210104102616301.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
csspress/3.定位.assets/image-20210104104339420.png
Normal file
BIN
csspress/3.定位.assets/image-20210104104339420.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1002 B |
BIN
csspress/3.定位.assets/image-20210104113658613.png
Normal file
BIN
csspress/3.定位.assets/image-20210104113658613.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
BIN
csspress/3.定位.assets/image-20210104115013701.png
Normal file
BIN
csspress/3.定位.assets/image-20210104115013701.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
csspress/3.定位.assets/image-20210104115040341.png
Normal file
BIN
csspress/3.定位.assets/image-20210104115040341.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
csspress/3.定位.assets/image-20210118113158799.png
Normal file
BIN
csspress/3.定位.assets/image-20210118113158799.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 393 KiB |
BIN
csspress/3.定位.assets/image-20210118113652011.png
Normal file
BIN
csspress/3.定位.assets/image-20210118113652011.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 429 KiB |
BIN
csspress/3.定位.assets/image-20210118172837051.png
Normal file
BIN
csspress/3.定位.assets/image-20210118172837051.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
BIN
csspress/3.定位.assets/image-20210118172910611.png
Normal file
BIN
csspress/3.定位.assets/image-20210118172910611.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 175 KiB |
BIN
csspress/3.定位.assets/image-20210118172934691.png
Normal file
BIN
csspress/3.定位.assets/image-20210118172934691.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 168 KiB |
BIN
csspress/3.定位.assets/image-20210118173020931.png
Normal file
BIN
csspress/3.定位.assets/image-20210118173020931.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 973 KiB |
BIN
csspress/3.定位.assets/image-20210118173115050.png
Normal file
BIN
csspress/3.定位.assets/image-20210118173115050.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
@@ -1,5 +1,31 @@
|
||||
# 定位(position)
|
||||
|
||||
### 为什么要使用定位
|
||||
|
||||
请问以下状况用标准流或者浮动可以实现吗？
|
||||
|
||||
- 想让广告右下角的切换的那三个点图标 在广告框内自由移动位置，并且会压住下面的盒子 覆盖在最上面
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
- 不管滚动条滚动到什么位置 ，元素都始终固定在原来的位置不变
|
||||
|
||||
|
||||
|
||||
**结论** ：
|
||||
|
||||
1. 以上的两种情况 用普通的文档流和浮动都不能快速实现，此时要用定位来实现
|
||||
|
||||
2. 浮动和定位的区别
|
||||
|
||||
浮动可以让多个块级盒子一行内没有缝隙排列显示 经常用于
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
position 用来定义元素在网页上的位置，常用的有五种：
|
||||
|
||||
- static 正常的页面流，position属性的默认值
|
||||
@@ -8,13 +34,19 @@ position 用来定义元素在网页上的位置，常用的有五种：
|
||||
- fixed 固定定位
|
||||
- sticky 粘性布局
|
||||
|
||||
语法：
|
||||
|
||||
position:定位方式
|
||||
|
||||
方向：偏移值
|
||||
|
||||
|
||||
|
||||
### static
|
||||
|
||||
这时浏览器会按照源码的顺序决定元素的位置，这样称为“正常的页面流”。块级元素占据自己的区块，元素之间不重叠。
|
||||
|
||||
|
||||
|
||||
|
||||
html：
|
||||
|
||||
@@ -57,7 +89,7 @@ absolute 基于父元素定位，通过 top,bottom,left,right 四个属性规定
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
html 不变 css如下：
|
||||
|
||||
@@ -79,7 +111,7 @@ div{
|
||||
|
||||
上面的例子里，第一个灰色的div（以下叫A）并没有出现在页面上，因为这时候给A 添加了position:absolute 属性，使他脱离正常的文档流 然后他下面（从上到下依次叫B,C），B,C并没有脱离文档流，所以会移动到上面来，把A覆盖
|
||||
|
||||
|
||||
|
||||
|
||||
html：
|
||||
|
||||
@@ -120,7 +152,7 @@ css:
|
||||
|
||||
相对定位，选中元素不会脱离文档流，相对于其自身位置进行移动，通过top,bottom,left,right 属性进行规定
|
||||
|
||||
|
||||
|
||||
|
||||
```
|
||||
<style>
|
||||
@@ -186,7 +218,7 @@ css:
|
||||
</style>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -242,10 +274,38 @@ css:
|
||||
|
||||
滚动前：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
滚动后：
|
||||
|
||||
|
||||
|
||||
|
||||
作业一
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
作业二
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
作业三
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
作业4
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
作业5
|
||||
|
||||
|
||||
BIN
csspress/4.flex.assets/image-20210120113341512.png
Normal file
BIN
csspress/4.flex.assets/image-20210120113341512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
BIN
csspress/4.flex.assets/image-20210120114325303.png
Normal file
BIN
csspress/4.flex.assets/image-20210120114325303.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
csspress/4.flex.assets/image-20210120114326831-1611138867367.png
Normal file
BIN
csspress/4.flex.assets/image-20210120114326831-1611138867367.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
csspress/4.flex.assets/image-20210120114326831.png
Normal file
BIN
csspress/4.flex.assets/image-20210120114326831.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
csspress/4.flex.assets/image-20210120114504619.png
Normal file
BIN
csspress/4.flex.assets/image-20210120114504619.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
csspress/4.flex.assets/image-20210120114721023-1611138852216.png
Normal file
BIN
csspress/4.flex.assets/image-20210120114721023-1611138852216.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
csspress/4.flex.assets/image-20210120114721023.png
Normal file
BIN
csspress/4.flex.assets/image-20210120114721023.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
csspress/4.flex.assets/image-20210120134940595.png
Normal file
BIN
csspress/4.flex.assets/image-20210120134940595.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 492 KiB |
BIN
csspress/4.flex.assets/image-20210120135351730.png
Normal file
BIN
csspress/4.flex.assets/image-20210120135351730.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 396 KiB |
BIN
csspress/4.flex.assets/image-20210120135442183.png
Normal file
BIN
csspress/4.flex.assets/image-20210120135442183.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
BIN
csspress/4.flex.assets/image-20210120135503448.png
Normal file
BIN
csspress/4.flex.assets/image-20210120135503448.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
BIN
csspress/4.flex.assets/image-20210120143705542-1611138861830.png
Normal file
BIN
csspress/4.flex.assets/image-20210120143705542-1611138861830.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
csspress/4.flex.assets/image-20210120143705542.png
Normal file
BIN
csspress/4.flex.assets/image-20210120143705542.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
csspress/4.flex.assets/image-20210222165013291.png
Normal file
BIN
csspress/4.flex.assets/image-20210222165013291.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
@@ -7,16 +7,9 @@ flex 意为弹性盒子，用来为盒模型提供最大的灵活性
|
||||
任何一个元素都能被指定为flex 容器
|
||||
|
||||
```
|
||||
/*
|
||||
选中元素为块级元素时
|
||||
*/
|
||||
display:flex
|
||||
display:flex 选中元素为块级元素时
|
||||
|
||||
|
||||
/*
|
||||
选中元素为内联元素时
|
||||
*/
|
||||
display:inline-flex
|
||||
display:inline-flex 选中元素为内联元素时
|
||||
```
|
||||
|
||||
### 基本概念
|
||||
@@ -29,11 +22,30 @@ display:inline-flex
|
||||
|
||||
垂直交叉轴的起点叫做 cross start 结束位置叫做 cross end
|
||||
|
||||
|
||||
|
||||
注： 容器的主轴和侧轴是由 flex-direction 确定的 默认主轴是水平（row）
|
||||
|
||||
当 flex-direction 的值为column时 主轴为竖直 侧轴为水平
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 容器的属性
|
||||
|
||||
- flex-direction 声明容器使用的轴是水平的还是垂直的
|
||||
- row 水平
|
||||
- column 垂直
|
||||
- row 水平（起点在左）
|
||||
- column 垂直 （起点在上）
|
||||
- row-reverse 水平（起点在右）
|
||||
- column-reverse 垂直（起点在下）
|
||||
|
||||
- justify-content 声明排列的方式
|
||||
- center 居中
|
||||
- space-around 每个项目两侧的间隔相等 项目到边框有间距
|
||||
@@ -43,4 +55,137 @@ display:inline-flex
|
||||
- flex-start 交叉轴起点对齐（拓展）
|
||||
- flex-end 交叉轴终点对齐
|
||||
- baseline 第一行文字的基线对齐
|
||||
- stretch 默认占满整个容器的高度
|
||||
- stretch 默认占满整个容器的高度
|
||||
|
||||
|
||||
|
||||
```
|
||||
<!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;
|
||||
}
|
||||
.box{
|
||||
width: 1000px;
|
||||
height: 500px;
|
||||
background: pink;
|
||||
display:flex; //声明容器为弹性盒子
|
||||
flex-direction: row; //声明排列的方向为水平和竖直
|
||||
align-items: center;//垂直排列方式
|
||||
justify-content: center； //水平排列方式
|
||||
}
|
||||
.left{
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: red;
|
||||
}
|
||||
.right{
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box">
|
||||
<div class="left"></div>
|
||||
<div class="right"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
|
||||
#### justify-content
|
||||
|
||||
##### center: 水平居中
|
||||
|
||||
|
||||
|
||||
```
|
||||
.box{
|
||||
width: 1000px;
|
||||
height: 500px;
|
||||
background: pink;
|
||||
display:flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
##### space-around 每个项目两侧的间隔相等 项目到边框有间距
|
||||
|
||||
|
||||
|
||||
```
|
||||
.box{
|
||||
width: 1000px;
|
||||
height: 500px;
|
||||
background: pink;
|
||||
display:flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
##### space-between 两端对齐 项目之间的间隔都相等
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```
|
||||
.box{
|
||||
width: 1000px;
|
||||
height: 500px;
|
||||
background: pink;
|
||||
display:flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
#### align-items
|
||||
|
||||
定义侧轴的项目对齐方式
|
||||
|
||||
作业1：
|
||||
|
||||
|
||||
|
||||
作业2：
|
||||
|
||||
实现flex-内容宽度等分
|
||||
|
||||
作业3：
|
||||
|
||||
左右布局，一侧定宽一侧自适应填满
|
||||
|
||||
作业4：
|
||||
|
||||
未知高度上下左右居中
|
||||
|
||||
作业6：
|
||||
|
||||
|
||||
|
||||
作业7：
|
||||
|
||||
|
||||
|
||||
作业8
|
||||
|
||||
|
||||
BIN
csspress/4.flex.pdf
Normal file
BIN
csspress/4.flex.pdf
Normal file
Binary file not shown.
@@ -75,6 +75,50 @@
|
||||
|
||||
通过’%‘单位来实现响应式效果。浏览器高度和宽度发生变化时，通过百分比单位可以使元素的高和宽随着浏览器的变化而变化，从而实现响应式效果
|
||||
|
||||
可以取百分比的属性：
|
||||
* 定位：top, right, bottom, left
|
||||
* 盒模型：width,height, margin,padding
|
||||
* 背景：backgroug-position, backgroud-size
|
||||
* 文本：text-indent
|
||||
* 字体：font-size
|
||||
|
||||
css 百分比都相对于谁？
|
||||
结论：css的布局块都是盒子，然后一个盒子的百分比其实是相对于其包含块的，也就是他的父级元素。
|
||||
* 相对于父级宽度的：
|
||||
* width
|
||||
* max-width
|
||||
* min-width
|
||||
* padding
|
||||
* margin
|
||||
* text-indent
|
||||
* left
|
||||
* right
|
||||
...
|
||||
|
||||
* 相对于父级高度的：
|
||||
* height
|
||||
* max-height
|
||||
* min-height
|
||||
* top
|
||||
* bottom
|
||||
|
||||
* 相对于主轴长度(在flex弹性盒子布局中)
|
||||
* flex-basis
|
||||
|
||||
* 相对于继承字号的
|
||||
* font-size
|
||||
|
||||
* 相对于自身字号的
|
||||
* line-height
|
||||
|
||||
* 相对于自身宽高的
|
||||
* border-radius 等border相关
|
||||
* background-size
|
||||
...
|
||||
|
||||
* 相对于行高的
|
||||
* verticle-align (设置元素垂直对齐方式)
|
||||
|
||||
示例：
|
||||
|
||||
```
|
||||
@@ -195,5 +239,8 @@ rem是一个相对单位，1rem等于html元素上字体设置的大小。我们
|
||||
|
||||
2.根据设计稿大小，调整里面的最后两个参数值。
|
||||
|
||||
3.使用1rem=100px转换你的设计稿的像素，例如设计稿上某个块是100px*300px,换算成rem则为1rem*3rem。
|
||||
3.使用1rem=100px转换你的设计稿的像素，例如设计稿上某个块是100px * 300px,换算成rem则为1rem*3rem。
|
||||
|
||||
示例参考demo/rem.html
|
||||
|
||||
|
||||
|
||||
105
csspress/6.sass和less.md
Normal file
105
csspress/6.sass和less.md
Normal file
@@ -0,0 +1,105 @@
|
||||
# sass(scss) 与 less
|
||||
|
||||
sass 和 less 都是我们css的扩展语言，他们完全兼容css的写法 并为css添加了许多新的功能。
|
||||
|
||||
#### 下载
|
||||
|
||||
sass基于ruby语言开发而成，因此 安装sass之前需要安装Ruby
|
||||
|
||||
windows 通过Ruby 官网（https://rubyinstaller.org/downloads/） 下载并完成安装
|
||||
|
||||
安装过程中需要勾选Add Ruby executables to your PATH 添加到系统的环境变量 否则安装wanchengho
|
||||
|
||||
需要手动配置
|
||||
|
||||
如下图：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
安装完后需要测试安装是否成功，打开cmd
|
||||
|
||||
```
|
||||
ruby -v
|
||||
//如安装成功会打印
|
||||
ruby 2.6.4p104 (2019-08-28 revision 67798) [x64-mingw32]
|
||||
```
|
||||
|
||||
ruby 安装完成后 可以在控制台输入下面命令安装sass
|
||||
|
||||
> gem install sass
|
||||
|
||||
|
||||
|
||||
或者用
|
||||
|
||||
#### less 安装
|
||||
|
||||
推荐使用node环境 npm 包管理器进行安装 使用如下命令：
|
||||
|
||||
```
|
||||
npm install -g less
|
||||
```
|
||||
|
||||
|
||||
|
||||
### sass 使用
|
||||
|
||||
```
|
||||
sass app.scss app.css
|
||||
```
|
||||
|
||||
使用上面命令可以将app.scss 文件编译成 app.css
|
||||
|
||||
less 编译：
|
||||
|
||||
```
|
||||
lessc test.less > test.css
|
||||
```
|
||||
|
||||
使用上面的命令可以将test.less 编译成test.css
|
||||
|
||||
|
||||
|
||||
### sass 和 less语法
|
||||
|
||||
sass 和less 完全支持css的语法
|
||||
|
||||
除此之外，还拓展了以下语法：
|
||||
|
||||
父子关系嵌套写法：
|
||||
|
||||
```
|
||||
.box{
|
||||
width:70px;
|
||||
height:70px;
|
||||
.head{
|
||||
background:red
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
编译出来的结果为：
|
||||
|
||||
```
|
||||
.box{
|
||||
width:70px;
|
||||
height:70px;
|
||||
}
|
||||
.box .head{
|
||||
background:red
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
其他使用变量 嵌套导入 混合器....等功能有兴趣自行拓展
|
||||
|
||||
sass中文网：
|
||||
|
||||
https://www.sass.hk/guide/
|
||||
|
||||
less中文网
|
||||
|
||||
https://less.bootcss.com/
|
||||
BIN
csspress/css实战(一).assets/image-20210223151126809.png
Normal file
BIN
csspress/css实战(一).assets/image-20210223151126809.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 294 KiB |
BIN
csspress/css实战(一).assets/image-20210223174608465.png
Normal file
BIN
csspress/css实战(一).assets/image-20210223174608465.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 375 KiB |
BIN
csspress/css实战(一).assets/image-20210223180430143.png
Normal file
BIN
csspress/css实战(一).assets/image-20210223180430143.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 373 KiB |
BIN
csspress/css实战(一).assets/image-20210223180523455.png
Normal file
BIN
csspress/css实战(一).assets/image-20210223180523455.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
BIN
csspress/css实战(一).assets/image-20210223181949796.png
Normal file
BIN
csspress/css实战(一).assets/image-20210223181949796.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
csspress/css实战(一).assets/image-20210223182049992.png
Normal file
BIN
csspress/css实战(一).assets/image-20210223182049992.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 355 KiB |
BIN
csspress/css实战(一).assets/image-20210223182258454.png
Normal file
BIN
csspress/css实战(一).assets/image-20210223182258454.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 333 KiB |
BIN
csspress/css实战(一).assets/image-20210223182345438.png
Normal file
BIN
csspress/css实战(一).assets/image-20210223182345438.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 270 KiB |
BIN
csspress/css实战(一).assets/image-20210223182428924.png
Normal file
BIN
csspress/css实战(一).assets/image-20210223182428924.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 142 KiB |
BIN
csspress/css实战(一).assets/image-20210223182524394.png
Normal file
BIN
csspress/css实战(一).assets/image-20210223182524394.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 495 KiB |
43
csspress/css实战(一).md
Normal file
43
csspress/css实战(一).md
Normal file
@@ -0,0 +1,43 @@
|
||||
# css实战阶段一
|
||||
### 苏宁易购
|
||||
|
||||
#### 顶部导航栏：
|
||||
|
||||
.assets\image-20210223180523455.png)
|
||||
|
||||
|
||||
|
||||
说明： 写完顶部导航条以后需要加上下面的白色下拉框的内容 本阶段可以一直显示
|
||||
|
||||
### 白色的标题搜索栏
|
||||
|
||||
.assets\image-20210223181949796.png)
|
||||
|
||||
|
||||
|
||||
### 分类
|
||||
|
||||
.assets\image-20210223182049992.png)
|
||||
|
||||
|
||||
|
||||
### 热卖爆款
|
||||
|
||||
.assets\image-20210223182258454.png)
|
||||
|
||||
|
||||
### 冰箱洗衣机
|
||||
|
||||
.assets\image-20210223182345438.png)
|
||||
|
||||
|
||||
|
||||
### 底部导航
|
||||
|
||||
.assets\image-20210223182428924.png)
|
||||
|
||||
|
||||
|
||||
### 固定的侧边栏
|
||||
|
||||
.assets\image-20210223182524394.png)
|
||||
29
csspress/css重点内容.md
Normal file
29
csspress/css重点内容.md
Normal file
@@ -0,0 +1,29 @@
|
||||
# css 重点内容
|
||||
|
||||
- 盒模型
|
||||
|
||||
- 块级元素和内联元素
|
||||
- 会画盒模型的线框图
|
||||
- padding margin border...属性的认识
|
||||
- 会计算盒模型中元素的宽度和高度
|
||||
|
||||
- 定位
|
||||
|
||||
- static
|
||||
- relative
|
||||
- absolute
|
||||
- fixed
|
||||
|
||||
- 浮动和flex
|
||||
|
||||
- float
|
||||
- flex
|
||||
|
||||
- 自适应和响应式
|
||||
|
||||
- 媒体查询
|
||||
- rem
|
||||
- 百分比
|
||||
|
||||
|
||||
|
||||
8
csspress/demo/.idea/demo.iml
generated
Normal file
8
csspress/demo/.idea/demo.iml
generated
Normal file
@@ -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>
|
||||
12
csspress/demo/.idea/inspectionProfiles/Project_Default.xml
generated
Normal file
12
csspress/demo/.idea/inspectionProfiles/Project_Default.xml
generated
Normal file
@@ -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>
|
||||
6
csspress/demo/.idea/inspectionProfiles/profiles_settings.xml
generated
Normal file
6
csspress/demo/.idea/inspectionProfiles/profiles_settings.xml
generated
Normal file
@@ -0,0 +1,6 @@
|
||||
<component name="InspectionProjectProfileManager">
|
||||
<settings>
|
||||
<option name="USE_PROJECT_PROFILE" value="false" />
|
||||
<version value="1.0" />
|
||||
</settings>
|
||||
</component>
|
||||
8
csspress/demo/.idea/modules.xml
generated
Normal file
8
csspress/demo/.idea/modules.xml
generated
Normal file
@@ -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>
|
||||
6
csspress/demo/.idea/vcs.xml
generated
Normal file
6
csspress/demo/.idea/vcs.xml
generated
Normal file
@@ -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>
|
||||
37
csspress/demo/.idea/workspace.xml
generated
Normal file
37
csspress/demo/.idea/workspace.xml
generated
Normal file
@@ -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>
|
||||
52
csspress/demo/absolute.html
Normal file
52
csspress/demo/absolute.html
Normal file
@@ -0,0 +1,52 @@
|
||||
<!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: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.box1 {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: yellow;
|
||||
margin: 20px;
|
||||
/* position:static */
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.box2 {
|
||||
background: red;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="box1">
|
||||
<div class="box2"></div>
|
||||
</div>
|
||||
<p>
|
||||
<p> 注：这里红色的div是依据 body定位的，而不是根据父元素黄色的div 定位，</p>
|
||||
<p> 加上position static 后也是根据body 定位，</p>
|
||||
<p>当父元素的Position声明为 absolute 时，红色会依据父级黄色定位，但是会超脱文档流，影响下面的元素</p>
|
||||
|
||||
|
||||
|
||||
|
||||
</p>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
37
csspress/demo/boxsize.html
Normal file
37
csspress/demo/boxsize.html
Normal file
@@ -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>
|
||||
93
csspress/demo/clearfloat.html
Normal file
93
csspress/demo/clearfloat.html
Normal file
@@ -0,0 +1,93 @@
|
||||
<!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;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 1000px;
|
||||
height: 300px;
|
||||
background: gold;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.box1 {
|
||||
/* width:60px;
|
||||
height: 60px; */
|
||||
background: red;
|
||||
/* background: rgba(255, 0, 0, 0.363); */
|
||||
/* float: left; */
|
||||
|
||||
|
||||
}
|
||||
|
||||
.box2 {
|
||||
width: 120px;
|
||||
height: 80px;
|
||||
background: gray;
|
||||
border: 1px solid pink;
|
||||
color: white;
|
||||
/* float:right */
|
||||
float: left;
|
||||
}
|
||||
|
||||
.box4 {
|
||||
width: 120px;
|
||||
height: 80px;
|
||||
background: blue;
|
||||
border: 1px solid pink;
|
||||
/* clear: left;
|
||||
这是哪个元素需要清除浮动哪个元素加clear
|
||||
*/
|
||||
}
|
||||
|
||||
.boxes{
|
||||
overflow: auto;
|
||||
/*
|
||||
这是通过Overflow:auto 清除浮动
|
||||
*/
|
||||
}
|
||||
.blank{
|
||||
clear:left
|
||||
}
|
||||
/*
|
||||
在浮动元素最后面加一个空的div 附上clear属性清除浮动
|
||||
*/
|
||||
|
||||
/* .boxes:after {
|
||||
content: '.';
|
||||
height: 0;
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
这是通过伪类清除浮动，必须加上content:"." 否则不起作用
|
||||
*/
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="box">
|
||||
<div class="boxes clearfix">
|
||||
<div class="box1">asaaaa</div>
|
||||
<div class="box2"></div>
|
||||
|
||||
<div class="box2">4</div>
|
||||
<div class="box2 blankdiv">5</div>
|
||||
<!-- <div class="box2" style="height: 180px;">6</div> -->
|
||||
<div class="blank"></div>
|
||||
</div>
|
||||
<div class="box4"></div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
46
csspress/demo/fixed.html
Normal file
46
csspress/demo/fixed.html
Normal file
@@ -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>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body{
|
||||
overflow: auto;
|
||||
}
|
||||
.box1 {
|
||||
background: yellow;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
/* height: 50px; */
|
||||
}
|
||||
|
||||
.box2 {
|
||||
height: 20px;
|
||||
position: fixed;
|
||||
top: 30px;
|
||||
width: 100%;
|
||||
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>
|
||||
107
csspress/demo/flex.html
Normal file
107
csspress/demo/flex.html
Normal file
@@ -0,0 +1,107 @@
|
||||
<!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;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 1000px;
|
||||
height: 500px;
|
||||
background: pink;
|
||||
display: flex;
|
||||
/* 通过display:flex来把目标元素设置成flex布局 */
|
||||
flex-direction: row;
|
||||
/* flex-direction 属性决定主轴的方向，值为row的时候水平排列 起点在左 */
|
||||
}
|
||||
|
||||
.box1 {
|
||||
width: 1000px;
|
||||
height: 500px;
|
||||
background: gold;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.left,
|
||||
.left1 {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: red;
|
||||
}
|
||||
|
||||
.right,
|
||||
.right1 {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
.box3 {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.box4 {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="box" style="margin-bottom: 15px;">
|
||||
|
||||
<div class="left"></div>
|
||||
<div class="right"></div>
|
||||
<div>
|
||||
这里是flex-direction:row的状况 即水平排列 起点在左侧
|
||||
</div>
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="left"></div>
|
||||
<div class="left"></div>
|
||||
<div class="left"></div>
|
||||
<div class="left"></div>
|
||||
<div class="left"></div>
|
||||
<div class="left"></div>
|
||||
<div class="right"></div>
|
||||
<div>
|
||||
这里是flex-direction:row的状况 即水平排列 起点在左侧
|
||||
对于溢出的状况，flex-wrap 可以定义是否换行
|
||||
<P>默认属性值为 nowrap 不换行；其他属性还有wrap(换行), wrap-reverse(换行，第二行反向排列)</P>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box1">
|
||||
|
||||
<div class="right1"></div>
|
||||
<div class="left1"></div>
|
||||
<div>
|
||||
这里是flex-direction:column的状况 即垂直排列 起点在上面
|
||||
</div>
|
||||
</div>
|
||||
<div class="box box3">
|
||||
<div class="left"></div>
|
||||
<div class="right"></div>
|
||||
<div>
|
||||
这里是flex-direction:column的状况 即垂直排列 起点在下面
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="box1 box4">
|
||||
|
||||
<div class="right1"></div>
|
||||
<div class="left1"></div>
|
||||
<div>
|
||||
这里是flex-direction:column-reverse的状况 即垂直排列 起点在下面
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
86
csspress/demo/flex1pailie.html
Normal file
86
csspress/demo/flex1pailie.html
Normal file
@@ -0,0 +1,86 @@
|
||||
<!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">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
*{
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
.box{
|
||||
width: 1000px;
|
||||
height: 500px;
|
||||
background: pink;
|
||||
|
||||
display:flex;
|
||||
/* 通过display:flex来把目标元素设置成flex布局 */
|
||||
flex-direction: row;
|
||||
/* flex-direction 属性决定主轴的方向，值为row的时候水平排列 起点在左 */
|
||||
|
||||
justify-content: center;
|
||||
}
|
||||
.box1{
|
||||
width: 1000px;
|
||||
height: 500px;
|
||||
background: gold;
|
||||
display:flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
}
|
||||
.left,.left1{
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: red;
|
||||
}
|
||||
.right,.right1{
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: blue;
|
||||
}
|
||||
.box3{
|
||||
justify-content: space-around;
|
||||
}
|
||||
.box4{
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style="margin-bottom: 50px;">
|
||||
注：以下所有实例 基于flex-direction:row的情况，即水平排列 起点在左边
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="left"></div>
|
||||
<div class="right"></div>
|
||||
|
||||
</div>
|
||||
<div style=" margin-bottom: 30px;">
|
||||
上面是 justify-content:center 居中的状况
|
||||
</div>
|
||||
|
||||
<div class="box1">
|
||||
<div class="left"></div>
|
||||
<div class="right"></div>
|
||||
|
||||
</div>
|
||||
<div style=" margin-bottom: 30px;">
|
||||
上面是 justify-content:space-between 居中的状况
|
||||
两端对齐 项目之间的间隔都相等
|
||||
</div>
|
||||
|
||||
<div class="box box3">
|
||||
<div class="left"></div>
|
||||
<div class="right"></div>
|
||||
|
||||
</div>
|
||||
<div style=" margin-bottom: 30px;">
|
||||
上面是 justify-content:space-around 居中的状况
|
||||
每个项目两侧的间隔相等 项目到边框有间距
|
||||
即两端不对齐
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
112
csspress/demo/flexjiaochazhou.html
Normal file
112
csspress/demo/flexjiaochazhou.html
Normal file
@@ -0,0 +1,112 @@
|
||||
<!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">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
*{
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
.box{
|
||||
width: 1000px;
|
||||
height: 500px;
|
||||
background: pink;
|
||||
display:flex;
|
||||
/* 通过display:flex来把目标元素设置成flex布局 */
|
||||
flex-direction: row;
|
||||
/* flex-direction 属性决定主轴的方向，值为row的时候水平排列 起点在左 */
|
||||
|
||||
align-items: center;
|
||||
}
|
||||
.box1{
|
||||
width: 1000px;
|
||||
height: 500px;
|
||||
background: gold;
|
||||
display:flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
|
||||
}
|
||||
.left,.left1{
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: red;
|
||||
}
|
||||
.right,.right1{
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: blue;
|
||||
}
|
||||
.box3{
|
||||
align-items: flex-end;
|
||||
}
|
||||
.box4{
|
||||
align-items: baseline ;
|
||||
}
|
||||
.box5{
|
||||
align-items: stretch;
|
||||
}
|
||||
.lefta{
|
||||
height:auto
|
||||
}
|
||||
.boxfin{
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style="margin-bottom: 50px;">
|
||||
注：以下所有实例 基于flex-direction:row的情况，即水平排列 起点在左边
|
||||
且 主轴为默认
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="left"></div>
|
||||
<div class="right"></div>
|
||||
</div>
|
||||
<div style=" margin-bottom: 30px;">
|
||||
上面是 align-items:center 居中的状况
|
||||
</div>
|
||||
|
||||
<div class="box1">
|
||||
<div class="left"></div>
|
||||
<div class="right"></div>
|
||||
|
||||
</div>
|
||||
<div style=" margin-bottom: 30px;">
|
||||
上面是 align-items: flex-start; 起点在上面
|
||||
</div>
|
||||
|
||||
<div class="box box4">
|
||||
<div class="left"></div>
|
||||
<div class="right"></div>
|
||||
|
||||
</div>
|
||||
<div style=" margin-bottom: 30px;">
|
||||
上面是 align-items:base-line 项目的第一行文字的基线对齐的情况
|
||||
</div>
|
||||
|
||||
<div class="box1 box5">
|
||||
<div class="left lefta"></div>
|
||||
<div class="right lefta"></div>
|
||||
|
||||
</div>
|
||||
<div style=" margin-bottom: 30px;">
|
||||
上面是 align-items:stretch（默认值） 如果项目未设置高度或设为auto，将占满整个容器的高度。
|
||||
</div>
|
||||
|
||||
<div class="box1 boxfin">
|
||||
<div class="left"></div>
|
||||
<div class="right"></div>
|
||||
|
||||
</div>
|
||||
<div class="zong">
|
||||
总结1：flex-direction属性定义的是主轴方向，默认为水平，所以 交叉轴方向默认为垂直;
|
||||
<p>当 flex-direction的值为column的时候，align-items决定的就是垂直方向的排列方式</p>
|
||||
<b>align-items决定的是交叉轴的排列方式 而不一定是单指 垂直的排列方式</b>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
71
csspress/demo/float.html
Normal file
71
csspress/demo/float.html
Normal file
@@ -0,0 +1,71 @@
|
||||
<!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;
|
||||
}
|
||||
.box{
|
||||
width: 1000px;
|
||||
height: 300px;
|
||||
background: gold;
|
||||
margin: 20px;
|
||||
}
|
||||
.box1{
|
||||
/* width:60px;
|
||||
height: 60px; */
|
||||
background: red;
|
||||
/* background: rgba(255, 0, 0, 0.363); */
|
||||
/* float: left; */
|
||||
|
||||
|
||||
}
|
||||
.box2{
|
||||
width: 120px;
|
||||
height:80px;
|
||||
background: gray;
|
||||
border: 1px solid pink;
|
||||
/* float:right */
|
||||
float: left;
|
||||
}
|
||||
.a{
|
||||
/* width: 70px;
|
||||
height: 70px;
|
||||
border: 1px solid blue;
|
||||
background: pink; */
|
||||
clear: right;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box">
|
||||
<div class="box1">asaaaa</div>
|
||||
<div class="box2"></div>
|
||||
<div class="box2"></div>
|
||||
<div class="box2"></div>
|
||||
<div class="box2"></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>
|
||||
<div class="box1"></div>
|
||||
<div class="box1"></div>
|
||||
<div class="box1"></div>
|
||||
<div class="box2">1</div>
|
||||
<div class="box2">2</div>
|
||||
<div class="box2">3</div>
|
||||
<div class="box2">4</div>
|
||||
<div class="box2">5</div>
|
||||
<div class="box2" style="height: 180px;">6</div>
|
||||
<div class="a"></div>
|
||||
<div>nhjksahkihfi</div> -->
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
45
csspress/demo/float1.html
Normal file
45
csspress/demo/float1.html
Normal file
@@ -0,0 +1,45 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>
|
||||
盒子模型
|
||||
</title>
|
||||
<style>
|
||||
*{
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
body{
|
||||
text-align:center;
|
||||
}
|
||||
div{
|
||||
width:200px;
|
||||
height:200px;
|
||||
margin:0 auto;
|
||||
}
|
||||
#div1{
|
||||
margin-top:10px;
|
||||
background:red;
|
||||
}
|
||||
#div11{
|
||||
margin-top:20px;
|
||||
width:0;
|
||||
height:0;
|
||||
background:yellow;
|
||||
}
|
||||
#div12{
|
||||
margin-top:30px;
|
||||
width:50px;
|
||||
height:50px;
|
||||
background:blue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="div1">
|
||||
<div id="div11"></div>
|
||||
<div id="div12"></div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
50
csspress/demo/float2.html
Normal file
50
csspress/demo/float2.html
Normal file
@@ -0,0 +1,50 @@
|
||||
<!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;
|
||||
}
|
||||
.box{
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: pink;
|
||||
}
|
||||
.box1{
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: red;
|
||||
float: left;
|
||||
}
|
||||
.hr{
|
||||
width: 200px;
|
||||
}
|
||||
.zongjie{
|
||||
font-size:18px;
|
||||
font-weight: bold;
|
||||
color: red;
|
||||
}
|
||||
.zhu{
|
||||
color:black
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box">你好</div>
|
||||
<p class="hr">我是想环绕红色div的文字我是想环绕红色div的文字我是想环绕红色div的文字我是想环绕红色div的文字我是想环绕红色div的文字我是想环绕红色div的文字我是想环绕红色div的文字</p>
|
||||
|
||||
|
||||
<div class="box1">你好</div>
|
||||
<p class="hr">我是想环绕红色div的文字我是想环绕红色div的文字我是想环绕红色div的文字我是想环绕红色div的文字我是想环绕红色div的文字我是想环绕红色div的文字我是想环绕红色div的文字</p>
|
||||
<!-- box1默认样式时，p标签的内容会出现在红色div的下方 -->
|
||||
|
||||
<p class="zongjie">总结：当box1加上float:left 时，如果文字的宽度不超过红色div的宽度 那么文字会在红色div的下面 如果文字宽度超过div的宽度，那么文字会环绕红色div</p>
|
||||
<div class="zongjie zhu">原因：浮动的破坏性在于切断Linebox(行盒)链，致使高度塌陷，由于浮动元素仍在dom树中，实体是看得见摸得着的，所以他占据的位置还是在的</div>
|
||||
<div class="zongjie zhu">解释:脱离文档流 是将元素从普通的布局排版中拿走，其他盒子定位的时候，会当做脱离文档流的元素不存在进行定位。但是，使用float 使元素脱离文档流时，其他盒子会无视这个元素，但其他盒子的文本依然会为这个元素让出位置，环绕在四周</div>
|
||||
</body>
|
||||
</html>
|
||||
87
csspress/demo/floatbtn.html
Normal file
87
csspress/demo/floatbtn.html
Normal file
@@ -0,0 +1,87 @@
|
||||
<!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;
|
||||
}
|
||||
|
||||
/* inline-bliock方法： */
|
||||
.btn1 {
|
||||
display: inline-block;
|
||||
background: blue;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
font-size: 12px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn3 {
|
||||
display: block;
|
||||
background: pink;
|
||||
}
|
||||
|
||||
/* float方法： */
|
||||
.btn2 {
|
||||
display: inline-block;
|
||||
background: red;
|
||||
color: white;
|
||||
padding: 5px;
|
||||
font-size: 12px;
|
||||
text-decoration: none;
|
||||
}
|
||||
.btn{
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
.group1{
|
||||
margin-bottom: 30px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.wenzi{
|
||||
width: 400px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
</body>
|
||||
<div class="group1">
|
||||
group1:
|
||||
<div class="btn1">提交</div>
|
||||
<div class="btn1">提交提交提交提交提交提交提交提交</div>
|
||||
<div class="btn2">编辑</div>
|
||||
<p class="wenzi">这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字</p>
|
||||
</div>
|
||||
<div class="group2">
|
||||
group2:
|
||||
<div class="btn1">提交</div>
|
||||
<div class="btn1">提交提交提交提交提交提交提交提交</div>
|
||||
<div class="btn3">添加</div>
|
||||
<div class="btn2">编辑</div>
|
||||
<div class="btn2">编辑编辑编辑编辑编辑编辑编辑编辑编辑</div>
|
||||
</div>
|
||||
|
||||
<div class="group1">
|
||||
<div>
|
||||
group3:
|
||||
</div>
|
||||
<div class="btn1 btn">提交</div>
|
||||
<div class="btn1 btn">提交提交提交提交提交提交提交提交</div>
|
||||
<div class="btn2 btn">编辑</div>
|
||||
<p class="wenzi">这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字</p>
|
||||
</div>
|
||||
<div class="zongjie">
|
||||
group1中 btn1，btn2定义了inlineblock 实现了div的宽度随内容自适应且多个div水平排列
|
||||
display:inline-block 将元素显示为行内块状元素 设置该属性后 其他的行内块级元素会排列在同一行
|
||||
使其既有block设置高度的特性 又有inline的同行特性
|
||||
|
||||
group2中，btn1,btn2还是同样的Inlineblock btn3是block 这时候 btn3的元素会独占一行 前后元素会换行显示
|
||||
</div>
|
||||
</html>
|
||||
45
csspress/demo/margin.html
Normal file
45
csspress/demo/margin.html
Normal file
@@ -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>
|
||||
42
csspress/demo/margin2.html
Normal file
42
csspress/demo/margin2.html
Normal file
@@ -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>
|
||||
47
csspress/demo/margin3.html
Normal file
47
csspress/demo/margin3.html
Normal file
@@ -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>
|
||||
53
csspress/demo/paddiing.html
Normal file
53
csspress/demo/paddiing.html
Normal file
@@ -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>
|
||||
@@ -1,32 +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>
|
||||
*{
|
||||
margin:0;
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
div{
|
||||
width:60px;
|
||||
height: 600px;
|
||||
background:red;
|
||||
}
|
||||
.box1{
|
||||
background: gray;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
position: sticky;top: 10px;
|
||||
}
|
||||
.box2{
|
||||
background: gold;
|
||||
.box1 {
|
||||
background: yellow;
|
||||
}
|
||||
|
||||
.box2 {
|
||||
background: red;
|
||||
position: relative;
|
||||
top: 20px;
|
||||
left: 30px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="box1"></div>
|
||||
<div></div>
|
||||
<div class="box1">暖暖</div>
|
||||
<div class="box2"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
76
csspress/demo/rem.html
Normal file
76
csspress/demo/rem.html
Normal file
@@ -0,0 +1,76 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<script>
|
||||
//designWidth:设计稿的实际宽度值，需要根据实际设置
|
||||
//maxWidth:制作稿的最大宽度值，需要根据实际设置
|
||||
//这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750)
|
||||
; (function (designWidth, maxWidth) {
|
||||
var doc = document,
|
||||
win = window,
|
||||
docEl = doc.documentElement,
|
||||
remStyle = document.createElement("style"),
|
||||
tid;
|
||||
|
||||
function refreshRem() {
|
||||
var width = docEl.getBoundingClientRect().width;
|
||||
maxWidth = maxWidth || 540;
|
||||
width > maxWidth && (width = maxWidth);
|
||||
var rem = width * 100 / designWidth;
|
||||
remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
|
||||
}
|
||||
|
||||
if (docEl.firstElementChild) {
|
||||
docEl.firstElementChild.appendChild(remStyle);
|
||||
} else {
|
||||
var wrap = doc.createElement("div");
|
||||
wrap.appendChild(remStyle);
|
||||
doc.write(wrap.innerHTML);
|
||||
wrap = null;
|
||||
}
|
||||
//要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
|
||||
refreshRem();
|
||||
|
||||
win.addEventListener("resize", function () {
|
||||
clearTimeout(tid); //防止执行两次
|
||||
tid = setTimeout(refreshRem, 300);
|
||||
}, false);
|
||||
|
||||
win.addEventListener("pageshow", function (e) {
|
||||
if (e.persisted) { // 浏览器后退的时候重新计算
|
||||
clearTimeout(tid);
|
||||
tid = setTimeout(refreshRem, 300);
|
||||
}
|
||||
}, false);
|
||||
|
||||
if (doc.readyState === "complete") {
|
||||
doc.body.style.fontSize = "16px";
|
||||
} else {
|
||||
doc.addEventListener("DOMContentLoaded", function (e) {
|
||||
doc.body.style.fontSize = "16px";
|
||||
}, false);
|
||||
}
|
||||
})(750, 750);
|
||||
</script>
|
||||
<style>
|
||||
*{
|
||||
padding:0;
|
||||
margin: 0;
|
||||
}
|
||||
.nav{
|
||||
width:2.7rem;
|
||||
height: 2.5rem;
|
||||
background: skyblue;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="nav"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
255
csspress/demo/rem2.html
Normal file
255
csspress/demo/rem2.html
Normal file
@@ -0,0 +1,255 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<script>
|
||||
//designWidth:设计稿的实际宽度值，需要根据实际设置
|
||||
//maxWidth:制作稿的最大宽度值，需要根据实际设置
|
||||
//这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750)
|
||||
; (function (designWidth, maxWidth) {
|
||||
var doc = document,
|
||||
win = window,
|
||||
docEl = doc.documentElement,
|
||||
remStyle = document.createElement("style"),
|
||||
tid;
|
||||
|
||||
function refreshRem() {
|
||||
var width = docEl.getBoundingClientRect().width;
|
||||
maxWidth = maxWidth || 540;
|
||||
width > maxWidth && (width = maxWidth);
|
||||
var rem = width * 100 / designWidth;
|
||||
remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
|
||||
}
|
||||
|
||||
if (docEl.firstElementChild) {
|
||||
docEl.firstElementChild.appendChild(remStyle);
|
||||
} else {
|
||||
var wrap = doc.createElement("div");
|
||||
wrap.appendChild(remStyle);
|
||||
doc.write(wrap.innerHTML);
|
||||
wrap = null;
|
||||
}
|
||||
//要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
|
||||
refreshRem();
|
||||
|
||||
win.addEventListener("resize", function () {
|
||||
clearTimeout(tid); //防止执行两次
|
||||
tid = setTimeout(refreshRem, 300);
|
||||
}, false);
|
||||
|
||||
win.addEventListener("pageshow", function (e) {
|
||||
if (e.persisted) { // 浏览器后退的时候重新计算
|
||||
clearTimeout(tid);
|
||||
tid = setTimeout(refreshRem, 300);
|
||||
}
|
||||
}, false);
|
||||
|
||||
if (doc.readyState === "complete") {
|
||||
doc.body.style.fontSize = "16px";
|
||||
} else {
|
||||
doc.addEventListener("DOMContentLoaded", function (e) {
|
||||
doc.body.style.fontSize = "16px";
|
||||
}, false);
|
||||
}
|
||||
})(750, 750);
|
||||
</script>
|
||||
<style>
|
||||
*{
|
||||
padding:0;
|
||||
margin: 0;
|
||||
}
|
||||
body{
|
||||
background-color: #F0EEEF;
|
||||
}
|
||||
.nav{
|
||||
height: 1.375rem;
|
||||
background: #DE3548;
|
||||
color: white;
|
||||
font-size: 0.37rem;
|
||||
text-align: center;
|
||||
line-height: 1.675rem;
|
||||
}
|
||||
.car{
|
||||
height: 2.95rem;
|
||||
background: white;
|
||||
border-top: 1px solid white;
|
||||
/* padding-top: 0.54rem;
|
||||
padding-left: 0.55rem; */
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 0.19rem;
|
||||
|
||||
}
|
||||
.carinfo{
|
||||
width: 4.28rem;
|
||||
height: 0.96rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 0.54rem;
|
||||
margin-left: 0.55rem;
|
||||
|
||||
}
|
||||
.left{
|
||||
width: 0.96rem;
|
||||
height: 0.96rem;
|
||||
background: skyblue;
|
||||
}
|
||||
.right{
|
||||
width:2.76rem;
|
||||
height: 0.95rem;
|
||||
border-left: 0.02rem solid #D9D9D9;
|
||||
padding-left: 0.32rem;
|
||||
font-size: 0.22rem;
|
||||
color: #999999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
.line{
|
||||
/* width:; */
|
||||
height: 0.02rem;
|
||||
background: #D9D9D9;
|
||||
margin-top:0.49rem;
|
||||
|
||||
}
|
||||
.btns{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
height: 0.94rem;
|
||||
}
|
||||
.btn{
|
||||
width:2.03rem;
|
||||
height:0.54rem;
|
||||
border:0.02rem solid #DF3348;
|
||||
color: #DF3348;
|
||||
line-height: 0.54rem;
|
||||
text-align: center;
|
||||
}
|
||||
.add{
|
||||
width: 7.17rem;
|
||||
height: 0.82rem;
|
||||
background: #E03547;
|
||||
color: white;
|
||||
font-size: 0.34rem;
|
||||
text-align: center;
|
||||
line-height: 0.82rem;
|
||||
font-weight: bold;
|
||||
|
||||
}
|
||||
.addw{
|
||||
width: 100%;
|
||||
background: white;
|
||||
height: 1.07rem;
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="nav">我的车库</div>
|
||||
<div class="carlist">
|
||||
<div class="car">
|
||||
<div class="carinfo">
|
||||
<div class="left"></div>
|
||||
<div class="right">
|
||||
<div>江淮安驰-小公主</div>
|
||||
<div>2019款2.9T 手自一体 </div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="btns">
|
||||
<div class="btn">设为默认</div>
|
||||
<div class="btn">设为默认</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="car">
|
||||
<div class="carinfo">
|
||||
<div class="left"></div>
|
||||
<div class="right">
|
||||
<div>江淮安驰-小公主</div>
|
||||
<div>2019款2.9T 手自一体 </div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="btns">
|
||||
<div class="btn">设为默认</div>
|
||||
<div class="btn">设为默认</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="car">
|
||||
<div class="carinfo">
|
||||
<div class="left"></div>
|
||||
<div class="right">
|
||||
<div>江淮安驰-小公主</div>
|
||||
<div>2019款2.9T 手自一体 </div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="btns">
|
||||
<div class="btn">设为默认</div>
|
||||
<div class="btn">设为默认</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="car">
|
||||
<div class="carinfo">
|
||||
<div class="left"></div>
|
||||
<div class="right">
|
||||
<div>江淮安驰-小公主</div>
|
||||
<div>2019款2.9T 手自一体 </div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="btns">
|
||||
<div class="btn">设为默认</div>
|
||||
<div class="btn">设为默认</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="car">
|
||||
<div class="carinfo">
|
||||
<div class="left"></div>
|
||||
<div class="right">
|
||||
<div>江淮安驰-小公主</div>
|
||||
<div>2019款2.9T 手自一体 </div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="btns">
|
||||
<div class="btn">设为默认</div>
|
||||
<div class="btn">设为默认</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="car">
|
||||
<div class="carinfo">
|
||||
<div class="left"></div>
|
||||
<div class="right">
|
||||
<div>江淮安驰-小公主</div>
|
||||
<div>2019款2.9T 手自一体 </div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="btns">
|
||||
<div class="btn">设为默认</div>
|
||||
<div class="btn">设为默认</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="addw">
|
||||
<div class="add">设为默认</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
87
csspress/demo/search1.html
Normal file
87
csspress/demo/search1.html
Normal file
@@ -0,0 +1,87 @@
|
||||
<!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;
|
||||
}
|
||||
.box{
|
||||
width: 640px;
|
||||
}
|
||||
.search{
|
||||
width: 576px;
|
||||
height:32px;
|
||||
border: 2px solid #e2231a;
|
||||
}
|
||||
.searchcontent{
|
||||
width: 500px;
|
||||
|
||||
height:28px;
|
||||
padding-left: 15px;
|
||||
font-size: 15px;
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
.searchcontent:focus{
|
||||
outline: none;
|
||||
}
|
||||
.tuijian{
|
||||
width: 586px;
|
||||
/* height:200px; */
|
||||
background: white;
|
||||
border: 1px solid #ccc;
|
||||
position: relative;
|
||||
top:5px;
|
||||
left: -10px;
|
||||
}
|
||||
.tuijianitem{
|
||||
width:586px;
|
||||
height: 25px;
|
||||
cursor: default;
|
||||
/* border: 1px solid #ccc; */
|
||||
font-size: 12px;
|
||||
padding-left: 15px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.tuijianitem:hover{
|
||||
background: #ccc;
|
||||
}
|
||||
.btn{
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
background-color: #e2231a;
|
||||
color: white;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
float: right;
|
||||
position: relative;
|
||||
top: -35px;
|
||||
left:20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box">
|
||||
<div class="left">
|
||||
<div class="search">
|
||||
<input type="text" class="searchcontent">
|
||||
<ul class="tuijian">
|
||||
<li class="tuijianitem">中华老字号</li>
|
||||
<li class="tuijianitem">营养零食</li>
|
||||
<li class="tuijianitem">休闲零食</li>
|
||||
<li class="tuijianitem">鲜花</li>
|
||||
<li class="tuijianitem">永生花</li>
|
||||
<li class="tuijianitem">鼠尾草</li>
|
||||
</ul>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="btn">搜索</div>
|
||||
</div>
|
||||
<div>会员</div>
|
||||
</body>
|
||||
</html>
|
||||
109
csspress/demo/search2.html
Normal file
109
csspress/demo/search2.html
Normal file
@@ -0,0 +1,109 @@
|
||||
<!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;
|
||||
}
|
||||
.box{
|
||||
width: 654px;
|
||||
margin:10px auto;
|
||||
}
|
||||
.left{
|
||||
width: 549px;
|
||||
}
|
||||
.search{
|
||||
width: 546px;
|
||||
/* height:44px; */
|
||||
border: 2px solid #4e6ef2;
|
||||
border-radius: 10px 0 0 10px;
|
||||
text-align: center;
|
||||
}
|
||||
.searchcontent{
|
||||
width: 500px;
|
||||
height:44px;
|
||||
padding-left: 15px;
|
||||
font-size: 15px;
|
||||
outline: none;
|
||||
border: none;
|
||||
margin: 0 auto;
|
||||
border-bottom: 2px solid silver;
|
||||
}
|
||||
.searchcontent:focus{
|
||||
outline: none;
|
||||
}
|
||||
.tuijian{
|
||||
width: 546px;
|
||||
/* height:200px; */
|
||||
/* border: 1px solid #ccc; */
|
||||
position: relative;
|
||||
top:5px;
|
||||
left: -2px;
|
||||
list-style:none;
|
||||
text-align: left;
|
||||
}
|
||||
.tuijianitem{
|
||||
width:586px;
|
||||
height: 25px;
|
||||
cursor: default;
|
||||
/* border: 1px solid #ccc; */
|
||||
font-size: 12px;
|
||||
padding-left: 15px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.tuijianitem:hover{
|
||||
background: #ccc;
|
||||
}
|
||||
.btn{
|
||||
width: 108px;
|
||||
height: 50px;
|
||||
background-color: #4e6ef2;
|
||||
color: white;
|
||||
text-align: center;
|
||||
line-height: 44px;
|
||||
border-radius: 0 10px 10px 0;
|
||||
float: right;
|
||||
/* margin-top: -200px; */
|
||||
position: relative;
|
||||
top: -50px;
|
||||
/* left:40px; */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box">
|
||||
<div class="left">
|
||||
<div class="search">
|
||||
<input type="text" class="searchcontent" onfocus="shuruing()" onblur="end()">
|
||||
<ul class="tuijian" style="display:none">
|
||||
<li class="tuijianitem">中华老字号</li>
|
||||
<li class="tuijianitem">营养零食</li>
|
||||
<li class="tuijianitem">休闲零食</li>
|
||||
<li class="tuijianitem">鲜花</li>
|
||||
<li class="tuijianitem">永生花</li>
|
||||
<li class="tuijianitem">鼠尾草</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn">搜索</div>
|
||||
</div>
|
||||
<script>
|
||||
var menu=document.getElementsByClassName('tuijian')[0]
|
||||
var btn=document.getElementsByClassName('btn')[0]
|
||||
function shuruing(){
|
||||
menu.style.display="block"
|
||||
btn.style.top="-200px"
|
||||
}
|
||||
function end(){
|
||||
console.log(8009)
|
||||
menu.style.display="none"
|
||||
btn.style.top="-50px"
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
53
csspress/demo/search3.html
Normal file
53
csspress/demo/search3.html
Normal file
@@ -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>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 300px;
|
||||
}
|
||||
.box1{
|
||||
margin:30px;
|
||||
}
|
||||
.menu{
|
||||
width: 300px;
|
||||
list-style: none;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.tuijianitem{
|
||||
cursor: pointer;
|
||||
height: 30px;
|
||||
}
|
||||
.tuijianitem:hover{
|
||||
background: #eeeeee;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="box1">
|
||||
<div class="box">
|
||||
<input type="text" class="shuru" />
|
||||
|
||||
<span class="btn">搜索</span>
|
||||
</div>
|
||||
<ul class="menu">
|
||||
<li class="tuijianitem">中华老字号</li>
|
||||
<li class="tuijianitem">营养零食</li>
|
||||
<li class="tuijianitem">休闲零食</li>
|
||||
<li class="tuijianitem">鲜花</li>
|
||||
<li class="tuijianitem">永生花</li>
|
||||
<li class="tuijianitem">鼠尾草</li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
92
csspress/demo/type.html
Normal file
92
csspress/demo/type.html
Normal file
@@ -0,0 +1,92 @@
|
||||
<!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;
|
||||
}
|
||||
.box{
|
||||
margin:20px;
|
||||
cursor: default;
|
||||
}
|
||||
.left{
|
||||
list-style: none;
|
||||
float: left;
|
||||
}
|
||||
.item{
|
||||
width: 200px;
|
||||
height: 25px;
|
||||
color: #666;
|
||||
text-indent: 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.item:hover{
|
||||
color: #c81623;
|
||||
background: #eeeeee;
|
||||
}
|
||||
.right{
|
||||
width: 800px;
|
||||
height: 400px;
|
||||
float: left;
|
||||
background: gold;
|
||||
}
|
||||
.tag{
|
||||
padding: 5px 20px;
|
||||
background: black;
|
||||
color: white;
|
||||
}
|
||||
.tags{
|
||||
margin-top: 20px;
|
||||
margin-left: 30px;
|
||||
}
|
||||
.menu{
|
||||
margin-top: 30px;
|
||||
}
|
||||
.ads{
|
||||
float: right;
|
||||
margin-right: 40px;
|
||||
margin-top:40px;
|
||||
}
|
||||
.ad{
|
||||
width:60px;
|
||||
height:60px;
|
||||
background: black;
|
||||
border: 1px solid red;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box">
|
||||
<ul class="left">
|
||||
<li class="item">dynamix</li>
|
||||
<li class="item">voze</li>
|
||||
<li class="item">phigros</li>
|
||||
<li class="item">muse dash</li>
|
||||
</ul>
|
||||
<div class="right">
|
||||
<div class="tags">
|
||||
<span class="tag">tag1</span>
|
||||
<span class="tag">tag2</span>
|
||||
<span class="tag">tag3</span>
|
||||
<span class="tag">tag4</span>
|
||||
</div>
|
||||
<ul class="left menu">
|
||||
<li class="item">dynamix</li>
|
||||
<li class="item">voze</li>
|
||||
<li class="item">phigros</li>
|
||||
<li class="item">muse dash</li>
|
||||
</ul>
|
||||
<div class="ads">
|
||||
<div class="ad"></div>
|
||||
<div class="ad"></div>
|
||||
<div class="ad"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
43
csspress/demo/zishiying1.html
Normal file
43
csspress/demo/zishiying1.html
Normal file
@@ -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>
|
||||
@media (max-width: 960px){ /*屏幕宽度为0~960的样式*/
|
||||
body{
|
||||
background: gold;
|
||||
}
|
||||
|
||||
}
|
||||
@media (max-width: 760px){ /*屏幕宽度为0~760的样式*/
|
||||
body{
|
||||
background: pink;
|
||||
}
|
||||
|
||||
}
|
||||
@media (max-width: 640px){ /*屏幕宽度为0~640的样式*/
|
||||
body{
|
||||
background: pink;
|
||||
}
|
||||
|
||||
}
|
||||
@media (max-width: 520px){ /*屏幕宽度为0~520的样式*/
|
||||
body{
|
||||
background: blue;
|
||||
}
|
||||
|
||||
}
|
||||
@media (max-width: 480px){ /*屏幕宽度为0~480的样式*/
|
||||
body{
|
||||
background:gray
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
媒体查询实现自适应
|
||||
</body>
|
||||
</html>
|
||||
35
csspress/demo/zishiying2.html
Normal file
35
csspress/demo/zishiying2.html
Normal file
@@ -0,0 +1,35 @@
|
||||
<!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">
|
||||
<title>Document</title>
|
||||
<script>
|
||||
document.querySelectorAll
|
||||
</script>
|
||||
<style>
|
||||
*{
|
||||
margin:0;
|
||||
padding: 0;
|
||||
}
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.box{
|
||||
width: 30%;
|
||||
height: 30%;
|
||||
background: pink;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
百分比实现自适应
|
||||
<div class="box"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
52
csspress/demo2/absolute.html
Normal file
52
csspress/demo2/absolute.html
Normal file
@@ -0,0 +1,52 @@
|
||||
<!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: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.box1 {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: yellow;
|
||||
margin: 20px;
|
||||
/* position:static */
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.box2 {
|
||||
background: red;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="box1">
|
||||
<div class="box2"></div>
|
||||
</div>
|
||||
<p>
|
||||
<p> 注：这里红色的div是依据 body定位的，而不是根据父元素黄色的div 定位，</p>
|
||||
<p> 加上position static 后也是根据body 定位，</p>
|
||||
<p>当父元素的Position声明为 absolute 时，红色会依据父级黄色定位，但是会超脱文档流，影响下面的元素</p>
|
||||
|
||||
|
||||
|
||||
|
||||
</p>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
55
csspress/demo2/boxmodel.html
Normal file
55
csspress/demo2/boxmodel.html
Normal file
@@ -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>
|
||||
46
csspress/demo2/fixed.html
Normal file
46
csspress/demo2/fixed.html
Normal file
@@ -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>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body{
|
||||
overflow: auto;
|
||||
}
|
||||
.box1 {
|
||||
background: yellow;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
/* height: 50px; */
|
||||
}
|
||||
|
||||
.box2 {
|
||||
height: 20px;
|
||||
position: fixed;
|
||||
top: 30px;
|
||||
width: 100%;
|
||||
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>
|
||||
55
csspress/demo2/flex.html
Normal file
55
csspress/demo2/flex.html
Normal file
@@ -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;
|
||||
}
|
||||
.box{
|
||||
height: 500px;
|
||||
background:gold ;
|
||||
display: flex;
|
||||
/* flex-direction: column; */
|
||||
/* align-items: flex-start; */
|
||||
align-items: baseline;
|
||||
/* align-items: center; */
|
||||
/* align-items: flex-end; */
|
||||
/* flex-direction: row; */
|
||||
/* justify-content:center; */
|
||||
/* justify-content:space-around; */
|
||||
/* justify-content: space-between; */
|
||||
/* flex-wrap: wrap; */
|
||||
}
|
||||
.left{
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background: pink;
|
||||
}
|
||||
.right{
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background: gray;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box">
|
||||
<div class="left">萤草</div>
|
||||
<!-- <div class="left"></div>
|
||||
<div class="left"></div> -->
|
||||
<div class="right">青行灯</div>
|
||||
<div class="right"></div>
|
||||
<div class="right"></div>
|
||||
<div class="right"></div>
|
||||
<div class="right"></div>
|
||||
<div class="right"></div>
|
||||
<div class="right"></div>
|
||||
<div class="right"></div>
|
||||
<div class="right"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
103
csspress/demo2/flex2.html
Normal file
103
csspress/demo2/flex2.html
Normal file
@@ -0,0 +1,103 @@
|
||||
<!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;
|
||||
}
|
||||
.box{
|
||||
display:flex
|
||||
}
|
||||
.one{
|
||||
height: 200px;
|
||||
border: 1px solid red;
|
||||
flex:1;
|
||||
}
|
||||
.two{
|
||||
height: 200px;
|
||||
border: 1px solid blue;
|
||||
flex:1;
|
||||
}
|
||||
.box1{
|
||||
width: 800px;
|
||||
height: 400px;
|
||||
background: skyblue;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.left{
|
||||
width:20%;
|
||||
height: 200px;
|
||||
background: pink;
|
||||
}
|
||||
.right{
|
||||
width:70%;
|
||||
height: 200px;
|
||||
background: silver;
|
||||
}
|
||||
|
||||
.left1{
|
||||
width:200px;
|
||||
height: 200px;
|
||||
background: pink;
|
||||
}
|
||||
.right1{
|
||||
width:200px;
|
||||
height: 200px;
|
||||
background: silver;
|
||||
}
|
||||
|
||||
.box2{
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%
|
||||
}
|
||||
|
||||
.main {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 1px solid gray;
|
||||
}
|
||||
|
||||
.box4 {
|
||||
width: 300px;
|
||||
border: 1px solid red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box">
|
||||
<div class="one"></div>
|
||||
<div class="two"></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="box1">
|
||||
<div class="left"></div>
|
||||
<div class="right"></div>
|
||||
</div>
|
||||
|
||||
<div class="box1 box2">
|
||||
<div class="left1"></div>
|
||||
<div class="right1"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="main">
|
||||
<div class="box4">未知高度上下左右居中</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
35
csspress/demo2/relative.html
Normal file
35
csspress/demo2/relative.html
Normal file
@@ -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>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
div{
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
.box1 {
|
||||
background: yellow;
|
||||
}
|
||||
|
||||
.box2 {
|
||||
background: red;
|
||||
position: relative;
|
||||
top: 20px;
|
||||
left: 30px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="box1">暖暖</div>
|
||||
<div class="box2"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
147
csspress/demo2/rem.html
Normal file
147
csspress/demo2/rem.html
Normal file
@@ -0,0 +1,147 @@
|
||||
<!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;
|
||||
}
|
||||
|
||||
.dingdan {
|
||||
width: 100%;
|
||||
}
|
||||
body{
|
||||
background: #EEEEEE;
|
||||
}
|
||||
.dingdanqueren {
|
||||
/* width: 1.49rem; */
|
||||
height: 1.37rem;
|
||||
font-size: 0.37rem;
|
||||
font-family: PingFang SC;
|
||||
font-weight: 800;
|
||||
color: #222222;
|
||||
line-height: 1.37rem;
|
||||
text-align: center;
|
||||
background: white;
|
||||
}
|
||||
.dingdanxinxi{
|
||||
height: 1.65rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid gray;
|
||||
padding-bottom: 0.38rem;
|
||||
padding-left: 0.3rem;
|
||||
padding-right: 0.25rem;
|
||||
background: white;
|
||||
}
|
||||
.tubiao{
|
||||
width: 0.17rem;
|
||||
height: 0.31rem;
|
||||
background: blue;
|
||||
margin:auto 0
|
||||
}
|
||||
.dizhi{
|
||||
width: 5.3rem;
|
||||
|
||||
}
|
||||
.nameandphonen{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
//designWidth:设计稿的实际宽度值，需要根据实际设置
|
||||
//maxWidth:制作稿的最大宽度值，需要根据实际设置
|
||||
//这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750)
|
||||
; (function (designWidth, maxWidth) {
|
||||
var doc = document,
|
||||
win = window,
|
||||
docEl = doc.documentElement,
|
||||
remStyle = document.createElement("style"),
|
||||
tid;
|
||||
|
||||
function refreshRem() {
|
||||
var width = docEl.getBoundingClientRect().width;
|
||||
maxWidth = maxWidth || 540;
|
||||
width > maxWidth && (width = maxWidth);
|
||||
var rem = width * 100 / designWidth;
|
||||
remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
|
||||
}
|
||||
|
||||
if (docEl.firstElementChild) {
|
||||
docEl.firstElementChild.appendChild(remStyle);
|
||||
} else {
|
||||
var wrap = doc.createElement("div");
|
||||
wrap.appendChild(remStyle);
|
||||
doc.write(wrap.innerHTML);
|
||||
wrap = null;
|
||||
}
|
||||
//要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；
|
||||
refreshRem();
|
||||
|
||||
win.addEventListener("resize", function () {
|
||||
clearTimeout(tid); //防止执行两次
|
||||
tid = setTimeout(refreshRem, 300);
|
||||
}, false);
|
||||
|
||||
win.addEventListener("pageshow", function (e) {
|
||||
if (e.persisted) { // 浏览器后退的时候重新计算
|
||||
clearTimeout(tid);
|
||||
tid = setTimeout(refreshRem, 300);
|
||||
}
|
||||
}, false);
|
||||
|
||||
if (doc.readyState === "complete") {
|
||||
doc.body.style.fontSize = "16px";
|
||||
} else {
|
||||
doc.addEventListener("DOMContentLoaded", function (e) {
|
||||
doc.body.style.fontSize = "16px";
|
||||
}, false);
|
||||
}
|
||||
})(750, 750);
|
||||
/*
|
||||
第一个参数是设计稿的宽度，一般设计稿有640，或者是750，你可以根据实际调整
|
||||
第二个参数则是设置制作稿的最大宽度，超过750，则以750为最大限制。
|
||||
*/
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="dingdan">
|
||||
<div class="dingdanqueren">
|
||||
<p>订单确认</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="dingdanxinxi">
|
||||
<div class="dizi">
|
||||
<div class="nameandphonen">
|
||||
<div class="name">
|
||||
<img src="" alt="">
|
||||
<p>张三</p>
|
||||
</div>
|
||||
<div class="phonen">
|
||||
<img src="" alt="">
|
||||
<p>12345678910</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="zhuzhi">
|
||||
<img src="" alt="">
|
||||
<p>山东省泰安市宁阳县文庙街道XX小区</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tubiao"></div>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
100
csspress/demo2/searchlx.html
Normal file
100
csspress/demo2/searchlx.html
Normal file
@@ -0,0 +1,100 @@
|
||||
<!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
|
||||
}
|
||||
|
||||
.searchbox {
|
||||
width: 658px;
|
||||
height: 44px;
|
||||
margin: 0 auto;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.left {
|
||||
width: 546px;
|
||||
/* height: 44px; */
|
||||
border-radius: 10px 0px 0px 10px;
|
||||
float: left;
|
||||
border: 2px solid #4e6ef2;
|
||||
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 108px;
|
||||
height: 48px;
|
||||
background: #4e6ef2;
|
||||
color: white;
|
||||
text-align: center;
|
||||
line-height: 44px;
|
||||
border-radius: 0 10px 10px 0;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.shuru {
|
||||
width: 480px;
|
||||
height: 44px;
|
||||
border: none;
|
||||
outline: none;
|
||||
margin-left: 20px;
|
||||
border-bottom: 2px solid #c4c7ce;
|
||||
}
|
||||
.shishenmen{
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.shishen{
|
||||
font-size: 15px;
|
||||
height: 30px;
|
||||
margin-left:20px;
|
||||
}
|
||||
.shishen:hover{
|
||||
color: rgb(78, 110, 242);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="searchbox">
|
||||
<div class="left">
|
||||
<input type="text" class="shuru" onfocus="shuruing()" onblur="end()"/>
|
||||
<ul class="shishenmen" style="display: none;">
|
||||
<li class="shishen">阴阳师</li>
|
||||
<li class="shishen">大天狗</li>
|
||||
<li class="shishen">茨木</li>
|
||||
<li class="shishen">青行灯</li>
|
||||
<li class="shishen">酒吞</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class=" btn">搜索</div>
|
||||
</div>
|
||||
<script>
|
||||
// var ss=document.getElementsByClassName('shishen')[0]
|
||||
// var shishen=document.getElementsByClassName('shishenmen')
|
||||
// console.log(ss)
|
||||
// console.log(shishen)
|
||||
function shuruing(){
|
||||
console.log(900)
|
||||
var ss=document.getElementsByClassName('shishen')[0]
|
||||
var shishen=document.getElementsByClassName('shishenmen')[0]
|
||||
console.log(ss)
|
||||
console.log(shishen)
|
||||
shishen.style.display="block"
|
||||
}
|
||||
|
||||
function end(){
|
||||
var shishen=document.getElementsByClassName('shishenmen')[0]
|
||||
shishen.style.display="none"
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
50
csspress/demo2/zishiying2.html
Normal file
50
csspress/demo2/zishiying2.html
Normal file
@@ -0,0 +1,50 @@
|
||||
<!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:0px;
|
||||
padding: 0;
|
||||
}
|
||||
html , body{
|
||||
width:100% ;
|
||||
height: 100%;
|
||||
}
|
||||
.box{
|
||||
width: 100%;
|
||||
height: 60%;
|
||||
border: 1px solid black;
|
||||
}
|
||||
.content{
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: pink;
|
||||
margin: 30px;
|
||||
}
|
||||
/* @media (max-width: 780px) {
|
||||
.box{
|
||||
width: 600px;
|
||||
}
|
||||
.content{
|
||||
background: skyblue;
|
||||
}
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
.box{
|
||||
width: 500px;
|
||||
}
|
||||
.content{
|
||||
background: rgb(135, 235, 202);
|
||||
}
|
||||
} */
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="box">
|
||||
<!-- <div class="content"></div> -->
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user