前端知识 — HTML内容、CSS基础

时间 2019-11-13 标签前端知识 html 内容 css 基础

前端

　　　　一、前端是作什么的css

　　　　二、咱们为何要学前端？html

　　　　三、前端都有哪些内容？前端

　　　　　　　　一、HTMLgit

　　　　　　　　二、CSSgithub

　　　　　　　　三、JavaScript数据库

　　　　　　　　四、jQuery和Bootstrapdjango

Web开发本质：

　　　　一、浏览器输入网址回车都发生了什么？编程

　　　　　　　　一、浏览器给服务端发送了一个消息后端

　　　　　　　　二、服务端拿到消息浏览器

　　　　　　　　三、服务端返回消息

　　　　　　　　四、浏览器展现页面

import socket sk = socket.socket() sk.bind(("127.0.0.1", 8080)) sk.listen(5) while True: conn, addr = sk.accept() data = conn.recv(1024) conn.send(b"HTTP/1.1 200 OK\r\n\r\n") conn.send(b"<h1>Hello world!</h1>") conn.close()

HTML是什么

　　　　超文本标记语言（Hypertext Markup Language, HTML）是一种用于建立网页的标记语言。

　　　　本质上是浏览器可识别的规则，咱们按照规则写网页，浏览器根据规则渲染咱们的网页。对于不一样的浏览器，对同一个

　　　　标签可能会有不一样的解释。（兼容性问题）

　　　　网页文件的扩展名：.html或.htm

最基本的HTML文档：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

</body>
</html>

一、<!DOCTYPE html>声明为HTML5文档

二、<html>、</html>是文档的开始标志和结束标志。是HTML页面的根元素，在他们之间是文档的头部（head）和主体（body）。

三、<head>、</head>定义了HTML文档的开头部分。他们之间的内容不会在浏览器的文档窗口显示。包含了文档的元（meta）数据。

四、<title>、</title>定义了网页标题，在浏览器标题栏显示。

五、<body>、<、body>之间的文本是可见的网页主体内容。

HTML标签格式

HTML标签是由尖括号包围的关键字，如<html>，<div>等

HTML标签一般是成对出现的，好比：<div>和</div>，第一个标签是开始，第二个标签是结束。结束标签会有斜线。

也有一部分标签是单独呈现的，好比：<br/>、<hr/>、<img src="1.jpg"/>等。

标签里面能够有若干属性，也能够不带属性。

标签的语法：

<标签名属性1="属性值1" 属性2="属性值2" ......>内容部分</标签名>

<标签名属性1="属性值1" 属性2="属性值2" ...... />

几个很重要的属性：

id：定义标签的惟一ID，HTML文档树中惟一

class：为html元素定义一个或多个类名（classname）（CSS样式类名）

style：规定元素的行内样式（CSS样式）

HTML经常使用标签

head经常使用标签

　　　　<title></title> 　　定义网页标题

　　　　<style></style>　　定义内部样式表

　　　　<script></script>　　定义JS代码或引入外部JS文件

　　　　<link/>　　　　　　引入外部样式表文件

　　　　<meta/>　　　　　　定义网页原信息

meta标签

meta标签介绍：

meta标签的组成：meta共有两个属性，它们分别是http-equiv属性和name属性，不一样的属性又有不一样的参数值，这些不一样的参数值就实现了不一样的网页功能。

一、http-equiv属性：至关于http的文件头做用，它能够向浏览器传回一些有用的信息，以帮助正确得显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

<!--2秒后跳转到对应的网址，注意引号-->
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
<!--指定文档的编码类型-->
<meta http-equiv="content-Type" charset=UTF8">
<!--告诉IE以最高级模式渲染文档-->
<meta http-equiv="x-ua-compatible" content="IE=edge">

二、name属性：主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="老男孩教育Python学院">

body内经常使用标签

基本标签（块级标签和内联标签）

<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>

<p>段落标签</p>

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

<!--换行-->
<br>

<!--水平线--><hr>

特殊字符

内容	对应代码
空格
>	>
<	<
&	&
¥	¥
版权	©
注册	®

div标签和span标签

div标签用来定义一个块级元素，并没有实际意义。主要是经过CSS样式为其赋予不一样的表现。

span标签用来定义内联（行内）元素，并没有实际意义。主要经过CSS样式为其赋予不一样表现。

块级元素与行内元素的区别：

所谓块元素，是以另起一行开始渲染的元素，行内元素则不须要另起一行。若是单独在网页中插入这两个元素，不会对页面产生任何的影响。

这两个元素是专门为定义CSS样式而生的。

注意：

关于标签嵌套：一般块级元素能够包含内联元素或某些块级元素，但内联元素不能包括块级元素，它只能包括其它内联元素。

p标签不能包含块级标签，p标签也不能包含p标签。

img标签

<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">

a标签：超连接标签

所谓的超连接是指从一个网页指向一个目标的链接关系，这个目标能够是另外一个网页，也能够是相同网页上的不一样位置，还能够是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。

什么是URL？
URL是统一资源定位器(Uniform Resource Locator)的缩写，也被称为网页地址，是因特网上标准的资源的地址。
URL举例
http://www.sohu.com/stu/intro.html
http://222.172.123.33/stu/intro.html

URL地址由4部分组成
第1部分：为协议：http://、ftp://等 
第2部分：为站点地址：能够是域名或IP地址
第3部分：为页面在站点中的目录：stu
第4部分：为页面名称，例如 index.html
各部分之间用“/”符号隔开。

URL

<a href="http://www.oldboyedu.com" target="_blank" >点我</a>

href属性指定目标网页地址。该地址能够有几种类型：

　　　　绝对URL - 指向另外一个站点（好比 href="http://www.jd.com）

　　　　相对URL - 指当前站点中确切的路径（href="index.htm"）

　　　　锚URL - 指向页面中的锚（href="#top"）

target：

　　　　_blank表示在新标签页中打开目标网页

　　　　_self表示在当前标签页中打开目标网页

列表

一、无序列表

<ul type="disc">
  <li>第一项</li>
  <li>第二项</li>
</ul>

type属性：

