A_GooD_CanceR

前端网页学习 Day48(文档流浮动布局流式布局定位布局)

前端网页学习(html)

DAY48

今日内容:

文档流

浮动布局

清浮动

流式布局

定位布局(相对定位 绝对定位 固定定位)

文档流

本质:普通流/常规流

文档指的是页面主体

文档流指的是一个连续具有逻辑上下的页面整体

概念:将窗体自上而下分成一行一行,块级元素从上至下、行内元素在每行中从左至右的顺序依次排放元素

BFC:Block formatting context

概念:由block-level box 参与布局,同一区域(容器)中,相互影响,且不会对区域外产生影响
<div class="b1">
    <div class="bb1">div>
    <div class="bb2">div>
div>
<div class="b2">
div>

浮动布局

浮动布局就是为了让块元素能同行显示

问题:实现文本环绕

<div class="eg">
		<div class="article"><img src="图片" alt="">文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本div>
	div>

设置css样式

<style type="text/css">
    .article {
        width: 300px;
        border: 1px solid black;
    }
    .eg img {
        width: 148px;
        /*块级:独占一行*/
        display: block;
        /*浮动后:可以同行显示(只占自身显示区域)*/
        float: left;
    }
    .eg {
        display: none;
    }
style>

基本语法: float : left | right

<div class="p2">
	<div class="sup">
		<div class="sub">1div>
		<div class="sub">2div>
	div>
div>

CSS样式

<style type="text/css">
		.sup {
			width: 300px;
			height: 300px;
			background-color: orange;
		}
		.sub {
			width: 100px;
			height: 100px;
			background-color: red;
			border-radius: 50%;
			font: 900 40px/100px 'STSong';
			text-align: center;
		}
		/*BFC横向布局规则为从左至右,且block box同行显示(之间没有间隔)*/
		/*注: 从左至右可以理解横坐标正方向为右*/
		.sub {
			float: left;
		}
		/*BFC横向布局规则为从右至左,且block box同行显示(之间没有间隔)*/
		/*注: 从右至左可以理解横坐标正方向为左*/
		.sub {
			float: right;
		}
		/*.sub:nth-child(2) {
			margin-right: -100px; 
		}*/
		.p2 {
			display: none;
		}
style>

浮动产生的问题:

父级未设置固定高度,不再撑开父级高度

<div class="p3">
    <div class="sp">
        <div class="sb">1div>
        <div class="sb">2div>
    div>
    <div class="br">12345123451234512345123div>
div>

CSS样式

<style type="text/css">
		.sp {
			width: 300px;
			background-color: orange;
		}
		.sb {
			width: 100px;
			height: 100px;
			background-color: red;
			border-radius: 50%;
			font: 900 40px/100px 'STSong';
			text-align: center;
		}
		.sb:nth-child(2) {
			/*margin-top: -80px;*/
			/*文本层次高于背景层次*/
			/*2的背景只能遮挡1的背景,但不能遮挡1的文本*/
			/*background-color: pink;*/
			/*父级的高度最终决定于逻辑最后位置上的子级的盒子底端*/
		}

		.sb {
			float: left;
		}
		/*显示区域重叠,文本区域正常(与显示区域共同讨论就不正常)*/
		.br {
			width: 300px;
			height: 100px;
			background-color: yellowgreen;
		}
		/*恢复正常:父级刚好拥有存放所有子级的高度(合适高度)*/
		.sp {
			height: 100px;
		}
		/*总结(坑):当target标签的内部有浮动的子级,target的兄弟标签布局会出现显示异常*/
style>

清浮动

清浮动的本质就是让父级获得合适的高度

通常文档流中,子标签在父级标签未设置高度的情况下,会撑开父级的高度

脱离文档流的子标签不会撑开父级高度

不完全脱离文档流,即浮动之后,不清除浮动就不会撑开父级高度

清浮动后,才会重新撑开父级高度

清浮动基本格式
/*清浮动的对象:用于浮动子级的父级 sup*/
/*① 设置自身高度*/
/*.sup {
	height: 100px;
}*/
/*② 设置自身overflow: hidden*/
/*.sup {
	overflow: hidden;
}*/
/*③ 设置兄弟标签的clear: left | right | both*/
/*.s2 {
	float: right;
	height: 50px;
}
.br {
	clear: both;
}*/

/*④ 设置自身:after伪类*/
.sup:after {
	content: "";
	display: block;
	clear: both;
}

流式布局(% vw vh rem em)

