前端学习
- 引子
- 壹、HTML+CSS系列教程1.拨云见日
- (一).Web三大核心技术
- 一.HTML
- 二.CSS
- 1.基本语法
- 2.内联样式与内部样式
- 3.外部样式
- 4.CSS中的颜色表示法
- 5.CSS背景样式
- 6.边框样式
- 7.边框实现三角形
- 8.CSS文字样式
- 9.CSS文字样式
- 10.文本修饰与文本大小写
- 11.文本间距与英文折行
- 12.CSS复合样式
- 13.CSS选择器
- 14.CSS样式
- 15.CSS优先级
- 16.层次优先级
- 17.CSS盒子模型
- 18.标签分类
- 19.标签嵌套规范
- 19.溢出隐藏
- 20.透明度与手势
- 20.最大最小宽高
- 21.CSS默认样式
- 22.CSS rest:
- 23.float浮动
- 24.point定位
- 25.一些网页操作
- 25.CSS添加省略
- 26.CSS Sprite
- 27.CSS圆角
- 28.文博尚美网页练习
- 29.百度官网
- 30.strong和b、em和i
- 31.引用标签
- 32.iframe嵌套页面
- 33.br与wbr标签
- 34. pre 与 cod
- 35.map与area
- 36.embed与object
- 37.audio 与 video(引入音频和视频的标签)
- 38.文字注解与文本方向
- 39.扩展link标签
- 40.扩展meta标签
- 三.JavaScrip
- 四.切图流程
- 五.PC企业站布局
- 六.PC游戏站布局
- (二)、HTML+CSS系列教程2.溯本求源
- (三)、HTML+CSS系列教程3.风生水起
- (四)、HTML+CSS系列教程4.巧夺天工
引子
1.什么是html css
①简介
html与css都是网站开发的编程语言
html是结构 css是表面
浏览器解析代码后的样子就是我们看到的网页,可通过鼠标右键查看网页源代码
②介绍
㈠HTML
HTML的全称为超文本标记语言,是一种标记语言。它包括一系列标签.通过这些标签可以将
网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命
令组成的 描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。HTML
的全称为超文本标记语言,是一种标记语言。它包括一系列标签.通过这些标签可以将网络上
的文档格式 统一, 使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组
成的描述性文本, HTML命令可以说明文字,图形、动画、声音、表格、链接等。
㈡CSS
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言
的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅
可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
③提问
如何去写代码?写到哪里呢?
使用文本文档改后缀为.html文件 或者使用vs code进行编译
随后使用相应浏览器打开使用
一个网站是由多个网页组成的。每一个网页都是一个.html文件
2.VS code
①下载
②如何安装插件
㈠中文
首先打开vscode ,并按快捷键“Ctrl+Shift+P”;然后输入“configure language”,并回车;
最后选择简体中文安装即可
㈡插件
③编译器的基本使用
ctrl + s : 保存
ctrl + a : 全选
ctrl + x : 剪切
ctrl + c : 复制
ctrl + v : 粘贴
ctrl + z : 撤销
dtrl + y : 前进
shift + end : 从头选择一行
shift + home: 从尾部选择一行
shift + alt + ↓: 快速复制一行
alt + ↑ 或 ↓:快速移动一行
tab :向后缩进
tab + shift :向前缩进
alt + 鼠标左键:多光标
ctrl + d:选择相同元素的下一个
3.浏览器
常见浏览器 | |
---|---|
1 | Microsoft Edge下载 |
2 | chrome下载 |
3 | 夸克浏览器 |
4 | 搜狗浏览器 |
5 | QQ浏览器 |
4.深入了解网站开发
①企业结构
㈠UI设计师:设计稿
㈡web前端开发工程师(H5开发)
设计稿-----》代码
数据库的数据-----》显示到页面
HTML+CSS
HTML:结构
CSS:样式
㈢web后端开发工程师
②Web三大核心技术
㈢Javascript
JavaScript,通常缩写为JS,是一种符合ECMAScript规范的解释性编程语言。JavaScript 是
高级的,通常是即时编译的和多范式的。它具有大括号语法,动态类型,基于原型的对象定向和
一流的函数。
壹、HTML+CSS系列教程1.拨云见日
(一).Web三大核心技术
一.HTML
网页结构
介绍
网站的编程语言,浏览器将代码解析后的样子就是我们所见的网站 一个网页是由N多个网页组成的
,每一个网页都是一个 .html文件电视剧都是.mp4文件写.html文件由新建文档改后缀完成HTML
的全称为超文本标记语言,是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文
档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML令组成的描述性文
本 ,HTML命令可以说明文字,图形、动画、声音、表格、链接等。
HTML基本结构和属性
HTML:超文本 标记 语言
超文本:文本内容 + 非文本内容 (图片 视频 音频等)
标记:<单词>
语言:编程语言
标记也叫标签:
标签可以上下排列也可以组合嵌套
标签的属性:来修饰标签的,设置当前标签的一些功能
一般网页格式
<header>hellow world</header>
<footer>hi HTML</footer>
标签可以上下排列也可以组合嵌套
使用嵌套将多个网页嵌套为网站
<header>
hellow world
<div>
aaaa
<div>bbb</div>
</div>
<div>aaa</div>
<div>aaa</div>
<div>aaa</div>
</header>
<footer>hi HTML</footer>
标签的属性,设置当前标签的一些功能
<header title="hellow">hellow world</header>
<footer title="hi">hi HTML</footer>
超文本标记语言(HyperText Markup Language),标准通用标记语言下的一个应用。是网页制作
必须的编程语言
1.HTML的初始代码
每一个html文件都有初始代码,初始代码就是你无论写什么样的网页,这些代码都是必须的,这就是初始代码
1.每个.html文件都有初始代码,要符合html文件的规范写法
!+tab :快速创建.html的初始代码
<!DOCTYPE html> <!--文档声明:告诉浏览器这是html文件-->
<html lang="en"> <!--html文件的最外层标签:包裹所有html标签代码-->
<head> <!--lang="en"表示这是一个英文网站-->
<meta charset="UFT-8"> <!--元信息:是编写网页中的一些赋值信息charset="UFT-8"让网页不出现乱码的情况-->
<title>Document</title> <!--设置网页的标题-->
</head>
<body>
显示网页内容的区域
</body>
</html>>
head部分
body部分
2.HTML注释
㈠写法:
<!--注释的内容-->
注释的代码,只在文件中看得到,但是浏览器显示不出来
㈡意义:
1.把暂时不用的代码注释起来,方便以后使用
2.对于开发人员进行提示
㈢快捷添加注释与删除注释:
添加:ctrl + /
删除:ctrl + alt + a
3.HTML语义化
所谓MTHL语义化指的是,根据网页中内容的结构,选择适合的HTML标签进行编写。
好处:
1.在没有CSS的情况下,页面也能呈现出很好的内容结构
2.有利于SEO,让搜索引擎爬虫更好地理解网页
3.方便其他设备解析(例如屏幕阅读、盲人阅读器等)
4.便于团队开发与维护
4.标题与段落
标题 ->双标签:
<>标题</>
以hx作为<>中的标签符
由h1到h6标题大小依次减小
在一个网页中,h1标题最重要,并且一次只能出现一次h1标签
h2及后可以出现多次
h5 h6标签在网页中不常使用
段落->双标签
<>段落</>
以p作为<>中的标签符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Document</title>
</head>
<body>
<!-- <h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>
<p>这是一个段落</p> -->
<h1>我学习了HTML</h1>
<p>我学习html能够自己制作网页,然后aisdfhoahsfoajspfjodaihvo
asfmoiajfoiefjoiwjrpwefowjefpqwkefpqokefp
dfopwjefpqwekfpokqpefkpdfmpoewfpqkepfokqpeofkoadjfopejfpo
</p>
<h2>我学习CSS</h2>
<p>然后我又wuqooiqejfoiqjifojqeofhaodhfodsfojsidfhsdoif
adknfoidfosdfjsoidjfoisjdfwepfosdvoiosndvomsodvmoisdjv
dsvhiusdvosnpefjwoiejfoiwejfjoiwjeof
</p>
</body>
</html>
5.文本修饰标签
以strong作为标签,意为强调,对文本进行加粗
以em作为标签,意为强调,文本斜体
以sub与sup为标签,sub下标文本,sup上标文本
以del与ins作为标签,del为删除文本,ins为插入文本
区别
1.写法和展示效果区别,一个加粗,一个斜体
2.strong的强调性稍弱
注:一般情况下,插入文本都是与删除文本配合使用的
<p>
<strong>strong强调文本给文本加粗</strong>
<em>em强调文本使斜体</em>
<p>
a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>
<!--用sup进行下角标的注释-->>
</p>
<p>
H<sup>2</sup>O<!--用sup进行下角标的注释-->>
</p>
<p>
促销:原价<del>300</del>,现价<ins>100</ins>.
<!--以del进行删除表现注释/以ins进行文本下横线注释-->>
</p>
<p>
北京著名高档百货中心<em>塞特购物中心</em>即将闭店。昨天,塞特购物中
心总台服务人员表示<strong>“如果手里有购物卡,请尽快到店消费”</strong>。
根据服务人员介绍,目前塞特购物中心正在进行清仓大甩卖。<del>特价电视原价
3600</del>,
<ins>现价清仓只要1300</ins>
</p>
</p>
6.图片标签与属性
img->单标签属性
scr:引入图片地址
alt:当图片出现问题时,可以出现一段提醒文字
title:图片上的提示信息
width、height:图片的大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="https://cn.bing.com/images/search?view=detailV2&ccid=zotn7fcm&id=12D0B0C5C81EC063F6CED5E78BD812C8D350004B&thid=OIP.zotn7fcmnkjbrT9D6swGLAAAAA&mediaurl=https%3a%2f%2fts1.cn.mm.bing.net%2fth%2fid%2fR-C.ce8b67edf7269e48dbad3f43eacc062c%3frik%3dSwBQ08gS2Ivn1Q%26riu%3dhttp%253a%252f%252fpic.downyi.com%252fupload%252f2019-4%252f2019428151446107100.jpg%26ehk%3dMqtZ6fnc8HR5r1vyFHRfXzTyoynRnCDyRNYVFUfQT6g%253d%26risl%3d%26pid%3dImgRaw%26r%3d0&exph=200&expw=200&q=%e9%b8%a1%e4%bd%a0%e5%a4%aa%e7%be%8e&simid=608012892543451571&FORM=IRPRST&ck=15881155CD3D11E2A8CB62C083BF460C&selectedIndex=16&ajaxhist=0&ajaxserp=0"
alt="咯咯跳舞迷死你" title="这是咱们咯咯的照片" width="500" height="500">
</body>
</html>
7.引入文件的地址与路径
相对路径
.在路径中表示当前路径
..在路径中表示上一路径
绝对路径
表示文件的绝对位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="./gege.jpg" alt="123">
<!--相对路径-->
</a>
<img src="\代码\gege.jpg"alt="123">
<!--绝对路径-->
</body>
</html>
8.跳转链接
使用a作为标签
双标签<></>
1.href:连接的地址
2.target:可以链接打开的方式,默认情况下:在当前页面打开 _self 新窗口打开
以target="_blank"改变网页打开方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="https://www.baidu.com/">进入百度</a>
<a href="https://m.weibo.cn/">
<!--点击图片进入微博-->
<img src="./gege.jpg" alt="123">
<!--相对路径-->
</a>
<img src="\代码\gege.jpg"alt="123">
<!--绝对路径-->
</body>
</html>
点击第一张图片进入微博
3.base
以base为标签改变默认设置
使所有标签在新窗口打开
练习
第一页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=>, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="./html/second.html">转到第二页</a>
<img src="./photo/1.jpg"alt="">
</body>
</html>
第二页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=>, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="./third.html">转到第三页</a>
<img src="../photo/2.jpg"alt="">
</body>
</html>
第三页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="../first.html">返回首页</a>
<img src="../photo/3.jpg"alt="123">
</body>
</html>
9.跳转锚点
页面内部进行跳转
实现一
#号 + id属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="#html">HTML</a>
<a href="#css">CSS</a>
<a href="#js">JavaScrip</a>
<h2 id="html">HTML超文本文档标记语言</h2>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<h2 id="css">CSS层叠样式表</h2>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<h2 id="js">JS样式表</h2>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
</body>
</html>
实现二
#号 + name属性(name属性加给的是a属性)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<a href="#html">HTML</a>
<a href="#css">CSS</a>
<a href="#js">JavaScrip</a>
<a name="html"></a>
<h2>HTML超文本文档标记语言</h2>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<a name="css"></a>
<h2>CSS层叠样式表</h2>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<a name="js"></a>
<h2>JS样式表</h2>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
<p>模拟段落</p>
</body>
</html>
⒑特殊符号
1.& + 字符
2.解决冲突 左右尖括号 添加多个空格的实现
3.< >  
⒒无序列表
<ul、<li:列表的最外层容器、列表项
注:ul和li必须是组合出现的,他们之间不能有其他标签
1.无序列表:ul li符合嵌套规范
2.type属性:改变前面标记的样式(一般用CSS控制)
type属性
常用type属性
值 | 描述 |
button 定义可点击按钮 | (多数情况下,用于通过 JavaScript 启动脚本)。 |
checkbox | 定义复选框。 |
file | 定义输入字段和 "浏览"按钮,供文件上传。 |
hidden | 定义隐藏的输入字段。 |
image | 定义图像形式的提交按钮。 |
password | 定义密码字段。该字段中的字符被掩码。 |
radio | 定义单选按钮。 |
reset | 定义重置按钮。重置按钮会清除表单中的所有数据。 |
submit | 定义提交按钮。提交按钮会把表单数据发送到服务器。 |
text | 定义单行的输入字段,用户可在其中输入文本。默认宽度为 20 个字符。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li><a href="#"><strong>真假ikun合道抗击马戏团</strong></li>
<li><a href="#">ikun黑白两道合并</li>
<li><a href="#">四川辣椒太辣</li>
<li><a href="#">我真的想不出来说什么了</li>
<li><a href="#">不改过不了审啊</a></li>
</ul>
</body>
</html>
⒓有序列表
以ol与li为标签的有序列表
注:有序列表用的非常少,经常用的是无序列表,无序列表可以代替有序列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
<ol type="i">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
-->
<ol>
<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>
</ol>
</body>
</html>
⒔定义列表
dl:定义列表
dt :定义专业术语与名词
dd:对名词进行解释和描述
列表项需要添加标题和对标题进行描述的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=>, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>CSS</dt>
<dd>层叠样式表</dd>
<dt>JavaScrip</dt>
<dd>网页脚本语言</dd>
</dl>
</body>
</html>
14.嵌套列表
注:列表之间可以相互嵌套形成多层级列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--<ul>
<li>
四川省
<ul>
<li>成都</li>
<li>德阳</li>
<li>宜宾</li>
<li>乐山</li>
</ul>
</li>
<li>
江苏省
<ul>
<li>南京</li>
<li>扬州</li>
<li>无锡</li>
<li>连云港</li>
</ul>
</li>
</ul>
-->
<!--<dl>
<dt>中国</dt>
<dd>
<dl>
<dd>辽宁省</dd>
<dd>沈阳</dd>
<dd>大连</dd>
<dd>丹东</dd>
</dl>
<dl>
<dt>山东省</dt>
<dd>济南</dd>
<dd>青岛</dd>
<dd>烟台</dd>
</dl>
</dd>
<dt>美国</dt>
<dd>lsj</dd>
</dl>-->
<ul>
<li>
小吃类
<ul>
<li>煮粉干</li>
<li>拌青菜</li>
<li>蛋炒饭</li>
<li>煎蛋</li>
<li>米饭</li>
</ul>
</li>
<li>
卤味类
<ul>
<li>鸭肠</li>
<li>面筋</li>
<li>牛肚</li>
<li>猪耳朵</li>
<li>猪头肉</li>
<li>大肠</li>
<li>鱿鱼</li>
</ul>
</li>
<li>
套餐类
<ul>
<li>卤肉筋饭</li>
<li>猪肉肉饭</li>
<li>猪耳朵饭</li>
<li>卤猪脚饭</li>
<li>卤猪舌饭</li>
</ul>
</li>
<li>
炖爆类
<ul>
<li>猪蹄黄豆</li>
<li>猪肚莲子</li>
<li>猪心枸杞</li>
<li>羊肉枸杞</li>
<li>牛肉枸杞</li>
</ul>
</li>
</ul>
<p><em>亲,20元以上可送餐哦!!</em></p>
</body>
</html>
15.表格标签
①table:表格的最外层容器
②tr:定义表格行
③th:定义表头
④td定义表格单元
⑤caption:定义表格标题
注:之间是有嵌套关系的,要符合嵌套规范。
(没用,但是符合语义化标准)
在一个table中tHead只能出现一次,但是tBody可以出现多次
语义化标签:tHead tBody tFood
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table>
<caption>天气预报</caption>
<tHead>
<tr>
<th>日期</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
</tHead>
<tBody>
<tr>
<td>2022年10月23日</td>
<th><img src="./新建文件夹/gege.jpg" alt="咯咯咯" width="300" height="200"></th>
<td>鸡雨,不宜出门</td>
</tr>
<tr>
<td>2022年10月24日</td>
<th><img src="./链接综合练习/photo/1.jpg" alt="天气" width="200" height="300"></th>
<td>天气晴朗,宜出门</td>
</tr>
</tBody>
<tFoot>
</tFoot>
</table>
</body>
16.表格属性
①border:表格边框
<table border="1">
加入border标签使表格出现边框
代表单元格之间的空间
<table border="1" cellpadding="30" cellspacing="30">
加入使表格中间距变化
②rowspan与=colspan
合并表格
rowspan合并行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" cellpadding="30" cellspacing="30">
<caption>天气预报</caption>
<tHead>
<tr>
<th colspan="2">天气</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
</tHead>
<tBody>
<tr>
<td>2022年10月23日</td>
<td>白天</td>
<th><img src="./新建文件夹/gege.jpg" alt="咯咯咯" width="300" height="200"></th>
<td>鸡雨,不宜出门</td>
</tr>
<tr>
<td>2022年10月24日</td>
<td>白天</td>
<th><img src="./链接综合练习/photo/1.jpg" alt="天气" width="200" height="300"></th>
<td>天气晴朗,宜出门</td>
</tr>
</tBody>
<tFoot>
</tFoot>
</table>
</body>
</html>
colspan合并列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" cellpadding="30" cellspacing="30">
<caption>天气预报</caption>
<tHead>
<tr>
<th colspan="2">天气</th>
<th>天气情况</th>
<th>出行情况</th>
</tr>
</tHead>
<tBody>
<tr>
<td rowspan="2">2022年10月23日</td>
<td>白天</td>
<th><img src="./新建文件夹/gege.jpg" alt="咯咯咯" width="300" height="200"></th>
<td>鸡雨,不宜出门</td>
</tr>
<tr>
<td>夜晚</td>
<th><img src="./链接综合练习/photo/1.jpg" alt="咯咯咯" width="300" height="200"></th>
<td>鸡雨,不宜出门</td>
</tr>
<tr>
<td rowspan="2">2022年10月24日</td>
<td>白天</td>
<th><img src="./链接综合练习/photo/1.jpg" alt="天气" width="200" height="300"></th>
<td>天气晴朗,宜出门</td>
</tr>
<tr>
<td>白天</td>
<th><img src="./新建文件夹/gege.jpg" alt="天气" width="200" height="300"></th>
<td>天气晴朗,宜出门</td>
</tr>
</tBody>
<tFoot>
</tFoot>
</table>
</body>
</html>
③align与valign
align:分为三种属性left,center,right
valign:分为三种属性top,middle,bottom
align三种属性分别使表格中的文字偏向
<tr align="rignh">
<tr align="center">
<tr align="left">
valign三种属性分别使表格中的文字偏向
<tr valign="top">
<tr valign="middle">
<tr valign="bottom">
17.表单标签
form:表单的最外层容器
input:标签用于搜集用户信息,根据不同的type属性值,展示不同的控件,如输入框、密码框、复选框等
textarea:多行文本框
select、option:下拉菜单
label:辅助表单
input标签有一个type属性,决定是声明控件
还有一些常见属性
checked、disabled、name、for…
常用type属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<h2>输入框</h2>
<input type="text" placeholder="请输入用户名">
<h2>密码框</h2>
<input type="password" placeholder="请输入密码">
<h2>复选框</h2>
<input type="checkbox" checked>苹果
<input type="checkbox">香蕉
<input type="checkbox" disabled>葡萄
<h2>单选框</h2>
<input type="radio" name="me">男
<input type="radio" name="me">女
<h2>上传文件</h2>
<input type="file">
<h2>提交按钮和重置按钮</h2>
<input type="submit">
<input type="reset">
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>多行文本框</h2>
<textarea name="" id="" cols="30" rows="10"></textarea>
<h2>下拉菜单</h2>
<select name="" id="">
<option selected disabled>请选择</option>
<option value="">北京</option>
<option value="">上海</option>
<option value="">杭州</option>
</select>
<select name="" id="" size="3" multiple>
<option value="">北京</option>
<option value="">上海</option>
<option value="">杭州</option>
</select>
<input type="file" multiple>
<input type="radio" name="gender" id="man"><label for="man">男</label>
<input type="radio" name="gender" id="woman"><label for="woman">女</label>
</form>
</body>
</html>
18.表格表单组合
表格表单之间可以互相组合形成数据展示效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<table border="1" contenteditable="30">
<tBody>
<tr align="right">
<td rowspan="4">总体信息</td>
<td colspan="2">用户注册</td>
</tr>
<tr align="right">
<td>用户名</td>
<td><input type="text" name="" id=""
placeholder="请输入用户名"></td>
</tr>
<tr align="right">
<td>密码</td>
<td><input type="text" name="" id=""
placeholder="请输入密码"></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" name="" id="">
<input type="reset">
</td>
</tr>
</tBody>
</table>
</form>
</body>
</html>
19.div与span
div:div>标签定义 HTML 文档中的分隔(DIVision)或部分(section)。div属于web前端的学习内容,其中div标签常用于组合块级元素,以便通过样式表来对这些元素进行格式化,div中还可以嵌套多层div,用来将网页分割成独立的、不同的部分,来实现王爷的规划和布局
span:用来修饰文字
div与span都是没有任何默认样式的,需要配合CSS才行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<h2>
<a href="#">[千锋教育] <span>html5</span>
-中国数万程序员的选择-官方首页</a></h2>
<a herf="#"><img src="./图片/10.28/未确认 548892.crdownload" alt=""></a>
<p>千锋web前端视频教程频道为用户提供全面的前端实战开发视频教程
,包含web前端基础视频教程,web前端入门视频教程,web前端高级视
频教程等,适合各个阶段开发人员在线学习,免费提供百 …</p>
<a href="#">www.qfedu.com/video/html5</a>
</h2>
</div>
<div>
<h2>
<a href="#"><span>html5</span>简介</a>
<a href="#"><img src="./图片/10.28/下载.jpg" alt=""></a>
<p>
2014-10-29 · HTML5规范于2014年10月29日由万维网联盟正式
宣布,HTML是万维网最核心的超文本标记语言。 万维网不等同于
互联网,但它是依靠互联网运行的服务之一,万维网又简写为www,
它可以实现在互联网的帮助下,访问由许多互 …
</p>
<a href="#">https://www.w3cschool.cn/html5</a>
</h2>
</div>
<div>
<a href="#"><span>HTML</span>(5) 代码规范 | 菜鸟教程</a>
<a href="#"><img src="./图片/10.28/下载 (1).jpg" alt=""></a>
<p>
HTML(5) 代码规范 HTML 代码约定 很多 Web 开发人员对 HTML 的代
码规范知之甚少。 在2000年至2010年,许多Web开发人员从 HTML 转换
到 XHTML。 使用 XHTML 开发人员逐渐养成了比 …
</p>
<a href="#https://www.runoob.com/html/html5-syntax.html"></a>
</div>
</body>
</html>
二.CSS
网页样式
①介绍
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的
一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以
静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化
②
CSS是网页的样式
1.基本语法
a.格式
选择器{属性1:值1;属性2:值2}
b.单位:
px->像素(pixel)、%->百分比
c.基础样式:
width、height、background-color
d.长度单位:
1.px:像素
2.%:百分比
外容器 为 600px 当前容器50% 为 300px
e.css的注释:
用/**/来注释css的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{width: 100px; height: 100px; background-color: red;}
span{background-color:blue;}
</style>
</head>
<body>
<div>这是一个块</div>
<div>又是一个块</div>
<span>这是一个内联</span>
</body>
</html>
2.内联样式与内部样式
内联(内行、行间)样式
在html标签上添加style属性来实现的
内部样式
在style标签内添加的样式
注:内部样式的优点,可以复用代码
区别:内部样式代码可以复用、符合W3C的规范标准,进行让结构样式分开处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{width: 100px; height: 100px; background-color: red;}
span{background-color:blue;}
</style>
</head>
<body>
<div>这是一个块</div>
<div>又是一个块</div>
<span>这是一个内联</span>
</body>
</html>
3.外部样式
引入一个单独的CSS文件
link标签
rel
href
通过link标签引入外部资源,rel属性指定资源跟页面的关系,href属性资源的地址
HTML<link标签的rel属性
div{width: 100px;height: 100px;background-color: red;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./外部样式.css">
<title>Document</title>
</head>
<body>
<div>这是一个块</div>
</body>
</html>
由于@import存在一些问题而不建议使用
4.CSS中的颜色表示法
1.单词表示法:red yellow…
div{background-color:red}
2.十六进制表示法:
0123456789abcdem
从#000000到#ffffff
div{background-color: #000000;}
3.rgb三原色表示法:
rgb(255,255,255)
取值范围0~255
5.CSS背景样式
background-color:背景颜色
background-image:背景图片
url(背景地址)
默认:会水平垂直地铺满背景图
background-repeat:背景图片的平铺方式
repeat-x:x轴平铺
repeat-y:y轴平铺
repeat(xy轴都进行平铺,默认值)
no-repeat:都不平铺
background-position:背景图片的位置
x y:number 单词
x:left,center,right
y:top,center,bottom
background-attachment:背景图片随滚动条的移动方式
scroll:默认值(背景位置是按照当前元素进行偏移的)
fixed:(背景位置是按照浏览器进行偏移的)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{height: 2000px;}
div{width: 1440px;height: 800px;background-color: red;
background-image: url(./gege.jpg);
background-repeat: no-repeat;
background-position:50% 50% ;
background-attachment: fixed;
}
</style>
<title>Document</title>
</head>
<body>
<div></div>
</body>
</html>
6.边框样式
border-style:边框的样式
solid:实现
dashed:虚线
dotted:点线
border-style:边框的大小
px...
border-style:边框的颜色
red #fff...
注:针对某一条边进行单独设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div{width: 300px;height: 300px;border-right-style:dotted ;border-right-width:10px ;
border-right-color:red ;border-top-style:solid ;border: top width 10px;
border-top-color:green ; }
</style>
<title>Document</title>
</head>
<body>
<div></div>
</body>
</html>
7.边框实现三角形
颜色:transparent
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{background-color: green;}
div{width: 0px;height: 0px;
border-top-color:transparent ;
border-top-style: solid;
border-top-width :30px;;
border-right-color:red ;
border-right-style:solid ;
border-right-width: 30px;;
border-bottom-color: transparent;
border-bottom-style: solid;
border-bottom-width :30px;;
border-left-color: transparent;
border-left-style:solid ;
border-left-width :30px;;
}
</style>
<title>Document</title>
</head>
<body>
<div>
</div>
</body>
</html>
8.CSS文字样式
font-family:字体类型
英文字体:Arail , ‘Times New Roman’
中文文字:微软雅黑 ,宋体
中文字体的英文名称
微软雅黑:‘Microsoft YaHei’
宋体:SimSun
衬线体与非衬线体
注意事项
1.设置多字体方式
2.引号问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div{font-family:'Times New Roman' ,Simsun,微软雅黑}
</style>
<title>Document</title>
</head>
<body>
<div>文字</div>
<p>这是一段文字</p>
<div>this is a test</div>
<p>this is a text</p>
</body>
</html>
9.CSS文字样式
font-size:字体大小
默认大小:16px
写法:number(px) 单词(small large*…)不推荐使用
注:字体大小一般为偶数
font-weight:文字粗细
模式:正常(normal)加粗(bold)
写法:单词(normal、bold)、number(100、200…900.100到500都是正常
600到900都是加粗)
font-style:字体样式
模式:正常(normal)斜体(italic)
注:oblique也是斜体用的较少,一般了解即可
区别
1.italic所有带有倾斜字体的可以设置
2.oblique没有倾斜属性的字体也可以设置倾斜操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div{font-style:oblique;color: red;}
</style>
<title>Document</title>
</head>
<body>
<div>文字</div>
<p>这是一段文字</p>
<div>this is a test</div>
<p>this is a text</p>
</body>
</html>
10.文本修饰与文本大小写
CSS段落样式
text-decoration:文本装饰
下划线:onderline
删除线:line-through
上划线:overline
不添加任何装饰:none
注:可添加多个文本修饰
text-trasform:文本大小写
小写:lowercase
大写:uppercase
只针对首字母的大写:capitalize
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
p{text-transform: capitalize;}
</style>
<title>Document</title>
</head>
<body>
<p>名字是一个人的代号,其中还包含家长们的期盼,一般情况下,
孩子们都不会随意更改自己的名字,毕竟改名之后,很多信息
都要随之更改,非常的麻烦。不过也有人非要更改自己的名字,
主要就是名字的寓意让人觉得影响不好,有些名字带有歧义,
还有的名字带着封建思想的影子。
</p>
<p>
dshvhsuid askdgia akfd af asfa apodkfpoa
dshvhsuid askdgia akfd af asfa apodkfpoa
4dshvhsuid askdgia akfd af asfa apodkfpoa
</p>
</body>
</html>
text-indent:文本缩进
首行缩进
em单位:相对单位,1em永远都是跟字体相同
text-align:文本对齐方式
对齐方式:left right center justify
line-height:定义行高
什么是行高------一行文字的高度,上下边距等价
默认行高:不是固定值,是变化的,根据当前文字字体大小不断变化
取值:number(px) scale(比例值,跟文字大小)
11.文本间距与英文折行
letter-spacing:字之间的间距
word-spacing:词之间的间距(针对英文段落)
英文和数字不自动折行问题:
1、word-break:break-all;(非常强烈的折行)
2、word-wrap:break-word;(不是那么强烈的折行,会产生一些 空白区域)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div{width: 800px;}
h1{text-align: center; color:red ;}
h2{color: blue;text-indent: 2em;}
#p1{font-style:italic ;font-weight: bold;text-indent: 2em;}
#p2{color: green;line-height: 30px;text-indent: 2em;}
#p3{color: powderblue;line-height :30px ;text-indent: 2em;
text-decoration:underline ;font-style: italic;}
#p4{font-weight:bold;letter-spacing:10px;line-height:30px;
text-indent:2em;color: purple;}
</style>
<title>Document</title>
</head>
<body>
<h1>教师简介:<h1>
<h2>基本信息</h2>
<div>
陈川、博士、副教授、博士生导师。
</div>
<h2>经历</h2>
<div>
<p id="p1"> 2012 于中山大学数学与应用数学专业获学士学位,</p>
<p id="p2">2016 于香港浸会大学数学统计专业获博士学位,曾获比利时FWO 奖学金于比利时鲁汶
大学(KU Leuven)电子工程系访问交流。近年来主要研究方向:图机器学习理论与应
用(图神经网络,社交网络,知识图谱等),及可信机器学习理论与应用(鲁棒学习,
联邦学习等)。发表SCI索引国际期刊(包括IEEE TNNLS, TIP, TPDS, ACM TOIS,
TKDD, NSR等)及国际会议论文(包括KDD, AAAI, IJCAI, ICML, WWW, INFOCOM,
CIKM, ICDM等)70余篇,包括中科院一区及CCF A类论文40余篇, ESI高被引论文1篇
。现任Elsevier国际期刊Software Impacts副主编,担任IEEE TIP/TSP/TNNLS/TC
CB 等多份国际期刊审稿人,担任IJCAI/AAAI等多个国际学术会议的(高级)程序委员
会委员及论坛主席,中国计算机学会(CCF)人工智能与模式识别专委会委员。主持国家
重点研发计划项目课题,国家自然科学面上项目、青年基金,广东省基础研究项目/面上
项目两项,CCF开放课题项目一项,2019年CCF-腾讯犀牛鸟科研基金项目一项,2021年
腾讯微信犀牛鸟专项基金一项,课题组与多个企业(包括微信/微众银行/网易游戏/美图
/平安银行/招联金融)等开展长期的研究合作项目。</p>
</div>
<h2>生指导方面</h2>
<div>
<p id="p3">小组学生曾获CCF优秀大学生奖, ICDM/CIKM/SIAM/AAAI等会议Travel Grand, 校级优
秀毕业论文10余次,其中2020,2021年度所指导学生均获得校级优秀毕业论文。表现优秀
可协助推荐至海外知名高校深造及网易/微信/微众银行等企业实习。
</p>
</div>
<h2>招生</h2>
<div>
<p id="p4">【长期面向博士后、研究生、及本科实习生】:如果您对社交网络分析,图机器学习,知
识图谱及联邦学习的理论方法、工程实现与应用落地等方面感兴趣,有较强自我驱动并有
志于学术研究,欢迎通过邮件(chenchuan@mail.sysu.edu.cn)与我联系!
</p>
</div>
</body>
</html>
12.CSS复合样式
一个CSS属性只控制一种样式,叫做单一样式。
一个CSS属性控制多种样式,叫复合样式
符合样式
符合的写法,是通过空格的方式实现的。复合写法有的不需要关心顺序,有的需要关心顺序,如font
background:red url() repeat 0 0;
border:1px red solid;
font:
(注:最少要有两个值size family)
顺序为: weight - style - size - /line-height/ - family
尽量不要混写,如果非要混写,那么一定要复合样式再写单一样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div{width: 300px;height: 300px;
background: url(../photo/2.jpg)no-repeat center center;
background-color: red;
border-right:dashed 2px blue ;
font: bold italic 30px/100px 宋体;
}
</style>
<title>Document</title>
</head>
<body>
<div>一段文字</div>
</body>
</html>
13.CSS选择器
①ID选择器
#elem{ }
id=“elem”
注:
1.在一个页面中,ID值是唯一的,出现多次是不合法的
2.规范命名,字母_-数字(命名的第一位不能是数字)
3.命名方式,驼峰式,下划线式,短线式
驼峰写法:searchButtom(小驼峰)SearchButton(大驼峰)searchSmallButton
短线写法:search-small-button
下划线写法:search_small_buttom
②CLASS选择器
.elem{}
class=“elem”
注:
1、class选择器是可以复用的。
2、可以添加多个class样式。
3、多个样式的时候,样式的优先级根据CSS决定,而不是class属性中的顺序。
4、标签+类的写法
③标签选择器(TAG选择器)
CSS: div{}
HTML: <div</div
使用的场景:
1.去掉某些标签的默认样式使
2.复杂的选择器中,如层次选择器
④群组选择器(分组选择器)
可通过逗号的方式,给多个不同的选择器添加统一的CSS样式,来达到代码的复用
CSS:div,p,span{}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div{background: red;}
#text{background: red;}
.title{background: red;}
</style>
<title>Document</title>
</head>
<body>
<div>这是一个块</div>
<p id="text">这是一个段落</p>
<h2 class="title">这是一个标题</h2>
</body>
</html>
⑤通配选择器
*{}
以星号的方式给所有的标签都添加样式
注:尽量避免使用统配选择器
使用场景:
1.去掉所有标签的默认样式时
⑥层次选择器
后代:M N{ }当前M标签里面所有的标签
父子:M>N{ }当前M标签里面一层的标签
兄弟:M~N{ }当前M下面的所有兄弟N标签
相邻:M + N{ }当前M下面相邻的N标签
⑦属性选择器
M[attr]{}
= :完全匹配
*= :部分匹配
^=: 起始匹配
$=:结束匹配
[][][]:组合匹配
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div[class]{background: red;}
</style>
<title>Document</title>
</head>
<body>
<div>aaa</div>
<div class="box">BBB</div>
<div class="search">CCC</div>
</body>
</html>
⑧伪类选择器
CSS伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时侯,用伪类来添加
:link 访问前的样式(只能添加给a的标签)
:visited 访问后的样式(只能添加给a的标签)
:hover 鼠标移入时的样式(可以添加给所有的标签)
:active 鼠标按下时的样式(可以添加给所有的标签)
注:
1.link visited只能给a标签添加,hover和active可以给所有标签添加
2.如果四个伪类都生效,一定要写注意顺序:LVHA
3.一般网站只这样去设置:a{} a:hover{}
:afer、:before 通过伪类的方式给元素添加一段文本内容,使用content属性
: checked、 :disabled:通过伪类元素给表单标签添加属性
:focus :在操作之后给目标群元素添加伪类元素
结构性伪类选择器
:nth-of-type() 、:nth-child()
角标是从1开始的,1表示第一项,2表示第二项 n值表示从0到无穷大
:first–of-type 、 :first-child
:last-of-type 、 :last-child
:only-of-type 、 :only-child
nth-of-type()和nth-child()之间的区别
type:类型
child:孩子
14.CSS样式
文字相关的样式i可以继承
布局相关的样式不能被继承
(默认是不能继承的,但是可以设置继承属性inherit值)
注:inherit值
15.CSS优先级
相同样式优先级
当设置相同样式时,后面的优先级较高,但不建议出现重复设置样式的情况
内部样式与外部样式
内部样式与外部样式 i优先级相同,如果都设置了相同样式,那么后写的引入方式优先级更高
单一优先级
style行间 > id > class > tag > * > 继承
注:
style行间 权重 1000
id 权重 100
class 权重 10
tag 权重 1
!important
提升优先级,非规范方式,不建议使用(不能针对继承的属性进行优先级的提升)
标签+类与标签
优先级:标签 + 类 > 单类
群组优先级
群组选择器与单一选择器的优先级相同,靠后写的优先级高
16.层次优先级
①权重比较
ul li .box p input{} :1 + 1 + 10 + 1 +
.hello span #elem{} :10 + 1 + 100
②约分比较
ul li .box p input{} : li input{}
.hello span #elem{} : #elem{}
17.CSS盒子模型
组成:content(物品) - > padding(填充物) - > border(包装盒) - > margin(盒子与盒子之间的间距)
content:内容区域 width和height组成的
padding:内边距(内填充)
number:30px
只写一个值:上下左右
写两个值:上下 、左右
写四个值:上 、 右 、 下 、 左
单一样式只能写一个值:
padding-left
padding-right
padding-top
padding-bottom
margin:外边距(填充)
number:30px
只写一个值:上下左右
写两个值:上下 、左右
写四个值:上 、 右 、 下 、 左
单一样式只能写一个值:
margin-left
margin-right
margin-top
margin-bottom
注:
1.背景颜色会填充到margin以内的区域(不包括margin区域)
2.文字会在content区域
3.padding不能出现负值,margin是可以出现负值
box-sizing
box-sizing属性允许您以特定的方式定义匹配某个区域的特定元素。取值为content-box(默认值) border-box
box-sizing:
盒尺寸,可以改变盒子模型的展示状态
默认值:content-box:width、height - > content
border-box:width、height - > content padding border
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box{width: 20px;height: 100px;background: red;border: 10px blue solid;
padding:30px 50px ;
box-sizing: content-box;
}
</style>
</head>
<body>
<div id="box">这是一个盒子</div>
</body>
</html>
使用场景:
1.不用再去计算一些值
2.解决一些100%的问题
盒子模型的一些问题
margin叠加问题,出现在上下margin同时存在的时候。会取上下中值较大的作为叠加的值,这个问题只在上下有,左右是没有叠加这个问题的
解决方案:
1.BFC规范
2.想办法只给一个元素添加间距
margin传输
margin传输的问题只会出现在嵌套的结构中,且只有margin-top会有传递的问题,其他三个方向是没有传递问题的
解决方案:
1.BFC规范
2.给父容器加边框
3.margin换成padding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1{width: 200px;height: 100px;background: red;padding-top: 100px;}
#box2{width: 100px;height: 100px;background: blue;}
</style>
</head>
<body>
<div id="box1">
<div id="box2"></div>
</div>
</body>
</html>
margin自身居中
1.margin左右自适应是可以的,上下自适应是不行的(如果想要实现上下自适应的话,需要在第二大部分进行学习)
2。width、height不设置的时候对盒子的影响,会自动计算容器大小,节省代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1{width: 350px;height: 350px;border: 1px black dashed;padding: 27px;}
#box2{border: 5px#d7effe solid; padding: 20px;}
#box3{background: #ffa0df;padding: 41px;}
#box4{border: 1px white dashed;padding: 3px;}
#box5{border: 1px white dashed; padding: 49px;}
#box6{width: 100px;height:100px ;background: #96ff38;border:#fcff00 5px solid;}
</style>
</head>
<body>
<div id="box1">
<div id="box2">
<div id="box3">
<div id="box4">
<div id="box5">
<div id="box6">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
18.标签分类
按类型
block:块(div、p、ul、li、h1…)
1.独占一行
2.支持所有样式
3.不写宽的时候,跟父元素的宽相同
4.所占区域是一个矩形
inline:内联(span、a、em、strong、img…)
1.挨在一起
2、有些样式不支持,如width、height、margin、padding
3.不写宽的时候,宽度由内容决定
4.所占区域不一定是矩形
5.内联标签之间会有空袭,由换行产生
inline-block:内联块(input、select…)
1.挨在一起,支持宽高
注:布局一般用块标签,修饰文本一般用内联标签
按内容
Flow:流内容
Metadata:元数据
Sectioning:分区
Heading:标题
Phrasing:措施(内联)
Embedded:嵌入的
Interactive:互动的
Flow content详解
按显示
替换元素:浏览器根据元素的标签属性,来决定元素的具体显示内容
非替换元素:将内容直接告诉浏览器,将其显示出来
.显示框类型
display
block
inline
inline-block
none
注:display:none与visibility:hidden区别
display:none 不占空间的隐藏
visibility:hidden 占空间的隐藏
19.标签嵌套规范
块标签可以嵌套内联标签`
<div>
<span></span>
<a href=""></a>
</div>
块标签不一定能嵌套块标签
错误
<p>
<div></div>
</p>
内联是不能嵌套块
错误
<span>
<div></div>
</span>
特殊:
正确
<a href="">
<div></div>
</a>
19.溢出隐藏
overflow
visible:默认
hidden:隐藏
scroll:可左右拖动
auto:自动排列可拖动上下
over-flow-x、overflow-y分别针对两个轴设置
20.透明度与手势
opacity:0(透明)~ 0.5(半透明) ~ 1(不透明)
注:占空间、所有的子内容也会透明
rgba():0~1
注:可以让指定的样式透明,而不影响其他样式
cursor:手势
default:默认箭头
准备图片:.cur 、 .ico
cursor:url(./img/curoor.ico),auto;
20.最大最小宽高
min-width 、min-height
min-width、 min-height
=注:注
%单位:换算 - > 以父容器的大小进行换算的
一个容器怎么适应屏幕的高:
容器加height:100% ;
body :100%;
html : 100%
html,body{height:100%}
.contrainer{height:100%}
21.CSS默认样式
有些标签有默认样式,有些标签没有默认样式
没有默认样式:div , span …
有默认样式:body , h1…h6 , p , ul …
body - > margin : 8px
h1 - > margin : 上下 21.440px
font-weight :bold
p - > margin : 上下 16 px
ul - >margin : 上下16px
padding : 左 40px
默认点:list-style : disc
a - > text-decoration : underline;
22.CSS rest:
*{margin;0:padding:0;}
优点:不用考虑哪些标签有默认的margin和padding
缺点:稍微大影响性能
body,p,h1,ul{margin:0;padding:0;}
ul{list-style:none;}
a{text-decoration:none;color:#999;}
img{display;block}
问题的现象:图片跟容器底部有一些空隙
内联元素的对齐方式是按照文字基线对齐的,而不是文字底线对齐的
vertical-align:baseline;基线对齐方式,默认值
img{vertical-align:bottom;}是推荐到解决方式
写具体页面的时候或一个布局效果的时候:
1.写结构
2.css重置样式
3.写具体样式
23.float浮动
文档流
文档流是文档中可现实对象在排列时所占用的位置
float特性
加浮动的元素,会脱离文档流,会延迟父容器靠左或靠右排列,如果之前已经有浮动的元素,会爱着浮动的元素进行排列
float取值
left
right
none(默认)
float注意事项
只会影响后面的元素
内容默认提升半层
默认宽根据内容决定
换行排列
主要给元素添加,但也可以给内联元素添加
利用clear属性清除float浮动
固定宽高:不推荐,不能把高度固定死,不适合做自适应的效果
父元素浮动:不推荐,因为父容器浮动也会影响到后面的元素
overfloat:hidden( BFC规范),不推荐,父容器会影响到后面的元素
设置空标签:不推荐,会多加一个标签
after伪类:推荐,是空标签的加强版,目前各大公司的做法
(clear属性只会操作块标签,对内联标签不起作用)
练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
ul{list-style: none;}
img{display: block;}
a{text-decoration: none;color: #666;}
h1,h2,h3{font-size: 16px;}
.l{float: left;}
.r{float: right;}
.clear:after{content: "";display:block;clear: both;}
#main{width: 366px;margin: 20px auto;}
#main.title{height: 23px;line-height: 23px;font-size: 12px;font-weight: bold;padding-left: 30px;
/* background:url(./img2/bg_title.png)no-repeat,url(./img2/bg_line.png) repeat-x; */
}
#main ul{overflow: hidden;margin-top:13px;}
#main li{margin-bottom: 22px;}
#main .pic{width: 99px;border: 1px solid #c6c1d6;margin-left: 5px;}
#main .pic img{margin: 2px;}
#main .content{width: 240px;margin-left: 13px;}
#main .content h2{font-size: 12px; line-height: 24px;}
#main .content p{font-size: 12px; line-height: 20px;}
</style>
</head>
<body>
<div id="main">
<h2 class="title">外媒评论精选</h2>
<ul>
<li class="clear">
<div class="l pic">
<a href="">
<img src="./图片/10.26/1 (1).jpg" alt="" width="50px" height="50px">
</a>
</div>
<div class="l content">
<h2>测试标题</h2>
<p>
测试段落测试段落测试段落测试段落测试段落测试段落......
<a href="#">[详细]</a>
</p>
</div>
</li>
<li class="clear">
<div class="l pic">
<a href="">
<img src="./图片/10.26/R-C.png" alt="" width="50px" height="50px">
</a>
</div>
<div class="l content">
<h2>测试标题</h2>
<p>
测试段落测试段落测试段落测试段落测试段落测试段落......
<a href="#">[详细]</a>
</p>
</div>
</li>
<li class="clear">
<div class="l pic">
<a href="">
<img src="./gege.jpg" alt="" width="50px" height="50px">
</a>
</div>
<div class="l content">
<h2>测试标题</h2>
<p>
测试段落测试段落测试段落测试段落测试段落测试段落......
<a href="#">[详细]</a>
</p>
</div>
</li>
</ul>
</div>
</body>
</html>
24.point定位
position特性
css position属性用于指定一个元素在文档中的定位方式。top、tight、bottom、left属性则决定了该元素的最终位置。
relative相对定位
如果没有定位偏移量,对元素本身没有影响
不使元素脱离文档流
不影响其他元素布局
left、right、top、bottom是相对与当前元素自身进行偏移的
<head>
<style>
.div1{width: 100px;height: 100px;background-color: red;}
.div2{width: 100px;height: 100px;background-color: blue;position: relative;left: 100px;top: 100px;}
.div3{width: 100px;height: 100px;background-color: yellow;}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
absolut绝对定位
使元素完全脱离文档流
使内联元素支持宽高(让内联具备块特性)
使块元素默认宽根据内容决定(让块具备内联的特性)
如果有定位祖先元素相对于对位祖先元素发生偏移,没有定位祖先元素相对于整个文档发生偏移(绝对、相对、固定)
<head>
<style>
.div1{width: 100px;height: 100px;background-color: red;position:absolute: right 100px;}
.div2{width: 200px;height: 200px;background-color: blue;}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
<head>
<style>
.div1{width: 100px;height: 100px;background-color: red;float: left;}
.div2{width: 200px;height: 200px;background-color: blue;}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
fixed固定定位
使元素完全脱离文档流
使内联元素支持宽高(让内联具备块特性)
使块元素默认宽根据内容决定(让块具备内联的特性)
相对于整个浏览器窗口进行偏移,不受浏览器滚动条的影响
<head>
<style>
body{height: 3000px;background-color: blue;}
button{position: fixed;right: 0;top: 200px;}
</style>
</head>
<body>
<button><a >我是一个块</a></button>
</body>
该块随页面滚动而滚动,不随滚动条滚动而滚动
sticky粘性定位
在指定位置,进行粘性操作
<head>
<style>
body{height: 3000px;}
.div1{background-color: blue;position: sticky;top: 50px;}
</style>
</head>
<body>
<p>aaaaaa</p>
<p>aaaaaa</p>
<p>aaaaaa</p>
<p>aaaaaa</p>
<p>aaaaaa</p>
<p>aaaaaa</p>
<div class="div1">这是一个块</div>
<p>bbbbbb</p>
<p>bbbbbb</p>
<p>bbbbbb</p>
<p>bbbbbb</p>
<p>bbbbbb</p>
</body>
该块在页面内的位置相对固定
z-index定位层级
默认层级为0
嵌套时候的层级问题
<head>
<style>
.div1{width: 100px;height: 100px;background-color: red;position: absolute;z-index: 0;}
.div2{width: 100px;height: 100px;background-color: blue;position: absolute;left: 50px;top: 50px;z-index: 1;}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
<head>
<style>
.div1{width: 100px;height: 100px;background-color: red;position: absolute;z-index: 2;}
.div2{width: 100px;height: 100px;background-color: blue;position: absolute;left: 50px;top: 50px;z-index: 1;}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
25.一些网页操作
菜单栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
ul{list-style: none;}
#menu{width: 100px;height: 30px;margin: 20px auto;border: 1px solid black;position: relative;}
#menu ul{width: 100px;border: 1px black solid;position: absolute;left: -1px;top: 30px;background-color: aliceblue; display: none;}
#menu:hover ul{display:block;}
#menu ul li:hover{background: grey;}
p{text-align: center;}
</style>
</head>
<body>
<div id="menu">
卖家中心
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ul>
</div>
<p>测试段落测试段落测试段落测试段落</p>
</body>
</html>
定位实现居中
<style>
#box1{width: 200px;height: 200px;border: solid black 1px;position: relative;}
#box2{width: 50px;height: 50px;background: red;
position: absolute;left: 100px;top: 100px;margin: -25px 0 0 -25px;}
</style>
25.CSS添加省略
width
必须有一个固定的宽
white-space:nowrap
不让内容折行
overflow:hidden
隐藏溢出内容
text-overflow:ellipsis
添加省略号
<style>
#content{width: 200px;border: 1px black solid;
white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
</style>
26.CSS Sprite
特性
CSS雪碧也叫CSS精灵,允许将一个页面涉及到的所有零星图片都包含到一张大图中去加载
好处
可以减少图片的质量,网页的图片加载速度快
减少图片的请求次数,加快网页的打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<head>
<style>
#box1{width: 300px;height: 500px;border: 1px black solid; line-height :50px;padding-left: 300px;background:url(./gege.jpg) no-repeat left 300px;}
</style>
</head>
</head>
<body>
<div id="box1"></div>
</body>
</html>
练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{width: 300px;height: 200px;background: url(./gege.jpg);position: relative;}
div::after{content: "你太美";position: absolute;left: 244px;top: 174px;}
div::before{content: "只因";position: absolute;left: 244px;top: 5px;background:red;
display: block;}
</style>
</head>
<body>
<div></div>
</body>
</html>
27.CSS圆角
border-radius
给标签添加圆角
注意:
设置一个值:四个角
设置两个值:左上右下 、右上左下
设置四个值:左上、右上、右下、左下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1{width: 200px;height: 300px;background-color: red;border-radius: 50%;}
#box2{width: 200px;height: 200px;background-color: red;border-radius: 30px/40px;}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
![在这里插入图片描述](https://img-blog.csdnimg.cn/10011cf1c29546d0959124f74a460726.png#pic_center
练习
<head>
<style>
.div1{width: 300px;height: 150px;background-color: black;border-radius:150px 150px 0 0 ;}
</style>
</head>
<body>
<div class="div1"></div>
</body>
28.文博尚美网页练习
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="public.css" />
<link rel="stylesheet" type="text/css" href="博文尚美.css"/>
</head>
<body>
<!--top区域-->
<div class="top">
<h1 class="logo"><a href="#"><img src="./图片/博文尚美.jpeg"/></a></h1>
<ul class="nav">
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">PROTFOLIO</a></li>
<li><a href="#">SERVICE</a></li>
<li><a href="#">NEWS</a></li>
<li class="lastli"><a href="#">CONTACT</a></li>
</ul>
</div>
<div class="bannerWrap">
<div class="banner">
<p>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</p>
</div>
</div>
<!--service区域-->
<div class="service">
<h3 class="tit">服务范围<span>OUR SERVICES</span></h3>
<ul class="service-list">
<li>
<a href="#"><img src="./图片/7.jpeg" alt="" />
<h4>1.WEB DESIGN</h4>
<p>企业品牌网站设计/手机网站制作
动画网站创意设计</p>
</a>
</li>
<li>
<a href="#"><img src="./图片/8.jpeg" alt="" />
<h4>2.GRAPHIC DESIGN</h4>
<p>标志LOGO设计/产品宣传册设计
企业广告/海报设计</p>
</a>
</li>
<li>
<a href="#"><img src="./图片/9.jpeg" alt="" />
<h4>1.web design</h4>
<p>企业年出口数据导出你的岩京安信尽可能挖掘出</p>
</a>
</li>
<li>
<a href="#"><img src="./图片/10.jpeg" alt="" />
<h4>1.web design</h4>
<p>企业年出口呼次湖光岩京安信尽可能挖掘出</p>
</a>
</li>
</ul>
</div>
<!--client区域-->
<div class="clientWrap">
<div class="client">
<h3 class="tit">{ 客户案例 }<span>With the best professional technology, to design the best innovative web site</span></h3>
<p class="clear_fix">
<a href="#"><img src="./图片/4.jpeg"/></a>
<a href="#"><img src="./图片/6.jpeg"/></a>
<a href="#"><img src="./图片/3.jpeg"/></a>
</p>
<a class="more" href="#">VIEW MORE</a>
</div>
</div>
<!--news区域-->
<div class="news">
<h3 class="tit">最新资讯<span>THE LATEST NEWS</span></h3>
<div class="news-content clear_fix">
<p><img src="./图片/5.jpeg"/></p>
<div class="news-content_right">
<dl>
<dt>
<span class="span1">09</span>
<span class="span2">Jan</span>
</dt>
<dd>
<h4 class="special">网站排名进入前三的技巧说明</h4>
<p>很多客户都会纳闷为什么自己的网站老是优化不到搜索引擎首页,更不用说进首页前三了。那么网站优...</p>
</dd>
</dl>
<dl>
<dt>
<span class="span1">08</span>
<span class="span2">Jan</span>
</dt>
<dd>
<h4>flash网站制作的优缺点</h4>
<p>虽然HTML5程序语言出现,大有逐渐代替Flash网站制作的意味,但是过于生硬的HTML5动画效果,始终...</p>
</dd>
</dl>
<dl>
<dt>
<span class="span1">07</span>
<span class="span2">Jan</span>
</dt>
<dd>
<h4>做个网站多少钱?</h4>
<p>“做个网站多少钱?”很多客户打电话过来直接第一句就抛出来的问题。这好比买辆车多少钱,你是要...</p>
</dd>
</dl>
<dl>
<dt>
<span class="span1">06</span>
<span class="span2">Jan</span>
</dt>
<dd>
<h4>哪些网站优化手法属于网站过度优化</h4>
<p>大部分人都想让自己的网站,一夜之间出现在搜索引擎首页,独占鳌头。但是事实告诉我们罗马不是一...</p>
</dd>
</dl>
</div>
</div>
</div>
<!--bottom区域-->
<div class="bottomWrap">
<div class="bottom clear_fix">
<p class="copy">Copyright 2006- 2014 Bowenshangmei Culture All Rights Reserved</p>
<p class="subnav"><a href="#">Home <span>|</span></a>
<a href="#">About<span>|</span></a>
<a href="#">Portfolio<span>|</span></a>
<a href="#">Contact</a></p>
</div>
</div>
</body>
</html>
CSS
@charset "utf-8";
html,body,ol,ul,li,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0;}
body{
font-size:16px;
font-family: '微软雅黑';
}
ul,ol,li{
list-style:none;
}
h1,h2,h3,h4,h5,h6{
font-size:16px;
font-weight: normal;
}
b,strong{
font-weight: normal;
}
i,em{
font-style: normal;
}
a,u,ins{
text-decoration: none;
}
img{
border: none;/*取消IE浏览器里面加了超链接的图片的默认边框*/
display: block;/*取消图片的默认空隙*/
}
input,fieldset{
outline: none;/*取消input聚焦时产生的蓝色框*/
border:0;
}
.clear_fix:after{
content:'.';
clear:both;
height:0;
overflow:hidden;
display:block;
visibility: hidden;
}
.clear_fix{
zoom:1;/*兼容ie6,7的高度自适应问题*/
}
CSS
.top,.banner,.service,.client,.news,.bottom{
width: 1082px;
margin:0 auto;
}
/*top区域*/
.top{
/*padding: 19px 0 18px 135px;*/
height: 81px;
}
.top .logo{
float: left;
}
.top .nav{
font-family: arial;
padding-top: 19px;
float: right;
}
.top .nav li{
float: left;
}
.top .nav a{
display: block;
color: #646464;
line-height: 44px;
padding: 0 28px 0 27px;
}
.nav .lastli a{
padding-right: 0;
}
/*banner区域*/
.bannerWrap{
width: 100%;
height: 469px;
background:black url(./图片/2.jpeg) no-repeat center top ;
}
.banner{
height: 469px;
position: relative;
}
.banner p{
width: 92px;
height: 12px;
position: absolute;
bottom: 19px;
left: 50%;
margin-left: -46px;
}
.banner p span{
float: left;
width: 8px;
height: 8px;
border:2px solid #fff ;
margin:0 6px 0 5px;
border-radius: 50%;
font-size: 0;
}
.banner p span:hover{
background: #fff;
}
/*service区域*/
.service{
height: 407px;
}
.tit{
height: 81px;
background:url(./图片/花.png) no-repeat center 67px;
line-height: 32px;
font-size: 20px;
color: #363636;
text-align: center;
padding-top: 55px;
}
.tit span{
font-size: 14px;
line-height: 20px;
font-family: arial;
color: #9f9f9f;
display: block;
}
.service-list{
padding: 0 10px;
}
.service-list li{
width: 190px;
height: 270px;
float: left;
text-align: center;
padding: 0 37px ;
}
.service-list li img{
margin: 0 auto;
}
.service-list h4{
font-size: 14px;
line-height: 36px;
font-weight: bold;
color: #343434;
}
.service-list p{
font-size: 14px;
line-height: 22px;
color: #6d6d6d;
}
/*client区域*/
.clientWrap{
width: 100%;
height: 460px;
background: #f8f8f8;
}
.client{
height: 460px;
}
.client .tit{
height: 90px;
padding-top: 50px;
color:#66c5b4;
background: url(./图片/花.png) no-repeat center 61px;
}
.client span{
color: #9f9f9f;
}
.client p img{
float: left;
margin: 0 7px 0 12px;
}
.client .more{
display: block;
width: 176px;
height: 37px;
font-size: 14px;
font-family: Arial;
line-height: 42px;
color: #ffffff;
text-align: center;
background:#66c5b4;
border-radius:18px ;
margin: 0 auto;
margin-top: 36px;
}
/*news区域*/
.news{
margin-bottom: 89px;
}
.news .tit{
height: 104px;
padding-top: 62px;
background: url(./图片/花.png) no-repeat center 73px;
}
.news-content img{
width: 224px;
height: 186px;
border:5px solid #e5e5e7 ;
float: left;
}
.news-content_right{
width: 840px;
float: left;
}
.news-content_right dl{
width: 420px;
float: left;
}
.news-content_right dl:nth-child(1),.news-content_right dl:nth-child(2){
margin-bottom: 44px;
}
.news-content_right dt{
width: 72px;
height: 71px;
font-family: arial;
text-align: center;
border-right: 1px solid #dcdcdc ;
float: left;
}
.news-content_right dt .span1{
height: 50px;
font-size: 39px;
line-height: 61px;
font-weight: bold;
color: #66c5b4;
}
.news-content_right dt span{
display: block;
height: 21px;
font-size: 20px;
line-height: 30px;
color: #999999;
}
.news-content_right dd{
float: right;
width: 330px;
margin-left: 17px;
}
.news-content_right dd h4{
height: 22px;
font-size: 14px;
line-height: 24px;
color: #3f3f3f;
margin-bottom: 12px;
}
.news-content_right .special{
color: #dcdcdc;
}
.news-content_right dd p{
height: 37px;
font-size: 12px;
line-height: 21px;
color: #a4a4a4;
padding-left: 3px;
}
/*bottom区域*/
.bottomWrap{
width: 100%;
height: 54px;
background: #66c5b4;
}
.bottom{
font-size: 12px;
font-family: arial;
line-height: 54px;
color: #fff;
}
.bottom .copy{
float: left;
}
.subnav{
float: right;
}
.bottom a {
float: left;
height: 11px;
color: #fff;
}
.bottom span{
margin: 0 19px;
}
29.百度官网
百度.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度</title>
<link rel="stylesheet" href="百度.css">
</head>
<body>
<!--头部开始-->
<div class="header">
<ul class="left">
<li class="li_1"><a href="">新闻</a></li>
<li class="li_1"><a href="">hao123</a></li>
<li class="li_1"><a href="">地图</a></li>
<li class="li_1"><a href="">视频</a></li>
<li class="li_1"><a href="">贴吧</a></li>
<li class="li_1"><a href="">学术</a></li>
<li class="li_1" id="more_list">
<div id="more_wrap"> <a href="">更多</a>
<div id="more_box">
<ul>
<li class="more_li">
<img src="images/wangpan.png" alt=""><div class="tag_more">网盘</div>
</li>
<li class="more_li">
<img src="images/zhidao.png" alt=""><div class="tag_more">知到</div>
</li>
<li class="more_li">
<img src="images/baike.png" alt=""><div class="tag_more">百科</div>
</li>
<li class="more_li">
<img src="images/tu.png" alt=""><div class="tag_more">图片</div>
</li>
<li class="more_li">
<img src="images/baobaozhidao.png" alt=""><div class="tag_more">宝宝知道</div>
</li>
<li class="more_li">
<img src="images/wneku.png" alt=""><div class="tag_more">文库</div>
</li>
<li class="more_li">
<img src="images/jingyan.png" alt=""><div class="tag_more">经验</div>
</li>
<li class="more_li">
<img src="images/yinyue.png" alt=""><div class="tag_more">音乐</div>
</li>
</ul>
</div>
</div>
</li>
</ul>
<div class="right" >
<div id="more_li">
<span class="r_btn1" ><a href="">设置</a></span>
<div id="more_menu">
<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>
</div>
<a class="r_btn2">登陆</a>
</div>
</div>
<!--头部结束-->
<!--中间部分开始-->
<div class="main">
<div class="search_wrap ">
<img id="lg" src="../图片/11.22/10001.png" alt="">
</div>
<input class="search_l">
<div class="search_r" href="" >百度一下</div>
<table >
<tr class="news_type">
<td style="padding-left:14px;padding-top:3px;">百度热榜</td>
<td style="width: 300px;"><a id="hhh">换一换</a></td>
</tr>
<tr class="news_type">
<td ><a href=""><span style="color:#fe2d46;">1</span>  喀什新增确诊5例 无症状19例  <span class="_new">新</span></a></td>
<td><a href=""><span style="color:#9b9fac;">4</span>  家具厂培训会员工跪地自扇耳光</a></td>
</tr>
<tr class="news_type">
<td><a href=""><span style="color:#ff6600">2</span>  小兴安岭首次找到东北虎吃熊证据</a></td>
<td><a href=""><span style="color:#9b9fac;">5</span>  十城房价跌幅超5%</a></td>
</tr>
<tr class="news_type">
<td><a href=""><span style="color:#faa90e;">3</span>  中国空间站拒绝美国加入  <span class="_hot">热</span></a></td>
<td><a href=""><span style="color:#9b9fac;">6</span>  喀什完成全员核酸检测</a></td>
</tr>
</table>
</div>
</div>
<!--中间部分结束-->
<!--末尾部分开始-->
<div class="footer">
<div class="footer_l">
<ul >
<li><a href="">设为首页</a></li>
<li><a href="">关于百度</a></li>
<li><a href=""> About Baidu</a></li>
<li><a href="">百度营销</a></li>
<li><a href="">使用百度前必读</a></li>
<li><a href="">意见反馈</a></li>
<li><a href="">帮助中心</a></li>
</ul>
</div>
<div class="footer_r">
<ul >
<li><a href="">yst</a></li>
<li><a href="">计算机</a></li>
<li><a href=""> 银河系科技大学</a></li>
</ul>
</div>
<img href="images/erweima">
</div>
<!--末尾部分结束-->
</body>
</html>
百度.css
*{
padding:0;margin:0;
color: #222;
}
a{
text-decoration: none;
padding-left: 12px;
}
a:hover{
color:#4e71f2;
}
li{
list-style: none;
}
.header{
height: 60px;
line-height:60px;
text-align: center;
}
.header .left{
float:left;
}
.header .right{
position:absolute;
right:0px;
top:0px;
z-index:100;/*层叠*/
padding-right:24px;
float:right;
}
.header .li_1{
float:left;
font:13px/23px Arial,sans-serif;
color:#222;
position:relative;
margin-right:31px;margin-top:19px;display:inline-block;
}
.right #more_li{
color:#222;
position:relative;
margin-right:35px;
display:inline-block;
font-size:14px;
}
.header .right .r_btn1{
display:inline-block;
vertical-align:top;cursor:pointer;
}
.right #more_menu{
display:none;
position:absolute;
top:28px;
left:-14px;
width:85px;
height:165px;
line-height: 22px;
text-align: left;
box-shadow:0 2px 10px 0 rgba(0,0,0,.15);
border-radius: 6px;
margin-top:15px;
}
.right #more_menu li{margin-top:9px;}
#more_li:hover #more_menu{display:block;}
.header .right .r_btn2{
display:inline-block;
margin-top:19px;
background-color: #4e71f2;
padding-left:2px;
font-size:14px;
height:24px;
width:48px;
color:#fff;
line-height: 24px;
border-radius: 6px;
}
#more_wrap{
position:relative;
display:block;
}
#more_box{
display:none;
position:absolute;
right:-12px;
top:30px;
width: 300px;
height: 223px;
line-height:15px;
text-align: center;
box-shadow:0 2px 10px rgba(0,0,0,0.15);
border-radius:12px ;
background-color: #fff;
/*box-shadow: 10 10;*/
}
#more_box li{margin-left:18px;}
#more_list:hover #more_box{
display:block;
}
#more_box img {
height: 42px;
width: 42px;
border:1px solid rgba(0,0,0,.03);
border-radius: 12px;
}
.tag_more{
width: 42px;
text-align: center;
}
.more_li{
float:left;
line-height:24px;
margin-left:12px;
margin-right:12px;
margin-top:16px;
}
.main{
clear:both;
}
#lg{
position:absolute;
left:50%;
top:45px;
margin-left:-135px;
width: 270px;
height: 129px;
}
.search_l{
position:absolute;
left:625px;
top:185px;
font-size:16px;
width: 546px;
height: 40px;
vertical-align: top;
border:2px solid #c4c7ce;
border-radius:10px 0 0 10px;
background-color: #fff;
color:#222;
overflow: hidden;
}
.search_r {
position: absolute;
top:185px;
left:1173px;
cursor: pointer;
width: 100px;
height:44px;
line-height: 45px;
background-color: #4e6ef2;
border-radius:0 10px 10px 0;
font-size:14px;
color:#fff;
text-align: center;
}
.main .search_r:hover{
background-color: #4662d9;
}
.main input:hover{
border-color: #a7aab5;
}
.main table{
margin:200px 610px;
width: 670px;
height: 180px;
font-size:15px;
}
.main #hhh{
padding-left:254px;
color:#a6a9b4;
}
._new{
display: inline-block;
background-color: #ff455b;
width: 14px;
height: 19px;
color:#fff;
padding:0 2px;
border-radius: 5px;
}
._hot{
display: inline-block;
background-color: #ff9812;
width: 14px;
height: 19px;
color:#fff;
padding:0 2px;
border-radius: 5px;
}
.footer{
width: 100%;
height: 40px;
position:fixed;
bottom:0;
background-color: #fbfbfb;
line-height: 40px;
font-size:12px;
}
.footer_l li a{
float:left;
padding-left:14px;
color:#9195a3;
}
.footer_l li a:hover{
color:#222;
}
.footer_r li a{
float:right;
font-size:16px;
padding-right:15px;
}
30.strong和b、em和i
strong 和 em 都是表示强调的标签 表现形态为文本加粗和斜体
b 和 i 同样也表示文本加粗和斜体
区别:strong和em 是具备语义化的,而b和i是不具备语义化的
使用CSS样式也能呈现出加粗和斜体的表现形态
优势:可以不用多个class进行区分,简化选择器操作
31.引用标签
blockquote :引用大段的段落解释
q :引用小段的短语解释
abbr :缩写或首字母缩略词
address :引用文档地址信息
cite :引用著作的标题
32.iframe嵌套页面
其中src与srcdoc(可渲染标签)同时存在时仅优先识别排在首位的
应用场景:数据传输、共享代码,局部刷新、第三方介入
属性 | 含义 |
---|---|
frameborder | 规定是否显示框架周围的边框 |
width | 定义iframe的宽度 |
height | 定义iframe的高度 |
scrolling | 规定是否在iframe中显示滚动条 |
src | 规定在iframe中引入URL |
srcdoc | 规定在iframe中显示的页面内容 |
可以引入其他的html到当前html中显示
主要是利用iframe的属性进行样式的调节
应用场景 :数据传输,共享代码,局部刷新,第三方介入等。
33.br与wbr标签
br:在br标签处直接换行
wbr:只应该在表示计算机源代码或者其他机器可以阅读的文本内容上使用,虽然code标签只是吧文本变成等宽字体,但它暗示着这段文本是源程序代码
<body>
<p>这是一段文字 aaaaaaa<br> aaaaa aaaaaa aaaaaa aaaaaa aaaaaaaaa</p>
<p>这是一段文字bbbbbbbbbb bbbbbb bbbbbbbb bbbbbb</p>
<p>这是一段文字c cc<wbr>bbbbbbbbbb<wbr>aaaaa aaaaaa aaaaaa aaaaaa aaaaaaaaa</p>
</body>
34. pre 与 cod
pre元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符
只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用 code 标签。虽然 code 标签通常只是把文本变成等宽字体,但它暗示着这段文本是源程序代码
35.map与area
给特殊图形添加链接,area能添加的热区的形状:矩形、圆形、多边形…
定义一个客户端图像映射。图像映射( image-map )指带有可点击区域的一幅图像。area元素永远嵌套在map元素内部。area元素可定义图像映射中的区域。
area元素的href属性定义区域的URL , shape属性来定义区域的形状,coords属性定义热区的坐标
36.embed与object
给flash和一些插件进行渲染操作的标签。
embed和object都表示能够嵌入一些多媒体,如flash动画、插件等。基本使用没有多大区别,主要是为了兼容不同的浏览器而已。
object元素需要配合param元素一起完成。
37.audio 与 video(引入音频和视频的标签)
audio 标签表示嵌入音频文件
video 标签表示嵌入视频文件。
默认控件是不显示的,可通过 controls 属性来显示控件
为了能够支持多个备选文件的兼容,可以配合 source 标签
loop循环属性 autoplay自动播放
38.文字注解与文本方向
ruby 标签定义
ruby 注释(中文注音或者字符),rt 标签定义字符(中文注音或字符)的解释或发音
bdo标签可覆盖默认的文本方向
39.扩展link标签
<link rel="icon" type="/image/x-icon" href="http://www.mobiletrain.org/favicon.ico">
<link rel="dns-prefetch" href="//static.360buyimg.com">
40.扩展meta标签
meta添加一些辅助信息
description:描述网站信息
Keywords:关键词
refresh:刷新
renderer:针对内核
三.JavaScrip
交互行为
①介绍
②行为
四.切图流程
五.PC企业站布局
六.PC游戏站布局
(二)、HTML+CSS系列教程2.溯本求源
一.HTML扩展
二.CSS扩展
三.HTML5新语法
1.html5新语义化标签
header:页眉
footer:页脚
main:主体
hgroup:标题组合
nav:导航
article:独立的内容
aside:辅助信息的内容
section:区域
figure:描述图像或视频
figcaption:描述图像或视频的标题部分
datalist:选项列表
details/summary:文档细节/文档标题
progress/meter:定义进度条/定义度量范围
time:定义日期或时间
mark:带有记号的文本
注:header、footer、main在一个网页中只能出现一次
四.CSS3新语法
五.兼容于hack
(三)、HTML+CSS系列教程3.风生水起
一.弹性布局
1.Flex弹性盒子模型
①flex-direction
flex-direction用来控制子项整体布局方向,是从左往右还是从右往左,是从上往下还是从下往上。
②flex-wrap
flex-wrap用来控制子项整体单行显示还是换行显示。
③flex-flow
flex-flow属性是flex-direction和flex-wrap的缩写,表示flex布局的flow流动特性。第一个值表示方向,第二个值表示换行,中间用空格隔开。
④justify-content
justify-content属性决定了主轴方向上子项的对齐和分布方式。
⑤align-items
align-items中的items指的就是flex子项们,因此align-items指的就是flex子项们相对于flex容器在侧轴方向上的对齐方式。
⑥align-content
align-content可以看成和justify-content是相似且对立的属性,如果所有flex子项只有一行,则align-content属性是没有任何效果的。
⑦作用在flex子项上的CSS属性
2.grid网格布局
Grid布局是一个二维的布局方法,纵横两个方向总是同时存在。
①grid-template-columns和grid-template-rows
对网格进行横纵划分,形成二维布局。单位可以是像素,百分比,自适应以及fr单位(网格剩余空间比例单位)。
有时候,我们网格的划分是很规律的,如果需要添加多个横纵网格时,可以利用repeat()语法进行简化操作。
②grid-template-areas和grid-template
area是区域的意思,grid-template-areas就是给我们的网格划分区域的。此时grid子项只要使用grid-area属性指定其隶属于那个区。
grid-template是grid-template-rows ,grid-template-columns和grid-template-areas属性的缩写。
③grid-column-gap和grid-row-gap
grid-column-gap和grid-row-gap属性用来定义网格中网格间隙的尺寸。css grid-gap属性是grid-column-gap和grid-row-gap属性的缩写。
④justify-items和align-items
justify-items指定了网格元素的水平呈现方式,是水平拉伸显示,还是左中右对齐。align-items指定了网格元素的垂直呈现方式,是垂直拉伸显示,还是上中下对齐。
place-items可以让align-items和justify-items属性写在单个声明中。
⑤justify-content和align-content
justify-content指定了网格元素的水平分布方式。align-content指定了网格元素的垂直分布方式。place-content可以让align-content和justify-content属性写在一个CSS声明中。
⑥justify-items和align-items
justify-items指定了网格元素的水平呈现方式,是水平拉伸显示,还是左中右对齐。align-items指定了网格元素的垂直呈现方式,是垂直拉伸显示,还是上中下对齐。
place-items可以让align-items和justify-items属性写在单个声明中。