web基础

最新推荐文章于 2023-11-30 15:06:15 发布

猪鼻龟同学

最新推荐文章于 2023-11-30 15:06:15 发布

阅读量1.4k

点赞数

分类专栏： Java基础文章标签： html c语言

本文链接：https://blog.csdn.net/weixin_45135434/article/details/112252612

版权

Java基础专栏收录该内容

9 篇文章 1 订阅

订阅专栏

文章目录

一、HTML5
二、CSS3
三、JS

一、HTML5

1.1HTML5常见元素与属性

1.1.1基本元素

h1-h6: 标题1-标题6，块级元素
p：段落，块级元素，段前段后间距
span：一段文字，内联元素，不换行
font：字体标签，内联
hr：一条水平线，块级
div：盒子，容器，文档的节，主要用于页面布局，块级，它可以容纳很多其他元素

内联元素：span、font 块级元素：h标签、p、hr、div

1.1.2 文本格式化元素

b/strong：加粗
i/em：斜体
small：小号文本
big：大号文本
sup：上标文本
sub：下标文本
bdo：文本方向 dir属性来标记文本方向 ltr rtl

常见的转义字符

<：<
>：>
 ：空格
¥：￥
"："
÷：÷
©：©
®: ®
&amp:&

1.1.3 语义相关元素

abbr：缩写，用title属性来标记全称
address：地址，块级元素
blockquote：长段引用，用cite属性标记引用的出处块级元素
q：短引用，用cite属性标记引用的出处，默认加双引号
cite：表示作品的名称
code：表示一段代码块级
pre：预格式化块级
kbd：键盘录入标记
dfn：专业术语
var：变量标签
del：删除文本
ins：插入文本

<!DOCTYPE html>
  <html>
      <head>
          <title>03语义相关元素</title>
          <meta http-equiv="Content-Type" content="text/html;charset=gbk">
      </head>
      <body>
          <abbr title="西安鸥鹏互联科技有限公司">西安鸥鹏</abbr><br>
          西安鸥鹏的地址是<address>陕西省西安市自力大厦</address>
          呵呵呵<br>
          <blockquote>
              北国风光，千里冰封，万里雪飘，望长城内外，惟余莽莽，大河上下，顿失滔滔，山舞银蛇，原驰蜡象，欲与天公试比高，须晴日，看红装素裹，分外妖娆，江山如此多娇，引无数英雄竞折腰，惜秦皇汉武，略输文采，唐宗宋祖，稍逊风骚，一代天骄，成吉思汗，只识弯弓射大雕，俱往矣，数风流人物，还看今朝。
          </blockquote>
          <q>Java很好学，呵呵~</q>
          上述话是<cite>xxx</cite>说的
          <br>
          <code>
              #include&lt;stdio.h&gt;<br>
              void main(){<br>
              &nbsp;&nbsp;&nbsp;&nbsp;printf("HelloWorld!");<br>
              }
          </code>
          <pre>
              #include&lt;stdio.h&gt;
              void main(){
                  printf("HelloWorld!");
              }
          </pre>
          呵呵
          众所周知<kbd>ctrl + c</kbd>是复制<br>
          在Linux中<kbd>list -l</kbd>显示当前目录的信息<br>
          <dfn>HTML</dfn>是超文本标记语言<br>
          <var>i</var>+<var>j</var>=10
          在Java多线程中，<del>stop()</del>方法已经过时，推荐使用<ins>interrupt()</ins>
      </body>
  </html>

1.1.4块级元素和内联元素

块级元素
- h1~h6
- p
- hr
- div
- address
- blockquote
- code
- pre
内联元素
- span
- font
- abbr
- q
- cite
- kbd
- dfn
- var
- del
- ins

1.1.5超链接和锚点

只有一个标签<a>,有如下几个重要的属性：

href：所链接到的资源，可以是本地的，也可以是互联网上的
target：新链接的打开方式，_self，_blank
media：媒体类型

1.1.6 列表相关元素

ul：无序列表
- type属性：circle、disc、square
ol：有序列表
- type属性：1，A，I
- start：起始编号
li：有序和无序列表的子选项
dl：自定列表
dt：自定义分类
dd：自定义的选项

<!DOCTYPE html>
<html>
    <head>
        <title>05列表相关</title>
        <meta http-equiv="Content-Type" content="text/html;charset=gbk">
    </head>
    <body>
       <ul type="square">
           <li>java</li>
           <li>C++</li>
           <li>Python</li>
       </ul>
       <ol type="I" start="2">
            <li>java</li>
            <li>C++</li>
            <li>Python</li>
            <li>java</li>
            <li>C++</li>
            <li>Python</li>
       </ol>
       <dl>
           <dt>宇智波家族有谁：</dt>
                <dd>啥是gay</dd>
                <dd>一打七</dd>
                <dd>马达拉</dd>
           <dt>千手家族有谁：</dt>
                <dd>大奶牛</dd>
                <dd>哈希他妈</dd>
       </dl>
    </body>
</html>

1.1.7 图形图形相关元素

img标签主要用于表示一个图像，有这么几个重要的属性：

src：图片的路径可以是本地的可以是网络上的
width：宽度
height：高度
alt：如果图片加载不出来，则用alt文本表示
title：图片的文字说明
bodder：边框

1.1.8 表格相关元素

table：表示表格的标签，最多有一个caption表格标题，最多有一个theader表头，最多有一个tfoot表尾，多个tr行，多个td单元格，多个th加粗的tr
- cellspacing：单元格与单元格之间的间距
- cellpadding：单元格内的内边距
- width：表格的宽度
- align：表格内容的对齐方式
- bgcolor：表格的背景颜色
- background：表格的背景图片
caption：表格的标题
tr：表格的行
td：表格的单元格
- rowspan：跨行
- colspan：跨列
- height：高度
- width：宽度
th：页眉单元格
tbody：表格的主体部分
thead：表头
tfoot：表尾

练习1

题目

在这里插入图片描述

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>豆瓣电影</title>
		<style type="text/css">
			ul{
				width: 100%;
				height: 100%;
			}
			ul li{
				margin: 4px;
				list-style-type: none;
				float: left;
				width: 24%;
				height: 400px;
			}
			li p:first-of-type{
				width: 100%;
				height: 80%;
			}
			img{
				width:100%;
				height: 100%;
			}
			p{
				text-align: center;
			}
			.daohang{
				text-align: left;
			}
			body div{
				padding: 10px;
			}
			p span:first-of-type{
				font-size: 20px;
				color: black;
				font-weight: bold;
			}
			p span{
				margin: 30px;
			}
			p span:last-of-type{
				left: auto;
			}
			hr{
				color: gray;
			}
		</style>
	</head>
	<body>
		<div>
			<h2>热门电影板块</h2>
			<hr>
			<p class="daohang"><span>最近热门电影</span> <span>热门</span> <span>最新</span> <span>豆瓣高分</span> <span>冷门佳片</span> <span>华语佳片</span> <span>华语</span> <span>欧美</span> <span>韩国</span> <span>更多&gt;&gt;</span></p>
			<hr>
		</div>
		<div class="neirong">
			<ul>
				<li>
					<p><img src="img/chc.jpg"></p>
					<p>猜火车 8.1</p>
				</li>
				<li>
					<p><img src="img/brk.jpg"></p>
					<p>贝尔克实验室 6.0</p>
				</li>
				<li>
					<p><img src="img/jzglxj.jpg"></p>
					<p>加州公路巡警 6.8</p>
				</li>
				<li>
					<p><img src="img/gsbj.jpg"></p>
					<p>歌声不绝6.3</p>
				</li>
				<li>
					<p><img src="img/mrdw.jpg"></p>
					<p>明日的我与昨日的我</p>
				</li>
				<li>
					<p><img src="img/sdyjq.jpg"></p>
					<p>速度与激情8</p>
				</li>
				<li>
					<p><img src="./img/jstg.jpg"></p>
					<p>极速特工</p>
				</li>
				<li>
					<p><img src="img/jgl.webp"></p>
					<p>金刚狼3：殊死一战</p>
				</li>
			</ul>
		</div>
	</body>
