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