前端学习之路-1

一、HTML介绍

HTML 全称：HyperText Mackeup Language 超文本标记语言

什么是超文本

比如网页的超链接、图片、音频、视频都成为超文本。

什么是标记

举个例子：打开sublime，新建index.html，输入一下文字内容，用Chrome游览器打开。

什么是语言

很简单，假如我是个包工头，工地的工人来自全国各地，那么有河南人，另外还有外国人，工地还有一条狗

如果我要让他们干活，说：好好干活

对河南人说：‘好好干活’

对外国人说：“Do you work”

对狗说：’汪汪汪‘

一样的，我们现在有台计算机，现在在html文件中写内容，计算机上的浏览器会去解析你编写的代码，这些的内容，我们就称为语言。浏览器可以直接解析这种语言。

二、HTML结构

<!--document 文档：一个html 标记当前文档为html5的文档-->
<!--引擎是浏览器兼容性最根本的原因-->

<!DOCTYPE html>

<html lang="en">

  <head>
　　<!--这里面的标签是网页中看不见摸不着-->
　　<!--修改统一字符集编码-->
    <meta charset="utf-8">

    <title>01常用标签介绍</title>
  </head>
  <body>
  </body>
</html>

文档声明

<!DOCTYPE html>

它不是html的标签，指明了该页面使用哪个HTML版本进行编译

HTML标签

每一个页面中的结构，都会有一个最外层的标签，它表示文档内容的开始。整个文档的根标签

html标签包含两部分：头部声明（<head>）和内容部分（<body>）

head标签

把一个网页比做一个人的话，那么head标签就是这个人的基本信息，虽然这个没有办法直接观察到，但这些内容确实存在，并且是在网页中必不可少的

head用于表示网页中的一个基础的信息（元信息）

body标签

把body标签比作一个人的话，那么body标签就是这个人的身体、肤色、痔疮，它里面的内容是看的见摸得着的。对于人的性格，意淫的想法，性取向等body是管不着的。那么body标签包含页面中所有的可见元素，比如网页中的文本的展示内容，漂亮美女，动听的音乐，炫酷的电影等都属于body所管。

总结：

1. html 快捷键

2. html tab键，快速生成html5的文档

3. html:xt tab键，快速生成html4.01的文档

4. <!DOCTYPE html> html5的文档声明头

5.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> html4.01的文档声明头

6. html 网页的最外层的标签，也是网页的根标签

7. head 网页的头部标签，也是网页的根标签

8. body 网页的身体标签，网页中所有能看得见摸得着的内容，都在body中声明

9. 那么，这个机构是我们网页的最基本的配置，如果把网页比作盖一座房子，那么这些相关的配置，就是开始打基地

　　接下来继续学习bead和body中的相关标签，通过这些内容，将我们的网页搭建好。

二、head相关标签

head标签中的相关标签，是看不见，摸不着的，仅仅是对应用于网页的一些基础信息（元信息）

1 meta： 网页的元信息标签，主要针对网页的配置
2 title： 网页的标签
3 style：样式标签
4 link：链接css文件
5     herf属性
6 script：标本标签
7     src属性链接脚本文件

 1 <!--document 文档：一个html 标记当前文档为html5的文档-->
 2 <!--引擎是浏览器兼容性最根本的原因-->
 3 <!doctype html>
 4 <html lang="en">
 5 <!--双闭合-->
 6 <head>
 7     <!--这里的标签是网页中看不见摸不着-->
 8     <!--单闭合-->
 9     <!--设置统一字符集-->
10     <meta charset="UTF-8">
11     <!--标记这个网页的标题内容-->
12     <title>01常用标签介绍</title>
13     <!--样式，修改网页内容-->
14     <style>
15         /*css语言注释格式*/
16         /*获取到body所有内容*/
17         body{
18             background-color: pink;
19         }
20     </style>
21     <link rel="stylesheet" href="./css/index.css">
22     <script>
23         // 网页弹出框
24         alert("hello fengzhu.gao");
25         //console.log("hello world");
26     </script>
27     <!--外链接一个js文件-->
28     <script src="js/index.js"></script>
29 </head>
30 <body>
31 阿伦艾弗森
32 </body>
33 </html>

三、body相关标签

标题标签：

