深圳大学Web实验一：HTML标签应用

目的：使用HTML，构思并设计、实现个人主页（或品牌、事件主页）

要求：1.综合应用各种HTML标签

           2.页面内容设计合理

方法、步骤：

        要完成本实验，依据实验要求进行分解，需要完成的实验步骤是：

1.页面主题构思

        假设现在是2023年下半年，你参加了一个夏令营。夏令营主办方在收集各人的主页链接，以便让同学们能更快、更好互相了解。那么，你计划如何设计、实现你的个人主页？

        或者你打算设计的是某个品牌或物品、事件等的主页，那么也请给出你的动机说明。

        或者，你调研作业调研了某个网站，那么，请使用HTML，仿照设计该网站

2.主页内容设计

        针对前述主题构思，你的实现设计思路是什么，请简要说明网页的主要结构。

3.HTML标签的使用说明

        请使用列表的形式，列举你使用了几种不同的HTML标签及标签属性。

实验过程及内容：

1.页面主题构思

        我的个人主页将由三个网页组成。其中有一个导航页和两个二级网页。导航页内有少量信息，主要功能是指向导航页和社交媒体主页。一个导航页将给出我个人基本信息和学业方面的信息，概述我的专业技能和获得过的奖项。另一个导航页将给出关于我个人娱乐和生活的一些信息，比如说参加辩论活动的经历，在bilibili弹幕视频网上发布的视频，和闲暇时间写过的小说。

        导航页应该营造静谧浪漫的感觉，清晰地给出跳转链接，并不需要用太多的内容分散注意力。

        给出学业信息的页面需要最简单直接地进行资料铺陈，与此同时用清晰的布局和图标来划分内容引导视线。

        给出生活娱乐信息的页面可以花更多篇幅来描述我个性的方方面面，不需要拘泥于页面大小的限制。

        与此同时，三个页面需要互相链接，个人头像也应该经常出现，来显示这是属于我的个人主页。

2.主页内容设计

（1）导航页“欢迎来到苏羽的网上港湾”

    以下为结果贴图：

        个人主页是一个人思想和经历在互联网上的集中体现，是在互联网上冲浪之后，带着一身疲劳的休憩之所，是远游航船返程时停泊的精神港湾。既然是“精神港湾”，就需要用安静柔和的风格来抚慰疲劳和忧愁。航船在大海上航行，精神则可以在无边无际的浩瀚互联网空间中航行。因此配图选择幽暗深邃的蓝色星空，体现精神在无垠的网络宇宙中畅游。

        导航页要柔和，首先，网页中出现的形状不能有太多棱角；其次，颜色也不能对比冲突过于强烈。因此，导航页的所有图形都使用圆角矩形，用border-radius参数定义一个圆角的div块级元素，然后定义圆角矩形边框。用background-color: rgba(255,255,255,);命令将div块级元素的背景设置为半透明的白色。文字和图形都使用不同透明度白色可以降低视觉的冲突感，同时确保在蓝黑色调的背景下依旧清晰。

        中间“苏羽的港湾”字样用两个div块级元素嵌套而成。外层定义一个圆角矩形的白色边框，内层是一个包含文字的，背景为75%透明度白色的块级元素。使用margin: 0 auto命令来实现水平居中，通过调整padding来实现竖直居中。内层元素将line-height参数和height参数调整为相同，实现文字竖直居中。

        圆形头像也是通过调整border-radius参数实现。把该参数的值和div块级元素长宽调整为相同的值。即，圆角半径等于边长。这就获得了一个圆形的块级元素，然后把背景图片设置为不重复，就获得了一个裁剪为圆形的头像。

        添加诗句作为装饰，并且营造意境。

        诗句下方用<hr>标签定义一条蓝色细分割线，作为视觉上的划分。蓝色与主页配色搭配，同时线宽很细，让分割线不会带来太强的突兀感。

        底下是三个链接。中间的图片链接点击后跳转到我的QQ空间，左右两个文字链接分别跳转到两个二级页面。文字链接的设计方案与中间“苏羽的港湾”类似，都是使用圆角矩形背景和白色文字。注意到这里的白色背景透明度更高，为了和中间的标题字样做出区分，不喧宾夺主。

        给链接加上样式。这里我们用:hover选择器来选择鼠标指针浮动在上面的元素，将颜色设置为深天蓝色。然后在超链接的CSS样式内用text-decoration: none;语句来去掉下划线。这样就得到了干净无下划线的超链接，鼠标放到超链接上时，文字颜色会变成深天蓝色提示可以被点击。

        总体上，是一个风格安静，十分简洁的导航页。