</html>

练习2

题目
在这里插入图片描述
代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>07表格练习</title>
		<style type="text/css">
			table{
				width: 1000px;
				color: gray;
			}
			.b{
				font-weight: bold;
				color: #000000;
				font-size: 18px;
			}
			td{
				padding: 5px;
			}
		</style>
	</head>
	<body>
		<table border="1px" cellspacing="0" cellpadding="3">
			<colgroup>
				<col width="30px">
				<col width="65px">
				<col width="400px">
				<col width="30px">
				<col width="65px">
				<col width="400px">
			</colgroup>
			<caption style="font-size: 30px; font-weight: bold;text-align: left; color: #000000;">工商银行电子汇款单</caption>
			<tr>
				<td colspan="2" class="b">回单类型</td>
				<td>网上转账汇款</td>
				<td colspan="2" class="b">指令序号</td>
				<td>HQH000000000000000013878172</td>
			</tr>
			<tr>
				<td rowspan="4" class="b">收款人</td>
				<td>户名</td>
				<td>老牟</td>
				<td rowspan="4" class="b">付款人</td>
				<td>户名</td>
				<td>老刘</td>
			</tr>
			<tr>
				<td class="b">卡号</td>
				<td>0000000000001</td>
				<td class="b">卡号</td>
				<td>0000000000002</td>
			</tr>
			<tr>
				<td>地区</td>
				<td>南京</td>
				<td>地区</td>
				<td>杭州</td>
			</tr>
			<tr>
				<td class="b">网点</td>
				<td>工商江苏南京业务处理中心</td>
				<td class="b">网点</td>
				<td>江苏徐州业务中心</td>
			</tr>
			<tr>
				<td colspan="2" class="b">币种</td>
				<td>人民币</td>
				<td colspan="2" class="b">钞汇标准</td>
				<td>钞票</td>
			</tr>
			<tr>
				<td colspan="2" class="b">金额</td>
				<td>1.00元</td>
				<td colspan="2" class="b">手续费</td>
				<td>0.57元</td>
			</tr>
			<tr>
				<td colspan="2" class="b">合计</td>
				<td colspan="4">人民币（大写）：壹元整</td>
			</tr>
			<tr>
				<td colspan="2" class="b">交易时间</td>
				<td>2017年6月1日</td>
				<td colspan="2" class="b">时间戳</td>
				<td>2017-06-01-13.00.00.00000</td>
			</tr>
		</table>
		<p>票据打印时间：2017-06-01 15：00：12</p>
		<p><del>票据打印单位：江苏徐州业务中心</del></p>
		<p>操作员：大曾</p>
	</body>
</html>

1.1.9 表单相关元素

之前所说的标签元素，都是以展示数据为主，为了增强网页的交互效果，让用户从网页上提交一些数据给服务器，就需要表单相关的元素

form标签：表单标签，form当中的其他控件当做整体去提交给我们的服务器的。

对于form的属性而言：

action属性：我们将表单的数据提交到哪里去？一般会去提交到服务器上的一个专门处理数据提交的文件。
method属性：数据的提交方式，post和get。get提交的数据是明文的，post提交的数据经过封装的。

常见的一些控件

input：其中有type属性，type属性的不同，则会导致input表现的形式也会不同
- text：文本框
- password：密码框
- radio：单选框
- checkbox：复选框
- submit：提交按钮
- reset：重置按钮
- button：按钮
- image：图像
- file：文件上传
select
textarea

使用label标签

扩大当前控件的点击空间，当前控件+文字说明

			<label for="username">单行文本框:</label>
			<input id="username" type="text" placeholder="请输入XXX"><br>
			不可编辑的文本框:<input type="text" readonly><br>
			<label>密码框：<input type="password"><br></label>
			隐藏文本框：<input type="hidden"><br>
			第一组单选框：<br>
			<label><input type="radio" name="wife">迪丽热巴</label><br>
			<label><input type="radio" name="wife">哈妮克孜</label><br>
			<label><input type="radio" name="wife">马尔扎哈</label><br>

select标签下拉框

			<!--展开+多选-->
			<select name="高级编程语言" multiple size="3">
				<option>Java</option>
				<option>C++</option>
				<option>Python</option>
				<option>Java</option>
				<option>C++</option>
				<option>Python</option>
				<option>Java</option>
				<option>C++</option>
				<option>Python</option>
			</select>
			<br>
			<select name="城市选择" >
				<optgroup label="西安">
					<option value="高新区">高新区</option>
					<option value="雁塔区">雁塔区</option>
					<option value="碑林区">碑林区</option>
				</optgroup>
				<optgroup label="咸阳">
					<option value="渭城区" selected>渭城区</option>
					<option value="秦都区">秦都区</option>
				</optgroup>
			</select>

textarea标签

用于输入一段文字的

cols：横向的宽度
rows：纵向的高度

			<textarea cols="50" rows="50">

			</textarea>

HTML5新增的一些表单属性

placeholder：作为文本框的输入提示
autofocus:自动获取焦点
required：提交后的检查，必须填写
list：是将下拉框和文本框进行结合

<form>
	请输入书名:<input type="text" list="books"><br>
	</form>
	<datalist id="books">
		<option>Java从入门到放弃</option>
		<option>深入浅出Java</option>
		<option>7天精通Java</option>
	</datalist>

HTML5新增的一些input的类型

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=gbk">
		<title>02新增input类型</title>
	</head>
	<body>
		<form action="#" method="get">
        选择颜色：<input type="color"><br>
        选择日期：<input type="date"><br>
        选择时间：<input type="time"><br>
        选择月份：<input type="month"><br>
        选择周期：<input type="week"><br>

        <!--输入类型检测 在提交数据的时候检测-->
        检测邮箱：<input type="email"><br>
        检测网址：<input type="url"><br>
        
        选择数字：<input type="number"><br>
        选择区间：<input type="range"><br>
        <button type="submit">提交</button>
        </form>
    </body>
</html>

1.2 HTML5 新增的属性

1.2.1 contentEditable属性

将那些原本不可编辑的元素，变成可编辑的状态，该属性具有继承性，上层元素如果定义了该属性，则下层元素都可被编辑

 <div contenteditable="true">

1.2.2 designMode属性

相当于全局的contentEditable属性，designMode不属于html中的属性，在js中调用

	<body ondblclick="document.designMode='on'">

1.2.3 hidden属性