1.标题标签 （类似word文档中，1级标题、2级标题......）
    h1~h6

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--标题标签-->
    <h1>科比布莱恩特</h1>
    <h2>科比布莱恩特</h2>
    <h3>科比布莱恩特</h3>
    <h4>科比布莱恩特</h4>
    <h5>科比布莱恩特</h5>
    <h6>科比布莱恩特</h6>
</body>
</html>

超链接标签

 1 a: anchor 锚点
 2     herf ：跳转的地址
 3     target：_self 在当前页面中打开地址
 4                _blank 在新的空白页中打开地址
 5      title：鼠标悬浮时显示的标题
 6 
 7 
 8 <!DOCTYPE html>
 9 <html lang="en">
10 <head>
11     <meta charset="UTF-8">
12     <title>Title</title>
13 </head>
14 <body>
15 <!--a：anchor 锚点 默认在当前网页中打开-->
16 <a href="https://www.baidu.com" target="_blank" title="百度一下">
17     <img src="./images/baidu.gif" alt="">
18     <img src="./images/logo.png" alt="">
19 </a>
20 </body>
21 </html>

img标签图片标签

img:
    scr属性：链接的图片地址<图片显示不出来时，重点排查>
    alt属性；图片加载失败时候显示的提示文本，为了用户体验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--a：anchor 锚点 默认在当前网页中打开-->
<a href="https://www.baidu.com" target="_blank" title="百度一下">
    <img src="./images/baidu.gif" alt="">
    <img src="./images/logo.png" alt="logo">
</a>
</body>
</html>

页面滚动 <返回顶部>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <!--这个位置增加一个锚点-->
 9     <p id="top"></p>
10     <h1>网页滚动</h1>
11     <h1>网页滚动</h1>
12     <h1>网页滚动</h1>
13     <h1>网页滚动</h1>
14     <h1>网页滚动</h1>
15     <h1>网页滚动</h1>
16     <h1>网页滚动</h1>
17     <h1>网页滚动</h1>
18     <h1>网页滚动</h1>
19     <h1>网页滚动</h1>
20     <h1>网页滚动</h1>
21     <h1>网页滚动</h1>
22     <h1>网页滚动</h1>
23     <h1>网页滚动</h1>
24     <h1>网页滚动</h1>
25     <h1>网页滚动</h1>
26     <h1>网页滚动</h1>
27     <h1>网页滚动</h1>
28     <h1>网页滚动</h1>
29     <h1>网页滚动</h1>
30     <h1>网页滚动</h1>
31     <h1>网页滚动</h1>
32     <h1>网页滚动</h1>
33     <h1>网页滚动</h1>
34     <!--a标签指向锚点-->
35     <a href="#top">返回顶部</a>
36 </body>
37 </html>

p标签 <段落标签>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <!--空白折叠现象：有空格或者是折行都默认折成一个空白-->
 9     <p>
10        中新网6月23日&nbsp;&nbsp;&nbsp;&nbsp;&copy;<strong>湖北</strong>
11     </p>
12     <p>
13         委员会办公室官方微信消息
14     </p>
15     <p>
16         <!--斜体  i用的最多-->
17         <i>斯科特皮蓬</i>
18         <em>斯科特皮蓬</em>
19 
20     </p>
21     <hr>
22     <p>alex</p>
23     <p>alex</p>
24 </body>
25 </html>

列表标签

列表标签(ul ol dl)

        ul和ol的子标签一定是li
        dl中有dt和dd

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         /*去掉ul前面的修饰*/
 8         ul{
 9             list-style: none;
10         }
11         a{
12             /*去掉文本下划线*/
13             text-decoration: none;
14             /*修改字体大小*/
15             font-size: 14px;
16             /*修改字体颜色*/
17             color: gray;
18         }
19         /*修改鼠标悬浮颜色*/
20         a:hover{
21             color: orangered;
22         }
23     </style>
24 </head>
25 <body>
26     <!--unordered list 无序列表-->
27     <ul type="square">
28         <!--list item 列表项-->
29         <li>
30             <a href="">你喜欢看CBA吗</a>
31         </li>
32         <li>
33             <a href="">还是喜欢看NBA</a>
34         </li>
35         <li>
36             <a href="">当然是喜欢看NBA</a>
37         </li>
38         <li>
39             <a href="">我最喜欢洛杉矶湖人队</a>
40         </li>
41     </ul>
42     <!--emment 语法，快捷键-->
43     <!--有序列表-->
44     <ol type="A">
45         <li>巴基斯坦总理称印总理莫迪向其致国庆贺电 中</li>
46         <li>特朗普突然承认戈兰高地为以色列领土，还想搞一波叙利..凤凰新闻</li>
47         <li>以色列遭火箭弹袭击致7人伤 以总理称将武力回</li>
48         <li>开车不识英文路牌 澳华人新移民酿致命车祸获刑中国新闻网</li>
49         <li>俄外交部发言人：西方正尽力让世界不知道克里米亚真实..凤凰新闻</li>
50     </ol>
51     <!--自定义标签-->
52     <dl>
53         <!--description title 定义标题-->
54         <dt>帮助中心</dt>
55         <!--defin description 定义内容-->
56         <dd>账户管理</dd>
57         <dd>购物指南</dd>
58         <dd>订单操作</dd>
59     </dl>
60 </body>
61 </html>

