html5+Css总结(附带案例)

HtmL5 和CSS一些常见总结

前端(通常指的是用户能够看到)网页通常是由三部分组成:

1.html:也是前端网页基本框架结构,类似于骨架一样的作用

2.CSS: 也叫层叠样式表,就是为美化界面而存在

3.Javascript: 使页面具有动态的效果(包括与用户的一个交互)

一&二.Html

HTML(超文本标记语言——HyperText Markup Language)是构成 Web 世界的一砖一瓦。它是一种用来告知浏览器如何组织页面的标记语言

所谓超文本Hypertext,是指连接单个或者多个网站间的网页的链接。我们通过链接,就能访问互联网中的内容。

所谓标记Markup ,是用来注明文本,图片等内容,以便于在浏览器中显示,例如,等。

  • HTML发展简史【了解】
    • HTML 1.0在1993年6月作为互联网工程工作小组(IETF)工作草案发布(并非标准)
    • HTML 2.0——1995年11月作为RFC 1866发布,在RFC 2854于2000年6月发布之后被宣布已经过时
    • HTML 3.2——1997年1月14日,W3C推荐标准
    • HTML 4.0——1997年12月18日,W3C推荐标准
    • HTML 4.01(微小改进)——1999年12月24日,W3C推荐标准
    • HTML5 —— 2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力,该标准规范终于制定完成。是目前最为流行的版本,提供了很多标签新特性,现代大多数浏览器已经具备了 HTML5的支持。

1.1.2 HTML的组成

HTML页面由一系列的元素(elements) 组成,而元素是使用标签创建的。

1)标签

一对标签( tags)可以设置一段文字样式,添加一张图片或者添加超链接等等。 例如:

<h1>今天是个好日子h1>

在HTML中,

标签表示标题,那么,我们可以使用开始标签结束标签包围文本内容,这样其中的内容就以标题的形式显示了。

html5+Css总结(附带案例)_第1张图片

2)属性

HTML标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。我们只能在开始标签中,加入属性。通常以名称=值成对的形式出现,比如:name=‘value’。例如:

<h1 align="center">今天是个好日子!!!h1>

在HTML标签中,align 属性表示水平对齐方式,我们可以赋值为 center 表示 居中

属性也可当做是html原始一种修饰界面的方式之一

html5+Css总结(附带案例)_第2张图片

