Mr_sun.

DAY07_HTML&CSS

1 HTML
- 1.1 介绍
- - 1.1.1 WebStrom中基本配置
- 1.2 快速入门
- 1.3 基础标签
- - 1.3.1 标题标签
  - 1.3.2 hr标签
  - 1.3.3 字体标签
  - 1.3.4 换行标签
  - 1.3.5 段落标签
  - 1.3.6 加粗、斜体、下划线标签
  - 1.3.7 居中标签
  - 1.3.8 案例
- 1.4 图片、音频、视频标签
- 1.5 超链接标签
- 1.6 列表标签
- - 1.6.1 列表中图表类型
  - 1.6.2 去除有序列表和无序列表前端图标
  - 1.6.3 列表扩展
- 1.7 表格标签
- 1.8 布局标签
- 1.9 表单标签
- - 1.9.1 表单标签概述
  - 1.9.2 form标签属性
  - 1.9.3 代码演示
- 1.10 表单项标签
2 CSS
- 2.1 概述
- 2.2 css 导入方式
- 2.3 css 选择器
- 2.4 css属性
- - 2.4.1 背景属性background
  - 2.4.2 元素显示方式display
  - 2.4.3 文本与字体相关样式
- 2.5 盒子模型
- - 2.5.1 盒子模型-宽高
  - 2.5.2 盒子模型-外边距
  - 2.5.3 盒子模型-边框
  - 2.5.4 盒子模型-内边距
- 2.6 css的三大特征
- 2.7 定位方式4+1
- - 2.7.1 position：static 静态定位
  - 2.7.2 position：relative 相对定位
  - 2.7.3 position：absolute 绝对定位
  - 2.7.4 position：fixed 固定定位
  - 2.7.5 float：left/right 浮动定位
- 2.8 溢出设置 overflow
- 2.9 css文档
3 扩展frameset-简单的框架分布页面

1 HTML

1.1 介绍

HTML 是一门语言，所有的网页都是用HTML 这门语言编写出来的，也就是HTML是用来写网页的，像京东，12306等网站有很多网页。

这些都是网页展示出来的效果。而HTML也有专业的解释

HTML(HyperText Markup Language)：超文本标记语言：
- 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容
  如上图看到的页面，我们除了能看到一些文字，同时也有大量的图片展示；有些网页也有视频，音频等。这种展示效果超越了文本展示的限制。
- 标记语言：由标签构成的语言
  之前学习的XML就是标记语言，由一个一个的标签组成，HTML 也是由标签组成。我们在浏览器页面右键可以查看页面的源代码
  可以看到如下内容，就是由一个一个的标签组成的
  这些标签不像XML那样可以自定义，HTML中的标签都是预定义好的，运行在浏览器上并由浏览器解析，然后展示出对应的效果。例如我们想在浏览器上展示出图片就需要使用预定义的 img 标签；想展示可以点击的链接的效果就可以使用预定义的 a 标签等。

以后我们是通过Java程序从数据库中查询出来数据，然后交给页面进行展示，这样用户就能通过在浏览器通过页面看到数据。

W3C标准：
W3C是万维网联盟，这个组成是用来定义标准的。他们规定了一个网页是由三部分组成，分别是：
- 结构：对应的是 HTML 语言
- 表现：对应的是 CSS 语言
- 行为：对应的是 JavaScript 语言
  - HTML定义页面的整体结构
  - CSS是用来美化页面，让页面看起来更加美观
  - JavaScript可以使网页动起来，比如轮播图也就是多张图片自动的进行切换等效果。
如下只是使用HTML语言编写的页面的结构：
- 可以看到页面是比较丑的，但是每一部分其实都已经包含了。
接下来咱们加上 CSS 进行美化看到的效果如下：
- 瞬间感觉好看多了，这就是CSS的作用，用来美化页面的。
接下来再加上JavaScript试试
- 可以看到多了轮播图，在浏览器上它是会自动切换图片的，并且切换的动态效果是很不错的。

1.1.1 WebStrom中基本配置

修改字体大小
控制字母大小写提示（取消勾选）
自动保存（参数为1）
设定参数提示（Info中全部打勾）
修改字符集
主题插件
Hiberbee Theme
修改注释颜色
- 028102

1.2 快速入门

需求：
- 编写如下图效果的页面
要实现这个页面，我们需要从以下三步进行实现
- 新建文本文件，后缀名改为 .html
  - 页面文件的后缀名是 .html，所以需要该后缀名
- 编写 HTML 结构标签
  - HTML 是由一个一个的标签组成的，但是它也用于表示结构的标签

<html>
	<head>
    	<title> title>
    head>
    <body>
          
    body>
html>

html标签是根标签，下面有 head 标签和 body 标签这两个子标签。而 head 标签的 title 子标签是用来定义页面标题名称的，它定义的内容会展示在浏览器的标题位置，如下图红框标记

body 标签的内容会被展示在内容区中，如下图红框标记

在< body >中定义文字

<html>
	<head>
    	<title>html 快速入门title>
    head>
    <body>
        乾坤未定，你我皆是黑马~
    body>
html>

在访问其他网站页面时会看到字体颜色是五颜六色的
font 标签就可以使用，该标签有一个 color 属性可以设置字体颜色，如：就是将文字设置成了红颜色。那么我们只需要将需要变成红色的文字放在标签体部分就可以了，如下：

<html>
	<head>
    	<title>html 快速入门title>
    head>
    <body>
        <font color='red'>乾坤未定，你我皆是黑马~font>
    body>
html>

总结：
- HTML 文件以.htm或.html为扩展名
- HTML 结构标签
- HTML 标签不区分大小写
 - 如上案例中的 font 写成 Font 也是一样可以展示出对应的效果的。
- HTML 标签属性值单双引皆可
 - 如上案例中的color属性值使用双引号也是可以的。
- HTML 语法松散
 - 比如 font 标签不加结束标签也是可以展示出效果的。但是建议同学们在写的时候还是不要这样做，严格按照要求去写。

1.3 基础标签

基础标签就是一些和文字相关的标签，如下：

标签	描述
~	定义标题，h1最大，h6最小
	定义文本的字体、字体尺寸、字体颜色
	定义粗体字体
	定义斜体文本
	定义文本下划线
	定义文本居中
	定义段落
	定义折行
	定义水平线

1.3.1 标题标签

创建模块
- 在 WebStrom 中创建模块，在模块下创建一个html文件夹，该我们今天的所以的页面文件所部放在该文件夹下。模块目录如下
创建页面文件
- 选中 html 文件夹右键创建页面文件（01-基础标签.html）
- 创建好后 idea 会自动加上结构标签，如下
- 我们只需要在 body 标签中书写标签。
书写标题标签
- 标题标签中 h1最大，h6最小。

<h1>我是标题 h1h1>
<h2>我是标题 h2h2>
<h3>我是标题 h3h3>
<h4>我是标题 h4h4>
<h5>我是标题 h5h5>
<h6>我是标题 h6h6>

通过浏览器查看效果
- idea 提供了快捷的打开方式，如下图
- 浏览器展示效果如下：

1.3.2 hr标签

hr 标签在浏览器中呈现出横线的效果。
在页面文件中书写 hr 标签

<hr>

效果如下：

1.3.3 字体标签

font：字体标签
- face 属性：用来设置字体。如 “楷体”、"宋体"等
- color 属性：设置文字颜色。颜色有三种表示方式
  - 英文单词：red,pink,blue…
    - 这种方式表示的颜色特别有限，所以一般不用。
  - -rgb(值1,值2,值3)：值的取值范围：0~255
    - 此种方式也就是三原色（红绿蓝）设置方式。例如： rgb(255,0,0)。
    - 这种书写起来比较麻烦，一般不用。
  - #值1值2值3：值的范围：00~FF
    - 这种方式是rgb方式的简化写法，以后基本都用此方式。
    - 值1表示红色的范围，值2表示绿色的范围，值3表示蓝色范围。例如： #ff0000
