HTML-CSS学习

一.HTML(超文本标记语言: HyperText Markup Language)

提示

HTML不是一种编程语言,而是一种标记语言(由标签构成的语言)

1. 完整的html结构如下

<!-- 告诉浏览器编码规范 -->
<!DOCTYPE html>		
<!-- 总标签,所有的代码在总标签下 -->
<html>
    <!-- 网页头部 -->
<head>
    <!-- 定义字符集为UTF-8 -->
    <!-- meta为描述性标签,用来描述网站信息 -->
	<meta charset="utf-8">		-->自闭合标签
    <meta name = "keywords" content = "document">
	<title>菜鸟教程(runoob.com)</title>
</head>
    <!-- 网页主体 -->
<body>
 
	<h1>我的第一个标题</h1>
 
	<p>我的第一个段落。</p>
 
</body>
</html>
 

2. 网页基本标签

所有的标签如下表

标签功能标签功能
<!-- -->注释<kbd>定义键盘文本
<!DOCTYPE>定义文档类型<keygen>规定用于表单的密钥对生成器字段
<a>定义超文本连接<label>定义 input 元素的标注
<abbr>定义缩写<legend>定义 fieldset 元素的标题
<acronym>定义只取首字母的缩写<li>定义列表的项目
<address>定义文档作者或拥有者的联系信息<link>定义文档与外部资源的关系
<applet>定义嵌入的applet<map>定义图像映射
<area>定义图像映射内部的区域<mark>定义带有记号的文本。请在需要突出显示文本时使用<m>标签
<article>定义一个文章区域<menu>定义菜单列表
<aside>定义页面侧边栏的内容<meta>定义关于 HTML 文档的元信息
<audio>定义音频内容<meter>定义度量衡。仅用于已知最大和最小值的度量
<b>定义文本粗体<nav>定义导航链接的部分
<base>定义页面中所有链接的默认地址<noframes>定义针对不支持框架的用户的替代内容
<basefont>定义页面中文本的默认样式<noscript>定义针对不支持客户端脚本的用户的替代内容
<bdi>允许设置一段文本,使其脱离其父元素的文本方向设置<object>定义内嵌对象
<bdo>定义文字方向<ol>定义有序列表
<big>定义大号文本<optgroup>定义选择列表中相关选项的组合
<blockquote>定义长的引用<option>定义选择列表中的选项
<body>定义文档主体<output>定义不同类型的输出,比如脚本的输出
<br>定义换行<p>定义段落
<button>定义一个点击按钮<param>定义对象的参数
<canvas>定义图形<pre>定义预格式文本
<caption>定义表格标题<progress>定义运行中的进度(进程)
<center>定义居中文本<q>定义短的引用
<cite>定义引用<rp>在 ruby 注释中使用,以定义不支持 ruby 元素的浏览器所显示的内容
<code>定义计算机代码文本<rt>定义字符(中文注音或字符)的解释或发音
<col>定义表格中一个或多个列的属性值<ruby>标签定义 ruby 注释(中文注音或字符)
<colgroup>定义表格中供格式化的列组<s>不赞成使用。定义加删除线的文本
<command>定义命令按钮,比如单选按钮、复选框或按钮<samp>定义计算机代码样本
<datalist>定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。<script>定义客户端脚本
<dd>定义定义列表中项目的描述<section>定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分
<del>定义被删除文本<select>定义选择列表(下拉列表)
<details>用于描述文档或文档某个部分的细节<small>定义小号文本
<dfn>定义定义项目<source>定义媒介资源
<dialog>定义对话框,比如提示框<span>定义文档中的节
<dir>HTML5不支持,不赞成使用。定义目录列表。<strike>定义加删除线文本
<div>定义文档中的节<strong>定义强调文本
<dl>定义列表详情<style>定义文档的样式信息
<dt>定义列表中的项目<sub>定义下标文本
<em>定义强调文本<summary>
<embed>定义嵌入的内容,比如插件<sup>定义上标文本
<fieldset>定义围绕表单中元素的边框<table>定义表格
<figcaption>定义<figure> 元素的标题<tbody>定义表格中的主体内容
<figure>规定独立的流内容(图像、图表、照片、代码等等)<td>定义表格中的单元
<font>HTML5不支持,不赞成使用。定义文字的字体、尺寸和颜色<textarea>定义多行的文本输入控件
<footer>定义 section 或 document 的页脚<tfoot>定义表格中的表注内容(脚注)
<form>定义了HTML文档的表单<th>定义表格中的表头单元格
<frame>定义框架集的窗口或框架<thead>定义表格中的表头内容
<frameset>定义框架集<time>定义日期或时间,或者两者
<h1> to <h6>定义 HTML 标题<title>定义文档的标题
<head>定义关于文档的信息<tr>定义表格中的行
<header>定义了文档的头部区域<tracl>为诸如 video 元素之类的媒介规定外部文本轨道
<hr>定义水平线<tt>定义打字机文本
<html>定义 HTML 文档<u>不赞成使用。定义下划线文本
<i>定义斜体字<ul>定义无序列表
<iframe>定义内联框架<var>定义文本的变量部分
<img>定义图像<video>定义视频,比如电影片段或其他视频流
<input>定义输入控件<wbr>规定在文本中的何处适合添加换行符
<ins>定义被插入文本

