theluyuan/webveuje
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

css 例子

Browse Source
This commit is contained in:
asd
2021-01-18 18:11:23 +08:00
parent dd41f144fc
commit 1c003714c3
43 changed files with 595 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
csspress/demo/.idea/demo.iml generated Normal file
View 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
View 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
View 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
View 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
View 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
View 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>

37
csspress/demo/boxsize.html Normal file
View 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>

15
csspress/demo/a.html → csspress/demo/float.html
View File

@@ -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>

0
csspress/demo/b.html → csspress/demo/float1.html
View File

45
csspress/demo/margin.html Normal file
View 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
View 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
View 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
View 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>

11
csspress/demo/position.html Normal file
View File

@@ -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>