　　　　disc（实心圆点，默认值）

　　　　circle（空心圆圈）

　　　　square（实心方块）

　　　　none（无样式）

二、有序列表

<ol type="1" start="2">
  <li>第一项</li>
  <li>第二项</li>
</ol>

type属性：

　　　　1 数字列表，默认值

　　　　A 大写字母

　　　　a 小写字母

　　　　Ⅰ大写罗马

　　　　ⅰ小写罗马

三、标题列表

<dl>
  <dt>标题1</dt>
  <dd>内容1</dd>
  <dt>标题2</dt>
  <dd>内容1</dd>
  <dd>内容2</dd>
</dl>

表格

表格是一个二维数据空间，一个表格由若干行组成，一个行又由若干单元格组成，单元格里能够包含文字、列表、图案、表单、数字符号、预置文本和其它的表格等内容。

表格最重要的穆大叔显示表格类数据。表格类数据是指最适合组织为表格格式（即按行和列组织）的数据。

表格的基本结构：

<table>
  <thead>
  <tr>
    <th>序号</th>
    <th>姓名</th>
    <th>爱好</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>1</td>
    <td>Egon</td>
    <td>杠娘</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Yuan</td>
    <td>日天</td>
  </tr>
  </tbody>
</table>

属性:

　　　　border: 表格边框.

　　　　cellpadding: 内边距

　　　　cellspacing: 外边距.

　　　　width: 像素百分比.（最好经过css来设置长宽）

　　　　rowspan: 单元格竖跨多少行

　　　　colspan: 单元格横跨多少列（即合并单元格）

form

先后端有数据交互的时候用form表单

　　form表单提交数据的几个注意事项：

　　　　一、全部获取用户输入的标签都必须放在form表单里面。

　　　　二、action控制着往哪提交。

　　　　三、input、select、textarea 都须要有name属性

　　　　四、提交按钮<input type='submit'>

表单属性：

属性	描述
accept-charset	规定在被提交表单中使用的字符集（默认：页面字符集）。
action	规定向何处提交表单的地址（URL）（提交页面）。
autocomplete	规定浏览器应该自动完成表单（默认：开启）。
enctype	规定被提交数据的编码（默认：url-encoded）。
method	规定在提交表单时所用的 HTTP 方法（默认：GET）。
name	规定识别表单的名称（对于 DOM 使用：document.forms.name）。
novalidate	规定浏览器不验证表单。
target	规定 action 属性中地址的目标（默认：_self）。

表单元素

基本概念：
HTML表单是HTML元素中较为复杂的部分，表单每每和脚本、动态页面、数据处理等功能相结合，所以它是制做动态网站很重要的内容。
表单通常用来收集用户的输入信息
表单工做原理：
访问者在浏览有表单的网页时，可填写必需的信息，而后按某个按钮提交。这些信息经过Internet传送到服务器上。
服务器上专门的程序对这些数据进行处理，若是有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息。

from django.conf.urls import url
from django.shortcuts import HttpResponse


def upload(request):
    print("request.GET:", request.GET)
    print("request.POST:", request.POST)

    if request.FILES:
        filename = request.FILES["file"].name
        with open(filename, 'wb') as f:
            for chunk in request.FILES['file'].chunks():
                f.write(chunk)
            return HttpResponse('上传成功')
    return HttpResponse("收到了！")

urlpatterns = [
    url(r'^upload/', upload),
]

Django接收上传文件代码

input

<input> 元素会根据不一样的 type 属性，变化为多种形态。

type属性值	表现形式	对应代码
text	单行输入文本	<input type=text" />
password	密码输入框	<input type="password" />
date	日期输入框	<input type="date" />
checkbox	复选框	<input type="checkbox" checked="checked" />
radio	单选框	<input type="radio" />
submit	提交按钮	<input type="submit" value="提交" />
reset	重置按钮	<input type="reset" value="重置" />
button	普通按钮	<input type="button" value="普通按钮" />
hidden	隐藏输入框	<input type="hidden" />
file	文本选择框	<input type="file" />

属性说明：

　　　　name：表单提交时的“键”，注意和id的区别。

　　　　value：表单提交时对应项的值。

　　　　type=“button”，“reset”，“submit”时，为按钮上显示的文本内容。

　　　　type=“text”，“password”，“hidden”时，为输入框的初始值。

　　　　type=“checkbox”，“radio”，“file”，为输入相关联的值。

　　　　checked：radio和checkbox默认被选中的项。

　　　　readonly：text和password设置只读。

　　　　disabled：全部input均适用。

select标

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>form表单示例</title>
</head>
<body>
<!--<注册示例>-->
<form action="">
    <p>用户名： <input name="name" type="text" value="小强">
        <input name="name" type="text" placeholder="小强" disabled>
    </p>
<!--disabled：表示不能修改，禁用-->
<!--placeholder：占位符，能够直接输入-->