标题标签⇒h1 → h6

<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>

段落标签⇒paragraph

<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

换行标签⇒自闭合

<br/>

水平线标签⇒分隔网页内容

<hr/>

字体样式标签

<h1>
    <strong>粗体标签</strong>
    <em>斜体标签</em>
</h1>

特殊符号⇒&开头 , 分号结尾

<h1>
    <!-- 空格:&ndsp,每一个代表一个空格 -->
    &ndsp;
    <!-- 大于小于分别为: &gt; 和 &lt; -->
    &gt;
    &lt;
    <!-- 版权符号: &copy; -->
    &copy;
</h1>

图像标签

格式

  • src:图像地址
  • alt: 图像的替代文字
  • title: 鼠标悬停提示文字
  • width: 图像宽度
  • height: 图像高度
<img src="path" alt="text1" title="text2" width="x" height="y">

链接标签⇒超链接

概述

超链接:

  • href⇒必填,表示要跳转到哪个页面
  • target⇒表示窗口在哪里打开
    • blank ⇒ 在新标签打开
    • self ⇒ 在自己的网页中打开
<a href="path"  target="目标窗口位置">链接文本或图像</a>
 
<!-- 锚链接:需要一个锚标记,然后跳转到该标记 -->
<a href = "#top">回到顶部</a>
<!-- 表示跳转到tmp网页的down的位置 -->
<a href = "tmp.html#down">跳转</a>
 
<!-- 功能性链接:
	邮件链接:mailto:
-->
<a href = "mailto:xxx@qq.com">点击发送</a>

列表标签

列表分三类:

  • 无需列表
  • 有序列表
  • 定义列表
<!-- 有序列表(orderList) -->
<ol>
    <!-- 子列表(List) -->
    <li> java </li>
</ol>
 
<!-- 无序列表(unorderList) -->
<ul>
    <!-- 子列表(List) -->
    <li> java </li>
</ul>
 
<!-- 自定义列表(defineList) -->
<dl>
    <!-- 列表名称 -->
    <dt>学科</dt>
    <!-- 列表选项 -->
    <dd>C</dd>
    <dd>Java</dd>
    <dd>Python</dd>
    <dd>C++</dd>
    <!-- 列表名称 -->
    <dt>城市</dt>
    <!-- 列表选项 -->
    <dd>北京</dd>
    <dd>上海</dd>
</dl>

表格标签

基本结构

  • 单元格
  • 行,列
  • 跨行,跨列
<!-- 
表格 ->table
行 ->tr
列 ->td
跨行(纵向合并单元格) ->rowspan=""
跨列(横向合并单元格) ->colspan=""
-->
<table>
    <tr>
        <td colspan="3">1-1</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
</table>

视频和音频

内容

  • src →资源路径
  • controls →控制器
  • autoplay →自动播放
