一篇文章让你掌握HTML+CSS
JavaEE-v4.0-HTML
1 HTML入门
1.1 初识HTML
1.1.1 概述
网络世界已经跟我们息息相关,当我们打开一个网站,首先映入眼帘的就是一个个华丽多彩的网页。这些网页,不仅呈现着基本的内容,还具备优雅的布局和丰富的动态效果,这一切都是如何做到的呢?前端入门课程,为您一层层的揭开网页的面纱。
- 网页的构成
- HTML:通常用来定义网页内容的含义和基本结构。
- CSS:通常用来描述网页的表现与展示效果。
- JavaScript:通常用来执行网页的功能与行为。
HTML(超文本标记语言——HyperText Markup Language)是构成 Web 世界的一砖一瓦。它是一种用来告知浏览器如何组织页面的标记语言。
所谓超文本Hypertext
,是指连接单个或者多个网站间的网页的链接。我们通过链接,就能访问互联网中的内容。
所谓标记Markup
,是用来注明文本,图片等内容,以便于在浏览器中显示,例如<head>
,<body>
等。
- HTML发展简史【了解】
- HTML 1.0在1993年6月作为互联网工程工作小组(IETF)工作草案发布(并非标准)
- HTML 2.0——1995年11月作为RFC 1866发布,在RFC 2854于2000年6月发布之后被宣布已经过时
- HTML 3.2——1997年1月14日,W3C推荐标准
- HTML 4.0——1997年12月18日,W3C推荐标准
- HTML 4.01(微小改进)——1999年12月24日,W3C推荐标准
- HTML5 —— 2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力,该标准规范终于制定完成。是目前最为流行的版本,提供了很多标签新特性,现代大多数浏览器已经具备了 HTML5的支持。
扩展资料:
w3c是万维网联盟(World Wide Web Consortium,W3C),又称W3C理事会。1994年10月在麻省理工学院计算机科学实验室成立。建立者是万维网的发明者蒂姆·伯纳斯-李,负责制定web相关标准的制定。
1.1.2 HTML的组成
HTML页面由一系列的元素(elements) 组成,而元素是使用标签创建的。
1)标签
一对标签( tags)可以设置一段文字样式,添加一张图片或者添加超链接等等。 例如:
<h1>今天是个好日子</h1>
在HTML中,<h1>
标签表示标题,那么,我们可以使用开始标签和结束标签包围文本内容,这样其中的内容就以标题的形式显示了。
显示效果如下:
2)属性
HTML标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。我们只能在开始标签中,加入属性。通常以名称=值
成对的形式出现,比如:name=‘value’。例如:
<h1 align="center">今天是个好日子!!!</h1>
在HTML标签中,align
属性表示水平对齐方式,我们可以赋值为 center
表示 居中 。
显示效果如下:
1.2 入门案例
1.2.1 初始页面
1)创建一个标准的初始化页面
右键点击创建新页面
自定义文件名字,比如index
点击ok,页面创建成功。
2)页面说明
<!DOCTYPE html>
: 声明文档类型。规定了HTML页面必须遵从的良好规则,从HTML5后,<!DOCTYPE html>
是最短的有效的文档声明。
文字作为了解资料
很久以前,早期的HTML(大约1991年2月),文档类型声明类似于链接,能自动检测错误和其他有用的东西。使用如下:
然而现在没有人再这样写,需要保证每一个东西都正常工作已成为历史。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
:这个标签包裹了整个完整的页面,是一个根元素(顶级元素)。其他所有元素必须是此元素的后代,每篇HTML文档只有一个根元素。<head>
:这个标签是一个容器,它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述,CSS样式,字符集声明等等。以后的章节能学到更多关于<head>
元素的内容。目前主要了解两个标签:<meta charset="utf-8">
:这个标签是页面的元数据信息,设置文档使用utf-8字符集编码,utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容,能够避免页面乱码问题。<title>
:这个标签定义文档标题,位置出现在浏览器标签上,而不是页面正文中。在收藏页面时,它可用来描述页面。
<body>
:包含了文档内容,你访问页面时所有显示在页面上的文本,图片,音频,游戏等等。
1.2.2 案例实现
- 在初始化页面的
<body>
标签中,加入一对<p>
标签。<p>
标签表示文本的一个段落,具有整段文本之间相分离的效果。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>页面标题</title></head><body></body>
</html>
- 在一对
<p>
标签中,编写文本内容。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>页面标题</title></head><body><p>这是第一个页面</p></body>
</html>
- 打开浏览器查看,效果如下:
1.3 总结
- HTML是一种标记语言,用来组织页面,使用元素和属性。
- 这个元素的主要部分有:
- 元素(Element):开始标签、结束标签与内容相结合,便是一个完整的元素。
- 开始标签(Opening tag):包含元素的名称(本例为 p),被左、右角括号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
- 结束标签(Closing tag):与开始标签相似,只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误,这可能会产生一些奇怪的结果。
- 内容(Content):元素的内容,本例中就是所输入的文本本身。
- 属性(Attribute):标签的附加信息。
- 在学习HTML时,要抓住两个方面:
- 掌握标签所代表的含义。
- 掌握在标签中加入的属性的含义。
2 基本语法
2.1 关于注释
如同大部分的编程语言一样,在HTML中有一种可用的机制来在代码中书写注释。
为了将一段HTML中的内容置为注释,你需要将其用特殊的记号包括起来, 比如:
<p>我在注释外!</p><!-- <p>我在注释内!</p> -->
2.2 关于标签
2.2.1 空元素
不是所有元素都拥有开始标签,内容和结束标记。一些元素只有一个标签,叫做空元素。它是在开始标签中进行关闭的。例子如下:
第一行文档<br/>
第二行文档<br/>
2.2.2 嵌套元素
你也可以把元素放到其它元素之中——这被称作嵌套。比如,我们想要强调第一个
,可以将<b>
标签包围第一个,这样b标签
就是嵌套在了p标签
中:
<p>这是<b>第一个</b>页面</p>
2.2.3 块级和行内
1)概念
在HTML中有两种重要元素类别,块级元素和内联元素。
- 块级元素:
独占一行。块级元素(block)在页面中以块的形式展现。相对于其前面的内容它会出现在新的一行,其后的内容也会被挤到下一行展现。比如<p>
,<hr>
,<li>
,<div>
等。 - 行内元素
行内显示。行内元素不会导致换行。通常出现在块级元素中并环绕文档内容的一小部分,而不是一整个段落或者一组内容。比如<b>
,<a>
,<i>
,<span>
等。
注意:一个块级元素不会被嵌套进内联元素中,但可以嵌套在其它块级元素中。
2)div和span
<div>
是一个通用的内容容器,并没有任何特殊语义。它可以被用来对其它元素进行分组,一般用于样式化相关的需求。它是一个块级元素。<span>
是短语内容的通用行内容器,并没有任何特殊语义。它可以被用来编组元素以达到某种样式。它是一个行内元素。
注意:div和span在页面布局中有重要作用。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>标签</title>
</head>
<body><!--标签分类开始和结束标签自闭和标签--><h1>一级标题</h1><br/>换行<hr/>水平分割线<!--标签的嵌套--><h2><u>二级标题</u></h2><!--块级元素和行内元素--><div>第一个div</div><div>第二个div</div><span>第一个span</span><span>第二个span</span>
</body>
</html>
2.3 关于属性
【重点讲解】
属性作为HTML的重要部分,这里强调属性的格式和作用。
标签属性,主要用于拓展标签。属性包含元素的额外信息,这些信息不会出现在实际的内容中。但是可以改变标签的一些行为或者提供数据,属性总是以name = value
的格式展现。
- 属性名:同一个标签中,属性名不得重复。
- 大小写:属性和属性值对大小写不敏感。不过W3C标准中,推荐使用小写的属性/属性值。
- 引号:双引号是最常用的,不过使用单引号也没有问题。
- 常用属性:
属性名 | 作用 |
---|---|
class | 定义元素类名,用来选择和访问特定的元素 |
id | 定义元素唯一标识符,在整个文档中必须是唯一的 |
name | 定义元素名称,可以用于提交服务器的表单字段 |
value | 定义在元素内显示的默认值 |
style | 定义CSS样式,这些样式会覆盖之前设置的样式 |
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>属性</title>
</head>
<body><div class="cls">第一个div</div><div class="cls">第二个div</div><div id="d1">第三个div</div><div id="d2">第四个div</div><div style="background-color: red">第五个div</div>
</body>
</html>
2.4 特殊字符
在HTML中,字符 <
, >
,"
,'
和 &
是特殊字符. 它们是HTML语法自身的一部分, 那么你如何将这些字符包含进你的文本中呢
原义字符 | 等价字符引用 |
---|---|
< |
<
|
> |
>
|
" |
"
|
’ |
'
|
& |
&
|
空格 |
|
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>特殊字符</title>
</head>
<body>本网站有 最终解释权 <br/>本网站有 最终解释权
</body>
</html>
2.5 总结
HTML的基本语法比较简单,在使用的过程中注意写法即可。
3 HTML案例-新闻文本
重点讲解:
- div布局的基本方式
- 文本标签的基本使用
文本结构的页面基本是由标题和段落构成的,内容结构化会使读者的阅读体验更轻松。
3.1 案例效果
显示新闻文本。
3.2 案例分析
3.2.1 div样式布局
文本由几部分构成,我们可以使用div将页面分割布局。先来了解一下,使用div如何进行简单的布局。
在head标签中,通过style标签加入样式。
基本格式:
格式:
<style>标签名{属性名:属性值;}
</style>
多个属性名格式:
<style>标签名{属性名1:属性值1;属性名2:属性值2;属性名3:属性值3;}
</style>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>样式演示</title><style>div{/*显示边框*/border: 1px solid red;/*宽度 占屏幕的60%*/width: 60%;/*高度 500像素*/height: 500px;/*边框外边距*/margin: auto;}</style>
</head>
<body><div>第一个div</div>
</body>
</html>
效果如下:
div的多样式:
一个属性名可以含有多个值,同时设置多样式。
格式:
<style>标签名{属性名:属性值1 属性值2 属性值3; }
</style>
【提示】
为了布局方便,我们通常可以先设置边框的样式,进行布局。结束后,再去掉边框,直观展示完整界面。
3.2.2 文本标签
使用文本内容标签设置文字基本样式。
标签名 | 作用 |
---|---|
p | 表示文本的一个段落 |
li | 表示列表里的条目。 |
h |
表示文档标题,<h1>–<h6> ,呈现了六个不同的级别的标题,<h1> 级别最高,而 <h6> 级别最低
|
hr | 表示段落级元素之间的主题转换,一般显示为水平线 |
li | 表示列表里的条目。 |
ul | 表示一个无序列表,可含多个元素,无编号显示。 |
ol | 表示一个有序列表,通常渲染为有带编号的列表 |
em | 表示文本着重,一般用斜体显示 |
strong | 表示文本重要,一般用粗体显示 |
font | 表示字体,可以设置样式(已过时) |
i | 表示斜体 |
b | 表示加粗文本 |
重点演示li的不换行效果:
li{ display: inline; // 内联样式,有宽度,无高度}
li{ display: inline-block; // 内联样式,有宽度,有高度}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>文本标签演示</title>
</head>
<body><!--段落标签:<p>--><p>这些年,马云的风头正盛,但是上个月他毅然辞去了阿里巴巴的职务。而马云所做的很多事情也的确改变了这个世界,特别是在移动支付领域,更是走在了世界的前列。如今中国的移动支付已经成为老百姓的必备,支付宝对中国社会的变革都带来了深远的影响。不过马云依然没有满足,他认为移动互联网将会成为人类的基础设施,而且这里面的机会和各种挑战还非常多。</p><p>支付宝的诞生就是为了解决淘宝网的客户们的买卖问题,而随着支付宝的用户的不断增加,支付宝也推出了一系列的附加功能。比如生活缴费、转账汇款、还信用卡、车主服务、公益理财等,往简单的说,支付宝既可以满足人们的日常生活,又可以利用芝麻信用进行资金周转服务。除了芝麻分能够进行周转以外,互联网信用体系下的产品多多,我们对比以下几个产品看看区别:</p><!--标题标签:<h1> ~ <h6>--><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6><!--水平线标签:<hr/>属性:size-大小color-颜色--><hr size="4" color="red"/><!--无序列表:<ul>属性:type-列表样式(disc实心圆、circle空心圆、square实心方块)列表项:<li>--><ul type="circle"><li>javaEE</li><li>HTML</li></ul><!--有序列表:<ol>属性:type-列表样式(1数字、A或a字母、I或i罗马字符) start-起始位置列表项:<li>--><ol type="1" start="10"><li>传智播客</li><li>黑马程序员</li></ol><!--斜体标签:<i> <em>--><i>我倾斜了</i><em>我倾斜了</em><br/><!--加粗标签:<strong> <b>--><strong>加粗文本</strong><b>加粗文本</b><br/><!--文字标签:<font>属性:size-大小color-颜色--><font size="5" color="yellow">这是一段文字</font>
</body>
</html>
3.3 使用标签
- 简单布局,使用div标签。
- 文本样式,使用基本文本标签。
3.4 实现步骤
- 创建初始页面。
- 使用div标签划分区域(标题,作者,副标题,正文),设置div样式。
- 编辑正文。
- 使用h1标签加入标题。
- 使用em标签加入作者信息。
- 使用hr标签加入分割线。
- 使用h3标签加入副标题。
- 使用p标签加入正文。
- 使用ol标签,li标签加入列表信息。
- 使用strong标签,加入文字强调效果。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>新闻文本</title><style>div{/*宽度 60%*/width: 60%;/*外边距*/margin: auto;}</style>
</head>
<body><!--标题--><div><h1>支付宝特权福利!芝麻分600以上用户惊喜,网友:幸福来得突然?</h1></div><!--作者信息--><div><i><font size="2" color="gray">作者:itheima 2088-08-08</font></i><hr/></div><!--副标题--><div><h3>支付宝特权福利!芝麻分600以上用户惊喜,网友:幸福来得突然?</h3></div><!--正文内容--><div><p>这些年,马云的风头正盛,但是上个月他毅然辞去了阿里巴巴的职务。而马云所做的很多事情也的确改变了这个世界,特别是在移动支付领域,更是走在了世界的前列。如今中国的移动支付已经成为老百姓的必备,支付宝对中国社会的变革都带来了深远的影响。不过马云依然没有满足,他认为移动互联网将会成为人类的基础设施,而且这里面的机会和各种挑战还非常多。</p><p>支付宝的诞生就是为了解决淘宝网的客户们的买卖问题,而随着支付宝的用户的不断增加,支付宝也推出了一系列的附加功能。比如生活缴费、转账汇款、还信用卡、车主服务、公益理财等,往简单的说,支付宝既可以满足人们的日常生活,又可以利用芝麻信用进行资金周转服务。除了芝麻分能够进行周转以外,互联网信用体系下的产品多多,我们对比以下几个产品看看区别:<ol><li>蚂蚁借呗,芝麻分600并且受到邀请开通福利,这个就是支付宝贷款,直接秒杀了银行贷款和线下金融公司,是现在支付宝用户使用最多的。</li><li>微粒贷:于2015年上线,主要面向QQ和微信征信极好的用户而推出,受到邀请才能申请开通,额度最高有30万,难度较大</li><li>蚂蚁巴士:这个在微信 蚂蚁巴士 公众平台申请,对于信用分要求530分以上才可以,额度1-30万不等,目前非常火爆</li></ol></p><p>说起支付宝中的芝麻信用功能,相信更是受到了许多人的推崇,因为随着自己使用的不断增多,信用分会慢慢提高,而达到了一个阶段,就可以获得许多的福利。而当我们的芝麻信用分可以达到600分以上的时候,会有令我们想象不到的惊喜,接下来就让我们一起来看看,具体都有哪些惊喜吧。</p><p><b>一、芝麻分600以上福利之信用购。</b>网购相信大家都不陌生,但是很多时候,网购都有一个通病,就是没办法试用,导致很多人买了很多自己不喜欢的东西。但是只要你的支付宝芝麻分在650及以上,就能立马享有0元下单,收到货使用满意了再进行付款。还能享用美食的专属优惠,是不是很耐斯</p><p><b>二、芝麻分600以上福利之信用免押。</b>芝麻信用与木鸟短租联合推出信用住宿服务,芝麻分600及以上的用户可享受免押入住特权。木鸟短租拥有全国50万套房源,是国内领先的短租民宿预订平台。包括大家知道的飞猪信用住,大部分酒店可以免押金入住,离店再交钱。</p><p><b>三、芝麻分600以上福利之国际驾照。</b>我们经常听说的可能只是中国驾照,但现在芝麻分已经应用到了国际领域,只要你的芝麻分够550就可以免费办理国际驾照,也有不少人非常佩服马云,一个简单的芝麻分居然有如此大的功能,也从侧面反应出来马云在国际上的地位,这个国际驾照是由新西兰、德国、澳大利亚联合认证,可以在全球200多个国家通行,相信大家一定都有一个自驾全球的梦想吧,而现在支付宝就给了你一把钥匙,剩下的就你自己搞定了!有没有想带着你的女神来一次浪漫之旅呢?</p><p>随着互联网对我们生活的改变越来越大,信用这一词也被大家推上风口浪尖,不论是生活出行,还是其他的互联网服务,与信用体系已经密不可分了,马云当初说道,找老婆需要拼芝麻分,如今似乎也要成为现实,那么你们的芝麻分有多少了呢?</p></div>
</body>
</html>
4 HTML案例-头条页面
4.1 案例效果
4.2 案例分析
4.2.1 div布局的进阶
想要将div布局成案例效果,首先需要对多个div进行区分,再分别设置每一个div自身的效果。
1)div的class值
首先编写三个div,设置边框样式
<style>div{ border: 1px solid blue;}
</style><div >left</div>
<div >center</div>
<div>right</div>
发现通过div设置的样式都是一致的,无法个性化布局。如何区分不同的div呢?
使用class的值,格式:
.class值{属性名:属性值;
}<标签名 class="class值"> 提示: class是自定义的值
所以,使用class属性值,可以帮助我们区分div,更加精确的设置标签的样式。
2)浮动布局和清除
主体部分分为三列,而div是独占一行的,所以想要使用div布局,就还需要加入浮动
属性。
- 概念
float:指定一个元素应沿其容器的左侧或右侧放置,允许文本或者内联元素环绕它,该元素从网页的正常流动中移除,其他部分保持正常文档流顺序。
格式:
<!-- 加入浮动 -->
float:none;不浮动
float:left;左浮动
float:right;右浮动<!-- 清除浮动 -->
clear:both;清除两侧浮动,此元素不再收浮动元素布局影响。
- 加入三部分div
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
- 浮动布局
.left{width: 20%;float: left;}.center{width: 59%;float: left;}.right{width: 20%;float: left;}
至此完成左中右三部分的布局。
- 加入
footer
部分
.footer{border: 5px solid blue;}<div class="footer">footer</div>
发现蓝色footer
的div,延续正常文档流布局,摆放在navbar
的下方,与浮动元素重叠。想要清除浮动影响,所以要设置清除浮动属性clear
。
.footer{border: 5px solid blue;clear: both; }<div class="footer">footer</div>
- 设置
center
增加center
高度,完成基本的布局效果。
.center{width: 59%;float: left;height: 600px;}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>样式演示</title><style>/*给div标签添加边框*/div{border: 1px solid red;}/*左侧图片的div样式*/.left{width: 20%;float: left;height: 500px;}/*中间正文的div样式*/.center{width: 59%;float: left;height: 500px;}/*右侧广告图片的div样式*/.right{width: 20%;float: left;height: 500px;}/*底部超链接的div样式*/.footer{/*清除浮动效果*/clear: both;/*文本对齐方式*/text-align: center;/*背景颜色*/background: blue;}</style>
</head>
<body><!--顶部登陆注册--><div>top</div><!--导航条--><div>navibar</div><!--左侧图片--><div class="left">left</div><!--中间正文--><div class="center">center</div><!--右侧广告图片--><div class="right">right</div><!--底部页脚超链接--><div class="footer">footer</div>
</body>
</html>
4.2.2 设置背景
- 设置背景的格式:
背景色:background-color: black;
背景图:background-image: url("../img/bg.png");
请设置如下布局,效果如下
代码实现
<!-- 简化版--><style>div{height: 666px;background-color: gray;}/*左侧分享*/.left {width: 10%;float: left;}/*中间文本*/.center {width: 80%;/*最后去除边框宽度恢复为60%*/float: left;background-image: url("../img/star.gif");}/*右侧广告*/.right {width: 10%;float: left;}</style><div class="left"></div>
<div class="center"></div>
<div class="right"></div>
4.2.3 图片标签
标签名 | 作用 | 备注 |
---|---|---|
img | 可以显示一张图片(本地或网络) | src属性,这是一个必需的属性,表示图片的地址。 |
其他属性:
属性名 | 作用 | 备注 |
---|---|---|
title | 鼠标悬停(hover)时显示文本。 | |
alt | 图形不显示时的替换文本。 | |
height | 图像的高度。 | |
width | 图像的宽度。 |
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>图片标签演示</title>
</head>
<body><!--图片标签:<img>属性:src-图片的路径title-鼠标悬浮时显示的内容alt-图片找不到时显示的内容width-图片的宽度height-图片的高度--><img src="../img/ad1.jpg" title="广告" alt="图片找不到啦" width="150px" height="150px"/>
</body>
</html>
4.2.4 超链接
标签名 | 作用 | 备注 |
---|---|---|
a | 表示超链接。 | href属性,表示超链接指向的URL地址。 |
属性名 | 作用 |
---|---|
target | 页面的打开方式(_self当前页 _blank新标签页)。 |
去掉下划线
根据某些样式的布局需求,去除下划线更为美观。
a { text-decoration:none; // none 表示不显示
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>超链接标签演示</title><style>a{/*去掉超链接的下划线*/text-decoration: none;/*超链接的颜色*/color: black;}/*鼠标悬浮的样式控制*/a:hover{color: red;}</style>
</head>
<body><!--超链接标签:<a>属性:href-跳转的地址target-跳转的方式(_self当前页面、_blank新标签页)--><a href="01案例二:样式演示.html" target="_blank">点我跳转到样式演示</a> <br/><a href="http://www.itcast.cn" target="_blank">传智播客</a> <br/><a href="http://www.itheima.com" target="_self">黑马程序员</a> <br/><a href="http://www.itheima.com" target="_blank"><img src="../img/itheima.png" width="150px" height="50px"/></a>
</body>
</html>
4.3 使用标签
- 使用div标签,设置布局,背景和浮动等。
- 基本文本标签
- 图片标签
- 超链接标签
4.4 实现步骤
- 创建初始页面,拷贝图片等素材。
- 整体布局。
- 实现顶部条(图片)。
- 实现导航条(图片)。
- 实现左侧分享区域(图片)。
- 实现中间正文区域(文本+图片)。
- 实现右侧广告区域(图片)。
- 实现底部页脚(链接)。
4.5.2 实现顶部条
HTML代码
<div class="top_bar"><img src="../img/j1.png">
</div>
样式代码
img{width: 100%;}
效果如下:
4.5.3 实现导航条
HTML代码
<div class="nav_bar"><img src="../img/j2.png" width="100%">
</div>
<!-- 加入分割线 -->
<hr size="1"/>
样式代码
hr {color: lightgrey;size: 1px;}
效果如下:
4.5.4 实现左部分享
HTML代码
<div class="left"><img src="../img/j3.png" />
</div>
效果如下:
4.5.5 实现中部正文
HTML代码
<div class="center"><div ><h1>支付宝特权福利!芝麻分600以上用户惊喜,网友:幸福来得突然?</h1></div><div><font color="gray" size="2"> <em> 作者 2019-11-11 11:11:11</em></font> <br/><hr/></div><div><h3>支付宝特权福利!芝麻分600以上用户惊喜,网友:幸福来得突然?</h3></div><div><p>这些年,马云的风头正盛,但是上个月他毅然辞去了阿里巴巴的职务。而马云所做的很多事情也的确改变了这个世界,特别是在移动支付领域,更是走在了世界的前列。如今中国的移动支付已经成为老百姓的必备,支付宝对中国社会的变革都带来了深远的影响。不过马云依然没有满足,他认为移动互联网将会成为人类的基础设施,而且这里面的机会和各种挑战还非常多。</p><p>支付宝的诞生就是为了解决淘宝网的客户们的买卖问题,而随着支付宝的用户的不断增加,支付宝也推出了一系列的附加功能。比如生活缴费、转账汇款、还信用卡、车主服务、公益理财等,往简单的说,支付宝既可以满足人们的日常生活,又可以利用芝麻信用进行资金周转服务。除了芝麻分能够进行周转以外,互联网信用体系 下的产品多多,我们对比以下几个产品看看区别:<ol type="1"><li>蚂蚁借呗,芝麻分600并且受到邀请开通福利,这个就是支付宝贷款,直接秒杀了银行贷款和线下金融公司,是现在支付宝用户使用最多的。</li><li>微粒贷:于2015年上线,主要面向QQ和微信征信极好的用户而推出,受到邀请才能申请开通,额度最高有30万,难度较大</li><li>蚂蚁巴士:这个在微信 蚂蚁巴士 公众平台申请,对于信用分要求530分以上才可以,额度1-30万不等,目前非常火爆</li></ol><img src="../img/1.jpg" /></p><p>说起支付宝中的芝麻信用功能,相信更是受到了许多人的推崇,因为随着自己使用的不断增多,信用分会慢慢提高,而达到了一个阶段,就可以获得许多的福利。而当我们的芝麻信用分可以达到600分以上的时候,会有令我们想象不到的惊喜,接下来就让我们一起来看看,具体都有哪些惊喜吧。</p><p><strong>一、芝麻分600以上福利之信用购。</strong>网购相信大家都不陌生,但是很多时候,网购都有一个通病,就是没办法试用,导致很多人买了很多自己不喜欢的东西。但是只要你的支付宝芝麻分在650及以上,就能立马享有0元下单,收到货使用满意了再进行付款。还能享用美食的专属优惠,是不是很耐斯</p><p><strong>二、芝麻分600以上福利之信用免押。</strong>芝麻信用与木鸟短租联合推出信用住宿服务,芝麻分600及以上的用户可享受免押入住特权。木鸟短租拥有全国50万套房源,是国内领先的短租民宿预订平台。包括大家知道的飞猪信用住,大部分酒店可以免押金入住,离店再交钱。</p><img src="../img/2.jpg" /><p><strong> 三、芝麻分600以上福利之国际驾照。</strong>我们经常听说的可能只是中国驾照,但现在芝麻分已经应用到了国际领域,只要你的芝麻分够550就可以免费办理国际驾照,也有不少人非常佩服马云,一个简单的芝麻分居然有如此大的功能,也从侧面反应出来马云在国际上的地位,这个国际驾照是由新西兰、德国、澳大利亚联合认证,可以在全球200多个国家通行,相信大家一定都有一个自驾全球的梦想吧,而现在支付宝就给了你一把钥匙,剩下的就你自己搞定了!有没有想带着你的女神来一次浪漫之旅呢?</p><p>随着互联网对我们生活的改变越来越大,信用这一词也被大家推上风口浪尖,不论是生活出行,还是其他的互联网服务,与信用体系已经密不可分了,马云当初说道,找老婆需要拼芝麻分,如今似乎也要成为现实,那么你们的芝麻分有多少了呢?</p></div>
</div>
样式代码
.center {width: 60%; /*最后去除边框宽度恢复为60%*/float: left; }
4.5.6 实现右侧广告
HTML代码
<div class="right"><div class="right_ad"><img src="../img/ad1.jpg" ></div><div class="right_ad"><img src="../img/ad2.jpg" ></div><div class="right_ad"><img src="../img/ad3.jpg" ></div><div class="right_ad"><img src="../img/ad1.jpg" ></div><div class="right_ad"><img src="../img/ad2.jpg" ></div><div class="right_ad"><img src="../img/ad3.jpg" ></div>
</div>
效果如下:
4.5.7 实现底部页脚
HTML代码
<div class="footer"><a href="#">关于黑马 </a><a href="#">帮助中心 </a><a href="#">开放平台 </a><a href="#">诚聘英才 </a><a href="#">联系我们 </a><a href="#">法律声明 </a><a href="#">隐私政策 </a><a href="#">知识产权 </a><a href="#">廉正举报 </a>
</div>
样式代码
.footer {clear: both;background-color: cornflowerblue;text-align: center;}a{text-decoration: none;color: white;}
5 HTML案例-登录页面
5.1 案例效果
5.2 案例分析
5.2.1 表单标签
标签名 | 作用 | 备注 |
---|---|---|
form | 表示表单,是用来收集用户输入信息并向 Web 服务器提交的一个容器 |
举例:
<form >//表单元素
</form>
表单的属性
属性名 | 作用 | 备注 |
---|---|---|
action | 处理此表单信息的Web服务器的URL地址 | |
method | 提交此表单信息到Web服务器的方式 | 可能的值有get和post,默认为get |
autocomplete | 自动补全,指示表单元素是否能够拥有一个默认值,配合input标签使用 | HTML5 |
举例:
<!-- 一个简单的表单,会发送一个 GET 请求 -->
<form action="/web/login" method="get">
</form><!-- 一个简单的表单,发送 POST 请求 -->
<form action="/web/reg" method="post">
</form>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单标签的演示</title>
</head>
<body><!--表单标签:<form>属性:action-提交的路径method-提交的方式(get和post)autocomplete-记录补全(on和off)--><!--get方式的表单--><form action="#" method="get" autocomplete="off">用户名:<input type="text" name="username"/><button type="submit">提交</button></form><!--post方式的表单--><form action="#" method="post" autocomplete="off">用户名:<input type="text" name="username"/><button type="submit">提交</button></form>
</body>
</html>
GET与POST说明:
post
:指的是 HTTP POST 方法;表单数据会包含在表单体内然后发送给服务器。
get
:指的是 HTTP GET 方法;表单数据会附加在 action
属性的URI中,并以 ‘?’ 作为分隔符,然后这样得到的 URI 再发送给服务器。
GET方式举例:
GET与POST对比:
地址栏可见 | 数据安全 | 数据大小 | |
---|---|---|---|
GET | 可见 | 不安全 | 有限制(取决于浏览器) |
POST | 不可见 | 相对安全 | 无限制 |
5.2.2 表单元素入门
表单元素指的是 input 元素、复选框、下拉框、提交按钮等等。
标签名 | 作用 | 备注 |
---|---|---|
**label ** | 表单元素的说明,配合表单元素使用 | for属性值为相关表单元素的id属性值 |
input | 表单中输入控件,多种输入类型,用于接受来自用户数据 | type属性值决定输入类型 |
button | 页面中可点击的按钮,可以配合表单进行提交 | type属性值决定按钮类型 |
1)简单的文本输入框
- label标签:表单的说明。
- for属性值:匹配input标签的id属性值
- input标签:输入控件。
- type属性:表示输入类型,text值为普通文本框
- id属性:表示标签唯一标识
- name属性:表示标签名称
- value属性:表示标签数据值
代码实现:
<form action="" method="post"><label for="username">Username:</label><input type="text" id="username" name="username" value="tom">
</form>
效果如图:
2)提交用户名的表单
- button标签:表示按钮。
- type属性:表示按钮类型,submit值为提交按钮。
<form action="" method="post"><label for="username">Username:</label><input type="text" id="username" name="username" value="tom"><button type="submit" >login</button>
</form>
5.2.3 关于属性值
1)NAME和VALUE属性
属性名 | 作用 |
---|---|
name |
<input>
|
的名字,在提交整个表单数据时,可以用于区分属于不同<input>
|
|
的值 | |
value |
这个<input>
|
元素当前的值,允许用户通过页面输入 |
使用方式:
以name属性值作为键,value属性值作为值,构成键值对提交到服务器,多个键值对浏览器使用&
进行分隔。
举例:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单项标签</title>
</head>
<body><!--表单项标签:<label> 表单元素说明属性:for属性,属性值必须和表单项标签id属性值一致表单项标签:<input> 多种类型数据属性:type-数据类型id-唯一标识name-提交服务器的标识value-默认的数据值placeholder-默认的提示信息required-是否必须按钮标签:<button>属性:type-按钮的类型(submit提交、reset重置、button普通按钮)--><form action="#" method="get" autocomplete="off"><label for="username">用户名:</label><input type="text" id="username" name="username" value="" placeholder=" 请在此处输入用户名" required/><button type="submit">提交</button><button type="reset">重置</button><button type="button">按钮</button></form>
</body>
</html>
2)TYPE属性
- input标签的type属性
【建议】
这是今天的重点讲解内容,type的值决定输入的类型
- 基本的文本属性
属性值 | 作用 | 备注 |
---|---|---|
text | 单行文本字段 | |
password | 单行文本字段,值被遮盖 | |
用于编辑 e-mail 的字段,可以对e-mail地址进行简单校验 | HTML5 |
举例:
<form action="#" method="get"><label for="username">Username:</label><input type="text" id="username" name="username"> <br/><label for="password">Password:</label><input type="password" id="password" name="password"><br/><label for="email">Email: </label><input type="email" id="email" name="email"><br/><button type="submit"> login</button></form>
- 单选多选属性
举例:
属性值 | 作用 |
---|---|
radio | 单选按钮。 1. 在同一个”单选按钮组“中,所有单选按钮的 name 属性使用同一个值;一个单选按钮组中是,同一时间只有一个单选按钮可以被选择。 2. 必须使用 value 属性定义此控件被提交时的值。 3. 使用checked 必须指示控件是否缺省被选择。 |
checkbox | 复选框。 1. 必须使用 value 属性定义此控件被提交时的值。 2. 使用 checked 属性指示控件是否被选择。 3. 选中多个值时,所有的值会构成一个数组而提交到Web服务器 |
<form action="#" method="get"><label for="gender">性别:</label><input type="radio" id="gender" name="gender" value="boy"/>男<input type="radio" name="gender" value="girl" checked="checked"/>女<hr/><label for="hobby">爱好: </label><input type="checkbox" id="hobby" name="hobby" value="sport"/> 体育<input type="checkbox" name="hobby" value="tech"/> 科技<input type="checkbox" name="hobby" value="fun" /> 娱乐<input type="checkbox" name="hobby" value="video" checked="checked"/> 短视频
</form>
- 按钮属性
属性值 | 作用 |
---|---|
button | 无行为按钮,用于结合JavaScript实现自定义动态效果 |
submit | 提交按钮,用于提交表单数据。 |
reset | 重置按钮,用于将表单中内容恢复为默认值。 |
image | 图片提交按钮。必须使用 src 属性定义图片的来源及使用 alt 定义替代文本。还可以使用 height 和 width 属性以像素为单位定义图片的大小。 |
- HTML5新增的type值
属性值 | 作用 | 备注 |
---|---|---|
date | HTML5 用于输入日期的控件 | 年,月,日,不包括时间 |
time | HTML5 用于输入时间的控件 | 不含时区 |
datetime-local | HTML5 用于输入日期时间的控件 | 不包含时区 |
number | HTML5 用于输入浮点数的控件 | |
tel | HTML5 用于输入电话号码的控件 | |
range | HTML5 用于输入不精确值控件 | max-规定最大值min-规定最小值 step-规定步进值 value-规定默认值 |
search | HTML5 用于输入搜索字符串的单行文本字段 |
可以点击x 清除内容
|
tel | HTML5 用于输入电话号码的控件 | |
url | HTML5 用于编辑URL的字段 | 可以校验URL地址格式 |
属性值 | 作用 | 备注 |
---|---|---|
file | 此控件可以让用户选择文件,用于文件上传。 | 使用 accept 属性可以定义控件可以选择的文件类型。 |
hidden | 此控件用户在页面上不可见,但它的值会被提交到服务器,用于传递隐藏值 |
- button标签的type属性
属性值 | 作用 | 备注 |
---|---|---|
submit | 此按钮将表单数据提交给服务器。如果未指定属性,或者属性动态更改为空值或无效值,则此值为默认值。 |
同 <input type="submit"/>
|
reset | 此按钮重置所有组件为初始值。 |
同<input type="reset" />
|
button | 此按钮没有默认行为。它可以有与元素事件相关的客户端脚本,当事件出现时可触发。 |
同<input type="button"/>
|
3)HTML5新增属性
属性名 | 作用 | 备注 |
---|---|---|
placeholder | 提示用户输入框的作用。用于提示的占位符文本不能包含回车或换行。 | 仅适用于当type 属性为text, search, tel, url or email时; 否则会被忽略。 |
required | 这个属性指 定用户在提交表单之前必须为该元素填充值 | 1. 布尔属性,可省略属性值表示true 2. 当type属性是hidden,image或者button类型时不可使用 |
autocomplete | 自动补全,规定表单或输入字段是否应该自动完成。当自动完成开启,浏览器会基于用户之前的输入值自动填写值。 | 1. 开启为on,关闭为off2. 可以设置指定的字段为off,关闭自动补全 |
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>type属性演示</title>
</head>
<body><!--type属性<input type="text"/> 普通文本输入框<input type="password"/> 密码输入框<input type="email"/> 邮箱输入框<input type="radio"/> 单选框。必须有相同的name属性值,value属性真实提交的数据,checked属性默认选中<input type="checkbox"/> 多选框。必须有相同的name属性值,value属性真实提交的数据,checked属性默认选中<input type="date"/> 日期框<input type="time"/> 时间框<input type="datetime-local"/> 本地日期时间框<input type="number"/> 数字框<input type="range"/> 滚动条数值框 min-最小值 max-最大值 step-步进值<input type="search"/> 可清除文本框<input type="tel"/> 电话框<input type="url"/> 网址框<input type="file"/> 文件上传框<input type="hidden"/> 隐藏域 value属性设置实际提交的值--><form action="#" method="get" autocomplete="off"><label for="username">用户名:</label><input type="text" id="username" name="username"/> <br/><label for="password">密码:</label><input type="password" id="password" name="password"/> <br/><label for="email">邮箱:</label><input type="email" id="email" name="email"/> <br/><label for="gender">性别:</label><input type="radio" id="gender" name="gender" value="men"/>男<input type="radio" name="gender" value="women"/>女<input type="radio" name="gender" value="other"/>其他<br/><label for="hobby">爱好:</label><input type="checkbox" id="hobby" name="hobby" value="music" checked/>音乐<input type="checkbox" name="hobby" value="game"/>游戏 <br/><label for="birthday">生日:</label><input type="date" id="birthday" name="birthday"/> <br/><label for="time">当前时间:</label><input type="time" id="time" name="time"/> <br/><label for="insert">注册时间:</label><input type="datetime-local" id="insert" name="insert"/> <br/><label for="age">年龄:</label><input type="number" id="age" name="age"/> <br/><label for="range">心情值(1~10):</label><input type="range" id="range" name="ran ge" min="1" max="10" step="1"/> <br/><label for="search">可全部清除文本:</label><input type="search" id="search" name="search"/> <br/><label for="tel">电话:</label><input type="tel" id="tel" name="tel"/> <br/><label for="url">个人网站:</label><input type="url" id="url" name="url"/> <br/><label for="file">文件上传:</label><input type="file" id="file" name="file"/> <br/><label for="hidden">隐藏信息:</label><input type="hidden" id="hidden" name="hidden" value="itheima"/> <br/><button type="submit">提交</button><button type="reset">重置</button></form>
</body>
</html>
5.2.4 更多表单元素
标签名 | 作用 | 备注 |
---|---|---|
**select ** | 表单的控件,下拉选项菜单 | 与option配合实用 |
optgroup | option的分组标签 | 与option配合实用 |
**option ** | select的子标签,表示一个选项 | |
textarea | 表示多行纯文本编辑控件 | rows表示行高度, cols表示列宽度 |
fieldset | 用来对表单中的控制元素进行分组(也包括 label 元素) | |
legend | 用于表示它的fieldset内容的标题。 | fieldset 的子元素 |
select举例:
<label for="pet-select">Choose a pet:</label><select name="pets" id="pet-select"><option value="">--Please choose an option--</option><option value="dog">Dog</option><option value="cat">Cat</option><option value="hamster">Hamster</option><option value="parrot">Parrot</option><option value="spider">Spider</option><option value="goldfish">Goldfish</option>
</select><!-- select的name属性值与option的value属性值,构成键值对,提交到Web服务器
-->
textarea举例:
<textarea name="textarea" rows="10" cols="50">Write something here</textarea>
fieldset举例:
<form action="#" method="post"><fieldset><legend>是否同意</legend><input type="radio" id="radio_y" name="agree" value="y"> <label for="radio_y">同意</label><input type="radio" id="radio_n" name="agree" value="n"> <label for="radio_n">不同意</label></fieldset>
</form>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>其他常用表单项标签演示</title>
</head>
<body><!--下拉列表标签:<select>列表项标签:<option>列表项分组标签:<optgroup> 属性:label设置分组名称文本域标签:<textarea>属性:rows-行数cols-列数--><form action="#" method="get" autocomplete="off">所在城市:<select name="city"><option>---请选择城市---</option><optgroup label="直辖市"><option>北京</option><option>上海</option></optgroup><optgroup label="省会市"><option>杭州</option><option>武汉</option></optgroup></select><br/>个人介绍:<textarea name="desc" rows="5" cols="20"></textarea><button type="submit">提交</button><button type="reset">重置</button></form>
</body>
</html>
5.3 使用标签
- 简单布局,使用div标签
- 基本文本标签
- 表单标签
- 图片标签
5.4 实现步骤
- 设置背景图。
- 基本上下两部分布局。
- 实现上部(图片)
- 实现下部(表单)
- 实现页面跳转,从案例2跳转到案例3。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>注册页面</title><style>body{background: url("../img/bg.png");}.center{/*背景颜色*/background: white;/*宽度*/width: 400px;/*文本对齐方式*/text-align: center;/*外边距*/margin: auto;}</style>
</head>
<body><!--顶部-公司图标--><div><img src="../img/logo.png"/></div><!--中间-注册信息--><div class="center"><div>注册详情</div><hr/><!--表单标签--><form action="#" method="get" autocomplete="off"><div><label for="username">姓名:</label><input type="text" id="username" name="username" value="" placeholder=" 在此输入姓名" required/></div><div><label for="password">密码:</label><input type="password" id="password" name="password" value="" placeholder=" 在此输入密码" required/></div><div><label for="email">邮箱:</label><input type="email" id="email" name="email" value="" placeholder=" 在此输入邮箱" required/></div><div><label for="tel">手机:</label><input type="tel" id="tel" name="tel" value="" placeholder=" 在此输入手机" required/></div><hr/><div><label for="gender">性别:</label><input type="radio" id="gender" name="gender" value="men"/>男 <input type="radio" name="gender" value="women"/>女 </div><div><label for="hobby">爱好:</label><input type="checkbox" id="hobby" name="hobby" value="music"/>音乐<input type="checkbox" name="hobby" value="movie"/>电影<input type="checkbox" name="hobby" value="game"/>游戏</div><div><label for="birthday">出生日期:</label><input type="date" id="birthday" name="birthday" value=""/></div><div><label for="city">所在城市:</label><select id="city" name="city"><option>---请选择所在城市---</option><optgroup label="直辖市"><option>北京</option><option>上海</option><option>广州</option><option>深圳</option></optgroup><optgroup label="省会市"><option>西安</option><option>杭州</option><option>郑州</option><option>武汉</option></optgroup></select></div><hr/><div><label for="desc">个性签名:</label><textarea id="desc" name="desc" rows="5" cols="40" placeholder=" 请写下您的与众不同"></textarea></div><hr/><button type="submit">注册</button><button type="reset">重置</button></form></div>
</body>
</html>
JavaEE-v4.0-Css+Nginx
1 CSS入门
1.1 初识CSS
1.1.1 概述
在学习了基本HTML标签和样式后,接下来学习前端开发的第二门技术。
我们发现,虽然标签的属性可以调整一些样式,但是效果不够理想,而我们更愿意把样式编写在<style>
标签中,让页面设计更美观更丰富,实际上,这是通过CSS实现的。那么什么是CSS呢?
如果说,HTML是网页的"素颜",那么CSS就是页面的"美妆师",它就是让网页的外观更漂亮!
CSS (层叠样式表——Cascading Style Sheets,缩写为 CSS),简单的说,它是用于设置和布局网页的计算机语言。会告知浏览器如何渲染页面元素。例如,调整内容的字体,颜色,大小等样式,设置边框的样式,调整模块的间距等。
所谓层叠
: 是指样式表允许以多种方式规定样式信息。可以规定在单个元素中,可以在页面头元素中,也可以在另一个CSS文件中,规定的方式会有次序的差别(讲解引入时说明)。
所谓样式
:是指丰富的样式外观。拿边框距离来说,允许任何设置边框,允许设置边框与框内元素的距离,允许设置边框与边框的距离等等。
- CSS发展简史【了解】
- CSS1:1994 年,Hkon Wium Lie 最初提出了 CSS 的想法,联合当时正在设计 Argo 的浏览器的Bert Bos,他们决定一起合作设计 CSS,于是创造了 CSS 的最初版本。1996 年 12 月,W3C 推出了 CSS 规范的第一版本。
- CSS2:1998 年,W3C 发布了 CSS 的第二个版本,目前的主流浏览器都采用这标准。CSS2 的规范是基于 CSS1 设计的,包含了 CSS1 所有的功能,并扩充和改进了很多更加强大的属性。
- CSS3:2005 年 12 月,W3C 开始 CSS3 标准的制定,并遵循模块化开发,所以没有固定的发布时间,而是一段时间发布一些特性模块。
图片了解资料:
https://www.cnblogs.com/LO-ME/p/3651140.html
1.1.2 CSS的组成
CSS是一门基于规则的语言 — 你能定义用于你的网页中特定元素的一组样式规则。这里面提到了两个概念,一是特定元素,二是样式规则。对应CSS的语法,也就是选择器(selects)和声明(eclarations)。
- 选择器:指定将要添加样式的 HTML元素的方式。可以使用标签名,class值,id值等多种方式。
- 声明:形式为属性(property):值(value),用于设置特定元素的属性信息。
- 属性:指示文体特征,例如
font-size
,width
,background-color
。 - 值:每个指定的属性都有一个值,该值指示您如何更改这些样式。
- 属性:指示文体特征,例如
格式:
选择器 {属性名:属性值;属性名:属性值;属性名:属性值;
}
举例:
h1 {color: red;font-size: 5px;
}
格式简介:语法由一个 选择器(selector)起头。 它 选择(selects) 了我们将要用来添加样式的 HTML元素。 在这个例子中我们为一级标题添加样式。
接着输入一对大括号
{ }
。 在大括号内部定义一个或多个形式为 属性(property):值(value); 的 声明(eclarations)。每个声明都指定了我们所选择元素的一个属性,之后跟一个我们想赋给这个属性的值。冒号之前是属性,冒号之后是值。不同的CSS 属性(properties) 对应不同的合法值。在这个例子中,我们指定了
color
属性,它可以接受许多 颜色值(lor values)。 还有font-size
属性, 它可以接收许多 size units 值。
1.2 入门案例
- 在初始页面的
<body>
标签中,加入一对<h1>
标签。<h1>
标签规定的固定的标题样式。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>页面标题</title></head><body><h1>今天开始变漂亮!!!</h1></body>
</html>
- 在
<head>
标签中加入一对<style>
标签中,表示准备应用样式。
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>页面标题</title><!-- 加入style标签 --><style></style>
</head>
<body>
<h1 color="red">今天开始变漂亮!!!</h1>
</body>
</html>
- 编写样式
<style>h1{color: red; /* 设置颜色为红色*/font-size:100px; /* 设置字体大小为100像素*/}</style>
- 打开浏览器查看,文字的颜色和大小都发生改变,应用了新的样式,效果如图:
1.3 Chrome开发者工具
打开开发者工具
打开浏览器,点击键盘F12
键,显示开发者工具窗口。
查看开发者工具
演示选择元素
演示修改样式
1.4 总结
CSS是对HTML的补充,指定页面如何展示的语言。
CSS的主要部分有:
- 选择器:用来选择页面元素的方式。
- 声明:用来设置样式,格式
属性名:值
。
在学习CSS时,要抓住两个方面:
- 掌握多种选择器,能够灵活的选择页面元素。
- 掌握样式的声明,能够使用多种属性来设置多样的效果。
2 基本语法
2.1 引入方式
2.1.1 内联样式
了解,几乎不用,维护艰难
内联样式是CSS声明在元素的style
属性中,仅影响一个元素:
- 格式:
<标签 style="属性名:属性值; 属性名:属性值;">内容</标签>
- 举例:
<h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!
</h1>
- 效果如下:
虽然格式简单,但是样式作用无法复用到多个元素上,不利于维护,此格式了解即可。
2.1.2 内部样式表
内部样式表是将CSS样式放在[style](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/style)
标签中,通常style标签
编写在HTML 的[head](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/head)
标签内部。
- 格式:
<head><style>选择器 {属性名: 属性值;属性名: 属性值;}</style>
</head>
- 举例:
<head><style>h1 {color: blue;background-color: yellow;border: 1px solid black;}</style></head>
效果如下:
内部样式只能作用在当前页面上,如果是多个页面,就无法复用了。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>引入方式2</title><!--内部样式--><style>div{color: red;font-size: 20px;}</style>
</head>
<body><div>div1</div><div>div2</div>
</body>
</html>
2.1.3 外部样式表
外部样式表是CSS附加到文档中的最常见和最有用的方法,因为您可以将CSS文件链接到多个页面,从而允许您使用相同的样式表设置所有页面的样式。
外部样式表是指将CSS编写在扩展名为.css
的单独文件中,并从HTML<link>
元素引用它,通常link标签
编写在HTML 的[head](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/head)
标签内部。:
- 格式:
<link rel="stylesheet" href="css文件">rel:表示“关系 (relationship) ”,属性值指链接方式与包含它的文档之间的关系,引入css文件固定值为stylesheet。href:属性需要引用某文件系统中的一个文件。
- 举例:
- 创建styles.css文件
h1 {color: blue;background-color: yellow;border: 1px solid black;
}
- link标签引入文件
<!DOCTYPE html>
<html><head><meta charset="utf-8"><link rel="stylesheet" href="styles.css"></head><body><h1>Hello World!</h1></body>
</html>
- 效果如下:
当然也可以把CSS文件放在其他地方,并调整指定的路径以匹配,例如:
<link rel="stylesheet" href="css/styles.css">
为了保证CSS文件的管理,建议在项目中创建一个css文件夹
,专门保存样式文件。
注意:引入样式的优先级问题。
规则层叠于一个样式表中,其中数字 4 拥有最高的优先权:
- 浏览器缺省设置
- 外部样式表
- 内部样式表(位于 标签内部)
- 内联样式(在 HTML 元素内部)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>引入方式3</title><!--外部样式--><link rel="stylesheet" href="css/01.css"/>
</head>
<body><div>div1</div><div>div2</div>
</body>
</html>
div{color: red;font-size: 20px;
}
2.2 关于注释
与HTML一样,鼓励您在CSS中进行注释,以帮助您理解几个月后返回的代码工作方式,并帮助其他使用该代码的人对其进行理解。
CSS中的注释以/*
和开头*/
。在下面的代码块中,我已使用注释标记了不同的不同代码段的开始。
格式:
/* 设置h1的样式 */
h1 {color: blue;background-color: yellow;border: 1px solid black;
}
2.3 关于选择器
选择器作为CSS的重要部分,这里强调基本选择器的使用和其他选择器的基本格式。
讲到CSS就不得不说到选择器,为了样式化某些元素,我们会通过选择器来选中HTML文档中的这些元素。如果你的样式没有生效,那很可能是你的选择器没有像你想象的那样选中你想要的元素。
每个CSS规则都以一个选择器或一组选择器为开始,去告诉浏览器这些规则应该应用到哪些元素上。
接下来我们将要详细的学习各种选择器的使用。
选择器的分类:
分类 | 名称 | 符号 | 作用 | 示例 |
---|---|---|---|---|
基本选择器 | 元素选择器 | 标签名 | 基于标签名匹配元素 | div{ } |
类选择器 |
.
|
基于class属性值匹配元素 | .center{ } | |
ID选择器 |
#
|
基于id属性值匹配元素 | #username{ } | |
属性选择器 | 属性选择器 |
[]
|
基于某属性匹配元素 | [type]{ } |
伪类选择器 | 伪类选择器 |
:
|
用于向某些选择器添加特殊的效果 | a : hover{ } |
组合选择器 | 后代选择器 |
空格
|
使用空格符号 结合两个选择器,基于第一个选择器,匹配第二个选择器的所有后代元素
|
.top li{ } |
同级选择器 |
~
|
使用 ~ 结合两个选择器,基于第一个选择器,匹配第二个选择器的所有兄弟元素
|
.l1 ~ li{ } | |
相邻选择器 |
+
|
使用 + 结合两个选择器,基于第一个选择器,匹配第二个选择器的相邻兄弟元素
|
.l1 + li{ } |
2.2.1 基本选择器
1)元素选择器
页面元素:
<div><ul><li>List item 1</li><li>List item 2</li><li>List item 3</li></ul><ol><li>List item 1</li><li>List item 2</li><li>List item 3</li></ol>
</div>
选择器:
选择所有li标签,背景变成蓝色
li{background-color: aqua;
}
2)类选择器
页面元素:
<div><ul><li class="ulist l1">List item 1</li><li class="l2">List item 2</li><li class="l3">List item 3</li></ul><ol><!--class 为两个值--><li class="olist l1">List item 1</li><li class="olist l2">List item 2</li><li class="olist l3">List item 3</li></ol>
</div>
选择器:
选择class属性值为l2的,背景变成蓝色
.l2{background-color: aqua;
}
选择class属性值为olist l2的,字体为白色
.olist.l2{color: wheat;
}
3)ID选择器
页面元素:
<div><ul><li class="l1" id="one">List item 1</li><li class="l2" id="two">List item 2</li><li class="l3" id="three">List item 3</li></ul><ol><li class="l1" id="four">List item 1</li><li class="l2" id="five">List item 2</li><li class="l3" id="six">List item 3</li></ol>
</div>
选择器:
#tow{background-color: aqua;
}
效果如图:
4)通用选择器
页面元素:
<div><ul><li class="l1" id="one">List item 1</li><li class="l2" id="two">List item 2</li><li class="l3" id="three">List item 3</li></ul><ol><li class="l1" id="four">List item 1</li><li class="l2" id="five">List item 2</li><li class="l3" id="six">List item 3</li></ol>
</div>
选择器:
所有标签
*{background-color: aqua;
}
2.2.2 属性选择器
页面元素:
<ul class="l1"><li >List item 1</li><li >List item 2</li><li >List item 3</li></ul><ul class="l2"><li id="four">List item 1</li><li id="five">List item 2</li><li id="six">List item 3</li></ul><p class="">p item</p>
选择器和效果图,示例1
[属性名]{ }
选择器和效果图,示例2
标签名[属性名]{ }
选择器和效果图,示例3
标签名[属性名='属性值']{ }
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>属性选择器</title><style>[type]{color: red;}[type=password]{color: blue;}</style>
</head>
<body>用户名:<input type="text"/> <br/>密码:<input type="password"/> <br/>邮箱:<input type="email"/> <br/>
</body>
</html>
2.2.3 伪类选择器
伪类选择器,用于选择处于特定状态的元素,例如,一些元素中的第一个元素,或者某个元素被鼠标指针悬停。
格式:
标签名:伪类名{ }
常用伪类:
- 锚伪类
在支持 CSS 的浏览器中,链接的不同状态都可以以不同的方式显示
代码示例:
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标悬停链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
注意:
伪类顺序 link ,visited,hover,active,否则有可能失效。
HTML 代码 :
<div><a class="red" href="http://www.itheima.com">黑马</a> <br/><a class="blue" href="http://www.itheima.com">传智</a>
</div>CSS 代码 :
/* 选择a标签,class值为red ,设置访问后为红色链接*/
a.red:visited {color: red;
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>伪类选择器</title><style>a{text-decoration: none;}/*未访问的状态*/a:link{color: black;}/*已访问的状态*/a:visited{color: blue;}/*鼠标悬浮的状态*/a:hover{color: red;}/*已选中的状态*/a:active{color: yellow;}</style>
</head>
<body><a href="https://www.baidu.com" target="_blank">百度一下</a>
</body>
</html>
2.2.4 组合选择器
页面元素:
<div><ul class="l1"><li>List item 1</li><li>List item 2</li><li>List item 3</li><ul class="l2"><li id="four">List item 1</li><li id="five">List item 2</li><li id="six">List item 3</li></ul></ul>
</div>
1)后代选择器
选择器:
.l1 li{background-color: aqua;
}
2)子级选择器
选择器:
.l1 > li{background-color: aqua;
}
3)同级选择器
选择器:
.l1 ~ li{background-color: aqua;
}
4)相邻选择器
选择器:
.l1 + li{background-color: aqua;
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>组合选择器</title><style>/*后代选择器*/.center li{color: red;}/*分组选择器*/span,p{color: blue;}</style>
</head>
<body><div class="top"><ol><li>aa</li><li>bb</li></ol></div><div class="center"><ol><li>cc</li><li>dd</li></ol></div><span>span</span> <br/><p>段落</p>
</body>
</html>
2.4 总结
- CSS的引入方式有三种,建议使用外部样式表。
- 注释类似于java多行注释。
- 选择器是CSS的重要部分:
- 基本选择器:可以通过元素,类,id来选择元素。
- 属性选择器:可以通过属性值选择元素
- 伪类选择器:可以指定元素的某种状态,比如链接
- 组合选择器:可以组合基本选择器,更加精细的划分如何选择
3 CSS案例-头条页面
3.1 案例效果
3.2 案例分析
3.2.1 语义化标签
了解讲解:
简单介绍作用即可,后续在案例中使用。
为了更好的组织文档,HTML5规范中设计了几个语义元素,可以将特殊含义传达给浏览器。
标签 | 名称 | 作用 | 备注 |
---|---|---|---|
header | 标头元素 | 表示内容的介绍 | 块元素,文档中可以定义多个 |
nav | 导航元素 | 表示导航链接 | 常见于网站的菜单,目录和索引等,可以嵌套在header中 |
article | 文章元素 | 表示独立内容区域 | 标签定义的内容本身必须是有意义且必须独立于文档的其他部分 |
footer | 页脚元素 | 表示页面的底部 | 块元素,文档中可以定义多个 |
标签结构示例如图:
3.2.2 常见样式属性
其他属性:
分类 | 属性名 | 作用 |
---|---|---|
边框 | border | 边框 |
border-top | 底部边框 | |
border-radius | 设置边框圆角 | |
文本 | color | 颜色 |
font-family | 字体样式 | |
font-size | 字体大小 | |
text-decoration | 下划线 | |
text-align | 文本水平对齐 | |
line-height | 行高,行间距 | |
vertical-align | 文本垂直对齐 |
1)边框样式
在这里插入图片描述
在之前学习了简写属性来设置边框样式,接下来我们将研究如何创造性地使用边框。
<!--回顾简写样式 -->
div { border: 1px solid black;
}
- 单个边框
设置一个方向边框的宽度、样式和颜色,例如:
.box { border-top: 1px solid black; border-left: 5px double yellow;border-bottom: 5px dotted green;border-right: 5px dashed red;
}
border-top: 上边框
border-left: 左边框
border-bottom: 底边框
border-right: 右边框
- 无边框
当border值为none时,可以让边框不显示,用于特殊效果。
div {width: 200px;height: 200px;border: none;}
- 圆角
通过使用[border-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius)
属性设置盒子的圆角,虽然能分别设置四个角,但是通常我们使用一个值,来设置整体效果,例如
div {width: 200px;height: 200px;border: 10px solid blue;border-radius: 50px;}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>边框样式演示</title><style>#d1{/*设置所有边框*//*border: 5px solid black;*//*设置上边框*/border-top: 5px solid black;/*设置左边框*/border-left: 5px double red;/*设置右边框*/border-right: 5px dotted blue;/*设置下边框*/border-bottom: 5px dashed pink;width: 150px;height: 150px;}#d2{border: 5px solid red;/*设置边框的弧度*/border-radius: 25px;width: 150px;height: 150px;}</style>
</head>
<body><div id="d1"></div><br/><div id="d2"></div>
</body>
</html>
2)文本样式
- 颜色
该[color](https://developer.mozilla.org/en-US/docs/Web/CSS/color)
属性设置所选元素的前景色的颜色
颜色的值,可以由多种方式赋值,常见的有颜色单词,RGB十六进制,例如:
p {color: red;
}
字体种类
使用[font-family](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family)
属性-这允许您指定一种字体字体大小
字体大小使用[font-size](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size)
属性设置,可以采用常见单位:
px
:像素,文本高度像素绝对数值。
em
:1em等于我们要设置样式的当前元素的父元素上设置的字体大小,这是相对数值,能看懂即可。文本修饰
[text-decoration](https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-decoration)
:设置字体上的文本装饰线。
文本对齐
该[text-align](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align)
属性用于控制文本如何在其包含的内容框中对齐。可用值如下,它们的工作方式与常规字处理器应用程序中的工作方式几乎相同:left
:左对齐文本。right
:右对齐文本。center
:使文本居中。justify
:使文本散布,改变单词之间的间距,以使文本的所有行都具有相同的宽度。
行高
该[line-height](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)
属性设置每行文本的高度,也就是行距。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>文本样式演示</title><style>div{/*文本颜色*/color: /*red*/ #ff0000;/*字体*/font-family: /*宋体*/ 微软雅黑;/*字体大小*/font-size: 25px;/*下划线 none:无 underline:下划线 overline:上划线 line-through:删除线*/text-decoration: none;/*水平对齐方式 left:居左 center:居中 right:居右*/text-align: center;/*行间距*/line-height: 60px;}span{/*文字垂直对齐 top:居上 bottom:居下 middle:居中 百分比*/vertical-align: 50%;}</style>
</head>
<body><div>我是文字</div><div>我是文字</div><img src="../img/wx.png" width="38px" height="38px"/><span>微信</span>
</body>
</html>
3.3 使用技术
- 使用语义化标签,header,footer,article,nav。
- 使用CSS常见属性
3.4 实现步骤
- 创建初始页面,拷贝图片素材。
- 编写css文件,引入css样式,实现整体布局。
- header部分
- 实现顶部条。
- 实现导航条。
- 实现中部
- 实现左侧分享区域。
- 实现中间正文区域。
- 实现右侧广告区域。
- 实现底部页脚。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>头条页面</title><link rel="stylesheet" href="../css/news.css"/>
</head>
<body><!--顶部登录注册更多--><div class="top"><a href="../案例二/04案例二:登录页面.html" target="_self">登录 </a><a href="#">注册 </a><a href="#">更多 </a></div><!--导航条--><div class="nav"><img src="../img/logo.png"/><a href="#">首页 </a>/<a href="#">科技 </a>/<font color="gray">正文</font><hr/></div><!--左侧分享--><div class="left"><a href="#"> <img src="../img/cc.png"/> <span> 评论</span> </a><hr/><a href="#"> <img src="../img/repost.png"/> <span> 转发</span> </a> <br/><a href="#"> <img src="../img/weibo.png"/> <span> 微博</span> </a> <br/><a href="#"> <img src="../img/qq.png"/> <span> 空间</span> </a> <br/><a href="#"> <img src="../img/wx.png"/> <span> 微信</span> </a> <br/></div><!--中间正文--><div class="center"><div><h1>支付宝特权福利!芝麻分600以上用户惊喜,网友:幸福来得突然?</h1></div><!--作者信息--><div><i><font size="2" color="gray">作者:itheima 2088-08-08</font></i><hr/></div><!--副标题--><div><h3>支付宝特权福利!芝麻分600以上用户惊喜,网友:幸福来得突然?</h3></div><!--正文内容--><div><p>这些年,马云的风头正盛,但是上个月他毅然辞去了阿里巴巴的职务。而马云所做的很多事情也的确改变了这个世界,特别是在移动支付领域,更是走在了世界的前列。如今中国的移动支付已经成为老百姓的必备,支付宝对中国社会的变革都带来了深远的影响。不过马云依然没有满足,他认为移动互联网将会成为人类的基础设施,而且这里面的机会和各种挑战还非常多。</p><p>支付宝的诞生就是为了解决淘宝网的客户们的买卖问题,而随着支付宝的用户的不断增加,支付宝也推出了一系列的附加功能。比如生活缴费、转账汇款、还信用卡、车主服务、公益理财等,往简单的说,支付宝既可以满足人们的日常生活,又可以利用芝麻信用进行资金周转服务。除了芝麻分能够进行周转以外,互联网信用体系下的产品多多,我们对比以下几个产品看看区别:<ol><li>蚂蚁借呗,芝麻分600并且受到邀请开通福利,这个就是支付宝贷款,直接秒杀了银行贷款和线下金融公司,是现在支付宝用户使用最多的。</li><li>微粒贷:于2015年上线,主要面向QQ和微信征信极好的用户而推出,受到邀请才能申请开通,额度最高有30万,难度较大</li><li>蚂蚁巴士:这个在微信 蚂蚁巴士 公众平台申请,对于信用分要求530分以上才可以,额度1-30万不等,目前非常火爆</li></ol><img src="../img/1.jpg" width="100%"/></p><p>说起支付宝中的芝麻信用功能,相信更是受到了许多人的推崇,因为随着自己使用的不断增多,信用分会慢慢提高,而达到了一个阶段,就可以获得许多的福利。而当我们的芝麻信用分可以达到600分以上的时候,会有令我们想象不到的惊喜,接下来就让我们一起来看看,具体都有哪些惊喜吧。</p><p><b>一、芝麻分600以上福利之信用购。</b>网购相信大家都不陌生,但是很多时候,网购都有一个通病,就是没办法试用,导致很多人买了很多自己不喜欢的东西。但是只要你的支付宝芝麻分在650及以上,就能立马享有0元下单,收到货使用满意了再进行付款。还能享用美食的专属优惠,是不是很耐斯</p><p><b>二、芝麻分600以上福利之信用免押。</b>芝麻信用与木鸟短租联合推出信用住宿服务,芝麻分600及以上的用户可享受免押入住特权。木鸟短租拥有全国50万套房源,是国内领先的短租民宿预订平台。包括大家知道的飞猪信用住,大部分酒店可以免押金入住,离店再交钱。</p><img src="../img/2.jpg" width="100%"/><p><b>三、芝麻分600以上福利之国际驾照。</b>我们经常听说的可能只是中国驾照,但现在芝麻分已经应用到了国际领域,只要你的芝麻分够550就可以免费办理国际驾照,也有不少人非常佩服马云,一个简单的芝麻分居然有如此大的功能,也从侧面反应出来马云在国际上的地位,这个国际驾照是由新西兰、德国、澳大利亚联合认证,可以在全球200多个国家通行,相信大家一定都有一个自驾全球的梦想吧,而现在支付宝就给了你一把钥匙,剩下的就你自己搞定了!有没有想带着你的女神来一次浪漫之旅呢?</p><p>随着互联网对我们生活的改变越来越大,信用这一词也被大家推上风口浪尖,不论是生活出行,还是其他的互联网服务,与信用体系已经密不可分了,马云当初说道,找老婆需要拼芝麻分,如今似乎也要成为现实,那么你们的芝麻分有多少了呢?</p></div></div><!--右侧广告图片--><div class="right"><img src="../img/ad1.jpg" width="100%"/><img src="../img/ad2.jpg" width="100%"/><img src="../img/ad3.jpg" width="100%"/><img src="../img/ad1.jpg" width="100%"/><img src="../img/ad2.jpg" width="100%"/><img src="../img/ad3.jpg" width="100%"/></div><!--底部页脚超链接--><div class="footer"><a href="#">关于黑马</a> <a href="#">帮助中心</a> <a href="#">开放平台</a> <a href="#">诚聘英才</a> <a href="#">联系我们</a> <a href="#">法律声明</a> <a href="#">隐私政策</a> <a href="#">知识产权</a> <a href="#">廉政举报</a> </div></body>
</html>
/*顶部样式*/
.top{background: black; /*背景色*/line-height: 40px; /*行高*/text-align: right; /*文字水平右对齐*/font-size: 20px; /*字体大小*/
}
/*顶部超链接样式*/
.top a{color: white; /*超链接颜色*/
}/*导航条样式*/
.nav{line-height: 40px; /*行高*/
}/*左侧分享样式*/
.left{width: 20%; /*宽度*/text-align: center; /*文字水平居中对齐*/float: left; /*浮动*/
}
/*左侧分享图片样式*/
.left img{width: 38px;height: 38px;
}
/*左侧文字*/
.left span{vertical-align: 50%; /*文字垂直居中对齐*/
}/*中间正文样式*/
.center{width: 60%; /*宽度*/float: left; /*浮动*/
}/*右侧广告图片样式*/
.right{width: 20%; /*宽度*/float: left; /*浮动*/
}/*底部页脚超链接样式*/
.footer{clear: both; /*清除浮动*/background: blue; /*背景色*/text-align: center; /*文字水平居中对齐*/line-height: 25px;
}/*底部页脚超链接文字颜色*/
.footer a{color: white;
}/*超链接样式*/
a{text-decoration: none; /*去除下划线*/color: black; /*超链接颜色*/
}
/*超链接悬浮样式*/
a:hover{color: red; /*悬浮颜色*/
}
4 CSS案例-登录页面
4.1 案例效果
4.2 案例分析
4.2.1 Table标签
1)什么是表格
表格是由行和列组成的结构化数据集(表格数据)。
2)表格标签
标签名 | 作用 | 备注 |
---|---|---|
table | 表示表格,是数据单元的行和列的两维表 | 容器,默认无样式 |
tr | table row,表示表中单元的行 | |
td | table data,表示表中一个单元格 | |
th | table header,表格单元格的表头,通常字体样式加粗居中 |
通过表格标签,我们可以创建出一张表格,代码如下
<table><tr><th>First name</th><th>Last name</th></tr><tr><td>John</td><td>Doe</td></tr><tr><td>Jane</td><td>Doe</td></tr>
</table>
3)跨行跨列========
让我们使用 colspan
和 rowspan
来改进现有的表格。
<table><tr><th rowspan="2">GROUP</th><th colspan="2"> name</th></tr><tr><th>First name</th><th>Last name</th></tr><tr><td rowspan="2">G1</td><td>John</td><td>Doe</td></tr><tr><td>Jane</td><td>Doe</td></tr><tr><td rowspan="3">G2</td><td>Aohn</td><td>Doa</td></tr><tr><td>Bane</td><td>Dob</td></tr><tr><td>Cane</td><td>Doc</td></tr>
</table>
4)表格结构【了解】
了解讲解:
表格布局标签,作为了解内容,案例中的使用部分,可以省略
标签名 | 作用 | 备注 |
---|---|---|
thead | 定义表格的列头的行 | 一个表格中仅有一个 |
tbody | 定义表格的主体 | 用来封装一组表行(tr元素) |
tfoot | 定义表格的各列汇总行 | 一个表格中仅有一个 |
示例:
<table><thead><tr><th>项目</th><th >金额</th></tr></thead><tbody><tr><td>手机</td><td>3,000</td></tr><tr><td>电脑</td><td>18,000</td></tr></tbody>
</table>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表格标签演示</title>
</head>
<body><!--表格标签:<table>属性:width-宽度height-高度border-边框align-对齐方式行标签:<tr>属性:align-对齐方式单元格标签:<td>属性:rowspan-合并行colspan-和并列表头标签:<th> 自带居中和加粗效果表头语义标签:<thead>表体语义标签:<tbody>表脚语义标签:<tfoot>--><table width="400px" border="1px" align="center"><thead><tr><th>姓名</th><th>性别</th><th>年龄</th><th>数学</th><th>语文</th></tr></thead><tbody><tr align="center"><td>张三</td><td rowspan="2">男</td><td>23</td><td colspan="2">90</td><!--<td>90</td>--></tr><tr align="center"><td>李四</td><!--<td>男</td>--><td>24</td><td>95</td><td>98</td></tr></tbody><tfoot><tr><td colspan="4">总分数:</td><!--<td></td><td></td><td></td>--><td>373</td></tr></tfoot></table>
</body>
</html>
4.2.2 常见样式属性
1)背景
CSS [background](https://developer.mozilla.org/en-US/docs/Web/CSS/background)
属性用来设置背景相关的样式。
- 背景色
该[background-color](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color)
属性定义CSS中任何元素的背景色。
.box {background-color: #567895;
}
- 背景图
该[background-image](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image)
属性允许在元素的背景中显示图像。使用url函数指定图片路径。
控制背景重复
该[background-repeat](https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat)
属性用于控制图像的平铺行为。可用值为:
body {background-image: url(bg.jpg);
}
no-repeat
-停止完全重复背景。repeat-x
—水平重复。repeat-y
—反复重复。repeat
—默认值;双向重复。
body {background-image: url(star.png);background-repeat: no-repeat;
}
2)轮廓
轮廓outline:是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
<style>input {outline: dotted;}</style><body><input type="text"></body>
设置为none时,可以取消默认轮廓样式,用于特殊效果。
input {outline: none;}
3)显示
display属性,用来设置一个元素应如何显示。可以设置块级和行内元素的切换,也可以设置元素隐藏。
- 元素显示
/* 把列表项显示为内联元素,无长宽*/
li {display:inline;}
/* 把span元素作为块元素,有换行*/
span {display:block;}
/* 行内块元素,结合的行内和块级的优点,既可以行内显示,又可以设置长宽,*/
li {display:inline-block;}
代码演示:
li {display: inline-block;width: 200px;}
- 元素隐藏
当设置为none时,可以隐藏元素。
li {display: none;}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>样式演示</title><style>/*背景图片重复 no-repeat:不重复 repeat-x:水平重复 repeat-y:垂直重复 repeat:水平+垂直重复*/body{background: url("../img/bg.jpg");background-repeat: repeat;}/*轮廓控制 double:双实线 dotted:圆点 dashed:虚线 none:无*/input{outline: none;}/*元素显示 inline:内联元素(无换行、无长宽) block:块级元素(有换行) inline-block:内联元素(有长宽) none:隐藏元素*/div{display: inline-block;width: 100px;}</style>
</head>
<body>用户名:<input type="text"/> <br/><div>春季</div><div>夏季</div><div>秋季</div><div>冬季</div>
</body>
</html>
4.2.3 盒子模型
万物皆"盒子"。盒子模型是通过设置元素框与元素内容和外部元素的边距,而进行布局的方式。
- element : 元素。
- padding : 内边距,也有资料将其翻译为填充。
- border : 边框。
- margin : 外边距,也有资料将其翻译为空白或空白边。
基本布局
内边距、边框和外边距都是可选的,默认值是零。但是,许多元素将由用户代理样式表设置外边距和内边距。在 CSS 中,width 和 height 指的是内容区域的宽度和高度。
<style>div{border: 2px solid blue;}.big{width: 200px;height: 200px;}.small{width: 100px;height: 100px;margin: 30px;/* 外边距 */}</style><div class="big"><div class="small"></div>
</div>
增加内边距会增加元素框的总尺寸。
<style>div{border: 2px solid blue;}.big{width: 200px;height: 200px;padding: 30px;/*内边距 */}.small{width: 100px;height: 100px;}</style><div class="big"><div class="small"></div>
</div>
外边距
单独设置边框的外边距,设置上、右、下、左方向:
margin-top
margin-right
margin-bottom
margin-left
值含义:
- 一个值时
/* 所有 4 个外边距都是 10px */
margin:10px;
- 两个值时
/* 上外边距和下外边距是 10px
右外边距和左外边距是 5px */margin:10px 5px;margin:10px auto;
auto 浏览器自动计算外边距,具有居中效果。
- 三个值时
/* 上外边距是 10px
右外边距和左外边距是 5px
下外边距是 15px*/margin:10px 5px 15px;
- 四个值时
/*上外边距是 10px
右外边距是 5px
下外边距是 15px
左外边距是 20px*/margin:10px 5px 15px 20px;
内边距
与外边距类似,单独设置边框的内边距,设置上、右、下、左方向:
padding-top
padding-right
padding-bottom
padding-left
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>盒子模型演示</title><style>.wai{border: 1px solid red;width: 200px;height: 200px;/*设置内边距,会导致外框的变化*//*padding: 50px;*/}.nei{border: 1px solid blue;width: 100px;height: 100px;/*设置外边距*//*margin-top: 50px;margin-left: 50px;margin-right: 50px;margin-bottom: 50px;*//*margin: 50px;*//*上、右、下、左*//*margin: 70px 35px 30px 65px;*/}</style>
</head>
<body><div class="wai"><div class="nei"></div></div>
</body>
</html>
4.3 使用技术
- div盒子布局
- form标签和table标签
- input button
- thead, tbody ,tfoot,th,tr,td
- 设置背景,字体等css样式
4.4 实现步骤
- 设置背景
- 整体布局,上中底三部分
- 上部
- logo设置
- 中部
- 表单表格布局
- 加入表头
- 加入输入框
- 加入按钮
- 底部
- 底部布局
- 其他方式分割线
- 其他方式图片
- 底部文本
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登录页面</title><link rel="stylesheet" href="../css/login.css"/>
</head>
<body><!--顶部公司图标--><div><img src="../img/logo.png"/></div><!--中间表单--><div class="center"><form action="#" method="get" autocomplete="off"><table width="100%"><thead><tr><th colspan="2">账 密 登 录<hr/></th></tr></thead><tbody><tr><td><label for="username">账号</label></td><td><input type="text" id="username" name="username" placeholder=" 请输入账号" required/></td></tr><tr><td><label for="password">密码</label></td><td><input type="password" id="password" name="password" placeholder=" 请输入密码" required/></td></tr></tbody><tfoot><tr><td colspan="2"><button type="submit">确 定</button></td></tr></tfoot></table></form></div><!--底部页脚--><div class="footer"><br/><br/>登录/注册即表示您同意 <a href="#" target="_blank">用户协议</a> 和 <a href="#" target="_blank">隐私条款</a> <a href="#" target="_blank">忘记密码?</a></div>
</body>
</html>
/*背景图片*/
body{background: url("../img/bg.png");
}/*中间表单样式*/
.center{background: white; /*背景色*/width: 40%; /*宽度*/margin: auto; /*水平居中外边距*/margin-top: 100px; /*上外边距*/border-radius: 15px; /*边框弧度*/text-align: center; /*文本水平居中*/
}/*表头样式*/
thead th{font-size: 30px; /*字体大小*/color: orangered; /*字体颜色*/
}/*表体提示信息样式*/
tbody label{font-size: 20px; /*字体大小*/
}/*表体输入框样式*/
tbody input{border: 1px solid gray; /*边框*/border-radius: 5px; /*边框弧度*/width: 90%; /*输入框的宽度*/height: 40px; /*输入框的高度*/outline: none; /*取消轮廓的样式*/
}/*表底确定按钮样式*/
tfoot button{border: 1px solid crimson; /*边框*/border-radius: 5px; /*边框弧度*/width: 95%; /*宽度*/height: 40px; /*高度*/background: crimson; /*背景色*/color: white; /*文字的颜色*/font-size: 20px; /*字体大小*/
}/*表行高度*/
tr{line-height: 60px; /*行高*/
}/*底部页脚样式*/
.footer{width: 35%; /*宽度*/margin: auto; /*水平居中外边距*/font-size: 15px; /*字体大小*/color: gray; /*字体颜色*/
}/*超链接样式*/
a{text-decoration: none; /*去除超链接的下划线*/color: blue; /*超链接颜色*/
}
5 HTML案例-网站发布
将网站部署到服务器,浏览器通过URL地址访问页面
5.1 案例效果
在地址栏输入URL地址,访问服务器上的页面。
5.2 案例分析
5.2.1 Nginx服务器概述
Nginx是一种服务器软件,其最主要,最基本的功能是可以与服务器硬件(电脑)结合,让程序员可以将程序发布在Nginx服务器上,让成千上万的用户可以浏览。
除此之外,Nginx还是一种高性能的HTTP和反向代理服务器,同时也是一个代理邮件服务器。也就是说,我们在Nginx上可以:
- 可以发布网站(静态, html,css,js)
- 可以实现负载均衡,
- 代理服务器
- 可以作为邮件服务器实现收发邮件等功能
本课程我们只讨论Nginx发布网站的功能,其它的功能后续课程会深入学习.
5.2.2 在Linux上使用Nginx
1)下载Nginx
进入http://nginx.org/网站,下载nginx-1.17.5.tar.gz文件
2)上传到虚拟机
使用客户端将刚下载好的nginx-1.17.5.tar.gz文件上传到home目录下。
使用命令查看
3)准备依赖环境
#安装Nginx依赖环境,‐y表示所有提示默认选择y
yum -y install pcre pcre-devel
yum ‐y install zlib zlib‐devel
yum ‐y install openssl openssl‐devel
4)解压和编译安装
# 进入home目录,解压
tar -zxvf nginx-1.17.5.tar.gz -C /home# 进入 nginx目录
cd nginx-1.17.5# 编译并安装【已经有gcc编译环境】
./configure
make
make install
# 安装成功之后,就会在/usr/local下多出了一个nginx目录.
5)启动服务器
#进入nginx的sbin目录
cd /usr/local/nginx/sbin#在sbin目录下启动
./nginx
#在sbin目录下停止
./nginx ‐s stop
#在sbin目录下重写加载
./nginx ‐s reload#开放linux的对外访问的端口80,在默认情况下,Linux不会开放80端口号
#需要编辑iptables文件,参考 4.5 操作
#查看是否有nginx的线程是否存在
ps ‐ef | grep nginx
6)浏览器访问
浏览器输入虚拟机ip地址,默认80端口
5.3 实现步骤
- 发布项目
- 配置Nginx服务器
- 浏览器访问
5.4 操作实现
5.4.1 发布项目
在/home目录下,创建toutiao目录
# 进入home目录
cd /home
# 创建目录
mkdir toutiao
上传项目文件到toutiao目录
项目文件:
220)
toutiao目录:
5.4.2 配置 nginx.conf 文件
5.4.3 启动服务器
#启动服务器 , 加载配置文件
/usr/local/nginx/sbin/nginx -c /home/nginx-1.17.5/conf/nginx.conf
5.4.4 浏览器访问
浏览器输入虚拟机ip地址,默认80端口,访问首页 index.html
跳转登录页面
http://172.16.17.99/login/login.html
一篇文章让你掌握HTML+CSS相关推荐
- 前端三剑客之CSS篇~一篇文章带你熟练使用CSS来定义页面样式
目录 CSS基本概念 基本语法规范 引入方式 CSS选择器 基础选择器 复合选择器 CSS常用元素属性 字体属性 文本属性 背景属性 CSS基本概念 CSS即层叠样式表,能够对网页中元素位置的排版进行 ...
- 九、一篇文章帮助你读懂CSS属性:vertical-align 垂直对齐
3. vertical-align 垂直对齐 有宽度的块级元素居中对齐,是margin: 0 auto; 让文字居中对齐,是 text-align: center; 但是我们从来没有讲过有垂直居中的属 ...
- 一篇文章带你搞懂微信小程序的开发过程
点击上方"前端进阶学习交流",进行关注 回复"前端"即可获赠前端相关学习资料 今 日 鸡 汤 只解沙场为国死,何须马革裹尸还. 大家好,我进阶学习者. 前言 小 ...
- 一篇文章教你学会如何使用CSS中的雪碧图(CSS Sprite)
一篇文章教你学会如何使用CSS中的雪碧图(CSS Sprite) 一.什么是雪碧图? 雪碧图(CSS Sprite)又叫CSS精灵图,是一种网页图片应用处理方式,他允许你将一个页面设计到 所有零星图片 ...
- HTML+CSS一篇文章搞定
文章目录 HTML+CSS?一篇文章就够了 HTML 简介 HTML 标题 HTML 段落 HTML 链接 HTML 图像 HTML 元素 HTML 元素语法 嵌套的 HTML 元素 HTML 实例解 ...
- css 科技 边框_一篇文章带你学习CSS3图片边框
这篇文章我们来讲一下在网站建设中,一篇文章带你学习CSS3图片边框.本文对大家进行网站开发设计工作或者学习都有一定帮助,下面让我们进入正文. 使用CSS3 border-image 属性,你可以在元素 ...
- HTML完结《一篇文章入门编程系列之从零基础入门HTML+CSS前端开发》12.24
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(QQ_3336392096.jpg)] 一篇文章让你从HTML零基础入门前端开发 前言: 此文为玄子,复习ACCP-S1课程后,整 ...
- 日常更新《一篇文章入门编程系列之从零基础入门HTML+CSS前端开发》12.23
一篇文章让你从HTML零基础入门前端开发 前言: 此文为玄子,复习ACCP-S1课程后,整理的文章,文中对知识点的解释仅为个人理解,源码均可直接复制运行 配套PPT,站点源码,等学习资料请加文章封面联 ...
- 一篇文章教会你使用html+css3制作GIF图
简介:一篇文章教会你使用html+css3制作GIF图 [一.项目背景] 生活中经常会见到很多gif图,那么gif图到底是什么?GIF是一种位图.简单来说就是通过每一张张静图,通过控制它的关键帧,从而 ...
最新文章
- 程序员委托事件学习随笔
- PHP实现文章的删除,php如何实现删除文章
- SAP CAP 项目 cds watch 生成的 index.html 的模板位置和权限控制
- python函数不定参数_python如何定义不定参数函数
- 网络知识 | 《图解TCP/IP》读书笔记(上)
- linux php mysql安装包下载_在linux下手动安装 apache, php, mysql--终极版
- conda 安装指定版本tensorflow cpu/gpu
- mysql索引覆盖之innodb和myisam效率问题
- 2021-06-21层次选择器
- RGB-D = 普通的RGB三通道彩色图像 + Depth Map
- SolidWorks2022 安装教程
- win10 任务管理器显示GPU占用率
- Flutter 本地数据库sqflite实战操作
- Android Mvp架构的小demo
- UEFI开发与调试---运行阶段介绍
- 第8章 卷积神经网络
- 招投标工作中投标书编制的流程是怎样的?
- 信息与计算科学跨考计算机,信息与计算科学考研的方向介绍
- 在手机开发中常用的数据库是什么?
- Java开发常用英语单词表
热门文章
- excel2007整体调整行间距
- Win11系统电脑硬盘分区方法教程
- 在公众号中通过链接下载APP时,如何不通过应用宝,直接跳浏览器下载?
- Oracle -PL/SQL Developer错误解决方案(ORA-02291)
- 多线程&高并发(全网最新:面试题 + 导图 + 核心学习笔记)面试手稳心不慌,轻松拿下 offer,秋招跳槽必不可少的底层能力
- 瘫痪患者借助脑机接口可进行数字绘画
- 沈剑架构师训练营,最新金九银十JAVA面试合集
- 个人项目——二柱子程序升级版
- 方方格子excel工具箱 Excel表格处理必备
- Excel解析easyexcel工具类