<!--正规写法-->
    <p>
        <label for="i1">用户名：</label>
        <input id=i1 name="name" type="text" value="小强">
        <input name="name" type="text" placeholder="小强" disabled>
    </p>
    <!--定义：<label>标签为input元素定义标注（标记）-->
    <!--说明：-->
        <!--一、label元素不会向用户呈现任何特殊效果。-->
        <!--二、<label>标签的for属性值应当与相关元素的id属性值相同。-->

    <p>密码： <input name="password" type="password">
    </p>
    <!--password：表示隐藏输入的内容。-->

    <p>邮箱： <input name="email" type="email">
    </p>
    <!--email：表示要按照email的格式输入，不然不能提交-->

    <p>隐藏输入框： <input type="hidden" value="hidden">
    </p>

    <p>性别： <input name="gender" type="radio" value="1"> 男 <input name="gender" type="radio" value="0"> 女 <input checked name="gender" type="radio" value="2"> 保密 </p>
    <!--radio：表示只能选一个。-->
    <!--checked：表示默认。-->

    <p>性别2： <label for="r1">男</label>
        <input name="gender" id="r1" type="radio" value="1">
        <label>男 <input name="gender" type="radio" value="1">
        </label>
        <label for="r2">女</label>
        <input name="gender" id="r2" type="radio" value="0">
        <label for="r3">保密</label>
        <input checked name="gender" id="r3" type="radio" value="2">
    </p>

    <p>爱好： <input checked name="hobby" type="checkbox" value="basketball">篮球 <input checked name="hobby" type="checkbox" value="football">足球 <input name="hobby" type="checkbox" value="doublecolorball">双色球 </p>
    <!--checkbox：表示能够选多个。-->

    <p>生日： <input name="birthday" type="date">
    </p>
    <!--data：日历格式。-->

    <select name="from1" id="s1">
        <option value="bj">北京</option>
        <option value="sh" selected>上海</option>
        <option value="sc">四川</option>
    </select>
    <!--selected：默认选中该项。-->

    <select name="from1" id="s11">
        <option value="bj">北京</option>
        <option value="sh">上海</option>
        <option value="sc">四川</option>
    </select>

    <select name="from2" id="s2">
        <optgroup label="北京">
            <option value="cp">昌平</option>
            <option value="cy">朝阳</option>
            <option value="hd">海定</option>
            <option value="ft">丰台</option>
        </optgroup>
        <optgroup label="上海">
            <option value="pdxq">浦东新区</option>
            <option value="mhq">闵行区</option>
            <option value="hpq">黄浦区</option>
        </optgroup>
        <optgroup label="四川">
            <option value="pzh">攀枝花</option>
            <option value="zg">自贡</option>
            <option value="my">绵阳</option>
        </optgroup>
    </select>

    <p>
        <textarea name="info" id="t1" cols="30" rows="10"></textarea>
    </p>
    <!--textarea：多行文本。-->

    <p>头像： <input name="p1" type="file">
    </p>
    <!--file：表示上传文件。-->

    <input type="submit" value="点我提交">
    <!--submit：提交-->
    <input type="button" value="button">
    <!--button：普通按钮,多用JS给它绑定事件-->
    <input type="reset" value="reset">
    <!--reset：重置-->

</form>
</body>
</html>

textarea：多行文本。

属性说明：

　　name：名称

　　rows：行数

　　cols：列数

　　disabled：禁用

CSS介绍

CSS（Cascading Style Sheet，层叠样式表）定义如何显示HTML元素。

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。

每一个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每一个声明以后用分号结束。

CSS如何引入？

　　　　一、直接写在标签里面 style=“样式1；样式2；”

　　　　二、在head中经过style标签订义。

　　　　三、把样式单独写在css文件中，而后在html文件中经过link标签导入。

CSS语法：

　　　　选择器{样式1；样式2}

CSS查找标签的方式（选择器）

　　　　一、基本选择器

　　　　　　　　一、标签选择器适用于批量的、统1、默认的样式

　　　　　　　　二、ID选择器适用于给特定标签设置特定样式

　　　　　　　　三、类选择器适用于给某一些标签设置相同的样式

　　　　二、通用选择器

　　　　　　　　一、*

　　　　三、组合选择器

　　　　　　　　一、后代选择器

　　　　　　　　二、儿子选择器

　　　　　　　　三、毗邻选择器

　　　　　　　　四、弟弟选择器

　　　　四、属性选择器

　　　　　　　　一、[s9]

　　　　　　　　二、[s9="hao"]

　　　　五、分组和嵌套

　　　　　　　　一、div,p

　　　　　　　　二、#d1>p

样式文件优先级

　　　　一、内联样式（直接在标签里面写style）优先级最高

　　　　二、选择器都同样的状况下，谁靠近标签谁就生效

　　　　三、选择器不一样时，计算权重来判断

　CSS引入

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>引入示例</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<p id="p1">海燕</p>
<p id="p2">这是个黑色的海燕</p>
<p class="c1">这是个黑色的海燕</p>
<p class="c2">这是个黑色的海燕</p>
<p class="c3">这是个黑色的海燕</p>
<p class="c4">这是个黑色的海燕</p>
<h1>海燕</h1>

</body>
</html>

/*解释性的信息*/

/*全局通用的信息*/

/*导航条的样式*/

/*商品列表样式*/ p{ color:red; font-size: 28px;
}

/*标签选择器*/ h1{ color:green;
}

/*ID选择器*/ #p2{ color: blue;
}

/*类选择器*/ .c1,.c2{ color:yellow;
}

组合选择器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>组合选择器示例</title>
    <link rel="stylesheet" href="index2.css">
</head>
<body>

<div id="d1">
    <p>我是嵌套在div里的p标签</p>
    <span>我是嵌套在div里的span标签</span>
    <div>
        <p>我是嵌套在div里的div里的p标签</p>
        <span>我是嵌套在div里的div里的span标签</span>
    </div>
</div>

<p>000</p>
<div>111</div>
<p>222</p>
<p>333</p>

</body>
</html>

/*组合选择器示例的CSS文件*/
/*后代选择器*/
/*#d1 p{*/
    /*color:red;*/
/*}*/

/*!*儿子选择器*!*/
/*#d1>div {*/
    /*color: blue;*/
/*}*/

/*毗邻选择器*/
/*div+p{*/
    /*color: yellow;*/
/*}*/

/*弟弟选择器*/ div~p{ color:red;
}

属性选择器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>属性选择器示例</title>
    <link rel="stylesheet" href="index3.css">
</head>
<body>

<p s9="好">我是一个p标签</p>
<p s9="good">我也是一个p标签</p>
<p>我仍是一个p标签</p>

</body>
</html>

/*属性选择器相关样式*/ [s9]{ color: red;
} [s9="good"]{ color: blue;
}

分组和嵌套

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>分组和嵌套示例</title>
    <link rel="stylesheet" href="index4.css">
    <link rel="stylesheet" href="index44.css">
</head>
<body>
<div id="p1">我是一个div标签</div>
<p id="p2">我是一个p标签</p>
</body>
</html>

/*分组和嵌套示例*/
/*当样式有重复的时候*/
/*推荐分行写选择器,可是要注意必定要加逗号*/ #p1, p{ color: red;
}

/*嵌套使用选择器*/
/*#d1+p{*/
    /*color: blue;*/