隐藏属性

<button onclick="var target=document.getElementById('target');target.hidden=!target.hidden">显示/隐藏</button>

1.2.4 spellcheck属性

拼写检查，主要用于输入框

        <textarea cols="10" rows="10" spellcheck="true">

        </textarea>

1.3 HTML5新增常用元素

1.3.1 文档结构元素

article：表示一遍独立的文章
- 内部用header来表示标题
- 内部用footer表示脚注
- 内部用section表示段落/文章
- 内部用article表示回复的文章
section：文章的段落
nav：导航栏
aside：附属信息
header：文章头部信息
footer：文章脚注信息
figure：表示一块独立的图片区域，可以包含多image图片
figcation：图片区域的标题

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=gbk">
	</head>
	<body>
        <!--一篇独立的文章-->
        <article>
            <header>
                <h1>高考750分和750w那个重要？</h1>
                <div>作者:HENG</div>
            </header>
            <p>
                一年前，你选了750分，我选了750万人民币。<br>
                11个月前，你成为全国家喻户晓的考神；我成为鼠目寸光的笑柄。
            </p>
            <!--第一个回答-->
            <section>
                <article>
                    <header>
                        <h3>我觉得750分很重要</h3>
                        <div>作者：啦啦</div>
                    </header>
                    <p>
                        高考750，如果是裸分，你将会是历史上第一个真正高考拿满的人，<br>
                        这样的奇迹在几百年内也很难说会再次出现。<br>
                        你会立刻登顶各平台热搜榜，全国人民愿称你为真正的考神，<br>
                        几十年后营销号还会不依不饶拿你开刀。拥有这样的流量，<br>
                        你的潜在财富难道没有750w吗？高考750，<br>
                        意味着你拥有一颗极其聪明而严谨的大脑，<br>
                        能够拿下所有难题并且保证细节上也不丢一分，<br>
                        还能写出满分语文和英语作文。拥有这样强大的大脑，<br>
                        你难道想不出几百种办法去赚够750w吗？
                    </p>
                </article>
            </section>
            <!--第二个回答-->
            <section>
                <article>
                    <header>
                        <h3>我觉得750w很重要</h3>
                        <div>作者：嘻嘻</div>
                    </header>
                    <p>
                        当然是考750分的能力。我考了750分，肯定成网红。<br>
                        <img width=200px src="https://pic1.zhimg.com/80/v2-9841b837264cd8eda4ba282193bae9f0_1440w.jpg?source=1940ef5c">
                    </p>
                </article>
            </section>
            <footer>
                以上言论仅代表作者自身观点，与本平台无关！
            </footer>
            <aside>
                <h3>关于楼主</h3>
                <section>
                    <div>用户组：管理员</div>
                    <div>注册日期：2020-02-02</div>
                </section>
            </aside>
        </article>
        <aside>
            <h3>页面导航</h3>
            <nav>
                <ul>
                    <li><a href="http://www.baidu.com">首页</a></li>
                    <li><a href="http://www.baidu.com">最新</a></li>
                    <li><a href="http://www.baidu.com">热门</a></li>
                </ul>
            </nav>
        </aside>
        <figure style="border: 2px solid black;padding:5px;width:500px;">
            <figcaption>我的媳妇们</figcaption>
            <img src="logo.jpg">
            <img src="logo.jpg">
            <img src="logo.jpg">
        </figure>
    </body>
</html>

1.3.2 语义相关元素

mark：重点标记
meter：已知最大值和最小值的计数器
- value属性：当前值
- min：最小值
- max：最大值
- low：最小范围
- high：最大范围
- optimum：最佳范围
progress：进度条
- max：最大值
- value：当前值

二、CSS3

Cascading Style Sheet 层叠样式表CSS：负责显示逻辑

Hyper Text Marked Language 超文本标记语言HTML：负责数据逻辑

CSS主要有两大类的功能：

对页面的字体、颜色、外观控制的非常细腻，让网页更加有活力
通过CSS来控制整个网页的风格

CSS可以向HTML一样单独成文件使用，xxx.css，或者嵌入到html当中使用

2.1 CSS样式表的基本使用

2.1.1 链接外部样式文件

通过link标签将外部的css文件导入到我们当前的html文件中。

好处：将数据和显示分离，同一份css文件也可以被多个html共用。

坏处：浏览器先加载数据信息，再读取数据信息中的link标签，再加载link所导入的文件，相对而言比较慢

2.1.2 导入外部样式文件

通过@import导入，但是不推荐这么使用，有些浏览器不支持此操作的。

        <style>
            @import url("outer.css");
        </style>

2.1.3 使用内部样式定义

好处：统一加载，相对较快

坏处：数据和样式揉在一起，不方便管理，而且css样式也不方便变共享

2.1.4 使用内联样式

直接写在相对应的标签style属性中

坏处：冗余过大

好处：针对性最强，总有几个特别的不跟大部队走

2.2 CSS选择器

名称 {
	属性：属性值;
	...
}

选择器的作用是啥？指定符合要求的一些元素进行样式的变化

标签名 {
	属性：属性值;
	...
}

2.2.2 属性选择器

根据标签中属性的特点来进行选择的

<!DOCTYPE html>
<html>
	<head>
        <meta http-equiv="Content-Type" content="text/html;charset=gbk">
        <link href="outer.css" rel="stylesheet" type="text/css">
        <style>
            /*所有的div们*/
            div {
                width: 300px;
                height: 30px;
                background-color: #eee;
                border: 1px solid black;
                padding: 10px;
            }
            /*具有id属性的div们*/
            div[id] {
                background-color: #aaa;
            }
            /*具有id属性且id属性值中包含xx的div们*/
            div[id*=xx] {
                background-color: #999;
            }
            /*具有id属性且id属性值中以xx开头的div们*/
            div[id^=xx] {
                background-color: #555;
            }
            /*具有id属性且id属性值中以xx结尾的div们*/
            div[id$=xx] {
                background-color: #333;
            }
            /*具有id属性且id属性值等于xx的div们*/
            div[id=xx] {
                background-color: #111;
                color: aliceblue;
            }
        </style>
    </head>
	<body>
        <div>没有任何属性的div</div>
        <div id="a">带id属性的div 属性和xx无关</div>
        <div id="zzxxyy">带id属性但包含xx的div</div>
        <div id="xxyy">带id属性且以xx开头的div</div>
        <div id="zzxx">带id属性且以xx结尾的div</div>
        <div id = "xx">带id属性且等于xx的div</div>
    </body>
</html>

2.2.3 id选择器

通过id值来进行选择

2.2.4 类选择器

类选择器主要看的是class属性，基本上每个标签都有id、class、style属性

2.2.5 包含选择器

指的是在某一个元素之下的所有元素的选择

2.2.6 子选择器

父子关系

