csspress
This commit is contained in:
parent
f9cc8781cc
commit
9c626405fd
12
.idea/inspectionProfiles/Project_Default.xml
Normal file
12
.idea/inspectionProfiles/Project_Default.xml
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
Normal file
6
.idea/inspectionProfiles/profiles_settings.xml
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
Normal file
8
.idea/modules.xml
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
Normal file
6
.idea/vcs.xml
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
Normal file
33
.idea/workspace.xml
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
Normal file
8
.idea/课件.iml
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>
|
||||||
@ -59,3 +59,152 @@ css 盒模型包括如下要素
|
|||||||
> 元素的总宽度= 元素的width+左右padding +左右margin+border的左右宽度
|
> 元素的总宽度= 元素的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-top: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>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
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/
|
||||||
9
csspress/Untitled.md
Normal file
9
csspress/Untitled.md
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
通过蓝湖这样的工具 根据主流分辨率来更改设计图的缩放比例
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
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
|
||||||
|
- 百分比
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -9,24 +9,55 @@
|
|||||||
margin:0;
|
margin:0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
div{
|
.box{
|
||||||
width:60px;
|
width: 1000px;
|
||||||
height: 600px;
|
height: 300px;
|
||||||
background:red;
|
background: gold;
|
||||||
|
margin: 20px;
|
||||||
}
|
}
|
||||||
.box1{
|
.box1{
|
||||||
background: gray;
|
width:60px;
|
||||||
height: 60px;
|
height: 60px;
|
||||||
position: sticky;top: 10px;
|
background: red;
|
||||||
|
/* background: rgba(255, 0, 0, 0.363); */
|
||||||
|
float: left;
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
.box2{
|
.box2{
|
||||||
background: gold;
|
width: 120px;
|
||||||
|
height:80px;
|
||||||
|
background: gray;
|
||||||
|
border: 1px solid pink;
|
||||||
|
/* float:right */
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
.a{
|
||||||
|
/* width: 70px;
|
||||||
|
height: 70px;
|
||||||
|
border: 1px solid blue;
|
||||||
|
background: pink; */
|
||||||
|
clear: right;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="box1"></div>
|
<div class="box">
|
||||||
<div></div>
|
<div class="box1"></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="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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@ -1,36 +1,44 @@
|
|||||||
<!DOCTYPE html>
|
<html>
|
||||||
<!-- -->
|
|
||||||
<html lang="en">
|
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<title>
|
||||||
<title>Document</title>
|
盒子模型
|
||||||
|
</title>
|
||||||
<style>
|
<style>
|
||||||
.box{
|
*{
|
||||||
width: 900px;
|
margin:0;
|
||||||
height: 600px;
|
padding:0;
|
||||||
background:orange;
|
}
|
||||||
}
|
body{
|
||||||
.item1{
|
text-align:center;
|
||||||
width: 40%;
|
}
|
||||||
height:80%;
|
div{
|
||||||
background: paleturquoise;
|
width:200px;
|
||||||
float: left;
|
height:200px;
|
||||||
}
|
margin:0 auto;
|
||||||
.item2{
|
}
|
||||||
width:40%;
|
#div1{
|
||||||
height: 80%;
|
margin-top:10px;
|
||||||
background: blue;
|
background:red;
|
||||||
float: right;
|
}
|
||||||
}
|
#div11{
|
||||||
|
margin-top:20px;
|
||||||
|
width:0;
|
||||||
|
height:0;
|
||||||
|
background:yellow;
|
||||||
|
}
|
||||||
|
#div12{
|
||||||
|
margin-top:30px;
|
||||||
|
width:50px;
|
||||||
|
height:50px;
|
||||||
|
background:blue;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="box">
|
<div id="div1">
|
||||||
<div class="item1"></div>
|
<div id="div11"></div>
|
||||||
<div class="item2"></div>
|
<div id="div12"></div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@ -0,0 +1,42 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Document</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<table border="1">
|
||||||
|
<tr>
|
||||||
|
<th>姓名</th>
|
||||||
|
<th>年龄</th>
|
||||||
|
<th>性别</th>
|
||||||
|
<th>班级</th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>asd</td>
|
||||||
|
<td>14</td>
|
||||||
|
<td>男</td>
|
||||||
|
<td>1</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>lily</td>
|
||||||
|
<td>12</td>
|
||||||
|
<td>女</td>
|
||||||
|
<td>1</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>asd</td>
|
||||||
|
<td>14</td>
|
||||||
|
<td>男</td>
|
||||||
|
<td>1</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>lily</td>
|
||||||
|
<td>12</td>
|
||||||
|
<td>女</td>
|
||||||
|
<td>1</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -21,6 +21,7 @@ html（HyperText Markup Language --超文本标记语言），不是一个编
|
|||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Document</title>
|
<title>Document</title>
|
||||||
|
<meta charset="utf-8">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
</body>
|
</body>
|
||||||
@ -30,10 +31,11 @@ html（HyperText Markup Language --超文本标记语言），不是一个编
|
|||||||
> 在解读上面的代码之前，我们先来看这些由<(左尖括号), 内容 , >(右尖括号) 组成的内容，这些内容叫做标签（tag）, 在html中用<> 把他们包裹起来是为了与其他纯文本内容进行区分
|
> 在解读上面的代码之前，我们先来看这些由<(左尖括号), 内容 , >(右尖括号) 组成的内容，这些内容叫做标签（tag）, 在html中用<> 把他们包裹起来是为了与其他纯文本内容进行区分
|
||||||
|
|
||||||
> <!DOCTYPE html> 是Document Type Declaration 的简称，用来声明文档，也就是告诉浏览器当前使用的是哪种HTML
|
> <!DOCTYPE html> 是Document Type Declaration 的简称，用来声明文档，也就是告诉浏览器当前使用的是哪种HTML
|
||||||
> <html></html> 表示页面编写的都是HTML代码，必须成对出现，除了文档生命之外的所有代码都必须写在<html></html>中间
|
> <html></html> 表示页面编写的都是HTML代码，必须成对出现，除了文档生命之外的所有代码都必须写在<html></html>中间
|
||||||
><head></head> 表示页面的头部，页面的标题（title标签），meta元信息定义，文档样式表和脚本等信息 一般写在head 中间
|
> <head></head> 表示页面的头部，页面的标题（title标签），meta元信息定义，文档样式表和脚本等信息 一般写在head 中间
|
||||||
|
> <body></body> 表示页面的身体 页面内容需要写在 body 标签内 --
|
||||||
>
|
>
|
||||||
><body></body> 表示页面的身体 页面内容需要写在 body 标签内 --
|
> <meta charset="utf-8" /> 设置文档使用utf-8编码集
|
||||||
|
|
||||||
### 写第一个网页 --hello world
|
### 写第一个网页 --hello world
|
||||||
|
|
||||||
@ -42,6 +44,7 @@ html（HyperText Markup Language --超文本标记语言），不是一个编
|
|||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>第一个页面</title>
|
<title>第一个页面</title>
|
||||||
|
<meta charset="utf-8">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
hello world
|
hello world
|
||||||
@ -60,12 +63,178 @@ html（HyperText Markup Language --超文本标记语言），不是一个编
|
|||||||
hello world
|
hello world
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
### 元素
|
### 元素
|
||||||
|
|
||||||
|
#### 元素结构：
|
||||||
|
|
||||||
```
|
```
|
||||||
<p>hello world</p>
|
<p>hello world</p>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
元素分类：
|
||||||
|
|
||||||
|
分类方式：
|
||||||
|
|
||||||
|
- 有无闭合标签
|
||||||
|
- 单标签
|
||||||
|
- 没有闭合标签，单标签书写形式以 / 结尾 如：<img /> <input /> ...
|
||||||
|
|
||||||
|
- 双标签
|
||||||
|
|
||||||
|
- 由 开始标签和结束标签组成，开始标签和结束标签必须成对出现
|
||||||
|
|
||||||
|
如：
|
||||||
|
|
||||||
|
```
|
||||||
|
<p>这是段落标签</p>
|
||||||
|
<span>这是文本标签 </span>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
- 块级元素和内联元素
|
||||||
|
|
||||||
|
- 块级标签：在页面中以块的形式展现——相对于其前面的内容他会出现在新的一行，其后面的内容也会被挤到下一行展现。一个块级元素不会被嵌套进内联元素中，但可以嵌套在其他块级元素。
|
||||||
|
|
||||||
|
```
|
||||||
|
如下：
|
||||||
|
<div></div>
|
||||||
|
<ul></ul> (ul li , ol li)
|
||||||
|
<table></table> (table tr td ...)
|
||||||
|
...
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
- 内联元素：内联元素不会导致换行，通常是在块级元素中并环绕内容的一部分。
|
||||||
|
|
||||||
|
```
|
||||||
|
<span></span>
|
||||||
|
<em></em>
|
||||||
|
<i></i>
|
||||||
|
<a></a>
|
||||||
|
....
|
||||||
|
```
|
||||||
|
|
||||||
|
- 空元素
|
||||||
|
|
||||||
|
定义：没有元素内容的html元素，空元素在开始标签中关闭。即开始标签到结束标签之间没有内容而且是单标签。
|
||||||
|
|
||||||
|
常见的空元素有：
|
||||||
|
|
||||||
|
```
|
||||||
|
<br /> , <hr /> , <input />,<link />, <meta />
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 属性
|
||||||
|
|
||||||
|
属性包含元素的额外信息，这些信息不会出现在实际内容中。
|
||||||
|
|
||||||
|
一个属性需要包含如下内容：
|
||||||
|
|
||||||
|
> 1.一个空格，位于元素名称和属性名称之间
|
||||||
|
>
|
||||||
|
> 2. 属性名称，后面跟着一个等于号（=）
|
||||||
|
> 3. 一个属性值，用“” 包裹
|
||||||
|
|
||||||
|
如之前写的 hello world 示例， 加工后如下：
|
||||||
|
|
||||||
|
```
|
||||||
|
<p class="greet">hello world</p>
|
||||||
|
```
|
||||||
|
|
||||||
|
这里的class 属性给元素赋了个可以识别的名字（greet） , 这个名字以后可以用来识别此元素的样式信息和其他信息。
|
||||||
|
|
||||||
|
练习：
|
||||||
|
|
||||||
|
把上面的hello world 的段落标签改成a标签，并添加相关的属性
|
||||||
|
|
||||||
|
> a标签相关属性：
|
||||||
|
>
|
||||||
|
> - href 声明超链接的web地址
|
||||||
|
>
|
||||||
|
> - title 鼠标悬停在超链接上时 显示的文字
|
||||||
|
>
|
||||||
|
> - target 指定新链接地址从哪里打开 默认从当前页面打开 , 如果想在新页面打开链接地址，需要把target的值写成_blank
|
||||||
|
>
|
||||||
|
> 即 target="_blank"
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 布尔属性
|
||||||
|
|
||||||
|
布尔属性即只能有跟他的属性名一样的属性值，看起来是没有属性值得属性 但是这是合法的
|
||||||
|
|
||||||
|
如： disabled 使表单元素中的控件为不可用 输入框和选择框变灰色 禁止输入和选择
|
||||||
|
|
||||||
|
```
|
||||||
|
<input type="text" disabled="disabled">
|
||||||
|
```
|
||||||
|
|
||||||
|
也可以省略写法为：
|
||||||
|
|
||||||
|
```
|
||||||
|
<input type="text" disabled>
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 单引号和双引号
|
||||||
|
|
||||||
|
目前为止，所有的属性都是由双引号包裹里起来的，当然也可以使用单引号包裹。
|
||||||
|
|
||||||
|
如下：
|
||||||
|
|
||||||
|
```
|
||||||
|
<a href="www.baidu.com">baidu</a>
|
||||||
|
```
|
||||||
|
|
||||||
|
```
|
||||||
|
<a href='www.baidu.com'>baidu</a>
|
||||||
|
```
|
||||||
|
|
||||||
|
这两种写法都是正确的
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
但是 单引号和双引号不能在同一个属性中混用， 也就是在一个标签中引号只能使用一种
|
||||||
|
|
||||||
|
```
|
||||||
|
<a href="www.baidu.com'>baidu</a>
|
||||||
|
```
|
||||||
|
|
||||||
|
上面这种写法是错误的！！！！！
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### html 中的特殊字符
|
||||||
|
|
||||||
|
无论在html 文件中使用多少个空格（包括回车换行），在浏览器渲染时会将连续的空白字符减少为一个空格符
|
||||||
|
|
||||||
|
代码格式：
|
||||||
|
|
||||||
|
在html代码中，我们让每一个嵌套的元素以两个空格缩进，
|
||||||
|
|
||||||
|
```
|
||||||
|
原意字符 等价字符引用
|
||||||
|
< <
|
||||||
|
> >
|
||||||
|
'' "
|
||||||
|
' &apos
|
||||||
|
& &
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### html 注释
|
||||||
|
|
||||||
|
<!-- 注释内容 -->
|
||||||
|
|
||||||
|
```
|
||||||
|
<p>我在注释外！</p>
|
||||||
|
|
||||||
|
<!-- <p>我在注释内！</p> -->
|
||||||
|
```
|
||||||
|
|
||||||
|
|||||||
134
htmlpress/表格.md
Normal file
134
htmlpress/表格.md
Normal file
@ -0,0 +1,134 @@
|
|||||||
|
# 表格（table）
|
||||||
|
|
||||||
|
表格：由行和列组成的结构化数据集（表格数据）
|
||||||
|
|
||||||
|
### 使用场景
|
||||||
|
|
||||||
|
html表格应用于展示表格数据，而不是用来实现网页布局
|
||||||
|
|
||||||
|
用表格实现网页布局出现的问题：
|
||||||
|
|
||||||
|
1. 表格布局减少了视觉受损的用户的可访问性
|
||||||
|
2. 表格会产生更多的标签，使代码变得更难于编写，维护，调试
|
||||||
|
3. 表格不能自动响应 正确的布局容器（如div ） 他们的默认宽度是父元素的100% 但表格的默认大小是根据其内容而定的。因此 如果要做移动端适配，就需要采取额外的措施来改变表格的样式
|
||||||
|
|
||||||
|
### 新建一个表格
|
||||||
|
|
||||||
|
1. 每个表格的内容都被包含在<table></table> 中 而且这些内容需要写在html结构的body部分
|
||||||
|
2. 在表格中，最小的内容容器是单元格，是通过（td）创建的 这是一列
|
||||||
|
3. 如果想换行，需要把位于同一行的内容包含在 一个tr 标签中 即用<tr></tr> 定义一行
|
||||||
|
|
||||||
|
示例：
|
||||||
|
|
||||||
|
```
|
||||||
|
<!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>
|
||||||
|
<table border="1">
|
||||||
|
<tr>
|
||||||
|
<td>姓名</td>
|
||||||
|
<td>年龄</td>
|
||||||
|
<td>性别</td>
|
||||||
|
<td>班级</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>asd</td>
|
||||||
|
<td>14</td>
|
||||||
|
<td>男</td>
|
||||||
|
<td>1</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>lily</td>
|
||||||
|
<td>12</td>
|
||||||
|
<td>女</td>
|
||||||
|
<td>1</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>asd</td>
|
||||||
|
<td>14</td>
|
||||||
|
<td>男</td>
|
||||||
|
<td>1</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>lily</td>
|
||||||
|
<td>12</td>
|
||||||
|
<td>女</td>
|
||||||
|
<td>1</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
效果如下：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
上面的代码中出现的 <table border="1"></table> 中的border 用于给表格加上边框
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#### 表格表头（th）
|
||||||
|
|
||||||
|
table包裹的 th标签会有加粗的效果 看起来是表格的表头
|
||||||
|
|
||||||
|
把上面表格的顶部四个单元格做成表头效果：
|
||||||
|
|
||||||
|
```
|
||||||
|
<!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>
|
||||||
|
<table border="1">
|
||||||
|
<tr>
|
||||||
|
<th>姓名</th>
|
||||||
|
<th>年龄</th>
|
||||||
|
<th>性别</th>
|
||||||
|
<th>班级</th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>asd</td>
|
||||||
|
<td>14</td>
|
||||||
|
<td>男</td>
|
||||||
|
<td>1</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>lily</td>
|
||||||
|
<td>12</td>
|
||||||
|
<td>女</td>
|
||||||
|
<td>1</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>asd</td>
|
||||||
|
<td>14</td>
|
||||||
|
<td>男</td>
|
||||||
|
<td>1</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>lily</td>
|
||||||
|
<td>12</td>
|
||||||
|
<td>女</td>
|
||||||
|
<td>1</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 允许单元格跨行或列
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Loading…
Reference in New Issue
Block a user