/*}*/

/*权重就是2*/
/*div+p{*/
    /*color:red;*/
/*}*/

/*权重101*/
/*p1+p{*/
    /*color:red;*/
/*}*/

/*分组和嵌套示例*/

/*当样式有重复的时候*/
/*推荐分行写选择器,可是要注意必定要加逗号*/ #p1, p { color: blue;
}
/*嵌套使用选择器*/
/*#d1+p {*/
    /*color: blue;*/
/*}*/

选择器的优先级

CSS继承

继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它容许样式不只能够应用于某个特定的元素，还能够应用于它的后代。例如一个body定义了的字体颜色值也会应用到段落的文本中。

body { color: red;
}

此时页面上全部的标签都会继承body的字体颜色。然而CSS继承性的权重是很是低的，是比普通元素的权重还要低的0.

咱们只要给对应的标签设置字体颜色就能够覆盖掉它继承的样式。

p { color: green;
}

此外，继承是CSS重要的一部分，咱们甚至不用去考虑它为何可以这样，但CSS继承也是有限制的。有一些属性不能被继承，如：border，margin，padding，background等。

选择器的优先级

内联样式的权重为1000

id选择器的权重为100

类选择器的权重为10

元素选择器的权重为1

权重计算永不进位

除此以外还能够经过添加 !important 方式来强制让样式生效，但并不推荐使用。由于若是过多的使用 !important 会使样式文件混乱不易维护。

万不得已可使用 !important

CSS属性

  1 一、内容回顾
  2     一、昨日内容
  3         一、form表单（通常method="post"）
  4             一、input系列
  5                 type
  6                 一、text
  7                 二、password
  8                 三、radio
  9                 四、checkbox
 10                 五、date（datetime）
 11                 六、submit
 12                 七、button
 13                 八、reset
 14                 九、hidden
 15                 十、file(enctype="multipart/from-data")
 16             二、select
 17                 一、select>option（分组下的下拉框 select>optgroup>option）
 18             三、textarea
 19         二、form表单提交 三要素：
 20             一、input、select、textarea要有一个name属性
 21             二、提交按钮必需要是type="submit"
 22             三、form不是from；获取用户输入的标签都要放在form标签里面（仅限于form提交数据）
 23         三、CSS选择器
 24             一、基本选择器
 25                 一、标签选择器
 26                 二、ID选择器
 27                 三、类选择器（class="c1,c2,...."）
 28             二、通用选择器（*）
 29             三、组合选择器
 30                 一、后代选择器（空格）
 31                 二、儿子选择器（>）
 32                 三、毗邻选择器（div+p）
 33                 四、弟弟选择器（~）
 34             四、属性选择器
 35                 一、[s9]
 36                 二、[s9="hao"]
 37                 三、其余不经常使用的（有印象便可）
 38             五、分组和嵌套
 39                 一、分组（用逗号分隔的多个选择器条件）
 40                 二、嵌套（选择器均可以组合起来用）
 41             六、选择器的优先级
 42                 一、越靠近标签的优先级越高（就近原则）
 43                 二、权重的计算
 44                     一、内联样式1000
 45                     二、ID选择器100
 46                     三、类选择器10
 47                     四、元素选择器1
 48                 div#d1(101)/div.c1(11)/dic.c1
 49         二、以前内容复习
 50             一、Python语法基础
 51             二、数据类型和内置方法
 52             三、函数
 53                 一、参数
 54                 二、装饰器
 55                 三、迭代器和生成器
 56                 四、匿名函数
 57                 五、递归
 58                 六、内置函数
 59                 七、三元运算和列表推导式
 60             四、文件操做
 61             五、面向对象（CRM项目会有大量的应用）
 62             六、经常使用的模块和包
 63             七、网络编程和并发编程（优先级低）
 64             八、数据库（建库、建表、基本查询）
 65 二、CSS选择器补充
 66 
 67 三、CSS属性
 68     一、文学属性
 69         一、font-family
 70         二、font-size
 71         三、font-weight
 72         四、color
 73             一、rgb（255,255,255）
 74             二、#f00
 75             三、red
 76             四、rgba()
 77     二、文本属性
 78         一、text-align
 79         二、text-decoration
 80     三、背景属性
 81         一、background-color
 82         二、background-image
 83     四、边框属性
 84         一、border
 85         二、border-radius --> 变圆
 86     五、display属性
 87         一、inline
 88         二、block
 89         三、inline-block
 90         四、none（隐藏）
 91     六、CSS盒子类型（从外到内）
 92         一、margin：边框以外的距离（多用来调整标签和标签之间的距离）
 93         二、border边框
 94         三、padding：内容区和边框之间的距离（内填充/内边距）
 95         四、condent：内容
 96     七、浮动
 97         div配合float来作页面的布局
 98         任何元素浮动以后都会变成块元素
 99 
100         float：
101             一、left
102             二、right
103             三、none
104     八、清除浮动（清除的是浮动带来的负面效果-->父标签塌陷（撑不起来））
105         一、clear
106             一、left
107             二、right
108             三、both
109         最常和伪元素结合起来应用：
110             .clearfix:after{
111                     content:"";
112                     display:block;
113                     clear:both
114             }
115     九、定位
116         一、static  --> 默认的
117         二、relative --> 相对定位（相对于原来的位置来讲）
118         三、absolute --> 绝对定位（相对于最近的一个被定位过的祖宗标签）（彻底脱离文档流）
119         四、fixed --> 固定在某个位置（返回顶部按钮）
120     left  right  top  bottom
121     十、z-index（明天讲）
122 四、页面练习
123     博客页面
124         一、先排HTML文档结构，同时定义好类名（类名最好有意义）
125         二、从左往右，从上到下依次写样式

课上笔记

不怎么经常使用的属性选择器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>属性选择器补充示例</title>
    <style>
        /*找到全部title属性以hao开头的元素*/
        [s9^="hao"] {
            color: red;
        }
        /*找到全部title属性以d结尾的元素*/
        [s9$="d"] {
            color: red;
        }
        /*找到全部title属性中包含ao的元素*/
        [s9*="ao"] {
            color: red;
        }
        /*找到全部title属性中（有多个值或以空格分割）中有一个值为hao的元素*/
        [s9~="hao"] {
            color: red;
        }
    </style>