<!DOCTYPE html>
<html>
	<head>
        <meta http-equiv="Content-Type" content="text/html;charset=gbk">
        <style>
            div {
                width: 350px;
                height: 60px;
                background-color: #ddd;
                margin: 5px;
            }
            /*div标签下所有class属性为a的子标签*/
            div>.a {
                width: 200px;
                height: 35px;
                border: 1px dotted black;
                background-color: #888;
            }
            /*div标签下所有span子标签*/
            div>span{
                font-family: "楷体";
                font-size: 20px;
                background-color: aqua;
            }
        </style>
    </head>
	<body>
        <div>
            <p class="a">
                我是div中的p class为a
            </p>
        </div>
        <div>
            <section>
                <p class="a">
                    我是div中的seciton中的p class为a
                </p>
            </section>
        </div>
        <div>
            <span>我是span1</span>
            <span>我是span2</span>
            <p>
                <span>我是span3</span>
            </p>
        </div>
    </body>
</html>

2.2.7 兄弟选择器

同级别

<!DOCTYPE html>
<html>
	<head>
        <meta http-equiv="Content-Type" content="text/html;charset=gbk">
        <style>
            #android ~ .long {
                background-color: khaki;
            }
        </style>
    </head>
	<body>
        <div class="long">呵呵1</div>
        <div id="android">呵呵2</div>
        <div class="long">呵呵3</div>
        <p class="long">呵呵4</p>
        <p class="long">呵呵5</p>
    </body>
</html>

2.2.8 选择器组合

<!DOCTYPE html>
<html>
	<head>
        <meta http-equiv="Content-Type" content="text/html;charset=gbk">
        <style>
            div , #xx , .myclass {
                width: 200px;
                height: 20px;
                background-color: aquamarine;
            }
        </style>
    </head>
	<body>
        <div>div</div>
        <p id="xx">p</p>
        <span class="myclass">span</span>
    </body>
</html>

2.2.9 伪元素选择器

不是元素，但是也可被更改的一些内容

:first-letter：首字母，只针对块级元素，如果要使用到内联元素上，要么指定宽高，要么将position属性设置为absolute、或者将display属性定义为block
:first-line：首行，只针对块级元素，如果要使用到内联元素上，要么指定宽高，要么将position属性设置为absolute、或者将display属性定义为block
:before：在元素之前
:after：在元素之后

变首字母的

<!DOCTYPE html>
<html>
	<head>
        <meta http-equiv="Content-Type" content="text/html;charset=gbk">
        <style>
            span {
                display: block;
            }
            span::first-letter {
                color: #f00;
                font-size: 50px;
            }
            p::first-letter {
                color: #f00;
                font-size: 50px;
            }
        </style>
    </head>
	<body>
        <span>这是span</span>
        <p>这是p</p>
    </body>
</html>

变首行的

<!DOCTYPE html>
<html>
	<head>
        <meta http-equiv="Content-Type" content="text/html;charset=gbk">
        <style>
            span {
                display: block;
            }
            span::first-line {
                color: #f00;
                font-size: 50px;
            }
            p::first-line {
                color: #f00;
                font-size: 50px;
            }
        </style>
    </head>
	<body>
        <span>这是span第一行<br>第二行</span>
        <p>这是p第一行<br>第二行</p>
    </body>
</html>

before与after结合content属性来使用

<!DOCTYPE html>
<html>
	<head>
        <meta http-equiv="Content-Type" content="text/html;charset=gbk">
        <style>
            div::before {
                content:"这是一个div"
            }
            div::after {
                content: url("logo.jpg");
            }
            div>div.no:after {
                content:"牛B Plus";
            }
            p {
                counter-increment: pcounter;
            }
            p::before {
                content: "第" counter(pcounter) "页";
            }
            p::after {
                content: counter(pcounter,lower-roman);
            }
            /*decimal lower-alpha lower-roman upper-xx*/
        </style>
    </head>
	<body>
        <div>div01</div>
        <div>div02</div>
        <div>div03</div>
        <div>
            <div class="no">
                是不是我？
            </div>
        </div>
        <p>这是第1端</p>
        <p>这是第2端</p>
        <p>这是第3端</p>
        <p>这是第4端</p>
    </body>
</html>

2.2.10 伪类选择器

标签的状态！

:link：超链接点击之前
:visited：超链接访问之后
:hover：鼠标悬浮的时候
:active：当点击的时候
:focus：当获取焦点时

2.3 文字与文本相关属性

2.3.1 文字相关属性

color：文字的颜色
font-family：文字的字体
font-size：文字的大小 px或pt（打印机模式下的单位）
font-weight：文字的加粗
- lighter：细的
- normal：普通的默认的
- bold：加粗
- bolder：更粗
- 设置数值
font-decoration：文字划线
- none无样式
- underline下划线
- line-through：中划线
- overline：上划线
- blink：闪烁（目前的浏览器不太支持了）
font-style：文字的样式
text-shadow：文字的阴影复合属性
- color：阴影颜色
- xoffset：阴影横向的偏移量正值向右
- yoffset：阴影纵向的偏移量正值向下
- radius：阴影的模糊程度
text-transform：文字的大小写（英文）
- none默认
- capitalize：首字母大写
- uppercase：所有字母大写
- lowercase：所有字母小写
line-height：文字的行高
letter-spacing：字符之间的间距
word-spacing：单词之间的间距

2.3.2 文本相关属性

text-indent：文本的缩进
text-overflow：文本溢出
- clip溢出剪裁，前提overflow：hidden
- ellipse溢出剪裁，剪裁的部分用…表示，前提overflow：hidden
vertical-align：垂直对齐方式
- auto：自动对齐
- baseline：基线对齐
- sub：与文本下标对齐
- super：与文本上标对齐
- top：顶端对齐
- middle：中间对齐
- bottom：低端对齐
- length：偏移距离
text-align：水平对齐方式
- left
- right
- center
- justify两端对齐
work-break：文本换行方式
- normal：依赖于浏览器的换行行为
- keep-all：只能在半角空格或连字符地方换行
- break-all：允许在单词中间换行
white-space：空格处理方式-什么是是否换行
- normal：默认，到达容器边界再换行
- nowrap：强制在同一行直至结束，如果遇到<br>再换行

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html;charset=gbk">
        <style>
            div {
                border: 1px solid red;
                width: 200px;
                height: 50px;
                font-size: 15px;
            }
        </style>
    </head>
    <body>
        <div>
            测试文字，测试文字，测试文字，测试文字
        </div>
        <div style="text-indent: 20px;">
            测试文字，测试文字，测试文字，测试文字
        </div>
        <div style="text-align: left;">
            测试文字，测试文字，测试文字，测试文字
        </div>
        <div style="text-align: center;">
            测试文字，测试文字，测试文字，测试文字
        </div>
        <div style="text-align: right;">
            测试文字，测试文字，测试文字，测试文字
        </div>
        <div style="white-space: normal;">
            测试文字，测试文字，测试文字，测试文字
        </div>
        <div style="white-space: nowrap;">
            测试文字，测试文字，测试文字，测试文字
        </div>
        <div style="white-space: nowrap;overflow:hidden;text-overflow: clip;">
            测试文字，测试文字，测试文字，测试文字
        </div>
        <div style="white-space: nowrap;overflow:hidden;text-overflow: ellipsis;">
            测试文字，测试文字，测试文字，测试文字
        </div>
        <div style="word-break: keep-all;">
            Hello everybody,my name is zhangsan. I'm your teacher for Web technology class.
        </div>
        <div style="word-break: break-all;margin-top: 50px;">
            Hello everybody,my name is zhangsan. I'm your teacher for Web technology class.
        </div>
    </body>
</html>

