2021-11-23 迈向程序猿的第三十四步

最新推荐文章于 2024-07-12 16:26:30 发布
最新推荐文章于 2024-07-12 16:26:30 发布
阅读量711 收藏
点赞数 1
分类专栏： 日记 文章标签： java 开发语言 后端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48654729/article/details/121499234
版权

目录

一.HTML框架集

1.1 框架集概述

1.2 框架集案例

二.CSS的使用

2.1 样式分类及基本选择器

2.2 属性选择器

2.3 伪元素选择器

2.4 层级选择器

三.样式属性

3.1 基本样式属性

3.2 列表属性

3.3 尺寸与显示属性

3.4 轮廓属性

3.5 浮动属性

四.定位与模型

4.1 相对定位

4.2 绝对定位

4.3 固定定位

4.4 盒子模型

一.HTML框架集

1.1 框架集概述

<!--  
		  通过多个子页面的组合，形成了框架集
		  应用场景：一般只做模板形式的框架页面，现在用得少，都被div所取代；(以前老项目常用)
		  使用：frameset标签，与body标签不能共存
		 子标签：frame，通过src属性去引入子页面 
		 noresize="noresize":固定大小
	-->
	<!-- 案例：在框架集中显示3列的子页面 -->
	<frameset cols="20%,*,30%">
		<frame src="a.html"/>
		<frame src="b.html" noresize="noresize"/>
		<frame src="c.html"/>
	</frameset>

1.2 框架集案例

<!-- 案例： 先按行划分2行，再按列划分两列的框架集 -->
	<frameset rows="20%,*">
		<frame src="head.html" />
		<frameset cols="15%,*">
			<frame src="menu.html" />
			<!-- name属性：相当于超链接的设置锚点 -->
			<frame src="content.html" name="cont" />
		</frameset>
	</frameset>

	<body bgcolor="red">
		<a href="http://sina.com.cn" target="cont">新浪搜索</a><br />
	</body>

二.CSS的使用

2.1 样式分类及基本选择器

<head>
		<meta charset="UTF-8">
		<title></title>
	
		
		<!-- 外部样式 -->
		<link rel="stylesheet" type="text/css" href="../css/red.css"/>
		
		<!-- 样式的场景：
		    行内样式：用在简单单个标签的测试
			内部样式： 用在当前页面中，项目中常用
			外部样式：在多个页面中复用，项目中常用
			样式优先级：行内>（内部=外部，看顺序）
		-->
		
		
		<!-- 内部样式 -->
		<style type="text/css">
			/* 通过选择器来设置样式属性  */
			/*  *{}: 通配符选择器（了解）
			 * 场景：
			 *  标签选择器： 标签{...}: 一般用在测试中
			 *  类选择器：    .类名{...}：有多个设置class属性的标签 (项目中常用)
			 *  id选择器：   #id{...}：唯一标签的设置（项目中常用）
			 *  优先级：id>class>标签
			 * 
			 *  */
			div{
				color: blue;
				font-size: 36px;
				font-family: "arial narrow";
			}
			
/*			#hh{
				color: green;
			}*/
			
/*			.cc{
				color: red;
			}*/
		</style>
		
	</head>
	<body>
		<!--什么是CSS：层叠样式表，多个样式可以层叠为一(叠加到html)，如果样式出现冲突，则选择优先级高的
			 与html的关系：html相当于毛坯房，那CSS就是内部及外部装修
			CSS作用：美化效果，表现(CSS)与内容(html)分离， 使得标签的结构更简洁
			CSS使用：通过选择器来设置样式属性
			选择器格式：选择器{属性：值;属性2：值2;}
		-->
		
		<!-- 行内样式：了解 -->
		<p>段落标签</p>
		<div id="hh" class="cc">容器标签</div>
	</body>

2.2 属性选择器

<head>
		<meta charset="UTF-8">
		<title></title>
		
		<!-- 属性选择器：基本选择器[属性][属性=‘值’]{...} -->
		<style type="text/css">
			h1[name='zs'][id]{
				color: red;
			}
		</style>
	</head>
	<body>
		<h1 name='zs' id="xx">标题1</h1>
		<h1 name='zs'>标题2</h1>
	</body>

2.3 伪元素选择器