</head>
<body>
<p s9="hao">我是一个p标签</p>
<p s9="haomad">我是一个p标签</p>
<p s9="hao mad">我是一个p标签</p>
<p s9="goog">我也是一个p标签</p>
<p class="c1 c2">我是仍是一个p标签</p>
</body>
</html>

View Code

伪类选择器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器示例</title>
    <style>
        /*连接没有被点击过*/
        a:link {
            color: yellow;
        }
        /*连接被点击过*/
        a:visited {
            color:red;
        }
        /*鼠标移上去*/
        a:hover {
            color: blue;
        }
        /*被选定*/
        a:active {
            color: black;
        }
        #d1 {
            color: aqua;
        }
        #d1:hover {
            color: antiquewhite;
        }
        /*input获取光标时*/
        input:focus {
            outline: 0;
            background-color:green;
        }
    </style>
</head>
<body>
<a href="http://www.sogo.com">搜狗</a>
<a href="http://www.sogo.com">搜狗</a>

<div id="d1">我是div标签</div>
<input type="text">
</body>
</html>

伪元素选择器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>伪元素选择器示例</title>
    <style>
        /*经常使用的给首字母设置特殊样式*/
        p:first-letter{
            font-size: 50px;
            color: red;
        }
        /*在每一个c1类元素以前插入内容*/
        .c1:before {
            content: "*";
            color: red;
        }
        /*在每一个c1类元素以后插入内容*/
        .c1:after {
            content: "[$$$]";
            color: #ffff77;
        }
        /*改变p标签内容的字体大小*/
        p {
            font-size: 30px;
        }
    </style>
</head>
<body>
<p>在苍茫的大海上，狂风卷积着乌云。</p>
<p>在苍茫的大海上，狂风卷积着乌云。</p>

<p class="c1">在苍茫的大海上</p>
<p class="c1">在苍茫的大海上</p>
<p class="c1">在苍茫的大海上</p>

</body>
</html>

字体属性测试

font-weight用来设置字体的字重（粗细）

文字对齐：text-align属性规定元素中的文本的水平对齐方式。

值　　　　　　　　描述

left　　　　　　　　左边对齐，默认值

right　　　　　　　右对齐

center　　　　　　居中对齐

justify　　　　　　两端对齐

文字装饰：text-decoration属性用来给文字添加特殊效果

值　　　　　　　　描述

none　　　　　　默认，定义标准的文本

underline　　　　定义文本下的一条线

overline　　　　定义文本上的一条线

line-thourgh　　定义穿过文本的一条线

inherit　　　　继承父元素的text-decoration属性的值


/*我这个文件是干啥的*/<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>字体属性测试</title>
    <link rel="stylesheet" href="text.css">
</head>
<body>
<h1>海燕</h1>
<p>你可长点心吧</p>

<p class="c1">默认的</p>
<p class="c2">100 c1</p>
<p class="c3">900 c2</p>
<p class="c4">
    他望车外看了看，说：“我买几个橘子去。你就在此地，不要走动。”我看那边月台的栅栏外有几个卖东西的等着顾客。走到那边月台，须穿过铁道，须跳下去又爬上去。父亲是一个胖子，走过去天然要费事些。我原本要去的，他不愿，只好让他去。我看见他戴着黑布小帽，穿着黑布大马褂，深青布棉袍，蹒跚地走到铁道边，慢慢探身下去，尚不大难。但是他穿过铁道，要爬上那边月台，就不容易了。他用两手攀着上面，两脚再向上缩；他肥胖的身子向左微倾，显出努力的样子。
</p>

<a href="http://www.sogo.com">sogo</a>
</body>
</html>

/*2018-11-10*/
/*全局的样式*/
* {
    font-family: ".PingFang SC","微软雅黑","Microsoft YaHei UI","Arial";
    font-size: 14px;
}
    /*字体的粗细*/
.c2 {
    font-weight: 100;
}
.c3 {
    font-weight: 900;
    /*color: rgb(0,255,0);*/
    /*颜色加透明度*/
    color:rgba(255,0,0,0.5);
}
    /*文字对齐方式*/
.c4 {
    /*text-align: center;*/
    /*text-align: right;*/
    /*text-align: left;*/
    text-align: justify;
    /*加下划线*/
    text-decoration: underline;
    text-indent: 28px;
}

/*去掉a标签的下划线*/
a {
    text-decoration: none;
}

背景相关属性

/*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url('1.jpg');
/*
 背景重复
 repeat(默认):背景图片平铺排满整个网页
 repeat-x：背景图片只在水平方向上平铺
 repeat-y：背景图片只在垂直方向上平铺
 no-repeat：背景图片不平铺
*/
background-repeat: no-repeat; 
/*背景位置*/
background-position: right top;
/*background-position: 200px 200px;*/

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>背景相关属性示例</title>
    <style>
        .c1 {
            width: 600px;
            height: 600px;
            border: 1px solid black;
            /*background-image: url("头像.jpg");*/
            /*background-repeat: repeat-x;*/
            /*background-repeat: repeat-y;*/
            /*background-position: center;*/
            /*background-position: 50% 50%;*/
            /*background-position: 200px 200px;*/
            background: url("头像.jpg") no-repeat 50% 50%;
        }
    </style>
</head>
<body>
<div class="c1">我是div</div>

</body>
</html>

背景不动效果示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>背景不动效果示例</title>
    <style>
        .c1 {
            height: 500px;
            background: silver;
        }
        .c2 {
            height: 500px;
            background: url("p1.jpg");
            background-attachment: fixed;/*把背景图固定*/
            /*background: url("https://www.luffycity.com/static/img/width-bank.1c9d1b0.png") no-repeat center;*/
            /*background-attachment: fixed;  !*把背景图固定*!*/
        }
        .c3 {
            height: 500px;
            background-color: greenyellow;
        }
    </style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</body>
</html>

边框

边框样式

值　　　　　　　　描述