- size 属性：设置文字大小

<font face="楷体" size="5" color="#ff0000">程序员font>

效果如下：

注意：
font 标签已经不建议使用了，以后如果要改变文字字体，大小，颜色可以使用 CSS 进行设置。

1.3.4 换行标签

在页面文件中书写如下内容

刚察草原绿草如茵，沙柳河水流淌入湖。藏族牧民索南才让家中，茶几上摆着馓子、麻花和水果，炉子上刚煮开的奶茶香气四溢……
6月8日下午，来到青海省海北藏族自治州刚察县沙柳河镇果洛藏贡麻村，走进牧民索南才让家中，看望慰问藏族群众。

在浏览器展示的效果如下：

我们可以看到并没有换行。如果要实现换行效果，需要使用换行标签（br标签）。
修改页面文件内容如下：

刚察草原绿草如茵，沙柳河水流淌入湖。藏族牧民索南才让家中，茶几上摆着馓子、麻花和水果，炉子上刚煮开的奶茶香气四溢……<br>
6月8日下午，来到青海省海北藏族自治州刚察县沙柳河镇果洛藏贡麻村，走进牧民索南才让家中，看望慰问藏族群众。

浏览器打开效果如下：

现在就有换行效果了。

1.3.5 段落标签

上面文字展示的效果还是不太好，我们想让每一段上下都加空行。此时就需要使用段落标签（p标签）
在页面文件中书写如下内容：

<p>刚察草原绿草如茵，沙柳河水流淌入湖。藏族牧民索南才让家中，茶几上摆着馓子、麻花和水果，炉子上刚煮开的奶茶香气四溢……p>
<p>6月8日下午，来到青海省海北藏族自治州刚察县沙柳河镇果洛藏贡麻村，走进牧民索南才让家中，看望慰问藏族群众。 p>

在浏览器展示的效果如下：

1.3.6 加粗、斜体、下划线标签

b：加粗标签
i：斜体标签
u：下划线标签，在文字的下方有一条横线

<b>沙柳河水流淌b><br>
<i>沙柳河水流淌i><br>
<u>沙柳河水流淌u><br>

在浏览器展示的效果如下：

1.3.7 居中标签

center ：文本居中

<center>
    <b>沙柳河水流淌b>
center>

在浏览器效果如下：

1.3.8 案例

实现如下图所示页面效果：
注意：在上图页面中版权所有里有特殊字符，需要使用转义字符。有如下转义字符：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础标签案例title>
head>
<body>
<h1>公司简介h1>
<hr color="yellow">
<p>
    <font color="red">传智教育font>(股票代码003032)，隶属江苏传智播客教育科技股份有限公司，注册资本4亿元，是第一个实现A股IPO的教育企业，公司致力于培养高精尖数字化人才，主要培养人工智能、python+大数据开发、智能制造、软件、互联网、区块链等数字化专业人才及数据分析、网络营销、新媒体等数字化应用人才。公司由一批拥有10年以上开发管理经验，且来自互联网或研究机构的IT精英组成，负责研究、开发教学模式和课程内容。公司具有完善的课程研发体系，一直走在整个行业发展的前端，在行业内竖立起了良好的品质口碑。
p>

<p>
    民族振兴靠人才，中华民族正处于伟大复兴之路上，要赢得国际竞争，需要拥有大量的科技人才，我们将肩负起民族使命，在三尺讲台诲人不倦 著书立说，为科技行业培养出大量的优秀人才，促进民族伟大复兴！我们的使命是：<b>为中华民族伟大复兴而讲课，为千万学生少走弯路而著书。b>
p>

<p>
    探索教育之路，长途漫漫。传智教育希望可以通过自己的努力，寻找出一条更符合人类自然成长规律的教育之路，建立起一个新的教育生态环境，让中国的家长和孩子们在现有的教育体系之外，再多一些选择的机会。因此<b>“探索教育本源，开辟教育新生态”b>便成为了所有传智人为之奋斗的终极愿景，也是所有传智人共同努力的目标。为此，15年来，传智人不曾有一丝懈怠，相信在传智人的不懈努力下，大道不远，终在脚下。
p>
<hr color="yellow">
<center><font color="#a9a9a9">江苏传智播客教育科技股份有限公司font>center>
<center><font color="#a9a9a9">版权所有Copyright 2006-2018©, All Rights Reserved 苏ICP备16007882font>center>
<hr>
body>
html>

1.4 图片、音频、视频标签

img：定义图片
- src：规定显示图像的 URL（统一资源定位符）
- height：定义图像的高度
- width：定义图像的宽度
- alt：图片不能正常显示时，显示的文字
- title：鼠标悬停在图片上显示的文字
audio：定义音频。支持的音频格式：MP3、WAV、OGG
- src：规定音频的 URL
- controls：显示播放控件
video：定义视频。支持的音频格式：MP4, WebM、OGG
- src：规定视频的 URL
- controls：显示播放控件

尺寸单位：

height属性和width属性有两种设置方式：
- 像素：单位是px
- 百分比。占父标签的百分比。例如宽度设置为 50%，意思就是占它的父标签宽度的一般（50%）

资源路径：

图片，音频，视频标签都有src属性，而src是用来指定对应的图片，音频，视频文件的路径。此处的图片，音频，视频就称为资源。资源路径有如下两种设置方式：

绝对路径：完整路径
- 这里的绝对路径是网络中的绝对路径。
- 格式为：协议://ip地址:端口号/资源名称。

<img src="https://th.bing.com/th/id/R33674725d9ae34f86e3835ae30b20afe?rik=Pb3C9e5%2b%2b3a9Vw&riu=http%3a%2f%2fwww.desktx.com%2fd%2ffile%2fwallpaper%2fscenery%2f20180626%2f4c8157d07c14a30fd76f9bc110b1314e.jpg&ehk=9tpmnrrRNi0eBGq3CnhwvuU8PPmKuy1Yma0zL%2ba14T0%3d&risl=&pid=ImgRaw" width="300" height="400">

这里src属性的值就是网络中的绝对路径。

相对路径：相对位置关系
- 找页面和其他资源的相对路径。
  - ./ 表示当前路径
  - …/ 表示上一级路径
  - …/…/ 表示上两级路径

如模块目录结构如下：

在 01-基础标签.html 里的标签中找不同的图片，路径写法不同


<img src="../img/a.jpg" width="300" height="400">

<img src="aa.jpg" width="300" height="400">

使用这些标签的代码如下：

<img src="../img/a.jpg" width="300" height="400" alt="看不到图片才能看见我" title="我是悬停才能显示出来的">
<audio src="b.mp3" controls>audio>
<video src="c.mp4" controls width="500" height="300">video>

在浏览器展示的效果如下：

1.5 超链接标签

在网页中可以看到很多超链接标签，如下

上图红框中的都是超链接，当我们点击这些超链接时会跳转到其他的页面或者资源。而超链接使用的是 a 标签。

a 标签属性：
- href：指定访问资源的URL
- target：指定打开资源的方式
  - _self：默认值，在当前页面打开
  - _blank：在空白页面打开
    代码演示：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
	<a href="https://www.itcast.cn" target="_self">点我有惊喜a>
body>
html>

当我们将 target 属性值设置为 _blank，效果图示：

1.6 列表标签

HTML 中列表分为
- 有序列表
  - 如下图，页面效果中是有标号对每一项进行标记的。
- 无序列表
  - 如下图，页面效果中没有标号对每一项进行标记，而是使用点进行标记。
标签说明：

1.6.1 列表中图表类型

有序列表
- type 属性用来指定标记的标号的类型
  - （数字、字母、罗马数字等）