表格 table

tr 行
    td 单元格定制的内容

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <!--border 表格添加边框-->
 9     <!--cellspacing 单元格边距-->
10     <!--width 设置表格和body一样宽-->
11     <table border="1" cellspacing="0" width="100%">
12         <!--table row-->
13         <tr>
14             <!--table descriptin-->
15             <td>id</td>
16             <td>name</td>
17             <td>age</td>
18         </tr>
19         <tr>
20             <td>1</td>
21             <td>詹姆斯</td>
22             <td>35</td>
23         </tr>
24         <tr>
25             <td>2</td>
26             <td>欧文</td>
27             <td>25</td>
28         </tr>
29         <tr>
30             <td>3</td>
31             <td>库里</td>
32             <td>30</td>
33         </tr>
34     </table>
35 </body>
36 </html>

表单标签 form

前端要想和后端进行交互，无非离不开两种技术：

　　form标签：自带和服务器交互的行为

　　ajax技术：与后端进行交互

浏览器对象XMLHttpRuquest 所有前端与后端交互都使用的这个对象

action属性: 提交的服务器地址
method属性：请求方式
　　get：从后端拿数据
　　post: 前端提交数据给后端，后端处理完再返回给前端
input属性：
　　type:
　　　　text: 单行文本输入框
　　　　password：密码输入框
　　　　radio：单选框
　　　　　　产生互斥效果，加同样的name属性值
　　　　　　默认选中：checked
　　　　checkbox： 多选框
　　　　　　默认选中: checked
　　　　file： 上传文件
　　　　datetime-local：时间
　　name:
　　　　服务器端的key
　　value:
　　　　服务器端的value
　　id:
　　　　通常根label中的for属性值一样
　　placeholder
　　　　代替的文本
select：有name
　　option 有value，给select标签添加multiple,摁着crtl键进行多选
textarea: 多行文本输入框
　　name
　　value
　　id
　　cols
　　　　列数
　　rows
　　　　行数

button 普通按钮

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         a{
 8             text-decoration: none;
 9         }
10         a:hover{
11             text-decoration: underline;
12         }
13     </style>
14 </head>
15 <body>
16 <!--http如果不写，默认提交本地-->
17 <!--method如果不写，默认是get-->
18 <form action="" method="">
19     <!--表单控件-->
20     <!--单行文本输入框 input-->
21     <p>
22         <label for="username">用户名</label>
23         <input type="text" id="username" placeholder="请设置用户名" name="username">
24     </p>
25     <p>
26         <label for="phone">手机号</label>
27         <input type="text" id="phone" placeholder="可用户登录和找回密码" name="phone" >
28     </p>
29         <p>
30         <label for="pwd">密&nbsp;&nbsp;&nbsp;码</label>
31         <input type="password" id="pwd" placeholder="请设置登录密码" name="password">
32     </p>
33     <p>
34         <h2>单选按钮</h2>
35         <!--给两个input按钮加同样的name属性，就能产生互斥效果-->
36         <!--默认选中 checked-->
37     <input type="radio" name="sex" value="0" checked>男
38     <input type="radio" name="sex" value="1">女
39     </p>
40     <p>
41         <h2>多选按钮,我的爱好</h2>
42         <input type="checkbox" name="smoking" value="">抽烟
43         <input type="checkbox" name="drinking" value="" checked>喝酒
44         <input type="checkbox" name="tangtou" value="">烫头
45     </p>
46     <p>
47         <!--multiple 下拉列表实现多选功能-->
48         <!--selected 默认选中-->
49         <select name="fav" id="" multiple>
50             <option value="a" selected>篮球</option>
51             <option value="b">游泳</option>
52             <option value="c">跑步</option>
53             <option value="d">羽毛球</option>
54             <option value="e">火锅</option>
55             <option value="f">NBA</option>
56             <option value="g">水花兄弟</option>
57             <option value="f">勇士</option>
58         </select>
59     </p>
60     <h3>个人描述</h3>
61     <p>
62         <!--多行文本输入框-->
63         <textarea name="" cols="30" rows="10" placeholder="请输入个人信息"></textarea>
64     </p>
65     <!--显示时间框-->
66     <input type="datetime-local">
67     <!--上传文件-->
68     <input type="file">
69     <p>
70         <input type="checkbox">
71         <span id="note" style="font-size: 12px;">阅读并接受 <a href="#">《百度用户协议》</a>及 <a href="#">《百度隐私权保护声明》</a></span>
72     </p>
73     <p>
74         <!--提交按钮-->
75         <!--修改input属性的默认值,修改value就可以-->
76         <input type="submit" value="注册">
77     </p>
78 </form>
79 <!--在表单之外就和表单没任何关系-->
80 <button>普通按钮</button>
81 <!--悬浮下划线-->
82 <a href="#">悬浮下划线</a>
83 </body>
84 </html>