none　　　　　　　　无边框

detted　　　　　　点状虚线边框

dashed　　　　　　矩形虚线边框

solid　　　　　　实线边框

将border-radius设置为长或高的一半便可获得一个圆形

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>边框示例</title>
    <style>
        div {
            height: 200px;
            width: 300px;
            background-color: red;

            border-width: 10px;
            border-color: green;
            border-style: solid;
            /*简写*/
            /*border: 10px solid green;*/
        }
    </style>
</head>
<body>

<div></div>
</body>
</html>

display属性

值　　　　　　　　　　　　意义

display:"none"　　　　　　HTML文档中元素存在，但在浏览器中不显示。通常用于配合JavaScript代码使用

display:"block"　　　　　　默认占满整个页面宽度，若是设定了指定宽度，则会用margin填充剩下的部分

display:"inline"　　　　　　按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和

　　　　　　　　　　　　 float属性都不会有什么影响

dispaly:"inline-block"　　使元素同时具备行内元素和块级元素的特色

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>display属性</title>
    <style>
        .cl {
            background-color: red;
            /*display: none;*/
            visibility: hidden;
            height: 100px;
        }
        .c2 {
            background-color: green;
            /*display: block;*/
            width: 1000px;
        }
        ul {
            list-style-type: none;
        }
        li {
            display: inline;
            /*padding: 20px;*/
            /*border-right: 1px solid green;*/
        }
        li.last {
            border-right: none;
        }
        li>a {
            border-right: 1px solid red;
            padding: 0 15px;
        }



    </style>
</head>
<body>
<div class="c1">div</div>
<span class="c2">span</span>
<span class="c3">span</span>

<ul>
    <li><a href="">玉米商城</a></li>
    <li><a href="">电脑</a></li>
    <li><a href="">手机</a></li>
    <li class="last"><a href="">爆米花</a></li>
</ul>
</body>
</html>

盒子模型

margin：用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。

padding：用于控制内容与边框之间的距离。

border（边框）：围绕在内边框与内容外的边框。

content（内容）：盒子的内容，显示文本和图像。

顺序：

提供一个，用于四边

提供两个，第一个用于上下，第二个用于左右

提供三个，第一个用于上，第二个用于左右，第三个用于下

提供四个，上右下左（顺时针）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>盒子模型示例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .c1 {
            height: 200px;
            width:  300px;
            border: 5px solid green;
            /*margin-top: 5px;*/
            /*margin-right: 10px;*/
            /*margin-bottom: 15px;*/
            /*margin-left: 20px;*/
            /*上右下左*/
            /*margin: 5px 10px 15px 20px;*/
            /*上下  左右*/
            /*margin: 20px 30px;*/
            /*padding: 20px 30px;*/

            padding: 10px 20px 30px;
            margin: 0 auto;
            margin-bottom: 50px;
        }
        .c2 {
            height: 100px;
            width: 100%;
            background-color: red;
            margin-top: 100px;
        }
    </style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
</body>
</html>

float页面布局

浮动元素会生成一个块级框，而不论它自己是何种元素。

关于浮动的两个特色：

　　　　浮动的框能够向左或向右移动，直到它的外边缘碰到包含框或另外一个浮动框的边框为止

　　　　因为浮动框不在文档的普通流中，因此文档的普通流中的块框表现得就像浮动框不存在同样。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>float页面布局示例</title>
    <style>
        * {
            height: 0;
            padding: 0;
        }
        .c1 {
            height: 100px;
            width: 20%;
            background-color: red;
            float:left
        }
        .c2 {
            height: 100px;
            width: 80%;
            background-color: green;
            float: left;
        }

        a {
            float:left;
            width:100px;
        }

    </style>
</head>
<body>

<div class="c1"></div>
<div class="c2"></div>

<a href="">我是a标签</a>
</body>
</html>

清除浮动

clear属性规定元素的哪一侧不容许其余浮动元素

值　　　　　　　　　　描述

left　　　　　　　　　　在左侧不容许浮动元素

right　　　　　　　　在右侧不容许浮动模块

both　　　　　　　　在左右两侧均不容许浮动元素

none　　　　　　　　默认值。容许浮动元素出如今两侧

inherit　　　　　　规定应该从父元素继承clear属性的值

注意：clear属性只会对自身起做用，而不会影响其它元素

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>清除浮动示例</title>
    <style>
        #d1 {
            border:1px solid black;
        }
        .c1,
        .c2 {
            float: left;
            height: 100px;
            width: 100px;
        }
        .c3 {
            /*height:100px;*/
        }

        #d1:after {
            content:"";
            clear:left;
            display:block;
        }

    </style>
</head>
<body>
<div id="d1">
    <div class="c1">c1</div>
    <div class="c2">c2</div>
    <!--<div class="c3"></div>-->

</div>
</body>
</html>

overflow溢出属性

值　　　　　　　　　　描述

visible　　　　　　　　默认值。内容不会被修剪，会呈如今元素框以外

hidden　　　　　　　内容会被修剪，并且其它内容是不可见的

scroll　　　　　　　　内容会被修剪，可是浏览器会显示滚动条以便查看其他的内容

auto　　　　　　　　若是内容被修剪，则浏览器会显示滚动条以便查看其他的内容

inherit　　　　　　　规定应该从父元素继承overflow属性的值

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>overflow示例</title>
    <style>
        .c1 {
            width: 120px;
            height: 120px;
            border:1px solid black;
            /*overflow:hidden;*/
            overflow: auto;
        }

        .header-img {
            width: 120px;
            height: 120px;
            border: 2px solid red;
            border-radius: 100%;
            overflow:hidden;
        }

        img {
            max-width:100%;
        }
    </style>
</head>
<body>
<div class="c1">
    他望车外看了看，说：“我买几个橘子去。你就在此地，不要走动。”
    我看那边月台的栅栏外有几个卖东西的等着顾客。
    走到那边月台，须穿过铁道，须跳下去又爬上去。
    父亲是一个胖子，走过去天然要费事些。
    我原本要去的，他不愿，只好让他去。
    我看见他戴着黑布小帽，穿着黑布大马褂，深青布棉袍，
    蹒跚地走到铁道边，慢慢探身下去，尚不大难。但是他穿过铁道，
    要爬上那边月台，就不容易了。
    他用两手攀着上面，两脚再向上缩；他肥胖的身子向左微倾，显出努力的样子。