2.4 背景与边框相关属性

2.4.1 背景相关属性

background：是一种复合属性，可以设置背景色，也可以设置背景图，还可以设置背景图重复模式
background-color：背景色
background-image：背景图
background-attachment：背景图是否可以滚动
- scroll：滚动
- fixed：固定
background-position：背景图的位置
background-repeat：平铺
- repeat横纵平铺
- no-repeat不平铺
- repeat-x：横向平铺
- repeat-y：纵向平铺

新增的几个属性

background-clip：背景的覆盖范围
- border-box：覆盖有边框内边距内容
- no-clip：同上
- padding-box：内边距内容
- content-box：内容
background-origin：背景覆盖的开始
- border：从边框开始
- padding：从内边距开始
- content：从内容开始
background-size：背景图片的大小

多背景的设置

<style>
            div {
                border: 1px solid red;
                height: 200px;
                width: 200px;
                background-image: url(logo.jpg),url(bg.jpg);
                background-repeat: no-repeat,no-repeat;
                background-position: center center,left center;
                background-size: 50% 50%, 80% 80%;

            }
 </style>

2.4.2 边框相关属性

border：复合属性可以设置边框粗细、线型、颜色
border-width
border-style
- none
- hidden
- dotted 点
- dashed 虚线
- soild 实线
- double 双实线
- groove：3D凹槽
- ridge：3D凸槽
- inset：3D凹入
- outset：3D凸出
border-color
border-top|right|left|bottom-width|style|color

2.5 表格与列表相关属性

2.5.1 表格相关属性

border-collapse：行货单元格边框的显示方式
- seperate分开
- collapse合并
border-spacing：单元格与单元格之间的距离前提是分开的
caption-side：表标题的位置 top bottom
empty-cells：单元格如果没有内容时是否显示
- show
- hide
table-layout：表格宽度的布局 auto自动 fixed固定

在fixed情况下：

通过col或colgroup设置宽度，表的宽度就是所有列宽度的总和
第一行所有单元格设置宽度，标的宽度就是第一行单元格宽度的总和
直接平均分配，忽略实际宽度

2.5.2 列表相关属性

list-style：符合属性
list-style-image：让列表编号以图片显示
list-style-position：编号的位置是在元素之前 outside 在元素之内inside
list-style-type：列表编号文字样式

2.5.3 控制光标相关属性

cursor：用户控制鼠标的样式

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html;charset=gbk">
        <style>
            div {
                display: inline-block;
                border: 1px solid black;
                width: 100px;
                height: 50px;
            }
        </style>
    </head>
    <body>
        <div style="cursor: all-scroll;">
            十字箭头
        </div>
        <div style="cursor: col-resize;">
            列拉伸
        </div>
        <div style="cursor: crosshair;">
            十字
        </div>
        <div style="cursor: move;">
            移动箭头
        </div>
        <div style="cursor: help;">
            求助问号
        </div>
        <div style="cursor:no-drop">
            禁止拖拽
        </div>
        <div style="cursor:not-allowed">
            不允许-禁止
        </div>
        <div style="cursor:pointer">
            手指
        </div>
        <div style="cursor:progress">
            圆圈进度
        </div>
        <div style="cursor:row-resize">
            水平拉伸
        </div>
        <div style="cursor:text">
            插入文本
        </div>
        <div style="cursor:vertical-text">
            垂直插入文本
        </div>
        <div style="cursor:wait">
            圆圈进度
        </div>
        <div style="cursor:n-resize">
            南北拉伸
        </div>
        <div style="cursor:ne-resize">
            东北拉伸
        </div>
        <div style="cursor:se-resize">
            东南拉伸
        </div>
    </body>
</html>

2.6 变形与动画相关属性

2.6.1 变形相关属性

主要用于控制组件的旋转、位移、倾斜、缩放，也可以使用矩阵来进行变形处理

transform：设置变形
- translate(tx,ty)：设置位移，组件从当前位置横向移动tx 纵向移动ty，ty值可以忽略，横纵移动都是tx
- translateX(tx)
- translateY(ty)
- scale(sx,sy)：设置缩放，sy可以忽略，默认都是sx
- scaleX(sx)
- scaleY(sy)
- skew(sx,sy)：设置倾斜，sx和sy都是角度值，sy可以忽略默认是sx
- skewX(sx)
- skewY(sy)
- rotate(angle)：旋转angle角度
transform-origin：变形的基点

2.6.2 Transition动画属性

控制组件的某个属性发生改变时，会经历一段时间来进行变化，这个过程Transition动画-补间动画

transition-property：针对的属性
transition-duration：变化的时长
transition-timing-function：渐变速度
- ease：慢-快-慢
- linear：匀速
- ease-in：慢-快
- ease-out：快-慢
- cubic-bezier(x1,y1,x2,y2)：贝奇挨曲线控制
transition-delay：延迟时间

<html>
    <head>
        <meta http-equiv="Content-type" content="text/html;charset=gbk">
        <style>
            div {
                width: 100px;
                height: 100px;
                border: 1px solid red;
                background-color: green;
                margin: 10px;
                transition: background-color 3s cubic-bezier(0.075, 0.82, 0.165, 1);
            }
            div:hover {
                background-color: yellow;
            }
            img {
                position: absolute;
                transition: left 3s linear , top 3s linear;
            }
            p {
                width: 300px;
                height: 100px;
                background-color: red;
                transition: background-color 2s ease,width 2s ease,height 2s ease;
            }
        </style>
    </head>
    <body>
        <div>
            测试背景颜色的动画
        </div>
        <img id="aim" src = "logo.jpg">
        <script>
            //先找到图片标签这个对象
            var aim = document.getElementById("aim");
            aim.style.left = "0px";
            aim.style.top = "0px";
            //设置全局的点击事件
            document.onmousedown = function(evt) {
                aim.style.left = evt.pageX + "px";
                aim.style.top = evt.pageY + "px";
            }
        </script>
        <p id = "lala">
            测试三个属性的动画效果
        </p>
        <script>
            var originWidth = 300;
            var originHeight = 100;
            var lala = document.getElementById("lala");
            var zoom = function(scale,bgColor) {
                lala.style.width = originWidth * scale + "px";
                lala.style.height = originHeight * scale + "px";
                lala.style.backgroundColor = bgColor;
            }
        </script>
        <button onclick="zoom(1.5,'blue')">放大</button>
        <button onclick="zoom(0.5,'yellow')">缩小</button>
        <button onclick="zoom(1.0,'red')">恢复</button>
    </body>
</html>

2.6.3 Animation动画属性

设置动画的每一帧