span标签

标签分类：

　　块级标签：独占一行

　　　　h1～h6

　　　　p：段落标签，上下有间距

　　　　ul: unordered list 无序列表

　　　　ol：ordered list 有序列表

　　　　dl：defin list 自定义列表

　　　　li：ul和ol的子标签

　　　　dt：dl中 description title

　　　　dd：dl中 defin description

　　　　table：表格

　　　　tr： table中的table row

　　　　form：表单标签

　　　　div： division 分割

　　行内标签：在一行内显示 <一般描述一些字体的，我们称为行内标签>

　　　　a ：anchor 锚点，超链接标签

　　　　img：图片标签

　　　　&nbsp：空格符号

　　　　&copy：©

　　　　em/i：都是斜体标签。i 使用最多

　　　　strong：对文本加粗

　　　　td：table中的description

　　　　input

　　　　label

标签的嵌套规范：

　　块级标签可以包括块和行为

　　但是行内尽量不要包括块

二、css

　层叠样式表

　对网页美化

-- css的引入方式

　　行内样式

　　　　优先级最高

　　内嵌样式

　　外接样式

　　　　使用最多

　　内嵌式和外接式的优先级取决于代码的写入顺序，代码从上到下执行。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         /*内嵌式*/
 8         #box{
 9             color: red;
10             /*行内样式优先级大于内嵌式*/
11             font-size: 24px;
12         }
13     </style>
14     <!--外接式-->
15     <link rel="stylesheet" href="css/index.css">
16 </head>
17 <body>
18     <!--行内样式  优先级最高-->
19     <div id="box" style="font-size: 30px" onclick="alert(1)">
20     alex
21     </div>
22 </body>
23 </html>

-- 选择器

选择器的作用：选中标签

　　-基础选择器

　　　　id选择器

　　　　　　#box { }

　　　　类选择器

　　　　　　.box { }

　　　　标签选择器

　　　　　　div { }

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         /* *通配符选择器，选中网页中所有的标签*/
 8         *{
 9             /*外边距*/
10             margin: 0px;
11             /*内边距*/
12             padding: 0px;
13         }
14         /*这里的p就是标签选择器,尽量不用，因为会改变网页中所有的p标签*/
15         p{
16             color: red;
17             font-size: 30px;
18         }
19         /*清除ul中li内容前面的点*/
20         ul{
21             list-style: none;
22         }
23         /*网页中所有a标签清除掉下划线*/
24         a{
25             text-decoration: none;
26         }
27         /*类选择器*/
28         .box{
29             color: greenyellow;
30         }
31         /*对第一个p标签单独设置字体颜色*/
32         .wrap{
33             color: orangered;
34         }
35         /*id是网页总唯一的*/
36         #box{
37             font-size: 25px;
38         }
39     </style>
40 </head>
41 <body>
42     <!--类名可以重复，还可以添加多个类名，一般不能超过5个-->
43     <p id="box" class="box wrap">恭喜多伦多猛龙队赢得NBA总冠军</p>
44     <p id="box1" class="box">恭喜多伦多猛龙队赢得NBA总冠军</p>
45     <p id="box2" class="box">恭喜多伦多猛龙队赢得NBA总冠军</p>
46     <p id="box3" class="box">恭喜多伦多猛龙队赢得NBA总冠军</p>
47     <p id="box4" class="box">恭喜多伦多猛龙队赢得NBA总冠军</p>
48     <p id="box5" class="box">恭喜多伦多猛龙队赢得NBA总冠军</p>
49     <ul>
50         <li>item1</li>
51         <li>item2</li>
52         <li>item3</li>
53         <li>item4</li>
54     </ul>
55 </body>
56 </html>