<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/* 伪元素选择器：用在a标签中，针对鼠标不同动作，显示不同效果 */
			a:link{  /* 未访问时的效果 */
				color: red;
			}
			a:hover{  /*鼠标悬停效果 */
				color: green;
			}
			a:active{ /* 触发未放开鼠标的效果 */
				color: yellow;
			}
			a:visited{ /*完成后的效果*/
				color: gray;
			}
		</style>
	</head>
	<body>
		<h1><a href="#">点我吧</a></h1>
	</body>

2.4 层级选择器

<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/* 层级选择器： 后代，子代，相邻兄弟 */
			/* 后代选择器： 父选择器  子选择器{}: 后代都起作用
			 * 子代选择器： 父选择器>子选择器{}: 儿子起作用  
			 * 相邻兄弟选择器： 选择器+选择器{}: 相邻兄弟起作用
			 *   */
			/*ul a{
				color: red;
			}*/
			/*ul>a{
				color: green;
			}*/
			#xx+li{ /*作用在兄弟上，自己不起作用 */
				color: yellow;
			}
		</style>
	</head>
	<body>
		<ul>
			<li><a href="#">床前明月光</a></li>
			<li id="xx"><a href="#">疑是地上霜</a></li>
			<li><a href="#">举头望明月</a></li>
			<a href="#">低头思故乡</a>
		</ul>
	</body>

三.样式属性

3.1 基本样式属性

<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			
			div{
				/* 文字属性 */
				font-size: 40px;
				font-family: "微软雅黑";
				font-style: italic;  /*斜体 */
				font-weight: bold;  /* 1~599 细体  600~900粗体*/
				
				
				/* 文本属性 */
				color: red;
				text-indent: 50px;  /* 文本缩进 */
				text-decoration: underline; /* 划线修饰 */
				/*text-align: center;*/ /*文本对齐 */
				line-height: 120px; /*带格式行高 */ 
				/*height: 120px;*/ /*不带格式的行高 */
				word-spacing: 30px; /*字间距 */
				
				border: 4px blue solid;  /*1.线条宽度 2.颜色 3.样式：实线,虚线,点线等 */
				/*四个取值依次是： 水平偏移；垂直偏移；模糊值；阴影颜色；*/
				text-shadow: 30px 40px 30px gray; 	

								/* 背景属性 */
				/*
				background-color: yellow;
				background-image: url(../img/002.png);
				background-repeat: no-repeat;  
				background-position: 30px 50px;   
				*/
				
				/* 背景属性组合 */
				background: yellow url(../img/005.png) no-repeat;
			}
		</style>
	</head>
	<body>
		<div>样式&nbsp;属性</div>
	</body>

3.2 列表属性

<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/* 列表属性，可以将列表标签的类型改变（了解） */
			ol{
				list-style-type: disc;  /*改无序效果 */
				list-style-image: url(../img/002.png);
				list-style-position: inside;  /*显示到内部 */
			}
		</style>
	</head>
	<body>
		<ol>
			<li>草根精神</li>
			<li>创新精神</li>
			<li>协同精神</li>
			<li>奉献精神</li>
		</ol>
	</body>

3.3 尺寸与显示属性

<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/* 尺寸的属性设置： 宽，高  */
			div{
				width: 200px;
				height: 150px;
				border: dashed 3px red;
				
				/* 显示属性：块级显示(默认)：独占一行，行级显示，行级块：不换行，保留宽高 */
				display: inline; /*行级：不换行，且不保留宽高 */ 
			}
		</style>
	</head>
	<body>
		<div>第一个盒子</div>
		<div>第二个盒子</div>
	</body>

3.4 轮廓属性

<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/* 轮廓属性： 与边框属性用法一致（了解） */
			div{
				width: 200px;
				height: 200px;
				
				/*
				outline-color: yellow;
				outline-style: solid;
				outline-width: 4px;
				*/
				outline: solid 4px yellow;  /*轮廓属性组合 */
				
				/*
				border-color: blue;
				border-width: 3px;
				border-style: dashed;
				*/
				border: dashed blue 3px;  /*边框组合*/
			}
		</style>
	</head>
	<body>
		<div>轮廓属性与边框区别</div>
	</body>

3.5 浮动属性

