Web学习笔记_02

最新推荐文章于 2023-07-19 17:37:52 发布
最新推荐文章于 2023-07-19 17:37:52 发布
阅读量272 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Chen_Zhenui/article/details/73548898
版权
1 CSS入门
1.1 引入
html：负责网页的结构
css： 负责网页的美观（样式）
1.2 体验 
			<html xmlns="http://www.w3.org/1999/xhtml">
			<head>
			<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
			<title>css入门</title>
			<style type="text/css">
				a{
					font-size:24px;
					color:#0F0;
				}
			</style>
			</head>

			<body>
			<a href="xxxx" >超链接</a><br/>
			<a href="xxxx" >超链接</a><br/>
			<a href="xxxx" >超链接</a><br/>
			<a href="xxxx" >超链接</a><br/>
			</body>
			</html>
设置后 所有a标签的字体大小变为 24px ，颜色变为#0F0；


1.3 定义
CSS（Cascading Style Sheet 层叠样式表） 简称，样式。
主要负责网页的美观。
1.4 css的使用方式
1）行内样式
注意：
1）使用标签的style属性进行css控制，css写在style属性值中
2）弊端：只能控制一个标签的样式
<a href="xxxx" style="font-size:19px;color:#090">超链接</a>

2）内部样式
注意：
1）使用style的标签进行css控制，css内容写在style标签体内
2）一次控制多个标签的样式
3）和html标签混杂在一起，不好维护。css内容无法在多个html页面中重用
<style type="text/css">
a{
font-size:24px;
color:#0F0;
}
</style>


3）外部样式（推荐使用）
注意：
1）建立独立后缀为css的文件，css内容写在该文件中
2）在使用css的html页面中，导入外部css文件

href  : 表示外部css文件的位置
rel: 表示关联的是样式表
<link href="01.css" rel="stylesheet"/>

2 CSS语法

a{
font-size:24px;
color:#F00;
}


选择器（selector）：使用选择器来选择需要添加样式的标签。
CSS属性（property）：给选择的标签添加什么样式。例如， 字体大小，颜色，背景.....
CSS值（value）：添加样式的具体值。12px , 红色，背景图片....


2.1 选择器
a)标签选择器
作用： 选择同名的标签 
	div{
			font-size:24px;
			color:#F00;	
		}

注意：
1）选择到所有同名的标签

b)类选择器
作用： 选择同类的标签 
		.c1{
			font-size:24px;
			color:#F00;	
		}


注意：
1）选择的标签必须有class的属性。同类的标签使用同名

2）当一个标签同时被标签选择器和类选择器选择，那么类选择器优先！！！


c)id选择器
作用： 选择一个标签
#d1{
font-size:24px;
color:#0F0;
}
注意：
1）选择的标签必须有id属性。
2）在同一个html页面中，建议不要出现两个同名的id属性的标签，后面使用javascript代码选择标签的时候，getElementById("id属性值")
3）id选择器的优先级最高！


d)并集选择器

.c1,#d1{
font-size:24px;
color:#0F0;
}
作用： 当多个选择器的css内容相同，那么可以使用并集选择器来合并css内容。


e)交集选择器
div里面的span标签
.c1 span{ 
font-size:24px;
color:#0F0;
}

作用： 选择某个选择器中的子标签。


f)通用选择器
{
font-size:24px;
color:#0F0;
}
作用； 选择所有的标签
e)伪类选择器
作用：控制标签在不同状态下的样式。


标签有四种状态：
link: 没有访问过的状态
hover: 鼠标经过的状态
active:鼠标激活（按下但没有松开）的状态

visited: 已经被访问过的状态（鼠标点下且松开）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<!--link visited hover active-->
<style type="text/css">
a:link{
	color:#03F;
	font-size:18px;}
