前端「HTML+CSS」零基础入门学习笔记
HTML+CSS入门笔记目录
- 一、HTML 简介
- 1、HTML是什么?
- 2、什么是HTML标签?
- 二、HTML 文档结构
- 1、HTML基本结构
- 2、文档类型声明标签
- 3、lang语言属性
- 4、字符集与编码
- 三、HTML 基础标签
- 1、标题标签
- 2、段落标签
- 3、空格标签
- 4、注释标签
- 5、换行标签
- 6、盒子标签
- 7、水平线标签
- 8、预格式化文本标签
- 9、文本格式化标签
- 10、图像标签
- 11、超链接标签
- 12、列表标签
- 13、表格标签
- 14、表单标签
- 四、HTML 基础 (理解)
- 15、文本框和文本域的区别
- 一、文本框与密码框
- 二、select下拉表单
- 三、文件域和按钮
- 四、单选框和复选框
- 16、常见属性解析
- 17、特殊字符
- 18、锚点定位
- 一、CSS简介
- 1、什么是CSS?
- 2、为什么使用CSS?
- 3、CSS的作用
- 二、CSS语法
- 1、CSS基础语法
- 2、CSS注释语法
- 3、CSS应用方法
- 三、CSS选择器
- 1、元素选择器
- 2、类选择器
- 3、ID选择器
- 4、组合选择器
- 5、后代选择器
- 6、子元素选择器
- 7、兄弟选择器
- 8、全局选择器
- 9、伪类选择器
- 10、选择器优先级
- 四、CSS常用属性
- 1、字体属性
- 2、文本属性
- 3、列表属性
- 4、表格属性
- 5、背景属性
- 6、对齐方式
- 7、盒子模型
- 五、CSS定位
- 1、`static`定位
- 2、`fixed` 定位
- 3、`relative` 定位
- 4、`absolute` 定位
- 5、`sticky` 定位
- 6、重叠的元素
- 六、CSS浮动
- 1、什么是 CSS Float(浮动)?
- 2、元素怎样浮动
- 3、彼此相邻的浮动元素
- 4、清除浮动 - 使用 clear
- 七、CSS网页布局
- 1、网页布局
- 2、头部区域
- 3、菜单导航区域
- 4、内容区域
- 5、底部区域
- 6、响应式网页布局
一、HTML 简介
1、HTML是什么?
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言,而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
2、什么是HTML标签?
HTML 标签是由尖括号包围的关键词
HTML 标签通常是成对出现的,例如<body>
和</body>
有些特殊的标签必须是单个标签,例如<br>
标签对中的第一个标签是开始标签,第二个标签是结束标签
<html><head><title>前端开发</title></head><body><h1>HTML</h1><p> HTML超文本标记语言,是用来描述网页的一种标准语言。</p></body>
</html>
二、HTML 文档结构
1、HTML基本结构
标签名 | 定义 | 说明 |
---|---|---|
<!DOCTYPE HTML>
|
文档声明 | 声明这是一个HTML文档 |
<html></html>
|
HTML标签 | 告诉网页浏览器,整个网页是从这里开始的,然后到结束 |
<head></head>
|
文档的头部 | 在head标签中必须包含title标签 |
<title></title>
|
文档的标题 | 显示在搜索引擎结果中的页面标题 |
<body></body>
|
文档的主体 | 元素包含文档的所有内容 |
HTML 文档是用来描述网页的,包含 HTML 标签和纯文本。
HTML文档的后缀名必须是.html
或.htm
Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容
2、文档类型声明标签
<!DOCTYPE>
是文档类型声明标签
<!DOCTYPE>
声明位于文档中的最前面的位置
<!DOCTYPE>
作用:告诉浏览器使用哪种HTML版本来显示网页
3、lang语言属性
<html lang="en">
en
定义语言为英语zh-CN
定义语言为中文
lang语言属性作用:定义当前文档显示的语言
4、字符集与编码
<meta charset="UTF-8">
<meta>
标签:元数据- charset 属性:用来规定 HTML 文档应该使用哪种字符编码
- 常用的编码有GB2312、GBK 和 UTF-8,UTF-8基本包含了全世界所有国家需要用到的字符
三、HTML 基础标签
1、标题标签
<body><h1>一级标签</h1><h2>二级标签</h2><h3>三级标签</h3><h4>四级标签</h4><h5>五级标签</h5><h6>六级标签</h6>
</body>
- 标题标签 可使内容加粗
- 标签序号越小 字号越大
- 每个标题独占一行
2、段落标签
<p></p>
<body><p>段落标签</p><p>段落1</p><p>段落2</p>
</body>
- 可以对HTML文档内容分为多个段落。
3、空格标签
- 在html代码中每输入一个
,就表示一个空格
4、注释标签
<!-- -->
<!-- 注释语句 -->
- 注释的快捷键是:
ctrl + /
或者ctrl +shift + /
- 注释是给人看的,目的是为了更好的解释这部分代码是干啥的, 程序是不执行这个代码的
5、换行标签
<br>
<br>
- 单词缩写: break 打断 ,换行
- 在HTML中,如果希望某段文本强制换行显示,就需要使用换行标签
<br>
6、盒子标签
<div> </div>
和<span></span>
<div> 这是头部 </div> <span>今日价格</span>
<div> </div>
和<span></span>
是没有语义的 是我们网页布局主要的2个盒子<div> </div>
一行只能放一个<span></span>
一行上可以放多个
7、水平线标签
<hr/>
<hr/>是单标签
- 单词缩写: horizontal 横线
<hr/>
就是创建横跨网页水平线的标签- 水平线将段落与段落之间隔开,使得文档结构清晰,层次分明。
8、预格式化文本标签
<pre></pre>
<pre>此例演示如何使用 pre 标签对空行和 空格进行控制</pre>
<pre></pre>
标签可定义预格式化的文本- 预格式化文本就是按照我们预先写好的文字格式来显示页面, 保留空格和换行
9、文本格式化标签
标签 | 显示效果 |
---|---|
<strong></strong> 和<b></b>
|
加粗 |
<i></i> 和<em></em>
|
斜体 |
<s></s> 和<del></del>
|
加删除线 |
<u></u> 和<ins></ins>
|
加下划线 |
<b></b>
只是加粗。<strong><strong>
除了可以加粗还有强调的意思,语义更强烈。
10、图像标签
<img/>
语法如下:
<img src="图像URL" />
- 该语法中src属性用于指定图像文件的路径和文件名
属性 | 属性值 | 说明 |
---|---|---|
src
|
URL | 图像的路径 |
alt
|
文本 | 图像不能显示时的替换文本 |
title
|
文本 | 鼠标悬停时显示的内容 |
width
|
像素 | 设置图像的宽度 |
height
|
像素 | 设置图像的高度 |
border
|
数字 | 设置图像边框的宽度 |
注意:
- 标签可以拥有多个属性,必须写在开始标签中,位于标签名后面。
- 属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。
- 任何标签的属性都有默认值,省略该属性则取默认值。
- 采取 键值对 的格式 key=“value” 的格式
下面为参考代码:
<body>
<!-- 正常的图片 -->
< img src="D:\JPG\1.jpy">
<!-- 设置图片的宽度 -->
< img srcm"D:\JPG\1.jpg" width="200">
<!-- 设置了高度的标签 -->
< img src="D:\JPG\1.jpg" height="200">
<!--同时设置了高度和宽度的标签-->
< img src="D:\JPG\1.jpg" width="100" height="200">
<!-- 设置了标题的标签 -->
< img src="D:\JPG\1.jpg" title="白雪公主">
<!-- 用alt属性来显示图片未加载出来 -->
< img src="D:\JPG\1.Jpg" alt="这是一张图片">
</body>
11、超链接标签
<body><a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
</body>
属性 | 作用 |
---|---|
href
|
指定链接目标的url地址
|
target
|
指定连接页面的打开方式,_self 为默认值,_blank 为在新窗口中打开
|
注意:
- href="#",表示该链接暂时为一个空链接
12、列表标签
标签名 | 定义 | 说明 |
---|---|---|
<ol></ol>
|
有序列表 |
包含<li></li> ,有顺序,使用情况较少
|
<ul></ul>
|
无序列表 |
包含<li></li> ,无顺序,最常用的列表
|
<dl></dl>
|
自定义列表 |
包含<dt> 和<dd> ,<dt> 和<dd> 里面可以放任何标签
|
<body><ul><li>无序标签</li><li>无序标签</li></ul><ol><li>有序标签</li><li>有序标签</li></ol><dl><dt>自定义标签</dt><dd>自定义标签</dd></dl>
</body>
13、表格标签
<body><table><tr> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr><tr> <td>小明</td> <td>男</td> <td>22</td> </tr> <tr> <td>小红</td> <td>女</td> <td>21</td> </tr> </table>
</body>
<table></table>
用于定义一个表格标签。<tr></tr>
用于定义表格中的行,必须嵌套在<table></table>
标签中。<td></td>
用于定义表格中的单元格,必须嵌套在<tr></tr>
标签中。
14、表单标签
一个完整的表单通常由表单域,表单控件和提示信息三部分组成
1、表单域
<form></form>
标签被用于定义表单域,以实现用户信息的收集和传递,form中的所有内容都会被提交给服务器。
<form action="url地址" method="提交方式" name="表单名称">各种表单控件
</form>
属性 | 属性值 | 作用 |
---|---|---|
action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址。 |
method | get/post | 用于设置表单数据的提交方式,其取值为get或post。 |
name | 名称 | 用于指定表单的名称,以区分同一个页面中的多个表单。 |
注意:
- 每个表单都应该有自己表单域。我们现在做页面,不写看不到效果,但是 如果后面学 ajax 后台交互的时候,必须需要 form表单域。
2、表单控件
① input 控件:
<input type="属性值" value="你好">
<input/>
标签为单标签 input是输入的意思type
属性设置不同的属性值用来指定不同的控件类型- 常用属性
② textarea 控件
<textarea col="列" row="行">文本内容
</textarea>
- 通过textarea控件可以轻松创建多行文本输入框.
- cols=“列数” rows=“行数”
③ <label>
标签
1、第一种用法就是用label直接包括input表单。
<label> 用户名: <input type="radio" name="usename" value="请输入用户名"> </label>
- 适合单个表单选择
2、第二种用法 for 属性规定 label 与哪个表单元素绑定。
- for的属性值应和id的属性值相同
<label for="sex">男</label>
<input type="radio" name="sex" id="sex">
<label></label>
用于绑定一个表单元素- 当我们鼠标点击
<label></label>
里面的文字时, 光标会定位到指定的表单里面,用来增加用户体验
四、HTML 基础 (理解)
15、文本框和文本域的区别
表单 | 名称 | 区别 | 默认值显示 | 应用场景 |
---|---|---|---|---|
input type="text"
|
文本框 | 只能显示一行文本 | 单标签,通过value显示默认值 | 用户名、昵称、密码等 |
textarea
|
文本域 | 可以显示多行文本 | 双标签,默认值写到标签中间 | 留言板 |
- 以下为案例:
一、文本框与密码框
<body><form>账号:<input type="text">密码:<input type="password"></form>
</body>
type
属性设置为text
是文本框type
属性设置为password
是密码框
二、select下拉表单
<form><select><option selected="selected">地区</option><option>北京</option><option>上海</option></select>
</form>
<select>
中至少包含一对<option>
- 在
<option>
中定义selected=“selected”
时,当前项即为默认选中项 - 但是我们实际开发会用的比较少
三、文件域和按钮
<body><form><input type="button" value="浏览文件"> <br>上传文件:<input type="file"></form>
</body>
type
属性设置为file
:是一个文件域,可以上传文件type
属性设置为button
:是一个按钮
四、单选框和复选框
<body><form>性别:男<input type="radio" name="sex"> 女 <input type="radio" name="sex">选课:政治<input type="checkbox" name="subject"> 历史<input type="checkbox"> 地理<input type="checkbox" name="subject"></form>
</body>
type
属性设置为radio
是单选框type
属性设置为checkbox
是复选框name
是表单元素的名字,单选框和复选框应有相同的name值
16、常见属性解析
1、type 属性
- 这个属性通过改变值,可以决定了你属于那种input表单。
- 比如
type = 'text'
就表示 文本框 可以做 用户名, 昵称等。 - 比如
type = 'password'
就是表示密码框 用户输入的内容 是不可见的。
用户名: <input type="text" />
密 码:<input type="password" />
2.、value属性
用户名:<input type="text" name="username" value="请输入用户名">
value
表示默认的文本值。- 有些表单想刚打开页面就默认显示几个文字,就可以通过这个value 来设置。
3、 name属性
用户名:<input type="text" name=“username” />
name
主要作用就是用于区别不同的表单
4、checked属性
性 别:
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女
- 表示默认选中状态。 较常见于 单选按钮和复选按钮。
5、input属性小结
17、特殊字符
- 一些特殊的符号,我们再html 里面很难或者 不方便直接 使用, 我们此时可以使用下面的替代代码。
- 字符的代码是以运算符
&
开头,以分号运算符;
结尾。 - 他们不是标签,而是符号
18、锚点定位
通过创建锚点链接,用户能够快速定位到目标内容。
创建锚点链接分为两步:
1. 使用相应的id名标注跳转目标的位置。 (找目标)<h3 id="two">第2集</h3> 2. 使用<a href="#id名">链接文本</a>创建链接文本(被点击的) (拉关系) 我也有一个姓何的朋友。<a href="#two">
快速记忆法:
好比找个人办事, 首先找到他,然后拉关系,最后看效果
一、CSS简介
1、什么是CSS?
- CSS 指的是层叠样式表 (Cascading Style Sheets)
- CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
2、为什么使用CSS?
- 层叠样式复用,便于后期维护和修改
- 可控制内容与样式的布局,让页面更精美
3、CSS的作用
- 对网页的布局、颜色、背景、宽度、高度、字体进行控制
- 用于布局和定位,设置页面的外观样式,让页面更精美
二、CSS语法
1、CSS基础语法
CSS由选择器和声明块组成:
语法如下:
<head><style>选择器{属性名:属性值;属性名:属性值;}</style>
</head>
- 实例:所有
<p>
元素都将居中对齐,并带有红色文本颜色:
<head><style>p {color: red;text-align: center;}</style>
</head>
color
是属性,red
是属性值text-align
是属性,center
是属性值p
是 CSS 中的选择器(它指向要设置样式的 HTML 元素:<p>
)
2、CSS注释语法
CSS注释:
/* 注释内容 */
- 实例:
/* body定义 */
body{ text-align:center; margin:0 auto;}
- CSS注释:对代码进行解释说明,便于后期维护和修改
3、CSS应用方法
- 内嵌样式:
在页面头部通过style标签定义,对当前页面中所有符合样式选择器的标签都起作用
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS语法</title><style>p{font-size:12px; /*字号*/color:blue; /*文字颜色*/font-weight:bold; /*加粗*/}</style>
</head>
<body><p>天使投资指早期投资,尤其指个人早期投资。</p><p>VC,Venture Capital,所谓风险投资、创业投资,是相对靠前的非公开市场股权投资。</p><p>PE, Private Equity,所谓私募资本、非公开市场资本,既是私募股权投资的统称,又特指相对靠后的股权投资。</p>
</body>
</html>
- 行内样式:
在HTML标签内定义style属性,只对设置style属性的标签起作用
<!DOCTYPE HTML>
<html><head><meta charset="UTF-8"><title>行内样式</title>
</head><body><!-- 行内样式,仅对当前p元素起作用 --><p style="font-size:12px;color:blue;font-weight:bold;">天使投资指早期投资,尤其指个人早期投资。</p><!--下面p元素不受影响 --><p>VC,Venture Capital,所谓风险投资、创业投资,是相对靠前的非公开市场股权投资。</p>
</body></html>
- 外部样式
单独定义一个.CSS
文件,然后在页面中使用link标签
或@import指令
导入html
文件里面 - 使用
link标签
链接外部样式
<link rel="stylesheet" href="CSS文件路径" type="text/css" />
- 使用
@import 指令
导入外部样式
<style>@import "CSS文件路径";@import url(CSS文件路径);
</style>
三、CSS选择器
1、元素选择器
- 使用HTML标签作为选择器的名称,也称为标签选择器
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">p {font-size: 16px;color: red;}h1 {font-size: 20px;color: blue;}</style>
</head><body><h1>标题</h1><p>正文的段落</p>
</body></html>
2、类选择器
- 使用自定义的名称,以
.
号作为前缀,通过HTML标签的class
属性调用类选择器
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.big {font-size: 40px;}.color {color: blue;}</style>
</head><body><p class="big">HTML</p><p>超文本标记语言</p><p class="big color">CSS</p><p>层叠样式表</p>
</body></html>
- 类选择器名称不能以
数字
开头 - 调用时不能添加
.
号 - 同时调用多个类选择器时,以
空格
分隔
3、ID选择器
- 使用自定义名称,以
#
作为前缀,通过HTML标签的id
属性进行名称匹配
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>id选择器</title><style type="text/css">#center {text-align: center;}#left {text-align: left;}</style>
</head><body><div id="center"><p>前端技术构成</p></div><div id="left"><p>前端技术构成</p></div>
</body></html>
4、组合选择器
- 将多个具有相同样式的选择器放在一起声明,使用逗号隔开
- 注意:使用
空格
时不区分父子还是后代,使用CSS3中新增的>
时必须是父子关系
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8" /><title>派生选择器</title><style type="text/css">h1,p {color: blue;}</style>
</head>
<body><h1>Web前端技术</h1><p>HTML</p> <p>CSS</p>
</body>
</html>
5、后代选择器
- 在某个选择器内部再设置选择器,通过空格隔开
- 下面为实例,当p和strong嵌套使用时起样式效果
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>后代选择器</title><style>p strong {color: blue;}</style>
</head><body><!-- “天使投资”蓝色显示 --><p><strong>天使投资</strong>是投资方式的一种</p><!-- “投资”蓝色显示 --><p><em>天使<strong>投资</strong></em>是投资方式的一种</p><em>em是定义强调文本的标签</em><!-- em 斜体强调 -->
</body></html>
6、子元素选择器
- 注意:使用CSS3中新增的
>
时必须是父子关系 - 下面为实例,
p
的直接子元素strong
被设置
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>子元素选择器</title><style>/*子元素选择器:p的直接子元素strong被设置*/p>strong {color: blue;}</style>
</head><body><!-- “天使投资”蓝色显示 --><p><strong>天使投资</strong>是投资方式的一种</p><!-- “投资”黑色显示 --><p><em>天使<strong>投资</strong></em>是投资方式的一种</p>
</body></html>
7、兄弟选择器
- 元素1+元素2
- 下面为实例,当
h2
和p
标签一起使用时 起样式效果
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>h2+p {font-weight: bold; }</style>
</head><body><article><h1>Web前端开发</h1><h2>HTML</h2><p>超文本标记语言</p> <!-- 粗体显示 --><p>用于构建网页结构,添加页面内容。</p><h2>CSS</h2><p>层叠样式表</p><!-- 粗体显示 --><p>用于构建网页样式,美化页面。</p><h2>JS</h2><p>Javascript</p><!-- 粗体显示 --><!-- 当h2和p标签一起使用时 起样式效果 --><p> 用于构建网页行为,使用户获得更好的体验。</p></article>
</body></html>
8、全局选择器
- 当以
*
作为选择器,对全局标签都起样式效果
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8" /><title>Document</title><style type="text/css">* {color:dodgerblue}</style>
</head>
<body><h1>前端技术构成</h1> <p>HTML</p> <p>CSS</p>
</body>
</html>
9、伪类选择器
- 根据不同的状态显示不同的样式,常用于标签
状态 | 说明 |
---|---|
:link
|
选择所有未访问的链接 |
:visited
|
选择所有已访问的链接 |
:hover
|
把鼠标放在链接上的状态 |
:active
|
选择正在活动链接 |
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>伪类选择器</title><style>a:link,a:visited{color:#d82727;font-size: 13px;text-decoration: none;}a:hover,a:active{color:#ff7300;text-decoration: underline;}/*普通的标签也可以使用伪类选择器*/p:hover{color:red;}p:active{color:blue;}</style>
</head>
<body><a href="伪类选择器.html">伪类选择器.html</a><p>CSS从入门到精通!</p>
</body>
</html>
10、选择器优先级
1、
行内样式 > ID选择器 > 类选择器 > 标签选择器
2、
同一优先级时,后加载的会覆盖先加载的同名样式,所以离的越近
越优先
3、
可以用 !important 定义最高优先级
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">.p1{color:blue;/*<span style="font-family:";">1</span>没加important 显示为红色 */}.p2{color:blue;color:red!important;/*2加上了important属性优先级高 显示为红色 */}
</style></head>
<body>
<p class="p1">1没加important</p>
<p class="p2">2加了important属性</p>
</body>
</html>
四、CSS常用属性
1、字体属性
属性 | 作用 |
---|---|
font-size
|
设置文本的大小 |
font-weight
|
设置文本的粗细 |
font-family
|
设置文本的字体 |
font-style
|
指定文本的字体样式 |
font
|
在一个声明中设置所有的字体属性 |
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>div{font-size: 30px;}p{/*font-size: 20px;*/font-size: 80%;}.hello{font-size: 2em;}body{font-size: 62.5%;}ul li{/*font-size: 30px;font-weight: bold;font-family: 华文行楷,宋体,黑体;font-style: italic;*/font: italic bold 30px 微软雅黑;}</style>
</head>
<body><p>CSS从入门到精通<span>CSS笔记</span></p><span>CSS笔记</span><hr><div>我的DIV<p>CSS从入门到精通<span>CSS笔记</span></p></div><hr><span class="hello">CSS笔记</span><hr><ul><li>前端笔记</li></ul>
</body>
</html>
2、文本属性
属性 | 作用 |
---|---|
color
|
设置文本颜色 |
direction
|
设置文本方向 |
letter-spacing
|
设置字符间距 |
line-height
|
设置行高 |
text-align
|
对齐元素中的文本 |
text-decoration
|
向文本添加修饰 |
text-indent
|
缩进元素中文本的首行 |
white-space
|
设置元素中空白的处理方式 |
word-spacing
|
设置字间距 |
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>p{color: red;/*background-color: #ccc;*//*background-color: rgba(0,255,0,0.5);*/background-color: rgba(197, 15, 234, 0.5);line-height: 50px;text-align: center;}img{vertical-align: middle;}div{text-indent: 30px;}span{font-size: 30px;text-decoration: underline;text-transform: capitalize;letter-spacing: 10px;world-spacing:;}h3{width: 300px;height: 200px;background-color:#ccc;white-space: nowrap;overflow:hidden;}</style>
</head>
<body><p>welcome to css!</p><p>welcome to css!</p><p>welcome to css!</p><hr><img src="css.png" alt="" width="15%">HTML和CSS笔记<hr><div> 这里是web前端开发课程的课程网站,这个网站主要包括课程的视频、幻灯片、源代码以及一些练习与练习答案。</div><hr><div>这里是web前端开发课程的课程网站,这个网站主要包括课程的视频、幻灯片、源代码以及一些练习与练习答案。</div><hr><span>hello world</span><hr><h3>这里是web前端开发课程的课程网站,这个网站主要包括课程的视频、幻灯片、源代码以及一些练习与练习答案。</h3><hr>
</body>
</html>
3、列表属性
属性 | 作用 |
---|---|
list-style-type
|
设置列表项标志的类型 |
list-style-image
|
将图像设置为列表项标志 |
list-style-position
|
设置列表中列表项标志的位置 |
list-style
|
简写 |
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8" /><title>Document</title>
<style type="text/css">#othernews {text-align:left;font-size:14px;line-height:1.5em;list-style-image:url(images/bullet1.gif);}a:link {color: #09f;/*浅蓝*/text-decoration: none;}a:visited {text-decoration: none;color: #930;/*红*/}a:hover {text-decoration: underline;color: #03c;/*深蓝*/}a:active {text-decoration: none;color: #03c;/*深蓝*/}
</style>
</head><body> <div id = "othernews">相关阅读:<ul><li><a href="#" >迪拜华商财富缩水 瞻望前景信心犹豫</a></li><li><a href="#" >全球华商总资产恢复增至3.9万亿美元</a></li><li><a href="#" >华商基金胡宇权:行业不平衡将带来投资机会</a></li></ul></div>
</body>
</html>
4、表格属性
- border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开
- Width和height属性定义表格的宽度和高度
- text-align属性设置水平对齐方式,向左,右,或中心
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body {font: 14px/2em "宋体";}table {width: 300px;margin: 0 auto;/*表格在article里面居中*/border-collapse: collapse;/*表格边框重合*/font-size: 12px;border: 1px solid;}caption {letter-spacing: 3px;/*表格标题字符间距*/}tbody tr:nth-child(odd) {/*表格主体的奇数行背景为浅蓝色*/background-color: lightblue;}td,th {/* border: 1px solid; */text-align: center;}</style>
</head><body><table><!-- 表格开始 --><caption>名词解释</caption> <!-- 标题 --><thead><!-- 表头 --><tr><!-- 行 --><th> 名词 </th> <!-- 表头单元格 --><th> 解释 </th></tr></thead><tbody><!-- 表体 --><tr><!-- 第一行 --><td>HTML</td> <!-- 数据单元格 --><td>HyperText Markup Language超文本标记语言</td></tr><tr><!-- 第二行 --><td>CSS</td><td>Cascading Style Sheets层叠样式表</td></tr><tr><!-- 第三行 --><td>JS</td><td>JavaScript语言</td></tr></tbody></table></body></html>
5、背景属性
属性 | 作用 |
---|---|
background
|
简写 |
background-attachment
|
背景图像是否固定或者随着页面的其余部分滚动 |
background-color
|
设置元素的背景颜色 |
background-image
|
把图像设置为背景 |
background-position
|
设置背景图像的起始位置 |
background-repeat
|
设置背景图像是否及如何重复 |
- index.css文件
body{background-color: #E0E0E0;
}
h1{background-color: #33CC66;
}
p{background-color: #FFFFFF;
}
- html文件
<!DOCTYPE>
<html><head><meta charset="utf-8"><title>CSS学习</title><link rel="stylesheet" type="text/css" href="index.css"></head><body><h1>Web前端开发</h1><p>段落背景为白色</p><p>段落背景为白色</p><p>段落背景为白色</p></body>
</html>
两个文件在同一文件夹下 效果如下:
6、对齐方式
1、
text-align——文本对齐
- 规定元素中的文本的水平对齐方式
属性值 | 描述 |
---|---|
left
|
默认值,文本排列到左边 |
right
|
文本排列到右边 |
center
|
文本排列到中间 |
justify
|
文本两端对齐 |
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
.center {text-align: center;border: 3px solid green;
}
</style>
</head>
<body><h2>文本居中对齐</h2><div class="center"><p>文本居中对齐。</p>
</div></body>
2、
margin: auto; —— 元素居中对齐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
.center {margin: auto;width: 60%;border: 3px solid #73AD21;padding: 10px;
}
</style>
</head>
<body><h2>元素居中对齐</h2>
<p>水平居中块级元素 (如 div), 可以使用 margin: auto;</p><div class="center"><p><b>注意: </b>使用 margin:auto 无法兼容 IE8, 除非 !DOCTYPE 已经声明。</p>
</div></body>
</html>
3、
position —— 左右对齐
<!DOCTYPE html>
<html>
<head>
<style>
.right {position: absolute;right: 0px;width: 300px;border: 3px solid #73AD21;padding: 10px;
}
</style>
</head>
<body><h2>右对齐</h2>
<p>以下实例演示了如何使用 position 来实现右对齐:</p><div class="right"><p>菜鸟教程 -- 学的不仅是技术,更是梦想!!</p>
</div></body>
</html>
4、
float——左右对齐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
.right {float: right;width: 300px;border: 3px solid #73AD21;padding: 10px;
}
</style>
</head>
<body><h2>右对齐</h2>
<p>以下实例演示了使用 float 属性来实现右对齐:</p><div class="right"><p>我老爹在小时候给我的一些人生建议,我现在还记忆深刻。</p>
</div></body>
</html>
7、盒子模型
盒子模型是网页布局的基础,将页面中所有元素都看作是一个盒子,盒子都包含以下几个属性:
- width 宽度
- height 高度
- border 边框——围绕在内边距和内容外的边框
- padding 内边距——清除内容周围的区域,内边距是透明的
- margin 外边距——清除边框外的区域,外边距是透明的
- content 内容——盒子的内容,显示文本和图像
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS入门</title>
<style>
div {background-color: lightgrey;width: 300px;border: 25px solid green;padding: 25px;margin: 25px;
}
</style>
</head>
<body><h2>盒子模型演示</h2><p>CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。</p><div>这里是盒子内的实际内容。有 25px 内间距,25px 外间距、25px 绿色边框。</div></body>
</html>
五、CSS定位
position 属性指定了元素的定位类型。
position 属性的五个值:
- static
- relative
- fixed
- absolute
- sticky
元素可以使用的顶部,底部,左侧和右侧属性定位。然而,这些属性无法工作,除非是先设定position属性。他们也有不同的工作方式,这取决于定位方法。
1、static
定位
- HTML 元素的默认值,即没有定位,遵循正常的文档流对象
- 静态定位的元素不会受到 top, bottom, left, right影响
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
<style>
div.static {position: static;border: 3px solid #73AD21;
}
</style>
</head>
<body><h2>position: static;</h2><p>使用 position: static; 定位的元素,无特殊定位,遵循正常的文档流对象:</p><div class="static">
该元素使用了 position: static;
</div>
2、fixed
定位
- 元素的位置相对于浏览器窗口是固定位置
- 即使窗口是滚动的它也不会移动:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
<style>
p.pos_fixed
{position:fixed;top:30px;right:5px;
}
</style>
</head>
<body><p class="pos_fixed">Some more text</p>
<p><b>注意:</b> IE7 和 IE8 支持只有一个 !DOCTYPE 指定固定值.</p>
<p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p><p>Some text</p>
</body>
</html>
注意: Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。
Fixed定位使元素的位置与文档流无关,因此不占据空间。
Fixed定位的元素和其他元素重叠。
3、relative
定位
- 相对定位元素的定位是相对其正常位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css教程</title>
<style>
h2.pos_left
{position:relative;left:-20px;
}h2.pos_right
{position:relative;left:20px;
}
</style>
</head><body>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body></html>
- 移动相对定位元素,但它原本所占的空间不会改变。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css教程</title>
<style>
h2.pos_top
{position:relative;top:-50px;
}
</style>
</head><body>
<h2>这是一个没有定位的标题</h2>
<h2 class="pos_top">这个标题是根据其正常位置向上移动</h2>
<p><b>注意:</b> 即使相对定位元素的内容是移动,预留空间的元素仍保存在正常流动。</p>
</body></html>
4、absolute
定位
- 绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css教程</title>
<style>
h2
{position:absolute;left:100px;top:150px;
}
</style>
</head><body>
<h2>这是一个绝对定位了的标题</h2>
<p>用绝对定位,一个元素可以放在页面上的任何位置。标题下面放置距离左边的页面100 px和距离页面的顶部150 px的元素。.</p>
</body></html>
- absolute 定位使元素的位置与文档流无关,因此不占据空间
- absolute 定位的元素和其他元素重叠
5、sticky
定位
- sticky 英文字面意思是粘,粘贴,所以可以把它称之为粘性定位
- position: sticky; 基于用户的滚动位置来定位
- 粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换
- 它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置
- 元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位
- 这个特定阈值指的是 top, right, bottom 或 left 之一,换言之,指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS教程</title>
<style>
div.sticky {position: -webkit-sticky;position: sticky;top: 0;padding: 5px;background-color: #cae8ca;border: 2px solid #4CAF50;
}
</style>
</head>
<body><p>尝试滚动页面。</p>
<p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p><div class="sticky">我是粘性定位!</div><div style="padding-bottom:2000px"><p>滚动我</p><p>来回滚动我</p><p>滚动我</p><p>来回滚动我</p><p>滚动我</p><p>来回滚动我</p>
</div></body>
</html>
6、重叠的元素
- 元素的定位与文档流无关,所以它们可以覆盖页面上的其它元素
- z-index属性指定了一个元素的堆叠顺序(哪个元素应该放在前面,或后面)
- 一个元素可以有正数或负数的堆叠顺序:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS教程</title>
<style>
img
{position:absolute;left:0px;top:0px;z-index:-1;
}
</style>
</head><body>
<h1>This is a heading</h1>
<img src="w3css.gif" width="100" height="140" />
<p>因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。</p>
</body>
</html>
六、CSS浮动
1、什么是 CSS Float(浮动)?
- CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列
- Float(浮动),往往是用于图像,但它在布局时一样非常有用
2、元素怎样浮动
元素的水平方向浮动,意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果图像是右浮动,下面的文本流将环绕在它左边:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS教程</title>
<style>
img
{float:right;
}
</style>
</head><body>
<p>在下面的段落中,我们添加了一个 <b>float:right</b> 的图片。导致图片将会浮动在段落的右边。</p>
<p>
<img src="logocss.gif" width="95" height="84" />
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
</p>
</body></html>
3、彼此相邻的浮动元素
如果你把几个浮动的元素放到一起,如果有空间的话,它们将彼此相邻。
在这里,我们对图片廊使用 float 属性:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS教程</title>
<style>
.thumbnail
{float:left;width:110px;height:90px;margin:5px;
}
</style>
</head><body>
<h3>图片库</h3>
<p>试着调整窗口,看看当图片没有足够的空间会发生什么。</p>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
</body>
</html>
4、清除浮动 - 使用 clear
元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。
使用 clear 属性往文本中添加图片廊:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS教程</title>
<style>
.thumbnail
{float:left;width:110px;height:90px;margin:5px;
}
.text_line
{clear:both;margin-bottom:2px;
}
</style>
</head><body>
<h3>图片库</h3>
<p>试着调整窗口,看看当图片没有足够的空间会发生什么。.</p>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
<h3 class="text_line">第二行</h3>
<img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
</body>
</html>
七、CSS网页布局
1、网页布局
- 网页布局有很多种方式,一般分为以下几个部分:头部区域、菜单导航区域、内容区域、底部区域。
2、头部区域
- 头部区域位于整个网页的顶部,一般用于设置网页的标题或者网页的 logo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 网页布局 </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {margin: 0;
}/* 头部样式 */
.header {background-color: #f1f1f1;padding: 20px;text-align: center;
}
</style>
</head>
<body><div class="header"><h1>头部区域</h1>
</div></body>
</html>
3、菜单导航区域
- 菜单导航条包含了一些链接,可以引导用户浏览其他页面:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 网页布局 </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;
}body {margin: 0;
}/* 头部样式 */
.header {background-color: #f1f1f1;padding: 20px;text-align: center;
}/* 导航条 */
.topnav {overflow: hidden;background-color: #333;
}/* 导航链接 */
.topnav a {float: left;display: block;color: #f2f2f2;text-align: center;padding: 14px 16px;text-decoration: none;
}/* 链接 - 修改颜色 */
.topnav a:hover {background-color: #ddd;color: black;
}
</style>
</head>
<body><div class="header"><h1>头部区域</h1>
</div><div class="topnav"><a href="#">链接</a><a href="#">链接</a><a href="#">链接</a>
</div></body>
</html>
4、内容区域
- 1 列:一般用于移动端
- 2 列:一般用于平板设备
- 3 列:一般用于 PC 桌面设备
我们将创建一个 3 列布局,在小的屏幕上将会变成 1 列布局(响应式):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 网页布局 </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;
}body {margin: 0;
}/* 头部样式 */
.header {background-color: #f1f1f1;padding: 20px;text-align: center;
}/* 导航条 */
.topnav {overflow: hidden;background-color: #333;
}/* 导航链接 */
.topnav a {float: left;display: block;color: #f2f2f2;text-align: center;padding: 14px 16px;text-decoration: none;
}/* 链接 - 修改颜色 */
.topnav a:hover {background-color: #ddd;color: black;
}/* 创建三个相等的列 */
.column {float: left;width: 33.33%;
}/* 列后清除浮动 */
.row:after {content: "";display: table;clear: both;
}/* 响应式布局 - 小于 600 px 时改为上下布局 */
@media screen and (max-width: 600px) {.column {width: 100%;}
}
</style>
</head>
<body><div class="header"><h1>头部区域</h1><p>重置浏览器大小查看效果。</p>
</div><div class="topnav"><a href="#">链接</a><a href="#">链接</a><a href="#">链接</a>
</div><div class="row"><div class="column"><h2>第一列</h2><p>学的不仅是技术,更是梦想!学的不仅是技术,更是梦想!学的不仅是技术,更是梦想!学的不仅是技术,更是梦想!</p></div><div class="column"><h2>第二列</h2><p>学的不仅是技术,更是梦想!学的不仅是技术,更是梦想!学的不仅是技术,更是梦想!学的不仅是技术,更是梦想!</div><div class="column"><h2>第三列</h2><p>学的不仅是技术,更是梦想!学的不仅是技术,更是梦想!学的不仅是技术,更是梦想!学的不仅是技术,更是梦想!</div>
</div></body>
</html>
5、底部区域
- 底部区域在网页的最下方,一般包含版权信息和联系方式等
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 网页布局 </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;
}body {margin: 0;
}/* 头部样式 */
.header {background-color: #f1f1f1;padding: 20px;text-align: center;
}/* 导航条 */
.topnav {overflow: hidden;background-color: #333;
}/* 导航链接 */
.topnav a {float: left;display: block;color: #f2f2f2;text-align: center;padding: 14px 16px;text-decoration: none;
}/* 链接 - 修改颜色 */
.topnav a:hover {background-color: #ddd;color: black;
}/* 创建三个相等的列 */
.column {float: left;padding: 10px;
}/* 左右两侧宽度 */
.column.side {width: 25%;
}/* 中间区域宽度 */
.column.middle {width: 50%;
}/* 列后面清除浮动 */
.row:after {content: "";display: table;clear: both;
}/* 响应式布局 - 宽度小于600px时设置上下布局 */
@media screen and (max-width: 600px) {.column.side, .column.middle {width: 100%;}
}/* 底部样式 */
.footer {background-color: #f1f1f1;padding: 10px;text-align: center;
}
</style>
</head>
<body><div class="header"><h1>头部区域</h1><p>重置浏览器大小查看效果。</p>
</div><div class="topnav"><a href="#">链接</a><a href="#">链接</a><a href="#">链接</a>
</div><div class="row"><div class="column side"><h2>左侧栏</h2><p>学的不仅是技术,更是梦想!</p></div><div class="column middle"><h2>主区域内容</h2><p>学的不仅是技术,更是梦想!学的不仅是技术,更是梦想!学的不仅是技术,更是梦想!菜鸟教程 - 学的不仅是技术,更是梦想!学的不仅是技术,更是梦想!</p></div><div class="column side"><h2>右侧栏</h2><p>的不仅是技术,更是梦想!</p></div>
</div><div class="footer"><p>底部区域</p>
</div></body>
</html>
6、响应式网页布局
通过以上等学习我们来创建一个响应式等页面,页面的布局会根据屏幕的大小来调整:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 网页布局</title>
<style>
* {box-sizing: border-box;
}body {font-family: Arial;padding: 10px;background: #f1f1f1;
}/* 头部标题 */
.header {padding: 30px;text-align: center;background: white;
}.header h1 {font-size: 50px;
}/* 导航条 */
.topnav {overflow: hidden;background-color: #333;
}/* 导航条链接 */
.topnav a {float: left;display: block;color: #f2f2f2;text-align: center;padding: 14px 16px;text-decoration: none;
}/* 链接颜色修改 */
.topnav a:hover {background-color: #ddd;color: black;
}/* 创建两列 */
/* Left column */
.leftcolumn { float: left;width: 75%;
}/* 右侧栏 */
.rightcolumn {float: left;width: 25%;background-color: #f1f1f1;padding-left: 20px;
}/* 图像部分 */
.fakeimg {background-color: #aaa;width: 100%;padding: 20px;
}/* 文章卡片效果 */
.card {background-color: white;padding: 20px;margin-top: 20px;
}/* 列后面清除浮动 */
.row:after {content: "";display: table;clear: both;
}/* 底部 */
.footer {padding: 20px;text-align: center;background: #ddd;margin-top: 20px;
}/* 响应式布局 - 屏幕尺寸小于 800px 时,两列布局改为上下布局 */
@media screen and (max-width: 800px) {.leftcolumn, .rightcolumn { width: 100%;padding: 0;}
}/* 响应式布局 -屏幕尺寸小于 400px 时,导航等布局改为上下布局 */
@media screen and (max-width: 400px) {.topnav a {float: none;width: 100%;}
}
</style>
</head>
<body><div class="header"><h1>我的网页</h1><p>重置浏览器大小查看效果。</p>
</div><div class="topnav"><a href="#">链接</a><a href="#">链接</a><a href="#">链接</a><a href="#" style="float:right">链接</a>
</div><div class="row"><div class="leftcolumn"><div class="card"><h2>文章标题</h2><h5>2019 年 4 月 17日</h5><div class="fakeimg" style="height:200px;">图片</div><p>一些文本...</p><p>学的不仅是技术,更是梦想!学的不仅是技术,更是梦想!学的不仅是技术,更是梦想!学的不仅是技术,更是梦想! </p></div><div class="card"><h2>文章标题</h2><h5>2019 年 4 月 17日</h5><div class="fakeimg" style="height:200px;">图片</div><p>一些文本...</p><p>学的不仅是技术,更是梦想!学的不仅是技术,更是梦想!学的不仅是技术,更是梦想!学的不仅是技术,更是梦想!</p></div></div><div class="rightcolumn"><div class="card"><h2>关于我</h2><div class="fakeimg" style="height:100px;">图片</div><p>关于我的一些信息..</p></div><div class="card"><h3>热门文章</h3><div class="fakeimg"><p>图片</p></div><div class="fakeimg"><p>图片</p></div><div class="fakeimg"><p>图片</p></div></div><div class="card"><h3>关注我</h3><p>一些文本...</p></div></div>
</div><div class="footer"><h2>底部区域</h2>
</div></body>
</html>
前端「HTML+CSS」零基础入门学习笔记相关推荐
- k8s零基础入门 (学习笔记)
夫君子之行,静以修身,俭以养德,非淡泊无以明志,非宁静无以致远. 夫学须静也,才须学也,非学无以广才,非志无以成学.淫慢则不能励精,险躁则不能冶性. 年与时驰,意与日去,遂成枯落,多不接世,悲守穷庐, ...
- Python零基础入门学习笔记(一)
Python 基础入门学习 欢迎访问博客:Python学习笔记 基本语句 基本数据类型 函数 文件操作 面向对象 异常 模块 一.基本语句 注释: # 单行注释 """多 ...
- Arduino Uno零基础入门学习笔记
关于零基础学习Arduino的一篇学习笔记 一.配置篇 因为要用Arduino来驱动小车,所以我就担任起了学习Arduino的重任,但由于我之前从来没有接触过编程,只有一定的c语言学习经验,所以是零基 ...
- HTML零基础入门学习笔记提供网盘
HTML学习笔记 百度网盘链接:https://pan.baidu.com/s/1__O4dIxmKMIXPsx5OKb8aw 提取码:fmbv HYML(可在W3School查阅文档) 加粗:< ...
- 【干货分享】自己总结录制的web前端精讲视频,零基础入门学习资料,开发工具
"大清亡于闭关锁国,学习技术需要交流和资料" 为了让大家在自己的前端生涯中少走一些弯路,我亲自做了这么一门课:用我自己一路从码农到创业者的亲身经历,带大家感受前端程序员的职业发展规 ...
- 【小甲鱼】python零基础入门学习笔记 03讲~43讲
本篇基于[莫烦]python基础教程,属于查漏补缺 建议学习顺序 小甲鱼->莫烦numpy&pandas 目录 第003讲 插曲之变量和字符串 课堂笔记 变量 变量 需要注意的地方 字符 ...
- python必背入门代码-Python零基础入门学习笔记(一)
字符串可以用单引号.双引号.三引号括起来,字符串为不可变类型. python中每个字符串自带下标和索引,可用 str[x] 来精确访问字符串 str 中的某个字符 切片: 指对 字符串.列表.元组 进 ...
- Arduino Uno零基础入门学习笔记——三针脚声音传感器
一.电路接线 声音传感器 声音传感器引脚 Arduino引脚 VCC 5V GND GND OUT 6 LED LED引脚 Arduino引脚 正极 8 GND GND 二.代码 int val; i ...
- Arduino UNO新手零基础入门学习教程博客汇总
写在开头 最近在上Arduino的课,可以说Arduino对新手来说非常友好了,因为相比于51和32,Arduino的库函数下载就好,不需要自己去写,就很方便 我的硬件设备 这个是学校提供的硬件设备, ...
最新文章
- helloworld 1 2結合版 (有意思)
- Solo 博客系统 1.7.0 发布 - 新版 MD 编辑器
- 命名实参和可选实参(C#)
- android/IOS SDK怎么判断用户是否安装了微信/QQ
- 异常检测时间序列_时间序列的无监督异常检测
- 解析统计文本文件中的字符数、单词数、行数。
- HBase基本概念与基本使用
- 95-110-022-源码-Env-LocalStreamEnvironment
- java 及时编译_Java 面试-即时编译( JIT )
- 单片机编程软件 UV4启动界面修改(没啥卵用系列)
- Oracle 建表语句
- 在线计算机辅助翻译软件,科学网—计算机辅助翻译软件OmegaT - 李继存的博文
- 中国工程师如何获 Google 的工作机会?
- Java获取当天0时0分0秒时间的方法
- 戴口罩的这一年,AI产业如何“重启、重塑、重构”?
- 氨基官能化的铜金属有机骨架(Cu-MOF-NH2)|石墨相碳化氮纳米片/ZiF67片层结构复合材料|mof定制材料
- 人工智能技术在金融风控领域中的应用
- 华三交换机检测堆叠分裂的三种方法(lacp mad,bfd-mad,arp-mad)
- 苹果核 - Tangram是我们对界面动态化的态度 Tmail
- 如何用Heidisql本地连接阿里云RDS数据库