<head>
		<meta charset="UTF-8">
		<title></title>
		<!-- 浮动：
			标签设计都是基于标准文档流自上而下的排版；如果需要编程横向排列，需要进行浮动
			注意：设置了浮动之后，用完了要清除浮动，否则脱离了文档流的设计，排版变得混乱
		-->
		<style type="text/css">
			.one{
				width: 100px;
				height: 120px;
				
				background-color: red;
				/*float: right;*/  /*浮动到右边 */
				float: left;  /* 向左浮动 */
			}
			.two{
				background-color: green;
				float: left;  /* 向左浮动 */
			}
			.three{
				
				background-color: blue;
				float: left;  /* 向左浮动 */
			}
			.dd{
				width: 100px;
				height: 100px;
			}
			#parent{
				width: 299px; /*如果父容器宽度不够，第三个盒子和移到下面 */
				overflow:hidden;  /*清除浮动2 */
			}
			#clear{
				clear: both; /* 清除浮动 */
			}
		</style>
	</head>
	<body>
		<div id="parent"> 
			<div class="one"></div> <!-- 红色 100px -->
			<div class="dd two"></div> <!-- 绿色 100px-->
			<div class="dd three"></div> <!--蓝色 100px -->
			
			<!--清除浮动1： -->
			<!--<div id="clear"></div>-->
		</div>
		<h2>标题2</h2>
	</body>

四.定位与模型

4.1 相对定位

<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/* 定位： 相对定位，绝对定位，固定定位 */
			/* 相对定位：相对于当前位置的定位，移动后，保留原有位置 */
			
			.dd{
				width: 100px;
				height: 100px;
			}
			.one{
				background-color: red;
			}
			.two{
				background-color: green;
				left: 50px; /*左边间隔50px*/
				top: 30px;  /*上边移动30px */
				position: relative; /* 相对定位 */
			}
			.three{
				background-color: blue;
			}
			
		</style>
	</head>
	<body>
		<div class="dd one"></div> <!-- 红色 100px -->
		<div class="dd two"></div> <!-- 绿色 100px-->
		<div class="dd three"></div> <!--蓝色 100px -->
	</body>

4.2 绝对定位

<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/* 定位： 相对定位，绝对定位，固定定位 */
			/* 绝对定位：相对于父容器的定位，如果父容器没有，则最后基于body的定位,
			 * 且绝对定位，不会保留原有位置 */
			
			.dd{
				width: 100px;
				height: 100px;
			}
			.one{
				background-color: red;
			}
			.two{
				background-color: green;
				left: 50px; /*左边间隔50px*/
				top: 30px;  /*上边移动30px */
				position: absolute; /* 绝对定位 */
			}
			.three{
				background-color: blue;
			}
			.parent{
				border: solid black 2px;
				position: relative;  /*相对于父容器的定位 */
			}
		</style>
	</head>
	<body>
		<div class="dd parent">
			<div class="dd one"></div> <!-- 红色 100px -->
			<div class="dd two"></div> <!-- 绿色 100px-->
			<div class="dd three"></div> <!--蓝色 100px -->
		</div>
	</body>

4.3 固定定位

<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/* 固定定位：与绝对定位一致，只是固定定位，任何情况下不会移动位置 */
			
			#left {
				width: 200px;
				height: 200px;
				background-color: red;
				position: fixed;
				left: 0px;
				bottom: 0px;
			}
			
			#right {
				width: 200px;
				height: 200px;
				background-color: green;
				position: fixed;
				right: 0px;
				bottom: 0px;
			}
			#middle{
				width: 200px;
				height: 200px;
				background-color: blue;
				position: fixed;
				left: 0px;
				bottom: 50%;
			}
		</style>
	</head>
	<body>
		<div id="left">左下</div>
		<div id="right">右下</div>
		<div id="middle">中间</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 /><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 /><br /><br /><br /><br /><br /><br /><br /><br />
		<br /><br /><br /><br /><br /><br /><br /><br /><br />
	</body>

4.4 盒子模型

<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.dd{
				width: 100px;
				height: 100px;
			}
			/* 边框：将基本值括起来
			 * 内边距：边框和内容之间的间距，默认为0，会将盒子撑大
			 * 外边距：边框与其他控件的间距，默认为0
			 *  */
			.one{
				border: solid 4px red;  /* 边框： */
				padding-left: 30px;  /*内边距左侧间隔30像素 */
				
				/*margin-bottom: 50px; *//*外边距间隔 */
			}
			.two{
				margin-top: 50px;
				border: solid 4px green;
			}

			
		</style>
	</head>
	<body>
		<div class="dd one">第一个盒子</div> 
		<div class="dd two">第二个盒子</div> 

	</body>

