前端基础之HTML+CSS

tips:惨,一个月没写网页了,感觉好像忘了好多东西,写个博客压压惊!

先写一个最简单的网页,桌面右键新建一个文本文档,修改后缀名为html,妥了,网页建好了!是不是很简单!想要显示内容?简单,在新建的文本文档中输入Hello Word,再改后缀名,是不是有了!是不是很神奇!

当然,这不能算是一个网页,网页是一个包含HTML标签的纯文本文件,那么这个文件它包含HTML标签吗,如果你用网页编辑器打开它你就会发现它没有任何的HTML标签。

一、HTML常用标签

1、构建一个网页的基础标签

所有的网页都会包含三对标签: 


    
    
    
    

其中是网页的跟标签,网页所有的内容都必须写在这一对标签之中,除了文档声明,如果把html当作是一个整体,那么它就分成两个部分,head以及body。

head,译为头部,在这个部分写的是网页的标题,网页引用的脚本、样式、元信息等内容。

body,译为身体,在这个部分写的是网页的主体内容,所有呈现在你眼前的静态内容都写在这个部分。

2、标签中的内容(常用)

是双标签,定义在文档的头部,描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。

  • 是单标签,该标签可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。
  • 是双标签,该标签定义文档的标题,浏览器将其显示在网页的标题栏或状态栏上。</li> <li><link>是单标签,该标签定义文档与外部资源的关系,通常用来引用外部样式表。</li> <li><style>是双标签,该标签用于为 HTML 文档定义样式信息。</li> <li><script>是双标签,该标签用于定义客户端脚本,比如 JavaScript,可以通过 src 属性指向外部脚本文件。</li> </ul> <p style="text-indent:50px;"><strong>3、<body>标签中的内容(常用)</strong></p> <p style="text-indent:50px;"><body>是双标签,定义文档的主体,包含文档的所有内容(比如文本、超链接、图像、表格和列表等等。)</p> <p style="text-indent:50px;"><span style="color:#f33b45;">注:body中的标签有很多,回头再写一篇博客专门介绍</span></p> <h1>二、CSS常用样式</h1> <p style="text-indent:50px;"><strong>1、css是啥</strong></p> <p style="text-indent:50px;">css,<em>C</em>ascading <em>S</em>tyle <em>S</em>heets缩写,即层叠样式表,定义如何显示HTML元素,通俗的讲就是让页面变的花里胡哨。</p> <p style="text-indent:50px;"><strong>2、css的引用</strong></p> <p style="text-indent:50px;">css有三种引用方式,分别是内联样式,内部样式,外部样式。</p> <p style="text-indent:50px;">内联样式写在网页的元素标签的style属性中:</p> <pre class="has"><code class="language-html"><div style="width:100px;height:100px"></div></code></pre> <p style="text-indent:50px;">内部样式写在头部的<style>标签中:</p> <pre class="has"><code class="language-html"><style type="text/css"> div{ width: 100px; height: 100px; background-color: #000000; } </style></code></pre> <p style="text-indent:50px;">外部样式通过<link>标签引入</p> <pre class="has"><code class="language-html"><link rel="stylesheet" type="text/css" href="style.css"></code></pre> <p style="text-indent:50px;"><strong>3、选择器</strong></p> <p style="text-indent:50px;">css中的一个标准的样式由两个部分组成,选择器和声明,选择器用于选择你想要改变样式的HTML元素,声明即是属性和值,例如</p> <pre class="has"><code class="language-css">div{width:100px;height:100px;background:red}</code></pre> <p style="text-indent:50px;">div即是选择器,大括号中的即使样式。</p> <p style="text-indent:50px;">css中常用的选择器是id选择器,类选择器,元素选择器。</p> <p style="text-indent:50px;"><span style="color:#f33b45;">id选择器</span>是通过元素的id匹配到该元素,id是所有选择器中最特殊的一个选择器,因为它必须是唯一的,语法:</p> <pre class="has"><code class="language-css">#box{width:100px;height:100px}</code></pre> <p style="text-indent:50px;"><span style="color:#f33b45;">类选择器</span>是通过元素的class匹配到该元素,不同的元素可以有相同的class名,一个元素可以有多个class名,语法:</p> <pre class="has"><code class="language-css">.box{width:100px;height:100px}</code></pre> <p style="text-indent:50px;"><span style="color:#f33b45;">元素选择器</span>是通过元素的标签名匹配到该元素,语法:</p> <pre class="has"><code class="language-css">div{width:100px;height:100px}</code></pre> <p style="text-indent:50px;">除此之外还有后代选择器、子代选择器、兄弟选择器,后代选择器用<span style="color:#f33b45;">空格</span>连接,匹配该元素下的每一个后代;子代选择器用 <span style="color:#f33b45;">> </span>连接,匹配该元素的直系子代;兄弟选择器用<span style="color:#f33b45;"> + </span>连接,匹配该元素的的同级元素。</p> <pre class="has"><code class="language-css">div p{color:red} div>p{color:red} div+p{color:red}</code></pre> <p style="text-indent:50px;"><strong>4、css常用样式(写几个意思意思)</strong></p> <pre class="has"><code class="language-css">width: 100px;/*宽度*/ height: 100px;/*高度*/ color: red;/*字体颜色*/ background-color: red;/*背景颜色*/ background-image: url("xx.jpg");/*背景图片*/ font-size: 12px;/*字体大小*/ font-family: "宋体";/*字体样式*/ border: 1px solid red;/*边框*/ margin: 10px;/*外边距*/ padding: 10px;/*内边距*/</code></pre> <h1 style="text-indent:0px;">三、CSS布局</h1> <p style="text-indent:50px;">css可以分为两种布局,一种是div+css布局,另一种是table布局,前者是主流,后者逐渐被淘汰,但某些特定情况下仍旧会使用。</p> <p style="text-indent:50px;"><strong>1、盒子模型</strong></p> <p style="text-indent:50px;">盒子模型是css的核心,即整个网页是一个大盒子,大盒子中放数个中盒子,中盒子再放数个小盒子,层层嵌套成整个网页。css的盒子模型有两种:IE盒子模型和标准的W3C盒子模型。盒模型由<span style="color:#f33b45;">内容(content)</span>、<span style="color:#f33b45;">内边距(padding)</span>、<span style="color:#f33b45;">边框(border)</span>以及<span style="color:#f33b45;">外边距(margin)</span>组成。两种盒模型的区别是IE的<span style="color:#f33b45;">内容</span>部分把<span style="color:#f33b45;">内边距</span>和<span style="color:#f33b45;">边框</span>计算了进去。</p> <p style="text-indent:50px;"><a href="http://img.e-com-net.com/image/info8/b9138ed66f4a4856a7272e1c7d6b2dee.png" target="_blank"><img alt="前端基础之HTML+CSS_第1张图片" class="has" height="138" src="http://img.e-com-net.com/image/info8/b9138ed66f4a4856a7272e1c7d6b2dee.png" width="170" style="border:1px solid black;"></a></p> <p style="text-indent:50px;"><strong>2、浮动</strong></p> <p style="text-indent:50px;"><span style="color:#f33b45;">float</span>,浮动,即让盒子浮起来,专业术语就是<span style="color:#f33b45;">脱离文档流</span>。浮动之后的元素不在文档中占据位置,它会向上浮动,直到撞到父级边框或者撞到别的浮动元素,后面的元素会自动向前填补位置。<span style="color:#f33b45;">float</span>有两个值,<span style="color:#f33b45;">left</span>和<span style="color:#f33b45;">right</span>,一者向左浮动,一者向右浮动。</p> <p style="text-indent:50px;">浮动之后的元素不占文档位置,会导致其父级的高度塌陷,有三种解决办法:<span style="color:#f33b45;">给父级设置固定高度</span>、<span style="color:#f33b45;">让父级浮动</span>、<span style="color:#f33b45;">清除浮动</span>。(清除浮动回头再写一篇博客)</p> <p style="text-indent:50px;"><strong>3、定位</strong></p> <p style="text-indent:50px;"><strong><span style="color:#f33b45;">position</span></strong>,定位,通过设置该属性的值改变元素的定位原点,默认为static,即没有定位,元素出现在正常的文档流中。除默认值外还有:</p> <p style="text-indent:50px;"><span style="color:#f33b45;">absolute</span>,绝对定位,生成绝对定位的元素,相对于值不为static的第一个父元素进行定位。设置该值,元素会向上查找<span style="color:#f33b45;">设置过position</span>的父元素,定位原点即是该父元素的原点。</p> <p style="text-indent:50px;"><span style="color:#f33b45;">relative</span>,相对定位,生成相对定位的元素,相对于其正常位置进行定位。</p> <p style="text-indent:50px;"><span style="color:#f33b45;">fixed</span>,窗口定位,生成绝对定位的元素,相对于浏览器窗口的定位。</p> <p style="text-indent:50px;"><span style="color:#f33b45;">inherit</span>,继承父元素的position定位。</p> <p style="text-indent:50px;"><span style="color:#f33b45;">想要移动谁就给谁一个绝对定位,再给父级一个相对定位。</span></p> <p style="text-indent:50px;">元素设置定位后,再设置left、right、top、bottom、四个属性值改变其位置</p> <p style="text-indent:50px;"><strong>4、弹性盒模型布局</strong>(css3新增)</p> <p style="text-indent:50px;">设置<span style="color:#f33b45;">display:flex</span>,该布局方式是css3新增的,回头再写一篇博客。</p> <h1 style="text-indent:0px;">四、知识点</h1> <p style="text-indent:50px;"><strong>1、文档声明<span style="color:#f33b45;"><!DOCTYPE html></span></strong></p> <p style="text-indent:50px;">文档声明位于文档的第一行,作用时告知浏览器用什么文档标准解析这个文档。如果文档声明不存在,浏览器会以兼容模式呈现该文档的内容,兼容模式下,文档以宽松的向后兼容的方式显示,模拟老式浏览器的行为,防止站点无法工作。</p> <p style="text-indent:50px;"><strong>2、div和span</strong></p> <p style="text-indent:50px;">div是块元素,独占一行,可以设置宽高;span是行内元素,宽高由内容撑开。两者运用得好会让布局变得很轻松。</p> <p style="text-indent:50px;"><strong>3、外边距重叠</strong></p> <p style="text-indent:50px;">在css中,相邻的两个盒子同时设置了外边距(margin),那么两者的外边距将会合并成单独的外边距,称为折叠外边距。相邻的两个外边距都是正数时,折叠结果是两者中的较大值;相邻的两个外边距都是负数时,折叠结果时两者绝对值较大的值;相邻的两个外边距一正一负时,折叠结果时两者相加的值。</p> <p style="text-indent:50px;"><strong>4、css多列等高</strong></p> <p style="text-indent:50px;">大盒子中有数个高度不同的小盒子</p> <p style="text-indent:50px;"><a href="http://img.e-com-net.com/image/info8/aec69a5c84af4610a84320abc7083a01.png" target="_blank"><img alt="前端基础之HTML+CSS_第2张图片" class="has" height="118" src="http://img.e-com-net.com/image/info8/aec69a5c84af4610a84320abc7083a01.png" width="1366" style="border:1px solid black;"></a></p> <p style="text-indent:50px;">给大盒子设置<span style="color:#f33b45;">overflow: hidden;</span>小盒子设置<span style="color:#f33b45;">margin-bottom: -999px;padding-bottom: 999px;</span></p> <p style="text-indent:50px;"><a href="http://img.e-com-net.com/image/info8/8dbe01ae7fdb4630bc04bc005af0b261.png" target="_blank"><img alt="前端基础之HTML+CSS_第3张图片" class="has" height="116" src="http://img.e-com-net.com/image/info8/8dbe01ae7fdb4630bc04bc005af0b261.png" width="1363" style="border:1px solid black;"></a></p> <p style="text-indent:50px;">大盒子的高度会被撑到最高的那个小盒子的高度,其余比它低的小盒子会自动补偿这部分的高度差。</p> <p style="text-indent:50px;"><strong>5、css优先级</strong></p> <p style="text-indent:50px;">优先级就近原则,同等权重下样式定义最近者为准,载入样式以最后载入的为准。</p> <p style="text-indent:50px;">内联样式 > 内部样式 > 外部样式        !important > id > class > tag   <span style="color:#f33b45;">!important的优先级比所有的都高</span></p> <p style="text-indent:50px;"><strong>6、css的权重</strong></p> <p style="text-indent:50px;">标签的权重为1,class的权重为10,id的权重为100,权重的计算方式时相加,例如#box .class div{} 结果为100+10+1</p> <p style="text-indent:50px;"><span style="color:#e579b6;"><em><strong>to be continued~~~</strong></em></span></p> </div> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1362095341154885632"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script> <!-- 文章页-底部 动态广告位 --> <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad"> <!-- 文章页-右侧1 动态广告位 --> <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div> <!-- 文章页-右侧2 动态广告位 --> <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div> <!-- 文章页-右侧3 动态广告位 --> <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(html+css,html,css)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835509770287673344.htm" title="swagger访问路径" target="_blank">swagger访问路径</a> <span class="text-muted">igotyback</span> <a class="tag" taget="_blank" href="/search/swagger/1.htm">swagger</a> <div>Swagger2.x版本访问地址:http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口,通常为8080。{context-path}是你的应用上下文路径,如果应用部署在根路径下,则为空。Swagger3.x版本对于Swagger3.x版本(也称为OpenAPI3)访问地址:http://{ip</div> </li> <li><a href="/article/1835508130608410624.htm" title="html 中如何使用 uniapp 的部分方法" target="_blank">html 中如何使用 uniapp 的部分方法</a> <span class="text-muted">某公司摸鱼前端</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>示例代码:Documentconsole.log(window);效果展示:好了,现在就可以uni.使用相关的方法了</div> </li> <li><a href="/article/1835499615491813376.htm" title="四章-32-点要素的聚合" target="_blank">四章-32-点要素的聚合</a> <span class="text-muted">彩云飘过</span> <div>本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记,使用的openlayers5.3.xapi。源码见1032.html,对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.</div> </li> <li><a href="/article/1835498925755297792.htm" title="DIV+CSS+JavaScript技术制作网页(旅游主题网页设计与制作)云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页(旅游主题网页设计与制作)云南大理</a> <span class="text-muted">STU学生网页设计</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a> <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业:【HTML5网页期末作业(1000套)】程序员有趣的告白方式:【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div> </li> <li><a href="/article/1835496149843275776.htm" title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a> <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材,DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业,Web大学生网页HTML:结构CSS:样式在操作方面上运用了html5和css3,采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div> </li> <li><a href="/article/1835496148601761792.htm" title="HTML网页设计制作大作业(div+css) 云南我的家乡旅游景点 带文字滚动" target="_blank">HTML网页设计制作大作业(div+css) 云南我的家乡旅游景点 带文字滚动</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Web前端开发技术描述网页设计题材,DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML:结构CSS:样式在操作方面上运用了html5和css3,采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript:做与用户的交互行为文章目录前端学习路线</div> </li> <li><a href="/article/1835493267907637248.htm" title="webpack图片等资源的处理" target="_blank">webpack图片等资源的处理</a> <span class="text-muted">dmengmeng</span> <div>需要的loaderfile-loader(让我们可以引入这些资源文件)url-loader(其实是file-loader的二次封装)img-loader(处理图片所需要的)在没有使用任何处理图片的loader之前,比如说css中用到了背景图片,那么最后打包会报错的,因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以,打开网页能准确看到图片。{test:/\.(p</div> </li> <li><a href="/article/1835435506645692416.htm" title="00. 这里整理了最全的爬虫框架(Java + Python)" target="_blank">00. 这里整理了最全的爬虫框架(Java + Python)</a> <span class="text-muted">有一只柴犬</span> <a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB%E7%B3%BB%E5%88%97/1.htm">爬虫系列</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2</div> </li> <li><a href="/article/1835435141535723520.htm" title="详解:如何设计出健壮的秒杀系统?" target="_blank">详解:如何设计出健壮的秒杀系统?</a> <span class="text-muted">夜空_2cd3</span> <div>作者:Yrion博客园:cnblogs.com/wyq178/p/11261711.html前言:秒杀系统相信很多人见过,比如京东或者淘宝的秒杀,小米手机的秒杀。那么秒杀系统的后台是如何实现的呢?我们如何设计一个秒杀系统呢?对于秒杀系统应该考虑哪些问题?如何设计出健壮的秒杀系统?本期我们就来探讨一下这个问题:image目录一:****秒杀系统应该考虑的问题二:****秒杀系统的设计和技术方案三:*</div> </li> <li><a href="/article/1835403246865313792.htm" title="斟一小组鸡血视频" target="_blank">斟一小组鸡血视频</a> <span class="text-muted">和自己一起成长</span> <div>http://m.v.qq.com/play/play.html?coverid=&vid=c0518henl2a&ptag=2_6.0.0.14297_copy有一种努力叫做靠自己http://m.v.qq.com/play/play.html?coverid=&vid=i0547o426g4&ptag=2_6.0.0.14297_copy世界最励志短片https://v.qq.com/x/pa</div> </li> <li><a href="/article/1835395039572881408.htm" title="Dockerfile命令详解之 FROM" target="_blank">Dockerfile命令详解之 FROM</a> <span class="text-muted">清风怎不知意</span> <a class="tag" taget="_blank" href="/search/%E5%AE%B9%E5%99%A8%E5%8C%96/1.htm">容器化</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>许多同学不知道Dockerfile应该如何写,不清楚Dockerfile中的指令分别有什么意义,能达到什么样的目的,接下来我将在容器化专栏中详细的为大家解释每一个指令的含义以及用法。专栏订阅传送门https://blog.csdn.net/qq_38220908/category_11989778.html指令不区分大小写。但是,按照惯例,它们应该是大写的,以便更容易地将它们与参数区分开来。(引用</div> </li> <li><a href="/article/1835389111658180608.htm" title="《HTML 与 CSS—— 响应式设计》" target="_blank">《HTML 与 CSS—— 响应式设计》</a> <span class="text-muted">陈在天box</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一、引言在当今数字化时代,人们使用各种不同的设备访问互联网,包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验,响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术,在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性(一)概念响应式设计是一种网页设计方法,旨在</div> </li> <li><a href="/article/1835387977480630272.htm" title="【C语言】- 自定义类型:结构体、枚举、联合" target="_blank">【C语言】- 自定义类型:结构体、枚举、联合</a> <span class="text-muted">Cavalier_01</span> <a class="tag" taget="_blank" href="/search/C%E8%AF%AD%E8%A8%80/1.htm">C语言</a> <div>【C语言】:操作符(https://mp.csdn.net/editor/html/115218055)数据类型(https://mp.csdn.net/editor/html/115219664)自定义类型:结构体、枚举、联合(https://mp.csdn.net/editor/html/115373785)变量、常量(https://mp.csdn.net/editor/html/11523</div> </li> <li><a href="/article/1835382685745377280.htm" title="html+css网页设计 旅游网站首页1个页面" target="_blank">html+css网页设计 旅游网站首页1个页面</a> <span class="text-muted">html+css+js网页设计</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a> <div>html+css网页设计旅游网站首页1个页面网页作品代码简单,可使用任意HTML辑软件(如:Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作)。获取源码1,访问该网站https://download.csdn.net/download/qq_42431718/897527112,点击</div> </li> <li><a href="/article/1835379153730367488.htm" title="spring mvc @RequestBody String类型参数" target="_blank">spring mvc @RequestBody String类型参数</a> <span class="text-muted">zoyation</span> <a class="tag" taget="_blank" href="/search/spring-mvc/1.htm">spring-mvc</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a> <div>通过如下配置:text/html;charset=UTF-8application/json;charset=UTF-8在springmvc的Controller层使用@RequestBody接收Content-Type为application/json的数据时,默认支持Map方式和对象方式参数@RequestMapping(value="/{code}/saveUser",method=Requ</div> </li> <li><a href="/article/1835377684025274368.htm" title="ubuntu安装opencv最快的方法" target="_blank">ubuntu安装opencv最快的方法</a> <span class="text-muted">Derek重名了</span> <div>最快方法,当然不能太多文字$sudoapt-getinstallpython-opencv借助python就可以把ubuntu的opencv环境搞起来,非常快非常容易参考:https://docs.opencv.org/trunk/d2/de6/tutorial_py_setup_in_ubuntu.html</div> </li> <li><a href="/article/1835376759739084800.htm" title="处理标签包裹的字符串,并取出前250字符" target="_blank">处理标签包裹的字符串,并取出前250字符</a> <span class="text-muted">周bro</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>//假设这是你的HTML字符串varhtmlString=`这是一个段落。这是一个标题这是另一个段落,包含一些链接。`;//解析HTML字符串并提取文本functionextractTextFromHTML(html){varparser=newDOMParser();vardoc=parser.parseFromString(html,"text/html");vartextContent=do</div> </li> <li><a href="/article/1835376505543290880.htm" title="css设置当字数超过限制后以省略号(...)显示" target="_blank">css设置当字数超过限制后以省略号(...)显示</a> <span class="text-muted">周bro</span> <a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a> <div>1、文字超出一行,省略超出部分,显示’…’用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。overflow:hidden;text-overflow:ellipsis;white-space:nowrap;2、多行文本溢出显示省略号display:-webkit-box;-webkit-box-orient:vertical;-webkit-lin</div> </li> <li><a href="/article/1835373236217540608.htm" title="360前端星计划-动画可以这么玩" target="_blank">360前端星计划-动画可以这么玩</a> <span class="text-muted">马小蜗</span> <div>动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点:灵活度、可控性、性能</div> </li> <li><a href="/article/1835372727582683136.htm" title="h5小游戏定制开发" target="_blank">h5小游戏定制开发</a> <span class="text-muted">红匣子实力推荐</span> <div>随着科技的不断发展,移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下,H5小游戏应运而生,为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式,正逐渐受到市场的关注和青睐。那么,什么是H5小游戏定制开发呢?它又具有哪些特点和优势呢?让我们一起来深入了解一下。首先,我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏,可以在移动端、PC端等多平台</div> </li> <li><a href="/article/1835362025719558144.htm" title="css2中的透明" target="_blank">css2中的透明</a> <span class="text-muted">琪33</span> <div>.out{width:400px;height:400px;background-color:blue;margin:100pxauto;border:1pxsolid#000;opacity:0.6;}.in{width:200px;height:200px;background-color:red;margin:100pxauto;}</div> </li> <li><a href="/article/1835359727924637696.htm" title="Nginx从入门到实践(三)" target="_blank">Nginx从入门到实践(三)</a> <span class="text-muted">听你讲故事啊</span> <div>动静分离动静分离是将网站静态资源(JavaScript,CSS,img等文件)与后台应用分开部署,提高用户访问静态代码的速度,降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上,后台项目部署到应用服务器上,根据一定规则静态资源的请求全部请求nginx服务器,达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写,Ngin</div> </li> <li><a href="/article/1835354700392787968.htm" title="Nginx的使用场景:构建高效、可扩展的Web架构" target="_blank">Nginx的使用场景:构建高效、可扩展的Web架构</a> <span class="text-muted">张某布响丸辣</span> <a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>Nginx,作为当今最流行的Web服务器和反向代理软件之一,凭借其高性能、稳定性和灵活性,在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站,还是大型企业级应用,Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景,帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件(如HTML、CSS、JavaScript、图片等)的网站,Ngin</div> </li> <li><a href="/article/1835354447627251712.htm" title="前端知识点" target="_blank">前端知识点</a> <span class="text-muted">ZhangTao_zata</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage</div> </li> <li><a href="/article/1835349024102772736.htm" title="非关系型数据库" target="_blank">非关系型数据库</a> <span class="text-muted">天秤-white</span> <a class="tag" taget="_blank" href="/search/nosql/1.htm">nosql</a> <div>一、为什么要用Nosql1.单机MySQL的时代。一个基本的网站访问量一般不会太大,单个数据库完全足够。那时候更多使用的静态网页html,服务器根本没有太大压力。这时候网站的瓶颈是什么?-数据量如果太大,一个机器放不下。-数据量太大需要建立数据的索引(B+Tree),一个服务器内存放不下。-访问量读写混合,一个服务器承受不了。2.memcached缓存+MySQL+垂直拆分(读写分离)。网站80%</div> </li> <li><a href="/article/1835342718067372032.htm" title="Python精选200Tips:121-125" target="_blank">Python精选200Tips:121-125</a> <span class="text-muted">AnFany</span> <a class="tag" taget="_blank" href="/search/Python200%2BTips/1.htm">Python200+Tips</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>Spendyourtimeonself-improvement121Requests-简化的HTTP请求处理发送GET请求发送POST请求发送PUT请求发送DELETE请求会话管理处理超时文件上传122BeautifulSoup-网页解析和抓取解析HTML和XML文档查找单个标签查找多个标签使用CSS选择器查找标签提取文本修改文档内容删除标签处理XML文档123Scrapy-强大的网络爬虫框架示例</div> </li> <li><a href="/article/1835340577596600320.htm" title="前端CSS面试常见题" target="_blank">前端CSS面试常见题</a> <span class="text-muted">剑亦未配妥</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/1.htm">前端面试</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>边界塌陷盒模型有两种:W3C盒模型和IE盒模型,区别在于宽度是否包含边框定义:同时给兄弟/父子盒模型设置上下边距,理论上边距值是两者之和,实际上不是注意:浮动和定位不会产生边界塌陷;只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负:取绝对值大的值一正一负:求和父子元素边界塌陷解决父元素可以通过调整padding处理;设置overflowhidden,触发BFC子</div> </li> <li><a href="/article/1835333268375957504.htm" title="爬虫技术抓取网站数据" target="_blank">爬虫技术抓取网站数据</a> <span class="text-muted">Bearjumpingcandy</span> <a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a> <div>爬虫技术是一种自动化获取网站数据的技术,它可以模拟人类浏览器的行为,访问网页并提取所需的信息。以下是爬虫技术抓取网站数据的一般步骤:发起HTTP请求:爬虫首先会发送HTTP请求到目标网站,获取网页的内容。解析HTML:获取到网页内容后,爬虫会使用HTML解析器解析HTML代码,提取出需要的数据。数据提取:通过使用XPath、CSS选择器或正则表达式等工具,爬虫可以从HTML中提取出所需的数据,如文</div> </li> <li><a href="/article/1835316434805288960.htm" title="七.正则化" target="_blank">七.正则化</a> <span class="text-muted">愿风去了</span> <div>吴恩达机器学习之正则化(Regularization)http://www.cnblogs.com/jianxinzhou/p/4083921.html从数学公式上理解L1和L2https://blog.csdn.net/b876144622/article/details/81276818虽然在线性回归中加入基函数会使模型更加灵活,但是很容易引起数据的过拟合。例如将数据投影到30维的基函数上,模</div> </li> <li><a href="/article/1835296397365178368.htm" title="创建一个完整的购物商城系统是一个复杂的项目,涉及前端(用户界面)、后端(服务器逻辑)、数据库等多个部分。由于篇幅限制,我无法在这里提供一个完整的系统代码,但我可以分别给出一些关键部分的示例代码,涵盖几" target="_blank">创建一个完整的购物商城系统是一个复杂的项目,涉及前端(用户界面)、后端(服务器逻辑)、数据库等多个部分。由于篇幅限制,我无法在这里提供一个完整的系统代码,但我可以分别给出一些关键部分的示例代码,涵盖几</a> <span class="text-muted">uthRaman</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a> <div>前端(HTML/CSS/JavaScript)grsyzp.cnHTML页面结构(index.html)html购物商城欢迎来到购物商城JavaScript(Ajax请求商品数据,app.js)javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=</div> </li> <li><a href="/article/78.htm" title="桌面上有多个球在同时运动,怎么实现球之间不交叉,即碰撞?" target="_blank">桌面上有多个球在同时运动,怎么实现球之间不交叉,即碰撞?</a> <span class="text-muted">换个号韩国红果果</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%90%83%E7%A2%B0%E6%92%9E/1.htm">小球碰撞</a> <div>稍微想了一下,然后解决了很多bug,最后终于把它实现了。其实原理很简单。在每改变一个小球的x y坐标后,遍历整个在dom树中的其他小球,看一下它们与当前小球的距离是否小于球半径的两倍?若小于说明下一次绘制该小球(设为a)前要把他的方向变为原来相反方向(与a要碰撞的小球设为b),即假如当前小球的距离小于球半径的两倍的话,马上改变当前小球方向。那么下一次绘制也是先绘制b,再绘制a,由于a的方向已经改变</div> </li> <li><a href="/article/205.htm" title="《高性能HTML5》读后整理的Web性能优化内容" target="_blank">《高性能HTML5》读后整理的Web性能优化内容</a> <span class="text-muted">白糖_</span> <a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a> <div> 读后感         先说说《高性能HTML5》这本书的读后感吧,个人觉得这本书前两章跟书的标题完全搭不上关系,或者说只能算是讲解了“高性能”这三个字,HTML5完全不见踪影。个人觉得作者应该首先把HTML5的大菜拿出来讲一讲,再去分析性能优化的内容,这样才会有吸引力。因为只是在线试读,没有机会看后面的内容,所以不胡乱评价了。   </div> </li> <li><a href="/article/332.htm" title="[JShop]Spring MVC的RequestContextHolder使用误区" target="_blank">[JShop]Spring MVC的RequestContextHolder使用误区</a> <span class="text-muted">dinguangx</span> <a class="tag" taget="_blank" href="/search/jeeshop/1.htm">jeeshop</a><a class="tag" taget="_blank" href="/search/%E5%95%86%E5%9F%8E%E7%B3%BB%E7%BB%9F/1.htm">商城系统</a><a class="tag" taget="_blank" href="/search/jshop/1.htm">jshop</a><a class="tag" taget="_blank" href="/search/%E7%94%B5%E5%95%86%E7%B3%BB%E7%BB%9F/1.htm">电商系统</a> <div>    在spring mvc中,为了随时都能取到当前请求的request对象,可以通过RequestContextHolder的静态方法getRequestAttributes()获取Request相关的变量,如request, response等。         在jshop中,对RequestContextHolder的</div> </li> <li><a href="/article/459.htm" title="算法之时间复杂度" target="_blank">算法之时间复杂度</a> <span class="text-muted">周凡杨</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E6%97%B6%E9%97%B4%E5%A4%8D%E6%9D%82%E5%BA%A6/1.htm">时间复杂度</a><a class="tag" taget="_blank" href="/search/%E6%95%88%E7%8E%87/1.htm">效率</a> <div>      在 计算机科学 中, 算法 的时间复杂度是一个 函数 ,它定量描述了该算法的运行时间。这是一个关于代表算法输入值的 字符串 的长度的函数。时间复杂度常用 大O符号 表述,不包括这个函数的低阶项和首项系数。使用这种方式时,时间复杂度可被称为是 渐近 的,它考察当输入值大小趋近无穷时的情况。 这样用大写O()来体现算法时间复杂度的记法,</div> </li> <li><a href="/article/586.htm" title="Java事务处理" target="_blank">Java事务处理</a> <span class="text-muted">g21121</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>一、什么是Java事务 通常的观念认为,事务仅与数据库相关。 事务必须服从ISO/IEC所制定的ACID原则。ACID是原子性(atomicity)、一致性(consistency)、隔离性(isolation)和持久性(durability)的缩写。事务的原子性表示事务执行过程中的任何失败都将导致事务所做的任何修改失效。一致性表示当事务执行失败时,所有被该事务影响的数据都应该恢复到事务执行前的状</div> </li> <li><a href="/article/713.htm" title="Linux awk命令详解" target="_blank">Linux awk命令详解</a> <span class="text-muted">510888780</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>一.  AWK 说明   awk是一种编程语言,用于在linux/unix下对文本和数据进行处理。数据可以来自标准输入、一个或多个文件,或其它命令的输出。它支持用户自定义函数和动态正则表达式等先进功能,是linux/unix下的一个强大编程工具。它在命令行中使用,但更多是作为脚本来使用。    awk的处理文本和数据的方式:它逐行扫描文件,从第一行到</div> </li> <li><a href="/article/840.htm" title="android permission" target="_blank">android permission</a> <span class="text-muted">布衣凌宇</span> <a class="tag" taget="_blank" href="/search/Permission/1.htm">Permission</a> <div><uses-permission android:name="android.permission.ACCESS_CHECKIN_PROPERTIES" ></uses-permission>允许读写访问"properties"表在checkin数据库中,改值可以修改上传 <uses-permission android:na</div> </li> <li><a href="/article/967.htm" title="Oracle和谷歌Java Android官司将推迟" target="_blank">Oracle和谷歌Java Android官司将推迟</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a> <div>北京时间 10 月 7 日,据国外媒体报道,Oracle 和谷歌之间一场等待已久的官司可能会推迟至 10 月 17 日以后进行,这场官司的内容是 Android 操作系统所谓的 Java 专利权之争。本案法官 William Alsup 称根据专利权专家 Florian Mueller 的预测,谷歌 Oracle 案很可能会被推迟。  该案中的第二波辩护被安排在 10 月 17 日出庭,从目前看来</div> </li> <li><a href="/article/1094.htm" title="linux shell 常用命令" target="_blank">linux shell 常用命令</a> <span class="text-muted">antlove</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/shell/1.htm">shell</a><a class="tag" taget="_blank" href="/search/command/1.htm">command</a> <div>grep [options] [regex] [files] /var/root # grep -n "o" * hello.c:1:/* This C source can be compiled with: </div> </li> <li><a href="/article/1221.htm" title="Java解析XML配置数据库连接(DOM技术连接 SAX技术连接)" target="_blank">Java解析XML配置数据库连接(DOM技术连接 SAX技术连接)</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/sax%E6%8A%80%E6%9C%AF/1.htm">sax技术</a><a class="tag" taget="_blank" href="/search/Java%E8%A7%A3%E6%9E%90xml%E6%96%87%E6%A1%A3/1.htm">Java解析xml文档</a><a class="tag" taget="_blank" href="/search/dom%E6%8A%80%E6%9C%AF/1.htm">dom技术</a><a class="tag" taget="_blank" href="/search/XML%E9%85%8D%E7%BD%AE%E6%95%B0%E6%8D%AE%E5%BA%93%E8%BF%9E%E6%8E%A5/1.htm">XML配置数据库连接</a> <div>    XML配置数据库文件的连接其实是个很简单的问题,为什么到现在才写出来主要是昨天在网上看了别人写的,然后一直陷入其中,最后发现不能自拔 所以今天决定自己完成 ,,,,现将代码与思路贴出来供大家一起学习   XML配置数据库的连接主要技术点的博客; JDBC编程 : JDBC连接数据库 DOM解析XML:  DOM解析XML文件 SA</div> </li> <li><a href="/article/1348.htm" title="underscore.js 学习(二)" target="_blank">underscore.js 学习(二)</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/underscore/1.htm">underscore</a> <div>        Array Functions 所有数组函数对参数对象一样适用。1.first   _.first(array, [n])   别名: head, take       返回array的第一个元素,设置了参数n,就</div> </li> <li><a href="/article/1475.htm" title="plSql介绍" target="_blank">plSql介绍</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/plsql/1.htm">plsql</a> <div>/* * PL/SQL 程序设计学习笔记 * 学习plSql介绍.pdf * 时间:2010-10-05 */ --创建DEPT表 create table DEPT ( DEPTNO NUMBER(10), DNAME NVARCHAR2(255), LOC NVARCHAR2(255) ) delete dept; select </div> </li> <li><a href="/article/1602.htm" title="【Nginx一】Nginx安装与总体介绍" target="_blank">【Nginx一】Nginx安装与总体介绍</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a> <div>启动、停止、重新加载Nginx nginx 启动Nginx服务器,不需要任何参数u nginx -s stop 快速(强制)关系Nginx服务器 nginx -s quit 优雅的关闭Nginx服务器 nginx -s reload 重新加载Nginx服务器的配置文件 nginx -s reopen 重新打开Nginx日志文件   </div> </li> <li><a href="/article/1729.htm" title="spring mvc开发中浏览器兼容的奇怪问题" target="_blank">spring mvc开发中浏览器兼容的奇怪问题</a> <span class="text-muted">bitray</span> <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a><a class="tag" taget="_blank" href="/search/springMVC/1.htm">springMVC</a><a class="tag" taget="_blank" href="/search/%E6%B5%8F%E8%A7%88%E5%99%A8/1.htm">浏览器</a><a class="tag" taget="_blank" href="/search/%E4%B8%8A%E4%BC%A0%E6%96%87%E4%BB%B6/1.htm">上传文件</a> <div>    最近个人开发一个小的OA项目,属于复习阶段.使用的技术主要是spring mvc作为前端框架,mybatis作为数据库持久化技术.前台使用jquery和一些jquery的插件.     在开发到中间阶段时候发现自己好像忽略了一个小问题,整个项目一直在firefox下测试,没有在IE下测试,不确定是否会出现兼容问题.由于jquer</div> </li> <li><a href="/article/1856.htm" title="Lua的io库函数列表" target="_blank">Lua的io库函数列表</a> <span class="text-muted">ronin47</span> <a class="tag" taget="_blank" href="/search/lua+io/1.htm">lua io</a> <div>1、io表调用方式:使用io表,io.open将返回指定文件的描述,并且所有的操作将围绕这个文件描述   io表同样提供三种预定义的文件描述io.stdin,io.stdout,io.stderr   2、文件句柄直接调用方式,即使用file:XXX()函数方式进行操作,其中file为io.open()返回的文件句柄   多数I/O函数调用失败时返回nil加错误信息,有些函数成功时返回nil</div> </li> <li><a href="/article/1983.htm" title="java-26-左旋转字符串" target="_blank">java-26-左旋转字符串</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> public class LeftRotateString { /** * Q 26 左旋转字符串 * 题目:定义字符串的左旋转操作:把字符串前面的若干个字符移动到字符串的尾部。 * 如把字符串abcdef左旋转2位得到字符串cdefab。 * 请实现字符串左旋转的函数。要求时间对长度为n的字符串操作的复杂度为O(n),辅助内存为O(1)。 */ pu</div> </li> <li><a href="/article/2110.htm" title="《vi中的替换艺术》-linux命令五分钟系列之十一" target="_blank">《vi中的替换艺术》-linux命令五分钟系列之十一</a> <span class="text-muted">cfyme</span> <a class="tag" taget="_blank" href="/search/linux%E5%91%BD%E4%BB%A4/1.htm">linux命令</a> <div>vi方面的内容不知道分类到哪里好,就放到《Linux命令五分钟系列》里吧! 今天编程,关于栈的一个小例子,其间我需要把”S.”替换为”S->”(替换不包括双引号)。 其实这个不难,不过我觉得应该总结一下vi里的替换技术了,以备以后查阅。   1 所有替换方案都要在冒号“:”状态下书写。 2 如果想将abc替换为xyz,那么就这样 :s/abc/xyz/ 不过要特别</div> </li> <li><a href="/article/2237.htm" title="[轨道与计算]新的并行计算架构" target="_blank">[轨道与计算]新的并行计算架构</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E5%B9%B6%E8%A1%8C%E8%AE%A1%E7%AE%97/1.htm">并行计算</a> <div>      我在进行流程引擎循环反馈试验的过程中,发现一个有趣的事情。。。如果我们在流程图的每个节点中嵌入一个双向循环代码段,而整个流程中又充满着很多并行路由,每个并行路由中又包含着一些并行节点,那么当整个流程图开始循环反馈过程的时候,这个流程图的运行过程是否变成一个并行计算的架构呢?      </div> </li> <li><a href="/article/2364.htm" title="重复执行某段代码" target="_blank">重复执行某段代码</a> <span class="text-muted">dai_lm</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>用handler就可以了 private Handler handler = new Handler(); private Runnable runnable = new Runnable() { public void run() { update(); handler.postDelayed(this, 5000); } }; 开始计时 h</div> </li> <li><a href="/article/2491.htm" title="Java实现堆栈(list实现)" target="_blank">Java实现堆栈(list实现)</a> <span class="text-muted">datageek</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E2%80%94%E2%80%94%E5%A0%86%E6%A0%88/1.htm">数据结构——堆栈</a> <div>public interface IStack<T> { //元素出栈,并返回出栈元素 public T pop(); //元素入栈 public void push(T element); //获取栈顶元素 public T peek(); //判断栈是否为空 public boolean isEmpty</div> </li> <li><a href="/article/2618.htm" title="四大备份MySql数据库方法及可能遇到的问题" target="_blank">四大备份MySql数据库方法及可能遇到的问题</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/DB/1.htm">DB</a><a class="tag" taget="_blank" href="/search/backup/1.htm">backup</a> <div>一:通过备份王等软件进行备份前台进不去? 用备份王等软件进行备份是大多老站长的选择,这种方法方便快捷,只要上传备份软件到空间一步步操作就可以,但是许多刚接触备份王软件的客用户来说还原后会出现一个问题:因为新老空间数据库用户名和密码不统一,网站文件打包过来后因没有修改连接文件,还原数据库是好了,可是前台会提示数据库连接错误,网站从而出现打不开的情况。 解决方法:学会修改网站配置文件,大多是由co</div> </li> <li><a href="/article/2745.htm" title="github做webhooks:[1]钩子触发是否成功测试" target="_blank">github做webhooks:[1]钩子触发是否成功测试</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/github/1.htm">github</a><a class="tag" taget="_blank" href="/search/git/1.htm">git</a><a class="tag" taget="_blank" href="/search/webhook/1.htm">webhook</a> <div>转自: http://jingyan.baidu.com/article/5d6edee228c88899ebdeec47.html github和svn一样有钩子的功能,而且更加强大。例如我做的是最常见的push操作触发的钩子操作,则每次更新之后的钩子操作记录都会在github的控制板可以看到! 工具/原料 github 方法/步骤 </div> </li> <li><a href="/article/2872.htm" title="JSP中<base href="<%=basePath%>">的作用" target="_blank">JSP中<base href="<%=basePath%>">的作用</a> <span class="text-muted">蕃薯耀</span> <div>JSP中<base href="<%=basePath%>">的作用 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> </div> </li> <li><a href="/article/2999.htm" title="linux下SAMBA服务安装与配置" target="_blank">linux下SAMBA服务安装与配置</a> <span class="text-muted">hanqunfeng</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>局域网使用的文件共享服务。 一.安装包: rpm -qa | grep samba samba-3.6.9-151.el6.x86_64 samba-common-3.6.9-151.el6.x86_64 samba-winbind-3.6.9-151.el6.x86_64 samba-client-3.6.9-151.el6.x86_64 samba-winbind-clients</div> </li> <li><a href="/article/3126.htm" title="guava cache" target="_blank">guava cache</a> <span class="text-muted">IXHONG</span> <a class="tag" taget="_blank" href="/search/cache/1.htm">cache</a> <div>缓存,在我们日常开发中是必不可少的一种解决性能问题的方法。简单的说,cache 就是为了提升系统性能而开辟的一块内存空间。   缓存的主要作用是暂时在内存中保存业务系统的数据处理结果,并且等待下次访问使用。在日常开发的很多场合,由于受限于硬盘IO的性能或者我们自身业务系统的数据处理和获取可能非常费时,当我们发现我们的系统这个数据请求量很大的时候,频繁的IO和频繁的逻辑处理会导致硬盘和CPU资源的</div> </li> <li><a href="/article/3253.htm" title="Query的开始--全局变量,noconflict和兼容各种js的初始化方法" target="_blank">Query的开始--全局变量,noconflict和兼容各种js的初始化方法</a> <span class="text-muted">kvhur</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>这个是整个jQuery代码的开始,里面包含了对不同环境的js进行的处理,例如普通环境,Nodejs,和requiredJs的处理方法。 还有jQuery生成$, jQuery全局变量的代码和noConflict代码详解  完整资源: http://www.gbtags.com/gb/share/5640.htm jQuery 源码:   (</div> </li> <li><a href="/article/3380.htm" title="美国人的福利和中国人的储蓄" target="_blank">美国人的福利和中国人的储蓄</a> <span class="text-muted">nannan408</span> <div>   今天看了篇文章,震动很大,说的是美国的福利。    美国医院的无偿入院真的是个好措施。小小的改善,对于社会是大大的信心。小孩,税费等,政府不收反补,真的体现了人文主义。    美国这么高的社会保障会不会使人变懒?答案是否定的。正因为政府解决了后顾之忧,人们才得以倾尽精力去做一些有创造力,更造福社会的事情,这竟成了美国社会思想、人</div> </li> <li><a href="/article/3507.htm" title="N阶行列式计算(JAVA)" target="_blank">N阶行列式计算(JAVA)</a> <span class="text-muted">qiuwanchi</span> <a class="tag" taget="_blank" href="/search/N%E9%98%B6%E8%A1%8C%E5%88%97%E5%BC%8F%E8%AE%A1%E7%AE%97/1.htm">N阶行列式计算</a> <div>package gaodai; import java.util.List; /** * N阶行列式计算 * @author 邱万迟 * */ public class DeterminantCalculation { public DeterminantCalculation(List<List<Double>> determina</div> </li> <li><a href="/article/3634.htm" title="C语言算法之打渔晒网问题" target="_blank">C语言算法之打渔晒网问题</a> <span class="text-muted">qiufeihu</span> <a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a> <div>如果一个渔夫从2011年1月1日开始每三天打一次渔,两天晒一次网,编程实现当输入2011年1月1日以后任意一天,输出该渔夫是在打渔还是在晒网。 代码如下:   #include <stdio.h> int leap(int a) /*自定义函数leap()用来指定输入的年份是否为闰年*/ { if((a%4 == 0 && a%100 != 0</div> </li> <li><a href="/article/3761.htm" title="XML中DOCTYPE字段的解析" target="_blank">XML中DOCTYPE字段的解析</a> <span class="text-muted">wyzuomumu</span> <a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a> <div>DTD声明始终以!DOCTYPE开头,空一格后跟着文档根元素的名称,如果是内部DTD,则再空一格出现[],在中括号中是文档类型定义的内容. 而对于外部DTD,则又分为私有DTD与公共DTD,私有DTD使用SYSTEM表示,接着是外部DTD的URL. 而公共DTD则使用PUBLIC,接着是DTD公共名称,接着是DTD的URL.   私有DTD <!DOCTYPErootSYST</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类:</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved. <!-- <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>--> </div> </div> </footer> <!-- 代码高亮 --> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>