目的:让布局脱离固定值的限制,可以根据页面情况的改变相应的发生改变


<html>
<head>
	<meta charset="UTF-8">
	<title>流式布局title>
	<style type="text/css">
		html, body {
			width: 100%;
			margin: 0;
		}
		.box {
			/*百分比流式*/
			/*参考最近父级*/
			width: 90%;
			/*max-width: 1000px;*/
			/*min-width: 600px;*/

			/*窗口比*/
			/*width: 90vw;*/
			/*max-width: 1000px;*/
			/*min-width: 600px;*/

			height: 300px;
			background-color: orange;
			margin: 0 auto;
		}
		.b {
			width: 100px;
			height: 100px;
			background-color: red;
			border-radius: 50%;
			float: left;
		}
		
		body {
			font-size: 30px;
		}
		/*.sup {
			font-size: 20px;
		}*/
		.txt {
			/*1em = 16px*/
			/*font-size: 16px;*/
			/*font-size: 0.4em;*/
			/*总结:em为最近设置字体大小的父级规定的字体大小*/
			font-size: 1rem;
			/*总结:rem为html字体大小*/
		}
		html {
			font-size: 50px;
		}
	style>
head>
<body>
	<div class="box">
	 	<div class="b">div>
	 	<div class="b">div>
	 	<div class="b">div>
	 	<div class="b">div>
	 	<div class="b">div>
	 	<div class="b">div>
	 	<div class="b">div>
	 	<div class="b">div>
	 div> 

	 <div class="sup">
	 	<div class="txt">文本div>
	 div>
body>
html>

定位布局应用

目的:让目标标签在指定参考系下任意布局

基本语法 :postion: static | relative | absolute | fixed

通过position设置定位是否开启

static: 静态, 未定位(默认值)

relative:相对定位,未脱离文档流

absolute:绝对定位,完全脱离文档流

fixed:固定定位,完全脱离文档流

注:定位开启后,四个定位方位便会开启,且四个方位均参与布局

如果发生冲突,左右取左,上下取上
<html>
<head>
	<meta charset="UTF-8">
	<title>定位布局应用title>
	<style type="text/css">
		.box {
			width: 150px;
			height: 300px;
			background-color: orange;
			/*定位了*/
			position: fixed;
			/*打开了布局方位*/
			left: 10px;
			top: calc(50vh - 150px);
		}
	style>
head>
<body>

	<div class="box">div>
	br*100 /*tab测试*/ 
    
body>
html>

相对定位(relative)


<html>
<head>
	<meta charset="UTF-8">
	<title>相对定位title>
	<style type="text/css">
		div {
			width: 200px;
			height: 200px;
			background-color: red;
		}
		.b2 {
			background-color: orange;
		}

		/*不做定位操作*/
		/*b1,b2均在文档流中,b1的布局会影响到b2*/
		/*.b1 {
			margin-top: 30px;
			margin-bottom: 30px;
		}*/

		/*固定定位后*/
		.b1 {
			/*1.未脱离文档流*/
			/*BFC规则下margin布局,上盒子依旧会影响下盒子*/
			/*margin-top: 30px;
			margin-bottom: 30px;*/

			/*开启定位*/
			position: relative;
			/*具有定位方位*/
			/*2.方位布局下,上盒子不会影响下盒子*/
			/*left: 30px;
			top: 30px;*/
			/*总结:方位布局只改变盒子显示区域,不改变盒子原有位置*/

			/*margin-top: 30px;*/
			/*3.参考系:相对定位参考系为自身原有位置*/
			/*right: 30px;*/

			/*总结:方位布局就是 显示区域上|下|左|右距离自身原始位置上|下|左|右的间隔*/

			/*4.left=-right top=-bottom,同时存在,左右取左,上下取上*/
			left: -30px;
			right: -100px;
		}
	style>
head>
<body>
	<div class="b1">div>
	<div class="b2">div>
body>
html>

绝对定位(absolute)