（2）二级页面“求索历程”

        这个页面是介绍了我的基本信息、专业技能和获得过的荣誉。采用多行多列排版样式，最外层是块级元素total和foot；total内嵌套有块级元素left和main；main内嵌套有块级元素intro和area；area内嵌套有块级元素skill和award。

        本页主要使用蓝绿白配色。文字使用与底色对比度较高的颜色来确保清晰易读。一些文字用行内标签定义特殊格式，目的是视觉上的强调。

        块级元素total：

        规范了页面整体大小，没有具体内容，仅排版用。

        块级元素left：

        左侧一栏与主页的蓝色契合，不承载很多信息。上方的蓝底圆形头像由两个块级元素嵌套而成，具体实现方式参照导航页。调整形状的关键是border-radius参数。调整位置的关键是margin和padding参数。为了更好地观察内外边距，可以在浏览器内使用ctrl+shift+C打开开发者视图。

        下面的返回由一个div元素实现。先用<img>标签放置一个返回的标志图片，再用<a>标签定义一个跳转到导航页的超链接。

        块级元素main：

        设置一个浅色背景，装饰分块接缝（实际上是main元素露出来的部分）。同样没有承载内容，仅排版用。

        块级元素intro：

        内嵌8个div用来进行格式排版，项目和内容的倾斜、加粗分别用<i>和<b>标签定义。

        块级元素area：

        仅排版用。

        块级元素skill：

        左上角插入一个学士帽的图像，然后用intro元素中相同的div进行文字排版。然后插入一个浮动窗口，打开我的CSDN主页。

        橙色字体用<span>标签定义，修改行内部分文本样式。

        块级元素award：

        文字用类似的方法定义，通过调整margin和padding参数来排版。下方放置三个div，将背景图分别设置为三张奖状图片。然后将这三个div用position: absolute;调整为绝对定位，这样三张图片就可以互相重叠。用border-radius: 33% 10%代码对图片的四个角进行不同半径的曲线裁剪，获得特殊的边框样式。

        块级元素foot：

        用来放置一个来回左右移动的小螃蟹吉祥物。foot背景颜色很淡，为了整体协调。

        小螃蟹如下定义：

        以上块级元素都用#来定义为唯一出现的div，具有独立的id。

        还有不独立出现的块级元素class=”text”

        块级元素text：

        定义本页统一的文字格式。除了“返回”以外，其他所有文字样式和排版均由这个元素定义。各个块内的文字样式会做出少许改变，在标签内用style定义。

        比如“所获荣誉”即是在此基础上稍加改动。

（3）二级页面“沿途风光”

        本页面采取纵向排版，因此网页内容总高度会超过默认高度，以至于需要右侧滚轮。由于一张图无法获取网页全部内容，我将分多张图贴出最终结果。

        上图是网页最顶端的截图。左侧用一个div块级元素定义了一个导航栏。导航栏内放置了头像和四个超链接。

        最后一个返回超链接与上一个二级页面功能类似，即为回到“欢迎来到苏羽的网上港湾”导航页。其余三个超链接均为页内链接，点击后会跳转到本页的不同位置。

        超链接如下定义：

        右侧主页面的h3标题是超链接的目的地，如下定义：

        类似的，“网络足迹”和“妙笔生花”也定义了页内链接。点击左侧链接，页面就会自动跳转到对应内容的位置。

        左侧导航栏用代码position:fixed;固定位置，使得无论网页如何上下滚动，这个导航栏始终会出现在页面的左上角。

        右侧“辩论风采”栏目中，“那你先回答我……”一句的缩进通过定义空格实体 实现。辩题由<ul>标签定义无序列表实现。四张照片由无序列表+向左浮动实现。边框线定义为ridge3D岭线。

        “网络足迹”栏目介绍我在bilibili弹幕视频网上发布的视频。可以看见，左上角米色背景的导航栏依然在这个位置。

        底下是三个超链接，分别指向三个视频。超链接用<ol>有序列表实现。点击超链接，会在浮动窗口中打开对应的网页。

        定义超链接样式：去除下划线，默认颜色为黑色，鼠标浮动在超链接上时颜色改变为深橙色。

        鼠标放在字样上，超链接文字变色。

        注意到，各栏目间由渐变色的分割线分割。以下为分割线的部分。

        具体实现代码：

<div style="background: linear-gradient(to left,#FFFFFF,#00FF00,#FFFFFF); height: 2px;">div>

        使用定义渐变背景、高度值很小的div来当作分割线使用。

        “妙笔生花”栏目，放了一篇我中学时期写的小说。为什么要放一篇这么长的文章，为了拉长页面长度，更好地发挥出左侧导航栏页内超链接的作用。

        “从小到大……”这一行字用<pre>标签保留原始格式。

        下面的小说文段用<p>标签定义，起到划分段落和首行缩进的作用。

        其余部分。

        其余部分。

        到达网页底部。右下角是一个回顶部的页内超链接。单击后跳转到网页顶部。

        此外，以上三个网页中，都通过<audio>标签给网页添加了背景音乐。

3.HTML标签的使用说明

标签	功能
< html>	告知浏览器这是HTML文档
	HTML文档头部元素的容器