<!-- 视频 -->
<vedio src="path" controls autoplay>"path"</vedio>
<!-- 音频 -->
<audio src="path" controls>"path"</audio>

3.页面结构分析

概述

header ⇒标题头部区域内容 footer ⇒标记脚部区域内容 section ⇒Web页面的一块独立区域 article ⇒独立的文章内容 aside ⇒相关内容或应用(多用于侧边栏) nav ⇒导航类辅助内容

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>页面结构分析</title>
    </head>
    <body>
        <header> 
            <h2> 网页头部 </h2>
        </header>
        <section> 
            <h2> 网页主体 </h2> 
        </section>
        
        <footer> 
            <h2> 网页脚部 </h2>
        </footer>
    </body>
</html>

4. iframe内联框架⇒在一个网页中嵌套另一个网页

相关内容

  • frameborder 属性用于定义iframe表示是否显示边框,设置属性值为 “0” 移除iframe的边框
  • iframe 可以显示一个目标链接的页面,目标链接的属性必须使用 iframe 的属性
<!-- iframe内联框架 -->
<iframe src"path" frameborder="0" width="x" height="y">
    
</iframe>
 
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p>
<a href="https://www.runoob.com" target="iframe_a" rel="noopener">RUNOOB.COM</a>
</p>

5. 表单语法

收集用户信息

    <input type="password" id="password" name="password" required>
 
    <br>
 
    <!-- 单选按钮(Radio Buttons)name的属性需要一样 -->
    <label>性别:</label>
    <input type="radio" id="male" name="gender" value="male" checked>
    <label for="male">男</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">女</label>
 
    <br>
 
    <!-- 复选框(Checkboxes) -->
    <input type="checkbox" name="vehicle[]" value="Bike">我喜欢自行车<br>
	<input type="checkbox" name="vehicle[]" value="Car">我喜欢小汽车
 
    <br>
 
    <!-- 按钮 
	input type="button" ->普通按钮
	input type="image"  ->图像按钮
	input type="submit" ->提交按钮
	input type="reset"  ->重置按钮
	-->
    <input type="button" name="btn1" value="点击">
    
    <br>
    <!-- 下拉列表(select) -->
    <label for="country">国家:</label>
    <select id="country" name="country">
        <!-- 选项(option) , selected设置默认值 -->        <option value="cn" selected>CN</option>
        <option value="usa">USA</option>
        <option value="uk">UK</option>
    </select>
 
    <br>
    
    <!-- 文本域 -->
    <textarea name="textarea" cols="x" rows="y">文本内容</textarea>
 
    <!-- 文件域 -->
    <input type="file" name="files">
    <input type="button" value="上传" name="upload">
    
    <!-- 邮件验证 -->
    <input type="email" name="email">
    
    <!-- url验证 -->
    <input type="url" name="url">
    
    <!-- 数字 -->
    <input type="number" name="number" max="100" min="1" step="1">
    
    <!-- 滑块 -->
    <input type="range" name="sound" min="0" max="100" step="2">
    
    <!-- 搜索框 -->
    <input type="search" name="search">
    
    <!-- 提交按钮 -->
    <input type="submit" value="提交">
</form>
 
表单的应用
 
只读-->不可修改
 
 
<p>
    姓名:<input type="text" name="username" value="admin" readonly>
</p>
 
 
禁用-->禁用选项"男"
 
 
<p>
    <input type="radio" id="male" name="gender" value="male" checked disabled>
    <label for="male">男</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">女</label>
</p>
 
        <!-- 选项(option) , selected设置默认值 -->
        <option value="cn" selected>CN</option>
        <option value="usa">USA</option>
        <option value="uk">UK</option>
    </select>
 
    <br>
    
    <!-- 文本域 -->
    <textarea name="textarea" cols="x" rows="y">文本内容</textarea>
 
    <!-- 文件域 -->
    <input type="file" name="files">
    <input type="button" value="上传" name="upload">
    
    <!-- 邮件验证 -->
    <input type="email" name="email">
    
    <!-- url验证 -->
    <input type="url" name="url">
    
    <!-- 数字 -->
    <input type="number" name="number" max="100" min="1" step="1">
    
    <!-- 滑块 -->
    <input type="range" name="sound" min="0" max="100" step="2">
    
    <!-- 搜索框 -->
    <input type="search" name="search">
    
    <!-- 提交按钮 -->
    <input type="submit" value="提交">