<html>
<head>
	<meta charset="UTF-8">
	<title>绝对定位title>
	<style type="text/css">
		div {
			width: 200px;
			height: 200px;
			background-color: red;
		}
		.b2 {
			background-color: orange;
		}
		.b1 {
			/*1.完全脱离文档流*/
			position: absolute;
			/*总结:不在文档流中占位,也永远不会撑开父级高度,永远不会影响兄弟布局,显示层高于文档流层*/
			/*打开定位方位*/
			margin-left: 100px;
			margin-top: 100px;
			/*总结:margin依旧可以影响自身布局,但不会影响父级即兄弟布局*/

			/*2.参考系:?*/
			left: 100px;
			right: -100px;

			/*3.同时存在,左右取左,上下取上*/
		}


	style>
	<style type="text/css">
		.sup {
			width: 500px;
			height: 500px;
			background-color: orange;
		}
		.sub {
			width: 200px;
			height: 200px;
			background-color: red;
		}

		.sup {
			/*采用了盒模型布局*/
			margin: 0 auto;
			/*需求:sub应该参考sup,sup需要定位:相对|绝对|固定*/
			/*相对定位好处:父级不会脱离文档流,满足所有的盒模型布局*/
			/*position: relative;*/
			/*绝对定位好处:如果自身已经采用绝对定位布局了,那么子级一定参考自身进行定位*/
			position: absolute;
			margin: 100px 100px;
			/*注:如果父级只是辅助子级进行绝对定位,那么一定优选相对定位,因为绝对定位会产生新的BFC,导致盒模型布局会受影响*/
			/*注:margi-top|left依旧起作用,只是sup已经脱离文档流,不会获得到body宽度,所以auto没有参考值*/
		}
		.sub {
			/*2.参考坐标系为最近的定位父级*/
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			/*父级: sup(未定位) -> body(未定位) -> html(文档窗口)*/

			/*3.同时存在,左右取左,上下取上*/
		}
	style>
head>
<body>
	
	<div class="sup">
		<div class="sub">div>
	div>
body>
html>

固定定位(fixed)


<html>
<head>
	<meta charset="UTF-8">
	<title>固定定位title>
	<style type="text/css">
		.sup {
			width: 500px;
			height: 500px;
			background-color: orange;
			margin: 0 auto;
		}
		.sub {
			width: 200px;
			height: 200px;
			background-color: red;
		}
		.sup {
			position: relative;
			position: absolute;
		}
		.sub {
			position: fixed;
			left: 0;
			/*top: 0;*/
			bottom: 0;
		}
	style>
head>
<body>
	
	
	
	
	<div class="sup">
		<div class="sub">div>
	div>
	br*100 /*tab测试*/
body>
html>

以上为本次学习内容

你可能感兴趣的:(前端网页学习 Day48(文档流浮动布局流式布局定位布局))