1.2Html界面构造

  1. : 声明文档类型。规定了HTML页面必须遵从的良好规则,从HTML5后,是最短的有效的文档声明。

  2. :这个标签包裹了整个完整的页面,是一个根元素(顶级元素)。其他所有元素必须是此元素的后代,每篇HTML文档只有一个根元素。

  3. :这个标签是一个容器,它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述,CSS样式,字符集声明等等。关于 元素的内容。目前主要了解两个标签:

    1. :这个标签是页面的元数据信息,设置文档使用utf-8字符集编码,utf-8字符集包含了人类大部分的文字,避免页面乱码问题。

    2. </code>:这个标签定义文档标题,位置出现在浏览器标签上,而不是页面正文中。在收藏页面时,它可用来描述页面。<br> <a href="http://img.e-com-net.com/image/info8/80d5dca7788b4b3b9c2d14234007e90f.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/80d5dca7788b4b3b9c2d14234007e90f.png" alt="在这里插入图片描述" width="326" height="46"></a></p> </li> </ol> </li> <li> <p><code><body></code>:包含了文档内容,你访问页面时所有显示在页面上的文本,图片,音频,游戏等等。<strong>body也是代码主体部分,也是希望显示的界面内容</strong></p> </li> </ol> <pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>这是一个HTML页面<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <p>​ <strong>整个html界面包含head和body两部分组成,学习html时主要学习的东西便是body中一些标签的使用,以及标签中附带的一些属性。</strong></p> <h2>1.3 一些常见标签</h2> <blockquote> <p><strong>标签的构成:</strong></p> <p><标签名 属性名=属性值>文本内容</标签名></p> </blockquote> <ul> <li>P标签 :段落标签,其前后都会被空出</li> <li> :注释标签 </li> <li>b标签: 强调标签</li> </ul> <pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>这是一个HTML页面<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>这是一个段落标签!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>这是第二段标签<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> <span class="token comment"><!--注释部分,br表示换行标签--></span> 这是其他内容 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/e1ece3b27b0641179d2f5d807f14734c.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/e1ece3b27b0641179d2f5d807f14734c.png" alt="html5+Css总结(附带案例)_第3张图片" width="435" height="389" style="border:1px solid black;"></a></p> <h3>1.3.1 文本标签</h3> <p>使用文本内容标签设置文字基本样式。</p> <table> <thead> <tr> <th>标签名</th> <th>作用</th> </tr> </thead> <tbody> <tr> <td>p</td> <td>表示文本的一个段落</td> </tr> <tr> <td>h</td> <td>表示文档标题,<code><h1>–<h6></code> ,呈现了六个不同的级别的标题,<code><h1></code> 级别最高,而 <code><h6></code> 级别最低</td> </tr> <tr> <td>hr</td> <td>表示段落级元素之间的主题转换,一般显示为水平线</td> </tr> <tr> <td>li</td> <td>表示列表里的条目。</td> </tr> <tr> <td>ul</td> <td>表示一个无序列表,可含多个元素,无编号显示。</td> </tr> <tr> <td>ol</td> <td>表示一个有序列表,通常渲染为有带编号的列表</td> </tr> <tr> <td>em</td> <td>表示文本着重,一般用斜体显示</td> </tr> <tr> <td>strong</td> <td>表示文本重要,一般用粗体显示</td> </tr> <tr> <td>font</td> <td>表示字体,可以设置样式(已过时)</td> </tr> <tr> <td>i</td> <td>表示斜体</td> </tr> <tr> <td>b</td> <td>表示加粗文本</td> </tr> </tbody> </table> <p><strong>1.3.2标签嵌套:</strong></p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>b</span><span class="token punctuation">></span></span>这是第三段,也是强调内容!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>b</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> </code></pre> <p><em>顾名思义就是在一个标签中去镶嵌另一个标签,这种在html中用得也是蛮多的</em></p> <h3>1.4两种重要标签:块级和行内</h3> <ul> <li> <p><strong>块级元素</strong>:</p> <p><strong>前后独占一行</strong>。块级元素(block)在页面中以块的形式展现。相对于其前面的内容它会出现在新的一行,其后的内容也会被挤到下一行展现。比如<code><p></code> ,<code><hr></code>,<code><li></code> ,<code><div></code>等。</p> </li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>这是一个标签<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>这还是一个块级标签<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>这也是一个块级标签<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> </code></pre> <p><em>效果</em></p> <p><a href="http://img.e-com-net.com/image/info8/3988c0623b7e43edad7a886afed18fc3.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/3988c0623b7e43edad7a886afed18fc3.png" alt="在这里插入图片描述" width="342" height="85"></a></p> <ul> <li> <p><strong>行内元素</strong></p> <p><strong>不用换行</strong>,行内元素通常会出现在块级元素中,进行一些文本的显示。</p> </li> </ul> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>这是一个行内<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>这是第二个行内元素!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/3288682b7552406bad152ef463e2d6f1.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/3288682b7552406bad152ef463e2d6f1.png" alt="在这里插入图片描述" width="350" height="43"></a></p> <blockquote> <p><strong>两个常用的块级和行内标签:</strong></p> <ul> <li>块级: div标签,一种通用容器标签,通常用于文本中的一些个性的一些设置</li> <li>行内:span标签,是短语内容的通用行内容器,并没有任何特殊语义。它可以被用来编组元素以达到某种样式。它是一个<strong>行内元素</strong>。</li> </ul> <p><strong>div和span标签在布局中有着举足轻重的作用</strong></p> </blockquote> <h3>1.5 标签属性</h3> <blockquote> <p>属性是html中一大重要的组成,强调属性的格式和作用</p> </blockquote> <p>**概述:**标签属性,主要用于拓展标签。属性包含元素的额外信息,这些信息不会出现在实际的内容中。但是可以改变标签的一些行为或者提供数据,属性总是以<code>name = value</code>的格式展现。</p> <ul> <li> <p>属性名:同一个标签中,属性名不得重复。</p> </li> <li> <p>大小写:属性和属性值对大小写不敏感。不过W3C标准中,推荐使用小写的属性/属性值。</p> </li> <li> <p>引号:双引号是最常用的,不过使用单引号也没有问题。</p> </li> <li> <p>常用属性:</p> </li> </ul> <table> <thead> <tr> <th>属性名</th> <th>作用</th> </tr> </thead> <tbody> <tr> <td>class</td> <td>定义元素类名,用来选择和访问特定的元素</td> </tr> <tr> <td>id</td> <td>定义元素唯一标识符,在整个文档中必须是唯一的</td> </tr> <tr> <td>name</td> <td>定义元素名称,可以用于提交服务器的表单字段</td> </tr> <tr> <td>value</td> <td>定义在元素内显示的默认值</td> </tr> <tr> <td>style</td> <td>定义CSS样式,这些样式会覆盖之前设置的样式</td> </tr> </tbody> </table> <h3>1.6新闻案例分析</h3> <p><strong>实现效果:</strong></p> <p><a href="http://img.e-com-net.com/image/info8/61af96cb9615441391c0b36830895359.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/61af96cb9615441391c0b36830895359.jpg" alt="html5+Css总结(附带案例)_第4张图片" width="650" height="518" style="border:1px solid black;"></a></p> <p><strong>基本布局分析:</strong></p> <p><a href="http://img.e-com-net.com/image/info8/54233595dddf46b7825b04793edc6b1c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/54233595dddf46b7825b04793edc6b1c.jpg" alt="html5+Css总结(附带案例)_第5张图片" width="650" height="229" style="border:1px solid black;"></a></p> <h4>1.6.2 实现方法</h4> <h4>div样式布局</h4> <p>文本由几部分构成,我们可以使用div将页面分割布局。先来了解一下,使用div如何进行简单的布局。</p> <p>在head标签中,通过style标签加入样式。</p> <p><strong>基本格式:</strong></p> <pre><code class="prism language-css"><span class="token selector">格式: <style> 标签名</span><span class="token punctuation">{</span> <span class="token property">属性名</span><span class="token punctuation">:</span>属性值<span class="token punctuation">;</span> <span class="token punctuation">}</span> </style> </code></pre> <p><strong>多个属性名格式:</strong></p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">标签名</span><span class="token punctuation">{</span> <span class="token property">属性名1</span><span class="token punctuation">:</span>属性值1<span class="token punctuation">;</span> <span class="token property">属性名2</span><span class="token punctuation">:</span>属性值2<span class="token punctuation">;</span> <span class="token property">属性名3</span><span class="token punctuation">:</span>属性值3<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> </code></pre> <p><strong>div的多样式:</strong></p> <p>一个属性名可以含有多个值,同时设置多样式。</p> <p>格式:</p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">标签名</span><span class="token punctuation">{</span> <span class="token property">属性名</span><span class="token punctuation">:</span>属性值1 属性值2 属性值3<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> </code></pre> <blockquote> <p>tips:</p> <p>为了布局方便,我们通常可以先设置边框的样式,进行布局。结束后,再去掉边框,直观展示完整界面,也就是通常会把显示的基本骨架描绘出来,再慢慢去增添内容。</p> </blockquote> <h4>1.先把基本布局框调出</h4> <pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token name">doctype</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ie=edge<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>新闻案列<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">li</span><span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> inline<span class="token punctuation">;</span> //内联样式无宽高 <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> //内联样式,有宽高 <span class="token punctuation">}</span> <span class="token selector">div</span><span class="token punctuation">{</span> <span class="token property">border</span><span class="token punctuation">:</span> 1px solid blue<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>left<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>center<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>right<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/dffc25e6eee7458cbf497b184bc84023.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/dffc25e6eee7458cbf497b184bc84023.png" alt="html5+Css总结(附带案例)_第6张图片" width="1302" height="141" style="border:1px solid black;"></a></p> <p>发现通过div设置的样式都是一致的,无法个性化布局。如何区分不同的div呢?</p> <p>使用class(类)的值,格式:</p> <pre><code class="prism language-html">.class值{ 属性名:属性值; } <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>标签名</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>class值<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 提示: class是自定义的值 </code></pre> <p>所以,使用class属性值,可以帮助我们区分div,更加精确的设置标签的样式。</p> <h4>2.浮动布局和清除</h4> <p><em>主体部分分为三部分,但每个div又独占一行,想要使用div布局,就还需要加入<strong>浮动属性</strong></em></p> <ul> <li>定义</li> </ul> <p>​ <strong>float:</strong> <strong>指定一个元素可沿其左侧或右侧放置</strong>,使用了该属性的元素(通常放在左侧或右侧),允许文本环绕该属性流动,且该元素移除,其他部分元素依然正常使用。</p> <p>​ 当超出返回时,其浮动在其周围的块级元素会进行自动换行操作。在设计整体框架浮动时,需要把边框线所占的比例也考虑进行才能成功浮动。</p> <p><a href="http://img.e-com-net.com/image/info8/c5e3f763a2c847d2aac542ec146c221c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c5e3f763a2c847d2aac542ec146c221c.jpg" alt="html5+Css总结(附带案例)_第7张图片" width="650" height="175" style="border:1px solid black;"></a></p> <pre><code class="prism language-html">.left{ font-family: 楷体; font-size: 20px; width: 20%; float: left; height: 600px; } .center{ font-family: 楷体; font-size: 20px; width: 60%; float: left; height: 600px; } .right{ font-family: 楷体; font-size: 20px; width: 19%; float: left; height: 600px; } </code></pre> <p><strong>注意style中进行注释时需要前后进行双向闭合</strong></p> <blockquote> <pre><code class="prism language-html">li{ display: inline; /*内联样式无宽高*/ display: inline-block; /*内联样式,有宽高*/ } </code></pre> </blockquote> <h3>1.7.3 图片标签&&超链接标签</h3> <p><strong>使用图片标签时路径尽量选用相对路径,避免造成不显示问题</strong></p> <table> <thead> <tr> <th>标签名</th> <th>作用</th> <th>备注</th> </tr> </thead> <tbody> <tr> <td><strong>img</strong></td> <td>可以显示一张图片(本地或网络)</td> <td><strong>src属性</strong>,这是一个必需的属性,表示图片的地址。</td> </tr> </tbody> </table> <p>其他属性:</p> <table> <thead> <tr> <th>属性名</th> <th>作用</th> <th>备注</th> </tr> </thead> <tbody> <tr> <td><strong>title</strong></td> <td>鼠标悬停(hover)时显示文本。</td> <td></td> </tr> <tr> <td><strong>alt</strong></td> <td>图形不显示时的替换文本。</td> <td></td> </tr> <tr> <td><strong>height</strong></td> <td>图像的高度。</td> <td></td> </tr> <tr> <td><strong>width</strong></td> <td>图像的宽度。</td> <td></td> </tr> </tbody> </table> <table> <thead> <tr> <th>标签名</th> <th>作用</th> <th>备注</th> </tr> </thead> <tbody> <tr> <td><strong>a</strong></td> <td>表示超链接。</td> <td><strong>href属性</strong>,表示超链接指向的URL地址。</td> </tr> </tbody> </table> <table> <thead> <tr> <th>属性名</th> <th>作用</th> </tr> </thead> <tbody> <tr> <td>target</td> <td>页面的打开方式(_self当前页 _blank新标签页)。</td> </tr> </tbody> </table> <p><strong>去掉下划线</strong></p> <p>根据某些样式的布局需求,去除下划线更为美观。</p> <pre><code class="prism language-css"><span class="token selector">a</span> <span class="token punctuation">{</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span> // none 表示不显示 <span class="token punctuation">}</span> <span class="token selector"><a href="demo01.html">跳转</a> a:hover</span><span class="token punctuation">{</span> <span class="token comment">/*鼠标悬浮时的样式控制*/</span> <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token punctuation">}</span> <a href=<span class="token string">"demo01.html"</span> target=<span class="token string">"_blank"</span>>跳转 <img src=<span class="token string">"../Code_images/ad1.jpg"</span> alt=<span class="token string">"图片找不到了"</span> title=<span class="token string">"可点击"</span>> </a> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/fcd37f8011444d63b06bbb612e5de042.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/fcd37f8011444d63b06bbb612e5de042.jpg" alt="html5+Css总结(附带案例)_第8张图片" width="420" height="331" style="border:1px solid black;"></a></p> <p><strong>使用图片img标签的src属性时,尽量采用相对路径,避免无法显示问题。还有就是使用时反斜线的朝向(向右)!</strong></p> <p><strong>hr下滑线标签属于块级div内部的一个标签</strong></p> <hr> <h1>具体实现</h1> <h2>1.8 顶部实现</h2> <h2>1.8.1 使用标签</h2> <ol> <li>使用div标签,设置布局,背景和浮动等。</li> <li>基本文本标签</li> <li>图片标签</li> <li>超链接标签</li> </ol> <h2>1.8.2 实现步骤</h2> <ol> <li>创建初始页面,拷贝图片等素材。</li> <li>整体布局。</li> <li>实现顶部条(图片)。</li> <li>实现导航条(图片)。</li> <li>实现左侧分享区域(图片)。</li> <li>实现中间正文区域(文本+图片)。</li> <li>实现右侧广告区域(图片)。</li> <li>实现底部页脚(链接)。</li> </ol> <h3>1.8.3 实现顶部条</h3> <p><strong>HTML代码</strong></p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top_bar<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../img/j1.png<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </code></pre> <p><strong>样式代码</strong></p> <pre><code class="prism language-css"> <span class="token selector">img</span><span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>效果如下:</p> <p><a href="http://img.e-com-net.com/image/info8/3a5d4db1643949038d67d34d87ef2d52.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/3a5d4db1643949038d67d34d87ef2d52.jpg" alt="html5+Css总结(附带案例)_第9张图片" width="650" height="190" style="border:1px solid black;"></a></p> <h3>1.8.4 实现导航条</h3> <p><strong>HTML代码</strong></p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nav_bar<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../img/j2.png<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100%<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token comment"><!-- 加入分割线 --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>hr</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">/></span></span> </code></pre> <p><strong>样式代码</strong></p> <pre><code class="prism language-css"> <span class="token selector">hr</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> lightgrey<span class="token punctuation">;</span> <span class="token property">size</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>效果如下:</p> <p><a href="http://img.e-com-net.com/image/info8/6c3675a3106144c180e550170889003c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/6c3675a3106144c180e550170889003c.jpg" alt="html5+Css总结(附带案例)_第10张图片" width="650" height="144" style="border:1px solid black;"></a></p> <h3>1.8.5 实现左部分享</h3> <p><strong>HTML代码</strong></p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>left<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../img/j3.png<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </code></pre> <p>效果如下</p> <p><a href="http://img.e-com-net.com/image/info8/eb5a787e67d04dfe81987d2f9405e8de.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/eb5a787e67d04dfe81987d2f9405e8de.jpg" alt="html5+Css总结(附带案例)_第11张图片" width="276" height="338" style="border:1px solid black;"></a></p> <p><strong>其余部分便是也类似</strong></p> <pre><code class="prism language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token name">doctype</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ie=edge<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>新闻案列<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token comment">/* div{ border: 1px solid blue; }*/</span> <span class="token comment">/*左侧分享*/</span> <span class="token selector">.left</span><span class="token punctuation">{</span> <span class="token property">font-family</span><span class="token punctuation">:</span> 楷体<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 20%<span class="token punctuation">;</span> <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 600px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/*中间文本*/</span> <span class="token selector">.center</span><span class="token punctuation">{</span> <span class="token property">font-family</span><span class="token punctuation">:</span> 楷体<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 60%<span class="token punctuation">;</span> <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token comment">/*height: 600px;*/</span> <span class="token punctuation">}</span> <span class="token comment">/*右侧广告*/</span> <span class="token selector">.right</span><span class="token punctuation">{</span> <span class="token property">font-family</span><span class="token punctuation">:</span> 楷体<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 19%<span class="token punctuation">;</span> <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 600px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.footer</span><span class="token punctuation">{</span> <span class="token property">font-family</span><span class="token punctuation">:</span> 楷体<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token comment">/*border: blue solid 5px;*/</span> <span class="token property">clear</span><span class="token punctuation">:</span> both<span class="token punctuation">;</span><span class="token comment">/*清除浮动避免受之前元素影响*/</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> cornflowerblue<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">a</span><span class="token punctuation">{</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">a:hover</span><span class="token punctuation">{</span> <span class="token comment">/*鼠标悬浮时的样式控制*/</span> <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">hr</span><span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span> <span class="token property">size</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>top<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../Code_images/j1.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>图片未找到<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100%<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>hr</span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>nvibar<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../Code_images/j2.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>图片未找到<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100%<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>导航栏<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>hr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>left<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../Code_images/j3.png<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>左侧导航<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>center<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>支付宝特权福利!芝麻分600以上用户惊喜,网友:幸福来得突然?<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>hr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>font</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>gray<span class="token punctuation">"</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>em</span><span class="token punctuation">></span></span>作者 2019-11-11 11:11:11<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>em</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>font</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>蚂蚁借呗,芝麻分600并且受到邀请开通福利,这个就是支付宝贷款,直接秒杀了银行贷款和线下金融公司,是现在支付宝用户使用最多的。<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>微粒贷:于2015年上线,主要面向QQ和微信征信极好的用户而推出,受到邀请才能申请开通,额度最高有30万,难度较大<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>蚂蚁巴士:这个在微信 蚂蚁巴士 公众平台申请,对于信用分要求530分以上才可以,额度1-30万不等,目前非常火爆<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>strong</span><span class="token punctuation">></span></span> 三、芝麻分600以上福利之国际驾照。<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>strong</span><span class="token punctuation">></span></span>我们经常听说的可能只是中国驾照,但现在芝麻分已经应用到了国际领域,只要你的芝麻分够550就可以免费办理国际驾照,也有不少人非常佩服马云,一个简单的芝麻分居然有如此大的功能,也从侧面反应出来马云在国际上的地位,这个国际驾照是由新西兰、德国、澳大利亚联合认证,可以在全球200多个国家通行,相信大家一定都有一个自驾全球的梦想吧,而现在支付宝就给了你一把钥匙,剩下的就你自己搞定了!有没有想带着你的女神来一次浪漫之旅呢? <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> 随着互联网对我们生活的改变越来越大,信用这一词也被大家推上风口浪尖,不论是生活出行,还是其他的互联网服务,与信用体系已经密不可分了,马云当初说道,找老婆需要拼芝麻分,如今似乎也要成为现实,那么你们的芝麻分有多少了呢? <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../Code_images/1.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>80%<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>芝麻信用<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>right<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../Code_images/ad1.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>美女<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>75%<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>../Code_images/ad2.jpg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>75%<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>footer<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>hr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>demo01.html<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>跳转 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>关于黑马<span class="token entity named-entity"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>帮助中心<span class="token entity named-entity"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>开放平台<span class="token entity named-entity"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>诚聘英才<span class="token entity named-entity"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>联系我们<span class="token entity named-entity"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>法律声明<span class="token entity named-entity"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>隐私政策<span class="token entity named-entity"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>知识产权<span class="token entity named-entity"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>廉正举报<span class="token entity named-entity"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token comment"><!--#号表示原地跳转--></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/689492ce9c1d4e2784023438cfce4dec.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/689492ce9c1d4e2784023438cfce4dec.jpg" alt="html5+Css总结(附带案例)_第12张图片" width="650" height="259" style="border:1px solid black;"></a></p> <p><a href="http://img.e-com-net.com/image/info8/c26202a75fcc4eccbd63e683d1c64928.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c26202a75fcc4eccbd63e683d1c64928.jpg" alt="在这里插入图片描述" width="650" height="92"></a></p> <blockquote> <p><strong>hr下滑线标签属于块级div内部的一个标签</strong></p> </blockquote> <p><em>总结:</em> 写一个前端页面,就像修房子一样。想把基本框架搭建出来,再在框架的基础上继续搭建,而网页基本框架就是布局区域。</p> <hr> <h2>二.表单及盒子模型</h2> <h3>2.1 表单</h3> <p><em>之所以把表单单独列出来,是因为后续进行数据交互时经常使用表单相关的</em></p> <p><strong>form标签</strong></p> <table> <thead> <tr> <th>属性名</th> <th>作用</th> <th>备注</th> </tr> </thead> <tbody> <tr> <td><strong>action</strong></td> <td>处理此表单信息的Web服务器的URL地址</td> <td></td> </tr> <tr> <td><strong>method</strong></td> <td>提交此表单信息到Web服务器的方式</td> <td>可能的值有get和post,默认为get</td> </tr> <tr> <td><strong>autocomplete</strong></td> <td>自动补全之前input中写过的一些内容</td> <td>HTML5</td> </tr> </tbody> </table> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>post<span class="token punctuation">"</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>on<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 用户名:<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>username<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span>提交<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> </code></pre> <p>[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eccK4RDh-1631261566868)(H:\笔记方面\Web全栈\三.Web项目\day2 Html&&CSS\images\案例步骤\9.产生效果.png)]</p> <h3>2.2 表单元素入门</h3> <p>表单元素指的是 input 元素、复选框、下拉框、提交按钮等等。</p> <table> <thead> <tr> <th>标签名</th> <th>作用</th> <th>备注</th> </tr> </thead> <tbody> <tr> <td>**label **</td> <td>表单元素的说明,配合表单元素使用</td> <td>for属性值为相关表单元素的id属性值</td> </tr> <tr> <td><strong>input</strong></td> <td>表单中输入控件,多种输入类型,用于接受来自用户数据</td> <td>type属性值决定输入类型</td> </tr> <tr> <td><strong>button</strong></td> <td>页面中可点击的按钮,可以配合表单进行提交</td> <td>type属性值决定按钮类型</td> </tr> </tbody> </table> <h4>1)简单的文本输入框</h4> <ul> <li> <p>label标签:表单的说明。</p> </li> <li> <p>input标签:输入控件。</p> <ul> <li> <p>type属性:表示输入类型,text值为普通文本框</p> <ul> <li> <p>text:普通文本</p> </li> <li> <p>password:密码框</p> </li> <li> <p>email: 以@结尾的邮箱框</p> <blockquote> <p>[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1FJlIIMI-1631261566868)(H:\笔记方面\Web全栈\三.Web项目\day2 Html&&CSS\images\案例步骤\10.邮箱效果.png)]</p> </blockquote> </li> <li> <p>radio:单选框</p> </li> <li> <p>checkbox:复选框</p> </li> <li> <p><strong>HTML5新增的type值</strong></p> <table> <thead> <tr> <th>属性值</th> <th>作用</th> <th>备注</th> </tr> </thead> <tbody> <tr> <td>date</td> <td>HTML5 用于输入日期的控件</td> <td>年,月,日,不包括时间</td> </tr> <tr> <td>time</td> <td>HTML5 用于输入时间的控件</td> <td>不含时区</td> </tr> <tr> <td>datetime-local</td> <td>HTML5 用于输入日期时间的控件</td> <td>不包含时区</td> </tr> <tr> <td>number</td> <td>HTML5 用于输入浮点数的控件</td> <td></td> </tr> <tr> <td>range</td> <td>HTML5 用于输入不精确值控件</td> <td>max-规定最大值<br>min-规定最小值 <br>step-规定步进值 <br>value-规定默认值</td> </tr> <tr> <td>search</td> <td>HTML5 用于输入搜索字符串的单行文本字段</td> <td>可以点击<code>x</code>清除内容</td> </tr> <tr> <td>tel</td> <td>HTML5 用于输入电话号码的控件</td> <td></td> </tr> <tr> <td>url</td> <td>HTML5 用于编辑URL的字段</td> <td>可以校验URL地址格式</td> </tr> </tbody> </table></li> </ul> </li> <li> <p>id属性:表示标签唯一标识</p> </li> <li> <p>name属性:表示标签名称</p> </li> <li> <p>value属性:表示标签数据值</p> </li> <li> <p>placeholder:默认提示信息</p> </li> <li> <p>required: 加上此属性则需要必填</p> </li> </ul> </li> </ul> <p><strong>代码实现:</strong></p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>username<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>用户名:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> :<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>username<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>username<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span>提交<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> </code></pre> <p><strong>label在于说明元素,实际作用并不大,且要与后续input标签id对应才行。</strong></p> <h4>HTML5新增属性</h4> <table> <thead> <tr> <th>属性名</th> <th>作用</th> <th>备注</th> </tr> </thead> <tbody> <tr> <td><strong>placeholder</strong></td> <td>提示用户输入框的作用。用于提示的占位符文本不能包含回车或换行。</td> <td>仅适用于当<strong>type</strong> 属性为text, search, tel, url or email时; 否则会被忽略。</td> </tr> <tr> <td><strong>required</strong></td> <td>这个属性指定用户在提交表单之前必须为该元素填充值</td> <td>1. 布尔属性,可省略属性值表示true<br>2. 当type属性是hidden,image或者button类型时不可使用</td> </tr> <tr> <td><strong>autocomplete</strong></td> <td>自动补全,规定表单或输入字段是否应该自动完成。当自动完成开启,浏览器会基于用户之前的输入值自动填写值。</td> <td>1. 开启为on,关闭为off<br>2. 可以设置指定的字段为off,关闭自动补全</td> </tr> </tbody> </table> <h3>2.3 更多表单元素</h3> <table> <thead> <tr> <th>标签名</th> <th>作用</th> <th>备注</th> </tr> </thead> <tbody> <tr> <td><strong>select</strong></td> <td>表单的控件,下拉选项菜单</td> <td>与option配合实用</td> </tr> <tr> <td><strong>optgroup</strong></td> <td>option的分组标签</td> <td>与option配合实用</td> </tr> <tr> <td><strong>option</strong></td> <td>select的子标签,表示一个选项</td> <td></td> </tr> <tr> <td><strong>textarea</strong></td> <td>表示多行纯文本编辑控件</td> <td>rows表示行高度, cols表示列宽度</td> </tr> <tr> <td><strong>fieldset</strong></td> <td>用来对表单中的控制元素进行分组(也包括 label 元素)</td> <td></td> </tr> <tr> <td><strong>legend</strong></td> <td>用于表示它的<strong>fieldset</strong>内容的标题。</td> <td><strong>fieldset</strong> 的子元素</td> </tr> </tbody> </table> <p><strong>fieldset+legend效果</strong></p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>fieldset</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>legend</span><span class="token punctuation">></span></span>性别选择<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>legend</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>man<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Sex<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>男 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>woman<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Sex<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>女 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>select</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>choice<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>重庆<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>重庆<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>北京<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>北京<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>上海<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>上海<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>option</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>select</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span>提交<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>fieldset</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/9aed4be088d14ab893b6bbb3bb04830c.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/9aed4be088d14ab893b6bbb3bb04830c.png" alt="在这里插入图片描述" width="602" height="99"></a></p> <p><strong>textarea效果,col(行)近似相当于宽,row(行)近似相当于高(列宽行高)</strong></p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Desc<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>个性宣言: <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textarea</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Desc_self<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Desc<span class="token punctuation">"</span></span> <span class="token attr-name">cols</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>30<span class="token punctuation">"</span></span> <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>写下你的个性签名<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>textarea</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </code></pre> <p><em>总结:</em> html标签的整体总结就是得多用,用多了自然便也就熟了。</p> <hr> <h2>二.CSS</h2> <p><em>概述:</em> CSS也称作层叠样式表,其作用便是对于html的一个美观,算是对html的一种美观。<br> <a href="http://img.e-com-net.com/image/info8/e40a678ded1f4f44994d6efe4c6af094.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e40a678ded1f4f44994d6efe4c6af094.jpg" alt="html5+Css总结(附带案例)_第13张图片" width="650" height="278" style="border:1px solid black;"></a></p> <h3>1.CSS的基本构成</h3> <p>Css的基本构成:<strong>选择器</strong>+<strong>声明</strong></p> <pre><code class="prism language-html">选择器{ 属性名:属性值; 属性名2:属性值2; } </code></pre> <p><strong>之前的html页面中已经进行了常规的使用,这里就不做过多赘述。</strong></p> <h3>2. 使用方法</h3> <h4>2.1 内联样式</h4> <ul> <li>标签中内部(不推荐)</li> <li>在head中内联</li> </ul> <h4>2.2 外联样式</h4> <p><em>在外面单独定义一个”.css“的文件,再在head标签中通过link标签指定路径进行连接应用。</em></p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Css基本教学<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>style</span><span class="token punctuation">></span></span><span class="token style"><span class="token language-css"> <span class="token selector">h3</span><span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span>orange<span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>style</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Style.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span> <span class="token style-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token style language-css"><span class="token property">color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span> <span class="token property">font-family</span><span class="token punctuation">:</span> 楷体<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> yellow<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> 标签内联 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textarea</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>u2<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>u2<span class="token punctuation">"</span></span> <span class="token attr-name">cols</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>20<span class="token punctuation">"</span></span> <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 这是外联样式! <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>textarea</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span> 这是内联样式。 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/137e33075e5e4334973603176b6acf85.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/137e33075e5e4334973603176b6acf85.jpg" alt="在这里插入图片描述" width="226" height="84"></a></p> <h3>2.3选择器(!!!)</h3> <p><strong>作用概述:</strong> 选定html中指定元素进行修饰,而学习选择器的目的便是为了更好的选择想要修饰元素,然后告诉浏览器那些是自己选择的元素。</p> <p><strong>选择器的分类</strong>:</p> <table> <thead> <tr> <th>分类</th> <th>名称</th> <th>符号</th> <th>作用</th> <th>示例</th> </tr> </thead> <tbody> <tr> <td>基本选择器</td> <td>元素选择器</td> <td>标签名</td> <td>基于标签名匹配元素</td> <td>div{ }</td> </tr> <tr> <td>用得较多</td> <td>类选择器</td> <td><code>.</code></td> <td>基于class属性值匹配元素</td> <td>.center{ }</td> </tr> <tr> <td></td> <td>ID选择器</td> <td><code>#</code></td> <td>基于id属性值匹配元素</td> <td>#username{ }</td> </tr> <tr> <td>属性选择器</td> <td>属性选择器</td> <td><code>[]</code></td> <td>基于某属性匹配元素</td> <td>[type]{ }</td> </tr> <tr> <td>伪类选择器</td> <td>伪类选择器</td> <td><code>:</code></td> <td>用于向某些选择器添加特殊的效果,通常用于动态效果展示</td> <td>a : hover{ }</td> </tr> <tr> <td>组合选择器</td> <td>后代选择器</td> <td><code>空格</code></td> <td>使用<code>空格符号</code>结合两个选择器,基于第一个选择器,匹配第二个选择器的<strong>所有</strong>后代元素</td> <td>.top li{ }</td> </tr> <tr> <td></td> <td>子级选择器</td> <td><code>></code></td> <td>使用 <code>></code> 结合两个选择器,基于第一个选择器,匹配第二个选择器的<strong>直接子级</strong>元素</td> <td>.top > li{ }</td> </tr> <tr> <td></td> <td>同级选择器</td> <td><code>~</code></td> <td>使用 <code>~</code> 结合两个选择器,基于第一个选择器,匹配第二个选择器的<strong>所有兄弟</strong>元素</td> <td>.l1 ~ li{ }</td> </tr> <tr> <td></td> <td>相邻选择器</td> <td><code>+</code></td> <td>使用 <code>+</code> 结合两个选择器,基于第一个选择器,匹配第二个选择器的<strong>相邻兄弟</strong>元素</td> <td>.l1 + li{ }</td> </tr> <tr> <td></td> <td>通用选择器</td> <td><code>*</code></td> <td>匹配文档中的所有内容</td> <td>*{ }</td> </tr> </tbody> </table> <h4>1)元素选择器</h4> <p><strong>页面元素:</strong></p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>List item 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>List item 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>List item 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>List item 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>List item 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>List item 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </code></pre> <p><strong>选择器:</strong></p> <pre><code class="prism language-css"><span class="token selector">选择所有li标签,背景变成蓝色 li</span><span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> aqua<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <h4>2)类选择器</h4> <p><strong>页面元素:</strong></p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ulist l1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>List item 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>l2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>List item 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>l3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>List item 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span> <span class="token comment"><!--class 为两个值--></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>olist l1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>List item 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>olist l2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>List item 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>olist l3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>List item 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </code></pre> <p><strong>选择器:</strong></p> <pre><code class="prism language-css"><span class="token selector">选择class属性值为l2的,背景变成蓝色 .l2</span><span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> aqua<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">选择class属性值为olist l2的,字体为白色 .olist.l2</span><span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> wheat<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <h4>3)ID选择器</h4> <p><strong>页面元素:</strong></p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>l1<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>one<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>List item 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>l2<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>two<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>List item 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>l3<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>three<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>List item 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>l1<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>four<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>List item 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>l2<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>five<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>List item 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>l3<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>six<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>List item 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </code></pre> <p><strong>选择器:</strong></p> <pre><code class="prism language-css"><span class="token selector">#tow</span><span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> aqua<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p><strong>效果如图:</strong></p> <h4>4)通用选择器</h4> <p><strong>页面元素:</strong></p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>l1<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>one<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>List item 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>l2<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>two<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>List item 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>l3<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>three<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>List item 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>l1<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>four<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>List item 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>l2<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>five<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>List item 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>l3<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>six<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>List item 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </code></pre> <p><strong>选择器:</strong></p> <pre><code class="prism language-css"><span class="token selector">所有标签 *</span><span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> aqua<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <h3>2.2.2 属性选择器</h3> <p><strong>页面元素:</strong></p> <pre><code class="prism language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>l1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token punctuation">></span></span>List item 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token punctuation">></span></span>List item 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token punctuation">></span></span>List item 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>l2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>four<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>List item 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>five<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>List item 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>six<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>List item 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span> p item <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> </code></pre> <p><strong>选择器和效果图,示例1</strong></p> <pre><code class="prism language-css"><span class="token selector">[属性名]</span><span class="token punctuation">{</span> <span class="token punctuation">}</span> </code></pre> <p><strong>选择器和效果图,示例2</strong></p> <pre><code class="prism language-css"><span class="token selector">标签名[属性名]</span><span class="token punctuation">{</span> <span class="token punctuation">}</span> </code></pre> <p><strong>选择器和效果图,示例3</strong></p> <pre><code class="prism language-css"><span class="token selector">标签名[属性名='属性值']</span><span class="token punctuation">{</span> <span class="token punctuation">}</span> </code></pre> <h3>2.2.3 伪类选择器</h3> <p>伪类选择器指的是元素处于特定效果时,所要显示出效果。如:一些元素被鼠标悬停时所要显示的效果。</p> <p>格式:</p> <pre><code class="prism language-html">标签名:伪类名{} </code></pre> <p><strong>伪类的顺序:</strong></p> <p>1.link</p> <p>2.visited :指的是当前已访问的界面。</p> <p>3.hover</p> <p>4.active:点开新界面后原始界面该元素的反应</p> <p><strong>一般按照这个顺序否则可能失效</strong></p> <p>HTML 代码 :</p> <pre><code class="prism language-html"> CSS 代码 : /* 选择a标签,class值为red ,设置访问后为红色链接*/ a.red:visited { color: red; } </code></pre> <h3>2.2.4 组合选择器</h3> <p><strong>页面元素:</strong></p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>l1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>List item 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>List item 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>List item 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>l2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>four<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>List item 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>five<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>List item 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>six<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>List item 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </code></pre> <h4>1)后代选择器</h4> <p><strong>选择器:</strong></p> <pre><code class="prism language-css"><span class="token selector">.l1 li</span><span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> aqua<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <h4>2)子级选择器</h4> <p><strong>选择器:</strong></p> <pre><code class="prism language-css"><span class="token selector">.l1 > li</span><span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> aqua<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <h4>3)同级选择器</h4> <p><strong>选择器:</strong></p> <pre><code class="prism language-css"><span class="token selector">.l1 ~ li</span><span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> aqua<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <h4>4)相邻选择器</h4> <p><strong>选择器:</strong></p> <pre><code class="prism language-css"><span class="token selector">.l1 + li</span><span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> aqua<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <h2>2.4 总结</h2> <ol> <li>CSS的引入方式有三种,建议使用外部样式表。</li> <li>注释类似于java多行注释。</li> <li>选择器是CSS的重要部分: <ol> <li>基本选择器:可以通过元素,类,id来选择元素。</li> <li>属性选择器:可以通过属性值选择元素</li> <li>伪类选择器:可以指定元素的某种状态,比如链接</li> <li>组合选择器:可以组合基本选择器,更加精细的划分如何选择</li> </ol> </li> </ol> <h2>3.表格Table</h2> <p>由行和列组成的数据称之为表格。</p> <p><strong>实际进行设计时,当table标签镶嵌在块中时,宽度属性尽量调成100%,能够避免很多问题。</strong></p> <h4>2)表格标签</h4> <table> <thead> <tr> <th>标签名</th> <th>作用</th> <th>备注</th> </tr> </thead> <tbody> <tr> <td>table</td> <td>表示表格,是数据单元的行和列的两维表</td> <td>容器,默认无样式</td> </tr> <tr> <td>tr</td> <td>table row,表示表中单元的行</td> <td></td> </tr> <tr> <td>td</td> <td>table data,表示表中一个单元格</td> <td></td> </tr> <tr> <td>th</td> <td>table header,表格单元格的表头,通常字体样式加粗居中</td> <td></td> </tr> </tbody> </table> <p><strong>通常tr与td搭配使用才能产出表格样式,不然不行</strong></p> <pre><code class="prism language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1px solid black;<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span> <span class="token attr-name">rowspan</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Group<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>FirstName<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>LastName<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Jack<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Joc<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Mike<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span>Chen<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/594928a126cb4ae49cc0a0d709103dca.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/594928a126cb4ae49cc0a0d709103dca.png" alt="html5+Css总结(附带案例)_第14张图片" width="364" height="143" style="border:1px solid black;"></a></p> <p><strong>需要注意的便是关于跨行以及跨列的操作,即colspan和rowspan一般来说在设置th时采用。</strong></p> <h3>4.盒子模型</h3> <blockquote> <p>盒子模型只针对块级元素起作用,像img这种非块级元素在使用盒子模型相关属性时需要转换为块级。</p> <p><strong>display:block</strong></p> <pre><code class="prism language-html">.top > img{ display: block; margin: 0px auto; border: 1px solid red; } </code></pre> </blockquote> <p>盒子模型算是元素的一种布局方式,由<strong>内边距</strong> +<strong>外边距+元素+边框组成</strong><br> <a href="http://img.e-com-net.com/image/info8/0146e14ef72a4767ac17e0b8e1f37ab4.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/0146e14ef72a4767ac17e0b8e1f37ab4.jpg" alt="html5+Css总结(附带案例)_第15张图片" width="650" height="676" style="border:1px solid black;"></a></p> <pre><code class="prism language-html">- element : 元素。 - padding : 内边距,也有资料将其翻译为填充。 - border : 边框。 - margin : 外边距,也有资料将其翻译为空白或空白边。 </code></pre> <p><strong>进行边距设置时,通常采用的方向为:上 右 下 左</strong></p> <p><strong>外边距</strong></p> <p>单独设置边框的外边距,设置上、右、下、左方向:</p> <pre><code class="prism language-css">margin-top margin-right margin-bottom margin-left </code></pre> <p>值含义:</p> <ol> <li> <p>一个值时</p> <pre><code class="prism language-css"><span class="token comment">/* 所有 4 个外边距都是 10px */</span> <span class="token property">margin</span><span class="token punctuation">:</span>10px<span class="token punctuation">;</span> </code></pre> </li> <li> <p>两个值时</p> <pre><code class="prism language-css"><span class="token comment">/* 上外边距和下外边距是 10px 右外边距和左外边距是 5px */</span> <span class="token property">margin</span><span class="token punctuation">:</span>10px 5px<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span>10px auto<span class="token punctuation">;</span> auto 浏览器自动计算外边距,具有居中效果。 </code></pre> </li> <li> <p>三个值时</p> <pre><code class="prism language-css"><span class="token comment">/* 上外边距是 10px 右外边距和左外边距是 5px 下外边距是 15px*/</span> <span class="token property">margin</span><span class="token punctuation">:</span>10px 5px 15px<span class="token punctuation">;</span> </code></pre> </li> <li> <p>四个值时</p> <pre><code class="prism language-css"><span class="token comment">/*上外边距是 10px 右外边距是 5px 下外边距是 15px 左外边距是 20px*/</span> <span class="token property">margin</span><span class="token punctuation">:</span>10px 5px 15px 20px<span class="token punctuation">;</span> </code></pre> </li> </ol> <p><strong>内边距</strong></p> <p>与外边距类似,单独设置边框的内边距,设置上、右、下、左方向:</p> <pre><code class="prism language-css">padding-top padding-right padding-bottom padding-left </code></pre> </div> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1646217837225795584"></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">你可能感兴趣的:(Web前端,html5,css,html)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1902394561402040320.htm" title="设备树学习(二十三、番外篇-中断子系统之softirq)" target="_blank">设备树学习(二十三、番外篇-中断子系统之softirq)</a> <span class="text-muted">奔跑的小刺猬</span> <a class="tag" taget="_blank" href="/search/%E8%AE%BE%E5%A4%87%E6%A0%91/1.htm">设备树</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E5%A4%87%E6%A0%91%E5%8E%9F%E7%90%86%E5%92%8C%E5%AE%9E%E7%8E%B0/1.htm">设备树原理和实现</a> <div>既然开始学了,那么还是一次把中断的所有知识都系统的学一下。刚好有蜗窝大神的博客做指引。http://www.wowotech.net/irq_subsystem/soft-irq.html一、前言对于中断处理而言,linux将其分成了两个部分,一个叫做中断handler(tophalf),是全程关闭中断的,另外一部分是deferabletask(bottomhalf),属于不那么紧急需要处理的事情</div> </li> <li><a href="/article/1902388383766867968.htm" title="【Apache Storm】" target="_blank">【Apache Storm】</a> <span class="text-muted">茉菇</span> <a class="tag" taget="_blank" href="/search/apache/1.htm">apache</a><a class="tag" taget="_blank" href="/search/storm/1.htm">storm</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a> <div>一、Storm简介1、概述官网地址:https://storm.apache.org/index.htmlApacheStorm是一个开源的、分布式的实时计算系统,专为处理流式数据而设计。它能够处理大量数据流并在极低的延迟下提供实时的结果。相比于传统的批处理系统,Storm具有处理无限数据流的能力,支持非常高的可扩展性和容错机制。Storm可以适用于多种编程语言,具有高度的灵活性。2、核心功能分布</div> </li> <li><a href="/article/1902381186840326144.htm" title="vue3+springboot电影院售票选座管理系统" target="_blank">vue3+springboot电影院售票选座管理系统</a> <span class="text-muted">qq_3166678367</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>目录本系统(已开发完成)->成品实现截图开发技术本系统支持的技术栈源码获取详细视频演示:文章底部获取博主联系方式!!!!本课题重点核心代码部分展示论文提纲来自指导老师帅的肯定视频演示/源码获取本系统(已开发完成)->成品实现截图开发技术关键技术实现:在Java的开发过程中,可以使用HTML、CSS、JavaScript等前端技术来实现系统的用户界面设计和交互功能。后端可以使用Java语言编写业务逻</div> </li> <li><a href="/article/1902358365347049472.htm" title="HTML音频、视频--课后作业实践" target="_blank">HTML音频、视频--课后作业实践</a> <span class="text-muted">Heetun</span> <a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a> <div>浅学了web一段时间,用浅显的知识做了一个小小的实践,各位大佬们多多包涵,指正。主要知识重现:标记语法:src:设置媒体文件的路径width、height:设置媒体文件的宽度、高度autostart:逻辑值,true为自动播放;false为不自动播放loop:逻辑值,true自动循环播放;false不循环播放2.CSS的内部样式表选择器1{属性1:属性值1;属性2:属性值2;......}选择器2</div> </li> <li><a href="/article/1902356096639627264.htm" title="H3C Network命令详解" target="_blank">H3C Network命令详解</a> <span class="text-muted">weixin_30471561</span> <div>转载于:https://www.cnblogs.com/fanweisheng/p/11156926.html</div> </li> <li><a href="/article/1902350594786521088.htm" title="CSS中的伪类与伪元素:让样式更加灵活优雅" target="_blank">CSS中的伪类与伪元素:让样式更加灵活优雅</a> <span class="text-muted"></span> <a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a> <div>CSS中的伪类与伪元素:让样式更加灵活优雅在CSS的世界里,伪类和伪元素是两个强大而优雅的特性,它们能让我们的样式代码更加简洁,同时提供更丰富的样式控制能力。今天,让我们深入了解这两个概念。一、伪类(Pseudo-classes)1.1什么是伪类?伪类用于定义元素的特殊状态。它们以单个冒号(:)开头,就像给元素添加了一个虚拟的类,但无需修改HTML结构。1.2常用伪类/*鼠标悬停状态*/butto</div> </li> <li><a href="/article/1902350298547023872.htm" title="如何创建HTML自定义元素:使用 Web Component 的最佳实践" target="_blank">如何创建HTML自定义元素:使用 Web Component 的最佳实践</a> <span class="text-muted">乐闻x</span> <a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/Component/1.htm">Component</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E8%AE%B0%E5%BD%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/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/web/1.htm">web</a><a class="tag" taget="_blank" href="/search/component/1.htm">component</a> <div>什么是WebComponent?WebComponent是一组允许开发者创建可复用、自定义HTML元素的技术。它们使得我们可以像原生HTML标签一样使用这些自定义元素,从而提升代码的模块化和复用性。WebComponent的核心技术有以下三部分:CustomElements(自定义元素):允许开发者定义自己的HTML标签。ShadowDOM(影子DOM):为元素提供封装的DOM和样式,让组件内部的</div> </li> <li><a href="/article/1902348661065576448.htm" title="css知识点总结" target="_blank">css知识点总结</a> <span class="text-muted">吃橘子的Crow</span> <a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>1.css概述css是CascadingStyleSheets(级联样式表)css是一种样式表语言,用于为HTML文档控制外观,定义布局.可将页面的内容与表现形式分离,页面内容存放在HTML文档中,而用于定义白线形式的css在一个.css文件中或HTML文档的某一部分HTML如同网页的骨架,css如同修饰骨架的装饰品(样式)2.基本语法1.行内样式表行内样式表,又称内联样式、行间样式、内嵌样式。是</div> </li> <li><a href="/article/1902338202086207488.htm" title="【css酷炫效果】纯CSS实现动态云雾效果" target="_blank">【css酷炫效果】纯CSS实现动态云雾效果</a> <span class="text-muted">冰夏之夜影</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> <div>【css酷炫效果】纯CSS实现动态云雾效果缘创作背景html结构css样式完整代码效果图想直接拿走的老板,链接放在这里:上传后更新缘创作随缘,不定时更新。创作背景刚看到csdn出活动了,赶时间,直接上代码。html结构css样式body{margin:0;min-height:100vh;}.cloud-bg{position:relative;height:100vh;background:ra</div> </li> <li><a href="/article/1902338202564358144.htm" title="【css酷炫效果】纯CSS实现流动岩浆纹理效果" target="_blank">【css酷炫效果】纯CSS实现流动岩浆纹理效果</a> <span class="text-muted">冰夏之夜影</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> <div>【css酷炫效果】纯CSS实现流动岩浆纹理效果缘创作背景html结构css样式完整代码效果图想直接拿走的老板,链接放在这里:上传后更新缘创作随缘,不定时更新。创作背景刚看到csdn出活动了,赶时间,直接上代码。html结构css样式.lava-texture{position:relative;width:400px;height:300px;overflow:hidden;border-radi</div> </li> <li><a href="/article/1902338075883794432.htm" title="【css酷炫效果】实现鱼群游动动态效果" target="_blank">【css酷炫效果】实现鱼群游动动态效果</a> <span class="text-muted">冰夏之夜影</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF/1.htm">web前端</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>【css酷炫效果】实现小鱼游动动态效果缘创作背景css代码创建div容器引入jquery引入鱼群js完整代码效果图成品资源下载链接:点击下载缘在开发系统功能的时候,无意间看到了小鱼游动特效,感觉很有意思,就在网上找了相关教程,分享给大家。创作背景刚看到csdn出活动了,赶时间,直接上代码。css代码.container{background-color:transparent;position:f</div> </li> <li><a href="/article/1902326726910865408.htm" title="deepseek 对于 Web 前端过去,现在,未来的看法!称未来可能不叫前端工程师..." target="_blank">deepseek 对于 Web 前端过去,现在,未来的看法!称未来可能不叫前端工程师...</a> <span class="text-muted">CoderBin_</span> <a class="tag" taget="_blank" href="/search/%E4%B8%8Edeepseek%E7%9A%84%E5%AF%B9%E8%AF%9D/1.htm">与deepseek的对话</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一、你对于过去的web前端有什么看法?对早期的Web前端开发(大致在2000年代至2010年代初),可以总结出以下几个关键看法:1.技术原始,但充满探索精神基础技术简单:主要依赖HTML、CSS和原生JavaScript,缺乏现代框架和工具链的支持。兼容性噩梦:不同浏览器(尤其是IE6/7)的渲染差异极大,开发者需要大量Hack代码(如条件注释、CSS滤镜)来适配。创新萌芽:AJAX(2005年)</div> </li> <li><a href="/article/1902324833925001216.htm" title="Storm实战常见问题及解决方案" target="_blank">Storm实战常见问题及解决方案</a> <span class="text-muted">Lzy失控的</span> <a class="tag" taget="_blank" href="/search/storm-%E5%88%86%E5%B8%83%E5%BC%8F%E6%B5%81%E5%BC%8F%E8%AE%A1%E7%AE%97/1.htm">storm-分布式流式计算</a><a class="tag" taget="_blank" href="/search/bigdata-%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">bigdata-大数据</a> <div>原文seehttp://blog.sina.com.cn/s/blog_8c243ea30101k0k1.html1关于Storm集群1.1关于storm集群的环境变量配置问题安装好JDK后,需要配置环境变量,通常情况下出于经验,我们往往会修改/etc/profile的值进行环境变量配置,但这在安装JDK以及后面安装的storm集群、zookeeper集群以及metaq集群时会出问题,这时候我们需</div> </li> <li><a href="/article/1902322310598160384.htm" title="【一起学Rust | Tauri2.0框架】基于 Rust 与 Tauri 2.0 框架实现跨平台二维码扫描应用" target="_blank">【一起学Rust | Tauri2.0框架】基于 Rust 与 Tauri 2.0 框架实现跨平台二维码扫描应用</a> <span class="text-muted">金枝玉叶9</span> <a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98%E7%9F%A5%E8%AF%86%E5%82%A8%E5%A4%871/1.htm">程序员知识储备1</a><a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98%E7%9F%A5%E8%AF%86%E5%82%A8%E5%A4%872/1.htm">程序员知识储备2</a><a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98%E7%9F%A5%E8%AF%86%E5%82%A8%E5%A4%873/1.htm">程序员知识储备3</a><a class="tag" taget="_blank" href="/search/rust/1.htm">rust</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>《一起学Rust|Tauri2.0框架》是一个结合Rust语言与Tauri框架开发跨平台应用的教程。Tauri2.0是一个非常适合构建跨平台桌面应用的框架,它让开发者可以使用Web技术(如HTML、CSS、JavaScript)来创建前端,同时利用Rust编写后端逻辑,确保应用运行高效且轻量。在这个教程中,开发者可以学习如何使用Rust与Tauri2.0框架实现一个跨平台二维码扫描应用。具体步骤可</div> </li> <li><a href="/article/1902319410870284288.htm" title="element ui 封装Table组件" target="_blank">element ui 封装Table组件</a> <span class="text-muted">沃野_juededa</span> <a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a> <div>1.首先npmielement-ui-S安装element-ui2.引入Element在main.js中写入以下内容:importVuefrom'vue';importElementUIfrom'element-ui';import'element-ui/lib/theme-chalk/index.css';importAppfrom'./App.vue';Vue.use(ElementUI);n</div> </li> <li><a href="/article/1902313477347799040.htm" title="能否在编辑器中一键导入Word文档?" target="_blank">能否在编辑器中一键导入Word文档?</a> <span class="text-muted">2501_90646763</span> <a class="tag" taget="_blank" href="/search/umeditor%E7%B2%98%E8%B4%B4word/1.htm">umeditor粘贴word</a><a class="tag" taget="_blank" href="/search/ueditor%E7%B2%98%E8%B4%B4word/1.htm">ueditor粘贴word</a><a class="tag" taget="_blank" href="/search/ueditor%E5%A4%8D%E5%88%B6word/1.htm">ueditor复制word</a><a class="tag" taget="_blank" href="/search/ueditor%E4%B8%8A%E4%BC%A0word%E5%9B%BE%E7%89%87/1.htm">ueditor上传word图片</a><a class="tag" taget="_blank" href="/search/ueditor%E5%AF%BC%E5%85%A5word/1.htm">ueditor导入word</a><a class="tag" taget="_blank" href="/search/ueditor%E5%AF%BC%E5%85%A5pdf/1.htm">ueditor导入pdf</a><a class="tag" taget="_blank" href="/search/ueditor%E5%AF%BC%E5%85%A5ppt/1.htm">ueditor导入ppt</a> <div>要求:开源,免费,技术支持编辑器:百度ueditor前端:vue2,vue3,vue-cli,react,html5用户体验:Ctrl+V快捷键操作功能:导入Word,导入Excel,导入PPT(PowerPoint),导入PDF,复制粘贴word,导入微信公众号内容,web截屏平台:Windows,macOS,Linux,RedHat,CentOS,Ubuntu,中标麒麟,银河麒麟,统信UOS,</div> </li> <li><a href="/article/1902312466457620480.htm" title="css3选择器详解" target="_blank">css3选择器详解</a> <span class="text-muted">丸子猪的dady</span> <a class="tag" taget="_blank" href="/search/css3/1.htm">css3</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/html/1.htm">html</a> <div>CSS3选择器我们之前学过CSS的选择器,比如:div标签选择器.box类名选择器#boxid选择器divp后代选择器div.box交集选择器div,p,span并集选择器div>p子代选择器*:通配符div+p:选中div后面相邻的第一个pdiv~p:选中的div后面所有的p属性选择器属性选择器的标志性符号是[]。匹配含义:^:开头$:结尾*:包含格式:E[title]选中页面的E元素,并且E存</div> </li> <li><a href="/article/1902312467132903424.htm" title="css动画详解" target="_blank">css动画详解</a> <span class="text-muted">丸子猪的dady</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/html/1.htm">html</a> <div>过渡:transitiontransition的中文含义是过渡。过渡是CSS3中具有颠覆性的一个特征,可以实现元素不同状态间的平滑过渡(补间动画),经常用来制作动画效果。transition包括以下属性:transition-property:all;如果希望所有的属性都发生过渡,就使用all。transition-property:width,意思是只让盒子的宽度在变化时进行过渡transiti</div> </li> <li><a href="/article/1902312340154544128.htm" title="HTMl详解" target="_blank">HTMl详解</a> <span class="text-muted">丸子猪的dady</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>拖拽目标元素的事件监听:(应用于目标元素)ondragenter当拖拽元素进入时调用ondragover当拖拽元素停留在目标元素上时,就会连续一直触发(不管拖拽元素此时是移动还是不动的状态)ondrop当在目标元素上松开鼠标时调用ondragleave当鼠标离开目标元素时调用.box{width:200px;height:200px;background-color:green;}//绑定拖拽事件</div> </li> <li><a href="/article/1902311584152219648.htm" title="【一起学Rust | Tauri2.0框架】基于 Rust 与 Tauri 2.0 框架实现生物识别(指纹识别)应用" target="_blank">【一起学Rust | Tauri2.0框架】基于 Rust 与 Tauri 2.0 框架实现生物识别(指纹识别)应用</a> <span class="text-muted">广龙宇</span> <a class="tag" taget="_blank" href="/search/Tauri2%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/1.htm">Tauri2应用开发</a><a class="tag" taget="_blank" href="/search/%E4%B8%80%E8%B5%B7%E5%AD%A6Rust/1.htm">一起学Rust</a><a class="tag" taget="_blank" href="/search/rust/1.htm">rust</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>前言Tauri,作为一个新兴的跨平台应用开发框架,允许开发者使用Web前端技术构建界面,并利用Rust的高性能和安全性编写后端逻辑。这种架构巧妙地结合了Web的灵活性和原生应用的性能,为开发者提供了一种构建高效、跨平台应用的全新选择。而生物识别技术,如指纹识别、面部识别等,则为应用安全提供了更高级别的保障。将生物识别技术集成到Tauri应用中,可以提升用户体验,增强应用安全性。试想一下,用户只需轻</div> </li> <li><a href="/article/1902310324296544256.htm" title="斩获 44K 星!让 DeepSeek 控制你的浏览器,绝了" target="_blank">斩获 44K 星!让 DeepSeek 控制你的浏览器,绝了</a> <span class="text-muted">开源项目精选</span> <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a> <div>Browser-Use的开源框架,是一个能让电脑自动操作网页的智能工具。能处理动态加载的内容(比如广告弹窗、实时更新的图表),遇到网页元素位置变化还会自己调整策略,减少人工干预。Stars数46046Forks数4735主要特点强大的浏览器自动化功能:BrowserUse将先进的AI能力与强大的浏览器自动化技术相结合,为AI智能体实现流畅无缝的网页交互体验。视觉感知与HTML结构提取:将视觉理解能</div> </li> <li><a href="/article/1902286624130134016.htm" title="表格的属性" target="_blank">表格的属性</a> <span class="text-muted">花林似霰f</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>表格标签属性实际开发并不使用,仅做了解,实际开发会使用CSS。属性名·属性值描述alignleftcenterrightborder1或""规定表格单元是否有边框,默认为无cellpadding像素值规定单元格与其内容之间的空白,默认1像素cellspacing像素值规定单元格之间的距离width/height像素值或百分比规定表格宽度/高度</div> </li> <li><a href="/article/1902283718781890560.htm" title="字符串模板(单文件组件、JSX)" target="_blank">字符串模板(单文件组件、JSX)</a> <span class="text-muted">By爱分享</span> <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>首先需要了解基本释义:字符串模板就是写在vue中的template中定义的模板,如.vue的单文件组件模板和定义组件时template属性值的模板。此外,字符串模板不会在页面初始化时参与页面的渲染,而是会被vue进行解析编译之后再被浏览器渲染,所以不受限于html结构和标签的命名总的来说,推荐遵循W3C中的自定义组件名(字母全小写且必须包含一个连字符),这会帮助你避免和当前以及未来的HTML元素相</div> </li> <li><a href="/article/1902283719784329216.htm" title="vue-常用指令 | 常用指令的修饰符" target="_blank">vue-常用指令 | 常用指令的修饰符</a> <span class="text-muted">Cshaosun</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF/1.htm">web前端</a><a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/VUE/1.htm">VUE</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</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>目录什么是vue指令v-cloakv-textv-htmlv-prev-show/v-ifv-else/v-else-ifv-onv-bindv-forv-model常用指令的修饰符v-model指令修饰符事件修饰符按键修饰符什么是vue指令指令就是带有v-前缀的特殊属性,不同的属性对应不同的功能。分类汇总内容渲染指令(v-html、v-text)条件渲染指令(v-show、v-if、v-else</div> </li> <li><a href="/article/1902283716848316416.htm" title="超越传统!wangEditor编辑器如何实现excel、ppt、pdf及word一键导入?" target="_blank">超越传统!wangEditor编辑器如何实现excel、ppt、pdf及word一键导入?</a> <span class="text-muted">2501_90699780</span> <a class="tag" taget="_blank" href="/search/%E7%BC%96%E8%BE%91%E5%99%A8/1.htm">编辑器</a><a class="tag" taget="_blank" href="/search/excel/1.htm">excel</a><a class="tag" taget="_blank" href="/search/powerpoint/1.htm">powerpoint</a><a class="tag" taget="_blank" href="/search/umeditor%E7%B2%98%E8%B4%B4word/1.htm">umeditor粘贴word</a><a class="tag" taget="_blank" href="/search/ueditor%E7%B2%98%E8%B4%B4word/1.htm">ueditor粘贴word</a><a class="tag" taget="_blank" href="/search/ueditor%E5%A4%8D%E5%88%B6word/1.htm">ueditor复制word</a><a class="tag" taget="_blank" href="/search/ueditor%E4%B8%8A%E4%BC%A0word%E5%9B%BE%E7%89%87/1.htm">ueditor上传word图片</a> <div>要求:开源,免费,技术支持编辑器:wangEditor前端:vue2,vue3,vue-cli,html5后端:java,jsp,springboot,asp.net,php,asp,.netcore,.netmvc,.netform群体:学生,个人用户,外包,自由职业者,中小型网站,博客,场景:数字门户,数字中台,站群,内网,外网,信创国产化环境,web截屏行业:医疗,教育,建筑,政府,党政,国</div> </li> <li><a href="/article/1902264803712364544.htm" title="Vite Plugin Inspect插件问题" target="_blank">Vite Plugin Inspect插件问题</a> <span class="text-muted">听风说雨的人儿</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>有些小伙伴可能还不清楚,VitePluginInspect是由Antfu开发的一款Vite插件,它的目标是让Vue、React等框架的开发者能够更容易地查看和理解构建过程中经过转换的源码。通过集成到Vite环境中,Inspect插件可以在浏览器的开发者工具中直接展示ES模块、CSS、甚至是编译后的模板的原始状态,极大地增强了我们在实际开发中的调试能力windows命令以上这些大家需要注意,不然在使</div> </li> <li><a href="/article/1902259261191286784.htm" title="python:一次简单的爬虫" target="_blank">python:一次简单的爬虫</a> <span class="text-muted">wstkqzl</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>importrequestsimportparselimporttimefromparselimportSelector#第一章链接https://www.qu04.cc/book/45808/2.html#第二章链接https://www.qu04.cc/book/45808/3.html#小说目录:https://www.qu04.cc/book/45808/url="https://www.</div> </li> <li><a href="/article/1902258504631119872.htm" title="Docker如何以配置文件方式安装nginx" target="_blank">Docker如何以配置文件方式安装nginx</a> <span class="text-muted">小白写代码hh</span> <a class="tag" taget="_blank" href="/search/docker/1.htm">docker</a><a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>目录1准备挂载目录2拉去nginx镜像3启动命令1准备挂载目录mkdir-p/temp/nginx/html#创建nginx的html挂载目录mkdir-p/temp/nginx/conf#创建nginx的配置文件挂载目录自定义nginx配置文件放在conf目录下#usernobody;worker_processes1;#error_loglogs/error.log;#error_loglog</div> </li> <li><a href="/article/1902220046457958400.htm" title="HTML 元素和有效 DOCTYPES" target="_blank">HTML 元素和有效 DOCTYPES</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/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>HTML元素-有效DOCTYPES下面的表格列出了所有的HTML5/HTML4.01/XHTML元素,以及它们会出现在什么文档类型(!DOCTYPE)中:HTML4.01/XHTML1.0TagHTML5TransitionalStrictFramesetXHTML1.1YesYesYesYesYesYesYesYesYesYesNoYesYesYesYesYesYesYesYesYesNoYes</div> </li> <li><a href="/article/1902207554834984960.htm" title="PHP前置知识-HTML学习" target="_blank">PHP前置知识-HTML学习</a> <span class="text-muted">freesec</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>HTML学习1、因特网和万维网1.1、Internet因特网:全球资源的总汇,连接网络的网络1.2、TCP/IP协议簇:传输层/网络层协议1.3、万维网:www(worldwideweb)HTTP超文本传输协议作用:接受和发布HTMl页面URL统一资源定位符协议://域名:端口号/文件路径/文件名.文件后缀http://www.QQ.com.cn:80/tq/index.html1.4、W3C组织</div> </li> <li><a href="/article/56.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/thread/1.htm">thread</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">多线程</a><a class="tag" taget="_blank" href="/search/%E5%AD%98%E9%92%B1/1.htm">存钱</a><a class="tag" taget="_blank" href="/search/%E5%8F%96%E9%92%B1/1.htm">取钱</a> <div>  生活费问题是这样的:学生每月都需要生活费,家长一次预存一段时间的生活费,家长和学生使用统一的一个帐号,在学生每次取帐号中一部分钱,直到帐号中没钱时 通知家长存钱,而家长看到帐户还有钱则不存钱,直到帐户没钱时才存钱。   问题分析:首先问题中有三个实体,学生、家长、银行账户,所以设计程序时就要设计三个类。其中银行账户只有一个,学生和家长操作的是同一个银行账户,学生的行为是</div> </li> <li><a href="/article/183.htm" title="java中数组与List相互转换的方法" target="_blank">java中数组与List相互转换的方法</a> <span class="text-muted">征客丶</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jsonp/1.htm">jsonp</a> <div>1.List转换成为数组。(这里的List是实体是ArrayList)   调用ArrayList的toArray方法。   toArray   public T[] toArray(T[] a)返回一个按照正确的顺序包含此列表中所有元素的数组;返回数组的运行时类型就是指定数组的运行时类型。如果列表能放入指定的数组,则返回放入此列表元素的数组。否则,将根据指定数组的运行时类型和此列表的大小分</div> </li> <li><a href="/article/310.htm" title="Shell 流程控制" target="_blank">Shell 流程控制</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/%E6%B5%81%E7%A8%8B%E6%8E%A7%E5%88%B6/1.htm">流程控制</a><a class="tag" taget="_blank" href="/search/if+else/1.htm">if else</a><a class="tag" taget="_blank" href="/search/while/1.htm">while</a><a class="tag" taget="_blank" href="/search/case/1.htm">case</a><a class="tag" taget="_blank" href="/search/shell/1.htm">shell</a> <div>Shell 流程控制 和Java、PHP等语言不一样,sh的流程控制不可为空,如(以下为PHP流程控制写法): <?php if(isset($_GET["q"])){ search(q);}else{// 不做任何事情} 在sh/bash里可不能这么写,如果else分支没有语句执行,就不要写这个else,就像这样 if else if if 语句语</div> </li> <li><a href="/article/437.htm" title="Linux服务器新手操作之二" target="_blank">Linux服务器新手操作之二</a> <span class="text-muted">周凡杨</span> <a class="tag" taget="_blank" href="/search/Linux+%E7%AE%80%E5%8D%95+%E6%93%8D%E4%BD%9C/1.htm">Linux 简单 操作</a> <div>1.利用关键字搜寻Man Pages    man -k keyword  其中-k 是选项,keyword是要搜寻的关键字 如果现在想使用whoami命令,但是只记住了前3个字符who,就可以使用 man -k who来搜寻关键字who的man命令       [haself@HA5-DZ26 ~]$ man -k </div> </li> <li><a href="/article/564.htm" title="socket聊天室之服务器搭建" target="_blank">socket聊天室之服务器搭建</a> <span class="text-muted">朱辉辉33</span> <a class="tag" taget="_blank" href="/search/socket/1.htm">socket</a> <div>因为我们做的是聊天室,所以会有多个客户端,每个客户端我们用一个线程去实现,通过搭建一个服务器来实现从每个客户端来读取信息和发送信息。    我们先写客户端的线程。 public class ChatSocket extends Thread{ Socket socket; public ChatSocket(Socket socket){ this.sock</div> </li> <li><a href="/article/691.htm" title="利用finereport建设保险公司决策分析系统的思路和方法" target="_blank">利用finereport建设保险公司决策分析系统的思路和方法</a> <span class="text-muted">老A不折腾</span> <a class="tag" taget="_blank" href="/search/finereport/1.htm">finereport</a><a class="tag" taget="_blank" href="/search/%E9%87%91%E8%9E%8D%E4%BF%9D%E9%99%A9/1.htm">金融保险</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E6%9E%90%E7%B3%BB%E7%BB%9F/1.htm">分析系统</a><a class="tag" taget="_blank" href="/search/%E6%8A%A5%E8%A1%A8%E7%B3%BB%E7%BB%9F/1.htm">报表系统</a><a class="tag" taget="_blank" href="/search/%E9%A1%B9%E7%9B%AE%E5%BC%80%E5%8F%91/1.htm">项目开发</a> <div>决策分析系统呈现的是数据页面,也就是俗称的报表,报表与报表间、数据与数据间都按照一定的逻辑设定,是业务人员查看、分析数据的平台,更是辅助领导们运营决策的平台。底层数据决定上层分析,所以建设决策分析系统一般包括数据层处理(数据仓库建设)。   项目背景介绍 通常,保险公司信息化程度很高,基本上都有业务处理系统(像集团业务处理系统、老业务处理系统、个人代理人系统等)、数据服务系统(通过</div> </li> <li><a href="/article/818.htm" title="始终要页面在ifream的最顶层" target="_blank">始终要页面在ifream的最顶层</a> <span class="text-muted">林鹤霄</span> <div>index.jsp中有ifream,但是session消失后要让login.jsp始终显示到ifream的最顶层。。。始终没搞定,后来反复琢磨之后,得到了解决办法,在这儿给大家分享下。。 index.jsp--->主要是加了颜色的那一句 <html> <iframe name="top" ></iframe> <ifram</div> </li> <li><a href="/article/945.htm" title="MySQL binlog恢复数据" target="_blank">MySQL binlog恢复数据</a> <span class="text-muted">aigo</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>1,先确保my.ini已经配置了binlog:   # binlog log_bin = D:/mysql-5.6.21-winx64/log/binlog/mysql-bin.log log_bin_index = D:/mysql-5.6.21-winx64/log/binlog/mysql-bin.index log_error = D:/mysql-5.6.21-win</div> </li> <li><a href="/article/1072.htm" title="OCX打成CBA包并实现自动安装与自动升级" target="_blank">OCX打成CBA包并实现自动安装与自动升级</a> <span class="text-muted">alxw4616</span> <a class="tag" taget="_blank" href="/search/ocx/1.htm">ocx</a><a class="tag" taget="_blank" href="/search/cab/1.htm">cab</a> <div>近来手上有个项目,需要使用ocx控件 (ocx是什么? http://baike.baidu.com/view/393671.htm) 在生产过程中我遇到了如下问题. 1. 如何让 ocx 自动安装?     a) 如何签名?     b) 如何打包?     c) 如何安装到指定目录? 2.</div> </li> <li><a href="/article/1199.htm" title="Hashmap队列和PriorityQueue队列的应用" target="_blank">Hashmap队列和PriorityQueue队列的应用</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/Hashmap%E9%98%9F%E5%88%97/1.htm">Hashmap队列</a><a class="tag" taget="_blank" href="/search/PriorityQueue%E9%98%9F%E5%88%97/1.htm">PriorityQueue队列</a> <div>  HashMap队列已经是学过了的,但是最近在用的时候不是很熟悉,刚刚重新看以一次,   HashMap是K,v键 ,值     put()添加元素      //下面试HashMap去掉重复的 package com.hashMapandPriorityQueue; import java.util.H</div> </li> <li><a href="/article/1326.htm" title="JDK1.5 returnvalue实例" target="_blank">JDK1.5 returnvalue实例</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/thread/1.htm">thread</a><a class="tag" taget="_blank" href="/search/java%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">java多线程</a><a class="tag" taget="_blank" href="/search/returnvalue/1.htm">returnvalue</a> <div>Callable接口: 返回结果并且可能抛出异常的任务。实现者定义了一个不带任何参数的叫做 call 的方法。 Callable 接口类似于 Runnable,两者都是为那些其实例可能被另一个线程执行的类设计的。但是 Runnable 不会返回结果,并且无法抛出经过检查的异常。        ExecutorService接口方</div> </li> <li><a href="/article/1453.htm" title="angularjs指令中动态编译的方法(适用于有异步请求的情况) 内嵌指令无效" target="_blank">angularjs指令中动态编译的方法(适用于有异步请求的情况) 内嵌指令无效</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/AngularJS/1.htm">AngularJS</a> <div>        在directive的link中有一个$http请求,当请求完成后根据返回的值动态做element.append('......');这个操作,能显示没问题,可问题是我动态组的HTML里面有ng-click,发现显示出来的内容根本不执行ng-click绑定的方法!     </div> </li> <li><a href="/article/1580.htm" title="【Java范型二】Java范型详解之extend限定范型参数的类型" target="_blank">【Java范型二】Java范型详解之extend限定范型参数的类型</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/extend/1.htm">extend</a> <div>在第一篇中,定义范型类时,使用如下的方式:   public class Generics<M, S, N> { //M,S,N是范型参数 }  这种方式定义的范型类有两个基本的问题:   1. 范型参数定义的实例字段,如private M m = null;由于M的类型在运行时才能确定,那么我们在类的方法中,无法使用m,这跟定义pri</div> </li> <li><a href="/article/1707.htm" title="【HBase十三】HBase知识点总结" target="_blank">【HBase十三】HBase知识点总结</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/hbase/1.htm">hbase</a> <div>1. 数据从MemStore flush到磁盘的触发条件有哪些?    a.显式调用flush,比如flush 'mytable'    b.MemStore中的数据容量超过flush的指定容量,hbase.hregion.memstore.flush.size,默认值是64M 2. Region的构成是怎么样? 1个Region由若干个Store组成</div> </li> <li><a href="/article/1834.htm" title="服务器被DDOS攻击防御的SHELL脚本" target="_blank">服务器被DDOS攻击防御的SHELL脚本</a> <span class="text-muted">ronin47</span> <div>mkdir /root/bin vi /root/bin/dropip.sh #!/bin/bash/bin/netstat -na|grep ESTABLISHED|awk ‘{print $5}’|awk -F:‘{print $1}’|sort|uniq -c|sort -rn|head -10|grep -v -E ’192.168|127.0′|awk ‘{if($2!=null&a</div> </li> <li><a href="/article/1961.htm" title="java程序员生存手册-craps 游戏-一个简单的游戏" target="_blank">java程序员生存手册-craps 游戏-一个简单的游戏</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> import java.util.Random; public class CrapsGame { /** * *一个简单的赌*博游戏,游戏规则如下: *玩家掷两个骰子,点数为1到6,如果第一次点数和为7或11,则玩家胜, *如果点数和为2、3或12,则玩家输, *如果和为其它点数,则记录第一次的点数和,然后继续掷骰,直至点数和等于第一次掷出的点</div> </li> <li><a href="/article/2088.htm" title="TOMCAT启动提示NB: JAVA_HOME should point to a JDK not a JRE解决" target="_blank">TOMCAT启动提示NB: JAVA_HOME should point to a JDK not a JRE解决</a> <span class="text-muted">开窍的石头</span> <a class="tag" taget="_blank" href="/search/JAVA_HOME/1.htm">JAVA_HOME</a> <div>当tomcat是解压的时候,用eclipse启动正常,点击startup.bat的时候启动报错; 报错如下:   The JAVA_HOME environment variable is not defined correctly This environment variable is needed to run this program NB: JAVA_HOME shou</div> </li> <li><a href="/article/2215.htm" title="[操作系统内核]操作系统与互联网" target="_blank">[操作系统内核]操作系统与互联网</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/1.htm">操作系统</a> <div>      我首先申明:我这里所说的问题并不是针对哪个厂商的,仅仅是描述我对操作系统技术的一些看法       操作系统是一种与硬件层关系非常密切的系统软件,按理说,这种系统软件应该是由设计CPU和硬件板卡的厂商开发的,和软件公司没有直接的关系,也就是说,操作系统应该由做硬件的厂商来设计和开发</div> </li> <li><a href="/article/2342.htm" title="富文本框ckeditor_4.4.7 文本框的简单使用 支持IE11" target="_blank">富文本框ckeditor_4.4.7 文本框的简单使用 支持IE11</a> <span class="text-muted">cuityang</span> <a class="tag" taget="_blank" href="/search/%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A1%86/1.htm">富文本框</a> <div><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>知识库内容编辑</tit</div> </li> <li><a href="/article/2469.htm" title="Property null not found" target="_blank">Property null not found</a> <span class="text-muted">darrenzhu</span> <a class="tag" taget="_blank" href="/search/datagrid/1.htm">datagrid</a><a class="tag" taget="_blank" href="/search/Flex/1.htm">Flex</a><a class="tag" taget="_blank" href="/search/Advanced/1.htm">Advanced</a><a class="tag" taget="_blank" href="/search/propery+null/1.htm">propery null</a> <div>When you got error message like "Property null not found ***", try to fix it by the following way: 1)if you are using AdvancedDatagrid, make sure you only update the data in the data prov</div> </li> <li><a href="/article/2596.htm" title="MySQl数据库字符串替换函数使用" target="_blank">MySQl数据库字符串替换函数使用</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E5%87%BD%E6%95%B0/1.htm">函数</a><a class="tag" taget="_blank" href="/search/%E6%9B%BF%E6%8D%A2/1.htm">替换</a> <div>需求:需要将数据表中一个字段的值里面的所有的  .   替换成  _   原来的数据是  site.title  site.keywords  .... 替换后要为     site_title  site_keywords   使用的SQL语句如下:   updat</div> </li> <li><a href="/article/2723.htm" title="mac上终端起动MySQL的方法" target="_blank">mac上终端起动MySQL的方法</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/mac/1.htm">mac</a> <div>首先去官网下载: http://www.mysql.com/downloads/ 我下载了5.6.11的dmg然后安装,安装完成之后..如果要用终端去玩SQL.那么一开始要输入很长的:/usr/local/mysql/bin/mysql 这不方便啊,好想像windows下的cmd里面一样输入mysql -uroot -p1这样...上网查了下..可以实现滴. 打开终端,输入: 1</div> </li> <li><a href="/article/2850.htm" title="Gson使用一(Gson)" target="_blank">Gson使用一(Gson)</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/gson/1.htm">gson</a> <div>转载请出自出处:http://eksliang.iteye.com/blog/2175401 一.概述 从结构上看Json,所有的数据(data)最终都可以分解成三种类型: 第一种类型是标量(scalar),也就是一个单独的字符串(string)或数字(numbers),比如"ickes"这个字符串。 第二种类型是序列(sequence),又叫做数组(array)</div> </li> <li><a href="/article/2977.htm" title="android点滴4" target="_blank">android点滴4</a> <span class="text-muted">gundumw100</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>Android 47个小知识 http://www.open-open.com/lib/view/open1422676091314.html Android实用代码七段(一) http://www.cnblogs.com/over140/archive/2012/09/26/2611999.html http://www.cnblogs.com/over140/arch</div> </li> <li><a href="/article/3104.htm" title="JavaWeb之JSP基本语法" target="_blank">JavaWeb之JSP基本语法</a> <span class="text-muted">ihuning</span> <a class="tag" taget="_blank" href="/search/javaweb/1.htm">javaweb</a> <div>  目录   JSP模版元素  JSP表达式  JSP脚本片断  EL表达式  JSP注释  特殊字符序列的转义处理  如何查找JSP页面中的错误   JSP模版元素    JSP页面中的静态HTML内容称之为JSP模版元素,在静态的HTML内容之中可以嵌套JSP</div> </li> <li><a href="/article/3231.htm" title="App Extension编程指南(iOS8/OS X v10.10)中文版" target="_blank">App Extension编程指南(iOS8/OS X v10.10)中文版</a> <span class="text-muted">啸笑天</span> <a class="tag" taget="_blank" href="/search/ext/1.htm">ext</a> <div>         当iOS 8.0和OS X v10.10发布后,一个全新的概念出现在我们眼前,那就是应用扩展。顾名思义,应用扩展允许开发者扩展应用的自定义功能和内容,能够让用户在使用其他app时使用该项功能。你可以开发一个应用扩展来执行某些特定的任务,用户使用该扩展后就可以在多个上下文环境中执行该任务。比如说,你提供了一个能让用户把内容分</div> </li> <li><a href="/article/3358.htm" title="SQLServer实现无限级树结构" target="_blank">SQLServer实现无限级树结构</a> <span class="text-muted">macroli</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/SQL+Server/1.htm">SQL Server</a> <div> 表结构如下: 数据库id path titlesort 排序 1 0 首页 0 2 0,1 新闻 1 3 0,2 JAVA 2 4 0,3 JSP 3 5 0,2,3 业界动态 2 6 0,2,3 国内新闻 1 创建一个存储过程来实现,如果要在页面上使用可以设置一个返回变量将至传过去   create procedure test as begin decla</div> </li> <li><a href="/article/3485.htm" title="Css居中div,Css居中img,Css居中文本,Css垂直居中div" target="_blank">Css居中div,Css居中img,Css居中文本,Css垂直居中div</a> <span class="text-muted">qiaolevip</span> <a class="tag" taget="_blank" href="/search/%E4%BC%97%E8%A7%82%E5%8D%83%E8%B1%A1/1.htm">众观千象</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E6%B0%B8%E6%97%A0%E6%AD%A2%E5%A2%83/1.htm">学习永无止境</a><a class="tag" taget="_blank" href="/search/%E6%AF%8F%E5%A4%A9%E8%BF%9B%E6%AD%A5%E4%B8%80%E7%82%B9%E7%82%B9/1.htm">每天进步一点点</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>/**********Css居中Div**********/ div.center { width: 100px; margin: 0 auto; } /**********Css居中img**********/ img.center { display: block; margin-left: auto; margin-right: auto; } </div> </li> <li><a href="/article/3612.htm" title="Oracle 常用操作(实用)" target="_blank">Oracle 常用操作(实用)</a> <span class="text-muted">吃猫的鱼</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a> <div> SQL>select text from all_source where owner=user and name=upper('&plsql_name');  SQL>select * from user_ind_columns where index_name=upper('&index_name');  将表记录恢复到指定时间段以前</div> </li> <li><a href="/article/3739.htm" title="iOS中使用RSA对数据进行加密解密" target="_blank">iOS中使用RSA对数据进行加密解密</a> <span class="text-muted">witcheryne</span> <a class="tag" taget="_blank" href="/search/ios/1.htm">ios</a><a class="tag" taget="_blank" href="/search/rsa/1.htm">rsa</a><a class="tag" taget="_blank" href="/search/iPhone/1.htm">iPhone</a><a class="tag" taget="_blank" href="/search/objective+c/1.htm">objective c</a> <div>  RSA算法是一种非对称加密算法,常被用于加密数据传输.如果配合上数字摘要算法, 也可以用于文件签名. 本文将讨论如何在iOS中使用RSA传输加密数据. 本文环境 mac os  openssl-1.0.1j, openssl需要使用1.x版本, 推荐使用[homebrew](http://brew.sh/)安装. Java 8 RSA基本原理 RS</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>