<html>
    <head>
        <meta http-equiv="Content-type" content="text/html;charset=gbk">
        <style>
            @keyframes animation01 {
                0% {
                    left: 100px;
                }
                10% {
                    left: 150px;
                }
                20% {
                    left: 75px;
                }
                30% {
                    left: 150px;
                }
                40% {
                    left: 75px;
                }
                50% {
                    left: 150px;
                }
                60% {
                    left: 75px;
                }
                70% {
                    left: 150px;
                }
                80% {
                    left: 75px;
                }
                100% {
                    left:100px;
                }
            }
            div {
                background-color: gray;
                border: 1px solid red;
                position: absolute;
                left: 100px;
                width: 200px;
                height: 60px;
            }
            div:hover {
                animation-name: animation01;
                animation-duration: 3s;
                animation-iteration-count: infinite;
            }
            @keyframes animation02 {
                0% {
                    transform: rotate(0deg) scale(1);
                    background-color: #f00;
                }
                40% {
                    transform: rotate(720deg) scale(0.1);
                    background-color: #ff0;
                }
                60% {
                    transform: rotate(1080deg) scale(4);
                    background-color: #f0f;
                }
                100% {
                    transform: rotate(0deg) scale(1);
                    background-color: #f00;
                }
            }
            p {
                background-color: #f00;
                border: 1px solid black;
                width: 60px;
                height:60px;
            }
            p:hover {
                animation-name: animation02;
                animation-duration: 8s;
                animation-iteration-count: 1;
            }
        </style>
    </head>
    <body>
        <div>
            Animation01
        </div>
        <p>
            Animation02
        </p>
    </body>
</html>

2.7 盒子模型与布局相关属性

2.7.1 布局相关属性

float：控制目标组件是否浮动以及如何浮动，如果某一个组件被设置为浮动，则该组件当做块级元素处理。
- left：左浮动
- right：右浮动
clear：设置组件的左右是否允许出现其他浮动的对象
- none两边都允许
- left左边不允许出现
- right右边不允许出现
- bot两边都不允许出现
overflow：组件内容不够容纳时，剩下的内容如何处理
- visible默认不剪裁也不添加滚动条
- auto如果容纳不下自动添加滚动条
- hidden剪裁超出的部分
- scoll：总是显示出滚动条
overflow-x：控制水平方向上overflow
overflow-y：控制垂直方向上overflow
visibility：组件是否显示，若不显示时，其所占用的空间依旧存在
display：设置组件如何显示

浮动的问题

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset='gbk'">
        <style>
            div {
                border: 1px solid black;
                width: 300px;
                height: 80px;
                padding: 5px;
            }
        </style>
    </head>
    <body>
        <div style="float: left;">
            div元素1
        </div>
        <div style="float: left;">
            div元素2
        </div>
        <div style="float: right;">
            div元素3
        </div>
        <div style="float: right;">
            div元素4
        </div>
    </body>
</html>

用float属性实现多栏布局

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset='gbk'">
        <style>
            body {
                margin: 0;
            }
            div#container {
                width: 1080px;
                margin: auto;
            }
            div>div {
                border: 1px solid #aaf;
                box-sizing: border-box;
                border-radius: 15px 15px 0px 0px;
                background-color: #ffc;
                padding: 5px;
                margin: 10px;
            }

        </style>
    </head>
    <body>
        <div id="container">
        <div style="float: left;width: 220px;">
            <h2>第一栏</h2>
            <p>
                北国风光，千里冰封，万里雪飘，望长城内外，惟余莽莽，大河上下，顿失滔滔，山舞银蛇，原驰蜡象，欲与天公试比高，须晴日，看红装素裹，分外妖娆，江山如此多娇，引无数英雄竞折腰，惜秦皇汉武，略输文采，唐宗宋祖，稍逊风骚，一代天骄，成吉思汗，只识弯弓射大雕，俱往矣，数风流人物，还看今朝。
            </p>
        </div>
        <div style="float: left;width: 500px;">
            <h2>第二栏</h2>
            <ul>
                <li><a href="#">最热新闻</a></li>
                <li><a href="#">国内新闻</a></li>
                <li><a href="#">国际新闻</a></li>
                <li><a href="#">娱乐新闻</a></li>
            </ul>
        </div>
        <div style="float: left;width: 240px;">
            <h2>第三栏</h3>
            <figure>
                <figcaption>美女图片</figcaption>
                <img src="img/mv1.jpg" width="100px">
                <img src="img/mv2.jpg" width="100px">
                <img src="img/mv3.jpg" width="100px">
            </figure>
        </div>
    </div>
    </body>
</html>

clear属性实现换行

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset='gbk'">
        <style>
            div>div {
                width: 220px;
                padding: 5px;
                margin: 2px;
                float: left;
                background-color: #ddd;
            }

        </style>
    </head>
    <body>
        <div>
            <div>
                div元素1
            </div>
            <div>
                div元素2
            </div>
            <div style="clear: both;">
                div元素3
            </div>
            <div>
                div元素4
            </div>
        </div>
    </body>
</html>

滚动条的问题

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset='gbk'">
        <style>
            div>div {
                white-space: nowrap;
                width: 200px;
                height: 50px;
                padding: 5px;
                margin: 50px;
                background-color: #ddd;
            }

        </style>
    </head>
    <body>
        <div>
            <div>
                div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1<br>
                div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1<br>
                div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1<br>
                div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1<br>
            </div>
            <div style="overflow: hidden;">
                div元素2div元素2div元素2div元素2div元素2div元素2div元素2div元素2div元素2div元素2div元素2<br>
                div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1<br>
                div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1<br>
                div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1<br>
            </div>
            <div style="overflow: auto;">
                div元素3div元素3div元素3div元素3div元素3div元素3div元素3div元素3div元素3div元素3div元素3<br>
                div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1<br>
                div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1<br>
                div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1<br>
            </div>
            <div style="overflow-x: hidden;">
                div元素4div元素4div元素4div元素4div元素4div元素4div元素4div元素4div元素4div元素4<br>
                div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1<br>
                div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1<br>
                div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1<br>
            </div>
            <div style="overflow-y: hidden;">
                div元素4div元素4div元素4div元素4div元素4div元素4div元素4div元素4div元素4div元素4<br>
                div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1<br>
                div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1<br>
                div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1div元素1<br>
            </div>
        </div>
    </body>
</html>

2.7.2 盒子模型与display属性

两种最基本的盒子模型：

block：块级元素，占据一行，可以设置宽高 div p
inline：内联元素，不占据一行，多个内联元素在同一行，放不下则换行，不可以设置宽高 span a img

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset='gbk'">
    </head>
    <body>
        <div style="display: inline;">div元素</div>
        <div style="display: inline;">div元素</div>
        <span style="display: block;">span元素</span>
        <span style="display: block;">span元素</span>
    </body>
</html>

none值隐藏的

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset='gbk'">
        <style>
            div {
                width: 300px;
                height: 40px;
                background-color: #ddd;
                border:1px solid black;
            }
        </style>
    </head>
    <body>
        <div id="test1">
            div01
        </div>
        <input type="button" value="显示"
        onclick="document.getElementById('test1').style.display=''">
        <input type="button" value="隐藏"
        onclick="document.getElementById('test1').style.display='none'">
        <div id="test2">
            div02
        </div>
        <input type="button" value="显示"
        onclick="document.getElementById('test2').style.visibility='visible'">
        <input type="button" value="隐藏"
        onclick="document.getElementById('test2').style.visibility='hidden'">
    </body>
</html>