- start 属性用来定义起始值
- reversed 属性用来定义升序或者降序（不写则为升序）
无序列表
- type 属性用来指定标记的形状
  - disc：黑圆点
  - circle：空圆点
  - square：黑正方形

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
    <ol type="A">
        <li>咖啡li>
        <li>茶li>
        <li>牛奶li>
    ol>
    
    <ul type="circle">
        <li>咖啡li>
        <li>茶li>
        <li>牛奶li>
    ul>
body>
html>

显示效果：

1.6.2 去除有序列表和无序列表前端图标

在定义列表中添加

style="list-style-type: none"

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<ol type="A" style="list-style-type: none">
    <li>咖啡li>
    <li>茶li>
    <li>牛奶li>
ol>
<ul type="circle" style="list-style-type: none">
    <li>咖啡li>
    <li>茶li>
    <li>牛奶li>
ul>
body>
html>

显示效果：

1.6.3 列表扩展

定义列表
- - 定义标签
- - 定义标题
- - 定义描述

<dl>
    <dt>定义列表的标题1dt>
    <dd>定义列表的描述1dd>
    <dt>定义列表的标题2dt>
    <dd>定义列表的描述2dd>
dl>

显示效果：

列表嵌套

<ul>
    <li>我是无序的li>
    <ol>
        <li>我是有序的li>
    ol>
    <ol>
        <li>我是有序的2li>
        <ul>
            <li>我是无序的2li>
        ul>
    ol>
ul>

显示效果：

1.7 表格标签

如上图就是一个表格，表格可以使用如下标签定义

table ：定义表格
- border：规定表格边框的宽度
- width ：规定表格的宽度
- cellspacing：规定单元格之间的空白
th：定义表头单元格
caption：自定义表格标题
tr ：定义行
- align：定义表格行的内容对齐方式
td ：定义单元格
- rowspan:规定单元格可横跨的行数（即合并单元格个数）
- colspan:规定单元格可横跨的列数（即合并单元格个数）

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>

<table border="1" cellspacing="0" width="500">
    <tr>
        <th>序号th>
        <th>品牌logoth>
        <th>品牌名称th>
        <th>企业名称th>
    tr>
    <tr align="center">
        <td>010td>
        <td><img src="../img/三只松鼠.png" width="60" height="50">td>
        <td>三只松鼠td>
        <td>三只松鼠td>
    tr>

    <tr align="center">
        <td>009td>
        <td><img src="../img/优衣库.png" width="60" height="50">td>
        <td>优衣库td>
        <td>优衣库td>
    tr>
    <tr align="center">
        <td>008td>
        <td><img src="../img/小米.png" width="60" height="50">td>
        <td>小米td>
        <td>小米科技有限公司td>
    tr>
table>
body>
html>

1.8 布局标签

这两个标签，一般都是和css结合到一块使用来实现页面的布局。
div标签在浏览器上会有换行的效果，而 span 标签在浏览器上没有换行效果。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
    <div>我是divdiv>
    <div>我是divdiv>
    <span>我是spanspan>
    <span>我是spanspan>
body>
html>

浏览器效果如下

1.9 表单标签

表单标签效果大家其实都不陌生，像登陆页面、注册页面等都是表单。

像这样的表单就是用来采集用户输入的数据，然后将数据发送到服务端，服务端会对数据库进行操作，比如注册就是将数据保存到数据库中，而登陆就是根据用户名和密码进行数据库的查询操作。

1.9.1 表单标签概述

表单：在网页中主要负责数据采集功能，使用< form >标签定义表单
- 表单项(元素)：不同类型的 input 元素、下拉列表、文本域等

form 是表单标签，它在页面上没有任何展示的效果。需要借助于表单项标签来展示不同的效果。如下图就是不同的表单项标签展示出来的效果。

1.9.2 form标签属性

action：规定当提交表单时向何处发送表单数据，该属性值就是URL
- 以后会将数据提交到服务端，该属性需要书写服务端的URL。而今天我们可以书写 # ，表示提交到当前页面来看效果。
method ：规定用于发送表单数据的方式
- method取值有如下两种：
  - get：默认值。如果不设置method属性则默认就是该值
    - 请求参数会拼接在URL后边
    - url的长度有限制 4KB
  - post：
    - 浏览器会将数据放到http请求消息体中
    - 请求参数无限制的

1.9.3 代码演示

由于表单标签在页面上没有任何展示的效果，所以在演示的过程是会先使用 input 这个表单项标签展示输入框效果。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
    <form>
        <input type="text">
        <input type="submit">
    form>
body>
html>

浏览器展示效果如下：

从效果可以看到页面有一个输入框，用户可以在数据框中输入自己想输入的内容，点击提交按钮以后会将数据发送到服务端，当然现在肯定不能实现。现在我们可以将 form 标签的 action 属性值设置为 # ，将其将数据提交到当前页面。还需要注意一点，要想提交数据，input 输入框必须设置 name 属性。代码如下：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
    <form action="#">
        <input type="text" name="username">
        <input type="submit">
    form>
body>
html>

浏览器展示效果如下：

在输入框输入 haha ，然后点击 提交 按钮，就能看到如下效果

我们可以看到在浏览器的地址栏的URL后拼接了我们提交的数据。username 就是输入框 name 属性值，而 hehe 就是我们在输入框输入的内容。
接下来我们来聊 method 属性，默认是 method = 'get'，所以该取值就会将数据拼接到URL的后面。那我们将 method 属性值设置为 post，浏览器的效果如下：

从上图可以看出数据并没有拼接到 URL 后，那怎么看提交的数据呢？我们可以使用浏览器的开发者工具来查看

按照如上步骤操作能看到如下页面

重新提交数据后，可以看到提交的数据，如下图

1.10 表单项标签

表单项标签有很多，不同的表单项标签有不同的展示效果。表单项标签可以分为以下三个：

：表单项，通过type属性控制输入形式
- input 标签有个 type 属性。 type 属性的取值不同，展示的效果也不一样