</div>

<div class="header-img">
    <img src="https://q1mi.github.io/Blog/asset/img/head_img.jpg" alt="">
</div>
</body>
</html>

float补充

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>float下午版</title>
    <style>
        #d1 {
            border:1px solid black;
        }

        .c1 {
            height: 50px;
            width: 50px;
            background-color: blue;
            border:1px solid red;
            float: right;
        }

        .c3 {
            height: 200px;
            background-color: red;
        }
        /*清除浮动的反作用*/

        /*#d1:after {*/
            /*content:"";*/
            /*clear: both;*/
            /*display: block;*/
        /*}*/

        .clearfix:after {
            content:"";
            clear: both;
            display: block;
        }
    </style>
</head>
<body>
<div id="d1" class="clearfix">
    <div class="c1"></div>
    <div class="c1"></div>
    <div class="c1"></div>
    <div class="c1"></div>
</div>
<div class="c3">我是正常的内容块</div>

</body>
</html>

定位（position）

stiatic

默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起做用的。

relative（相对定位）

相对定位是相对于该元素在文档流中的原始位置，即以本身的原始位置为参照物。即便设定了元素的相对定位1偏移值，元素仍是占着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠经过z-index属性定义。

absolute（绝对定位）

定义：设置为绝对定位的元素框从文档流彻底删除，并相对于最近的以定位祖先元素定位，若是元素没有以定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常的文档流中所占的空间会关闭，就好像该元素原来不存在同样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

重点：若是父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，而后Top、Right、Bottom、Left用百分比宽度表示。

另外，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠经过z-index属性定义。

fixed（固定）

fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠经过z-index属性定义。注意点：一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这是一个常识性的知识点，由于这是两个不一样的流，一个是浮动流，另外一个是“定位流”。可是 relative 却能够。由于它本来所占的空间仍然占据文档流。

在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>定位示例</title>
       <style>
        * {
            margin: 0;
            padding: 0;
        }

        .c1,
        .c2,
        .c3,
        .c4,
        .c4-father{
            height: 150px;
            width: 150px;
        }

        .c1 {
            background-color: red;
        }
        .c2 {
            background-color: green;
            position: relative;
            left: 400px;
            top: 150px;
        }
        .c3 {
            background-color: blue;
        }
        .c4 {
            background-color: deeppink;
            position: absolute;
            top: 150px;
            left: 400px;
        }
        .c4-father {
            background-color: grey;
            position: relative;
            left: 150px;

        }

        .fixed-test {
            position: fixed;
            right: 20px;
            bottom: 20px;
            background-color: grey;
        }
    </style>
</head>
<body>
<div class="c1">c1</div>
<div class="c2">c2</div>
<!--<div>多哒哒哒哒哒哒多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多多</div>-->
<div class="c3">c3</div>
<div class="c4-father">
    <div class="c4"></div>
</div>
<div class="fixed-test">返回顶部</div>
</body>
</html>

课上笔记

一、内容回顾
    一、伪类和伪元素
        一、link
        二、visited
        三、hover（重要）
        四、active
        五、focus（input标签获取光标时）
    二、伪元素
        一、first-letter
        二、before（重要，在内部前面添加）
        三、after（重要，在内部后面添加）
二、CSS属性
    一、字体
        一、font-family
        二、font-size
        三、font-weight
    二、文本属性
        一、text-align 对齐（重要）
        二、text-decoration 装饰（去除a标签的下划线（text-decoration:none））
        三、text-indent 首行缩进
    三、背景属性
        一、background-color 背景颜色
        二、background-image 背景图片（九宫格葫芦娃）url() no-repeat 50% 50%
    四、color
        一、red
        二、#FFOOOO
        三、rgb(255,0,0) --> rgba(155,0,0,0.5)
    五、边框属性 border
        一、border-width（边框宽度）
        二、border-style（边框样式）
        三、border-color（边框颜色）
        简写：border：1px solid red；
    六、CSS盒子模型
        一、content（内容）
        二、padding（内填充）调整内容和边框之间的距离时使用这个属性
        三、border（边框）
        四、margin（外边框）多用于调整标签之间的距离（注意两个挨着的标签margin取最大值）
        注意：要习惯看浏览器console窗口的那个盒子模型
    七、display（标签的展示形式）
        一、inline
        二、block 菜单里面的a标签能够设置为block
        三、inline-block
        四、none（不让标签显示，不占位）
    八、float（浮动）
        一、多用于实现布局效果
            一、顶部的导航条
            二、页面左右分栏（博客页面：左边20%，右边80%）
        二、float
            一、任何标签均可以浮动，浮动以后就会变成块级，a标签float以后就能够设置宽和高了
        三、float取值
            一、left
            二、right
            三、none
    九、clear：清除浮动--> 清除浮动的反作用（内容飞出，父标签撑不起来）
        一、结合伪元素来实现
            .clearfix:after {
                    content:"",
                    display:"block",
                    clear:both;
            }
        二、clear取值
            一、left
            二、right
            三、both
    十、overflow
        一、标签的内容放不下（溢出）
        二、取值：
            一、hidden --> 隐藏
            二、scroll --> 出现滚动条
            三、auto
            四、scroll-x
            五、scroll-y
        例子：
            圆形头像的例子
                一、overflow:hidden
                二、border-radius:50% （圆角）
    十一、定位position
        一、static（默认）
        二、relative（相对定位-->相对于原来的位置）
        三、absolute（绝对定位-->相对于定位过的前辈标签）
        四、fixed（固定-->返回顶部按钮）
        补充：
            脱离文档流的三种方式
                float
                absolute
                fixed
    十二、opacity（不透明度）
        一、取值0-1
        二、和rgba()的区别：
            一、opacity改变元素、字元素透明度效果
            二、rgba()只改变背景颜色的透明度效果
    1三、z-index
        一、数值越大，也靠近你
        二、只能做用于定位过的元素
        三、自定义的模态框示例