</form>

表单的应用

只读

概述

只读使用关键字readonly, 设置之后这部分内容无法被修改

<p>
    姓名:<input type="text" name="username" value="admin" readonly>
</p>
禁用

概述

禁用选项使用checked disabled, 会将对应的选项禁用

<p>
    <input type="radio" id="male" name="gender" value="male" checked disabled>
    <label for="male">男</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">女</label>
</p>
隐藏

概述

使用关键字hidden, 隐藏相应的内容,但是该部分内容的属性仍然存在

<p>
    <label for="password">密码:</label>
    <input type="password" id="password" name="password" required hidden>
</p>
增强鼠标可用性
<p>
    <lable for"mark">点击</lable>
    <input type="text" id="mark">
</p>

表单验证

目的

保证数据安全,减轻服务器压力

placeholder

Note

提示性消息

<p>
    名字:<input type="text" name="username" placeholder="请输入用户名">
</p>
required

概述

进行非空判断

<input type="password" id="pwd" name="password" required>
pattern

概述

使用正则表达式进行字符串匹配

<p>
    <input type="text" name="diyemail" pattern="^(0[1-9]|1[0-2])[\/\-](0[1-9]|[12][0-9]|3[01])[\/\-]\d{4}$"
</p>

二.CSS (层叠样式表 ⇒Cascading Style Sheets)

概述

用来为结构化文档(如 HTML 文档或 XML 应用)添加样式(字体、间距和颜色等)的计算机语言

1.CSS的基本语法

/* 注释 */
/* 选择器->声明(用分号结尾) */
p{
    color: red;
}
<head>
    <title>Title</title>
    <style>
        h1{
        color:red;
        }
        
        <link rel="stylesheet" href="css/style.css">
    </style>
</head>
 
<body>
    <h1>
        标题
    </h1>
</body>

注意

一般来说使用独立于HTML的CSS文件

2.CSS的导入方式

2.1行内样式⇒在标签元素中编写style属性,直接赋属性

<!-- 快捷,但是 -->
<body>
    <h1 style="color: red;"> 标题 </h1>
</body>

2.2 style标签 (内部样式表)

<head>
    <style>
        /*在style里用的是CSS*/
        h1{
            color: red;
        }
    </style>
</head>

2.3外部样式⇒链接式,导入式 (link使用较多)

h1{
    color : yellow;
}
<!-- link是html标签,只能放入html的源代码中使用 -->
<head>
    <link rel="stylesheet" href="css/style.css">
</head>
<!-- 可看做css样式,作用是引入css样式功能,import在使用时需要<style type="url">标签,也可以直接@import css文件路径地址 -->
<head>
    <style>
        @import url("url");
    </style>
</head>

优先级

行内样式 > 内部样式 > 外部样式

3. 选择器

作用

选择页面上的某一个或者某一类元素

3.1 基本选择器

标签选择器

概述

只会选中同名的所有标签

    <head>
        <style>
            h1{
                /*颜色表示法1:英文直接表示*/
                color: red;
                border-radius: 24px
            }
            p{
                /*颜色表示法2:rgb表示法,三个十进制数字(0~255)依次表示rgb的数值*/
                color: rgb(125,0,203);
                font-size: 72px;
            }
        </style>
    </head>
    <body>
        <h1>text1</h1>
        <h1>text2</h1>
        <p>text3</p>
    </body>
类选择器

概述

可以多个标签归类,是同一个class可以复用

    <head>
        <style>
            .myname{
                /*颜色表示法3:十六进制表示法,一共六位数字,
                每两个十六进制数字依次对应rgb值的其中之一*/
                color: [[3748ff]];
            }
            .myemail{
                /*颜色表示法4:rgba表示法,在rgb表示的基础上,增加了透明度的参数*/
                color: rgba(255,0,125,0.5)
            }
        </style>
    </head>
    <body>
        <h1 class="myname">text1</h1>
        <h1 class="myemail">text2</h1>
    </body>