inline-block：不占据一行，但也可以设置宽高

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset='gbk'">
        <style>
            body {
                margin: 0;
            }
            div#container {
                width: 1080px;
                margin: auto;
            }
            div>div {
                border: 1px solid #aaf;
                box-sizing: border-box;
                border-radius: 15px 15px 0px 0px;
                background-color: #ffc;
                padding: 5px;
                margin: 10px;
                display: inline-block;
                vertical-align: top;
            }

        </style>
    </head>
    <body>
        <div id="container">
        <div style="width: 220px;">
            <h2>第一栏</h2>
            <p>
                北国风光，千里冰封，万里雪飘，望长城内外，惟余莽莽，大河上下，顿失滔滔，山舞银蛇，原驰蜡象，欲与天公试比高，须晴日，看红装素裹，分外妖娆，江山如此多娇，引无数英雄竞折腰，惜秦皇汉武，略输文采，唐宗宋祖，稍逊风骚，一代天骄，成吉思汗，只识弯弓射大雕，俱往矣，数风流人物，还看今朝。
            </p>
        </div>
        <div style="width: 500px;">
            <h2>第二栏</h2>
            <ul>
                <li><a href="#">最热新闻</a></li>
                <li><a href="#">国内新闻</a></li>
                <li><a href="#">国际新闻</a></li>
                <li><a href="#">娱乐新闻</a></li>
            </ul>
        </div>
        <div style="width: 240px;">
            <h2>第三栏</h3>
            <figure>
                <figcaption>美女图片</figcaption>
                <img src="img/mv1.jpg" width="100px">
                <img src="img/mv2.jpg" width="100px">
                <img src="img/mv3.jpg" width="100px">
            </figure>
        </div>
    </div>
    </body>
</html>

导航样式

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset='gbk'">
        <style>
            body>div  {
                text-align: center;
                margin: auto;
            }
            div>div {
                display: inline-block;
                border:1px solid black;
                width: 100px;
                height: 50px;
            }
            a {
                text-decoration: none;
                /**/
                display: block;
                width: 100px;
                height: 50px;
                background-color: #eee;
            }
            a:hover {
                background-color: #aaa;
                font-weight: bold;
            }

        </style>
    </head>
    <body>
        <div>
            <div>
                <a href="#">百度</a>
            </div>
            <div>
                <a href="#">百度</a>
            </div>
            <div>
                <a href="#">百度</a>
            </div>
            <div>
                <a href="#">百度</a>
            </div>
        </div>
    </body>
</html>

inline-table盒子模型

将表格变为内联元素

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset='gbk'">
        <style>
            table {
                border: 1px solid black;
                display: inline-table;
            }
            td {
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        前面的内容
        <table>
            <tr>
                <td>呵呵呵呵</td>
                <td>呵呵呵呵</td>
            </tr>
            <tr>
                <td>呵呵呵呵</td>
                <td>呵呵呵呵</td>
            </tr>
        </table>
        后面的内容
    </body>
</html>

表格相关的盒子模型

table：将组件显示为表格样式
table-caption：将组件显示为表标题样式
table-cell：将组件显示为单元格样式
table-row：将组件显示为行的样式

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset='gbk'">
        <style>
            div>div>div{
                display: table-cell;
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        前面的内容
        <div  style="display: table;border: 1px solid black;width: 400px;">
            <div style="display: table-caption;">表格的标题</div>
            <div>
                <div>呵呵呵呵</div>
                <div>呵呵呵呵</div>
            </div>
            <div>
                <div>呵呵呵呵</div>
                <div>呵呵呵呵</div>
            </div>
        </div>
        后面的内容
    </body>
</html>

2.7.3 给盒子模型加阴影

box-shadow属性
- hOffset：水平偏移
- vOffset：垂直偏移
- blurlength：阴影的模糊程度
- scaleLength：阴影的缩放程度
- color：阴影的颜色

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset='gbk'">
        <style>
            div {
                width: 300px;
                height: 50px;
                border: 1px solid black;
                margin-top: 30px;
            }
        </style>
    </head>
    <body>
        <div style="box-shadow: 10px 10px 5px #ddd;"></div>
        <div style="box-shadow: -10px -10px 5px #ddd;"></div>
        <div style="box-shadow: 10px 10px 5px 10px #ddd;"></div>
        <div style="box-shadow: 10px 10px 5px 20px #ddd;"></div>
    </body>
</html>

2.7.4 多栏布局

CSS新增的分栏布局

将一个组件的内容分成若干个部分

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset='gbk'">
        <style>
            div {
                /*将组件内容分成3部分 横向分*/
                column-count:3;
                /*分开的部分之间的间距*/
                column-gap: 50px;
                /*分开的部分之间的分隔条 宽度 样式 颜色*/
                column-rule: 10px inset #aaa;
            }
        </style>
    </head>
    <body>
        <div>
            呵呵额呵呵呵呵呵呵呵呵呵就撒大家还是建安大使馆的国际化<br>
            呵呵额呵呵呵呵呵呵呵呵呵就撒大家还是建安大使馆的国际化<br>
            呵呵额呵呵呵呵呵呵呵呵呵就撒大家还是建安大使馆的国际化<br>
            呵呵额呵呵呵呵呵呵呵呵呵就撒大家还是建安大使馆的国际化<br>
            呵呵额呵呵呵呵呵呵呵呵呵就撒大家还是建安大使馆的国际化<br>
        </div>
    </body>
</html>

使用盒子模型来实现多栏布局

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset='gbk'">
        <style>
            body {
                margin: 0;
            }
            div#container {
                width: 1200px;
                border: 1px solid black;
                /*设置容器组件为box样式*/
                display: -webkit-box;
            }
            div>div {
                border: 1px solid #aaf;
                box-sizing: border-box;
                border-radius: 15px 15px 0px 0px;
                background-color: #ffc;
                padding: 5px;
                margin: 10px;
            }

        </style>
    </head>
    <body>
        <div id="container">
        <div style="width: 220px;">
            <h2>第一栏</h2>
            <p>
                北国风光，千里冰封，万里雪飘，望长城内外，惟余莽莽，大河上下，顿失滔滔，山舞银蛇，原驰蜡象，欲与天公试比高，须晴日，看红装素裹，分外妖娆，江山如此多娇，引无数英雄竞折腰，惜秦皇汉武，略输文采，唐宗宋祖，稍逊风骚，一代天骄，成吉思汗，只识弯弓射大雕，俱往矣，数风流人物，还看今朝。
            </p>
        </div>
        <div style="width: 500px;">
            <h2>第二栏</h2>
            <ul>
                <li><a href="#">最热新闻</a></li>
                <li><a href="#">国内新闻</a></li>
                <li><a href="#">国际新闻</a></li>
                <li><a href="#">娱乐新闻</a></li>
            </ul>
        </div>
        <div style="width: 240px;">
            <h2>第三栏</h3>
            <figure>
                <figcaption>美女图片</figcaption>
                <img src="img/mv1.jpg" width="100px">
                <img src="img/mv2.jpg" width="100px">
                <img src="img/mv3.jpg" width="100px">
            </figure>
        </div>
    </div>
    </body>
</html>

2.7.5弹性盒子和栅格布局

弹性盒子

是一种完全根据屏幕尺寸需求来实现自适应动态布局的样式

需要两种东西：弹性容器+弹性子元素

弹性容器默认有一行

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset='gbk'">
        <style>
            .flex-container {
                /*将div设置为弹性的容器*/
                display: flex;
                width: 400px;
                height: 250px;
                background-color: lightblue;
                /*弹性子元素在弹性容器中的排列方式 row column -reverse*/
                flex-direction: row;
                /*水平对齐方式
                flex-start 从左到右紧凑
                flex-end
                center 紧凑居中
                spacing-bewteen 平均分布
                */
                justify-content: space-between;
                /*垂直对齐*/
                align-items:center;
            }
            .flex-item {
                background-color: red;
                width: 50px;
                height: 100px;
                margin: 10px;
            }
        </style>
    </head>
    <body>
       <div class="flex-container">
           <div class="flex-item">item01</div>
           <div class="flex-item">item02</div>
           <div class="flex-item">item03</div>
           <div class="flex-item">item04</div>
       </div>
    </body>
</html>

栅格布局

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset='gbk'">
        <style>
            .box {
                border: 1px solid black;
                /*使用栅格样式布局*/
                display: grid;
                /*设置栅格中列的宽度*/
                grid-template-columns: 20% 20% 20% 20%;
                grid-template-columns: 200px 200px 200px 200px;
                /*也可以在确定栅格宽度的情况下 利用百分比来设定宽度*/
                width: 500px;
                grid-template-columns: repeat(5,1fr);
                height: 400px;
                grid-template-rows: repeat(3,1fr);
                /*单元格之间的间距*/
                grid-gap: 10px;
            }
            .box>div {
                border: 1px solid red;
            }
            .test {
                /*
                grid-column-start: 2;
                grid-column-end: 5;
                grid-row-start: 2;
                grid-row-end: 3;
                */
                /*一笔带过*/
                grid-area: 2/2/3/5;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div>01</div>
            <div>02</div>
            <div>03</div>
            <div>04</div>
            <div>05</div>
            <div>06</div>
            <div class="test">07</div>
            <div>08</div>
            <div>09</div>
            <div>10</div>
            <div>11</div>
            <div>12</div>
        </div>
    </body>
</html>

官方推荐的一种栅格布局案例

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset='gbk'">
        <style>
            #content {
                display: grid;
                grid-template-columns: repeat(4,1fr);
                grid-template-rows: minmax(100px,auto);
                max-width: 960px;
                margin: 0px auto;
                grid-gap:10px;
                grid-template-areas: 
                    "header header header header"
                    "aside  . main main"
                    "nav . main main"
                    "section section section section"
                    "section section section section"
                    "footer footer footer footer";
            }
            #content>* {
                background-color: #3bbced;
                padding: 30px;
            }
            header {grid-area: header;}
            main {grid-area: main;}
            section {grid-area: section;}
            aside {grid-area: aside;}
            nav {grid-area: nav;}
            footer {grid-area: footer;}
        </style>
    </head>
    <body>
        <div id="content">
            <header>Header</header>
            <main>Main</main>
            <section>Section</section>
            <aside>Aside</aside>
            <nav>Nav</nav>
            <footer>Footer</footer>
        </div>
    </body>