a:visited{
	color:#C03;}
a:hover{
	color:#006;}
a:active{
	color:#000;}
</style>
<body>
<a href="2.html" target="_new">超链接</a>
</body>
</html>


1）在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
2）在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有
效的。

   正确顺序： link visited hover active



案例：给表格每一行鼠标经过加上背景 
<style type="text/css">
td{
	text-align:center;}
tr.c:hover{
	background-color:#3C3;}

</style>

<body>
<table border="2" align="center" width="400" height="300">
<tr>
<td >姓名</td>
<td >班级</td>
<td >成绩</td>
</tr>
<tr class="c">
<td>A君</td>
<td>Java</td>
<td>90</td>
</tr>
<tr class="c">
<td>B君</td>
<td>Java</td>
<td>80</td>
</tr>
<tr class="c">
<td>C君</td>
<td>java</td>
<td>90</td>
</tr>


</table>
</body>
</html>
输出效果：当鼠标经过第一行时没有任何变化，当鼠标经过其他行时，该行背景颜色会变为绿色；


2.2 常用的CSS属性和值

CSS文本

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
body{
	color:#0FF;
	letter-spacing:10px;
	text-align:center;
	text-decoration:line-through;
	word-spacing:40px;
	}
</style>

<body>
喂喂喂<br />
测试 一下
</body>
</html>
输出效果：



CSS字体 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
body{
	/*
	font-family:"黑体";
	font-size:18px;
	font-style:normal;
	font-weight:bold;
	*/
	/*可以简写成*/
	font:italic bold 18px "黑体";
	}
</style>
<body>
写了几个字
</body>
</html>
简写的顺序：


CSS背景 
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>css背景</title>
	<style type="text/css">
		
		body{
			/*背景颜色*/
			/*
			background-color:#0CF;
			*/
			/*背景图片*/
			/*
			background-image:url(../05.%E7%B4%A0%E6%9D%90/mm.jpg);
			*/
			/*设置背景图片是否重复，或如何重复
				not-repeat: 不重复
				repeat-x: x轴重复
				repeat-y: y轴重复
				repeat: x和y轴重复(默认)
			*/
			/*
			background-repeat:no-repeat;
			*/
			/*设置背景的起始位置*/
			/*
			/*需要画图详细讲解*/
			background-position:top center;
			*/
			/*简写属性*/
			background:#3FF url(../05.%E7%B4%A0%E6%9D%90/mm.jpg) no-repeat top center;
			
		}
	</style>
	</head>


	<body>
	</body>
	</html>

图片位置图解：



CSS列表 
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>css列表</title>
	<style type="text/css">
		ul{
			/*列表符号类型*/
			list-style-type:none;
			/*设置列表符号的图片*/
			list-style-image:url(../05.%E7%B4%A0%E6%9D%90/start.jpg);
		}
	</style>
	</head>


	<body>
	系统菜单
	<ul>
		<li>学生管理</li>
		<li>教师管理</li>
		<li>课程管理</li>
	</ul>
	</body>
	</html>

CSS表格 

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>css表格</title>
	<style type="text/css">
		table{
			/*合并表格的边框*/
			border-collapse:collapse;
		}
		td{
			text-align:center;}

	</style>
	</head>


	<body>
	<table border="1px" width="400px" height="200px" align="center">
		<caption>成绩表</caption>
		<tr>
			<td>姓名</td>
			<td>班级</td>
			<td>成绩</td>
		</tr>
		<tbody>
		<tr>
			<td>A</td>
			<td>Java</td>
			<td>80</td>
		</tr>
		<tr>
			<td>B</td>
			<td>Java</td>
			<td>78</td>
		</tr>
		<tr>
			<td>C</td>
			<td>Java</td>
			<td>90</td>
		</tr>
		</tbody>
	</table>
	</body>
	</html>


输出效果：




CSS边框 

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>css边框</title>
	<style type="text/css">
		div{
			/*边框颜色*/
			/*简写属性
			  1) 默认设置方向属性： 上 右 下 左
			  2）如果当前方向没有设置颜色，那么取对面的颜色
			*/
			/*
			border-color:#F00;
			*/
			/*
			border-left-color:#F00;
			border-right-color:#0F0;
			border-top-color:#00F;
			border-bottom-color:#C90;
			*/
			
			/*边框宽度*/
			/*简写属性
			
			*/
			/*
			border-width:10px;
			*/
			/*
			border-left-width:10px;
			border-right-width:20px;
			border-top-width:30px;
			border-bottom-width:40px;
			*/
			
			/*边框样式(注意： 边框只有加了border-style才会显示出来)
			solid: 单实线
			dashed:虚线
			dotted: 点
			double: 双实线
			*/
			
			/*简写属性*/
			/*
			border-style:solid;
			*/
			
			/*
			border-left-style:solid;
			border-right-style:dashed;
			border-top-style:dotted;
			border-bottom-style:double;
			*/
		
			/*所有边框属性的简写属性*/
			border:2px solid #F00;
		}
	</style>
	</head>


	<body>
	<div>div1</div>
	</body>
	</html>




3 盒子模型
3.1 定义
可以把html页面上每个标签看做是一个盒子。

通过需求讲解盒子模型：
1.将盒子的宽高变为之前的两倍
2.将盒子厚度变为原来的两倍
3.盒子里面的内容距顶部内10px
4.盒子里面的内容距离左内边10px
5.下面的盒子距离上面的盒子10px(两种方式实现)

盒子相关的属性：
宽度和高度（width和height）： 决定这个盒子的容量
内边距（padding）： 盒子边框与内容的距离
边框（border）： 盒子的厚度
外边距（margin）： 盒子与盒子之间的距离




4. CSS定位（画图解释）
相对定位：relative（相对自己之前的位置）
绝对定位：abosolute（相对父标签的位置）
固定定位：fixed(相对浏览器位置固定，不随着滚动条的拖动而位置改变) 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
div{
		width:100px;
		height:100px;
		border:10px dotted #999;}
	}
#div1{
	position:relative;
	top:20px;
	left:20px;}
#div2{
	position:absolute;
	top:100px;
	left:100px;
	}
#div3{
	position:fixed;
	top:300px;
	left:300px;
	}
</style>
<body>
<div id="div1">hahaha</div>
<div id="div2">hahaha</div>
<div id="div3">hahaha</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>

输出效果：


当滚动网页时，第三个div标签的位置保持不变；

5. 作业：利用div+css设计一个qq登录页面，画图说明需求，代码完成

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
form{
	border:1px solid #FC3;
	height:256px;
	width:256px;
	position:absolute;
	left:600px;
	top:250px;
	background-image:url(../%E4%BD%9C%E4%B8%9A/Web/Web_02/css%E8%B5%84%E6%96%99/05.%E7%B4%A0%E6%9D%90/1.jpg);
	}
input{
	text-align:center;
	}
div{
	position:absolute;
	left:20px;
	top:100px;
	}
#d1{
	background-image:url(../%E4%BD%9C%E4%B8%9A/Web/Web_02/css%E8%B5%84%E6%96%99/05.%E7%B4%A0%E6%9D%90/head.png);
	background-repeat:no-repeat;
	}