id选择器

概述

不可复用,id必须保证全局唯一

    <head>
        <style>
            [[name]]{
                color: pink;
            }
        </style>
    </head>
    <body>
        <h1 id="name">text1</h1>
        <h1 id="phone">text2</h1>
    </body>

优先级

id选择器 > 类选择器 > 标签选择器

3.2 高级选择器

3.2.1.层次选择器⇒根据层次选择
后代选择器⇒在某个元素的后面的所有
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body p{
                background: pink;
            }
        </style>
    </head>
    <body>
    
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>
            <p>p4</p>
        </li>
        <li>
            <p>p5</p>
        </li>
        <li>
            p6
        </li>
    </ul>
    </body>
子选择器⇒一代
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /*子选择器*/
            body > p{
                background: grey;
            }
        </style>
    </head>
    <body>
    
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>
            <p>p4</p>
        </li>
        <li>
            <p>p5</p>
        </li>
        <li>
            p6
        </li>
    </ul>
    </body>
相邻兄弟选择器⇒同级元素,对下不对上,只选中一个
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /*相邻兄弟选择器*/
            .active + p{
                background: blue;
            }
        </style>
    </head>
    <body>
    
    <p class="active">p0</p>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>
            <p>p4</p>
        </li>
        <li>
            <p>p5</p>
        </li>
        <li>
            p6
        </li>
    </ul>
    </body>
    ```
 
 
###### 通用选择器-->选中同级向下的所有元素
 
```html
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            /*通用选择器*/
            .active~p{
                background: red;
            }
        </style>
    </head>
    <body>
    
    <p class="active">p0</p>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>
            <p>p4</p>
        </li>
        <li>
            <p>p5</p>
        </li>
        <li>
            p6
        </li>
    </ul>
    </body>
3.2.2.结构伪类选择器⇒与结构相关,定位元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*ul的第一个子元素*/
        ul li:first-child{
            background: deepskyblue;
        }
        /*ul的最后一个子元素*/
        ul li:last-child{
            background: [[3fb878]];
        }
        /*选中p1  :定位到父级元素,选择当前的第一个元素(必须同名)-->按顺序选 */
        p:nth-child(1){
            background: red;
        }
        /* 选中父级第二个类型为p的元素-->按类型选 */
        p:nth-of-type(2){
            background: yellow;
        }
    </style>
</head>
<body>
 
 
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>
</body>
</html>
3.2.3.属性选择器(常用)⇒id+class
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: blue;
            text-align: center;
            color: grey;
            text-decoration: none;
            margin-right: 5px;
            font: bold  20px/50px Arial;
        }
 
        /*存在id属性的元素*/
        .demo a[id]{
            background: red;
        }
        /*选中id=first的元素*/
        .demo a[id=first]{
            background: green;
        }
        /*class中含有links的元素*/
        .demo a[class*="links"]{
            background: [[ffc0f2]];
        }
        /*选中href中以http开头的元素*/
        .demo a[href^="http"]{
            background: cyan;
        }
        /*选中以html结尾的元素*/
        .demo a[href$=".html"]{
            background: mediumblue;
        }
    </style>
</head>
<body>
<p class="demo">
    <a href="https://www.baidu.com"  id="first">1</a>
    <a href=""  id="second">2</a>
    <a href="层次选择器.html" class id="third">3</a>
    <a href="img/123.png" class="links item fourth">4</a>
    <a href="img/123.jpg"  id="fifth">5</a>
    <a href="/a.pdf" class="links item sixth">6</a>
    <a href="and.doc"  id="seventh">7</a>
    <a href="abcd.ppt"  id="eighth" >8</a>
</p>
</body>
</html>

4.美化网页元素⇒传递有效信息,凸显主题,增加美观性

4.1.span标签

用法

重点突出的字用span套起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
      [[title1]]{
          font-size: 50px;
      }
  </style>
</head>
<body>
 