：文本域 <ul> <li>如下图就是文本域效果。它可以输入多行文本，而 <code>input</code> 数据框只能输入一行文本。 <a href="http://img.e-com-net.com/image/info8/63a62bab8dae448aad8a3cfd56bb069d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/63a62bab8dae448aad8a3cfd56bb069d.jpg" alt="请添加图片描述" width="251" height="63"></a></li> </ul> </li> </ul> <blockquote> 注意： <ul> <li>以上标签项的内容要想提交，必须得定义 <code>name</code> 属性。</li> <li>每一个标签都有id属性，id属性值是唯一的标识。</li> <li>单选框、复选框、下拉列表需要使用 <code>value</code> 属性指定提交的值。</li> </ul> </blockquote> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="#" method="post"> <input type="hidden" name="id" value="123"> <label for="username">用户名：</label> <input type="text" name="username" id="username"><br> <label for="password">密码：</label> <input type="password" name="password" id="password"><br> 性别： <input type="radio" name="gender" value="1" id="male"> <label for="male">男</label> <input type="radio" name="gender" value="2" id="female"> <label for="female">女</label> <br> 爱好： <input type="checkbox" name="hobby" value="1"> 旅游 <input type="checkbox" name="hobby" value="2"> 电影 <input type="checkbox" name="hobby" value="3"> 游戏 <br> 头像： <input type="file"><br> 城市: <select name="city"> <option>北京</option> <option value="shanghai">上海</option> <option>广州</option> </select> <br> 个人描述： <textarea cols="20" rows="5" name="desc"></textarea> <br> <br> <input type="submit" value="免费注册"> <input type="reset" value="重置"> <input type="button" value="一个按钮"> </form> </body> </html> </code></pre> 在浏览器的效果如下： <a href="http://img.e-com-net.com/image/info8/1b217a809e88427786e866c0affa6574.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/1b217a809e88427786e866c0affa6574.jpg" alt="DAY07_HTML&CSS_第54张图片" width="491" height="532" style="border:1px solid black;"></a> <h1>2 CSS</h1> <h2>2.1 概述</h2> <ul> <li>CSS 是一门语言，用于控制网页表现</li> <li>我们之前介绍过W3C标准。W3C标准规定了网页是由以下组成： <ul> <li>结构：HTML</li> <li>表现：CSS</li> <li>行为：JavaScript</li> </ul> </li> <li>CSS也有一个专业的名字：Cascading Style Sheet（层叠样式表）</li> </ul> 如下面的代码， <code>style</code> 标签中定义的就是css代码。该代码描述了将 div 标签的内容的字体颜色设置为红色。 <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ color: red; } </style> </head> <body> <div>Hello CSS~</div> </body> </html> </code></pre> 在浏览器中的效果如下： <a href="http://img.e-com-net.com/image/info8/6387d85d6b9c4c3e953f0ab2cacd76eb.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/6387d85d6b9c4c3e953f0ab2cacd76eb.jpg" alt="DAY07_HTML&CSS_第55张图片" width="516" height="209" style="border:1px solid black;"></a> <h2>2.2 css 导入方式</h2> css 导入方式其实就是 css 代码和 html 代码的结合方式。 CSS 导入 HTML有三种方式： <ul> <li>内联样式：在标签内部使用style属性，属性值是css属性键值对 <ul> <li>给方式只能作用在这一个标签上，如果其他的标签也想使用同样的样式，那就需要在其他标签上写上相同的样式。复用性太差。</li> </ul> </li> </ul> <pre><code class="prism language-html"> <div style="color: red">Hello CSS~</div> </code></pre> <ul> <li>内部样式：定义<style>标签，在标签内部定义css样式 <ul> <li>这种方式可以做到在该页面中复用。</li> </ul> </li> </ul> <pre><code class="prism language-html"> <style type="text/css"> div{ color: red; } </style> </code></pre> <ul> <li>外部样式：定义link标签，引入外部的css文件 <ul> <li>这种方式可以在多个页面进行复用。其他的页面想使用同样的样式，只需要使用 <code>link</code> 标签引入该css文件。</li> </ul> </li> </ul> 编写一个css文件。名为：demo.css，内容如下: <pre><code class="prism language-css"> p{ color: red; } </code></pre> 在html中引入 css 文件。 <pre><code class="prism language-html"> <link rel="stylesheet" href="demo.css"> </code></pre> 项目目录结构如下： <a href="http://img.e-com-net.com/image/info8/d3bc80c848da4f8492ee950e4989720c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d3bc80c848da4f8492ee950e4989720c.jpg" alt="DAY07_HTML&CSS_第56张图片" width="347" height="184" style="border:1px solid black;"></a> 编写页面 <code>02-导入方式.html</code>，内容如下： <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> span{ color: red; } </style> <link href="../css/demo.css" rel="stylesheet"> </head> <body> <div style="color: red">hello css</div> <span>hello css </span> <p>hello css</p> </body> </html> </code></pre> <h2>2.3 css 选择器</h2> css 选择器就是选取需设置样式的元素（标签），比如如下css代码： <pre><code class="prism language-css">div { color:red; } </code></pre> 如上代码中的 <code>div</code> 就是 css 中的选择器。 <ul> <li>元素选择器（标签名选择器）</li> </ul> <pre><code class="prism language-css">元素名称{color: red;} 例子： div {color:red} /*该代码表示将页面中所有的div标签的内容的颜色设置为红色*/ </code></pre> <ul> <li>id选择器</li> </ul> <pre><code class="prism language-css">#id属性值{color: red;} 例子： html代码如下： <div id="name">hello css2</div> css代码如下： #name{color: red;}/*该代码表示将页面中所有的id属性值是 name 的标签的内容的颜色设置为红色*/ </code></pre> <ul> <li>类选择器</li> </ul> <pre><code class="prism language-css">.class属性值{color: red;} 例子： html代码如下： <div class="cls">hello css3</div> css代码如下： .cls{color: red;} /*该代码表示将页面中所有的class属性值是 cls 的标签的内容的颜色设置为红色*/ </code></pre> eg： <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ color: red; } #name{ color: blue; } .cls{ color: pink; } </style> </head> <body> <div>div1</div> <div id="name">div2</div> <div class="cls">div3</div> <span class="cls">span</span> </body> </html> </code></pre> <ul> <li>分组选择器：多个合并在一起</li> </ul> <pre><code class="prism language-css">#id,.类名,标签名{css 样式代码} </code></pre> <ul> <li>属性选择器</li> </ul> <pre><code class="prism language-css">标签名[属性名="值"]{css 样式代码} </code></pre> <ul> <li>任意元素选择器</li> </ul> <pre><code class="prism language-css">*{css样式代码} </code></pre> <ul> <li>伪类选择器：选择的是标签的状态</li> </ul> <pre><code class="prism language-css">选择器：伪类{css样式代码} 未访问：link 访问过：visited 悬停：hover 点击：active </code></pre> <ul> <li>子元素选择器：</li> </ul> <pre><code class="prism language-css">匹配div中的div中的所有子元素的p div>div>p{css样式代码} </code></pre> <ul> <li>子孙后代选择器</li> </ul> <pre><code class="prism language-css">匹配div中的div中的所有元素p div div p{css样式代码} </code></pre> <h2>2.4 css属性</h2> <h3>2.4.1 背景属性background</h3> <table> <thead> <tr> <th align="left">属性</th> <th align="left">属性说明</th> </tr> </thead> <tbody> <tr> <td align="left">background-color</td> <td align="left">设置背景颜色</td> </tr> <tr> <td align="left">background-image:url(“路径”)</td> <td align="left">设置背景图片</td> </tr> <tr> <td align="left">background-repeat:no-repeat</td> <td align="left">禁止重复设置背景图片铺排方式</td> </tr> <tr> <td align="left">background-position:横% 纵%</td> <td align="left">设置背景图片位置</td> </tr> <tr> <td align="left">background-size:高px 宽px</td> <td align="left">设置背景图片尺寸</td> </tr> </tbody> </table> <h3>2.4.2 元素显示方式display</h3> <table> <thead> <tr> <th align="left">属性</th> <th align="left">属性说明</th> <th align="left">举例</th> </tr> </thead> <tbody> <tr> <td align="left">block</td> <td align="left">块级元素，独占一行，可设置宽高</td> <td align="left">h1~h6，p，div</td> </tr> <tr> <td align="left">inline</td> <td align="left">行内元素，共占一行，不可修改宽高</td> <td align="left">b，a，i，small，span</td> </tr> <tr> <td align="left">inline-block</td> <td align="left">行内块元素，共占一行，可设置宽高</td> <td align="left">img</td> </tr> <tr> <td align="left">none</td> <td align="left">隐藏元素</td> <td align="left"></td> </tr> </tbody> </table> <h3>2.4.3 文本与字体相关样式</h3> <table> <thead> <tr> <th align="left">属性</th> <th align="left">参数</th> <th align="left">说明</th> </tr> </thead> <tbody> <tr> <td align="left">text-align</td> <td align="left">left左，right右，center剧中，justify两端对齐</td> <td align="left">文本对齐方式</td> </tr> <tr> <td align="left">text-decoration</td> <td align="left">overline上，underline下，line-through划词</td> <td align="left">下划线</td> </tr> <tr> <td align="left">text-shadow</td> <td align="left">h-shadow X值，v-shadow Y值，blur浓度，color颜色</td> <td align="left">文本阴影</td> </tr> <tr> <td align="left">line-height</td> <td align="left">px 可实现上下居中</td> <td align="left">行高</td> </tr> <tr> <td align="left">font-size</td> <td align="left">px</td> <td align="left">字体大小</td> </tr> <tr> <td align="left">font-weight</td> <td align="left">blod加粗，bolder加粗，normal解除加粗</td> <td align="left">字体加粗</td> </tr> <tr> <td align="left">font-family</td> <td align="left">cursive草书</td> <td align="left">设置字体</td> </tr> <tr> <td align="left">font-style</td> <td align="left">italic斜体，normal解除斜体</td> <td align="left">斜体</td> </tr> <tr> <td align="left">color</td> <td align="left"></td> <td align="left">字体颜色</td> </tr> <tr> <td align="left">font</td> <td align="left">30px cursive</td> <td align="left">字体大小和字体设置</td> </tr> <tr> <td align="left">letter-spacing</td> <td align="left">px</td> <td align="left">设置字符间距</td> </tr> <tr> <td align="left">text-indet</td> <td align="left">px</td> <td align="left">首行缩进</td> </tr> <tr> <td align="left">vertical-align</td> <td align="left">middle</td> <td align="left">和同行内其他设置该属性的元素对齐</td> </tr> </tbody> </table> <h2>2.5 盒子模型</h2> <ul> <li>盒子模型 <ul> <li>宽高+外边距+边框+内边框 <ul> <li>宽高：负责控制元素的大小</li> <li>外边距：负责元素的显示位置</li> <li>边框：负责边框</li> <li>内边距：负责控制元素内容的位置</li> </ul> </li> </ul> </li> </ul> <h3>2.5.1 盒子模型-宽高</h3> <ul> <li>width</li> <li>height <ul> <li>属性值为px像素或者上级元素的百分比</li> </ul> </li> </ul> <h3>2.5.2 盒子模型-外边距</h3> <ul> <li>margin <ul> <li>元素距上级或相邻元素的距离</li> </ul> </li> <li>赋值方式： <ul> <li>margin-top/right/down/left：px</li> <li>margin：10px 20px <ul> <li>上下10px 左右20px</li> </ul> </li> <li>margin：10px <ul> <li>上右下左各10px</li> </ul> </li> <li>margin：0 auto <ul> <li>水平居中</li> </ul> </li> <li>margin：10px 20px 30px 40px <ul> <li>上10px 右20px 下30px 左40px</li> </ul> </li> </ul> </li> <li>粘连问题 <ul> <li>当元素的上边缘与上级元素上边缘重叠时会出现该问题</li> <li>解决方案： <ul> <li>给上级元素添加： <ul> <li>overflow:hidden即可解决</li> </ul> </li> </ul> </li> </ul> </li> </ul> <h3>2.5.3 盒子模型-边框</h3> <ul> <li>赋值方式： <ul> <li>border：粗细px，边框样式，边框颜色</li> <li>border-top/right/bottom/left：px，样式，颜色</li> </ul> </li> <li>圆角： <ul> <li>border-radius：px <ul> <li>值越大角越圆润</li> </ul> </li> </ul> </li> <li>边框样式： <ul> <li>none：无边框</li> <li>solid：实线</li> <li>dashed：虚线</li> <li>dotted：点状线</li> <li>double：双实线</li> <li>inherit：继承父元素</li> <li>hidden：解决边框冲突</li> </ul> </li> <li>边框折叠（合并）： <ul> <li>border-collapse：collapse;</li> </ul> </li> </ul> <h3>2.5.4 盒子模型-内边距</h3> <ul> <li>padding <ul> <li>元素边缘距离内容的距离</li> </ul> </li> <li>赋值方式： <ul> <li>padding-top/right/bottom/left：px</li> <li>padding：10px <ul> <li>上右下左各10px</li> </ul> </li> <li>padding：10px 20px <ul> <li>上下10px 左右20px</li> </ul> </li> <li>padding：10px 20px 30px 40px <ul> <li>上10px 右20px 下30px 左40px</li> </ul> </li> </ul> </li> </ul> <h2>2.6 css的三大特征</h2> <ul> <li>继承性 <ul> <li>元素可继承上级元素的相关样式，元素自身所带的效果不受继承影响 <ul> <li>超链接字体颜色，h1~h6字体大小</li> </ul> </li> </ul> </li> <li>层叠性 <ul> <li>不同的选择器有可能选择同一标签，如添加样式不同，则全部层叠生效，如添加相同，则有选择器优先级决定</li> </ul> </li> <li>优先级 <ul> <li>作用范围越小优先级越高 <ul> <li>id>class>标签名>继承</li> </ul> </li> </ul> </li> </ul> <h2>2.7 定位方式4+1</h2> <ul> <li>4+1 <ul> <li>position四种</li> <li>float一种</li> </ul> </li> </ul> <h3>2.7.1 position：static 静态定位</h3> <ul> <li>文档流定位： <ul> <li>元素的默认定位方式，块级元素从上到下，行内元素从左到右</li> <li>通过外边距控制元素所在位置</li> </ul> </li> </ul> <h3>2.7.2 position：relative 相对定位</h3> <ul> <li>元素不脱离文档流： <ul> <li>不管元素移动到哪里，原来位置一直占着</li> <li>元素通过left/right/top/bottom 相对于元素的初始位置做便宜</li> </ul> </li> </ul> <h3>2.7.3 position：absolute 绝对定位</h3> <ul> <li>元素脱离文档流： <ul> <li>需要在上级元素添加相对定位</li> <li>元素通过left/right/top/bottom相对于窗口或某一个上级元素做偏移</li> </ul> </li> </ul> <h3>2.7.4 position：fixed 固定定位</h3> <ul> <li>元素脱离文档流： <ul> <li>元素通过left/right/top/bottom相对于窗口做偏移</li> </ul> </li> </ul> <h3>2.7.5 float：left/right 浮动定位</h3> <ul> <li>元素脱离文档流： <ul> <li>元素从当前行向左或向右移动，当撞到上级元素边框或其他浮动元素时停止</li> <li>一行如果装不下，会自动换行，换行时会被卡住</li> <li>如果元素的所有子元素全部浮动，则自动识别的高度为0，通过给元素添加overflow：hidden解决</li> </ul> </li> <li>应用场景： <ul> <li>当纵向排列改为横向排列时使用浮动定位</li> </ul> </li> </ul> <h2>2.8 溢出设置 overflow</h2> <ul> <li>hidden： <ul> <li>超出隐藏</li> </ul> </li> <li>visible： <ul> <li>超出显示（默认）</li> </ul> </li> <li>scroll： <ul> <li>超出滚动显示</li> </ul> </li> </ul> <h2>2.9 css文档</h2> css属性我们不作为重点讲解。我们简单的看一下css的文档 <a href="http://img.e-com-net.com/image/info8/4a1e497c42894bb1bb146198cd9e3ca0.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/4a1e497c42894bb1bb146198cd9e3ca0.jpg" alt="DAY07_HTML&CSS_第57张图片" width="650" height="349" style="border:1px solid black;"></a> css有很多css属性，你要想把它们都学会，需要花费很长的时间。而我们作为java程序员，不需要重点掌握这部分内容。对于网页三剑客中css是对我们要求最低的。给大家简单介绍一下文档怎么查看即可，如下我们看一个 <code>background-color</code> 属性 <a href="http://img.e-com-net.com/image/info8/66167d08e60341e2bb9c131c41489b07.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/66167d08e60341e2bb9c131c41489b07.jpg" alt="DAY07_HTML&CSS_第58张图片" width="650" height="379" style="border:1px solid black;"></a> 点击进去后能看到下面界面 <a href="http://img.e-com-net.com/image/info8/508d07cb25764dc09661ddab5e075002.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/508d07cb25764dc09661ddab5e075002.jpg" alt="DAY07_HTML&CSS_第59张图片" width="650" height="324" style="border:1px solid black;"></a> 上面就列举了该属性的具体的使用，你也可以点击下面的 <code>亲自试一试</code> 看效果。 <h1>3 扩展frameset-简单的框架分布页面</h1> <ul> <li>frameset相关属性： <ul> <li>border：边框粗细</li> <li>bordercolor：边框颜色</li> <li>frameborder：显示边框0不要1要</li> <li>framespacing：框架之间距离</li> <li>cols：纵向分割页面</li> <li>rows：横向分割页面</li> </ul> </li> <li>frame相关属性： <ul> <li>name：框架名称</li> <li>src：路径</li> <li>scroling：滚动条（suto，yes，no）</li> <li>bordercolor：框架边框颜色</li> <li>frameborder：是否显示边框0不要1要</li> <li>noresize：设置框架大小，是否能手动调节</li> <li>width/height：框架宽高</li> <li>morginwidth/margingeight：框架与其内容之间距离</li> </ul> </li> <li>iframe： <ul> <li>浮动的框架，属性值与frame相似</li> <li>align=“middle”：设置水平或者垂直对齐</li> <li>allowTransparency：设置或获取对象是否可为透明</li> </ul> </li> <li>frameset标签必须放在head和body标签之间</li> </ul> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Frameset</title> </head> <frameset rows = "14%,86%" frameborder = "0"> <frame src = "_top.html"/> <frameset cols = "18%,*"> <frame src = "_left.html"/> <frame src = "_right.html" name = "rightFrame"> </frameset> </frameset> <body> </body> </html> </code></pre> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1668379051233992704"></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">  <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>  <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>  <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">你可能感兴趣的:(JavaWeb,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> igotyback <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> 某公司摸鱼前端 <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> 彩云飘过 <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> STU学生网页设计 <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> 二挡起步 <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> 二挡起步 <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> dmengmeng <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> 有一只柴犬 <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> 夜空_2cd3 <div>作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*</div> </li> <li><a href="/article/1835403246865313792.htm" title="斟一小组鸡血视频" target="_blank">斟一小组鸡血视频</a> 和自己一起成长 <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> 清风怎不知意 <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> 陈在天box <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> Cavalier_01 <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> html+css+js网页设计 <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> zoyation <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> Derek重名了 <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> 周bro <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> 周bro <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> 马小蜗 <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> 红匣子实力推荐 <div>随着科技的不断发展，移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下，H5小游戏应运而生，为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式，正逐渐受到市场的关注和青睐。那么，什么是H5小游戏定制开发呢？它又具有哪些特点和优势呢？让我们一起来深入了解一下。首先，我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏，可以在移动端、PC端等多平台</div> </li> <li><a href="/article/1835362136054919168.htm" title="探索Zebra4J：构建高效企业级Web应用的微服务框架" target="_blank">探索Zebra4J：构建高效企业级Web应用的微服务框架</a> 叶准鑫Natalie <div>探索Zebra4J：构建高效企业级Web应用的微服务框架ZebraZebra4J/Zebra4Js基于SpringBoot的JavaWeb/Nodejs框架项目地址:https://gitcode.com/gh_mirrors/zebra/Zebra项目介绍在当今快速发展的技术环境中，构建高效、可扩展的企业级Web应用是每个开发团队的追求。Zebra4J作为一款基于SpringBoot的全新微服务</div> </li> <li><a href="/article/1835362025719558144.htm" title="css2中的透明" target="_blank">css2中的透明</a> 琪33 <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> 听你讲故事啊 <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> 张某布响丸辣 <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> ZhangTao_zata <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> 天秤-white <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/1835344485802930176.htm" title="基于JavaWeb开发的Java+SpringMvc+vue+element实现上海汽车博物馆平台" target="_blank">基于JavaWeb开发的Java+SpringMvc+vue+element实现上海汽车博物馆平台</a> 网顺技术团队 <a class="tag" taget="_blank" href="/search/%E6%88%90%E5%93%81%E7%A8%8B%E5%BA%8F%E9%A1%B9%E7%9B%AE/1.htm">成品程序项目</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E6%B1%BD%E8%BD%A6/1.htm">汽车</a><a class="tag" taget="_blank" href="/search/%E8%AF%BE%E7%A8%8B%E8%AE%BE%E8%AE%A1/1.htm">课程设计</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a> <div>基于JavaWeb开发的Java+SpringMvc+vue+element实现上海汽车博物馆平台作者主页网顺技术团队欢迎点赞收藏⭐留言文末获取源码联系方式查看下方微信号获取联系方式承接各种定制系统精彩系列推荐精彩专栏推荐订阅不然下次找不到哟Java毕设项目精品实战案例《1000套》感兴趣的可以先收藏起来，还有大家在毕设选题，项目以及论文编写等相关问题都可以给我留言咨询，希望帮助更多的人文章目录基</div> </li> <li><a href="/article/1835342718067372032.htm" title="Python精选200Tips：121-125" target="_blank">Python精选200Tips：121-125</a> AnFany <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> 剑亦未配妥 <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> Bearjumpingcandy <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/96.htm" title="怎么样才能成为专业的程序员？" target="_blank">怎么样才能成为专业的程序员？</a> cocos2d-x小菜 <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a> <div> 如何要想成为一名专业的程序员？仅仅会写代码是不够的。从团队合作去解决问题到版本控制，你还得具备其他关键技能的工具包。当我们询问相关的专业开发人员，那些必备的关键技能都是什么的时候，下面是我们了解到的情况。关于如何学习代码，各种声音很多，然后很多人就被误导为成为专业开发人员懂得一门编程语言就够了？！呵呵，就像其他工作一样，光会一个技能那是远远不够的。如果你想要成为</div> </li> <li><a href="/article/223.htm" title="java web开发高并发处理" target="_blank">java web开发高并发处理</a> BreakingBad <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/%E5%B9%B6%E5%8F%91/1.htm">并发</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91/1.htm">开发</a><a class="tag" taget="_blank" href="/search/%E5%A4%84%E7%90%86/1.htm">处理</a><a class="tag" taget="_blank" href="/search/%E9%AB%98/1.htm">高</a> <div>java处理高并发高负载类网站中数据库的设计方法（java教程,java处理大量数据，java高负载数据）一：高并发高负载类网站关注点之数据库没错,首先是数据库,这是大多数应用所面临的首个SPOF。尤其是Web2.0的应用，数据库的响应是首先要解决的。一般来说MySQL是最常用的，可能最初是一个mysql主机，当数据增加到100万以上，那么，MySQL的效能急剧下降。常用的优化措施是M-S（</div> </li> <li><a href="/article/350.htm" title="mysql批量更新" target="_blank">mysql批量更新</a> ekian <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>mysql更新优化：一版的更新的话都是采用update set的方式，但是如果需要批量更新的话，只能for循环的执行更新。或者采用executeBatch的方式，执行更新。无论哪种方式，性能都不见得多好。三千多条的更新，需要3分多钟。查询了批量更新的优化，有说replace into的方式，即： replace into tableName(id,status) values</div> </li> <li><a href="/article/477.htm" title="微软BI（3）" target="_blank">微软BI（3）</a> 18289753290 <a class="tag" taget="_blank" href="/search/%E5%BE%AE%E8%BD%AFBI+SSIS/1.htm">微软BI SSIS</a> <div>1) Q：该列违反了完整性约束错误；已获得 OLE DB 记录。源:“Microsoft SQL Server Native Client 11.0” Hresult: 0x80004005 说明:“不能将值 NULL 插入列 'FZCHID'，表 'JRB_EnterpriseCredit.dbo.QYFZCH'；列不允许有 Null 值。INSERT 失败。”。 A：一般这类问题的存在是 </div> </li> <li><a href="/article/604.htm" title="Java中的List" target="_blank">Java中的List</a> g21121 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> List是一个有序的 collection（也称为序列）。此接口的用户可以对列表中每个元素的插入位置进行精确地控制。用户可以根据元素的整数索引（在列表中的位置）访问元素，并搜索列表中的元素。与 set 不同，列表通常允许重复</div> </li> <li><a href="/article/731.htm" title="读书笔记" target="_blank">读书笔记</a> 永夜-极光 <a class="tag" taget="_blank" href="/search/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/1.htm">读书笔记</a> <div> 1. K是一家加工厂,需要采购原材料,有A,B,C,D 4家供应商,其中A给出的价格最低,性价比最高,那么假如你是这家企业的采购经理,你会如何决策? 传统决策: A:100%订单 B,C,D:0% &nbs</div> </li> <li><a href="/article/858.htm" title="centos 安装 Codeblocks" target="_blank">centos 安装 Codeblocks</a> 随便小屋 <a class="tag" taget="_blank" href="/search/codeblocks/1.htm">codeblocks</a> <div>1.安装gcc,需要c和c++两部分,默认安装下,CentOS不安装编译器的,在终端输入以下命令即可yum install gccyum install gcc-c++ 2.安装gtk2-devel,因为默认已经安装了正式产品需要的支持库,但是没有安装开发所需要的文档.yum install gtk2* 3. 安装wxGTK yum search w</div> </li> <li><a href="/article/985.htm" title="23种设计模式的形象比喻" target="_blank">23种设计模式的形象比喻</a> aijuans <a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a> <div>1、ABSTRACT FACTORY—追MM少不了请吃饭了，麦当劳的鸡翅和肯德基的鸡翅都是MM爱吃的东西，虽然口味有所不同，但不管你带MM去麦当劳或肯德基，只管向服务员说“来四个鸡翅”就行了。麦当劳和肯德基就是生产鸡翅的Factory 　　工厂模式：客户类和工厂类分开。消费者任何时候需要某种产品，只需向工厂请求即可。消费者无须修改就可以接纳新产品。缺点是当产品修改时，工厂类也要做相应的修改。如：</div> </li> <li><a href="/article/1112.htm" title="开发管理 CheckLists" target="_blank">开发管理 CheckLists</a> aoyouzi <a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E7%AE%A1%E7%90%86+CheckLists/1.htm">开发管理 CheckLists</a> <div>开发管理 CheckLists(23) -使项目组度过完整的生命周期开发管理 CheckLists(22) -组织项目资源开发管理 CheckLists(21) -控制项目的范围开发管理 CheckLists(20) -项目利益相关者责任开发管理 CheckLists(19) -选择合适的团队成员开发管理 CheckLists(18) -敏捷开发 Scrum Master 工作开发管理 C</div> </li> <li><a href="/article/1239.htm" title="js实现切换" target="_blank">js实现切换</a> 百合不是茶 <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E6%A0%8F%E7%9B%AE%E5%88%87%E6%8D%A2/1.htm">栏目切换</a> <div>js主要功能之一就是实现页面的特效,窗体的切换可以减少页面的大小,被门户网站大量应用思路: 1,先将要显示的设置为display:bisible 否则设为none 2,设置栏目的id ,js获取栏目的id,如果id为Null就设置为显示 3,判断js获取的id名字;再设置是否显示代码实现: html代码: <di</div> </li> <li><a href="/article/1366.htm" title="周鸿祎在360新员工入职培训上的讲话" target="_blank">周鸿祎在360新员工入职培训上的讲话</a> bijian1013 <a class="tag" taget="_blank" href="/search/%E6%84%9F%E6%82%9F/1.htm">感悟</a><a class="tag" taget="_blank" href="/search/%E9%A1%B9%E7%9B%AE%E7%AE%A1%E7%90%86/1.htm">项目管理</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E7%94%9F/1.htm">人生</a><a class="tag" taget="_blank" href="/search/%E8%81%8C%E5%9C%BA/1.htm">职场</a> <div> 这篇文章也是最近偶尔看到的，考虑到原博客发布者可能将其删除等原因，也更方便个人查找，特将原文拷贝再发布的。“学东西是为自己的，不要整天以混的姿态来跟公司博弈，就算是混，我觉得你要是能在混的时间里，收获一些别的有利于人生发展的东西，也是不错的，看你怎么把握了”，看了之后，对这句话记忆犹新。 &</div> </li> <li><a href="/article/1493.htm" title="前端Web开发的页面效果" target="_blank">前端Web开发的页面效果</a> Bill_chen <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/Microsoft/1.htm">Microsoft</a> <div>1.IE6下png图片的透明显示： <img src="图片地址" border="0" style="Filter.Alpha(Opacity)=数值(100),style=数值(3)"/> 或在<head></head>间加一段JS代码让透明png图片正常显示。 2.<li>标</div> </li> <li><a href="/article/1620.htm" title="【JVM五】老年代垃圾回收：并发标记清理GC(CMS GC)" target="_blank">【JVM五】老年代垃圾回收：并发标记清理GC(CMS GC)</a> bit1129 <a class="tag" taget="_blank" href="/search/%E5%9E%83%E5%9C%BE%E5%9B%9E%E6%94%B6/1.htm">垃圾回收</a> <div> CMS概述并发标记清理垃圾回收(Concurrent Mark and Sweep GC）算法的主要目标是在GC过程中，减少暂停用户线程的次数以及在不得不暂停用户线程的请夸功能，尽可能短的暂停用户线程的时间。这对于交互式应用，比如web应用来说，是非常重要的。 CMS垃圾回收针对新生代和老年代采用不同的策略。相比同吞吐量垃圾回收，它要复杂的多。吞吐量垃圾回收在执</div> </li> <li><a href="/article/1747.htm" title="Struts2技术总结" target="_blank">Struts2技术总结</a> 白糖_ <a class="tag" taget="_blank" href="/search/struts2/1.htm">struts2</a> <div> 必备jar文件早在struts2.0.*的时候，struts2的必备jar包需要如下几个： commons-logging-*.jar Apache旗下commons项目的log日志包 freemarker-*.jar </div> </li> <li><a href="/article/1874.htm" title="Jquery easyui layout应用注意事项" target="_blank">Jquery easyui layout应用注意事项</a> bozch <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</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/easyui/1.htm">easyui</a><a class="tag" taget="_blank" href="/search/layout/1.htm">layout</a> <div>在jquery easyui中提供了easyui-layout布局，他的布局比较局限，类似java中GUI的border布局。下面对其使用注意事项作简要介绍：如果在现有的工程中前台界面均应用了jquery easyui，那么在布局的时候最好应用jquery eaysui的layout布局，否则在表单页面（编辑、查看、添加等等）在不同的浏览器会出</div> </li> <li><a href="/article/2001.htm" title="java-拷贝特殊链表：有一个特殊的链表，其中每个节点不但有指向下一个节点的指针pNext，还有一个指向链表中任意节点的指针pRand，如何拷贝这个特殊链表？" target="_blank">java-拷贝特殊链表：有一个特殊的链表，其中每个节点不但有指向下一个节点的指针pNext，还有一个指向链表中任意节点的指针pRand，如何拷贝这个特殊链表？</a> bylijinnan <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> public class CopySpecialLinkedList { /** * 题目：有一个特殊的链表，其中每个节点不但有指向下一个节点的指针pNext，还有一个指向链表中任意节点的指针pRand，如何拷贝这个特殊链表？拷贝pNext指针非常容易，所以题目的难点是如何拷贝pRand指针。假设原来链表为A1 -> A2 ->... -> An，新拷贝</div> </li> <li><a href="/article/2128.htm" title="color" target="_blank">color</a> Chen.H <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> <div><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD>&nbs</div> </li> <li><a href="/article/2255.htm" title="[信息与战争]移动通讯与网络" target="_blank">[信息与战争]移动通讯与网络</a> comsci <a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a> <div> 两个坚持:手机的电池必须可以取下来光纤不能够入户,只能够到楼宇建议大家找这本书看看:<&</div> </li> <li><a href="/article/2382.htm" title="oracle flashback query(闪回查询)" target="_blank">oracle flashback query(闪回查询)</a> daizj <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/flashback+query/1.htm">flashback query</a><a class="tag" taget="_blank" href="/search/flashback+table/1.htm">flashback table</a> <div>在Oracle 10g中，Flash back家族分为以下成员： Flashback Database Flashback Drop Flashback Table Flashback Query(分Flashback Query,Flashback Version Query，Flashback Transaction Query) 下面介绍一下Flashback Drop 和Flas</div> </li> <li><a href="/article/2509.htm" title="zeus持久层DAO单元测试" target="_blank">zeus持久层DAO单元测试</a> deng520159 <a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a> <div>zeus代码测试正紧张进行中,但由于工作比较忙,但速度比较慢.现在已经完成读写分离单元测试了,现在把几种情况单元测试的例子发出来,希望有人能进出意见,让它走下去. 本文是zeus的dao单元测试: 1.单元测试直接上代码 package com.dengliang.zeus.webdemo.test; import org.junit.Test; import o</div> </li> <li><a href="/article/2636.htm" title="C语言学习三printf函数和scanf函数学习" target="_blank">C语言学习三printf函数和scanf函数学习</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/printf/1.htm">printf</a><a class="tag" taget="_blank" href="/search/scanf/1.htm">scanf</a><a class="tag" taget="_blank" href="/search/language/1.htm">language</a> <div>printf函数 /* 2013年3月10日20:42:32 地点：北京潘家园功能：目的：测试%x %X %#x %#X的用法 */ # include <stdio.h> int main(void) { printf("哈哈！\n"); // \n表示换行 int i = 10; printf</div> </li> <li><a href="/article/2763.htm" title="那你为什么小时候不好好读书?" target="_blank">那你为什么小时候不好好读书?</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/life/1.htm">life</a> <div>dady, 我今天捡到了十块钱, 不过我还给那个人了 good girl! 那个人有没有和你讲thank you啊没有啦....他拉我的耳朵我才把钱还给他的, 他哪里会和我讲thank you 爸爸, 如果地上有一张5块一张10块你拿哪一张呢.... 当然是拿十块的咯... 爸爸你很笨的, 你不会两张都拿爸爸为什么上个月那个人来跟你讨钱, 你告诉他没</div> </li> <li><a href="/article/2890.htm" title="iptables开放端口" target="_blank">iptables开放端口</a> Fanyucai <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/iptables/1.htm">iptables</a><a class="tag" taget="_blank" href="/search/%E7%AB%AF%E5%8F%A3/1.htm">端口</a> <div>1，找到配置文件 vi /etc/sysconfig/iptables 2，添加端口开放，增加一行，开放18081端口 -A INPUT -m state --state NEW -m tcp -p tcp --dport 18081 -j ACCEPT 3，保存 ESC :wq! 4，重启服务 service iptables </div> </li> <li><a href="/article/3017.htm" title="Ehcache（05）——缓存的查询" target="_blank">Ehcache（05）——缓存的查询</a> 234390216 <a class="tag" taget="_blank" href="/search/%E6%8E%92%E5%BA%8F/1.htm">排序</a><a class="tag" taget="_blank" href="/search/ehcache/1.htm">ehcache</a><a class="tag" taget="_blank" href="/search/%E7%BB%9F%E8%AE%A1/1.htm">统计</a><a class="tag" taget="_blank" href="/search/query/1.htm">query</a> <div>缓存的查询目录 1. 使Cache可查询 1.1 基于Xml配置 1.2 基于代码的配置 2 指定可搜索的属性 2.1 可查询属性类型 2.2 &</div> </li> <li><a href="/article/3144.htm" title="通过hashset找到数组中重复的元素" target="_blank">通过hashset找到数组中重复的元素</a> jackyrong <a class="tag" taget="_blank" href="/search/hashset/1.htm">hashset</a> <div> 如何在hashset中快速找到重复的元素呢?方法很多，下面是其中一个办法： int[] array = {1,1,2,3,4,5,6,7,8,8}; Set<Integer> set = new HashSet<Integer>(); for(int i = 0</div> </li> <li><a href="/article/3271.htm" title="使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL" target="_blank">使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL</a> lanrikey <a class="tag" taget="_blank" href="/search/history/1.htm">history</a> <div>后退时关闭当前页面 <script type="text/javascript"> jQuery(document).ready(function ($) { if (window.history && window.history.pushState) {</div> </li> <li><a href="/article/3398.htm" title="应用程序的通信成本" target="_blank">应用程序的通信成本</a> netkiller.github.com <a class="tag" taget="_blank" href="/search/%E8%99%9A%E6%8B%9F%E6%9C%BA/1.htm">虚拟机</a><a class="tag" taget="_blank" href="/search/%E5%BA%94%E7%94%A8%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">应用服务器</a><a class="tag" taget="_blank" href="/search/%E9%99%88%E6%99%AF%E5%B3%B0/1.htm">陈景峰</a><a class="tag" taget="_blank" href="/search/netkiller/1.htm">netkiller</a><a class="tag" taget="_blank" href="/search/neo/1.htm">neo</a> <div>应用程序的通信成本什么是通信一个程序中两个以上功能相互传递信号或数据叫做通信。什么是成本这是是指时间成本与空间成本。时间就是传递数据所花费的时间。空间是指传递过程耗费容量大小。都有哪些通信方式全局变量线程间通信共享内存共享文件管道 Socket 硬件（串口，USB）等等全局变量全局变量是成本最低通信方法，通过设置</div> </li> <li><a href="/article/3525.htm" title="一维数组与二维数组的声明与定义" target="_blank">一维数组与二维数组的声明与定义</a> 恋洁e生 <a class="tag" taget="_blank" href="/search/%E4%BA%8C%E7%BB%B4%E6%95%B0%E7%BB%84/1.htm">二维数组</a><a class="tag" taget="_blank" href="/search/%E4%B8%80%E7%BB%B4%E6%95%B0%E7%BB%84/1.htm">一维数组</a><a class="tag" taget="_blank" href="/search/%E5%AE%9A%E4%B9%89/1.htm">定义</a><a class="tag" taget="_blank" href="/search/%E5%A3%B0%E6%98%8E/1.htm">声明</a><a class="tag" taget="_blank" href="/search/%E5%88%9D%E5%A7%8B%E5%8C%96/1.htm">初始化</a> <div>/** * */ package test20111005; /** * @author FlyingFire * @date:2011-11-18 上午04:33:36 * @author ：代码整理 * @introduce :一维数组与二维数组的初始化 *summary： */ public c</div> </li> <li><a href="/article/3652.htm" title="Spring Mybatis独立事务配置" target="_blank">Spring Mybatis独立事务配置</a> toknowme <a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a> <div>在项目中有很多地方会使用到独立事务，下面以获取主键为例（1）修改配置文件spring-mybatis.xml  <tx:annotation-driven transaction-manager="transactionManager" /> &n</div> </li> <li><a href="/article/3779.htm" title="更新Anadroid SDK Tooks之后，Eclipse提示No update were found" target="_blank">更新Anadroid SDK Tooks之后，Eclipse提示No update were found</a> xp9802 <a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a> <div>使用Android SDK Manager 更新了Anadroid SDK Tooks 之后，打开eclipse提示 This Android SDK requires Android Developer Toolkit version 23.0.0 or above, 点击Check for Updates 检测一会后提示 No update were found </div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> 按字母分类： <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.  </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>