(~-~,这几天的前端知识,属实又臭又烂又长,最烦的就是调整各种条条框框的大小和位置了,错还不知道错在哪里,快点过去吧~下礼拜就可以正儿八经的学习大数据了,目前在适应linux环境下的操作,换了固态和内存条,操作流畅度提升了好几个档次,只是对于linux的命令掌握还不是很熟悉,还有就是shell脚本的编程也有点生硬,没有java来的那么信手拈来,只能说,持之以恒,敲得代码越多,回报也会越多!小白去码代码了~就不闲聊了!!!)

改个昵称就有这么难吗
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
入门全栈Java程序员——CSS
标梵互动
01-06 195
我们刚刚学习完Html，没学完的看上一篇，趁热打铁，下面我们学习CSS，先用一张‘思维导图’，看看我们都要学习什么 2 CSS简介 CSS 是什么 CSS 是层叠式样式表，负责控制网页的外观，是为了改变 Html 的默认外观，使网页更美观而引进的一种技术 CSS 和 CSS3 的关系 C3 一般说的是相对于 Css 新增加的内容，也就是说，Css 是基础，学完才能学 C3 Css 的引入方式 外部样式表 内部样式表 行内样式表 3.1 外部样式表 这种方式是实际开发中，最常用的方式，意思就是说，
精品（2021-2022年）资料计算机技术与软件专业技术资格考试各科目介绍.doc
12-02
这项考试涵盖了初级、中级和高级三个级别，旨在检验考生在编程、系统分析、项目管理等多个领域的专业知识和实践技能。 【初级程序员】是考试中最低级别的认证，适合刚入门的软件开发人员。其主要职责包括： 1. 负责...
java程序员 css_大牛程序员养成之路-CSS开发详解
weixin_28881787的博客
02-25 153
基础篇https://edu.51cto.com/course/19845.htmlhttps://edu.51cto.com/course/19845.htmlhttps://edu.51cto.com/course/19841.htmlhttps://edu.51cto.com/course/21197.htmlhttps://edu.51cto.com/course/19886.htmlht...
2021-11-09 迈向程序猿的第二十四步
qq_48654729的博客
11-09 129
目录 一.File 1.1 FileFilter 1.2 Properties集合 二. 计算机网络 2.1 概述 2.2 网络模型 2.3 网络编程三要素 三. 网络编程 3.1 INetAddress类(了解) 3.2 TCP-客户端发数据到服务器 3.3 客户端上传图片到服务器 3.4 多个客户端发数据给服务器 一.File 1.1 FileFilter //FileFilter:文件过滤器 //listFiles方法用于将当前层的文件和目录的File对象放入数组...
2021-11-18 迈向程序猿的第三十一步
qq_48654729的博客
11-18 578
目录 一.工具类的封装 二.ORM 三.Dao层的抽取 四.DateUtils 五.Service业务层 一.工具类的封装 //问题： 每次进行CRUD操作，都要写一套JDBC，很繁琐 //解决方案：将重复的操作，抽取到工具类中封装 //1.加载驱动只需要一次---放到静态代码块 //问题2： 直接在工具类中将数据库驱动，数据库名，用户名，密码写死了，不方便后续变更---硬编码 //解决方案：需要变为软编码形式，使程序更灵活，维护性更强 public class LoginTest { .
2021-11-29 迈向程序猿的第三十八步
qq_48654729的博客
11-29 1335
目录 一.linux概述 二.安装VMware 三.安装LINUX 四.linux常用命令 4.1 命令格式的说明 4.2 三个常用的命令 4.3 帮助命令 4.4 文件处理指令 4.5 文件查看指令 4.6 文件查找指令 4.7 文件(解)压缩指令 4.8 时间指令date 4.9 系统关机指令 4.10 linux的快捷键和basename及dirname 一.linux概述 自个百度随便了解点即可~ 二.安装VMware 操作简单...
2021-11-25 迈向程序猿的第三十六步
qq_48654729的博客
11-25 393
目录 一.正则表达式 二.DOM基本操作 2.1 获取DOM对象 2.2 修改元素内容 2.3 修改元素属性 2.4 修改元素样式 三.事件 3.1 点击事件与this 3.2 点击按钮事件 3.3 获取与失去焦点事件 3.4 级联列表更改事件 3.5 监听事件 3.6 冒泡与捕获事件 四.添加删除节点 4.1 添加段落 4.2 删除段落 4.3 删除表格 一.正则表达式 /* 正则表达式： 描述一组特定字符模式规则的对象（java中就是字符串，规则一致） */ /
2021-11-24 迈向程序猿的第三十五步
qq_48654729的博客
11-24 82
目录 一.HTML扩展属性 二.JS的基础语法 2.1 变量 2.2 数组 2.3 运算符 三. 函数 3.1 函数基本使用 3.2 弹窗函数 3.3 系统预定义函数 四.事件 4.1 事件的使用 4.2 提交事件 4.3 字符串常用函数 一.HTML扩展属性 <head> <meta charset="UTF-8"> <title></title> <style type="text/css">
2021-11-11 迈向程序猿的第二十六步
qq_48654729的博客
11-11 88
目录 一.设计模式 1.1 工厂模式 1.2 单例 二.枚举 三.Lambda表达式 3.1 Labmbda 3.2 自定义函数式接口 3.3 系统提供的函数式接口 3.4 方法引用 四.Stream 一.设计模式 概述：是一套经人反复使用的代码设计经验的总结 也可以理解为特定问题的特定的解决方案 好处：可读性更强，更容易复用 设计模式的归类，分三大类：（23种） 1.对象型模式：对象的创建方式；例如：单例，工厂模式等 2.结构型模式：组织结构...
2021-11-16 迈向程序猿的第二十九步
qq_48654729的博客
11-16 421
目录 一.关联查询 1.1 子查询 1.2 合并查询 1.3 连接查询 二. DML操作(增删改) 2.1 增 2.2 删 2.3 改 三.数据类型 3.1 创建表 3.2 数据表的修改 四. 约束 4.1 外键约束 4.2 唯一约束 4.3 主键自增长列 4.4 非空约束 4.5 默认值约束 4.6 引用完整性约束(外键约束) 五. 事务 5.1 模拟转账功能 5.2 事务的原理 5.3 事务的特性(ACID) 六.权限管理 一.关联查询 1.1 子查询
女子体育的兴起：迈向商业化之路-2021-16页.pdf
04-18
女子体育 行业报告 资源达人分享计划
CVPR2021-Transformer-and-Low-level-Vision
04-09
AdderSR：迈向节能图像超分辨率， Efficient SR ，[]，[代码] 探索图像超分辨率中的稀疏性以进行有效推理， Efficient SR ，[论文]，[代码] ClassSR：通过数据特性， Efficient SR加速超分辨率网络的通用框架，...
优质资料（2021-2022年收藏）弱电系统集成技术在智能建筑的分析精品资料.docx
10-10
随着我国经济水平的不断攀升，建筑领域正逐渐迈向智能化、数字化和个性化。弱电系统集成技术在智能建筑中的应用变得至关重要，它对于保障建筑的安全性和提高管理效率起到了积极的推动作用。本文将深入探讨弱电系统...
配置Java开发环境
Broken_x的博客
07-10 1279
Java开发环境配置
java集合工具类
最新发布
hejiefeng111的博客
07-12 207
【代码】java集合工具类。
java版的上门家政系统和PHP版的上门家政有什么区别？
baina666的博客
07-12 266
综上所述，Java版和PHP版的上门家政系统各有优缺点，选择哪种语言主要取决于项目的具体需求、预算、开发团队的技术栈以及未来的扩展计划等因素。同时，由于Java生态系统的复杂性和多样性，也可能需要投入更多的时间和资源来学习和掌握相关的技术和工具。Java版：Java拥有庞大的生态系统和丰富的第三方库，这为家政系统的开发和扩展提供了强大的支持。Java版：由于Java的编译执行机制和高效的垃圾回收算法，Java版家政系统通常具有更高的运行效率和更好的性能表现，尤其是在处理高并发、大数据量等复杂场景时。
关于static定义初始化块和静态变量以及初始化块的执行顺序问题
你我约定有三的博客
07-08 405
第二步：在类加载的时候，按照从上到下执行static修饰的代码，此时执行static Test2 test1 = new Test2()，也就是创建出一个名为test1的对象。第六步：此时除了main方法，所有由static修饰的代码全部执行完毕(static修饰的代码只执行一次)，类初始化完成，开始执行main方法，main方法中只有一条语句(中的代码,此时输出aa以及a的值(由于第一步没赋初值，并且给了默认值为0 所以输出0)//首先输出a的值为10 然后输出bb，最后将a的值定义为11。
新能源汽车产业发展规划（2021-2035）
04-22
新能源汽车产业发展规划（2021-2035）

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值