　　-高级选择器

　　　　后代选择器

　　　　　　#box p { }

　　　　　　表示的是子子孙孙　　　　

　　　　子代选择器

　　　　　　#box > p

　　　　　　表示的是亲儿子

　　　　组合选择器

　　　　ul{

　　　　padding: 0;

　　　　}

　　　　　od {

　　　　　padding: 0;

　　　　　　以上两条命令组合起来：

　　　　　ul,ol{

　　　　　　padding: 0;

　　　　　　}

　　　　交集选择器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         /*后代选择器--能选中box下所有的p标签*/
 8         #box p{
 9             color: red;
10         }
11         #box>p{
12             color: greenyellow;
13         }
14     </style>
15 </head>
16 <body>
17     <div id="box">
18         <!--这里的p是div的子代，亲儿子-->
19         <p>kobe</p>
20         <ul>
21             <li>
22                 <!--这里的p是div的后代-->
23                 <p>curry</p>
24             </li>
25         </ul>
26     </div>
27 </body>
28 </html>

　 -属性选择器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         /*属性选择器，text表示选中了文本输入框*/
 8         input[type=text]{
 9             width: 328px;
10             height: 50px;
11             border: 1px solid #cccccc;
12             font-size: 14px;
13             padding: 0 10px;
14         }
15         input[type=password]{
16 
17         }
18         input[type=file]{
19 
20         }
21         input[type=radio]{
22 
23         }
24     </style>
25 </head>
26 <body>
27     <!--可以根据input的类型，使用不同的属性选择器-->
28     <div>
29         <input type="text">
30     </div>
31 </body>
32 </html>

　　-优先级/优先级深入

　　　　1. 先看是否选中了标签

　　　　　　如果选中了

　　　　　　权重如何看？

　　　　　　　　数选择器的数量： id 类标签

　　　　　　　　谁的数值大，谁的优先级最高

　　　　2. 如果没有选中，继承来的属性，继承来的属性权重接近0，跟选中的标签的优先级没有可比性。

　　　　3. 同是继承来的属性

　　　　　　就近原则，距离描述的标签越近，优先级越高

　　　　　　如果描述的一样近，数选择器的权重

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         /*数选择器的数量：id  类   标签*/
 8         /* 100        10       1*/
 9         /*id选择器 > 类选择器 >标签选择器*/
10         /*100*/
11         #box{
12             color: red;
13         }
14         /*001*/
15         div{
16             color: yellowgreen;
17         }
18         /*010*/
19         .box{
20             color: blue;
21         }
22     </style>
23 </head>
24 <body>
25     <div id="box" class="box">杜兰特</div>
26 </body>
27 </html>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         /*121*/
 8         #box1 .wrap2 .wrap3 p{
 9             color: red;
10         }
11         /*031*/
12         .wrap1 .wrap2 .wrap3 p{
13             color: blue;
14         }
15         /*201*/
16         #box1 #box2 p{
17             color: greenyellow;
18         }
19     </style>
20 </head>
21 <body>
22     <div id="box1" class="wrap1">
23         <div id="box2" class="wrap2">
24             <div id="box3" class="wrap3">
25                 <p class="active">
26                     凯文杜兰特
27                 </p>
28             </div>
29         </div>
30     </div>
31     </div>
32 </body>
33 </html>

　　-继承性

　　　　有个别的属性会被继承下来

　　　　　color

　　　　　font-xxx

　　　　　text-align

　　　　　line-height

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         /*本身的优先级大于继承过来的属性*/
 8         p{
 9             color: red;
10         }
11         /*p标签继承div的属性*/
12         #box{
13             color: greenyellow;
14             font-size: 30px;
15         }
16     </style>
17 </head>
18 <body>
19     <div id="box">
20         <p>科比</p>
21     </div>
22 </body>
23 </html>

　　-行高 line-height

　　　　　　表示一行的高度