</html>

三、JS

3.1 初始js

1） js的组成

在这里插入图片描述
2）js执行原理

3）网页中使用js的方式
①使用<script></script>标签
②引入外部js文件
<script src="hello.js" language="javascript"></script>
③直接在html标签中使用
<input name="btn" type="button" value="弹出消息框" onclick="javascript:alert('欢迎你');"/>
4）JS核心语法:
①变量:
var:用于声明变量的关键字。如 var x ; x=10;
②数据类型:
undefined：变量没有赋值而直接使用，结果就是undefined
null: 代表一个空值
number: 整数，浮点数都属于number
boolean: true与false
string:字符串，单引号或双引号赋值均可。（.length 获得长度）
③typeof:检查变量的返回值类型一般只能返回如下几个结果：
number,boolean,string,function（函数）,object(NULL,数组，对象）,undefined.
注意:nudefined:typeof(undefined) 返回的是undefined
typeof(NaN) typeof(Infinity)返回的都是number类型。
Object:对象，数组，null返回的是object类型
④数组:
创建数组 var 数组名 = new Array(长度);
length属性还是获取数组的长度
5）函数：
类似java中的方法。是完成特定任务的代码语句块
分为：系统函数和自定义函数
①常用系统函数
parseInt(“字符串”);将字符串转化为数字
parseFloat(“字符串”);将字符串转化为浮点数
isNaN();判断是否是非数字 (不是数字返回true ,
如 isNaN(0):false isNaN(‘a’):true )
②自定义函数
自定义函数分为有参函数与无参函数
声明函数：function 函数名(a,b){函数体}
调用的格式事件名=”函数名()”;
匿名函数:
var showFun = function(count){
}
调用匿名函数:
<input type=”button” onclick=”showFun(3)”/>

3.2 Js基本语法

3.2.1 BOM

整个BOM的核心是window
在这里插入图片描述
BOM可实现功能(window)

弹出新的浏览器窗口
移动，关闭浏览器窗口以及调整窗口的大小
页面的前进，后退

3.2.2 Window对象

1 常用属性
①history
②location 如:window.location.href=’http://www.sohu.com’

2 常用方法

方法名称	说明
prompt( )	显示可提示用户输入的对话框
alert( )	显示带有一个提示信息和一个确定按钮的警示框
confirm( )	显示一个带有提示信息、确定和取消按钮的对话框
close( )	关闭浏览器窗口
open( )	打开一个新的浏览器窗口，加载给定 URL 所指定的文档
setTimeout( )	在指定的毫秒数后调用函数或计算表达式
setInterval( )	按照指定的周期（以毫秒计）来调用函数或表达式

打开窗体
使用:window.open(‘打开窗体路径’,’窗体名’,’属性设置’);
window.open()的属性

属性名称	说明
height、width	窗口文档显示区的高度、宽度。以像素计。
left、top	窗口的x坐标、y坐标。以像素计
toolbar=`yes \| no \|1 \| 0`	是否显示浏览器的工具栏。黙认是yes。
scrollbars=`yes \| no \|1 \| 0`	是否显示滚动条。黙认是yes。
location=`yes \| no \|1 \| 0`	是否显示地址地段。黙认是yes。
status=`yes \| no \|1 \| 0`	是否添加状态栏。黙认是yes。
menubar=`yes \| no \|1 \| 0`	是否显示菜单栏。黙认是yes。
resizable=`yes \| no \|1 \| 0`	窗口是否可调节尺寸。黙认是yes。
titlebar=`yes \| no \|1 \| 0`	是否显示标题栏。黙认是yes。
fullscreen=`yes\| no \|1 \| 0`	是否使用全屏模式显示浏览器。黙认是no。处于全屏模式的窗口必须同时处于剧院模式。

关闭窗体
window.close();

3.2.3 常用事件

名称	说明
onload	一个页面或一幅图像完成加载
onmouseover	鼠标移到某元素之上
onlick	当用户单击某个对象时调用的事件句柄
onkeydown	某个键盘按键被按下
onchange	域的内容被改变

窗体加载成功
onload:window.onload 窗体加载成功

function  test(){
    document.write('hello');
}
Window.onload=test();

3.2.4 Document对象

常用方法

名称	说明
getElementById()	返回对拥有指定id的第一个对象的引用
getElementsByName()	返回带有指定名称的对象的集合
getElementsByTagName()	返回带有指定标签名的对象的集合
write()	向文档写文本、HTML表达式或JavaScript代码