<span id="title1">北京</span>欢迎你
</body>
</html>
4.2.字体样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
      /*字体样式*/
    body{
      font-family: 微软雅黑,serif;
    }
    /*大小*/
    h1{
      font-size: 50px;
    }
    /*粗细*/
    .p1{
        font-weight: bold;
    }
    /*颜色*/
    .p2{
        color: [[0033ff]];
    }
  </style>
</head>
<body>
<h1>
    字体系列
</h1>
<p class="p2">
    CSS 属性选择器用于根据元素的属性或属性值来选择 HTML 元素。
    属性选择器可以帮助你在不需要为元素添加类或 ID 的情况下对其进行样式化。
</p>
<p class="p1">
    font-family 属性设置文本的字体系列。
    font-family 属性应该设置几个字体名称作为一种"后备"机制,如果浏览器不支持第一种字体,他将尝试下一种字体。
</p>
</body>
</html>
4.3文本样式
4.3.1.颜色

四种表示方法

  • 英文直接表示
  • 十六进制(#)
  • rgb
  • rgba
4.3.2.段落设置

用法

  • 缩进(text-indent-2em)
  • 下划线(text-decoration)
  • 行高(line-height)
  • 对齐方式(text-align=center)
4.4.文本阴影与超链接伪类
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 
    <style>
        /*默认颜色*/
        a{
            text-decoration: none;
            color: black;
        }
        /*鼠标悬停颜色(常用)*/
        a:hover{
            color: blue;
            font-size: 30px;
        }
        /*鼠标单击但不释放*/
        a:active{
            color: pink;
            font-size: 50px;
        }
        /*鼠标单击并释放*/
        a:visited{
            color: red;
        }
        /*文本阴影-->阴影颜色,水平偏移,竖直偏移,阴影半径*/
        [[price]]{
            text-shadow: cyan 10px 5px  2px;
        }
    </style>
</head>
<body>
 
<a href="">
  <img src="/img/1.png" alt="开发">
</a>
<p>
    <a href="">
        java开发手册
    </a>
</p>
<p>
    <a href="">
        作者:xxx
    </a>
</p>
<p id="price">
    $99
</p>
</body>
</html>
4.5列表
  .title{
     font-size: 24px;
     font-weight: bold;
     text-indent: 1em;
     line-height: 35px;
     background: red;
 }
 ul{
     background: grey;
 }
 ul li{
     line-height: 30px;
     list-style: none; /*去掉圆点*/
 }
a{
    text-decoration: none;
    font-size: 20px;
    color: #000;
}
 a:hover{
     text-decoration: none;
     font-size: 36px;
 }
 
 [[nav]]{
     width: 450px;
 }

在html中导入css设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="/css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
 
<div id="nav">
    <h2 class="title">
        商品分类
    </h2>
    <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>
    </ul>
</div>
 
</body>
</html>
4.6.背景⇒颜色/图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 487px;
            height: 487px;
            border: 3px solid red;
            /*图片默认全部平铺*/
            background-image: url("src/img/tx.jpg");
        }
 
        /*水平平铺*/
        .div1 {
            background-repeat: repeat-x;
        }
 
        /*竖直平铺*/
        .div2 {
            background-repeat: repeat-y;
        }
 
        /*不平铺*/
        .div3 {
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
 
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
 
</body>
</html>

5.盒子模型

概述

所有HTML元素可以看作盒子,在CSS中,“box model”这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素

盒子模型(Box Model):

  • Margin(外边距) - 清除边框外的区域,外边距是透明的。
  • 四个参数(上,右,下, 左)
  • 三个参数(上, 左右, 下)
  • 两个参数(上下, 左右)
  • 一个参数(四个边统一)
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域,内边距是透明的。
  • Content(内容) - 盒子的内容,显示文本和图像。

计算方法

  • 最终元素的总宽度计算公式是这样的:总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
  • 元素的总高度最终计算公式是这样的:总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

5.1.边框

5.1.1.普通边框
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    h1,ul,li,a,body{
      margin: 0;
      padding: 0;
    }
    [[box]]{
      width: 300px;
      border: 1px solid blue;
    }
    form{
      background: [[3fb878]];
    }
    div:nth-of-type(1)>input{
      border: 3px solid black;
    }
    div:nth-of-type(2)>input{
      border: 3px dashed blue;
    }
    div:nth-of-type(3)>input{
      border: 3px dotted [[01fae0]];
    }
    h2{
      font-size: 30px;
      background: [[1df861]];
      line-height: 45px;
      margin: 0;
    }
  </style>
</head>
<body>
 
<div id="box">
  <h2>会员登录</h2>
  <form action="#">
    <div>
      <span>用户名:</span>
      <input type="text">
    </div>
    <div>
      <span>密码:</span>
      <input type="password">
    </div>
    <div>
      <span>邮箱:</span>
      <input type="email">
    </div>
  </form>
</div>
</body>
</html>
5.1.2.圆角边框
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div{
      width: 100px;
      height: 100px;
      border: 10px solid red;
        /*圆角矩形:参数为圆角半径
        四个参数依次对应:左上,右上,右下,左下(顺时针)
        两个参数分别对应:左上右下 , 左下右上(对角线)
        一个参数对应:所有
        */
      border-radius: 50px 20px;
    }
  </style>
</head>
<body>
<div></div>
</body>
</html>
5.1.3盒子阴影
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div{
      width: 100px;
      height: 100px;
      border: 10px solid blue;
        border-radius: 20px 30px 10px 40px;
      box-shadow: [[1df861]]  10px 5px 1px ;
    }
  </style>
</head>
<body>
<div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    img{
      margin: 0 auto;
      border-radius: 50%;
      box-shadow: 10px  10px 1000px [[00ff22]];
    }
      /*整体居中需要将图片打包在div中,将div居中即可*/
    [[box]]{
      width: 487px;
      height: 487px;
      margin: 0 auto;
    }
  </style>
</head>
<body>
<div id="box">
  <img src="../../img/tx.jpg" height="487" width="487" alt="#"/>
</div>
  </body>
</html>

6.浮动

6.1.标准文档流→行内元素可以被包含在块级元素中,反之不行
6.2.display⇒调整元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 
		block 块元素
		inline 行内元素
		inline-block 既是块元素也是行内元素
		none 都不是
	-->
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid [[00ff22]];
            display: inline-block;
        }
        span{
            width: 100px;
            height: 100px;
            border : 1px solid blue;
            /*将行内元素变为块元素*/
            display: block;
        }
    </style>
