- 博客(14)
- 收藏
- 关注
RSS订阅原创 Web前端开发学习14——CSS定位机制：层定位
文件目录如下图所示： 一：固定定位 例子1的完整代码如下图所示： 显示如下图所示（距离浏览器左边和上边有一定距离）： 例子2的完整代码如下图所示： 显示结果如下图所示： 二：相对定位 完整代码如下图所示： 显示结果如下图所示： 三：绝对定位 完整代码如下图所示： 显示结果如下图所示： 四：层定位的简单案例 完整代码如下图所示： 显示结果如下图所示： 结束！ 学习内容来...
2020-02-14 13:34:21
435
原创 Web前端开发学习13——CSS定位机制：浮动定位
浮动定位机制案例——行列简单布局 文件目录如下图所示： HTML完整代码如下： CSS完整代码如下： 显示结果如图所示： 结束！ 学习内容来源于中国大学MOOC-Web前端开发（4-6），如有错误，请指正！！！ ...
2020-02-13 15:37:59
349
原创 Web前端开发学习12——CSS定位机制：文档流定位
文档流定位机制案例——网页导航栏的制作： 完整代码如下图所示： 显示效果如下图所示： 鼠标悬停时，链接文字及底色颜色发生变化 结束！ 学习内容来源于中国大学MOOC-Web前端开发（4-5），如有错误，请指正！！！ ...
2020-02-13 12:52:27
252
原创 Web前端开发学习10——盒子模型（1）
一：创建一个普通的盒子模型 完整的代码如下图所示： 显示如下： 二：创建一个overflow属性的盒子 完整代码如下图所示： 显示如图： 属性为scroll时： 属性为hidden时： 属性为auto时： 三：border属性的学习 完整代码如下图所示： 显示如下： 结束！ 学习内容来源于中国大学MOOC——Web前端开发(4-2),如有错误，请指正！ ...
2020-01-18 16:40:45
644
原创 Web前端开发学习9——CSS样式（列表、表格样式）
本节课的文件结构如图所示： 一：列表样式 第一种：list-style-position(inside/outside)样式 整体代码如图所示： 显示如下： 第二种：list-style-image样式 整体代码如下所示： 显示如图： 二：表格样式 完整代码如下图所示： 显示如图所示： 结束！ 学习内容来源于中国大学MOOC——Web前端开发（3-6），如有错误，请指正！ ...
2020-01-18 15:29:15
605
原创 Web前端开发学习8——CSS样式（背景、超链接样式）
本节课需要建立的文件夹如图所示： 一：背景图片插入的实现 完整代码如图所示： 显示如下： 二：超链接不同效果的实现 完整代码如图所示： 显示如下：分别为a:link-普通的、未被访问的链接 a:visited-用户已经访问的链接 a:hover-鼠标指针位于链接上方悬停 (a:active-链接被点击的时刻，未贴图) 注意：在 a:hover中定义font-size的大小，可以实现字体变...
2020-01-18 14:08:46
320
原创 Web前端开发学习7——CSS样式（文字样式）
第一种：字符间距 代码如下： 浏览器上的显示为： 第二种：行高 代码如下： 浏览器上的显示为： 第三种：垂直居中 1.默认页面（未垂直居中）代码如下： 浏览器显示： 2.垂直居中代码如下： 浏览器显示： 第四种：两端对齐 代码如下： 浏览器显示： ...
2019-11-18 23:02:33
371
原创 Web前端开发学习6——CSS选择器的运用
第一种：标签选择器（在css内嵌样式下运用） <style type="text/css"> body {background-color:#ccc; text-align:center; font-size:12px;} h1{font:"黑体";font-size:20px;} p{color:red;font-size:16px;} hr{width:20...
2019-11-11 22:00:06
274
原创 Web前端开发学习5——三种CSS样式的运用
首先需要建立如下目录： 第一种：行内样式 (在body部分添加，仅对该行样式起作用) 行内样式.html代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>行内样式</title> </head> ...
2019-11-11 20:31:19
307
原创 Web前端开发学习4——建立表格
基础版表格的建立： 第一步：使用记事本写入如下代码： 第二步：修该txt后缀名为html并点击浏览 基础表格建立完成！ 简单统计表格的建立： 第一步：在记事本写入如下代码 第二步：更改后缀名并双击浏览 简单统计表格建立完成！！！ 学习内容来源于中国大学MOOC——Web前端开发（2-6），如有错误，请指正！ ...
2019-11-07 20:56:36
1065
原创 Web前端开发学习3——img标签的实现
第一步：在site目录下建立存放照片的img文件夹和“img标签的实现txt文件” 第二步：编写代码，并将txt后缀改为html 第三步：预览 img标签添加成功！！！ 注：此处运用到了相对路径概念插入图片。 学习内容来源于中国大学MOOC——Web前端开发（2-5），如有错误，请指正！ ...
2019-11-07 15:41:55
473
原创 Web前端开发学习2——超链接的实现
第一步：在site站点下建立记事本“a标签的实现”txt文件 （同时按照上节课方法在site站点下建立“html网页”的html格 式文件） 第二步：在记事本中输入如下代码 第三步：修改记事本文件.txt后缀为.html 第四步：点击该html文件在浏览器中浏览 点击第一个超链接如图显示： 点击第二个超链接如图显示： 第三个超链接为虚拟链接，因此只能点击，并不会跳转页面 实现超链接，结束！...
2019-11-06 22:59:19
1386
原创 Web前端开发学习1——建立第一个html网页
web学习——建立第一个html网页 第一步：打开记事本录入以下代码 注： lang属性声明当前页面语言类型，en表示英文，zh表示中文 charset属性指定字符集编码方式 标题标签：h1-h6; 段落标签：p; 水平线标签：hr ...
2019-11-04 21:40:00
1124
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人