　　　　当行高等于盒子的高度，实现垂直居中

　　　　实现水平居中：text-align：center

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #box{
 8             background-color: red;
 9             /*line-height等于盒子div的height实现垂直居中*/
10             line-height: 50px;
11             width: 300px;
12             height: 50px;
13             text-align: center;
14 
15         }
16     </style>
17 </head>
18 <body>
19     <div id="box">
20         alex
21     </div>
22 </body>
23 </html>

　　-盒子模型

　　标准文档流：一个网页在不受任何布局的影响下，它内部HTML标签的默认排版样式；从左往右、从上往下，这种布局叫流式布局。

　　　　　width: 内容的宽度

　　　　　height：内容的高度

　　　　　padding：内边距

　　　　　broder：边框

　　　　　　　　1px solid red；

　　　　　　　　border-top: 1px solid red;

　　　　　　　　border-color: red;

　　　　　　　　border-width: 2px

　　　　　　　　border-style: solid

　　　　　margin：外边距；盒子与盒子之间的距离

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .box{
 8             width: 200px;
 9             height: 200px;
10             background-color: red;
11             /*padding设置一个值，表示上下左右*/
12             /*padding: 40px;*/
13             /*padding设置两个值，表示 上下，左右*/
14             /*padding: 20px 50px;*/
15             /*padding设置3个值，表示 上，左右，下*/
16             /*padding: 30px 30px 50px;*/
17             /*padding设置4个值，表示 上，右，下，左*/
18             padding: 10px 20px 30px 50px;
19             border: 5px solid greenyellow;
20             margin-bottom: 40px;
　　　　　　　　　/*以4px为半径划圆*/
　　　　　　　　　border-radius:4px

21         }
22     </style>
23 </head>
24 <body>
25 <!--宽度
26     高度
27     内边距
28     边框
29     外边距：两个盒子之间的距离
30 
31 -->
32     <div class="box">
33         alex
34     </div>
35     <div class="box">
36         alex
37     </div>
38 </body>
39 </html>

-浮动　

float：left | right

浮动盒子特点：

　　1. 脱离标准文档流

　　2. 贴边现象

浮动是css里面布局最多的一个属性，也是很重要的一个属性。

float：表示浮动的意思。它有四个值。

none: 表示不浮动，默认

left: 表示左浮动

right：表示右浮动

HTML文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="nav">
        <div class="container">
            <div class="nav_1">
                <a href="">小米商城</a>
                <span class="sep">|</span>
                <a href="">MIUI</a>
                <span class="sep">|</span>
            </div>
            <div class="nav_shop"></div>
            <div class="nav_login"></div>
        </div>
    </div>
</body>
</html>

CSS文件：

.nav{
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: #333;
}

.container{
    width: 1226px;
    height: 40px;
    /*background-color: red;*/
    /*margin-right: auto;*/
    /*margin-left: auto;*/

    margin: 0 auto;
}

.nav .nav_1{
    width: 500px;
    height: 40px;
    /*background-color: green;*/
    float: left;
}

.nav .nav_shop{
    width: 120px;
    height: 40px;
    /*background-color: blue;*/
    float: right;
    margin-left: 20px;
    /*margin: 20px;*/
}

.nav .nav_login{
    width: 200px;
    height: 40px;
    /*background-color: yellow;*/
    float: right;
}

.nav a{
    color: #b0b0b0;
    font-size: 12px;
}

.nav .sep{
    color: #424242;
}

posted @ 2019-06-24 02:13 mingtao.li 阅读(254) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

mingtao.li

前端学习之路-1

一、HTML介绍

什么是超文本

什么是标记

什么是语言

二、HTML结构

文档声明

HTML标签

head标签

body标签

总结：

二、head相关标签

三、body相关标签

标题标签：

超链接标签

img标签 图片标签

页面滚动 <返回顶部>

p标签 <段落标签>

列表标签

表格 table

表单标签 form

span标签

标签分类：

标签的嵌套规范：

块级标签可以包括块和行为

但是行内尽量不要包括块

二、css

-- css的引入方式

-- 选择器

-继承性

-行高 line-height

-盒子模型

width: 内容的宽度

-浮动

公告

img标签图片标签

　　块级标签可以包括块和行为

　　但是行内尽量不要包括块

　　-继承性

　　-行高 line-height

　　-盒子模型

　　　　　width: 内容的宽度

-浮动　