苏羽的港湾 春江潮水连海平 海上明月共潮生 沿途风光 求索历程 沿途风光： 辩论风采 网络足迹 妙笔生花 返回 辩论风采 你问我意义是什么，     那你先回答我，什么是“意义”？ 你是否思考过以下问题： 正确和善良发生冲突该如何抉择？ 温饱是不是谈道德的必要条件？ 人性本善还是人性本恶？     …… 深入思考后，你会发现：      意义正是由不断探寻产生的！ 网络足迹 来看看我的bilibili主页吧！ 小时候做的Scratch游戏 小众游戏的花式玩法 曾经出演过的舞台剧 妙笔生花 从小到大 总喜欢……用文字抒发心意。 月色下 月色如水，给他赤裸的上身披上一层乳白色的薄雾，使那一道道狰狞的如暗红色游蛇的伤疤变得不那么骇人。 他双膝跪在故乡的泥土上，目光平行地望向远方，交会于一个未知的遥远的地方。上身笔挺地直立，甚至几乎没有呼吸带来的细微起伏，在这柔和的月色下，仿佛一尊古铜的雕塑。 他曾是个威名远扬的武士，他的目光如鹰一般锐利，他的体魄如熊一般健壮。他的刀刃让无数脑满肠肥衣冠禽兽者畏惧，他的足迹令无数在泥沼中挣扎的人苦苦期盼。 他在罪恶鲜血铸就的豪华住宅上飞驰，身影融入沉沉的夜色中。他踏在屋檐上的脚步比灵活的家猫还要轻巧。他挥起刀刃的动作比虎豹的扑击还要高效。 他将沉重的粮袋扔到贫民破旧屋舍的阶前，沉闷的响声比最负盛名的乐伎用最华美的名琴演奏的乐曲还要动听，那溅起的肮脏的尘土好似祭拜神明时袅袅的烛烟。 他是个没有感情的杀手，一切阻挡在他前进道路上的狂妄之徒都注定落得被一刀两段的下场。他又是感情最细腻丰富的哲人，因为他心系天下苍生。他的剑术，他的身法，是他实现梦想的寄托。 他一无所有，因为他没有广袤的田宅，没有前呼后拥的仆从，更没有一句话让天下抖三抖的威名。他拥有一切，因为他身怀绝高的剑术身法，心存大志，又有那孤独的夜幕作伴。 但他老了。 当他早上在那清澈的水塘中看到自己第一缕白发时，他竟一时说不出话来。一股淡漠的悲哀涌上他的心头，他长久面无表情的脸上泛起了一丝无奈，还有一丝广袤和荒凉。 他还记得他小时候出生的地方，在被烽火燃尽之前那里有一大片水稻，一到秋天，漫山遍野的金黄昭示着沉甸甸的财富，他小时候就在这稻田里玩耍，做着每一个孩童都会的嬉戏。 他盯着那一缕银丝，指尖轻轻摩挲着它，一挥手让它飘入水塘。水塘还是那么平静，而他的年华在这澄澈之中渐渐流逝。他知道他的年轻时代已经过去，他将很快没有狂妄不可一世的勇气。 离开这么久，他想家了。 似有万千点精光迸起，只是一瞬，那苍白的光芒便隐于炽热的肉体。纤薄的冰冷被殷红而粘稠的液体沾染，仿佛是万千年来人们能想到的给它们的最好的归宿。 如游龙一般，红色的印痕蜿蜒地缠绕在那寒光上，一点点遮蔽了它的锋芒。曾经这一幕无数次地出现过，每次都会伴随着兴奋的龙吟，但是这一次，那白光静默无声。 武士的剑，都是有灵性的。更不用说它跟了他几十年。它知道，它已荣光不再，如今，将执行它最后的使命。暗红的雨洒落在初放野花纤柔的花蕊上，将使它轻轻地晃动着。 剑眉甚至并没有动一动，眸光里依旧反射着皎洁的月色，平静如那故乡广袤的湖泊。他早已习惯柔软的皮肉被锐器割开的感觉，健壮的肌肉执拗地收缩着，将那寒芒一寸寸地向里。 他的肉体可以披荆斩棘，他的精神可以摧金断水。但他已经失去了荣誉。如巨石般坚韧的血肉如今在那死亡的使者面前被轻轻地分开，寒夜的风渐渐地渗入他的脏腑。 辽阔如崇山峻岭的脊背爆开一道火山，恶魔的吻痕中推出如苍穹之柱一般的利刃。冰冷的空气涌入他的每一寸血管，推挤着剩下不多的温热，剥夺着仅存的眷恋。 他平静而肃穆地跪在月夜里。 他清楚地记得他第一次失败是什么时候。往往，在对决中失败意味着武士生命的终结，对方会用自己的利刃刺穿自己的躯体，给对手最大的尊重和敬意。但那个人没有。 他比自己身法更快，出刀更准，力道更狠，也更残忍。 仿佛是在嘲笑他年轻时的盛名，亦或是他因年岁渐长而渐渐衰弱的实力，更像是在恶毒地报复，给他施以最大的侮辱。他没有杀他。 他只是用刀背轻轻地敲打着他的脖颈，然后潇洒地转身离去，留下已经毫无力气反抗的武士。 按理说，他应该自杀。但他没有。他心中有一股火，想要燃遍这个国度。世上还有那么多伪饰和谎言，还有那么多压迫和不公，还有那么多鄙陋和卑微。他要去一一消灭。 但他老了，他渐渐无法在达官贵人的警卫队手里全身而退，无法在皇宫中像一只夜蝠一般无声穿行，他也再无法拈起一朵春日里盛开的雏菊，欣赏它在和风中摇曳的身姿。 他们都在嘲笑自己的失败，仿佛过去的所有努力都会因为那一声刀背与肉体的钝响而消散殆尽。 是时候挽回自己的荣誉了。 微漠的淡红染上那道寒光，顺着刻着菊花的纹路一点点蔓延，浸透了所有礼仪用的花纹。这些花纹见证着所有的褒奖和赞扬，但更令它兴奋的是与跳动的脖颈亲密接触，看着一个个活生生的人变为地上蠕动的黄泉旅客，它的名字将刻在一个新的骸骨上。 鲜艳的蝴蝶，从罪恶的菊瓣上翩翩飞起。 残存的组织妄图修补着破碎的躯体，它们早就有了充足的经验。但这次不同，以往每一次，都有一个无比强大的无形的存在支撑起哪怕再残缺的肉体，让它像一个杀戮机器高强度地工作直到肃清所有的对手，那些偶然失误造成的伤痕不过是战士勇敢的勋章， 粘连起粗糙胡茬的污秽彰显着他卓越的才华，白刃上恰到好处的印迹更宛若一件工巧的艺术品。 静谧的月夜下，他的心脏在做着最后无谓的挣扎。但他的意念孤傲地站立着，显得格外的冷静和淡然。他完成了自己，这是他最后的抉择。 他闭上了自己的双眼，故乡的土地不再留存在他的心中，那一辈子没弯下的倨傲的腰杆，仍笔挺地立着。 他很明白，凭自己一介武夫的力量改变不了什么。但他既然手中握着刀，就握着一份力量，驱使他去做他该做的事情。他只希望有一天，穷人不再依靠他这样的武士就能吃饱饭，他只希望有一天，人们不再需要自裁来维持自己的尊严。 待到日后，粗糙的皮肤化为灰烬，强健的肌肉尽作尘土，苍凉的白骨与那峻崎的寒芒一起，并作一个雕塑。 他终究没能在这个世界上留下什么痕迹。富人无暇再仇恨他，继续沉溺于声色之中。受他帮助的贫民从未见过他的面目，也更不会留恋他。只是他心中的一股火，伴着许许多多志同道合的火苗一起，在暗黑的深渊里种下了埋火，在看不见的地方熊熊燃烧。 湖水涨了又落，变得污浊又渐渐澄清。秋菊开了一季又一季。他出生的老屋也被推倒，盖上了华丽的大楼。 又到了稻花香满山的时节。 回顶部 求索历程： 返回 姓名：赵宇轩 性别：男 年龄：20 学习：本科 学校：深圳大学 QQ：2249676534 微信：sysxyzddtjs b站：suayu苏羽 熟练使用 C\C++、Java、Matlab等语言编写代码 应用 Qt、OpenGL框架开发程序解决问题 能够在Linux环境下进行软件开发 掌握 Word、PPT、Excel、Visio、Access等多种办公软件的使用 来看看我的CSDN主页吧： 所获荣誉： 荣誉一 荣誉二 荣誉三 你可能感兴趣的:(html,css) 关于html元素的标签 Sylvia_703 前端知识html前端 一、html元素标签语义化提到html元素的标签，第一个想到的就是标签语义化。现在来聊聊什么是标签语义化：它指的是使用具有明确意义的html元素的标签来组织和描述网页内容，以便更直观地表达内容的含义和结构，让标签的用途和作用更加明确。通俗来讲就是用正确的标签做正确的事情。语义化的优点如下：提高代码的可读性：使用语义化标签可以让开发者和阅读代码的人更容易理解网页的结构和内容。优化搜索引擎（SEO）： 解决uniapp视频层级太高的问题 云123321 uniappuni-app 刷新可拖动//配置公共方法exportdefault{data(){return{videoUrl:'https://***',weixin_moveable_x:320,weixin_moveable_y:450};},computed:{videoHTML(){return``}},methods:{wx_pro_refresh(){var_this=this;},}}; 午课写字 - 2018年11月全集 钮海津 钮海津，午课写字午课写字-2018年11月全集https://book.yunzhan365.com/lews/przp/index.html 扑捉一只耿鬼（HTML文件） Coisini_甜柚か 游戏web前端htmlcss 图例：代码：耿鬼body{background:#fff;font-family:'Comfortaa',sans-serif;}*{box-sizing:border-box;}*:before,*:after{content:'';position:absolute;}main{width:400px;height:400px;margin:auto;text-align:center;}.g 前端实现奥运五环图标 小刘| 前端 htmlDocumentcssbody{display:flex;justify-content:center;height:100vh;align-items:center;transform-style:preserve-3d;}.olympic-rings{width:800px;height:400px;display:flex;flex-wrap:wrap;justify-content Django模板语法及render，HttpResponse，redirect 柒拾霜染 djangopython后端 建立path，建立viewdefreview(request):importtime'''模板语法'''num1=22num2=11strl='123'array=['a','b','c']dictl={'h':'head','b':'body','c':'content'}returnrender(request,'grammar.html',{'n1':num1,'n2':num2,'n3': django中HttpResponse render redirect 使用和区别 Hou_Monkey HttpResponserenderdjango中HttpResponserender和redi面试题你对HttpResponserender的理解 django中HttpResponserenderredirect使用和区别在django的views模块中把业务逻辑发送前端（有转发和重定向）1.要想使用他们先导入HttpResponse：它返回到前台传入一个字符串，发送给浏览器。render：可以传递三个参数1request参数，2.渲染的html页面，3.带数据的值。renderct:url参数跳转到指定页面 Django基础必备三件套: HttpResponse 、render、redirect 大城市的小人物 Djangodjangohtml 1、HttpResponse:它的作用是内部传入一个字符串参数,然后发给浏览器fromdjango.httpimportHttpResponsedefindex(request):returnHttpResponse(‘ok’)2、render:可以接收三个参数,一是request参数,二是待渲染的html模板文件,三是保存具体数据的字典参数fromdjango.shortcutsimportre scrapy学习笔记0828-下 github_czy scrapy学习笔记 1.爬取动态页面我们遇见的大多数网站不大可能会是单纯的静态网站，实际中更常见的是JavaScript通过HTTP请求跟网站动态交互获取数据（AJAX），然后使用数据更新HTML页面。爬取此类动态网页需要先执行页面中的JavaScript代码渲染页面，再进行爬取。在这里我们采用scrapy官方推荐的Splash渲染引擎，我们需要通过docker来安装splash并使其运行起来，这里就暂时不展开，安装 前端 css基础 湫風如兮 css 1.什么是css是一组样式设置的规则，用于控制页面的外观样式2.为什么使用css1.实现内容与样式的分离，便于团队开发2.样式复用，便于网站的后期维护3.页面的精确控制，让页面更精美3.css作用1.页面外观美化2.布局和定位4.css应用方式也称为CSS引用方式，有三种方式：内部样式、行内样式、外部样式4.1.内部样式在title标签下面建一个style标签写css代码优点：在同一个页面内部便于 python爬虫：通过DBLP数据库获取数据挖掘顶会KDD在2023年的论文收录和相关作者信息 千里澄江 python数据分析python爬虫算法数据挖掘数据分析 Task1读取网站主页整个页面的html内容并解码为文本串（可使用urllib.request的相应方法），将其以UTF-8编码格式写入page.txt文件。Code1importurllib.requestwithurllib.request.urlopen('https://dblp.dagstuhl.de/db/conf/kdd/kdd2023.html')asresponse:html=r 基础一：箭头函数和普通函数的this区别 适应653 javascript 一、在前端HTML中，普通函数中的this指向window对象的情况通常发生在以下几种情况下：1、全局作用域:在全局作用域中定义的普通函数中，this指向window对象：functionmyFunction(){console.log(this===window);//true}myFunction();2、事件处理函数:当事件处理函数直接作为HTML元素的属性值时，this指向触发事件的元素。 Unity 打包exe时添加管理员权限 qq_38513810 unity https://www.bilibili.com/read/cv19442832/https://www.cnblogs.com/WH-Work/p/15874391.html uniapp 小程序微信登录 害的人 vue小程序 啥也不说先上效果图html代码申请获取以下权限获得你的公开信息(昵称，头像、地区等){{loginInfo.openid!=""&&loginInfo.openid!=undefined?"已授权":"小程序授权"}}js代码import{mapMutations}from'vuex'exportdefault{data(){return{code:"",SessionKey:'',encrypt go语言爬虫解析html,Go 函数特性和网络爬虫示例 京东手机 go语言爬虫解析html 爬取页面这篇通过网络爬虫的示例，来了解Go语言的递归、多返回值、延迟函数调用、匿名函数等方面的函数特性。首先是爬虫的基础示例，下面两个例子展示通过net/http包来爬取页面的内容。获取一个URL下面的程序展示从互联网获取信息，获取URL的内容，然后不加解析地输出：//输出从URL获取的内容packagemainimport("fmt""io""net/http""os""strings")fun chr(61)返回字符 知识分享share <?phpheader('Content-Type:text/html;charset=utf-8');echochr(61)."\n";echochr(061)."\n";echochr(0x66)."\n";echo:=1f MyBatis 环境搭建 2019-03-25 琴匣自鸣 MyBatis各版本下载地址点击Spring各版本下载地址点击Mybatis详解http://www.mybatis.org/mybatis-3/zh/configuration.html记录下犯过的错误1.驱动driver单词写错2.数据库驱动大小写不对3.url地址写错4.log4j需要配置文件没加初步搭建环境，准备工作：Mybatis.jarLog4j.jar数据库驱动jar注意Mybati 使用css3实现【水波纹扩散效果】 自不量力的A同学 css3前端css 使用css3实现【水波纹扩散效果】在CSS3中，我利用::before和::after伪元素以及动画（animation）来创建一个简单的水波纹扩散效果。下面是一个基础的示例：Html.container{position:relative;overflow:hidden;}.wave-effect{position:absolute;top:0;left:0;width:100%;height: 使用css实现水球效果 ——jinqiang12345 htmlcss动画 通过在制定overflow：hidden的元素上添加非常大圆形，而且圆形设置圆角，并不断滚动，数量多了就可以显示出水波效果@keyframesroll{form{transform:rotate(0deg);}to{transform:rotate(360deg);}}.shuiqiu{width:200px;height:200px;border-radius:50%;border:5pxsol css特效之水滴效果 Zhu Xiaopi css特效集合csshtml css特效之水滴效果想看看效果：html代码：<divclass=" vue3+ts+canvas项目中图片进行矩形批注 嘴巴嘟嘟 vuejavascript前端vue.js canvas是什么？一个html5支持的新标签，见名知意，canvas就是画板的意思，可以在canvas上画画。css画三角形很简单，但是要画五角星呢，不妨试试canvas（文档有教学）今天我们做的是在图片中画矩形，顾名思义就是模仿批注功能。看效果：废话不多说直接上代码删除import{ref,reactive,onMounted}from"vue";constflag=ref(false);co CSS 的使用方式，CSS的基本结构 x星默y 三块基石前端css CSS的使用方式CSS用于描述元素外观，即元素是什么模样也称为元素样式它该怎么用呢?解答之前先来思考几个问题内容是什么?有意义的存在CSS不是吗?进一步来说，CSS不就是内容吗?对于内容该怎么做?使用元素来装载我使用CSS是在做什么?描述元素的外观进一步讲，不就是相关的信息吗?对于相关的信息该怎么做?使用元素的属性来存储另外，这件事说明了什么?有着明确的目标那该怎么做？单独成文因此，使用CSS的方 群辉docker前端部署失败处理2 脚大江山稳 docker前端容器 失败的原因是需要提升权限chmod-R755/usr/share/nginx/htmlchown-Rroot:root/usr/share/nginx/htmlnginx-sreloaddockerrestartdfdgdemo_vue构建镜像处理方式RUNchmod-Ra+rw/usr/share/nginx/html CSS实现水滴效果图 N201871643 热门相关技术分享css前端 CSS实现水滴效果图目录一、引言二、定义三、常用属性四、事件五、实操步骤一、引言水滴效果是一种常见的动画效果，常用于网页设计中。通过使用CSS技术，我们可以实现这种效果，为网页增添生动和吸引力。本文将详细介绍如何使用CSS实现水滴效果，并提供相关技术分析。二、定义水滴效果：指在网页上呈现出水滴从上方滴落的效果，通常伴随着水波纹扩散的动画效果。CSS：层叠样式表（CascadingStyleShee 微信小程序iconfont图标字体解决方案 kikiki4 此文演示如何在小程序上使用iconfont字体图标。使用说明登录阿里巴巴iconfont.cnimage.png新建项目image.png点击icon收藏image.png加入到test项目中image.png下载到本地解压image.png生成代码image.png复制iconfont.css到xxx.wxssimage.png替换iconfont.css中的@font-face为上面的生成代码 微信小程序学习记录（2）视图层之wxml（数据绑定大括号，wx:for,wx:if） Spider_man_ 微信小程序 1，数据绑定WXML中的动态数据均来自对应Page的data。用双大括号将变量包起来，可以作用于(参考：https://www.w3cschool.cn/weixinapp/weixinapp-data.html)内容{{message}}Page({data:{message:'HelloMINA!'}})组件属性（需要在双引号之内）Page({data:{id:0}})控制属性（需要早双引号之 opencv绘图函数 Sun-Flower 图像处理opencvopencv绘图函数cvPutTextcvFillPolycvEllipseB 在OpenCV中，有几个基本的绘图函数，如果自学的话，可以在网上很多的函数参数解析以及代码。官方参考网站：http://wiki.opencv.org.cn/index.php/Cxcore%E7%BB%98%E5%9B%BE%E5%87%BD%E6%95%B0#DrawContourshttp://www.opencv.org.cn/opencvdoc/2.3.2/html/doc/tutori 编程小白如何成为大神？大学新生的最佳入门大神级攻略 一禅（OneZen） 随笔经验分享其他笔记pythonjava 编程语言选择1.选择一种编程语言入门：Python：Python是初学者的绝佳选择。它语法简单、易读易写、用途广泛，广泛应用于数据科学、机器学习、Web开发、自动化测试等领域。JavaScript：对于对Web开发感兴趣的学生，JavaScript是必学的。它在前端开发中占据主导地位，并且与HTML和CSS结合使用，构建动态网页。Java：Java是一种面向对象的编程语言，广泛应用于企业级应用和A github搜索html源码,三款十分简洁的自适应多引擎搜索主页源码_GitHub开源项目 PableetoX github搜索html源码 这次分享的三款搜索引擎主页源码均来源于GitHub开源项目，页面都是属于简约、精美风格，功能也是很强大，支持二次开发的哦，你可以充分发挥自己的审美，为它们设计一套“皮肤”。virzs_Search搜索导航这个第一款是我比较喜欢的一款，因为它在主页自定义方面做的最优秀，能够在不改动代码的情况下DIY属于自己的风格，在下图中，可以看见都是对导航主页UI的一些设置项，背景支持上传、使用必应壁纸、UI风格 六大CPU体系结构：X86、 ARM、MIPS、PowerPC、Sparc、Alfa发展 Sophonist 服务器市场早已不是单一产品的竞争，而是整个生态的竞争。ARM架构在生态系统上的缺失，成为其屡次失败的重要原因，这一点在短期内也是很难弥补的。参考：http://m.elecfans.com/article/678121.html全世界99%的智能手机和平板电脑都采用ARM架构ARM处理器的市场份额超过90%ARM的商业模式是开放的，任何厂商都可以购买授权，所以未来并不是Intelvs.ARM，而是 插入表主键冲突做更新 a-john 有以下场景： 用户下了一个订单，订单内的内容较多，且来自多表，首次下单的时候，内容可能会不全（部分内容不是必须，出现有些表根本就没有没有该订单的值）。在以后更改订单时，有些内容会更改，有些内容会新增。 问题： 如果在sql语句中执行update操作，在没有数据的表中会出错。如果在逻辑代码中先做查询，查询结果有做更新，没有做插入，这样会将代码复杂化。 解决： mysql中提供了一个sql语 Android xml资源文件中@、@android:type、@*、？、@+含义和区别 Cb123456 @+@?@* 一.@代表引用资源 1.引用自定义资源。格式：@[package:]type/name android：text="@string/hello"   2.引用系统资源。格式：@android:type/name     android:textColor="@android:color/opaque_red" 数据结构的基本介绍 天子之骄 数据结构散列表树、图线性结构价格标签 数据结构的基本介绍 数据结构就是数据的组织形式，用一种提前设计好的框架去存取数据，以便更方便，高效的对数据进行增删查改。正确选择合适的数据结构，对软件程序的高效执行的影响作用不亚于算法的设计。此外，在计算机系统中数据结构的作用也是非同小可。例如常常在编程语言中听到的栈，堆等，就是经典的数据结构。   经典的数据结构大致如下：   一：线性数据结构 (1)：列表 a 通过二维码开放平台的API快速生成二维码 一炮送你回车库 api  现在很多网站都有通过扫二维码用手机连接的功能，联图网(http://www.liantu.com/pingtai/)的二维码开放平台开放了一个生成二维码图片的Api,挺方便使用的。闲着无聊，写了个前台快速生成二维码的方法。        html代码如下:(二维码将生成在这div下) ? 1  &nbs ImageIO读取一张图片改变大小 3213213333332132 javaIOimageBufferedImage package com.demo; import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; import javax.imageio.ImageIO; /** * @Description 读取一张图片改变大小 * @author FuJianyon myeclipse集成svn（一针见血） 7454103 eclipseSVNMyEclipse                                  &n 装箱与拆箱----autoboxing和unboxing darkranger J2SE 4.2　自动装箱和拆箱 基本数据(Primitive)类型的自动装箱(autoboxing)、拆箱(unboxing)是自J2SE 5.0开始提供的功能。虽然为您打包基本数据类型提供了方便，但提供方便的同时表示隐藏了细节，建议在能够区分基本数据类型与对象的差别时再使用。 4.2.1　autoboxing和unboxing 在Java中，所有要处理的东西几乎都是对象(Object) ajax传统的方式制作ajax aijuans Ajax //这是前台的代码 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+ 只用jre的eclipse是怎么编译java源文件的？ avords javaeclipsejdktomcat eclipse只需要jre就可以运行开发java程序了，也能自动 编译java源代码，但是jre不是java的运行环境么，难道jre中也带有编译工具？ 还是eclipse自己实现的？谁能给解释一下呢问题补充：假设系统中没有安装jdk or jre，只在eclipse的目录中有一个jre，那么eclipse会采用该jre，问题是eclipse照样可以编译java源文件，为什么呢？ &nb 前端模块化 bee1314 模块化 背景： 前端JavaScript模块化，其实已经不是什么新鲜事了。但是很多的项目还没有真正的使用起来，还处于刀耕火种的野蛮生长阶段。   JavaScript一直缺乏有效的包管理机制，造成了大量的全局变量，大量的方法冲突。我们多么渴望有天能像Java（import），Python (import)，Ruby(require)那样写代码。在没有包管理机制的年代，我们是怎么避免所 处理百万级以上的数据处理 bijian1013 oraclesql数据库大数据查询 一.处理百万级以上的数据提高查询速度的方法：        1.应尽量避免在 where 子句中使用!=或<>操作符，否则将引擎放弃使用索引而进行全表扫描。         2.对查询进行优化，应尽量避免全表扫描，首先应考虑在 where 及 o mac 卸载 java 1.7 或更高版本 征客丶 javaOS 卸载 java 1.7 或更高 sudo rm -rf /Library/Internet\ Plug-Ins/JavaAppletPlugin.plugin 成功执行此命令后，还可以执行 java 与 javac 命令 sudo rm -rf /Library/PreferencePanes/JavaControlPanel.prefPane 成功执行此命令后，还可以执行 java 【Spark六十一】Spark Streaming结合Flume、Kafka进行日志分析 bit1129 Stream 第一步，Flume和Kakfa对接，Flume抓取日志，写到Kafka中 第二部，Spark Streaming读取Kafka中的数据，进行实时分析   本文首先使用Kakfa自带的消息处理（脚本）来获取消息，走通Flume和Kafka的对接 1. Flume配置 1. 下载Flume和Kafka集成的插件，下载地址：https://github.com/beyondj2ee/f Erlang vs TNSDL bookjovi erlang       TNSDL是Nokia内部用于开发电信交换软件的私有语言，是在SDL语言的基础上加以修改而成，TNSDL需翻译成C语言得以编译执行，TNSDL语言中实现了异步并行的特点，当然要完整实现异步并行还需要运行时动态库的支持，异步并行类似于Erlang的process（轻量级进程），TNSDL中则称之为hand，Erlang是基于vm(beam)开发， 非常希望有一个预防疲劳的java软件, 预防过劳死和眼睛疲劳,大家一起努力搞一个 ljy325 企业应用 　非常希望有一个预防疲劳的java软件，我看新闻和网站，国防科技大学的科学家累死了，太疲劳，老是加班，不休息，经常吃药，吃药根本就没用，根本原因是疲劳过度。我以前做java,那会公司垃圾，老想赶快学习到东西跳槽离开，搞得超负荷，不明理。深圳做软件开发经常累死人，总有不明理的人，有个软件提醒限制很好，可以挽救很多人的生命。 相关新闻： （1）IT行业成五大疾病重灾区：过劳死平均37.9岁 读《研磨设计模式》-代码笔记-原型模式 bylijinnan java设计模式 声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ /** * Effective Java 建议使用copy constructor or copy factory来代替clone()方法： * 1.public Product copy(Product p){} * 2.publi 配置管理---svn工具之权限配置 chenyu19891124 SVN 今天花了大半天的功夫，终于弄懂svn权限配置。下面是今天收获的战绩。 安装完svn后就是在svn中建立版本库，比如我本地的是版本库路径是C:\Repositories\pepos。pepos是我的版本库。在pepos的目录结构 pepos    component    webapps 在conf里面的auth里赋予的权限配置为 [groups] 浅谈程序员的数学修养 comsci 设计模式编程算法面试招聘                                  浅谈程序员的数学修养 批量执行 bulk collect与forall用法 daizj oraclesqlbulk collectforall BULK COLLECT 子句会批量检索结果，即一次性将结果集绑定到一个集合变量中，并从SQL引擎发送到PL/SQL引擎。通常可以在SELECT INTO、 FETCH INTO以及RETURNING INTO子句中使用BULK COLLECT。本文将逐一描述BULK COLLECT在这几种情形下的用法。     有关FORALL语句的用法请参考：批量SQL之 F Linux下使用rsync最快速删除海量文件的方法 dongwei_6688 OS 1、先安装rsync：yum install rsync 2、建立一个空的文件夹：mkdir /tmp/test 3、用rsync删除目标目录：rsync --delete-before -a -H -v --progress --stats /tmp/test/ log/这样我们要删除的log目录就会被清空了，删除的速度会非常快。rsync实际上用的是替换原理，处理数十万个文件也是秒删。 Yii CModel中rules验证规格 dcj3sjt126com rulesyiivalidate Yii cValidator主要用法分析：  yii验证rulesit 分类： Yii yii的rules验证 cValidator主要属性 attributes ,builtInValidators,enableClientValidation,message,on,safe,skipOnError   基于vagrant的redis主从实验 dcj3sjt126com vagrant 平台: Mac 工具: Vagrant 系统: Centos6.5 实验目的: Redis主从   实现思路 制作一个基于sentos6.5, 已经安装好reids的box, 添加一个脚本配置从机, 然后作为后面主机从机的基础box   制作sentos6.5+redis的box   mkdir vagrant_redis cd vagrant_ Memcached(二)、Centos安装Memcached服务器 frank1234 centosmemcached 一、安装gcc rpm和yum安装memcached服务器连接没有找到，所以我使用的是make的方式安装，由于make依赖于gcc，所以要先安装gcc 开始安装，命令如下，[color=red][b]顺序一定不能出错[/b][/color]： 建议可以先切换到root用户，不然可能会遇到权限问题：su root 输入密码...... rpm -ivh kernel-head Remove Duplicates from Sorted List hcx2013 remove Given a sorted linked list, delete all duplicates such that each element appear only once. For example,Given 1->1->2, return 1->2.Given 1->1->2->3->3, return& Spring4新特性——JSR310日期时间API的支持 jinnianshilongnian spring4 Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC  Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API  Spring4新 浅谈enum与单例设计模式 247687009 java单例 在JDK1.5之前的单例实现方式有两种(懒汉式和饿汉式并无设计上的区别故看做一种)，两者同是私有构 造器，导出静态成员变量，以便调用者访问。 第一种 package singleton; public class Singleton { //导出全局成员 public final static Singleton INSTANCE = new S 使用switch条件语句需要注意的几点 openwrt cbreakswitch 1. 当满足条件的case中没有break，程序将依次执行其后的每种条件（包括default）直到遇到break跳出 int main() { int n = 1; switch(n) { case 1: printf("--1--\n"); default: printf("defa 配置Spring Mybatis JUnit测试环境的应用上下文 schnell18 springmybatisJUnit Spring-test模块中的应用上下文和web及spring boot的有很大差异。主要试下来差异有： 单元测试的app context不支持从外部properties文件注入属性 @Value注解不能解析带通配符的路径字符串 解决第一个问题可以配置一个PropertyPlaceholderConfigurer的bean。 第二个问题的具体实例是：     Java 定时任务总结一 tuoni javaspringtimerquartztimertask  Java定时任务总结  一.从技术上分类大概分为以下三种方式：  1.Java自带的java.util.Timer类，这个类允许你调度一个java.util.TimerTask任务;   说明：    java.util.Timer定时器，实际上是个线程，定时执行TimerTask类 & 一种防止用户生成内容站点出现商业广告以及非法有害等垃圾信息的方法 yangshangchuan rank相似度计算文本相似度词袋模型余弦相似度 本文描述了一种在ITEYE博客频道上面出现的新型的商业广告形式及其应对方法，对于其他的用户生成内容站点类型也具有同样的适用性。   最近在ITEYE博客频道上面出现了一种新型的商业广告形式，方法如下：     1、注册多个账号（一般10个以上）。     2、从多个账号中选择一个账号，发表1-2篇博文 按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他 首页 - 关于我们 - 站内搜索 - Sitemap - 侵权投诉 版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.