情绪觉察日记第37天露露_e800
今天是家庭关系规划师的第二阶最后一天，慧萍老师帮我做了个案，帮我处理了埋在心底好多年的一份恐惧，并给了我深深的力量！这几天出来学习，爸妈过来婆家帮我带小孩，妈妈出于爱帮我收拾东西，并跟我先生和婆婆产生矛盾，妈妈觉得他们没有照顾好我…。今晚回家见到妈妈，我很欣赏她并赞扬她，妈妈说今晚要跟我睡我说好，当我们俩躺在床上准备睡觉的时候，我握着妈妈的手对她说:妈妈这几天辛苦你了，你看你多利害把我们的家收拾得
机器学习与深度学习间关系与区别 ℒℴѵℯ心·动ꦿ໊ོ꫞ 人工智能学习深度学习 python
一、机器学习概述定义机器学习（MachineLearning,ML）是一种通过数据驱动的方法，利用统计学和计算算法来训练模型，使计算机能够从数据中学习并自动进行预测或决策。机器学习通过分析大量数据样本，识别其中的模式和规律，从而对新的数据进行判断。其核心在于通过训练过程，让模型不断优化和提升其预测准确性。主要类型1.监督学习（SupervisedLearning）监督学习是指在训练数据集中包含输入
android系统selinux中添加新属性property 辉色投像
1.定位/android/system/sepolicy/private/property_contexts声明属性开头：persist.charge声明属性类型：u:object_r:system_prop:s0图12.定位到android/system/sepolicy/public/domain.te删除neverallow{domain-init}default_prop:property
铭刻于星（四十二）随风至
69夜晚，绍敏同学做完功课后，看了眼房外，没听到动静才敢从书包的夹层里拿出那个心形纸团。折痕压得很深，都有些旧了，想来是已经写好很久了。绍敏同学慢慢地、轻轻地捏开折叠处，待到全部拆开后，又反复抚平纸张，然后仔细地一字字默看。只是开头的三个字是第一次看到，让她心漏跳了几拍。“亲爱的绍敏：从四年级的时候，我就喜欢你了，但是我一直不敢说，怕影响你学习。六年级的时候听说有人跟你表白，你接受了，我很难过，但
UI学习——cell的复用和自定义cell Magnetic_h ui 学习
目录cell的复用手动（非注册）自动（注册）自定义cellcell的复用在iOS开发中，单元格复用是一种提高表格（UITableView）和集合视图（UICollectionView）滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时，如果没有可复用的单元格，则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕，它就不会被销毁。相反，它被添
学点心理知识，呵护孩子健康静候花开_7090
昨天听了华中师范大学教育管理学系副教授张玲老师的《哪里才是学生心理健康的最后庇护所，超越教育与技术的思考》的讲座。今天又重新学习了一遍，收获匪浅。张玲博士也注意到了当今社会上的孩子由于心理问题导致的自残、自杀及伤害他人等恶性事件。她向我们普及了一个重要的命题，她说心理健康的一些基本命题，我们与我们通常的一些教育命题是不同的，她还举了几个例子，让我们明白我们原来以为的健康并非心理学上的健康。比如如果
c++ 的iostream 和 c++的stdio的区别和联系黄卷青灯77 c++算法开发语言 iostream stdio
在C++中，iostream和C语言的stdio.h都是用于处理输入输出的库，但它们在设计、用法和功能上有许多不同。以下是两者的区别和联系：区别1.编程风格iostream（C++风格）：C++标准库中的输入输出流类库，支持面向对象的输入输出操作。典型用法是cin（输入）和cout（输出），使用>操作符来处理数据。更加类型安全，支持用户自定义类型的输入输出。#includeintmain(){in
Long类型前后端数据不一致 igotyback 前端
响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
ArcGIS栅格计算器常见公式（赋值、0和空值的转换、补充栅格空值）研学随笔 arcgis 经验分享
我们在使用ArcGIS时通常经常用到栅格计算器，今天主要给大家介绍我日常中经常用到的几个公式，供大家参考学习。将特定值（-9999）赋值为0，例如-9999.Con("raster"==-9999,0,"raster")2.给空值赋予特定的值（如0）Con(IsNull("raster"),0,"raster")3.将特定的栅格值(如1)赋值为空值，其他保留原值SetNull("raster"==
【一起学Rust | 设计模式】习惯语法——使用借用类型作为参数、格式化拼接字符串、构造函数广龙宇一起学Rust #Rust设计模式 rust 设计模式开发语言
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、使用借用类型作为参数二、格式化拼接字符串三、使用构造函数总结前言Rust不是传统的面向对象编程语言，它的所有特性，使其独一无二。因此，学习特定于Rust的设计模式是必要的。本系列文章为作者学习《Rust设计模式》的学习笔记以及自己的见解。因此，本系列文章的结构也与此书的结构相同（后续可能会调成结构），基本上分为三个部分
回溯 Leetcode 332 重新安排行程 mmaerd Leetcode刷题学习记录 leetcode 算法职场和发展
重新安排行程Leetcode332学习记录自代码随想录给你一份航线列表tickets，其中tickets[i]=[fromi,toi]表示飞机出发和降落的机场地点。请你对该行程进行重新规划排序。所有这些机票都属于一个从JFK（肯尼迪国际机场）出发的先生，所以该行程必须从JFK开始。如果存在多种有效的行程，请你按字典排序返回最小的行程组合。例如，行程[“JFK”,“LGA”]与[“JFK”,“LGB
Python数据分析与可视化实战指南 William数据分析 python python 数据
在数据驱动的时代，Python因其简洁的语法、强大的库生态系统以及活跃的社区，成为了数据分析与可视化的首选语言。本文将通过一个详细的案例，带领大家学习如何使用Python进行数据分析，并通过可视化来直观呈现分析结果。一、环境准备1.1安装必要库在开始数据分析和可视化之前，我们需要安装一些常用的库。主要包括pandas、numpy、matplotlib和seaborn等。这些库分别用于数据处理、数学
《庄子.达生9》钱江潮369
【原文】孔子观于吕梁，县水三十仞，流沫四十里，鼋鼍鱼鳖之所不能游也。见一丈夫游之，以为有苦而欲死也，使弟子并流而拯之。数百步而出，被发行歌而游于塘下。孔子从而问焉，曰：“吾以子为鬼，察子则人也。请问，‘蹈水有道乎’”曰：“亡，吾无道。吾始乎故，长乎性，成乎命。与齐俱入，与汩偕出，从水之道而不为私焉。此吾所以蹈之也。”孔子曰：“何谓始乎故，长乎性，成乎命？”曰：“吾生于陵而安于陵，故也；长于水而安于
2019-12-22-22:30 涓涓1016
今天是冬至，写下我的日更，是因为这两天的学习真的是能量的满满，让我看到了自己，未来另外一种可能性，也让我看到了这两年这几年的过程中我所接受那些痛苦的来源。一切的根源和痛苦都来自于人生，家庭，而你的原生家庭，你的爸爸和妈妈，是因为你这个灵魂在那一刻选择他们作为你的爸爸和妈妈来的，所以你得接受他，你得接纳他，他就是因为他的存在而给你的学习和成长带来这些痛苦，那其实是你必然要经历的这个过程，当你去接纳的
Python教程：一文了解使用Python处理XPath 旦莫 Python进阶 python 开发语言
目录1.环境准备1.1安装lxml1.2验证安装2.XPath基础2.1什么是XPath？2.2XPath语法2.3示例XML文档3.使用lxml解析XML3.1解析XML文档3.2查看解析结果4.XPath查询4.1基本路径查询4.2使用属性查询4.3查询多个节点5.XPath的高级用法5.1使用逻辑运算符5.2使用函数6.实战案例6.1从网页抓取数据6.1.1安装Requests库6.1.2代
将cmd中命令输出保存为txt文本文件落难Coder Windows cmd window
最近深度学习本地的训练中我们常常要在命令行中运行自己的代码，无可厚非，我们有必要保存我们的炼丹结果，但是复制命令行输出到txt是非常麻烦的，其实Windows下的命令行为我们提供了相应的操作。其基本的调用格式就是：运行指令>输出到的文件名称或者具体保存路径测试下，我打开cmd并且ping一下百度：pingwww.baidu.com>./data.txt看下相同目录下data.txt的输出：如果你再
四章-32-点要素的聚合彩云飘过
本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
运城寻访重逢石头纪实【严建设老照片395 集】我简直能把你想透，当我走进运城的时候。我已急得热汗直流，访问了十九个老头，把晋南的小城转了三周。虽然是悠久的思旧，我仍然是牛样的执... 严建设
运城寻访重逢石头纪实【严建设老照片395集】我简直能把你想透，当我走进运城的时候。我已急得热汗直流，访问了十九个老头，把晋南的小城转了三周。虽然是悠久的思旧，我仍然是牛样的执拗。说什么变换的世情，泛起了过去的逝流，你就是真正的故友。踏破铁鞋的淡愁，已化为不废功夫的范畴，是就像远在天涯近在咫尺，就像是梦乡的邂逅，我紧紧地攥着你的手。你已长成了高高的个头，俊逸的容颜却很清瘦，你那样顽皮的童音，已变到老
【加密社】Solidity 中的事件机制及其应用加密社闲侃区块链智能合约区块链
加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
GitHub上克隆项目 bigbig猩猩 github
从GitHub上克隆项目是一个简单且直接的过程，它允许你将远程仓库中的项目复制到你的本地计算机上，以便进行进一步的开发、测试或学习。以下是一个详细的步骤指南，帮助你从GitHub上克隆项目。一、准备工作1.安装Git在克隆GitHub项目之前，你需要在你的计算机上安装Git工具。Git是一个开源的分布式版本控制系统，用于跟踪和管理代码变更。你可以从Git的官方网站（https://git-scm.
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
Day1笔记-Python简介&标识符和关键字&输入输出 ~在杰难逃~ Python python 开发语言大数据数据分析数据挖掘
大家好，从今天开始呢，杰哥开展一个新的专栏，当然，数据分析部分也会不定时更新的，这个新的专栏主要是讲解一些Python的基础语法和知识，帮助0基础的小伙伴入门和学习Python，感兴趣的小伙伴可以开始认真学习啦！一、Python简介【了解】1.计算机工作原理编程语言就是用来定义计算机程序的形式语言。我们通过编程语言来编写程序代码，再通过语言处理程序执行向计算机发送指令，让计算机完成对应的工作，编程
人工智能时代，程序员如何保持核心竞争力？ jmoych 人工智能
随着AIGC（如chatgpt、midjourney、claude等）大语言模型接二连三的涌现，AI辅助编程工具日益普及，程序员的工作方式正在发生深刻变革。有人担心AI可能取代部分编程工作，也有人认为AI是提高效率的得力助手。面对这一趋势,程序员应该如何应对?是专注于某个领域深耕细作，还是广泛学习以适应快速变化的技术环境?又或者，我们是否应该将重点转向AI无法轻易替代的软技能？让我们一起探讨程序员
人生的每一步路都算数 sheli
如果你想打工，一直靠打工赚钱，那你就会不断的希望自己变得更专业，不断的希望能够获得更好的工作机会，升职加薪。如果你的目标志不在此，而是拥有自己的企业，那你的选择就会出现差别。在认真打工的人眼里，会“不务正业”，会总是选择不同岗位，甚至放弃高薪机会。但是这背后都是有更加长远的规划。成功富人所必需的管理技能包括：1．对现金流的管理。2．对系统的管理。3．对人员的管理。所以，在没有获得这些能力之前，只要
webpack图片等资源的处理 dmengmeng
需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
node.js学习小猿L node.js node.js 学习 vim
node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
阶段总结反思轻争
马上就要进入10月份了，今天做一下前段时间的总结和反思。前段时间，日更、英语、健身、护肤坚持的比较好。阅读、书法坚持的不好。1.中间被迫停更半个多月，其余时间一直在坚持日更挑战。偶尔也有不想写的时候，就做一下摘抄。因为阅读（输入）没跟上来，所以写作（输出）质量有待进一步加强。2.英语做到了一周至少学习5天，每次不少于30分钟，但是小班课没有跟上更新速度，下一步要争取利用零碎时间补听小班课。3.减肥
Python爬虫解析工具之xpath使用详解 eqa11 python 爬虫开发语言
文章目录Python爬虫解析工具之xpath使用详解一、引言二、环境准备1、插件安装2、依赖库安装三、xpath语法详解1、路径表达式2、通配符3、谓语4、常用函数四、xpath在Python代码中的使用1、文档树的创建2、使用xpath表达式3、获取元素内容和属性五、总结Python爬虫解析工具之xpath使用详解一、引言在Python爬虫开发中，数据提取是一个至关重要的环节。xpath作为一门
Spring的注解积累 yijiesuifeng spring 注解
用注解来向Spring容器注册Bean。需要在applicationContext.xml中注册： <context:component-scan base-package=”pagkage1[,pagkage2,…,pagkageN]”/>。如：在base-package指明一个包 <context:component-sc
传感器百合不是茶 android 传感器
android传感器的作用主要就是来获取数据,根据得到的数据来触发某种事件下面就以重力传感器为例; 1,在onCreate中获得传感器服务 private SensorManager sm;// 获得系统的服务 private Sensor sensor;// 创建传感器实例 @Override protected void
[光磁与探测]金吕玉衣的意义 comsci
这是一个古代人的秘密:现在告诉大家信不信由你们: 穿上金律玉衣的人,如果处于灵魂出窍的状态,可以飞到宇宙中去看星星这就是为什么古代
精简的反序打印某个数沐刃青蛟打印
以前看到一些让求反序打印某个数的程序。比如：输入123，输出321。记得以前是告诉你是几位数的，当时就抓耳挠腮，完全没有思路。似乎最后是用到%和/方法解决的。而今突然想到一个简短的方法，就可以实现任意位数的反序打印（但是如果是首位数或者尾位数为0时就没有打印出来了）代码如下： long num, num1=0;
PHP：6种方法获取文件的扩展名 IT独行者 PHP 扩展名
PHP：6种方法获取文件的扩展名 1、字符串查找和截取的方法 1 $extension = substr ( strrchr ( $file , '.' ), 1); 2、字符串查找和截取的方法二 1 $extension = substr
面试111 文强chu 面试
1事务隔离级别有那些，事务特性是什么（问到一次） 2 spring aop 如何管理事务的，如何实现的。动态代理如何实现，jdk怎么实现动态代理的，ioc是怎么实现的，spring是单例还是多例，有那些初始化bean的方式，各有什么区别（经常问） 3 struts默认提供了那些拦截器（一次） 4 过滤器和拦截器的区别（频率也挺高） 5 final，finally final
XML的四种解析方式小桔子 dom jdom dom4j sax
在平时工作中，难免会遇到把 XML 作为数据存储格式。面对目前种类繁多的解决方案，哪个最适合我们呢？在这篇文章中，我对这四种主流方案做一个不完全评测，仅仅针对遍历 XML 这块来测试，因为遍历 XML 是工作中使用最多的（至少我认为）。　　预备　　测试环境：　　AMD 毒龙1.4G OC 1.5G、256M DDR333、Windows2000 Server
wordpress中常见的操作 aichenglong 中文注册 wordpress 移除菜单
1 wordpress中使用中文名注册解决办法 1)使用插件 2)修改wp源代码进入到wp-include/formatting.php文件中找到 function sanitize_user( $username, $strict = false
小飞飞学管理-1 alafqq 管理
项目管理的下午题，其实就在提出问题（挑刺），分析问题，解决问题。今天我随意看下10年上半年的第一题。主要就是项目经理的提拨和培养。结合我自己经历写下心得对于公司选拔和培养项目经理的制度有什么毛病呢？ 1，公司考察，选拔项目经理，只关注技术能力，而很少或没有关注管理方面的经验，能力。 2，公司对项目经理缺乏必要的项目管理知识和技能方面的培训。 3，公司对项目经理的工作缺乏进行指
IO输入输出部分探讨百合不是茶 IO
//文件处理在处理文件输入输出时要引入java.IO这个包； /* 1，运用File类对文件目录和属性进行操作 2，理解流，理解输入输出流的概念 3，使用字节/符流对文件进行读/写操作 4，了解标准的I/O 5，了解对象序列化 */ //1，运用File类对文件目录和属性进行操作 //在工程中线创建一个text.txt
getElementById的用法 bijian1013 element
getElementById是通过Id来设置/返回HTML标签的属性及调用其事件与方法。用这个方法基本上可以控制页面所有标签，条件很简单，就是给每个标签分配一个ID号。返回具有指定ID属性值的第一个对象的一个引用。语法： &n
励志经典语录 bijian1013 励志人生
经典语录1: 哈佛有一个著名的理论：人的差别在于业余时间，而一个人的命运决定于晚上8点到10点之间。每晚抽出2个小时的时间用来阅读、进修、思考或参加有意的演讲、讨论，你会发现，你的人生正在发生改变，坚持数年之后，成功会向你招手。不要每天抱着QQ/MSN/游戏/电影/肥皂剧……奋斗到12点都舍不得休息，看就看一些励志的影视或者文章，不要当作消遣；学会思考人生，学会感悟人生
[MongoDB学习笔记三]MongoDB分片 bit1129 mongodb
MongoDB的副本集(Replica Set)一方面解决了数据的备份和数据的可靠性问题，另一方面也提升了数据的读写性能。MongoDB分片(Sharding)则解决了数据的扩容问题，MongoDB作为云计算时代的分布式数据库，大容量数据存储，高效并发的数据存取，自动容错等是MongoDB的关键指标。本篇介绍MongoDB的切片(Sharding) 1.何时需要分片 &nbs
【Spark八十三】BlockManager在Spark中的使用场景 bit1129 manager
1. Broadcast变量的存储，在HttpBroadcast类中可以知道 2. RDD通过CacheManager存储RDD中的数据，CacheManager也是通过BlockManager进行存储的 3. ShuffleMapTask得到的结果数据，是通过FileShuffleBlockManager进行管理的，而FileShuffleBlockManager最终也是使用BlockMan
yum方式部署zabbix ronin47 yum方式部署zabbix
安装网络yum库#rpm -ivh http://repo.zabbix.com/zabbix/2.4/rhel/6/x86_64/zabbix-release-2.4-1.el6.noarch.rpm 通过yum装mysql和zabbix调用的插件还有agent代理#yum install zabbix-server-mysql zabbix-web-mysql mysql-
Hibernate4和MySQL5.5自动创建表失败问题解决方法 byalias J2EE Hibernate4
今天初学Hibernate4，了解了使用Hibernate的过程。大体分为4个步骤： ①创建hibernate.cfg.xml文件 ②创建持久化对象 ③创建*.hbm.xml映射文件 ④编写hibernate相应代码在第四步中，进行了单元测试，测试预期结果是hibernate自动帮助在数据库中创建数据表，结果JUnit单元测试没有问题，在控制台打印了创建数据表的SQL语句，但在数据库中
Netty源码学习-FrameDecoder bylijinnan java netty
Netty 3.x的user guide里FrameDecoder的例子，有几个疑问： 1.文档说：FrameDecoder calls decode method with an internally maintained cumulative buffer whenever new data is received. 为什么每次有新数据到达时，都会调用decode方法？ 2.Dec
SQL行列转换方法 chicony 行列转换
create table tb(终端名称 varchar(10) , CEI分值 varchar(10) , 终端数量 int) insert into tb values('三星' , '0-5' , 74) insert into tb values('三星' , '10-15' , 83) insert into tb values('苹果' , '0-5' , 93)
中文编码测试 ctrain 编码
循环打印转换编码 String[] codes = { "iso-8859-1", "utf-8", "gbk", "unicode" }; for (int i = 0; i < codes.length; i++) { for (int j
hive 客户端查询报堆内存溢出解决方法 daizj hive 堆内存溢出
hive> select * from t_test where ds=20150323 limit 2; OK Exception in thread "main" java.lang.OutOfMemoryError: Java heap space 问题原因： hive堆内存默认为256M 这个问题的解决方法为：修改/us
人有多大懒，才有多大闲 (评论『卓有成效的程序员』) dcj3sjt126com 程序员
卓有成效的程序员给我的震撼很大，程序员作为特殊的群体，有的人可以这么懒，懒到事情都交给机器去做，而有的人又可以那么勤奋，每天都孜孜不倦得做着重复单调的工作。在看这本书之前，我属于勤奋的人，而看完这本书以后，我要努力变成懒惰的人。不要在去庞大的开始菜单里面一项一项搜索自己的应用程序，也不要在自己的桌面上放置眼花缭乱的快捷图标
Eclipse简单有用的配置 dcj3sjt126com eclipse
1、显示行号 Window -- Prefences -- General -- Editors -- Text Editors -- show line numbers 2、代码提示字符 Window ->Perferences，并依次展开 Java -> Editor -> Content Assist，最下面一栏 auto-Activation
在tomcat上面安装solr4.8.0全过程 eksliang Solr solr4.0后的版本安装 solr4.8.0安装
转载请出自出处： http://eksliang.iteye.com/blog/2096478 首先solr是一个基于java的web的应用，所以安装solr之前必须先安装JDK和tomcat，我这里就先省略安装tomcat和jdk了第一步：当然是下载去官网上下载最新的solr版本，下载地址
Android APP通用型拒绝服务、漏洞分析报告 gg163 漏洞 android APP 分析
点评：记得曾经有段时间很多SRC平台被刷了大量APP本地拒绝服务漏洞，移动安全团队爱内测（ineice.com）发现了一个安卓客户端的通用型拒绝服务漏洞，来看看他们的详细分析吧。 0xr0ot和Xbalien交流所有可能导致应用拒绝服务的异常类型时，发现了一处通用的本地拒绝服务漏洞。该通用型本地拒绝服务可以造成大面积的app拒绝服务。针对序列化对象而出现的拒绝服务主要
HoverTree项目已经实现分层 hvt 编程 .net Web C#ASP.ENT
HoverTree项目已经初步实现分层，源代码已经上传到 http://hovertree.codeplex.com请到SOURCE CODE查看。在本地用SQL Server 2008 数据库测试成功。数据库和表请参考：http://keleyi.com/a/bjae/ue6stb42.htmHoverTree是一个ASP.NET 开源项目，希望对你学习ASP.NET或者C#语言有帮助，如果你对
Google Maps API v3: Remove Markers 移除标记天梯梦 google maps api
Simply do the following: I. Declare a global variable: var markersArray = []; II. Define a function: function clearOverlays() { for (var i = 0; i < markersArray.length; i++ )
jQuery选择器总结 lq38366 jquery 选择器
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
基础数据结构和算法六：Quick sort sunwinner Algorithm Quicksort
Quick sort is probably used more widely than any other. It is popular because it is not difficult to implement, works well for a variety of different kinds of input data, and is substantially faster t
如何让Flash不遮挡HTML div元素的技巧_HTML/Xhtml_网页制作刘星宇 html Web
今天在写一个flash广告代码的时候，因为flash自带的链接，容易被当成弹出广告，所以做了一个div层放到flash上面，这样链接都是a触发的不会被拦截，但发现flash一直处于div层上面，原来flash需要加个参数才可以。让flash置于DIV层之下的方法，让flash不挡住飘浮层或下拉菜单，让Flash不档住浮动对象或层的关键参数：wmode=opaque。方法如下：
Mybatis实用Mapper SQL汇总示例 wdmcygah sql mysql mybatis 实用
Mybatis作为一个非常好用的持久层框架，相关资料真的是少得可怜，所幸的是官方文档还算详细。本博文主要列举一些个人感觉比较常用的场景及相应的Mapper SQL写法，希望能够对大家有所帮助。不少持久层框架对动态SQL的支持不足，在SQL需要动态拼接时非常苦恼，而Mybatis很好地解决了这个问题，算是框架的一大亮点。对于常见的场景，例如：批量插入/更新/删除，模糊查询，多条件查询，联表查询，

按字母分类： A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 其他