yyds_it_huo

使用HTML语言和CSS开发商业站点

学习目标

学习完本课程后，能够：

使用HTML进行网页布局
使用CSS3美化网页
制作精美的商业网站

一、HTML5基础

1.1 HTML简介

什么是HTML

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

中文名：超文本标记语言	阅读方式：网页浏览器
外文名： Hyper Text Markup Language	外语缩写： HTML
类型：标记语言	文件扩展名： html 或 htm

HTML发展史

HTML历史上有如下版本：

HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。
HTML 2.0：1995年1 1月作为RFC1866发布，于2000年6月发布之后被宣布已经过时。
HTML 3.2：1997年1月14日，W3C推荐标准。
HTML4.0：1997年12月18日，W3C推荐标准。
HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准。
HTML 5：HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。Internet Explorer 8及以前的版本不支持。

HTML5优势

世界知名浏览器厂商对HTML5的支持（微软，Google，苹果）
市场的需求
跨平台

W3C标准

W3C
     World Wide Web Consortium（万维网联盟）
    成立于1994年，Web技术领域最权威和具有影响力的国际中立性技术标准机构
    http://www.w3.org/
    http://www.chinaw3c.org/
W3C标准包括
     结构化标准语言（HTML 、XML）
     表现标准语言（CSS3）
     行为标准（DOM 、ECMAScript）

1.2 HTML基本结构

入门案例

doctype html>  
<html>
	<head>
	    <title>hellotitle>
	    <meta charset="UTF-8" />
	head>
	<body>
	    hello html ~
	body>
html>