#d2{
	background-image:url(../%E4%BD%9C%E4%B8%9A/Web/Web_02/css%E8%B5%84%E6%96%99/05.%E7%B4%A0%E6%9D%90/key.jpg);
	background-repeat:no-repeat;
	}
</style>
<body>
<form>
<div>用户名：<input id="d1" type="text" name="username"/>
<br /><br />
密   码：<input id="d2" type="password" name="password" />
<br /><br />        
<input id="d3" type="button" value="登陆" />
     
<input id="d4" type="button" value="注册" />
</div>
</form>
</body>
</html>
输出效果：




Chen_Zhenhui
关注
web（网页设计）7
qq_53749424的博客
06-14 176
CSS外边距 块级盒子水平居中 必须有宽度，左右外边距设置为auto。 例：header{ width：921px; margin:0 auto; } 文字居中和盒子居中的区别 （1）文字水平居中是：text-align:center （2）盒子居中 左右margin改为auto 例：text-align：center；// 文字居中 margin：10px auto; // 盒子水平居中 左右margin改为了auto 插入图片和背景图片的区别 （1）插入图片 我们用的最多的是产品展示类 移动位置只能
获取元素到页面顶部的距离_Web前端-页面重构之工具篇（Photoshop）
weixin_32568295的博客
01-09 407
一、说在前面的话1.1 职责：拒绝"图片仅供参考请以实物为准"团队的协作流程一般分为以下几个阶段：专业的设计师做设计由前端工程师切图重构还原成浏览器能渲染的页面，再开发功能。术业有专攻，每一个环节都会有很高的水准，组合成一个各方面都非常专业的网站，为客户的业务提供更好的帮助。没错，客户需要的站点就是一碗蛋炒饭的话，前端开发人员就有必要让这碗蛋炒饭实物看起来跟食品封面上面的图片一样可口美味！拒绝图片...
html设置顶端距离,css怎么设置间距？
weixin_27743991的博客
05-30 3235
在网页的布局中几大段文字挤在一起总归是不好看的，这时候我们就需要来设置间距来让文字看起来不拥挤。css可以设置文字间距和行间距，下面我们来看一下使用css设置字间距和行间距的方法。1、css设置字间距：使用letter-spacing属性设置字间距。letter-spacing 属性增加或减少字符间的空白(字符间距)。该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄，指定长...
前端参数接收
Hermia_yuan的博客
03-20 962
<body> <ul> <li><a href="content.html?id=1&title=打通产学研 串起价值链 &dsfhv">打通产学研 串起价值链</a></li> <li><a href="content.html?id=2&titl=北大教授劝年轻人别太早买房 年轻人或有不同看法"> 北大教授劝年轻人别太早买房 年轻人或有不同看法.
Web前端学习笔记
jusw123456的博客
10-19 2416
html css分别是指：1、超文本标记语言，html是一种标记语言，它包括一系列标签；2、层叠样式表，css是一种用来表现HTML或XML等文件样式的计算机语言，CSS能够对网页中元素位置的排版进行像素级精确控制。即为浏览器把代码解析后的样子就是我们看到的网站。HTML：结构CSS：样式一个网站是由N多个网页组成的。
Web学习笔记（1）
qq_52227393的博客
01-02 2849
目录 Web前端开发概述 Web前端开发相关的概念 Web前端开发相关的技术 HTML5基础 HTML5-文档头部 HTML5-文本控制类标签 HTML5-图像的运用 表格标签-表格基本结构 HTML5-超链接的应用 表格标签—表格高级样式的设置 Web前端开发概述 Web前端开发相关的概念 1.Web系统的组成 Web是Internet上最受欢迎的一种多媒体信息服务系统。整个系统由Web服务器、浏览器和通信协议组成。 2.Web开发 Web开发就是设计实现Web系.
Web前端学习笔记（1）
maxiaoxiaohaohao的博客
10-19 3773
Web前端学习笔记（1）
Web前端开发学习笔记
qq_41622776的博客
02-02 2732
自学笔记，仅供参考
C++牛客WebServer项目学习笔记一
weixin_44229976的博客
07-19 1525
3.Ctrl+滚动鼠标放大缩小终端界面。
web安全学习笔记
qq_40911864的博客
02-26 4883
web安全学习笔记 基础入门——基础概念 域名 什么是域名？ 比如www.baidu.com，这就是一个域名，简单来说就是ip不好记，所以有了域名来方便记忆。通俗地讲，域名就是用户访问你的网站所使用的网址，相当于你家的通信地址，能够使访客方便快捷地访问你的网站 域名在哪里注册 域名注册建议大家去大的域名注册商，比如“腾讯云”和“阿里云”，因为大的域名服务商不管是安全还是服务上都有所保证。 域名注册是Internet中用于解决地址对应问题的一种方法。根据中国互联网络域名管理办法，域名注册服务机
SpringBoot经典学习笔记_springboot_SpringBoot经典学习笔记_
09-30
SpringBoot经典学习笔记是针对Java开发者的宝贵资源，它涵盖了SpringBoot的核心概念、特性以及实践应用。SpringBoot是由Pivotal团队开发的框架，旨在简化Spring应用的初始搭建以及开发过程，通过“约定优于配置”的...
mySQL.zip_MYSQL_mysql 课件_学习笔记_笔记_资料
09-24
这份"mySQL.zip_MYSQL_mysql 课件_学习笔记_笔记_资料"的压缩包内容包括了MySQL的培训课件和学习笔记，非常适合初学者进行数据库知识的入门学习。 51CTO下载-Mysql培训课件.pdf可能涵盖了以下MySQL的核心知识点： ...
达内Java_笔记整理.rar_Java 达内笔记_Java笔记_java 笔记_笔记_达内
09-23
这份名为“达内Java_笔记整理.rar”的压缩文件包含了丰富的Java学习资料，主要目标是帮助学习者节省在寻找合适学习资源上的时间，提高学习效率。达内是一家知名的教育机构，其整理的Java笔记通常会覆盖从基础到进阶...
安全：Web安全学习笔记
02-26
这个月看了一本《Web安全设计之道》，书中的内容多是从微软官方文档翻译而来，这本书的含金量不高，不过也不能说没有收获，本文简单记录一下我学习Web安全方面的笔记。本文不涉及IIS、Windows和SqlServer的安全管理...
open3d-0.11.2-cp36-cp36m-win_amd64.whl
10-19
open3d-0.11.2-cp36-cp36m-win_amd64.whl
SpringBoot是一个经典实用的员工管理系统。集成了Mybatis在MySQL数据库上的
10-19
SpringBoot是一个经典实用的员工管理系统。集成了Mybatis在MySQL数据库上的操作。页面模板使用themleaf。经典SpringBoot案例研究_ SpringBoot_案例研究_
nipy-0.4.1-cp35-cp35m-win_amd64.whl
10-19
nipy-0.4.1-cp35-cp35m-win_amd64.whl
算法部署-使用OpenVINO在FPGA上部署人脸检测算法-附详细流程教程+项目源码-优质项目实战.zip
最新发布
10-19
算法部署_使用OpenVINO在FPGA上部署人脸检测算法_附详细流程教程+项目源码_优质项目实战
Java Web学习笔记：解决常见异常和技术总结
Java Web 学习笔记 本资源摘要信息是基于 Java Web 学习笔记的知识点总结，涵盖了常见的异常解决方法和常用技术。 Java Web 学习笔记概述 Java Web 学习笔记是作者总结的学习笔记，旨在记录 Java Web 开发中遇到...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值