二、CSS补充
三、做业（小米商城）

View Code

display补充

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>display补充示例</title>
    <style>
        ul>li {
            /*padding: 15px;*/
            border-bottom: 1px solid grey;
        }
        li>a {
            display: block;
            height: 45px;
        }
    </style>
</head>
<body>
<ul>
    <li><a href="">玉米商城</a></li>
    <li><a href="">大米</a></li>
    <li><a href="">小米</a></li>
</ul>
</body>
</html>

View Code

脱离文档流的状况

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>脱离文档流的状况</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .c1 {
            height: 100px;
            width: 100px;
            background-color: red;
        }
        .c2 {
            height: 150px;
            width: 150px;
            background-color: green;
            /*float: right;*/

            /*position: relative;*/
            /*left: 400px;*/

            /*position: absolute;*/
            /*left: 400px;*/

            position: fixed;
            right: 100px;
            top: 100px;
        }
        .c3 {
            height: 200px;
            width: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</body>
</html>

View Code

透明度

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>透明度示例</title>
    <style>
        .c1,
        .c2 {
            height: 400px;
            width: 400px;
            color: red;
        }
        .c1 {
            background-color: black ;
            opacity: 0.5;
        }
        .c2 {
            background-color: rgba(0,0,0,0.2);
        }
    </style>
</head>
<body>
<div class="c1">我是有c1类的div标签</div>
<div class="c2">我是有c2类的div标签</div>
</body>
</html>

View Code

z-index

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>z-index示例</title>
    <style>
        * {
            margin:0;
            padding: 0;
        }

        .c1 {
            height: 150px;
            width: 150px;
            background-color: red;
            position: relative;
            z-index: 2;
        }
        .c2 {
            height: 200px;
            width: 200px;
            background-color: green;
            position: relative;
            top: -150px;
        }
    </style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
</body>
</html>

View Code

青春版模态框

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>青春版模态框示例</title>
    <style>
        .cover {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: rgba(0,0,0,0.5);
            z-index: 999;
        }
        .modal {
            width: 600px;
            height: 400px;
            background-color: white;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-top: -200px;
            margin-left: -300px;
            z-index: 1000;
        }
    </style>
</head>
<body>
<div class="cover"></div>
<div class="modal"></div>
</body>
</html>

View Code

小米商城导航条

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>小米商城导航条示例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style-type: none;
        }
        /*去除a标签的下划线*/
        /*ul a{*/
            /*text-decoration: none;*/
        }
        .nav-left li {
            float: left;
            padding-right: 20px;
        }

        .nav-right {
            float:right;
        }
        .nav {
            background-color: black;
            padding: 15px 0;
        }

        .clearfix:after {
            clear:both;
            content: "";
            display:block;
        }

        .s9 {
            width: 80%;
            margin:0 auto;
        }
    </style>
</head>
<body>
<div class="nav">
    <div class="s9 clearfix">
        <div class="nav-left">
            <ul>
                <li><a href="">玉米商城</a></li>
                <li><a href="">大米</a></li>
                <li><a href="">小米</a></li>
                <li><a href="">黑米</a></li>
                <li><a href="">小强</a></li>
                <li><a href="">花生油</a></li>
                <li><a href="">豆浆汁</a></li>
                <li><a href="">牛奶</a></li>
            </ul>
        </div>
        <div class="nav-right">
            <a href="">登陆</a>
            <a href="">注册</a>
            <a href="">购物车</a>
        </div>
    </div>
    <!--<div style="clear:both"></div>-->
</div>
</body>
</html>

View Code

清除浮动

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>清除浮动</title>
    <style>
        .c1 {
            height: 50px;
            width: 50px;
            float: left;
            border: 1px solid black;
        }
        .c2 {
            clear:left;
        }

        .c10 {
            height: 50px;
            width: 50px;
            float: right;
            border:1px solid red;
        }

        .c20 {
            clear:right;
        }

        .c3 {
            height: 200px;
            width: 200px;
            background-color: green;
            float:right;
        }

    </style>
</head>
<body>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1 c2"></div>
<div class="c1"></div>
<div class="c1"></div>

<!--<div class="c3"></div>-->

<div class="c10"></div>
<div class="c10"></div>
<div class="c10 c20"></div>
<div class="c10"></div>
<div class="c10"></div>
</body>
</html>

View Code

前端知识 — HTML内容、CSS基础

前端

Web开发本质：

HTML是什么

最基本的HTML文档：

HTML标签格式

标签的语法：

几个很重要的属性：

head经常使用标签

meta标签

meta标签介绍：

body内经常使用标签

特殊字符

div标签和span标签

img标签

列表

一、无序列表

二、有序列表

三、标题列表

表格

表格的基本结构：

属性:

form

表单属性：

表单元素

input

属性说明：

select标

textarea：多行文本。

属性说明：

CSS介绍

CSS如何引入？

CSS语法：

CSS查找标签的方式（选择器）

二、通用选择器

三、组合选择器

四、属性选择器

五、分组和嵌套

样式文件优先级

CSS引入

组合选择器

属性选择器

分组和嵌套

选择器的优先级

CSS继承

选择器的优先级

CSS属性

不怎么经常使用的属性选择器

伪类选择器

伪元素选择器

字体属性测试

值 描述

值 描述

背景相关属性

背景不动效果示例

边框

值 描述

display属性

值 意义

盒子模型

float页面布局

清除浮动

值 描述

overflow溢出属性

值 描述

float补充

定位（position）

stiatic

relative（相对定位）

absolute（绝对定位）

fixed（固定）

课上笔记

display补充

脱离文档流的状况

透明度

z-index

青春版模态框

小米商城导航条

清除浮动

　　　　二、通用选择器

　　　　三、组合选择器

　　　　四、属性选择器

　　　　五、分组和嵌套

　CSS引入

值　　　　　　　　描述

值　　　　　　　　描述

值　　　　　　　　描述

值　　　　　　　　　　　　意义

值　　　　　　　　　　描述

值　　　　　　　　　　描述