标签</h4> <a href="http://img.e-com-net.com/image/info8/38c3f9496f2e45238fccd137c2774617.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/38c3f9496f2e45238fccd137c2774617.jpg" alt="使用HTML语言和CSS开发商业站点_第2张图片" width="650" height="252" style="border:1px solid black;"></a> <h4><meta>标签</h4> <a href="http://img.e-com-net.com/image/info8/ded177de51734b989db8e7058e76a20c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ded177de51734b989db8e7058e76a20c.jpg" alt="使用HTML语言和CSS开发商业站点_第3张图片" width="565" height="283" style="border:1px solid black;"></a> 注：gb2312 包含全部中文字符 utf-8 包含全世界所有国家需要用到的字符 页面编码应与页面文件保存时的编码一致 <h3>1.3 网页基本标签</h3> <h5>标题标签</h5> <pre><code class="prism language-html"><!doctype html> <html> <head> <title>基本标签</title> <meta charset="UTF-8" /> </head> <body> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/225c10fa19984a3b8febde526965ec75.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/225c10fa19984a3b8febde526965ec75.jpg" alt="使用HTML语言和CSS开发商业站点_第4张图片" width="495" height="559" style="border:1px solid black;"></a> <h5>段落标签</h5> <pre><code class="prism language-html"><!doctype html> <html> <head> <title>基本标签</title> <meta charset="UTF-8" /> </head> <body> <h1>北京欢迎你</h1> <p>北京欢迎你，有梦想谁都了不起</p> <p>有勇气就会有奇迹</p> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/1e410d2be6a746559e60cb9b9c2592ed.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/1e410d2be6a746559e60cb9b9c2592ed.jpg" alt="使用HTML语言和CSS开发商业站点_第5张图片" width="536" height="338" style="border:1px solid black;"></a> <h5>换行标签</h5> <pre><code class="prism language-html"><!doctype html> <html> <head> <title>基本标签</title> <meta charset="UTF-8" /> </head> <body> <h1>北京欢迎你</h1> <p> 北京欢迎你，有梦想谁都了不起 <br /> 有勇气就会有奇迹 </p> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/f54ee558ae2f4c749395cae6c9d77cda.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f54ee558ae2f4c749395cae6c9d77cda.jpg" alt="使用HTML语言和CSS开发商业站点_第6张图片" width="434" height="319" style="border:1px solid black;"></a> <h5>水平线标签</h5> <pre><code class="prism language-html"><!doctype html> <html> <head> <title>基本标签</title> <meta charset="UTF-8" /> </head> <body> <h1>北京欢迎你</h1> <hr /> <p> 北京欢迎你，有梦想谁都了不起!<br /> 有勇气就会有奇迹。 </p> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/ddd5fd037af14b5d9df37fe9f033135b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ddd5fd037af14b5d9df37fe9f033135b.jpg" alt="使用HTML语言和CSS开发商业站点_第7张图片" width="439" height="346" style="border:1px solid black;"></a> <h5>字体样式标签</h5> 加粗：… 或 … 斜体：… 或 … <pre><code class="prism language-html"><!doctype html> <html> <head> <title>基本标签</title> <meta charset="UTF-8" /> </head> <body> <strong>霍世元简介</strong> <p> <em>年龄: </em>24<br /> <em>性别: </em>男<br /> </p> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/e93d80f495904476b5398294e5b5396e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e93d80f495904476b5398294e5b5396e.jpg" alt="使用HTML语言和CSS开发商业站点_第8张图片" width="436" height="272" style="border:1px solid black;"></a> <h5>注释和特殊符号</h5> <a href="http://img.e-com-net.com/image/info8/e7b1e05964a544ad9397a4d93e7fb058.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e7b1e05964a544ad9397a4d93e7fb058.jpg" alt="使用HTML语言和CSS开发商业站点_第9张图片" width="650" height="248" style="border:1px solid black;"></a> <h3>1.4 插入图像标签</h3> 常见的图像格式：JPG ,GIF , PNG , BMP <pre><code class="prism language-html"><!doctype html> <html> <head> <title>图像标签</title> <meta charset="UTF-8" /> </head> <body>  <img src="image/hetao.jpg" alt="text" title="哈哈哈" width="300px" height="350px" /> <p>好吃不贵的核桃</p> <p>10元3斤</p> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/98f60c21558b40e182cd973a6d93e23d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/98f60c21558b40e182cd973a6d93e23d.jpg" alt="使用HTML语言和CSS开发商业站点_第10张图片" width="522" height="768" style="border:1px solid black;"></a> <h3>练习</h3> 练习1：使用学过的图像标签、标题标签、水平线标签、斜体标签、加粗标签、段落标签等制作自我介绍。 <h3>1.5 超链接标签</h3> <h4>超链接基本用法</h4> <a href="http://img.e-com-net.com/image/info8/4c67f2e0ddd44b8384e3ddec7f2a2547.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/4c67f2e0ddd44b8384e3ddec7f2a2547.jpg" alt="使用HTML语言和CSS开发商业站点_第11张图片" width="650" height="124" style="border:1px solid black;"></a> _blank：新建空白页打开 _self：默认样式，更改当前页面的访问路径，不会打开新的页面 <h4>超链接应用场合</h4> <ul> <li>页面间连接</li> </ul> <pre><code class="prism language-html"><!doctype html> <html> <head> <title>页面间链接</title> <meta charset="UTF-8" /> </head> <body> <a href="demo03.html" target="_blank">链接到demo03图像标签案例</a><br/> <a href="demo04.html" target="_self"> <img src="image/hetao.jpg" alt="核桃图片" title="买核桃吗？走过路过不要错过" /> </a> </body> </html> </code></pre> <ul> <li>锚链接</li> </ul> <pre><code class="prism language-html"><!doctype html> <html> <head> <title>锚链接</title> <meta charset="UTF-8" /> </head> <body> <a name="_top">HTML从入门到精通</a> <h6>你好HTML</h6> <h6>你好HTML</h6> <h6>你好HTML</h6> <h6>你好HTML</h6> <h6>你好HTML</h6> <h6>你好HTML</h6> <h6>你好HTML</h6> <h6>你好HTML</h6> <h6>你好HTML</h6> <h6>你好HTML</h6> <h6>你好HTML</h6> <h6>你好HTML</h6> <a href="#_top">回到顶部</a> <br><br><br><br> </body> </html> </code></pre> <ul> <li>外部链接</li> </ul> <pre><code class="prism language-html"><!doctype html> <html> <head> <title>外部链接</title> <meta charset="UTF-8" /> </head> <body> <a href="http://www.baidu.com" target="_blank">百度</a> <a href="http://www.csdn.com" target="_self">CSDN</a> <a href="mailto:1691655063@qq.com">点击联系我</a> </body> </html> </code></pre> <h3>1.6 行内元素和块元素的特性</h3> 块元素：无论内容多少，该元素独占一行（p、h1-h6 …） 行内元素：内容撑开宽度，左右都是行内元素的可以排在一行（a，strong，em、img …） <pre><code class="prism language-html"> <!doctype html> <html> <head> <title>行内元素和块元素</title> <meta charset="UTF-8" /> </head> <body> <p>我是P元素</p> <h1>我是标题1</h1> <a href="#">我是超链接a元素</a> <strong>我是strong元素--加粗</strong> <em>我是em元素--斜体</em> </body> </html> </code></pre> <h3>练习</h3> 练习2：超链接 <h2>二、列表、表格与媒体元素</h2> <h3>2.1 列表</h3> 列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息。 <h4>无序列表</h4> <pre><code class="prism language-html"><!doctype html> <html> <head> <title>列表</title> <meta charset="UTF-8" /> </head> <body>  <ul type="disc"> <li>山西省</li> <li>河北省</li> <li>山东省</li> <li>陕西省</li> <li>......</li> </ul> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/d5db7f18d1964e078700b2d4f2bdb457.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d5db7f18d1964e078700b2d4f2bdb457.jpg" alt="使用HTML语言和CSS开发商业站点_第12张图片" width="364" height="359" style="border:1px solid black;"></a> 一般用于无序类型的列表，如导航，侧边栏新闻、有规律的图文组合模块等 <h4>有序列表</h4> <pre><code class="prism language-html"><!doctype html> <html> <head> <title>列表</title> <meta charset="UTF-8" /> </head> <body>  <ol type="1" start="1"> <li>太原市</li> <li>长治市</li> <li>晋城市</li> <li>运城市</li> <li>......</li> </ol> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/c041c42784b847a3b2b076d9e390284d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c041c42784b847a3b2b076d9e390284d.jpg" alt="使用HTML语言和CSS开发商业站点_第13张图片" width="396" height="324" style="border:1px solid black;"></a> 一般用于排序类型的列表，如试卷、问卷选项等 <h4>定义列表</h4> <pre><code class="prism language-html"><!doctype html> <html> <head> <title>列表</title> <meta charset="UTF-8" /> </head> <body>  <dl> <dt>山西省</dt> <dd>太原市</dd> <dd>长治市</dd> <dd>晋城市</dd> <dd>......</dd> <dt>河北省</dt> <dd>石家庄市</dd> <dd>邢台市</dd> <dd>邯郸市</dd> <dd>......</dd> </dl> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/165028d433cc4b4eb2944d8976394b1f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/165028d433cc4b4eb2944d8976394b1f.jpg" alt="使用HTML语言和CSS开发商业站点_第14张图片" width="463" height="474" style="border:1px solid black;"></a> 一般用于一个标题下有一个或多个列表项的情况 <h4>小结</h4> <a href="http://img.e-com-net.com/image/info8/7e96c3ad53b548cfa815cd80a8ebc4a5.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7e96c3ad53b548cfa815cd80a8ebc4a5.jpg" alt="使用HTML语言和CSS开发商业站点_第15张图片" width="650" height="362" style="border:1px solid black;"></a> <h4>练习</h4> 练习1：热门活动 练习2：制作音乐排行榜 <h3>2.2 表格</h3> <h4>表格基本使用方法</h4> <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表格</title> </head> <body>  <table border="1px"> <tr> <td> 11 </td> <td> 12 </td> <td> 13 </td> </tr> <tr> <td> 21 </td> <td> 22 </td> <td> 23 </td> </tr> <tr> <td> 31 </td> <td> 32 </td> <td> 33 </td> </tr> </table> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/4fc55962f8a14c9fb163387282f41336.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/4fc55962f8a14c9fb163387282f41336.jpg" alt="使用HTML语言和CSS开发商业站点_第16张图片" width="288" height="263" style="border:1px solid black;"></a> <h4>跨行、跨列</h4> <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表格</title> </head> <body> <table border="1px"> <tr> <td colspan="2">11</td>  <td>13</td> </tr> <tr> <td>21</td> <td>22</td> <td rowspan="2">23</td>  </tr> <tr> <td>31</td> <td>32</td> </tr> </table> </body> </html> </code></pre> <h4>练习</h4> 练习3：学生成绩表 <h3>2.3 媒体元素</h3> <h4>视频元素</h4> <pre><code class="prism language-html"><!doctype html> <html> <head> <title>列表</title> <meta charset="UTF-8" /> </head> <body>  <video src="video/html.mp4" controls></video> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/09ce52fac1524d429f5ce4053d573d67.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/09ce52fac1524d429f5ce4053d573d67.jpg" alt="使用HTML语言和CSS开发商业站点_第17张图片" width="650" height="427" style="border:1px solid black;"></a> <h4>音频元素</h4> <pre><code class="prism language-html"><!doctype html> <html> <head> <title>音频</title> <meta charset="UTF-8" /> </head> <body>  <audio src="video/music.mp3" controls></audio> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/e54db930a8004a82a4bbc8da23b2cd6a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e54db930a8004a82a4bbc8da23b2cd6a.jpg" alt="使用HTML语言和CSS开发商业站点_第18张图片" width="527" height="257" style="border:1px solid black;"></a> loop属性可以实现视频的循环播放 <h3>2.4 结构元素</h3> 页面结构 <a href="http://img.e-com-net.com/image/info8/aa46eedfe99b4a949303e358c76f2637.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/aa46eedfe99b4a949303e358c76f2637.jpg" alt="使用HTML语言和CSS开发商业站点_第19张图片" width="650" height="432" style="border:1px solid black;"></a> 结构元素 <a href="http://img.e-com-net.com/image/info8/1058e52aded1420497d2bf1984263008.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/1058e52aded1420497d2bf1984263008.jpg" alt="使用HTML语言和CSS开发商业站点_第20张图片" width="650" height="309" style="border:1px solid black;"></a> <pre><code class="prism language-html"><!doctype html> <html> <head> <title>布局</title> <meta charset="UTF-8" /> <style> header, section, footer { height: 200px; border: 1px solid red; } </style> </head> <body> <header> <h2>网页头部</h2> </header> <section> <h2>网页主体部分</h2> </section> <footer> <h2>网页底部</h2> </footer> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/d305520f9b7d4bd39517452cab0a991a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d305520f9b7d4bd39517452cab0a991a.jpg" alt="使用HTML语言和CSS开发商业站点_第21张图片" width="650" height="818" style="border:1px solid black;"></a> <h3>2.5 内联框架的使用</h3> <h4>iframe用法</h4> <pre><code class="prism language-html"><!doctype html> <html> <head> <title>iframe</title> <meta charset="UTF-8" /> </head> <body>  <iframe src="demo04.html" name="mainFrame"></iframe> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/88833bad00fa4cef832b45e5d8badbba.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/88833bad00fa4cef832b45e5d8badbba.jpg" alt="使用HTML语言和CSS开发商业站点_第22张图片" width="650" height="459" style="border:1px solid black;"></a> 设置src的属性值为 http://www.bdqn.cn 在这个页面中也可以打开一个线上的网页 <h4><iframe>属性实现页面间的相互跳转</h4> <pre><code class="prism language-html"><!doctype html> <html> <head> <title>iframe</title> <meta charset="UTF-8" /> </head> <body>  <a href="demo04.html" target="mainFrame">下边显示demo04页面</a> <br /> <a href="demo03.html" target="mainFrame">下边显示demo03页面</a> <br /> <a href="demo02.html" target="mainFrame">下边显示demo02页面</a> <br />  <iframe src="demo01.html" name="mainFrame"></iframe> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/1c222cf8c73844d09fb9ed881e7941cf.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/1c222cf8c73844d09fb9ed881e7941cf.jpg" alt="使用HTML语言和CSS开发商业站点_第23张图片" width="640" height="501" style="border:1px solid black;"></a> <h2>三、表单（重点）</h2> <h3>3.1 常用的表单元素</h3> <h4>案例1</h4> 表单基本结构 <pre><code class="prism language-html"><!doctype html> <html> <head> <title>表单</title> <meta charset="UTF-8" /> </head> <body>  <form method="get" action="#">  名字：<input name="name" type="text" value="霍" /> <br /> 密码：<input name="pass" type="password"> <br /> <input type="submit" name="Button" value="提交" /> <input type="reset" name="Reset" value="重填" /> <br /> </form> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/6675c80483854d6abed24479d6042a3f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/6675c80483854d6abed24479d6042a3f.jpg" alt="使用HTML语言和CSS开发商业站点_第24张图片" width="610" height="311" style="border:1px solid black;"></a> <h4>input 常用属性说明</h4> <a href="http://img.e-com-net.com/image/info8/300d98fe3d524bd592fd719690d47f8c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/300d98fe3d524bd592fd719690d47f8c.jpg" alt="使用HTML语言和CSS开发商业站点_第25张图片" width="650" height="336" style="border:1px solid black;"></a> <h4>案例2</h4> 常用属性与属性值 <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>form表单</title> </head> <body> <form method="post" action="#"> <h3>注册表单</h3>  用户名：<input type="text" name="user" size="8" maxlength="8" /> <br /> 密码：<input type="password" name="pwd" /> <br />  爱好： <input type="checkbox" name="like" value="1" />篮球 <input type="checkbox" name="like" value="2" />足球 <input type="checkbox" name="like" value="3" checked />排球 <br />  性别：  <input type="radio" name="sex" value="1" checked />男 <input type="radio" name="sex" value="2" />女 <br />  城市: <select name="city"> <option value="1">北京</option> <option value="2" selected>上海</option> </select> <br />  自我描述： <textarea name="text" cols="20" rows="3">文本内容</textarea> <br />  头像: <input type="file" name="path" /> <br />  <input type="submit" name="butSubmit" value="提交" />  <input type="reset" name="butReset" value="重填" />  <input type="button" name="butButton" value="按钮" /> <br />  <input type="image" src="image/login.gif" /> <br /> </form> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/eb669c9976194d6d9483651f9961ea3a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/eb669c9976194d6d9483651f9961ea3a.jpg" alt="使用HTML语言和CSS开发商业站点_第26张图片" width="650" height="855" style="border:1px solid black;"></a> <h4>案例3</h4> 输入框格式校验 <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>form表单</title> </head> <body> <form method="get" action="#">  邮箱：<input type="email" name="email" /> <br />  输入网址：<input type="url" name="userUrl" /> <br />  输入数字：<input type="number" name="num" min="0" max="100" step="10"> <br />  输入数字：<input type="range" name="num" min="0" max="100" step="10"> <br />  输入关键词：<input type="search" name="sousou" /> <br /> <input type="submit" value="提交" /> </form> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/9526133bbe2242e1b8d947355b17e2ec.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/9526133bbe2242e1b8d947355b17e2ec.jpg" alt="使用HTML语言和CSS开发商业站点_第27张图片" width="497" height="352" style="border:1px solid black;"></a> <h4>练习</h4> 练习1：注册表单 <h3>3.2 表单的高级应用</h3> <h4>案例4</h4> 隐藏域；只读；禁用相关属性 <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>form表单</title> </head> <body> <form method="get">  <input type="hidden" value="666" name="userid" /> <br />  <input name="name" type="text" value="张三" readonly /> <br />  <input type="button" disabled value="保存" /> <br /> <input type="submit" value="提交" /> </form> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/973deea2dc4e47babad7c96f861cc735.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/973deea2dc4e47babad7c96f861cc735.jpg" alt="使用HTML语言和CSS开发商业站点_第28张图片" width="513" height="308" style="border:1px solid black;"></a> <h4>案例5</h4> 表单元素的标注 <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>form表单</title> </head> <body> <form method="get">  性别： <label for="man">男</label> <input type="radio" name="sex" id="man" value="1" /> <label for="woman">女</label> <input type="radio" name="sex" id="woman" value="0" /> </form> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/c0531c6432d44d958ce798c65ee07067.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c0531c6432d44d958ce798c65ee07067.jpg" alt="使用HTML语言和CSS开发商业站点_第29张图片" width="571" height="212" style="border:1px solid black;"></a> <h4>练习</h4> 练习2要求： <ol> <li>邮箱文本框中默认文本为“student@bdqn.cn “ ，且文本框不可修改</li> <li>单击文字“电子邮箱”、“设置密码”、“真实姓名”、“验证”时鼠标的光标焦点移动到对应的文本框里</li> <li>单击“男”选中其对应的单选按钮，单击“女”选中其对应的单选按钮</li> <li>选择身份的下拉列表框被禁止使用</li> </ol> <h3>3.3 表单的初级验证</h3> 表单验证的好处：减轻服务器的压力；保证数据的可行性和安全性； <h4>案例6</h4> placeholder ；required ； pattern 用法 <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>form表单</title> </head> <body> <form method="get">  搜索：<input type="text" name="name" placeholder="请输入要搜索的关键字" /><br>  <input type="text" name="username" required /> <br>  手机号: <input type="text" name="phone" required pattern="1[3578]\d{9}" /><br> <input type="submit" value="提交" /> </form> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/4fe729adb4dd4656a195a90c6a4bc689.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/4fe729adb4dd4656a195a90c6a4bc689.jpg" alt="使用HTML语言和CSS开发商业站点_第30张图片" width="494" height="274" style="border:1px solid black;"></a> <h2>四、初识CSS3（重点）</h2> <h3>4.1 CSS概念</h3> <h4>简介</h4> 层叠样式表: 是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 <table> <tbody> <tr> <td>中文名：层叠样式表</td> <td>外语缩写：CSS（也作文件扩展名）</td> </tr> <tr> <td>外文名： Cascading Style Sheets</td> <td>其他称呼：级联样式表</td> </tr> </tbody> </table> <h4>CSS发展史</h4> <a href="http://img.e-com-net.com/image/info8/c91d53bcdc434a48adcecd0e3d6fbf35.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c91d53bcdc434a48adcecd0e3d6fbf35.jpg" alt="使用HTML语言和CSS开发商业站点_第31张图片" width="650" height="306" style="border:1px solid black;"></a> <h4>css优势</h4> <ul> <li>内容与表现分离</li> <li>网页的表现统一，容易修改</li> <li>丰富的样式，使得页面布局更加灵活</li> <li>减少网页的代码量，增加网页的浏览速度，节省网络带宽</li> <li>运用独立于页面的CSS，有利于网页被搜索引擎收录</li> </ul> <h3>4.2 CSS语法规则</h3> <h4>CSS基本语法结构</h4> <a href="http://img.e-com-net.com/image/info8/6220d2a52ade4761a4e35c45edab3c3d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/6220d2a52ade4761a4e35c45edab3c3d.jpg" alt="使用HTML语言和CSS开发商业站点_第32张图片" width="650" height="319" style="border:1px solid black;"></a> CSS的最后一条声明后的“;”可写可不写，但是，基于W3C标准规范考虑，建议最后一条声明的结束“;” 都要写上 <h4>style标签</h4> <a href="http://img.e-com-net.com/image/info8/360cf3bcd2d94503b748e05ae7b951a1.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/360cf3bcd2d94503b748e05ae7b951a1.jpg" alt="使用HTML语言和CSS开发商业站点_第33张图片" width="650" height="354" style="border:1px solid black;"></a> <h3>4.3 HTML中引入CSS样式</h3> <h4>行内样式</h4> <pre><code class="prism language-html"><!doctype html> <html> <head> <title>CSS</title> <meta charset="UTF-8" /> </head> <body> <h1 style="color: red;">style属性的应用</h1> <p style="font-size: 14px; color:green">style行内样式</p> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/3900b711d83a40ca82795bbe0f0c003d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/3900b711d83a40ca82795bbe0f0c003d.jpg" alt="使用HTML语言和CSS开发商业站点_第34张图片" width="545" height="332" style="border:1px solid black;"></a> <h4>内部样式</h4> <pre><code class="prism language-html"><!doctype html> <html> <head> <title>CSS</title> <meta charset="UTF-8" /> <style> h1 { color: red; } p { font-size: 14px; color: green } </style> </head> <body> <h1>style标签的应用</h1> <p>style内部样式</p> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/872183634a304f8488fc4ecb4f105dd2.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/872183634a304f8488fc4ecb4f105dd2.jpg" alt="使用HTML语言和CSS开发商业站点_第35张图片" width="527" height="314" style="border:1px solid black;"></a> 优点：方便在同页面中修改样式 缺点：不利于在多页面间共享复用代码及维护，对内容与样式的分离也不够彻底 <h4>外部样式</h4> 链接外部样式 <pre><code class="prism language-html"><!doctype html> <html> <head> <title>CSS</title> <meta charset="UTF-8" /> <link href="css/style.css" rel="stylesheet" type="text/css"> </head> <body> <h1>link标签引入css样式</h1> <p>外部样式--链接外部样式</p> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/c2f5e62a01c841839211c42fed20082c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c2f5e62a01c841839211c42fed20082c.jpg" alt="使用HTML语言和CSS开发商业站点_第36张图片" width="571" height="314" style="border:1px solid black;"></a> 导入外部样式表 <pre><code class="prism language-html"><!doctype html> <html> <head> <title>CSS</title> <meta charset="UTF-8" /> <style type="text/css"> @import url("css/style.css"); </style> </head> <body> <h1>style标签引入css样式</h1> <p>外部样式--导入外部样式</p> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/3a47dfbf5d354a328c3a07832514b0db.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/3a47dfbf5d354a328c3a07832514b0db.jpg" alt="使用HTML语言和CSS开发商业站点_第37张图片" width="650" height="310" style="border:1px solid black;"></a> 链接式与导入式的区别 <ul> <li> 标签属于XHTML，@import是属于CSS2.1 </li> <li>使用链接的CSS文件先加载到网页当中，再进行编译显示</li> <li>使用@import导入的CSS文件，客户端显示HTML结构，再把CSS文件加载到网页当中</li> <li>@import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的</li> </ul> <h4>3种样式的优先级</h4> 就近原则行内样式>内部样式表/外部样式表（谁后加载使用谁） <h3>4.4 CSS3的选择器</h3> <h4>基本选择器</h4> 标签选择器；类选择器； ID选择器； <pre><code class="prism language-html"><!doctype html> <html> <head> <title>CSS</title> <meta charset="UTF-8" /> <style type="text/css"> /* 标签选择器：h1 p img a ..... 直接应用于HTML标签/ h2 { color: blue; } / 类选择器可在页面中多次使用/ .name { color: aqua; } / id选择器同一个页面中只能使用一次（自觉遵守）/ #gc { color: yellow; } </style> </head> <body> <h2>童话</h2> <h3 class="name">光良</h3> <p id="gc">我愿变成童话里你爱的那个天使</p> <p>张开双手变成翅膀守护你</p> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/708200e1d69a45a8b6688972f36d48aa.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/708200e1d69a45a8b6688972f36d48aa.jpg" alt="使用HTML语言和CSS开发商业站点_第38张图片" width="535" height="428" style="border:1px solid black;"></a> 优先级：ID选择器>类选择器>标签选择器 <h5>练习</h5> 练习一要求： <ul> <li>制作影视简介，标题使用<h2>标签，其他文本均放在段落标签中，超链接使用<a>，图片使用<img></li> <li>使用外部引入CSS样式的方式为网页设置样式</li> <li>使用标签选择器设置标题h2的字体颜色为#003580</li> <li>使用ID选择器设置p段落的文字，字体为14px，颜色为#000033</li> <li>使用类选择器设置p段落文字中的不同颜色值，从左到右颜色值分别为#F00、#1F87CC、#FAA53B、#0D7114</li> <li>使用类选择器设置第一张图片的宽度为100px，高度为160px</li> <li>使用类选择器设置最后两张图片的宽度为200px，高度为130px <a href="http://img.e-com-net.com/image/info8/957663e84f084a328bdbfca362e6be3d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/957663e84f084a328bdbfca362e6be3d.jpg" alt="使用HTML语言和CSS开发商业站点_第39张图片" width="650" height="562" style="border:1px solid black;"></a></li> </ul> <h4>高级选择器</h4> <h5>层次选择器</h5> 后代选择器；子选择器；相邻兄弟选择器；通用兄弟选择器 <pre><code class="prism language-html"><!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>层次选择器</title> <style type="text/css"> p, ul { border: 1px solid red; /边框属性/ } /后代选择器/ / body p { background: red; } / /子选择器/ / body>p { background: pink; } / /相邻兄弟选择器只有一个，相邻（向下）/ / .active+p { background: green; } / / 通用兄弟选择器 / / .active~p { background: yellow; } / </style> </head> <body> <p class="active">1</p> <p>2</p> <p>3</p> <ul class="c4"> <li> <p>4</p> </li> <li> <p>5</p> </li> <li> <p>6</p> </li> </ul> </body> </html> </code></pre> <h5>结构伪类选择器</h5> <pre><code class="prism language-html"><!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>结构伪类选择器</title> <style> /ul的第一个子元素/ / ul li:first-child { background: red; } / /ul的最后一个子元素/ / ul li:last-child { background: green; } / / 选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效顺序/ / p:nth-child(1) { background: yellow; } / /父元素里第2个类型为p的元素类型/ / p:nth-of-type(2) { background: blue; } / </style> </head> <body> <p>p1</p> <p>p2</p> <p>p3</p> <ul> <li>li1</li> <li>li2</li> <li>li3</li> </ul> </body> </html> </code></pre> 使用F:nth-child(n)和F:nth-of-type(n)的关键点 <ul> <li>F:nth-child(n)在父级里从一个元素开始查找，不分类型</li> <li>F:nth-of-type(n)在父级里先看类型，再看位置</li> </ul> <h5>属性选择器</h5> <pre><code class="prism language-html"><!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>属性选择器</title> <style type="text/css"> .demo a { float: left; display: block; height: 50px; width: 50px; border-radius: 10px; text-align: center; background: #aac; color: blue; font: bold 20px/50px Arial; margin-right: 5px; text-decoration: none; margin: 5px; } / 存在属性id的元素 / / a[id] { background: yellow; } / / 属性id=first的元素 / / a[id=first] { background: red; } / / 属性class="links"的元素 / / a[class="links"] { background: red; } / / 属性class里包含links字符串的元素 / / a[class=links] { background: red; } / /* 属性href里以http开头的元素 / / a[href^=http] { background: red; } / / 属性href里以png结尾的元素 / / a[href$=png] { background: red; } / </style> </head> <body> <p class="demo"> <a href="http://www.baidu.com" class="links item first" id="first">1</a> <a href="" class="links active item" title="test website" target="_blank">2</a> <a href="sites/file/test.html" class="links item">3</a> <a href="sites/file/test.png" class="links item"> 4</a> <a href="sites/file/image.jpg" class="links item">5</a> <a href="efc" class="links item" title="website link">6</a> <a href="/a.pdf" class="links item">7</a> <a href="/abc.pdf" class="links item">8</a> <a href="abcdef.doc" class="links">9</a> <a href="abd.doc" class="linksitem last" id="last">10</a> </p> </body> </html> </code></pre> = 绝对等于 =包含这个元素 ^=以这个开头 $=以这个结尾 <h2>五、CSS3美化网页元素（重点）</h2> css优点： <ul> <li>有效的传递页面信息</li> <li>使用CSS美化过的页面文本，使页面漂亮、美观，吸引用户</li> <li>可以很好的突出页面的主题内容，使用户第一眼可以看到页面主要内容</li> <li>具有良好的用户体验</li> </ul> <h3>5.1 编辑网页文本</h3> <pre><code class="prism language-html"><!doctype html> <html> <head> <title>CSS 字体样式</title> <meta charset="UTF-8" /> <style> #title1 { color: aqua; font-size: 20px; } </style> </head> <body>  我喜欢学习，<span id="title1">学习使我快乐</span> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/e98264ea628b486e9ebbb6a557ceb8f3.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e98264ea628b486e9ebbb6a557ceb8f3.jpg" alt="使用HTML语言和CSS开发商业站点_第40张图片" width="568" height="225" style="border:1px solid black;"></a> <h4>字体样式</h4> <pre><code class="prism language-html"><!doctype html> <html> <head> <title>CSS 字体样式</title> <meta charset="UTF-8" /> <style> body { /* 字体类型 Times New Roman/ font-family: "Times New Roman", "楷体"; } h1 { / 字体大小 px em rem / font-size: 30px; } .p1 { / 字体粗细 bold(加粗) bolder(更粗) lighter(更细) normal(默认标准)/ font-weight: bold; / 字体风格 italic(斜体) normal(默认正常) oblique(倾斜) / font-style: oblique; } h3 { / 斜体加粗字号字体 / font: italic bold 20px "微软雅黑"; } </style> </head> <body> <h1>京东商城――全部商品分类</h1> <h3>图书、音像、电子书刊</h3> <p class="p1"> 电子书刊电子书网络原创数字杂志多媒体图书目音像音乐影视教育音像经管励志经济金融与投资管理励志与成功 </p> </body> </html> </code></pre> <h4>文本样式</h4> <pre><code class="prism language-html"><!doctype html> <html> <head> <title>CSS 文本样式</title> <meta charset="UTF-8" /> <style> body { / 文本颜色十六进制方法表示颜色（红绿蓝）/ color: blue; color: #EEFF66; / 控制alpha透明度的参数值0-1 越小越模糊 / color: rgba(0, 0, 255, 0.5); } h1 { / 元素水平对齐方式 left right center justify(两端对齐)/ text-align: right; } .p1 { / 首行文本缩进 em px / text-indent: 20px; / 文本行高 px / line-height: 25px; / 文本装饰 none(默认) underline(下划线) overline(上划线) / text-decoration: underline; } img, #align { / 垂直对齐方式 middle(中) top(上) bootom(下) / vertical-align: middle; } h3 { / text-shadow: 阴影颜色 x轴水平位移量 y轴垂直位移量模糊半径 / text-shadow: aqua 10px 10px 10px; } </style> </head> <body> <h1>京东商城――全部商品分类</h1> <h3>图书、音像、电子书刊</h3> <p class="p1"> 电子书刊电子书网络原创数字杂志多媒体图书目音像音乐影视教育音像经管励志经济金融与投资管理励志与成功 </p> <img src="image/icon.gif" /> <span id="align"> 图片与文本垂直对齐方式 </span> </body> </html> </code></pre> <h4>练习</h4> 练习一： <ul> <li>使用外部样式表创建页面样式（链接式引用）</li> <li>标题 18px 、楷体、加粗显示</li> <li>正文 12px 、行高 20px 、英文字体：Times New Roman 或 Times 中文字体：宋体</li> <li>序号颜色为红色 <a href="http://img.e-com-net.com/image/info8/d4861742d39e426298d6378888f8775a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d4861742d39e426298d6378888f8775a.jpg" alt="使用HTML语言和CSS开发商业站点_第41张图片" width="650" height="338" style="border:1px solid black;"></a></li> </ul> 练习二： <ul> <li>使用外部样式表创建页面样式</li> <li>标题行距40px，加粗显示</li> <li>正文大小12px，行距20px</li> <li>图片与文本居中对齐</li> <li>标题字体添加文字阴影</li> <li>设置一级标题水平居中对齐 <a href="http://img.e-com-net.com/image/info8/5bec13842447402d972d18af20dc2a50.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/5bec13842447402d972d18af20dc2a50.jpg" alt="使用HTML语言和CSS开发商业站点_第42张图片" width="650" height="445" style="border:1px solid black;"></a></li> </ul> <h3>5.2 超链接伪类</h3> <pre><code class="prism language-html"><!doctype html> <html> <head> <title>CSS 超链接伪类 </title> <meta charset="UTF-8" /> <style> / 未单击访问时超链接样式 / a:link { color: red; } / 单击访问后超链接样式 / a:visited { color: yellow; } / 鼠标悬浮其上的超链接样式 / a:hover { color: black; } / 鼠标单击未释放的超链接样式 / a:active { color: aqua; } </style> </head> <body> <a href="http://www.baidu.com" target="_blank"> 百度 </a> </body> </html> </code></pre> <h3>5.3 列表list-style</h3> <pre><code class="prism language-html"><!doctype html> <html> <head> <title>CSS 项目符号 </title> <meta charset="UTF-8" /> <style> li { / list-style-type 设置项目符号类型 disc：默认实心圆 circle：空心圆 square：方块 none：没有 / list-style-type: circle; } </style> </head> <body> <h3>喜欢的歌手</h3> <ul> <li>薛之谦</li> <li>周杰伦</li> <li>邓紫棋</li> </ul> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/09cddf25aa1145e68d26b9752cb36642.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/09cddf25aa1145e68d26b9752cb36642.jpg" alt="使用HTML语言和CSS开发商业站点_第43张图片" width="561" height="351" style="border:1px solid black;"></a> <h3>5.3 背景样式</h3> <h4>背景颜色</h4> <pre><code class="prism language-html"><!doctype html> <html> <head> <title>CSS 背景颜色 </title> <meta charset="UTF-8" /> <style> li { list-style-type: circle; } div { width: 120px; / 背景颜色 / background-color: aqua; } h3 { width: 120px; background-color: salmon; } </style> </head> <body> <div> <h3>喜欢的歌手</h3> <ul> <li>薛之谦</li> <li>周杰伦</li> <li>邓紫棋</li> </ul> </div> </body> </html> </code></pre> <a href="http://img.e-com-net.com/image/info8/5484d5ebe2b6476695be012cddc902b2.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/5484d5ebe2b6476695be012cddc902b2.jpg" alt="使用HTML语言和CSS开发商业站点_第44张图片" width="528" height="424" style="border:1px solid black;"></a> <h4>背景图像</h4> <pre><code class="prism language-html"><!doctype html> <html> <head> <title>CSS 背景图像 </title> <meta charset="UTF-8" /> <style> div { width: 400px; height: 400px; border: 1px solid red; / 设置背景图像 / background-image: url("image/1.jpg"); } .div1 { / 背景图像重复方式 repeat(沿水平垂直两个方向平铺) no-repeat(不平铺) repeat-x(只沿水平方向平铺) repeat-y(只沿垂直方向平铺) / background-repeat: no-repeat; / 背景定位 background-position / / 1. s y 坐标表示位置单位px x(水平) y(垂直) / / background-position: 10px 30px; / / 2. 百分比表示位置 / / background-position: 10% 50%; / / 3.x y 方向关键词水平(left center right) 垂直(top center bottom) / / background-position: right bottom; / } .div2 { / background: 背景颜色背景图像图像位置是否重复显示/ background: #c00 url(image/icon.gif) left center no-repeat; } </style> </head> <body> <div class="div1"></div> <div class="div2"></div> </body> </html> </code></pre> <h4>背景尺寸</h4> <pre><code class="prism language-html"><!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>背景尺寸</title> <style> div { width: 200px; height: 130px; border: 1px solid red; background: url("image/1.jpg") no-repeat; / background-size(背景图片尺寸设置) auto(默认保持图片原样)/ / background-size: auto; / / background-size: 120px 60px; / / background-size: 120px; / / background-size: 50% 80%; / / cover(整个背景图片放大填充了整个元素) / / background-size: cover; / / contain 保持原图像尺寸比例，最大限度显示整张图片 / background-size: contain; } </style> </head> <body> <div></div> </body> </html> </code></pre> <h3>5.4 CSS3渐变</h3> <h4>线性渐变</h4> 颜色沿着一条直线过渡：从左到右，从右到左，从上到下等 <pre><code class="prism language-html"><!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>CSS3线性渐变</title> <style> div { width: 100px; height: 100px; /to top/ background: linear-gradient(to top, orange, blue); / background: -webkit-linear-gradient(to top, orange, blue); / /-webkit-/ /to bottom/ / background: linear-gradient(to bottom, orange, blue); / /background: -webkit-linear-gradient(to bottom, orange, blue);/ /to left/ / background: linear-gradient(to left, orange, blue); / /background: -webkit-linear-gradient(to left, orange, blue);/ /to right/ / background: linear-gradient(to right, orange, blue); / /background: -webkit-linear-gradient(to right, orange, blue);/ /to top left/ / background: linear-gradient(to top left, orange, blue); / /background: -webkit-linear-gradient(to top left, orange, blue);/ /to top right/ / background: linear-gradient(to top right, orange, blue); / /background: -webkit-linear-gradient(to top right, orange, blue);/ /to bottom left/ / background: linear-gradient(to bottom left, orange, blue); / /background: -webkit-linear-gradient(to bottom left, orange, blue);/ /to bottom right/ / background: linear-gradient(to bottom right, orange, blue); / /background: -webkit-linear-gradient(to bottom right, orange, blue);/ } </style> </head> <body> <div></div> </body> </html> </code></pre> <h4>径向渐变</h4> 圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合 <h3>练习</h3> 练习三： <ul> <li>页面总宽度300px</li> <li>一级题字体大小为18px、白色、加粗显示、行距为35px，背景使用线性渐变</li> <li>二级标题字体大小为14px、加粗显示、行距为30px，背景使用线性渐变、二级标题超链接字体无下划线、鼠标移入出现下划线</li> <li>内容字体大小为12px、行距为26px、超链接字体颜色为灰色、无下划线、鼠标移入时颜色为棕红色并且显示下划线</li> </ul> <a href="http://img.e-com-net.com/image/info8/e61f82f5b6134b619ebe5a7cafc89af0.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e61f82f5b6134b619ebe5a7cafc89af0.jpg" alt="使用HTML语言和CSS开发商业站点_第45张图片" width="511" height="646" style="border:1px solid black;"></a> 练习四： <ul> <li>设置页面内容宽度260px</li> <li>设置页面背景渐变颜色（#F9FBCB #F8F8F3）</li> <li>设置标题：16px、缩进1字符、行距30px、字体颜色、绿色背景#518700、设置背景图像</li> <li>无序列表去除项目符号、12px、行距28px、字体颜色(#1a66b3)、缩进2字符</li> <li>超链接无下划线，鼠标悬浮至超链接时显示下划线</li> <li>利用结构伪类选择器设置列表图标</li> </ul> <a href="http://img.e-com-net.com/image/info8/7ec86f02593248d0a6004de3744dfdb8.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7ec86f02593248d0a6004de3744dfdb8.jpg" alt="使用HTML语言和CSS开发商业站点_第46张图片" width="552" height="712" style="border:1px solid black;"></a> <h2>六、盒子模型（重难点）</h2> <h3>6.1 盒子模型的使用</h3> <a href="http://img.e-com-net.com/image/info8/a368c09481b04b05a10deedc98632d18.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a368c09481b04b05a10deedc98632d18.jpg" alt="使用HTML语言和CSS开发商业站点_第47张图片" width="650" height="556" style="border:1px solid black;"></a> <h4>边框</h4> border-color(颜色） <a href="http://img.e-com-net.com/image/info8/d38361b9d93149038bd39f5cd608ae85.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d38361b9d93149038bd39f5cd608ae85.jpg" alt="使用HTML语言和CSS开发商业站点_第48张图片" width="650" height="353" style="border:1px solid black;"></a> border-width(边框宽度)：px border-style(样式)：solid(实线)；dashed(虚线)；double(双线); dotted(圆点虚线); hidden(隐藏); none(无边框); border：粗细样式颜色 <h4>内边距(padding)</h4> <h4>外边距(margin)</h4> margin :0 margin:0 auto; 网页居中对齐 margin: 0 1px 上下左右; margin：0 1px 2px 3px 上右下左 <pre><code class="prism language-html"><!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>边框</title> <style> .box{ width: 298px; / 盒子宽度298px/ / border：粗细样式颜色/ border:1px solid #3a6587; / 设置盒子边框/ margin:0 auto; / 网页元素居中对齐 / / margin:0 auto; 居中要求：块元素，块元素有固定的宽度 / } h2{ font-size:16px; background-color:#3a6587; height:35px; line-height:35px; color:#FFF; / margin :0 margin:0 auto; 网页元素居中对齐 margin: 0 1px 上下左右; margin：0 1px 2px 3px 上右下左 / } form{ background: #c8ece3; } div:nth-of-type(1)>input{ border: 3px solid black; / 第一个div下面的input元素设置边框3px 实线黑色/ } div:nth-of-type(2)>input{ border: 1px dashed red; / 第二个div下面的input元素设置边框1px 虚线红色/ } div:nth-of-type(3)>input{ border: 2px dotted red; / 第三个div下面的input元素设置边框2px 点线红色/ } </style> </head> <body> <div class="box"> <h2>会员登录</h2> <form action="#"> <div> <strong class="name">姓名：</strong> <input type="text"/> </div> <div> <strong class="name">邮箱：</strong> <input type="text"/> </div> <div> <strong class="name">电话：</strong> <input type="text"/> </div> </form> </div> </body> </html> </code></pre> <h4>盒子总尺寸</h4> 元素大小=border+padding+margin+内容宽度 <h3>6.2 圆角边框</h3> <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>圆角边框</title> <style> div{ width: 100px; height: 100px; border: 1px solid red; / 设置圆角边框四个属性值按顺时针排列 / / border-radius: 20px 10px 50px 30px; / / 椭圆水平/垂直 / / border-radius: 10px / 30px; / / 圆圆角=半径 / / border-radius: 50%; / / 半圆元素的宽度是高度的2倍，而且圆角半径为元素的高度值 / / border-radius: 100px 100px 0 0; / / 扇形元素宽度、高度、圆角半径相同圆角取值位置不同 / / border-radius: 100px 0 0 0; / } </style> </head> <body> <div></div> </body> </html> </code></pre> <h3>6.3 盒子阴影</h3> <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>阴影</title> <style> div{ width: 100px; height: 100px; border: 10px solid red; / 阴影：类型(内阴影) x轴位移 y轴位移模糊半径颜色 / box-shadow: inset 10px 10px 50px yellow; / 不写类型为外阴影 / } </style> </head> <body> <div></div> </body> </html> </code></pre> <h2>七、浮动（重难点）</h2> <h3>7.1 标准文档流</h3> 指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这也是元素默认的排列方式。 标准文档流组成 <ul> <li>块级元素：独占一行 h1-h6 ; p ; div ; 列表</li> <li>行内元素：不独占一行 span； a ; img ; strong … 行内元素可以被包含在块级元素中。</li> </ul> <h3>7.2 display属性</h3> 可以改变块级元素与行级元素<a href="http://img.e-com-net.com/image/info8/b7218343566c4da0982ca03ef161fc97.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b7218343566c4da0982ca03ef161fc97.jpg" alt="使用HTML语言和CSS开发商业站点_第49张图片" width="650" height="216" style="border:1px solid black;"></a> <pre><code class="prism language-html"><!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>浮动</title> <style> div{ width:100px; height:100px; border:1px solid red; display: inline; / 将div设置为行内元素 / } span{ width:100px; height:100px; border:1px solid red; display:block; / 将span设置为块元素 / } </style> </head> <body> <div> div 块元素 </div> <span> span 行内元素 </span> </body> </html> </code></pre> <h3>7.3 float 属性浮动</h3> <a href="http://img.e-com-net.com/image/info8/b0626d3f30db4459840fc0883cc8a5ca.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b0626d3f30db4459840fc0883cc8a5ca.jpg" alt="使用HTML语言和CSS开发商业站点_第50张图片" width="650" height="184" style="border:1px solid black;"></a> <pre><code class="prism language-html"><!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>浮动</title> <style> div { margin:10px; padding:5px; } #father { border:1px #000 solid; } / float 浮动 left 左浮动 right 右浮动 none 无浮动/ .layer01 { border:1px #F00 dashed; float: right; } .layer02 { border:1px #00F dashed; float: right; } .layer03 { border:1px #060 dashed; float: right; } .layer04 { border:1px #666 dashed; font-size:12px; line-height:23px; float: right; } </style> </head> <body> <div id="father"> <div class="layer01"><img src="image/hd.jpg" alt="前端"/></div> <div class="layer02"><img src="image/qd.jpg" alt="后端"/></div> <div class="layer03"><img src="image/sjk.jpg" alt="数据库"/></div> <div class="layer04"> 浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。这里使用这三个图片和本段文字来演示讲解浮动在网页中的应用，根据需要图片所在的div分别向左浮动、向右浮动，或者不浮动。 </div> </div> </body> </html> </code></pre> <h3>7.4 解决父级边框塌陷</h3> clear <pre><code class="prism language-html"> / clear:right; 右侧不允许有浮动元素 clear:left; 左侧不允许有浮动元素 clear:both; 两侧不允许有浮动元素 clear:none;/ </code></pre> 解决方案： <ol> <li>增加父级元素的高度</li> </ol> <pre><code class="prism language-html"> #father { border:1px solid #000; height: 600px; } </code></pre> <ol start="2"> <li>增加一个空的div标签，清除浮动</li> </ol> <pre><code class="prism language-html"><div class="clear"></div> .clear{ clear: both; } </code></pre> <ol start="3"> <li>使用overflow 属性 <a href="http://img.e-com-net.com/image/info8/38a2a7dd20cd4d9c931564459c2a668b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/38a2a7dd20cd4d9c931564459c2a668b.jpg" alt="使用HTML语言和CSS开发商业站点_第51张图片" width="650" height="251" style="border:1px solid black;"></a> 在父级元素中增加一个 overfow: hidden;</li> </ol> <pre><code class="prism language-html"> #father { overflow: hidden; } </code></pre> <ol start="4"> <li>父类添加一个伪类：after （推荐使用）</li> </ol> <pre><code class="prism language-html"> #father:after{ content: ''; display: block; clear: both; } </code></pre> 小结： <ul> <li> 浮动元素后面加空div 简单，空div会造成HTML代码冗余 </li> <li> 设置父元素的高度 简单，元素固定高会降低扩展性 </li> <li> 父级添加overflow属性 简单，下拉列表框的场景不能用 </li> <li> 父级添加伪类after 写法比上面稍微复杂一点，但是没有副作用，推荐使用 </li> </ul> <h3>7.5 display和float对比</h3> <ul> <li>display ：方向不可控制</li> <li>float ：浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题</li> </ul> <h2>八、定位网页元素（重难点）</h2> <h3>8.1 定位</h3> position属性 static (默认值，没有定位)；relative (相对定位) ； absolute (绝对定位) ； fixed (固定定位) <h4>相对定位</h4> position: relative; 相对于原来的位置，进行指定的偏移。相对定位的话，它任然在标准文档流中，原来的位置会被保留 <pre><code class="prism language-html"><!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>相对定位</title>  <style> div{ margin: 10px; padding: 5px; font-size: 12px; line-height: 25px; } #father{ border: 1px solid #666; padding: 0; } #first{ border: 1px dashed #b27530; background-color: #a13d30; / 相对定位 / position: relative; top: -20px; / 向上移 / left: 20px; / 向右移 / } #second{ border: 1px dashed #255066; background-color: #255066; } #third{ border: 1px dashed #1c6615; background-color: #1c6699; position: relative; bottom: -10px; / 向下移 / right: 20px; / 向左移 / } </style> </head> <body> <div id="father"> <div id="first">第一个盒子</div> <div id="second">第二个盒子</div> <div id="third">第三个盒子</div> </div> </body> </html> </code></pre> 练习 <ol> <li>使用 <div>和<a>布局页面</li> <li>每个超链接宽度和高度都是100px，背景颜色是粉色，鼠标移上去时变为蓝色</li> <li>使用相对定位改变每个超链接的位置 <a href="http://img.e-com-net.com/image/info8/02780686b89a4d97a9c3f0fbeeea912a.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/02780686b89a4d97a9c3f0fbeeea912a.png" alt="使用HTML语言和CSS开发商业站点_第52张图片" width="508" height="514" style="border:1px solid black;"></a></li> </ol> <h4>绝对定位</h4> <ol> <li>没有父级元素定位的前提下，相对于浏览器定位</li> <li>假设父级元素存在定位，我们通常会相对于父级元素进行偏移</li> <li>在父级元素范围内移动 相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留</li> </ol> <pre><code class="prism language-html"><!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>绝对定位</title> <style> div{ margin: 10px; padding: 5px; font-size: 12px; line-height: 25px; } #father{ border: 1px solid #666; padding: 0; / 父级元素相对定位 / position: relative; } #first{ border: 1px dashed #b27530; background-color: #a13d30; } #second{ border: 1px dashed #255066; background-color: #255066; / 绝对定位 / position: absolute; right: 30px; top:-10px; } #third{ border: 1px dashed #1c6615; background-color: #1c6699; } </style> </head> <body> <div id="father"> <div id="first">第一个盒子</div> <div id="second">第二个盒子</div> <div id="third">第三个盒子</div> </div> </body> </html> </code></pre> <h4>固定定位</h4> <pre><code class="prism language-html"><!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>固定定位</title> <style> body{ height: 100px; } / 绝对定位；相对于浏览器 / div:nth-of-type(1){ width: 100px; height: 100px; background: red; position: absolute; right: 0; bottom: 0; } div:nth-of-type(2){ width: 50px; height: 50px; background: yellow; / 固定定位 / position: fixed; right: 0; bottom: 0; } </style> </head> <body> <div>div1</div> <div>div2</div> </body> </html> </code></pre> <h3>8.2 z-index</h3> 调整元素定位时重叠层的上下位置 <a href="http://img.e-com-net.com/image/info8/a88f42a0234b430888f6940e85839dce.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a88f42a0234b430888f6940e85839dce.jpg" alt="使用HTML语言和CSS开发商业站点_第53张图片" width="650" height="592" style="border:1px solid black;"></a> <pre><code class="prism language-html"><!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>z-index</title> <style> #content{ width: 300px; padding: 0px; margin: 0px; overflow: hidden; font-size: 12px; line-height: 25px; border: 1px solid #000; } ul,li{ padding: 0px; margin: 0px; list-style: none; } / 父级元素相对定位 / #content ul{ position: relative; } .tipText, .tipBg{ position: absolute; width: 300px; height: 25px; top: 120px; } .tipText{ color: white; / 设置层级数值大的在上面 / z-index: 2; } .tipBg{ background-color: #000; / 设置背景透明度值为0-1 值越小越透明/ / opacity: 0.5; / } </style> </head> <body> <div id="content"> <ul> <li><img src="images/hd.jpg" alt=""/></li> <li class="tipText">html java mysql</li> <li class="tipBg" ></li> <li>2022-11-12</li> <li>yyds_it_huo</li> </ul> </div> </body> </html> </code></pre> <h2>九、CSS3制作网页动画</h2> <h3>浏览器私有前缀</h3> CSS3是CSS(层叠样式表)技术的升级版本。CSS3完全向后兼容，不必改变现有的设计，浏览器将永远支持CSS2。W3C的CSS3规范仍在开发。但是，许多新的CSS3属性已在现代浏览器使用。 <table> <tbody> <tr> <th>内核</th> <th>前缀</th> <th>浏览器</th> </tr> <tr> <td>Gecko内核</td> <td>-moz-</td> <td>火狐</td> </tr> <tr> <td>Webkit内核(谷歌)</td> <td>-webkit-</td> <td>chrom；360；世界之窗等</td> </tr> <tr> <td>Trident内核</td> <td>-ms-</td> <td>IE</td> </tr> <tr> <td>Presto内核</td> <td>-o-</td> <td>opera</td> </tr> </tbody> </table> <pre><code class="prism language-html"> <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>浏览器私有前缀</title> <style> div{ font-size: 100px; -webkit-text-stroke: 1px #f00; } </style> </head> <body> <div>哈哈哈</div> </body> </html> </code></pre> 在实际使用中通常将所有前缀写一遍后，标准的写在最后 <h3>9.1 CSS3变形</h3> CSS3变形是一些效果的集合如平移、旋转、缩放、倾斜效果 每个效果都可以称为变形（transform），它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化。 Transform 2D的属性 <pre><code class="prism language-html"><!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>transform 的使用</title> <style> #box1{ width: 200px; height: 200px; margin: 100px; border: 1px solid blue; background-color: aqua; } #box1:hover{ / 水平和垂直方向移动函数：translate/ / 向右移动 / / transform: translate(30px); / / 向右下角移动 / / transform: translate(30px,30px); / / 向上移动 / / transform: translate(0px,-10px); / / 旋转函数：rotate / / 顺时针旋转20度 / / transform: rotate(20deg); / / 缩放函数：scale / / 值为1 大小不变小于1 缩小大于1 放大支持两个参数水平方向和垂直方向的缩放/ / transform: scale(0.5); / / 倾斜函数：skew / / transform: skew(40deg,30deg); / } </style> </head> <body> <div id="box1"></div> </body> </html> </code></pre> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1712202583843614720"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script>  <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad">  <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div>  <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div>  <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(html,css,前端)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835509897106649088.htm" title="Long类型前后端数据不一致" target="_blank">Long类型前后端数据不一致</a> igotyback <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问</div> </li> <li><a href="/article/1835509770287673344.htm" title="swagger访问路径" target="_blank">swagger访问路径</a> igotyback <a class="tag" taget="_blank" href="/search/swagger/1.htm">swagger</a> <div>Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip</div> </li> <li><a href="/article/1835508130608410624.htm" title="html 中如何使用 uniapp 的部分方法" target="_blank">html 中如何使用 uniapp 的部分方法</a> 某公司摸鱼前端 <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了</div> </li> <li><a href="/article/1835499615491813376.htm" title="四章-32-点要素的聚合" target="_blank">四章-32-点要素的聚合</a> 彩云飘过 <div>本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.</div> </li> <li><a href="/article/1835498925755297792.htm" title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a> STU学生网页设计 <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a> <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div> </li> <li><a href="/article/1835497792265613312.htm" title="【加密社】Solidity 中的事件机制及其应用" target="_blank">【加密社】Solidity 中的事件机制及其应用</a> 加密社 <a class="tag" taget="_blank" href="/search/%E9%97%B2%E4%BE%83/1.htm">闲侃</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a><a class="tag" taget="_blank" href="/search/%E6%99%BA%E8%83%BD%E5%90%88%E7%BA%A6/1.htm">智能合约</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a> <div>加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件</div> </li> <li><a href="/article/1835496149843275776.htm" title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a> 二挡起步 <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a> <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div> </li> <li><a href="/article/1835496148601761792.htm" title="HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动" target="_blank">HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动</a> 二挡起步 <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div> </li> <li><a href="/article/1835493267907637248.htm" title="webpack图片等资源的处理" target="_blank">webpack图片等资源的处理</a> dmengmeng <div>需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p</div> </li> <li><a href="/article/1835448238103162880.htm" title="springboot+vue项目实战一-创建SpringBoot简单项目" target="_blank">springboot+vue项目实战一-创建SpringBoot简单项目</a> 苹果酱0567 <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB%E4%B8%8E%E8%A7%A3%E6%9E%90/1.htm">面试题汇总与解析</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><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><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E9%97%B4%E4%BB%B6/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>这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一</div> </li> <li><a href="/article/1835437775344726016.htm" title="博客网站制作教程" target="_blank">博客网站制作教程</a> 2401_85194651 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java</div> </li> <li><a href="/article/1835435506645692416.htm" title="00. 这里整理了最全的爬虫框架（Java + Python）" target="_blank">00. 这里整理了最全的爬虫框架（Java + Python）</a> 有一只柴犬 <a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB%E7%B3%BB%E5%88%97/1.htm">爬虫系列</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2</div> </li> <li><a href="/article/1835435141535723520.htm" title="详解：如何设计出健壮的秒杀系统？" target="_blank">详解：如何设计出健壮的秒杀系统？</a> 夜空_2cd3 <div>作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：秒杀系统应该考虑的问题二：秒杀系统的设计和技术方案三：</div> </li> <li><a href="/article/1835428317084348416.htm" title="最简单将静态网页挂载到服务器上(不用nginx)" target="_blank">最简单将静态网页挂载到服务器上(不用nginx)</a> 全能全知者 <a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/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/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl</div> </li> <li><a href="/article/1835427057752961024.htm" title="补充元象二面" target="_blank">补充元象二面</a> Redstone Monstrosity <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重</div> </li> <li><a href="/article/1835420753252675584.htm" title="微信小程序开发注意事项" target="_blank">微信小程序开发注意事项</a> jun778895 <a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a> <div>微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂</div> </li> <li><a href="/article/1835411044768509952.htm" title="字节二面" target="_blank">字节二面</a> Redstone Monstrosity <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文</div> </li> <li><a href="/article/1835403246865313792.htm" title="斟一小组鸡血视频" target="_blank">斟一小组鸡血视频</a> 和自己一起成长 <div>http://m.v.qq.com/play/play.html?coverid=&vid=c0518henl2a&ptag=2_6.0.0.14297_copy有一种努力叫做靠自己http://m.v.qq.com/play/play.html?coverid=&vid=i0547o426g4&ptag=2_6.0.0.14297_copy世界最励志短片https://v.qq.com/x/pa</div> </li> <li><a href="/article/1835398064727224320.htm" title="前端代码上传文件" target="_blank">前端代码上传文件</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><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i</div> </li> <li><a href="/article/1835395039572881408.htm" title="Dockerfile命令详解之 FROM" target="_blank">Dockerfile命令详解之 FROM</a> 清风怎不知意 <a class="tag" taget="_blank" href="/search/%E5%AE%B9%E5%99%A8%E5%8C%96/1.htm">容器化</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>许多同学不知道Dockerfile应该如何写，不清楚Dockerfile中的指令分别有什么意义，能达到什么样的目的，接下来我将在容器化专栏中详细的为大家解释每一个指令的含义以及用法。专栏订阅传送门https://blog.csdn.net/qq_38220908/category_11989778.html指令不区分大小写。但是，按照惯例，它们应该是大写的，以便更容易地将它们与参数区分开来。(引用</div> </li> <li><a href="/article/1835389111658180608.htm" title="《HTML 与 CSS—— 响应式设计》" target="_blank">《HTML 与 CSS—— 响应式设计》</a> 陈在天box <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在</div> </li> <li><a href="/article/1835387977480630272.htm" title="【C语言】- 自定义类型：结构体、枚举、联合" target="_blank">【C语言】- 自定义类型：结构体、枚举、联合</a> Cavalier_01 <a class="tag" taget="_blank" href="/search/C%E8%AF%AD%E8%A8%80/1.htm">C语言</a> <div>【C语言】：操作符（https://mp.csdn.net/editor/html/115218055）数据类型（https://mp.csdn.net/editor/html/115219664）自定义类型：结构体、枚举、联合（https://mp.csdn.net/editor/html/115373785）变量、常量（https://mp.csdn.net/editor/html/11523</div> </li> <li><a href="/article/1835385458356482048.htm" title="uniapp实现动态标记效果详细步骤【前端开发】" target="_blank">uniapp实现动态标记效果详细步骤【前端开发】</a> 2401_85123349 <a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a> <div>第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。</div> </li> <li><a href="/article/1835382685745377280.htm" title="html+css网页设计旅游网站首页1个页面" target="_blank">html+css网页设计旅游网站首页1个页面</a> html+css+js网页设计 <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a> <div>html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击</div> </li> <li><a href="/article/1835379153730367488.htm" title="spring mvc @RequestBody String类型参数" target="_blank">spring mvc @RequestBody String类型参数</a> zoyation <a class="tag" taget="_blank" href="/search/spring-mvc/1.htm">spring-mvc</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a> <div>通过如下配置：text/html;charset=UTF-8application/json;charset=UTF-8在springmvc的Controller层使用@RequestBody接收Content-Type为application/json的数据时，默认支持Map方式和对象方式参数@RequestMapping(value="/{code}/saveUser",method=Requ</div> </li> <li><a href="/article/1835377684025274368.htm" title="ubuntu安装opencv最快的方法" target="_blank">ubuntu安装opencv最快的方法</a> Derek重名了 <div>最快方法，当然不能太多文字$sudoapt-getinstallpython-opencv借助python就可以把ubuntu的opencv环境搞起来，非常快非常容易参考：https://docs.opencv.org/trunk/d2/de6/tutorial_py_setup_in_ubuntu.html</div> </li> <li><a href="/article/1835376759739084800.htm" title="处理标签包裹的字符串，并取出前250字符" target="_blank">处理标签包裹的字符串，并取出前250字符</a> 周bro <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>//假设这是你的HTML字符串varhtmlString=`这是一个段落。这是一个标题这是另一个段落，包含一些链接。`;//解析HTML字符串并提取文本functionextractTextFromHTML(html){varparser=newDOMParser();vardoc=parser.parseFromString(html,"text/html");vartextContent=do</div> </li> <li><a href="/article/1835376505543290880.htm" title="css设置当字数超过限制后以省略号（...）显示" target="_blank">css设置当字数超过限制后以省略号（...）显示</a> 周bro <a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a> <div>1、文字超出一行，省略超出部分，显示’…’用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。overflow:hidden;text-overflow:ellipsis;white-space:nowrap;2、多行文本溢出显示省略号display:-webkit-box;-webkit-box-orient:vertical;-webkit-lin</div> </li> <li><a href="/article/1835373236217540608.htm" title="360前端星计划-动画可以这么玩" target="_blank">360前端星计划-动画可以这么玩</a> 马小蜗 <div>动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能</div> </li> <li><a href="/article/1835372727582683136.htm" title="h5小游戏定制开发" target="_blank">h5小游戏定制开发</a> 红匣子实力推荐 <div>随着科技的不断发展，移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下，H5小游戏应运而生，为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式，正逐渐受到市场的关注和青睐。那么，什么是H5小游戏定制开发呢？它又具有哪些特点和优势呢？让我们一起来深入了解一下。首先，我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏，可以在移动端、PC端等多平台</div> </li> <li><a href="/article/40.htm" title="java线程Thread和Runnable区别和联系" target="_blank">java线程Thread和Runnable区别和联系</a> zx_code <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</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/Runnable/1.htm">Runnable</a> <div>我们都晓得java实现线程2种方式，一个是继承Thread，另一个是实现Runnable。模拟窗口买票，第一例子继承thread，代码如下 package thread; public class ThreadTest { public static void main(String[] args) { Thread1 t1 = new Thread1(</div> </li> <li><a href="/article/167.htm" title="【转】JSON与XML的区别比较" target="_blank">【转】JSON与XML的区别比较</a> 丁_新 <a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a> <div>1.定义介绍 (1).XML定义扩展标记语言 (Extensible Markup Language, XML) ，用于标记电子文件使其具有结构性的标记语言，可以用来标记数据、定义数据类型，是一种允许用户对自己的标记语言进行定义的源语言。 XML使用DTD(document type definition)文档类型定义来组织数据;格式统一，跨平台和语言，早已成为业界公认的标准。 XML是标</div> </li> <li><a href="/article/294.htm" title="c++ 实现五种基础的排序算法" target="_blank">c++ 实现五种基础的排序算法</a> CrazyMizzz <a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a> <div>#include<iostream> using namespace std; //辅助函数，交换两数之值 template<class T> void mySwap(T &x, T &y){ T temp = x; x = y; y = temp; } const int size = 10; //一、用直接插入排</div> </li> <li><a href="/article/421.htm" title="我的软件" target="_blank">我的软件</a> 麦田的设计者 <a class="tag" taget="_blank" href="/search/%E6%88%91%E7%9A%84%E8%BD%AF%E4%BB%B6/1.htm">我的软件</a><a class="tag" taget="_blank" href="/search/%E9%9F%B3%E4%B9%90%E7%B1%BB/1.htm">音乐类</a><a class="tag" taget="_blank" href="/search/%E5%A8%B1%E4%B9%90/1.htm">娱乐</a><a class="tag" taget="_blank" href="/search/%E6%94%BE%E6%9D%BE/1.htm">放松</a> <div> 这是我写的一款app软件，耗时三个月，是一个根据央视节目开门大吉改变的，提供音调，猜歌曲名。1、手机拥有者在android手机市场下载本APP，同意权限，安装到手机上。2、游客初次进入时会有引导页面提醒用户注册。（同时软件自动播放背景音乐）。3、用户登录到主页后，会有五个模块。a、点击不胫而走，用户得到开门大吉首页部分新闻，点击进入有新闻详情。b、</div> </li> <li><a href="/article/548.htm" title="linux awk命令详解" target="_blank">linux awk命令详解</a> 被触发 <a class="tag" taget="_blank" href="/search/linux+awk/1.htm">linux awk</a> <div>awk是行处理器: 相比较屏幕处理的优点，在处理庞大文件时不会出现内存溢出或是处理缓慢的问题，通常用来格式化文本信息 awk处理过程: 依次对每一行进行处理，然后输出 awk命令形式: awk [-F|-f|-v] ‘BEGIN{} //{command1; command2} END{}’ file [-F|-f|-v]大参数，-F指定分隔符，-f调用脚本，-v定义变量 var=val</div> </li> <li><a href="/article/675.htm" title="各种语言比较" target="_blank">各种语言比较</a> _wy_ <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80/1.htm">编程语言</a> <div> Java Ruby PHP 擅长领域 </div> </li> <li><a href="/article/802.htm" title="oracle 中数据类型为clob的编辑" target="_blank">oracle 中数据类型为clob的编辑</a> 知了ing <a class="tag" taget="_blank" href="/search/oracle+clob/1.htm">oracle clob</a> <div>public void updateKpiStatus(String kpiStatus,String taskId){ Connection dbc=null; Statement stmt=null; PreparedStatement ps=null; try { dbc = new DBConn().getNewConnection(); //stmt = db</div> </li> <li><a href="/article/929.htm" title="分布式服务框架 Zookeeper -- 管理分布式环境中的数据" target="_blank">分布式服务框架 Zookeeper -- 管理分布式环境中的数据</a> 矮蛋蛋 <a class="tag" taget="_blank" href="/search/zookeeper/1.htm">zookeeper</a> <div>原文地址： http://www.ibm.com/developerworks/cn/opensource/os-cn-zookeeper/ 安装和配置详解本文介绍的 Zookeeper 是以 3.2.2 这个稳定版本为基础，最新的版本可以通过官网 http://hadoop.apache.org/zookeeper/来获取，Zookeeper 的安装非常简单，下面将从单机模式和集群模式两</div> </li> <li><a href="/article/1056.htm" title="tomcat数据源" target="_blank">tomcat数据源</a> alafqq <a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a> <div>数据库 JNDI(Java Naming and Directory Interface，Java命名和目录接口)是一组在Java应用中访问命名和目录服务的API。没有使用JNDI时我用要这样连接数据库： 03. Class.forName("com.mysql.jdbc.Driver"); 04. conn</div> </li> <li><a href="/article/1183.htm" title="遍历的方法" target="_blank">遍历的方法</a> 百合不是茶 <a class="tag" taget="_blank" href="/search/%E9%81%8D%E5%8E%86/1.htm">遍历</a> <div> 遍历在java的泛</div> </li> <li><a href="/article/1310.htm" title="linux查看硬件信息的命令" target="_blank">linux查看硬件信息的命令</a> bijian1013 <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>linux查看硬件信息的命令一.查看CPU： cat /proc/cpuinfo 二.查看内存： free 三.查看硬盘： df linux下查看硬件信息 1、lspci 列出所有PCI 设备； lspci - list all PCI devices:列出机器中的PCI设备（声卡、显卡、Modem、网卡、USB、主板集成设备也能</div> </li> <li><a href="/article/1437.htm" title="java常见的ClassNotFoundException" target="_blank">java常见的ClassNotFoundException</a> bijian1013 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>1.java.lang.ClassNotFoundException: org.apache.commons.logging.LogFactory 添加包common-logging.jar2.java.lang.ClassNotFoundException: javax.transaction.Synchronization </div> </li> <li><a href="/article/1564.htm" title="【Gson五】日期对象的序列化和反序列化" target="_blank">【Gson五】日期对象的序列化和反序列化</a> bit1129 <a class="tag" taget="_blank" href="/search/%E5%8F%8D%E5%BA%8F%E5%88%97%E5%8C%96/1.htm">反序列化</a> <div>对日期类型的数据进行序列化和反序列化时，需要考虑如下问题： 1. 序列化时，Date对象序列化的字符串日期格式如何 2. 反序列化时，把日期字符串序列化为Date对象，也需要考虑日期格式问题 3. Date A -> str -> Date B,A和B对象是否equals 默认序列化和反序列化 import com</div> </li> <li><a href="/article/1691.htm" title="【Spark八十六】Spark Streaming之DStream vs. InputDStream" target="_blank">【Spark八十六】Spark Streaming之DStream vs. InputDStream</a> bit1129 <a class="tag" taget="_blank" href="/search/Stream/1.htm">Stream</a> <div> 1. DStream的类说明文档： /** * A Discretized Stream (DStream), the basic abstraction in Spark Streaming, is a continuous * sequence of RDDs (of the same type) representing a continuous st</div> </li> <li><a href="/article/1818.htm" title="通过nginx获取header信息" target="_blank">通过nginx获取header信息</a> ronin47 <a class="tag" taget="_blank" href="/search/nginx+header/1.htm">nginx header</a> <div>1. 提取整个的Cookies内容到一个变量，然后可以在需要时引用，比如记录到日志里面， if ( $http_cookie ~* "(.*)$") { set $all_cookie $1; } 变量$all_cookie就获得了cookie的值，可以用于运算了 </div> </li> <li><a href="/article/1945.htm" title="java-65.输入数字n，按顺序输出从1最大的n位10进制数。比如输入3，则输出1、2、3一直到最大的3位数即999" target="_blank">java-65.输入数字n，按顺序输出从1最大的n位10进制数。比如输入3，则输出1、2、3一直到最大的3位数即999</a> bylijinnan <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>参考了网上的http://blog.csdn.net/peasking_dd/article/details/6342984 写了个java版的： public class Print_1_To_NDigit { /** * Q65.输入数字n，按顺序输出从1最大的n位10进制数。比如输入3，则输出1、2、3一直到最大的3位数即999 * 1.使用字符串</div> </li> <li><a href="/article/2072.htm" title="Netty源码学习-ReplayingDecoder" target="_blank">Netty源码学习-ReplayingDecoder</a> bylijinnan <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/netty/1.htm">netty</a> <div>ReplayingDecoder是FrameDecoder的子类，不熟悉FrameDecoder的，可以先看看 http://bylijinnan.iteye.com/blog/1982618 API说，ReplayingDecoder简化了操作，比如： FrameDecoder在decode时，需要判断数据是否接收完全： public class IntegerH</div> </li> <li><a href="/article/2199.htm" title="js特殊字符过滤" target="_blank">js特殊字符过滤</a> cngolon <a class="tag" taget="_blank" href="/search/js%E7%89%B9%E6%AE%8A%E5%AD%97%E7%AC%A6/1.htm">js特殊字符</a><a class="tag" taget="_blank" href="/search/js%E7%89%B9%E6%AE%8A%E5%AD%97%E7%AC%A6%E8%BF%87%E6%BB%A4/1.htm">js特殊字符过滤</a> <div>1.js中用正则表达式过滤特殊字符, 校验所有输入域是否含有特殊符号function stripscript(s) { var pattern = new RegExp("[`~!@#$^&()=|{}':;',\\[\\].<>/?~！@#￥……&（）——|{}【】‘；：”“'。，、？]"</div> </li> <li><a href="/article/2326.htm" title="hibernate使用sql查询" target="_blank">hibernate使用sql查询</a> ctrain <a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a> <div> import java.util.Iterator; import java.util.List; import java.util.Map; import org.hibernate.Hibernate; import org.hibernate.SQLQuery; import org.hibernate.Session; import org.hibernate.Transa</div> </li> <li><a href="/article/2453.htm" title="linux shell脚本中切换用户执行命令方法" target="_blank">linux shell脚本中切换用户执行命令方法</a> daizj <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/shell/1.htm">shell</a><a class="tag" taget="_blank" href="/search/%E5%91%BD%E4%BB%A4/1.htm">命令</a><a class="tag" taget="_blank" href="/search/%E5%88%87%E6%8D%A2%E7%94%A8%E6%88%B7/1.htm">切换用户</a> <div>经常在写shell脚本时，会碰到要以另外一个用户来执行相关命令，其方法简单记下： 1、执行单个命令：su - user -c "command" 如：下面命令是以test用户在/data目录下创建test123目录 [root@slave19 /data]# su - test -c "mkdir /data/test123" </div> </li> <li><a href="/article/2580.htm" title="好的代码里只要一个 return 语句" target="_blank">好的代码里只要一个 return 语句</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/return/1.htm">return</a> <div>别再这样写了：public boolean foo() { if (true) { return true; } else { return false; </div> </li> <li><a href="/article/2707.htm" title="Android动画效果学习" target="_blank">Android动画效果学习</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>1、透明动画效果方法一：代码实现 public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragment_main, container, fals</div> </li> <li><a href="/article/2834.htm" title="linux复习笔记之bash shell (4)管道命令" target="_blank">linux复习笔记之bash shell (4)管道命令</a> eksliang <a class="tag" taget="_blank" href="/search/linux%E7%AE%A1%E9%81%93%E5%91%BD%E4%BB%A4%E6%B1%87%E6%80%BB/1.htm">linux管道命令汇总</a><a class="tag" taget="_blank" href="/search/linux%E7%AE%A1%E9%81%93%E5%91%BD%E4%BB%A4/1.htm">linux管道命令</a><a class="tag" taget="_blank" href="/search/linux%E5%B8%B8%E7%94%A8%E7%AE%A1%E9%81%93%E5%91%BD%E4%BB%A4/1.htm">linux常用管道命令</a> <div>转载请出自出处： http://eksliang.iteye.com/blog/2105461 bash命令执行的完毕以后，通常这个命令都会有返回结果，怎么对这个返回的结果做一些操作呢？那就得用管道命令‘|’。上面那段话，简单说了下管道命令的作用，那什么事管道命令呢？答：非常的经典的一句话，记住了，何为管</div> </li> <li><a href="/article/2961.htm" title="Android系统中自定义按键的短按、双击、长按事件" target="_blank">Android系统中自定义按键的短按、双击、长按事件</a> gqdy365 <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>在项目中碰到这样的问题：由于系统中的按键在底层做了重新定义或者新增了按键，此时需要在APP层对按键事件（keyevent）做分解处理，模拟Android系统做法，把keyevent分解成： 1、单击事件：就是普通key的单击； 2、双击事件：500ms内同一按键单击两次； 3、长按事件：同一按键长按超过1000ms（系统中长按事件为500ms）； 4、组合按键：两个以上按键同时按住； </div> </li> <li><a href="/article/3088.htm" title="asp.net获取站点根目录下子目录的名称" target="_blank">asp.net获取站点根目录下子目录的名称</a> hvt <a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a><a class="tag" taget="_blank" href="/search/C%23/1.htm">C#</a><a class="tag" taget="_blank" href="/search/asp.net/1.htm">asp.net</a><a class="tag" taget="_blank" href="/search/hovertree/1.htm">hovertree</a><a class="tag" taget="_blank" href="/search/Web+Forms/1.htm">Web Forms</a> <div>使用Visual Studio建立一个.aspx文件(Web Forms)，例如hovertree.aspx,在页面上加入一个ListBox代码如下： <asp:ListBox runat="server" ID="lbKeleyiFolder" /> 那么在页面上显示根目录子文件夹的代码如下： string[] m_sub</div> </li> <li><a href="/article/3215.htm" title="Eclipse程序员要掌握的常用快捷键" target="_blank">Eclipse程序员要掌握的常用快捷键</a> justjavac <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/%E5%BF%AB%E6%8D%B7%E9%94%AE/1.htm">快捷键</a><a class="tag" taget="_blank" href="/search/ide/1.htm">ide</a> <div> 判断一个人的编程水平，就看他用键盘多，还是鼠标多。用键盘一是为了输入代码（当然了，也包括注释），再有就是熟练使用快捷键。曾有人在豆瓣评《卓有成效的程序员》：“人有多大懒，才有多大闲”。之前我整理了一个程序员图书列表，目的也就是通过读书，让程序员变懒。写道程序员作为特殊的群体，有的人可以这么懒，懒到事情都交给机器去做，而有的人又可</div> </li> <li><a href="/article/3342.htm" title="c++编程随记" target="_blank">c++编程随记</a> lx.asymmetric <a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div> 为了字体更好看，改变了格式…… &&运算符： #include<iostream> using namespace std; int main(){ int a=-1,b=4,k; k=(++a<0)&&!(b--</div> </li> <li><a href="/article/3469.htm" title="linux标准IO缓冲机制研究" target="_blank">linux标准IO缓冲机制研究</a> 音频数据 <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>一、什么是缓存I/O(Buffered I/O)缓存I/O又被称作标准I/O,大多数文件系统默认I/O操作都是缓存I/O。在Linux的缓存I/O机制中，操作系统会将I/O的数据缓存在文件系统的页缓存(page cache)中，也就是说，数据会先被拷贝到操作系统内核的缓冲区中，然后才会从操作系统内核的缓冲区拷贝到应用程序的地址空间。1.缓存I/O有以下优点:A.缓存I/O使用了操作系统内核缓冲区，</div> </li> <li><a href="/article/3596.htm" title="随想生活" target="_blank">随想生活</a> 暗黑小菠萝 <a class="tag" taget="_blank" href="/search/%E7%94%9F%E6%B4%BB/1.htm">生活</a> <div>其实账户之前就申请了，但是决定要自己更新一些东西看也是最近。从毕业到现在已经一年了。没有进步是假的，但是有多大的进步可能只有我自己知道。毕业的时候班里12个女生，真正最后做到软件开发的只要两个包括我，PS：我不是说测试不好。当时因为考研完全放弃找工作，考研失败，我想这只是我的借口。那个时候才想到为什么大学的时候不能好好的学习技术，增强自己的实战能力，以至于后来找工作比较费劲。我</div> </li> <li><a href="/article/3723.htm" title="我认为POJO是一个错误的概念" target="_blank">我认为POJO是一个错误的概念</a> windshome <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/POJO/1.htm">POJO</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/J2EE/1.htm">J2EE</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1/1.htm">设计</a> <div> 这篇内容其实没有经过太多的深思熟虑，只是个人一时的感觉。从个人风格上来讲，我倾向简单质朴的设计开发理念；从方法论上，我更加倾向自顶向下的设计；从做事情的目标上来看，我追求质量优先，更愿意使用较为保守和稳妥的理念和方法。 &</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> 按字母分类： <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.  </div> </div> </footer>  <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>