html、CSS初识

最新推荐文章于 2022-05-06 16:55:41 发布

武侠㿝卄清

最新推荐文章于 2022-05-06 16:55:41 发布

阅读量91

点赞数

分类专栏： java web开发

本文链接：https://blog.csdn.net/qq_30347133/article/details/110003278

版权

web开发同时被 2 个专栏收录

611 篇文章 2 订阅

订阅专栏

java

574 篇文章 4 订阅

订阅专栏

需求：实现如下导航功能
在这里插入图片描述

html

在这里插入图片描述

frameset标签的使用

010-框架的使用-index.html的内容：

<!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=gb2312">
<title>无标题文档</title>
</head>

<!--
在框架窗口中没有body标记,而是使用<frameset>标记
rows="15%,*,10%" 把整体(也就是body)切分成上中下三部分,上部分占15%,下部分占10%,中间占剩余的部分
cols="20%,*" 表示吧整体切分成左右两部分,左部分占20%,右部分占剩余的
-->
<frameset rows="15%,*,10%">
   <frame src="010-框架的使用-head.html">
   <frameset cols="20%,*">
       <frame src="010-框架的使用-menu.html">
	   <frame src="010-框架的使用-main.html" name="main">
   </frameset>
   <frame src="010-框架的使用-foot.html">
</frameset>

</html>

010-框架的使用-head.html的内容

<!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=gb2312">
<title>无标题文档</title>
</head>

<body>
   <div align="center"><img src="imgs/2.jpg" width="951" height="114">   </div>
</body>
</html>

010-框架的使用-foot.html

<!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=gb2312">
<title>无标题文档</title>
<style type="text/css">
<!--
.STYLE1 {font-size: 36px}
-->
</style>
</head>

<body>
<div align="center" class="STYLE1">xx公司版所有2000~2018</div>
</body>
</html>

010-框架的使用-main.html

<!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=gb2312">
<title>无标题文档</title>
</head>

<body>
   欢迎访问我的网站!
</body>
</html>

010-框架的使用-menu.html
target="main"对应010-框架的使用-index.html中的 name=“main”

<!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=gb2312">
<title>无标题文档</title>
</head>

<body>

<font size="+1">
<!--
target="main" 在框架的main部分打开目标页面
-->
<a href="001-我的第一个网页.html" target="main">001-我的第一个网页.html</a>
<br>
<a href="002-超连接标记的使用.html" target="main">002-超连接标记的使用.htm</a>
<br>
<a href="003-大图的网页.html" target="main">003-大图的网页.html</a>
<br>
<a href="008-使用表格来美化表单.html" target="main">008-使用表格来美化表单.html</a>
</font>
</body>
</html>

iframe的使用：
在这里插入图片描述

CSS

在这里插入图片描述

<!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=gb2312">
<title>无标题文档</title>

<style>
   /*
   span:hover  给span标记的鼠标悬停状态指定一致显示效果,这种方式成为伪类选择符,伪类选择符中的类名都是固定的,例如:hover
   font-size:24px; 控制文字的字体大小
   color:#0000FF;  控制文字的颜色
   text-decoration:underline; 给文字下面加上下划线
   cursor:pointer ;控制鼠标变成小手的形状  
   */
   span:hover { font-size:24px; color:#0000FF; text-decoration:underline; cursor:pointer ;}
</style>

</head>

<body>
<span>你把鼠标移动到我的上面的时候,我的显示效果会改变</span>

</body>
</html>

003-在html中使用CSS的第三种方式.html

<!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=gb2312">
<title>无标题文档</title>

<!--
在html的<head></head>之间,使用<link> 标记引入外部的CSS
这是在html中引入外部CSS的标准方式
href="./css/1.css" 外部CSS的url
只用在html中引入这个外部的CSS,则我们指定的显示效果对引入的页面就是有效的

-->
<link href="./css/1.css" type="text/css" rel="stylesheet">

</head>

<body>
<h1>搜狐视频</h1>

<!--
href="#" 访问页面顶部默认的锚点,可以用这种方式让超链接连接到当前页面
-->
<a href="#">电影频道</a>
<a href="#">电视剧频道</a>
<a href="#">科教频道</a>
<a href="#">纪录片频道</a>
<a href="#">动漫频道</a>
<a href="#">体育频道</a>
<a href="#">购物频道</a>

<br>
<br>

<!--
在标记中通过id属性来使用标识选择符
-->
<img src="imgs/1.jpg" id="img1">

<br>
<br>

<!--
在标记中通过class属性来使用类选择符
-->
<img src="imgs/2.jpg" class="img2">

</body>
</html>