</head>
<body>
<div>div块元素</div>
<span>span行内元素</span>
</body>
</html>
6.3.浮动→float
div{
    margin: 10px;
    padding: 5px;
}
[[picture]]{
    border: 2px solid green;
}
.layer1{
    border: 1px  solid red;
    display: inline-block;
    float: left;
}
.layer2{
    border: 1px  solid blue;
    display: inline-block;
    float: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link  rel="stylesheet" href="../../css/float.css">
</head>
<body>
<div id="picture">
    <div class="layer1"><img src="../../img/tx.jpg" height="487" width="487" alt=""/></div>
    <div class="layer2"><img src="../../img/1.jpg" height="531" width="422" alt=""/></div>
</div>
</body>
</html>
6.4.清除浮动⇒clear

元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用 clear 属性。

clear 属性指定元素两侧不能出现浮动元素。

div{
    margin: 10px;
    padding: 5px;
}
[[picture]]{
    border: 2px solid green;
}
.layer1{
    border: 1px  solid red;
    display: inline-block;
    float: left;
    clear: right; /*两侧不允许浮动*/
}
.layer2{
    border: 1px  solid blue;
    display: inline-block;
    float: right;
    clear: left;    /*左侧不允许浮动*/
}
div > p{
    border: 1px solid [[01fae0]];
    font-size: 80px;
    display: inline-block;
    clear: both; /*两侧不允许浮动*/
}
6.5.解决父级边框塌陷问题
6.5.1.增加父级元素高度(不推荐)
6.5.2.添加一个新的空的div清除浮动⇒简单但是会造成冗余
div{
    margin: 10px;
    padding: 5px;
}
[[picture]]{
    border: 2px solid green;
}
.layer1{
    border: 1px  solid red;
    display: inline-block;
    float: left;
    clear: right; /*右侧不允许浮动*/
}
.layer2{
    border: 1px  solid blue;
    display: inline-block;
    float: right;
    /*clear: left;    !*左侧不允许浮动*!*/
    overflow: auto;
}
.layer3{
    border: 3px  solid [[d300ff]];
    display: inline-block;
    float: left;
    font-size: 72px;
    /*clear: both; !*;两侧不允许浮动*!*/
}
.float{
    clear: both;
    margin: 0;
    padding: 0;
}
6.5.3.overflow⇒简单,在下拉和不能被切除的场景避免使用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    [[content]]{
        width: 500px;
        height: 500px;
        border: 5px solid aqua;
        overflow: scroll;	/*滚动框*/
    }
  </style>
</head>
<body>
 
<div id="content">
  <img src="../../img/tx.jpg" alt="">
  <p>
    CSS overflow 属性用于控制内容溢出元素框时显示的方式。
    CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。
  </p>
</div>
</body>
</html>
6.5.4.父类后添加一个伪类⇒after(推荐)
[[picture]]:after{
    border: 2px solid green;
    content: "";
    display: block;
    clear: both;
}

7.定位(Position)

7.1.相对定位(relative)⇒相对于原来的位置进行指定偏移
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [[box]]{
            width: 300px;
            height: 300px;
            padding: 10px;
            border: 3px solid blue;
        }
        a{
            width: 100px;
            height: 100px;
            text-decoration: none;
            line-height: 100px;
            text-align: center;
            color: white;
            background: [[d300ff]];
            display: block;
        }
        a:hover{
            background: deepskyblue;
        }
        .a2,.a4{
            position: relative;
            left: 200px;
            top: -100px;
        }
        .a5{
            background: [[1df861]];
            position: relative;
            left: 100px;
            top: -300px;
        }
    </style>
</head>
<body>
<div id="box">
    <a class="a1" href="#">链接1</a>
    <a class="a2" href="#">链接2</a>
    <a class="a3" href="#">链接3</a>
    <a class="a4" href="#">链接4</a>
    <a class="a5" href="#">链接5</a>
</div>
</body>
</html>
7.2.绝对定位⇒没有父级元素的情况下,相对于浏览器定位; 假设父级元素存在定位,通常相对于父级元素偏移
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            padding: 20px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 36px;
            line-height: 25px;
        }
        [[father]]{
            border: 5px solid red;
            content: "";
            display: block;
            clear: both;
        }
        [[first]]{
            border: 3px solid deepskyblue;
            background-color: [[d300ff]];
            position: absolute;
            top: -10px;
            left: 10px;
        }
        [[second]]{
            border: 3px dashed springgreen;
            background-color: [[2be1c8]];
            position: absolute;
            right: -10px;
            bottom: 10px;
        }
        [[third]]{
            border: 3px solid [[ecbd04]];
            background-color: [[55e371]];
 
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>
7.3. 固定定位
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    body{
 
    }
    div:nth-of-type(1){
      width: 100px;
      height: 100px;
      background: [[d300ff]];
      position: absolute;
      right: 0;
      bottom: 0;
    }
    div:nth-of-type(2){
      width: 50px;
      height: 50px;
      background: [[2be1c8]];
      position: fixed; /*固定定位*/
      right: 0;
      bottom: 0;
    }
  </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>
7.4. z-index及透明度
ul,li{
    padding: 0;
    margin: 0;
    list-style: none;
}
[[content]]{
    width: 500px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-size: 12px;
    line-height: 50px;
    border: 3px solid deepskyblue;
}
/*父级元素相对定位*/
[[content]] ul{
    position: relative;
}
.tipText , .tipBg{
    position: absolute;
    width: 100px;
    height: 35px;
    top: 450px;
}
.tipText{
    color: deepskyblue;
}
.tipBg{
    background: #000;
    opacity: 0.1; /*透明度 两种方法表示等价*/
    filter: alpha(opacity=10);
}