html_html网页模板 - CSDN
html 订阅
HTML称为超文本标记语言,是一种标识性的语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。 [1]  超文本是一种组织信息的方式,它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中,也可能是其他文件,或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接,为人们查找,检索信息提供方便。 [1] 展开全文
HTML称为超文本标记语言,是一种标识性的语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。 [1]  超文本是一种组织信息的方式,它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中,也可能是其他文件,或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接,为人们查找,检索信息提供方便。 [1]
信息
中文
超文本标记语言
外文名
Hyper Text Markup Language
类    型
标记语言
阅读方式
网页浏览器
中文名
超级文本标记语言
HTML简介
HTML的英文全称是 Hyper Text Markup Language,即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言,它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档,它能独立于各种操作系统平台(如UNIX, Windows等)。使用HTML语言,将所需要表达的信息按某种规则写成HTML文件,通过专用的浏览器来识别,并将这些HTML文件“翻译”成可以识别的信息,即现在所见到的网页。 [2]  自1990年以来,HTML就一直被用作WWW的信息表示语言,使用HTML语言描述的文件需要通过WWW浏览器显示出效果。HTML是一种建立网页文件的语言,通过标记式的指令(Tag),将影像、声音、图片、文字动画、影视等内容显示出来。事实上,每一个HTML文档都是一种静态的网页文件,这个文件里面包含了HTML指令代码,这些指令代码并不是一种程序语言,只是一种排版网页中资料显示位置的标记结构语言,易学易懂,非常简单。HTML的普遍应用就是带来了超文本的技术―通过单击鼠标从一个主题跳转到另一个主题,从一个页面跳转到另一个页面,与世界各地主机的文件链接超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。HTTP协议的制定使浏览器在运行超文本时有了统一的规则和标准。 [2]  万维网(world wide web)上的一个超媒体文档称之为一个页面(外语:page)。作为一个组织或者个人在万维网上放置开始点的页面称为主页(外语:Homepage)或首页,主页中通常包括有指向其他相关页面或其他节点的指针(超级链接),所谓超级链接,就是一种统一资源定位器(Uniform Resource Locator,外语缩写:URL)指针,通过激活(点击)它,可使浏览器方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。在逻辑上将视为一个整体的一系列页面的有机集合称为网站(Website或Site)。超级文本标记语言(英文缩写:HTML)是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。 [3]  网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。 [4]  超级文本标记语言是标准通用标记语言下的一个应用,也是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果。 [3] 
收起全文
精华内容
参与话题
  • 8小时学会HTML网页开发

    万人学习 2020-07-21 20:06:50
    一说学网页,学编程,大家都下意识觉得要"吃苦","熬夜",哪有那么复杂,一定是你... 挑一个阳光的午后,关掉手机,用6个小时,看看十八哥如何把一个公司的保安教会HTML,Div,CSS的. 课程共8小时,57小集,轻松一点,你将马上学会.
  • html基础知识

    万次阅读 多人点赞 2020-02-18 14:34:58
    html hyperText markup Language! 超文本标记语言 (1) 其中html跟标签 head body是结构化标签 charset是编码字符集 (1)utf-8最常用 (2) gbk国家标本扩展版本(包含亚裔版本,和繁体字符集) (3)unicode万国码...

    html
    hyperText markup Language!
    超文本标记语言
    (1)
    初始图片
    其中html跟标签 head body是结构化标签
    图二
    charset是编码字符集
    (1)utf-8最常用
    (2) gbk国家标本扩展版本(包含亚裔版本,和繁体字符集)
    (3)unicode万国码

    在这里插入图片描述
    lang=“en,zh” 注释:language en=english zh=zhongwen
    告诉爬虫你的网页基本是什么内容,你的网页被百度搜索引擎放到前面的可能性更大
    下面介绍几个标签:

    p标签
    在这里插入图片描述

    p标签——>段落标签,成段展示,上面两个图呈现的是相同的效果
    在这里插入图片效果描述
    标题标签
    快速生成h1-h6: h${标题}*6
    在这里插入图片描述
    效果图:
    在这里插入图片描述

    h标签的功能 ①独成一段②加粗字体③更改字体的大小

    < strong >加粗< /strong>
    < em >斜体< /em >
    在这里插入图片描述
    效果图
    在这里插入图片描述
    这样即实现叠加功能
    在这里插入图片描述
    效果图
    在这里插入图片描述
    del划线标签
    在这里插入图片描述
    address
    在这里插入图片描述
    效果
    在这里插入图片描述
    address:独占一行+斜体

    div.span容器功能:使之有层次 ,有捆绑功能。
    在这里插入图片描述在这里插入图片描述
    在这里插入图片描述
    以上两个图片的效果等同
    效果图如下:
    在这里插入图片描述

    展开全文
  • HTML简单入门

    千次阅读 多人点赞 2020-05-17 22:09:22
    HTML初识 1.HTML指的是超文本标记语言(Hyper Text Markup Language),是用来描述网页的一种语言 2.不是编程语言,而是一种标记语言 3.标记语言是一套标记标签(markup tag) html作用简单理解:网页是由网页元素...

    HTML初识

    1.HTML指的是超文本标记语言(Hyper Text Markup Language),是用来描述网页的一种语言
    2.不是编程语言,而是一种标记语言
    3.标记语言是一套标记标签(markup tag)
    html作用简单理解:网页是由网页元素组成,这些元素是利用html标签描述出来,然后通过浏览器解析,就可以显示给用户。
    超文本理解:1.它可以加入图片、声音、动画、多媒体等内容(超越文本限制)2.还可以从一个文件转到另一个文件,与世界各地的主机的文件连接(超级链接文本)

    HTML元素标签分类

    常规元素(双标签)

    <标签名> 内容 </标签名>
    

    比如:

    <body> 我是谁?</body>
    

    <标签名>表示该标签的作用开始,一般称作开始标签(start tag), </标签名>表示该标签的结束,一般称作结束标签(end tag)
    和开始标签相比,结束标签只是在前面加了一个关闭符"/".

    空元素(单标签)

    <标签名/>  比如 <br/>
    

    **·**空元素用单标签来表示,简单来说就是里面不需要包含内容,只有一个开始标签不需要关闭

    html骨架标签

    <html> //HTML标签,根标签
        <head> //文档的头部,head标签中必须要设置的标签是title
            <title> </title> //文档标题
        </head>
        <body> //文档主体
        </body>
    </html>
    

    HTML标签关系

    1.嵌套关系

    <head>
    	<title> </title>
    </head>
    

    2.并列关系

    <head></head>
    <body></body>
    
    展开全文
  • HTML&CSS设计与构建网站前端开发基础入门书 讲解清晰易懂 排版很有特色
  • 教你玩转HTML(html5)h5网页设计,网站开
  • html笔记(完整版)

    万次阅读 多人点赞 2019-01-05 12:31:58
    目录 码仙励志 背景颜色 bgcolor 注释 空格  版权符© 网页标题 标题标记 网页编码 设置连接颜色link、alink、vlink 强制换行标记 换段落标记 居中对齐白标记 预格式化标记 ...文字上标字体...

    目录

    码仙励志

    背景颜色 bgcolor

    注释

    空格 

    版权符©

    网页标题

    标题标记

    网页编码

    强制换行标记

    换段落标记

    居中对齐白标记

    预格式化标记

    列表项目标记

    无序列表标记

    有序列表标记

    定义型列表

    水平分割线标记

    分区显示标记

    字体设置标记

    粗字体标记

    斜字体标记

    文字下标字体标记

    文字上标字体标记

    下划线字体标记

    其它标记

    图像标记

    超链接的使用

    表格

    框架

    表单设计


    码仙励志

    生活总是让我们遍体鳞伤,但到后来,那些受伤的地方一定会变成我们最强壮的地方

    背景颜色 bgcolor

    <body bgcolor="blue">
    秦帅哥
    </body>

    注释<!--注释的内容-->

    不添加注释:

    <body>
    秦帅哥
    秦帅哥
    </body>

    添加注释:

    <body>
    秦帅哥
    <!--秦帅哥-->
    </body

    空格&nbsp;

    <body>
    秦 帅       哥<br>
    秦&nbsp;帅&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;哥
    </body>

     

    版权符&copy;

    <body>
    &copy;版权归秦帅哥所有
    </body>

    网页标题

    <title></title>

    <head>
    <meta charset=utf-8" />
    <title>秦帅哥的网页标题</title>
    </head>
    
    <body>
    秦帅哥
    </body>

    标题标记<hn></hn>

    共有6个级别,n的范围1~6,不同级别对应显示大小不同的标题,h1最大,h6最小

    <body>
    <h1>秦帅哥</h1>
    <h2>秦帅哥</h2>
    秦帅哥
    <h6>秦帅哥</h6>
    </body>

    网页编码<meta charset="utf-8" />

    <head>
    <meta charset="utf-8" />
    <title>秦帅哥的网页标题</title>
    </head>

    link连接的颜色

    alink正在点击的颜色

    vlink已经访问的连接颜色

    <body link="red" alink="yellow" vlink="green">
    <a href="http://www.baidu.com">百度</a>
    <a href="http://www.taobao.com">淘宝</a>
    </body>

    强制换行标记

    <br>

    <body>
    秦帅哥<br>
    秦帅哥
    </body>

    换段落标记

    <p></p>

    <body>
    <p>秦帅哥</p>
    <p>秦帅哥</p>
    </body>

    居中对齐白标记

    <center></center>

    <body>
    <center>秦帅哥</center>
    </body>

    预格式化标记

    <pre></pre>

    <body>
    <pre>秦 帅     哥</pre>
    </body>

    列表项目标记

    <li></li>

    <body>
        <li>秦帅哥</li>
        <li>秦帅哥</li>
        <li>秦帅哥</li>
        <li>秦帅哥</li>
        <li>秦帅哥</li>
    </body>

    无序列表标记

    <ul></ul>

    <body>
    <ul>
      <li>秦帅哥</li>
      <li>秦帅哥</li>
      <li>秦帅哥</li>
      <li>秦帅哥</li>
      <li>秦帅哥</li>
    </ul>
    </body>

    有序列表标记

    <ol></ol>

    <body>
    <ol>
      <li>秦帅哥</li>
      <li>秦帅哥</li>
      <li>秦帅哥</li>
      <li>秦帅哥</li>
      <li>秦帅哥</li>
    </ol>
    </body>

    有序列表的type属性值

    <body>
    <ol type="A">
      <li>秦帅哥</li>
      <li>秦帅哥</li>
      <li>秦帅哥</li>
      <li>秦帅哥</li>
      <li>秦帅哥</li>
    </ol>
    </body>

    指定一个新的数字起始值value

    <body>
    <ol>
      <li>秦帅哥</li>
      <li value="5">秦帅哥</li>
      <li>秦帅哥</li>
      <li>秦帅哥</li>
      <li>秦帅哥</li>
    </ol>
    </body>

    列表嵌套

    <body>
    <ol>
      <li>秦帅哥</li>
      <li>
        <ol  type="A">
          <li>秦帅哥</li>
          <li>秦帅哥</li>
          <li>秦帅哥</li>
        </ol>
      </li>
      <li>秦帅哥</li>
      <li>秦帅哥</li>
    </ol>
    </body>

    定义型列表

    <dl><dt></dt><dd></dd></dl>

    <body>
    <dl>
      <dt>软件说明:</dt>
      <dd>简单介绍软件的功能及基本应用</dd>
      <dt>软件界面</dt>
      <dd>用于选择软件的外观
      <dd>
    </dl>
    </body>

    水平分割线标记

    <hr>

    <body>
    秦帅哥
    <hr>
    秦帅哥
    </body>

    分区显示标记

    <div></div>

    <body>
    <div> 秦帅哥 </div>
    <div> 秦帅哥 </div>
    </body>

    字体设置标记<font></font>

    设置字体的格式

    <body>
    秦帅哥<br>
    <font size="14px" color="red" face="微软雅黑">秦帅哥</font>
    </body>

    粗字体标记<b></b>

    <body>
    秦帅哥<br>
    <b>秦帅哥</b>
    </body>

    斜字体标记<i></i>

    <body>
    秦帅哥<br>
    <i>秦帅哥</i>
    </body>

    文字下标字体标记

    <sub></sub>

    <body>
    2<sub>3</sub>
    </body>

    文字上标字体标记

    <sup></sup>

    <body>
    2<sup>3</sup>
    </body>

    下划线字体标记<u></u>

    <body>
    秦帅哥<br>
    <u>秦帅哥</u>
    </body>

    其它标记

    图像标记

    <img>

    <body>
    <img src="file:///D|/孤独秦哥/2/ha.jpg" width="200px" height="200px">
    <img src="file:///D|/孤独秦哥/2/ha.jpg" width="200px" height="200px" border="5px">
    <img src="file:///D|/孤独秦哥/2/ha.pg" width="200px" height="200px" alt="灰太狼">
    </body>

    超链接的使用<a href=""></a>

    在当前窗口中打开链接

    <body>
    <a href="http://www.baidu.com">百度</a><!--外部链接-->
    <a href="Test2.html">test2</a><!--内部链接-->
    </body>

    在一个新的窗口中打开链接

    <body>
    <a href="http://www.baidu.com" target="_blank">百度</a>
    </body>

    锚点链接

    <body>
     <a name="dingbu"></a>
     <a href="#dibu">到页面底部</a><br>
     内容<br>
     <a href="#dingbu">到页面顶部</a>
     <a name="dibu"></a>
    </body>

    表格

    1.<table>标记

    2.<caption>标记

    <head>
      <title>表格</title>
      <meta charset="utf-8">
    </head>
    <body>
      <table width="500px" height="230px" border="1px" align="center"  cellspacing="0px"> 
        <caption>表格的标题</caption>
    	  <tr>
    		<th align="cernter">班级</th>
    		<th>姓名</th>
    		<th>年龄</th>
    		<th>成绩</th>
    	  </tr>
    	  <tr align="center" valign="center">
    		<td>四年级一班</td>
    		<td>张三</td>
    		<td>16</td>
    		<td>80</td>
    	  </tr>
    	  <tr>
    		<td>四年级一班</td>
    		<td>李四</td>
    		<td>14</td>
    		<td>90</td>
    	  </tr>
      </table>
    </body>

    3.<tr>标记

    4.<td>和<th>

    <body>
      <table width="500px" height="230px" border="2px" cellspacing="0px"> 
    	<tr>
    	  <td colspan="2"></td><td></td><td></td>
    	</tr>
    	<tr>
    	  <td></td><td></td><td rowspan="2"></td><td></td>
    	</tr>
    	<tr>
    	  <td></td><td></td><td></td>
    	</tr>
      </table>
    </body>

    <frameset>框架</frameset>

    框架将浏览器划分成不同的部分,每一部分加载不同的网页,实现在同一浏览器窗口中加载多个页面的效果

    <html>
      <head>
        <title>框架</title>
        <meta charset="utf-8">
      </head>
    
      <frameset rows="190px,*,190px">
        <frame>
        <frameset cols="20%,80%">
          <frame>
          <frame>
        </frameset>
        <frame>
      </frameset>
    </html>
    

    表单设计

    1.表单标记<form>...</form>

    2.文本域和密码<input>标记

    3.提交、重置、普通按钮

      <body>
        <form method="post">
    	  账号:<input type="text" name="zhanghao" size="10" maxlength="5">
    	  <br>
    	  <br>
    	  密码:<input type="password" name="mima" size="10">
    	  <br>
    	  <br>
    	  <input type="submit" value="提交">
    	  <input type="reset" value="重置">
        </form>
      </body>

    4、单选框和复选框

      <body>
        <form>
          <!--单选按钮-->
          性别:
          <input id="man" type="radio" name="sex" checked="checked">男
          <input id="woman" type="radio" name="sex">女
        </form>
      </body>

      <body>
        <form>
          <!--多选按钮-->
          爱好:
          <input type="checkbox" name='foods' value='niurou'>牛肉
          <input type="checkbox" name='foods' value='caixin'>菜心
          <input type="checkbox" name='foods' value='lianou'>莲藕
        </form>
      </body>

    5、隐藏域

    当<input type="hidden">时,为隐藏表单域

      <body>
        <form>
          <input type="hidden" value="隐藏的内容" name="yincang">
        </form>
      </body>
    

    6、多行文本域

      <body>
        <form>
          自我介绍:<br>
          <textarea name="ziwojieshao" rows="5" cols="35">
          </textarea>
        </form>
      </body>

    7、菜单下拉列表域<select></select>标记

      <body>
        <form>
          地址:<br>
          <select name="dizhi">
            <option value="sichuan">四川</option>
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
          </select>
        </form>
      </body>

    本篇博客来自于麦子学院视频教程的总结以及笔记的整理,仅供学习交流,切勿用于商业用途,如有侵权,请联系博主删除,博主QQ:194760901 

    展开全文
  • 完整版,详细,前端学习的宝典.内容包括HTML,CSS,JAVASCRIPT的内容,讲解详细易懂,掌握其中的原理
  • HTML, CSS学习笔记(完整版)

    千次阅读 2014-10-02 00:28:28
    第一章 div布局 前几课内容 .htm是早期的后缀,因为...#HTML小知识#之#XHTML与HTML的区别#XHTML是更严谨更纯净的 HTML 版本。XHTML目标是取代HTML。更详细的介绍 XHTML 教程 http://t.cn/h94BV   #HTML小知识#

    第一章 div布局

    前几课内容

    .htm是早期的后缀,因为那时只能支持长度为3的后缀,因此html与htm是一样的。

    shtml是服务器先处理然后再交给浏览器处理

     

    #HTML小知识#之#XHTML与HTML的区别#XHTML是更严谨更纯净的 HTML 版本。XHTML目标是取代HTML。更详细的介绍 XHTML 教程 http://t.cn/h94BV

     

    #HTML小知识#之#<!DOCTYPE>声明#位于文档中的最前面的位置,处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。该标签可声明三种 DTD 类型,分别表示严格版本、过渡版本以及基于框架的 HTML 文档。更详细的介绍http://t.cn/h59taG

     

    做网页先布局。

    先大处布局,在细节点缀。

     

    container的高度可以不用设定height,子元素有高度会把父元素撑开的

     

    1.ID命名可根据C语言变量命名规则

    2.HTML文件本身charset采用的编码必须与文件保存时的编码方式一样,否则出现乱码显现

     

     

    <!DOCTYPE html>

    <html>

      <head>

        <title>页面布局</title>

       

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

        <meta http-equiv="description" content="this is my page">

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       

        <link rel="stylesheet" type="text/css" href="NewFile.css">

       

      </head>

     

      <body>

        <div id="container">

           <div id="header"></div>

           <div id="main">

               <div id="left"></div>

               <div id="right"></div>

           </div>

           <div id="bottom"></div>

        </div>

      </body>

    </html>

     

    @CHARSET "UTF-8";

     

    #container {

        width: 1000px;

        background-color: gray;

    }

     

    #header {

        height: 120px;

        background-color: red;

    }

     

    #main {

        height: 600px;

        background-color: yellow;

    }

     

    #bottom{

        height:120px;

        background-color: blue;

    }

     

    #left {

        width: 700px;

        height: 600px;

        float: left;

        background: green;

    }

     

    #right {

        width: 300px;

        height: 600px;

        float: right;

        background-color: pink;

    }

     

    第二章 盒模型

    margin 外边框

    border 边框

    padding 内边框

     

    第12课 首页布局实战之margin设置

    外边距

     

    <!DOCTYPE html>

    <html>

      <head>

        <title>页面布局</title>

       

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

        <meta http-equiv="description" content="this is my page">

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       

        <link rel="stylesheet" type="text/css" href="NewFile.css">

       

      </head>

     

      <body>

        <div id="container">

           <div id="header"></div>

           <div id="main">

               <div id="left">

                  <div class="four"></div>

                  <div class="four"></div>

                  <div class="four"></div>

                  <div class="four"></div>

               </div>

               <div id="right"></div>

           </div>

           <div id="bottom"></div>

        </div>

      </body>

    </html>

     

    @CHARSET "UTF-8";

     

    #container {

        width: 1000px;

        background-color: gray;

    }

     

    #header {

        height: 120px;

        background-color: red;

    }

     

    #main {

        height: 600px;

        background-color: yellow;

    }

     

    #left {

        width: 700px;

        height: 600px;

        float: left;

        background: green;

    }

     

    .four {

        width: 330px;

        height: 280px;

        background: black;

        margin:10px;

        float: left;

    }

     

    #right {

        width: 300px;

        height: 600px;

        float: right;

        background-color: pink;

    }

     

    #bottom{

        height:120px;

        background-color: blue;

    }

     

     

    第13课 盒模型之border设置

    border的3要素:宽,形状(实现虚线),颜色

    <!DOCTYPE html>

    <html>

      <head>

        <title>study13.html</title>

       

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

        <meta http-equiv="description" content="this is my page">

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       

        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

     

        <style type="text/css">

           div {

               width: 300px;

               height:300px;

               background: blue;

               border: 50px outset green;

           }

        </style>

      </head>

     

      <body>

        <div>

       

        </div>

      </body>

    </html>

     

     

    第14课 用css控制border画三角形

    边框透明

    画一棵圣诞树

     

    <!DOCTYPE html>

    <html>

      <head>

        <title>study14.html</title>

       

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

        <meta http-equiv="description" content="this is my page">

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       

        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

     

        <style type="text/css">

       

           #parent_div{

               width: 600px;

               height: 500px;

               background: silver;

           }

           #tri1 {

               width:0px;

               height: 0px;

               border-right: 100px solid transparent;

               border-left: 100px solid transparent;

               border-bottom: 100px solid green;

           }

           #tri2 {

               width:0px;

               height: 0px;

               border-right: 120px solid transparent;

               border-left: 120px solid transparent;

               border-bottom: 120px solid green;

           }

           #tri3 {

               width:0px;

               height: 0px;

               border-right: 150px solid transparent;

               border-left: 150px solid transparent;

               border-bottom: 150px solid green;

           }

           #tri4 {

               width: 50px;

               height: 130px;

               background-color: saddlebrown;

          

           }

        </style>

      </head>

     

      <body>

        <div id="parent_div" align="center">

           <div id="tri1" ></div>

           <div id="tri2" ></div>

           <div id="tri3" ></div>

           <div id="tri4" ></div>

        </div>

       

      </body>

    </html>

     

     

    改进版:

    <!DOCTYPE html>

    <html>

      <head>

        <title>study14.html</title>

       

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

        <meta http-equiv="description" content="this is my page">

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       

        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

     

        <style type="text/css">

       

           #parent_div{

               width: 400px;

               height: 360px;

               background: silver;

               margin: 0px auto;

           }

           #tri1 {

               width:0px;

               height: 0px;

               border-right: 100px solid transparent;

               border-left: 100px solid transparent;

               border-bottom: 100px solid green;

               margin-bottom: -50px;

           }

           #tri2 {

               width:0px;

               height: 0px;

               border-right: 120px solid transparent;

               border-left: 120px solid transparent;

               border-bottom: 120px solid green;

               margin-bottom: -60px;

           }

           #tri3 {

               width:0px;

               height: 0px;

               border-right: 150px solid transparent;

               border-left: 150px solid transparent;

               border-bottom: 150px solid green;

           }

           #tri4 {

               width: 50px;

               height: 100px;

               background-color: saddlebrown;

          

           }

        </style>

      </head>

     

      <body>

        <div id="parent_div" align="center">

           <div id="tri1" ></div>

           <div id="tri2" ></div>

           <div id="tri3" ></div>

           <div id="tri4" ></div>

        </div>

       

      </body>

    </html>

     

     

    第15课 padding详解

    内边距

     

     

    2.盒子的宽高各是100px,同时padding: 30px,背景为灰色,请问灰色面积是多少?160px*160px,所以padding也是铺的背景色,即背景色铺到border,但文字输入面积只有100px*100px。

    <!DOCTYPE html>

    <html>

      <head>

        <title>study15.html</title>

       

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

        <meta http-equiv="description" content="this is my page">

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       

        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

     

        <style type="text/css">

           #a{

               width: 100px;

               height:100px;

               padding: 30px;

               background-color: gray;

           }

        </style>

       

      </head>

     

      <body>

        <div id="a">

            打一些乱七八糟的字测试一下

        </div>

      </body>

    </html>

     

     

    第16课 padding与背景

    第17课 padding美化首页

    增加padding后 要减少原来width和height的值

    <!DOCTYPE html>

    <html>

      <head>

        <title>页面布局</title>

       

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

        <meta http-equiv="description" content="this is my page">

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       

        <link rel="stylesheet" type="text/css" href="NewFile.css">

       

      </head>

     

      <body>

        <div id="container">

           <div id="header"></div>

           <div id="main">

               <div id="left">

                  <div class="four">

                      2014.09.09(星期二)

    腾讯2015校园招聘  就业中心一楼信息发布厅 19:00- 21:00

    2014.09.10(星期三)

    中国舰船研究设计中心(武汉)  就业中心一楼信息发布厅 10:00- 12:00

    陕西海泰电子有限责任公司  教2-100(德育基地)   10:00- 12:00

    核工业西南物理研究院  主楼A-403  16:30- 18:30

                  </div>

                  <div class="four">

                      2014.09.11(星期四)

    中国航天科技集团公司第一研究院第十二研究所   就业中心204室  10:00- 12:00

    航天恒星科技有限公司  就业中心一楼信息发布厅 14:30- 16:30

    北京数码视讯科技股份有限公司  就业中心一楼信息发布厅 16:30- 18:30

    百度   就业中心一楼信息发布厅 19:00- 21:00

    香港理工大学硕士招生宣讲会 文治书院报告厅(西19舍1

                  </div>

                  <div class="four">

                      2014.09.11(星期四)

    中国航天科技集团公司第一研究院第十二研究所   就业中心204室  10:00- 12:00

    航天恒星科技有限公司  就业中心一楼信息发布厅 14:30- 16:30

    北京数码视讯科技股份有限公司  就业中心一楼信息发布厅 16:30- 18:30

    百度   就业中心一楼信息发布厅 19:00- 21:00

    香港理工大学硕士招生宣讲会 文治书院报告厅(西19舍1

                  </div>

                  <div class="four">

                      2014.09.11(星期四)

    中国航天科技集团公司第一研究院第十二研究所   就业中心204室  10:00- 12:00

    航天恒星科技有限公司  就业中心一楼信息发布厅 14:30- 16:30

    北京数码视讯科技股份有限公司  就业中心一楼信息发布厅 16:30- 18:30

    百度   就业中心一楼信息发布厅 19:00- 21:00

    香港理工大学硕士招生宣讲会 文治书院报告厅(西19舍1

                  </div>

               </div>

               <div id="right"></div>

           </div>

           <div id="bottom"></div>

        </div>

      </body>

    </html>

     

    @CHARSET "UTF-8";

     

    #container {

        width: 1000px;

        background-color: gray;

    }

     

    #header {

        height: 120px;

        background-color: red;

    }

     

    #main {

        height: 600px;

        background-color: yellow;

    }

     

    #left {

        width: 700px;

        height: 600px;

        float: left;

        background: green;

    }

     

    .four {

        width: 310px;

        height: 260px;

        background: white;

        margin:10px;

        padding:10px;

        float: left;

    }

     

    #right {

        width: 300px;

        height: 600px;

        float: right;

        background-color: pink;

    }

     

    #bottom{

        height:120px;

        background-color: blue;

    }

     

    第18课 盒子模型的总结

    一个盒子,有margin,border,padding,实占多少空间?

    <!DOCTYPE html>

    <html>

      <head>

        <title>study15.html</title>

       

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

        <meta http-equiv="description" content="this is my page">

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       

        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

     

        <style type="text/css">

           #a{

               width: 300px;

               height:300px;

               border: 50px solid blue;

               padding:50px;

               margin:50px;

              

               background-color: silver;

           }

        </style>

       

      </head>

     

      <body>

        <div id="a">

            一个盒子,有margin,border,padding,实占多少空间?<br/>

            竖直方向:height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom<br/>

            水平方向:width + padding-left + padding-right + border-left + border-right + margin-left + margin-right<br/>

        </div>

      </body>

    </html>

     

    第19课 利用margin实现水平居中

    <!DOCTYPE html>

    <html>

      <head>

        <title>study19.html</title>

       

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

        <meta http-equiv="description" content="this is my page">

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       

        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

     

        <style type="text/css">

           #a{

               width: 300px;

               height:200px;

               background-color: silver;

               margin: 0px auto;

           }

        </style>

      </head>

     

      <body>

        <div id="a"></div>

      </body>

    </html>

     

     

    <!DOCTYPE html>

    <html>

      <head>

        <title>页面布局</title>

       

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

        <meta http-equiv="description" content="this is my page">

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       

        <link rel="stylesheet" type="text/css" href="NewFile.css">

       

      </head>

     

      <body>

        <div id="container">

           <div id="header"></div>

           <div id="main">

               <div id="left">

                  <div class="four">

                      2014.09.09(星期二)

    腾讯2015校园招聘  就业中心一楼信息发布厅 19:00- 21:00

    2014.09.10(星期三)

    中国舰船研究设计中心(武汉)  就业中心一楼信息发布厅 10:00- 12:00

    陕西海泰电子有限责任公司  教2-100(德育基地)   10:00- 12:00

    核工业西南物理研究院  主楼A-403  16:30- 18:30

                  </div>

                  <div class="four">

                      2014.09.11(星期四)

    中国航天科技集团公司第一研究院第十二研究所   就业中心204室  10:00- 12:00

    航天恒星科技有限公司  就业中心一楼信息发布厅 14:30- 16:30

    北京数码视讯科技股份有限公司  就业中心一楼信息发布厅 16:30- 18:30

    百度   就业中心一楼信息发布厅 19:00- 21:00

    香港理工大学硕士招生宣讲会 文治书院报告厅(西19舍1

                  </div>

                  <div class="four">

                      2014.09.11(星期四)

    中国航天科技集团公司第一研究院第十二研究所   就业中心204室  10:00- 12:00

    航天恒星科技有限公司  就业中心一楼信息发布厅 14:30- 16:30

    北京数码视讯科技股份有限公司  就业中心一楼信息发布厅 16:30- 18:30

    百度   就业中心一楼信息发布厅 19:00- 21:00

    香港理工大学硕士招生宣讲会 文治书院报告厅(西19舍1

                  </div>

                  <div class="four">

                      2014.09.11(星期四)

    中国航天科技集团公司第一研究院第十二研究所   就业中心204室  10:00- 12:00

    航天恒星科技有限公司  就业中心一楼信息发布厅 14:30- 16:30

    北京数码视讯科技股份有限公司  就业中心一楼信息发布厅 16:30- 18:30

    百度   就业中心一楼信息发布厅 19:00- 21:00

    香港理工大学硕士招生宣讲会 文治书院报告厅(西19舍1

                  </div>

               </div>

               <div id="right"></div>

           </div>

           <div id="bottom"></div>

        </div>

      </body>

    </html>

     

    @CHARSET "UTF-8";

     

    #container {

        width: 1000px;

        background-color: gray;

        margin: 0px auto;

    }

     

    #header {

        height: 120px;

        background-color: red;

    }

     

    #main {

        height: 600px;

        background-color: yellow;

    }

     

    #left {

        width: 700px;

        height: 600px;

        float: left;

        background: green;

    }

     

    .four {

        width: 310px;

        height: 260px;

        background: white;

        margin:10px;

        padding:10px;

        float: left;

    }

     

    #right {

        width: 300px;

        height: 600px;

        float: right;

        background-color: pink;

    }

     

    #bottom{

        height:120px;

        background-color: blue;

    }

     

     

    第20课 margin重叠现象

    上下相邻普通元素margin重叠取大的值

    float不同

     

    <!DOCTYPE html>

    <html>

      <head>

        <title>study20.html</title>

       

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

        <meta http-equiv="description" content="this is my page">

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       

        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

       

        <style type="text/css">

            #test1 {

               height: 200px;

               background: silver;

               margin-bottom: 100px;

            }

            #test2 {

               height: 200px;

               background: red;

               margin-top: 100px;

            }

        </style>

     

      </head>

     

      <body>

        <div id="test1">

            相邻的普通元素,上下边距,并非简单地的相加<br>

            而是取其中较大的边距值<br>

            这种现象叫做margin重叠<br>

        </div>

        <div id="test2"></div>

      </body>

    </html>

     

     

     

     

    学过这课后重新修改了圣诞树。

     

    第21课 inline内联(行内元素)

    <!DOCTYPE html>

    <html>

      <head>

        <title>study21.html</title>

       

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

        <meta http-equiv="description" content="this is my page">

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       

        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

     

        <style>

           #kurong {

               color: red;

           }

        </style>

       

      </head>

     

      <body>

        <div>

            离离原上草,一岁一<div id="kurong">枯荣</div><br>

            野火烧不尽,春风吹又生。<br>

           远芳侵古道,晴翠接荒城。<br>

           又送王孙去,萋萋满别情。<br>

        </div>

      </body>

    </html>

     

     

     

    <!DOCTYPE html>

    <html>

      <head>

        <title>study21.html</title>

       

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

        <meta http-equiv="description" content="this is my page">

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       

        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

     

        <style>

           #kurong {

               color: red;

           }

        </style>

       

      </head>

     

      <body>

        <div>

            离离原上草,一岁一<span id="kurong">枯荣</span><br>

            野火烧不尽,春风吹又生。<br>

           远芳侵古道,晴翠接荒城。<br>

           又送王孙去,萋萋满别情。<br>

        </div>

      </body>

    </html>

     

     

    块状元素:独占一行

    内联元素:不能设置宽高,内外边距,可以水平方向设置边距

     

    * 块状元素 和 内联元素 相互转化

    块状元素转化为内联元素:css设置display:inline ;

    内联元素转化为块状元素:css设置display:block ;

     

     

    块状元素

    内联元素

    address - 地址
    blockquote -
    块引用
    center -
    举中对齐块
    dir -
    目录列表
    div -
    常用块级容易,也是CSS layout的主要标签
    dl -
    定义列表
    fieldset - form
    控制组
    form -
    交互表单
    h1 -
    大标题
    h2 -
    副标题
    h3 - 3
    级标题
    h4 - 4
    级标题
    h5 - 5
    级标题
    h6 - 6
    级标题
    hr -
    水平分隔线
    isindex - input prompt
    menu -
    菜单列表
    noframes - frames
    可选内容,(对于不支持frame的浏览器显示此区块内容
    noscript -
    可选脚本内容(对于不支持script的浏览器显示此内容)
    ol -
    有序表单
    p -
    段落
    pre -
    格式化文本
    table -
    表格
    ul -
    无序列表

    li

    a - 锚点
    abbr -
    缩写
    acronym -
    首字
    b -
    粗体(不推荐)
    bdo - bidi override
    big -
    大字体
    br -
    换行
    cite -
    引用
    code -
    计算机代码(在引用源码的时候需要)
    dfn -
    定义字段
    em -
    强调
    font -
    字体设定(不推荐)
    i -
    斜体
    img -
    图片
    input -
    输入框
    kbd -
    定义键盘文本
    label -
    表格标签
    q -
    短引用
    s -
    中划线(不推荐)
    samp -
    定义范例计算机代码
    select -
    项目选择
    small -
    小字体文本
    span -
    常用内联容器,定义文本内区块
    strike -
    中划线
    strong -
    粗体强调
    sub -
    下标
    sup -
    上标
    textarea -
    多行文本输入框
    tt -
    电传文本
    u -
    下划线
    var -
    定义变量

     

    第22课 内联与块状的转化

    <!DOCTYPE html>

    <html>

      <head>

        <title>study22.html</title>

       

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

        <meta http-equiv="description" content="this is my page">

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       

        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

       

        <style type="text/css">

           div {

               width:200px;

               height:200px;

               display:inline;

               background: orange;

           }

           span {

               width:200px;

               height:200px;

               display:none;

               /* display:block; */

               background: silver;

           }

        </style>

       

      </head>

     

      <body>

        <div>块状</div>

        <span>行内</span>

      </body>

    </html>

     

     

    display可能的值

    值                                描述

    none                          此元素不会被显示。

    block                          此元素将显示为块级元素,此元素前后会带有换行符。

    inline                          默认。此元素会被显示为内联元素,元素前后没有换行符。

    inline-block               行内块元素。(CSS2.1 新增的值)

    list-item                     此元素会作为列表显示。

    run-in                         此元素会根据上下文作为块级元素或内联元素显示。

    compact                     CSS中有值 compact,不过由于缺乏广泛支持,已经从CSS2.1 中删除。

    marker                       CSS中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。

    table                           此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。

    inline-table                此元素会作为内联表格来显示(类似<table>),表格前后没有换行符。

    table-row-group              此元素会作为一个或多个行的分组来显示(类似<tbody>)。

    table-header-group  此元素会作为一个或多个行的分组来显示(类似 <thead>)。

    table-footer-group   此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。

    table-row                   此元素会作为一个表格行显示(类似 <tr>)。

    table-column-group 此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。

    table-column            此元素会作为一个单元格列显示(类似 <col>)

    table-cell                   此元素会作为一个表格单元格显示(类似 <td> 和 <th>)

    table-caption            此元素会作为一个表格标题显示(类似 <caption>)

    inherit                        规定应该从父元素继承 display 属性的值。

     

    第三章 CSS

    第23课 CSS控制段落文本

    <!DOCTYPE html>

    <html>

      <head>

        <title>study23.html</title>

       

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

        <meta http-equiv="description" content="this is my page">

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       

        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

       

        <style type="text/css">

           #p1 {

               background-color: silver;

               text-align: center;

               letter-spacing: 15px;

           }

           #p2 {

               background-color: orange;

               text-indent: 20px;

               text-decoration: line-through;

           }

        </style>

       

      </head>

     

      <body>

        <p id="p1">据有关数据显示。</p>

        <p id="p2">不过,正当国内电商巨头们有条不紊的布局海淘之时,亚马逊,这家在中国早已被边缘化的国际电商巨鳄也在窥视着这块市场。近日,亚马逊中国方面放出风声,最快在今年第四季度开通海外产品直邮服务,届时,国内用户就能通过亚马逊中国买到从国外来的商品。</p>

      </body>

    </html>

     

     

    text-decoration         none             默认。定义标准的文本。的一条线。

    text-decoration        overline        定义文本上的一条线。

    text-decoration        line-through    定义穿过文本下的一条线。

    text-decoration         blink             定义闪烁的文本。 //IE不支持火狐下可以使用

    text-decoration         inherit         规定应该从父元素继承text-decoration 属性的值。

    text-decoration         underline       定义文本下的一条线。

     

    background-color            文本背景颜色

    color                                 文本字体的颜色

    text-indent                      首行文本的缩进

    text-align                         文本对齐方式            left centerright

    letter-spacing                 字体间的距离

     

    text-transform                 none默认值 不变

    text-transform                 uppercase 文本全大写

    text-transform                 lowercase 文本全小写

    text-transform                 每个单词首字母大写

     

    word-spacing                  属性可以改变字(单词)之间的标准间隔。其默认值normal 与设置值为 0 是一样的。

    word-spacing                  属性接受一个正长度值或负长度值。如果提供一个正长度值,那么字之间的间隔就会增加。为 word-spacing 设置一个负值,会把它拉近:

    white-space                     值为normal时 去除空白字符

    white-space                     属性设置为 pre 时,浏览器不会合并空白符,也不会忽略换行符,与之相对的值是 nowrap,它会防止元素中的文本换行,除非使用了一个br 元素。在 CSS 中使用 nowrap 非常类似于 HTML 4 中用 <td nowrap> 将一个表单元格设置为不能换行,不过 white-space 值可以应用到任何元素。

    当 white-space 属性设置为pre-wrap 时,浏览器不仅会保留空白符并保留换行符,还允许自动换行。

    ----------------------------------

    Properties

    属性 CSS Version

    版本 Inherit From Parent

    继承性 Description

    简介

    text-indent                       CSS1 有 检索或设置对象中的文本的缩进

    text-overflow                   CSS3 无 设置或检索是否使用一个省略标记(...)标示对象内文本的溢出

    text-align                         CSS1/CSS3有 设置或检索对象中文本的对齐方式

    text-transform                 CSS1/CSS3 有 检索或设置对象中的文本的大小写

    text-decoration                CSS1/CSS3 无 复合属性。检索或设置对象中的文本的装饰,如下划线、闪烁等

    text-decoration-line         CSS3 无 检索或设置对象中的文本装饰线条的位置。

    text-decoration-color      CSS3 无 检索或设置对象中的文本装饰线条的颜色。

    text-decoration-style      CSS3 无 检索或设置对象中的文本装饰线条的形状。

    text-shadow                     CSS3 有 设置或检索对象中文本的文字是否有阴影及模糊效果

    text-fill-color                    CSS3 有 设置或检索对象中的文字填充颜色

    text-stroke                       CSS3 有 复合属性。设置或检索对象中的文字的描边

    text-stroke-width            CSS3 有 设置或检索对象中的文字的描边厚度

    text-stroke-color             CSS3 有 设置或检索对象中的文字的描边颜色

    letter-spacing                  CSS1 有 检索或设置对象中的文字之间的间隔

    word-spacing                  CSS1 有 检索或设置对象中的单词之间插入的空格数。

    vertical-align                   CSS1/CSS2 无 设置或检索对象内容的垂直对其方式

    word-wrap                       CSS3有 设置或检索当当前行超过指定容器的边界时是否断开转行

    white-space                     CSS1 有 设置或检索对象内空格的处理方式

    direction                          CSS2有 检索或设置文本流的方向

    unicode-bidi                    CSS2 无 用于同一个页面里存在从不同方向读进的文本显示。与direction属性一起使用

    line-height                       CSS1 有 检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离

    tab-size                            CSS3有 检索或设置对象中的制表符的长度

     

    第24课 文字控制

    <!DOCTYPE html>

    <html>

      <head>

        <title>study24.html</title>

       

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

        <meta http-equiv="description" content="this is my page">

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       

        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

     

        <style type="text/css">

           #text1 {

               color: blue;

               font-style: italic;

               font-weight: bold;

               font-size: x-large;

               line-height: 50px;

           }

           #text2 {

               font: 23px/46px Microsoft YaHei;

           }

        </style>

       

      </head>

     

      <body>

        <div id="text1">

           离离原上草,一岁一枯荣。<br>

           野火烧不尽,春风吹又生。<br>

        </div>

        <div id="text2">

           远芳侵古道,晴翠接荒城。<br>

           又送王孙去,萋萋满别情。<br> 

        </div>

       

      </body>

    </html>

     

     

    字体的英文名

    宋体       SimSun

    黑体       SimHei

    微软雅黑       Microsoft YaHei

    微软正黑体    Microsoft JhengHei

    新宋体    NSimSun

    新细明体       PMingLiU

    细明体    MingLiU

    标楷体    DFKai-SB

    仿宋       FangSong

    楷体       KaiTi

    仿宋_GB2312       FangSong_GB2312

    楷体_GB2312       KaiTi_GB2312

     

    宋体:SimSuncss中中文字体(font-family)的英文名称

    Mac OS的一些:

    华文细黑:STHeiti Light [STXihei]

    华文黑体:STHeiti

    华文楷体:STKaiti

    华文宋体:STSong

    华文仿宋:STFangsong

    儷黑 Pro:LiHei Pro Medium

    儷宋 Pro:LiSong Pro Light

    標楷體:BiauKai

    蘋果儷中黑:Apple LiGothic Medium

    蘋果儷細宋:Apple LiSung Light

    Windows的一些:

    新細明體:PMingLiU

    細明體:MingLiU

    標楷體:DFKai-SB

    黑体:SimHei

    新宋体:NSimSun

    仿宋:FangSong

    楷体:KaiTi

    仿宋_GB2312:FangSong_GB2312

    楷体_GB2312:KaiTi_GB2312

    微軟正黑體:Microsoft JhengHei

    微软雅黑体:Microsoft YaHei

    装Office会生出来的一些:

    隶书:LiSu

    幼圆:YouYuan

    华文细黑:STXihei

    华文楷体:STKaiti

    华文宋体:STSong

    华文中宋:STZhongsong

    华文仿宋:STFangsong

    方正舒体:FZShuTi

    方正姚体:FZYaoti

    华文彩云:STCaiyun

    华文琥珀:STHupo

    华文隶书:STLiti

    华文行楷:STXingkai

    华文新魏:STXinwei

    Windows 中的中文字体。

    在默认情况下,也就是未自行安装新字体或者 Office 等文字处理软件的情况下,Windows 默认提供下列字体:

    Windows 95/98/98SE 宋体、黑体、楷体_GB2312、仿宋_GB2312

    Windows XP/2000/2003/ME/NT 宋体/新宋体、黑体、楷体_GB2312、仿宋_GB2312 (Windows XP SP3 宋体-PUA)

    Windows Vista/7/2008 宋体/新宋体、黑体、楷体、仿宋、微软雅黑、SimSun-ExtB

    那么每种字体能显示那些汉字呢?

    Vista 之前的 Windows 中宋体/新宋体、黑体支持 GBK 1.0 字符集,

    楷体_GB2312、仿宋_GB2312 支持 GB2312-80 字符集。

    (注:Windows 3.X 只能支持 GB2312-80 字符集)

    Vista 及之后的 Windows 中宋体/新宋体、黑体、楷体、仿宋、微软雅黑支持 GB18030-2000 字符集,

    SimSun-ExtB 只支持 GB18030-2005 字符集扩展 B 部分。

    下面对字符集进行简单的介绍:

    GB2312-80 < GBK 1.0 < GB18030-2000 < GB18030-2005

    GB2312-80 中的字符数量最少,GB18030-2005 字符数量最多。

    GB2312-80 是最早的版本,字符数比较少;

    GBK 1.0 中的汉字大致与 Unicode 1.1 中的汉字数量相同;

    GB18030-2000 中的汉字大致与 Unicode 3.0 中的汉字数量相同,主要增加了扩展 A 部分;

    GB18030-2005 中的汉字大致与 Unicode 4.1 中的汉字数量相同,主要增加了扩展 B 部分;

    由于 Unicode 5.2 的发布,估计 GB18030 会在近期发布新版本,增加扩展 C 部分。

    需要说明的是在 GB18030 中扩展 B 部分并不是强制标准。

    如果想查看 GB18030 的标准文本,请访问 http://www.gb168.cn 中的强标阅读。

    如果想了解 Unicode 的内容,请访问 http://www.unicode.org。

    现在纠正网上普遍的一个错误:

    GB18030-2000 和 GB18030-2005 都不支持单字节的欧元符号

    与简体中文有关的代吗页如下:

    936 gb2312 简体中文(GB2312)————其实是GBK

    10008 x-mac-chinesesimp 简体中文(Mac)

    20936 x-cp20936 简体中文(GB2312-80)

    50227 x-cp50227 简体中文(ISO-2022)

    51936 EUC-CN 简体中文(EUC)

    52936 hz-gb-2312 简体中文(HZ)

    54936 GB18030 简体中文(GB18030)

    补充:

    使用楷体_GB2312、仿宋_GB2312后,在 Windows 7/Vista/2008 中可能不再显示为对应的字体。

    这是因为 Windows 7/Vista/2008 中有楷体、仿宋,默认情况下没有楷体_GB2312、仿宋_GB2312,字体名称相差“_GB2312”。

     

    第25课 字体控制精讲

    新闻标题:用黑体或无衬线(sans-serif)

    新闻正文:宋体或有衬线(serif)

    注意,你设置的字体,你客户机器上未必有。要没有,这是显示的就是默认字体。

    所以,要注意,你选的一些好看的字体,别人没有。

     

    所以,用设置字体,可以将选用字体,和备选字体依次在后面排列。eg:

    font-family:‘xx1’,'xx2','xd3',sans-serif;

    上面这句的意思就是,客户的浏览器先去调用’xx1'字体,如果客户没有,便调用'xx2',还没有,再调用'xx3',如果还是没有,就让浏览器随便调用一个sans-serif的字体就行。

     

    第26课 背景图片

    background-attachment :     scroll默认值滚动 fiixed背景固定

    background-color :               transparent 默认值背景透明 

    background-color:               颜色  背景颜色

    background-image:             none默认值 无背景url(背景路径)背景图片

    background-position:          left  top center right  可以选择背景所在的位置

    background-repeat:             repeat-x X轴平铺 repeat-y  Y轴平铺 no-repeat  背景图片不重复

     

    1.背景图与背景色,都设置,显示背景图。

    2.为什么有的网站既设背景图又设背景色?

    1)由于网速或代码冗余而导致网站打开速度慢的时候,图片加载不出来 即可先显示背景色。

    2)还有一种情况,考虑到大屏下(如1920*1080或者更大)网站背景图不足以撑满整个显示区域,所以背景图以外的部分要显示背景色,并且背景图边缘部分必须处理妥当保证平滑过渡到背景色,不会有突兀的感觉。

     

    <!DOCTYPE html>

    <html>

      <head>

        <title>study26.html</title>

       

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

        <meta http-equiv="description" content="this is my page">

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       

        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

        <style type="text/css">

           body {

               background-color:black;

               background-image: url(book.jpg);

               background-repeat: repeat-x;

               background-attachment: fixed;

           }

        </style>

      </head>

     

      <body>

       

      </body>

    </html>

     

     

    第27课 大图片背景

    <!DOCTYPE html>

    <html>

      <head>

        <title>study27.html</title>

       

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

        <meta http-equiv="description" content="this is my page">

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       

        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

        <style type="text/css">

           #text1 {

               border: 1px solid orange;

               width: 500px;

               height: 500px;

               background-image: url("book.jpg");

               background-repeat: no-repeat;

               background-position: center center;

           }

           #text2 {

               width: 80px;

               height: 20px;

               border: 1px solid blue;

               background-image: url("bg_v3.png");

               background-position: -5px -120px;

           }

           #text3 {

               width: 30px;

               height: 30px;

               border: 1px solid black;

               background-image: url("bg_v3.png");

               background-position: -160px -523px;

           }

        </style>

      </head>

     

      <body>

        <div id="text1"></div>

        <div id="text2"></div>

        <div id="text3"></div>

      </body>

    </html>

     

    1.CSS控制页面时,页面以左上角为原点,向下为正Y轴,向右为正X轴

     

    第28课 CSS选择器

    <!DOCTYPE html>

    <html>

      <head>

        <title>study28.html</title>

       

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

        <meta http-equiv="description" content="this is my page">

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       

        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

        <style type="text/css">

           #test1 {

               width: 100px;

               height: 50px;

               border: 1px solid blue;

           }

           .test2 {

               width: 100px;

               height: 50px;

               border: 1px solid red;

           }

           div {

               width: 200px;

               height: 200px;

               background-color: orange;

               margin-bottom: 10px;

           }

           div p {

               color: red;

           }

          

        </style>

      </head>

     

      <body>

        <div id="test1">test1</div>

        <div class="test2">test2</div>

        <div>

            普通div

            <p>

               div中的p

            </p>

        </div>

        <p>

            独立的p

        </p>

        <div>

            css选择器:id选择器(#),class选择器(.),标签选择器(div{}),派生选择器(div p{})

        </div>

      </body>

    </html>

     

     

    1.css选择器:id选择器(#),class选择器(.),标签选择器(div{}),派生选择器(div p{})

    2.还有没有其他选择器及其用法?

    第一 id  #xxx

    第二 class  .xxx

    第三 标签 div  p  body 等

    第四 后代 div p{}    .a .b{} 等 表示所有空格后面的选择器生效

    第五 子代  div > p  只有大于号后面的选择器生效 不继承下去了

    第六 群组选择  div,p,a{} 记住 是逗号 不是小数点,表示div p a标签都生效

    第七 伪选择器 比如 a:link 让鼠标放上去的时候生效

    第八 通用选择器 比如 p *{}  表示p标签后面的所有标签都生效

    第九 相邻选择器 比如 p+div{} 表示 p后面的第一个div生效  后面的 都无效

    第十 属性选择器 比如 p[title='aa'] {} 表示 p标签里面是否有title等于aa的属性 有的话就生效

     

    第29课 CSS优先级

    控制的越精细,优先级越高

    <!DOCTYPE html>

    <html>

      <head>

        <title>study29.html</title>

       

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

        <meta http-equiv="description" content="this is my page">

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       

        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

        <style type="text/css">

           p {

               color: red;

           }

           .test2 {

               color: green;

           }

           #test1 {

               color: blue;

           }

          

           div #test1{

               color: pink;

           }

          

        </style>

      </head>

     

      <body>

        <div>

           <p id="test1" class="test2">天天向上</p>

       </div>

      </body>

    </html>

     

     

     

     

    第30课 CSS引入方式

    <!DOCTYPE html>

    <html>

      <head>

        <title>study30.html</title>

       

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

        <meta http-equiv="description" content="this is my page">

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       

        <link rel="stylesheet" type="text/css" href="./study30.css">

       

        <style type="text/css">

           body {

               background-color: silver;

           }

        </style>

       

      </head>

     

      <body>

        <div id="test1" style="color: white;">好好学习</div>

      </body>

    </html>

     

    @CHARSET "UTF-8";

    @import url(study301.css);

     

    #test1 {

        width: 100px;

        height: 100px;

        background-color: orange;

    }

    @CHARSET "UTF-8";

    @import url(study301.css);

     

    #test1 {

        width: 100px;

        height: 100px;

        background-color: orange;

    }

     

    CSS的四种引入方式

    要说出CSS的引入方式,没有什么难度,但要说到为什么使用不同的引入方式,就有些学问在里面了。

     

    CSS的引入方式最常用的有三种,

     

    第一:在head部分加入<link  rel="stylesheet"type="text/css" href="my.css"/>,引入外部的CSS文件。

     

    这种方法可以说是现在占统治地位的引入方法。如同IE与浏览器。这也是最能体现CSS特点的方法;最能体现DIV+CSS中的内容与显示分离的思想,也最易改版维护,代码看起来也是最美观的一种。

     

    第二:在head部分加入

    <style type="text/css">

    div{margin: 0;padding: 0;border:1px redsolid;}

    </style>

     

    这种方法的使用情况要少的多,最长见得就是访问量大的门户网站。或者访问量较大的企业网站的首页。与第一种方法比起来,优点突出,弊端也明显。优点:速度快,所有的CSS控制都是针对本页面标签的,没有多余的CSS命令;再者不用外链CSS文件。直接在HTML文档中读取样式。缺点就是改版麻烦些,单个页面显得臃肿,CSS不能被其他HTML引用造成代码量相对较多,维护也麻烦些。 但是采用这种方法的公司大多有钱,对他们来说用户量是关键,他们不缺人进行复杂的维护工作。

     

    第三:直接在页面的标签里加 <divstyle="border:1px red solid;">测试信息</div>

     

    这种方法现在用的很少,很多公司不了解前端技术的领导还对这种写法很痛恨。认为HTML里不能出现CSS命令。其实有时候使用下也没有什么大不了。比如通用性差,效果特殊,使用CSS命令较少,并且不常改动的地方,使用这种方法反而是很好的选择。

     

    除了这三种常用的CSS引入方式,还有种很多人都没有见过的引入方式

    <style type="text/css">

    @import url(my.css);

    </style>

     

    这就是第四种引入方式。在IBM工作的时候,只能使用一种Ajax框架,就是DOJO。而DOJO的CSS引用,就是采用了@import的方式。这种情况非常少,主要用在CSS文件数量庞大的负责的系统中。另外@important本身是一个CSS命令,是放在CSS文件里的,这个跟LINK标签有很大的区别。

     

    第31课 CSS初始化

    <!DOCTYPE html>

    <html>

      <head>

        <title>study31.html</title>

       

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

        <meta http-equiv="description" content="this is my page">

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       

        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

       

        <style type="text/css">

           ul {

           border: 1px solid blue;

           }

           li {

           border: qpx solid red;

           }

        </style>

     

      </head>

     

      <body>

        <div>

            相同的元素,如li,在不同的浏览器下,显示的效果稍有不同,<br>

            是因为,浏览器对各种元素的margin,border,font-size等略有不同<br>

            为了杜绝这种情况,我们通过CSS强制让所有的元素的属性值都一样<br>

            这样浏览器显示效果就一致了,减少了不兼容情况的发生<br>

            <ul>

               <li>a</li>

               <li>b</li>

               <li>c</li>

               <li>d</li>

            </ul>

        </div>

      </body>

    </html>

     

     

     

     

    腾讯的初始化代码

     

    /*update 20140616*/

    body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}

    body{font:12px "宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%}

    a{color:#172c45;text-decoration:none}

    a:hover{color:#cd0200;text-decoration:underline}

    em{font-style:normal}

    li{list-style:none}

    img{border:0;vertical-align:middle}

    table{border-collapse:collapse;border-spacing:0}

    p{word-wrap:break-word}

    第四章 HTML语义标签

    第32课HTML学习思维导图

     

    一、html结构:

    主要包括3部分:doctype、head、body

    1)doctype:文档类型,XHTML1.0提供了3中DTD供可供选择

    * 过渡的(Transitional):要求非常宽松的DTD,它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法),完整代码如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

     

    * 严格的(Strict):要求严格的DTD,你不能使用任何表现层的标识和属性,例如<br>,完整代码如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

     

    * 框架的(Frameset):专门针对框架页面设计使用的DTD,如果你的页面中包含有框架,需要采用这种DTD,完整代码如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

     

    2)head:包括meta charser和title,也能包括css。

    3)body:各种div及html标签。

     

    二、div布局

    1、布局原则:从上到下、从左到右、从大到小

    2、盒模型:块状元素div看成盒子。

    1)盒子有自己的宽width和高height;

    2)盒子与盒子之间的距离称为外边距margin:

    margin后面可以跟1~4个值,按照上、右、下、左的顺序为四个方向分配值,没有分配到的取对边的值。

    普通元素及父子元素在竖直方向上存在margin重叠现象,即相邻的两个普通元素,上下边距,不是简单的相加,而是取边距较大者的元素的边距值;关系为父子的两个div元素,竖直方向上如果两个元素都设有margin值,则会取margin值较大的元素的边距值。

    3)盒子的厚度称为边框border。border的3要素:宽 形状 颜色。

    border的3要素可单独定义,也可以和4个方向按需要结合。

    4)盒子与内部内容的距离称为padding:定义方式同margin。

    3、普通div无论宽度是多少都独占一行,要实现2个div并排显示,就要用浮动float,如float:left/right;

    浮动元素后面再来一个普通元素,那这个元素会跑到浮动元素的下面,所以要使它正常显示,要清除浮动clear,如clear:left/right/both;

     

    三、css效果

    1、选择器

    常用的有id选择器、类选择器、标签选择器、派生选择器

    第一 id选择器       #xxx

    第二 class选择器   .xxx

    第三 标签选择器   div  p  body 等

    第四 派生选择器   div p{}    .a .b{} 等 表示所有空格后面的选择器生效

    第五 子代选择器   div > p  只有大于号后面的选择器生效 不继承下去了

    第六 群组选择         div,p,a{} 记住 是逗号 不是小数点,表示div p a标签都生效

    第七 伪类选择器   比如 a:link 让鼠标放上去的时候生效

    第八 通用选择器  比如 p *{}  表示p标签后面的所有标签都生效

    第九 相邻选择器  比如 p+div{} 表示 p后面的第一个div生效  后面的 都无效

     

    第十 属性选择器  比如 p[title='aa'] {} 表示 p标签里面是否有title等于aa的属性 有的话就生效

     

    2、控制效果

    1)段落控制:text-indent:首行缩进

                text-align:水平文字方向

                             text-decoration:文本装饰线

                             letter-spacing:字符间距

                             text-transform:字母大小写转换

    2)文本控制:color:颜色

                font-style:字体样式

                             font-weight:字体粗细

                             font-size:字体大小

                             line-height:行高

                             font-family:字体

    3)背景控制:background-color:背景色

                background-image:背景图片

                background-repeat:背景图重复

                background-attachment:背景图粘贴方式

                             background-position:背景图位置

    背景色和背景图同时设置时,优先显示背景图,同时设置为了当背景图被删除或缓冲慢时,设置一个与背景图色调相近的背景色,使网站的视觉效果不会反差太大。

    当背景图比元素还大时,就需要调background-positin来实现。

    4)css引入方式

    ①页内style标签即在head部分加入style标签:

    <style type="text/css">

           div{margin: 0;padding: 0;border:1px red solid;}

    </style>

    ②外部css文件,在head部分加入link:

    <link rel="stylesheet"type="text/css" hre="xxx.css"/>

    ③行内style标签,直接在页面的标签里加style属性:

    <div style="border:1px redsolid;">测试信息</div>

    ④import导入即在head部分加入@import:

    <style type="text/css">

    @import url(xxx.css);

    </style>

     

    5)初始化

    因为各浏览器对于元素有默认css参数,而且可能不一致,那么同样一段代码在不同浏览器之间显示效果就不一样。那么就需要统一对常用元素常用css参数手动设定统一效果。

     

    四、html标签

    分为2大类:无语义标签和有语义标签。

    之前学过的div和span都是无语义标签,div是布局分块的块状元素,span是选择文字用的内联元素。

    有语义标签,每个标签的名字就能看出它的作用,有标题h1~h6,段落p,图片img,视频embed,超链接和锚点a,无序列表ul,有序列表ol,表格table。

     

    http://www.zixue.it/data/attachment/forum/201401/21/235003luj5trkebkd2udk5.jpeg

     

    第33课 h标签与p标签

    第34课 img标签

     

    <img src =" " alt="图片" title="标题" />

    src 这里是路径问题。

    ./    是相同目录下

    ../    是返回上一级目录

     

    <!DOCTYPE html>

    <html>

      <head>

        <title>study34.html</title>

       

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

        <meta http-equiv="description" content="this is my page">

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       

        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

     

      </head>

     

      <body>

        <img alt="" src="book.jpg" title="鼠标放上去它就显示">

        <img alt="惊讶" src="http://www.zixue.it/uc_server/avatar.php?uid=5410&size=middle" title="别的网站的图片">

      </body>

    </html>

     

     

     

    单闭合标签

     

    注释标签:<!-- 注释内容  -->

    严格来讲不算HTML标签的:<!DOCTYPE>文档声明标签

    设置页面元信息的:<meta>标签

    设置网页所有链接的相对目录(如根目录)的:<base>标签

    换行:<br>

    水平线:<hr>

    图像:<img>

    表单元素<input>

    在表格table中定义一个或多个列的属性的:<col>标签

    定义框架的一个窗口的:<frame>标签

    定义文档与外部资源的关系的:<link>链接标签

     

    第35课 图片是内联还是块状

    图片不能设置margin值

    可以转化为块状再取消margin值

    <!DOCTYPE html>

    <html>

      <head>

        <title>study35.html</title>

       

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

        <meta http-equiv="description" content="this is my page">

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       

        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

       

        <style type="text/css">

           img {

               width: 300px;

               height: 180px;

               border: 1px solid blue;

               display: block;

           }

           #test1 {

               width: 500px;

               height: 300px;

               border: 1px solid blue;

              

           }

        </style>

       

      </head>

     

      <body>

        <img alt="" src="book.jpg">

        <img alt="" src="book.jpg">

        <div id="test1">图片是内联元素,同时是内联替换元素,替换元素是能设置宽高的</div>

      </body>

    </html>

     

     

     

    搜索除了img还有那些替换元素 w3creplaced element

     

    替换元素:

     

    替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容。

     

    比如:<input /> type="text" 的是,这是一个文本输入框,换一个其他的时候,浏览器显示就不一样

     

    (X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素,这些元素都没有实际的内容。

     

    第36课 有序列表和无序列表

    为了最大程度的兼容不同浏览器,通常把 li 标签设置为list-syle-type:none ,然后通过加载自定义图片来实现。

    <!DOCTYPE html>

    <html>

      <head>

        <title>study36.html</title>

       

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

        <meta http-equiv="description" content="this is my page">

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       

        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

        <style type="text/css">

           ul li {

               list-style-type: square;

           }

           ol li {

               list-style-type: upper-roman;

           }

        </style>

      </head>

     

      <body>

        <ul>

            <li>aaa</li>

            <li>aaa</li>

            <li>aaa</li>

            <li>aaa</li>

        </ul>

        <ol>

            <li>aaasda</li>

            <li>aadfa</li>

            <li>aaadsfa</li>

            <li>aafda</li>

        </ol>

      </body>

    </html>

     

     

    -----

    小熊列表

    <!DOCTYPE html>

    <html>

      <head>

        <title>study36.html</title>

       

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

        <meta http-equiv="description" content="this is my page">

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       

        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

        <style type="text/css">

           ul li {

               /* list-style-type: square; */

               list-style-type: none;

               background-image: url("./pic/20140917040521823_easyicon_net_32.png");

                background-repeat: no-repeat;

                background-size:20px;

                background-position: left center;

                padding-left: 20px;

           }

           ol li {

               list-style-type: upper-roman;

           }

        </style>

      </head>

     

      <body>

        <ul>

            <li>aaa</li>

            <li>aaa</li>

            <li>aaa</li>

            <li>aaa</li>

        </ul>

        <ol>

            <li>aaasda</li>

            <li>aadfa</li>

            <li>aaadsfa</li>

            <li>aafda</li>

        </ol>

      </body>

    </html>

     

     

    第37课 整齐的表格

    <!DOCTYPE html>

    <html>

      <head>

        <title>study37.html</title>

       

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

        <meta http-equiv="description" content="this is my page">

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       

        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

        <style type="text/css">

           table {

               border-collapse: collapse;/* 表格边框融合 */

           }

           td {

               border: 1px solid blue;

           }

        </style>

      </head>

     

      <body>

        <table>

            <tr>

               <td colspan="3">sdfsdf</td>

            </tr>

            <tr>

               <td>sdfsdf</td>

               <td>sdfsdf</td>

               <td>sdfsdf</td>

            </tr>

            <tr>

               <td>sdfsdf</td>

               <td>sdfsdf</td>

               <td>sdfsdf</td>

            </tr>

        </table>

      </body>

    </html>

     

     

    第38课 超链接

    a标签,内联元素

    <!DOCTYPE html>

    <html>

      <head>

        <title>study38.html</title>

       

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

        <meta http-equiv="description" content="this is my page">

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       

        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

     

      </head>

     

      <body>

        <a href="webTest.html" target="_blank" title="鼠标放上来">点击(在空白新窗口显示)</a>

      </body>

    </html>

     

     

    使用# 来实现标签,转到特定内容下

     

    第39课 锚点

    <!DOCTYPE html>

    <html>

    <head>

    <title>study39.html</title>

     

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

     

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

     

    </head>

     

    <body>

        <a href="./study39.html#p1">p1锚点</a>

        <a href="./study39.html#p2">p2锚点</a>

        <a href="./study39.html#p3">p3锚点</a>

     

        <a name="p1"></a>

        <p>1asdfasdf</p>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <a name="p2"></a>

        <p>2asdfasdf</p>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <br>

        <a name="p3"></a>

        <p>3asdfasdf</p>

    </body>

    </html>

     

     

     

    第40课 css伪类

    <!DOCTYPE html>

    <html>

      <head>

        <title>study40.html</title>

       

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

        <meta http-equiv="description" content="this is my page">

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       

        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

        <style type="text/css">

           a:LINK {/* 默认颜色 */

               color: gray;

           }

           a:VISITED {   /* 访问过的颜色 */

               color: purple;

           }

           a:HOVER/* 鼠标放上去的颜色 */

               color: orange;

           }

           a:ACTIVE { /* 鼠标按住不放的颜色 */

               color: black;

           }

          

        </style>

       

      </head>

     

      <body>

        <div>

            css允许我们针对a标签的4中状态设置各自的css特性,叫做css的伪类<br>

            1:active一般不写

            2: 一定要注意,顺序是LVHA

            3: a:link可以简写为a

        </div>

        <div>

            <a href="#">空链接</a>

            <a href="#">空链接</a>

            <a href="#">空链接</a>

            <a href="#">空链接</a>

            <a href="#">空链接</a>

        </div>

      </body>

    </html>

     

    第41课 字符实体

    <!DOCTYPE html>

    <html>

      <head>

        <title>study41.html</title>

       

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

        <meta http-equiv="description" content="this is my page">

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       

        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

     

      </head>

     

      <body>

       <div>

           在html开发中,有一些字符,不适于直接写出,如&gt;&lt;<br>

           一般的格式:&amp; + 实体名 + ;<br>

           实体有很多,记住常用的<br>

           &gt;&lt;&quot;&yen;&copy;<br>

       </div>

      </body>

    </html>

     

     

     

     

    第五章 公司网页开发实战

    第42课 公司网站开发之首页布局

     

    <!DOCTYPE html>

    <html>

      <head>

        <title>首页实战</title>

       

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

        <meta http-equiv="description" content="this is my page">

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       

        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

     

      </head>

     

      <body>

        <div id="container">

           <div id="header">

               <ul id="navi">

                  <li>导航1</li>

                  <li>导航2</li>

                  <li>导航3</li>

                  <li>导航4</li>

                  <li>导航5</li>

                  <li>导航6</li>

                  <li>导航7</li>

               </ul>

           </div>

           <div id="main">

               <div id="lside">

                  <div class="subtitle"></div>

                  <div class="four"></div>

                  <div class="four"></div>

                  <div class="four"></div>

                  <div class="four"></div>

               </div>

               <div id="rside">

                  <div class="subtitle"></div>

                  <ul id="article">

                      <li>文章1</li>

                      <li>文章2</li>

                      <li>文章3</li>

                      <li>文章4</li>

                      <li>文章5</li>

                      <li>文章6</li>

                      <li>文章7</li>

                  </ul>

               </div>

           </div>

           <div id="footer"></div>

        </div>

      </body>

    </html>

     

     

    第43课 首页实战导航制作

    css初始化:

    @CHARSET "UTF-8";

    /*css reset code */

     

    /****  文字大小初始化,使1em=10px *****/

    body {

    font-size:62.5%;

    } /* for IE/Win */

    html>body {

    font-size:10px;

    } /* for everything else */

     

    /*字体边框等初始化*/

    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {

     padding: 0;

     margin: 0;

     }

    table {

     border-collapse: collapse;

     border-spacing: 0;

     }

    fieldset,img {

     border: 0;

     }

     img {

     display:block;

     }

    address,caption,cite,code,dfn,th,var {

     font-weight: normal;

     font-style: normal;

     }

    ol,ul {

     list-style: none;

     }

    caption,th {

     text-align: left;

     }

    h1,h2,h3,h4,h5,h6 {

     font-weight: normal;

     font-size: 100%;

     }

    q:before,q:after {

     content:'';

     }

    abbr,acronym { border: 0;

     }

     

    a {

    text-decoration:none;

    }

     

    <!DOCTYPE html>

    <html>

      <head>

        <title>首页实战</title>

       

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

        <meta http-equiv="description" content="this is my page">

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       

        <link rel="stylesheet" type="text/css" href="./css/reset.css">

        <style type="text/css">

           #container {

               width: 1002px;

           }

           #header {

               height:128px;

               background: gray url("./indexPics/top_bg.jpg");

           }

           #navi li {

               width:90px;

               margin-right:1px;

               float: left;

           }

           #navi a {

               font-size:16px;

               font-family:Microsoft YaHei;

               color: #363636;

               display: block;

               width: 90px;

               height: 37px;

               text-align: center;

           }

           #navi a:HOVER {

               color: white;

               background-image: url("./indexPics/nav_on.gif");

           }

        </style>

      </head>

     

      <body>

        <div id="container">

           <div id="header">

               <img id="logo" src="./indexPics/logo.jpg" alt="">

               <ul id="navi">

                  <li><a href="#">导航1</a></li>

                  <li><a href="#">导航2</a></li>

                  <li><a href="#">导航2</a></li>

                  <li><a href="#">导航2</a></li>

                  <li><a href="#">导航2</a></li>

                  <li><a href="#">导航2</a></li>

                  <li><a href="#">导航2</a></li>

               </ul>

           </div>

           <div id="main">

               <div id="lside">

                  <div class="subtitle"></div>

                  <div class="four"></div>

                  <div class="four"></div>

                  <div class="four"></div>

                  <div class="four"></div>

               </div>

               <div id="rside">

                  <div class="subtitle"></div>

                  <ul id="article">

                      <li>文章1</li>

                      <li>文章2</li>

                      <li>文章3</li>

                      <li>文章4</li>

                      <li>文章5</li>

                      <li>文章6</li>

                      <li>文章7</li>

                  </ul>

               </div>

           </div>

           <div id="footer"></div>

        </div>

      </body>

    </html>

     

     

    第44课 首页实战之main区开发

    css

    @CHARSET "UTF-8";

     

    .clr {

        clear: both;

        width: 0px;

        height: 0px;

    }

     

     

    #container {

        width: 1002px;

    }

     

    #header {

        height: 128px;

        background: gray url("../indexPics/top_bg.jpg");

    }

     

    #navi li {

        width: 90px;

        margin-right: 1px;

        float: left;

    }

     

    #navi a {

        font-size: 16px;

        font-family: Microsoft YaHei;

        color: #363636;

        display: block;

        width: 90px;

        height: 37px;

        text-align: center;

    }

    #navi a:HOVER {

        color: white;

        background-image: url("../indexPics/nav_on.gif");

    }

     

    #main {

    }

    #lside {

        height: 480px;

        width: 694px;

        border: 1px solid gray;

        background-color: white;

        float: left;

    }

    .subtitle {

        height: 37px;

        background-image: url("../indexPics/index_main_top_bg.gif");

    }

    .subtitle img {

        margin:5px 0 0 10px;

        float: left;

    }

    .subtitle h1 {

        float: left;

        margin-left:10px;

        font-size: 16px;

        font-family: Microsoft Yahei, SimHei, sans-serif;

    }

    .subtitle a {

        font-size:12px;

        color: gray;

        float: right;

    }

    .four {

        width: 326px;

        height: 200px;

        background-color: #eee;

        float: left;

        margin: 10px;

    }

    .four h2 {

        margin:6px 0 6px 10px;

        font-size: 16px;

        font-family: Microsoft Yahei, SimHei, sans-serif;

    }

    .four img {

        background-color:white;

        float: left;

        margin-left: 10px;

        padding: 6px;

    }

    .four ul {

        float: left;

        margin-left: 10px;

    }

    .four li {

        background-image: url("../indexPics/service_intro_bg.gif");

        background-repeat: no-repeat;

        padding-left:10px;

        height: 20px;

    }

    .four a {

        color: gray;

    }

    .four a:VISITED{

        color: gray;

    }

    .four a:HOVER {

        text-decoration: underline;

    }

    #rside {

        height: 600px;

        width: 294px;

        background-color: green;

        float: right;

    }

     

    #footer {

        height: 120px;

        background-color: black;

    }

     

    index.html

    <!DOCTYPE html>

    <html>

      <head>

        <title>首页实战</title>

       

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

        <meta http-equiv="description" content="this is my page">

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       

        <link rel="stylesheet" type="text/css" href="./css/reset.css">

        <link rel="stylesheet" type="text/css" href="./css/index.css">

        <style type="text/css">

          

        </style>

      </head>

     

      <body>

        <div id="container">

           <div id="header">

               <img id="logo" src="./indexPics/logo.jpg" alt="">

               <ul id="navi">

                  <li><a href="#">导航1</a></li>

                  <li><a href="#">导航2</a></li>

                  <li><a href="#">导航2</a></li>

                  <li><a href="#">导航2</a></li>

                  <li><a href="#">导航2</a></li>

                  <li><a href="#">导航2</a></li>

                  <li><a href="#">导航2</a></li>

               </ul>

           </div>

           <div id="main">

               <div id="lside">

                  <div class="subtitle">

                      <img alt="" src="./indexPics/circle.gif">

                      <h1>核心业务</h1>

                      <a href="#">MORE&gt;&gt;</a>

                  </div>

                  <div class="four">

                      <h2>电子商务类网站建设</h2>

                      <img alt="" src="./indexPics/eshop_service.jpg">

                      <ul>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                      </ul>

                  </div>

                  <div class="four">

                      <h2>电子商务类网站建设</h2>

                      <img alt="" src="./indexPics/eshop_service.jpg">

                      <ul>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                      </ul>

                  </div>

                  <div class="four">

                      <h2>电子商务类网站建设</h2>

                      <img alt="" src="./indexPics/eshop_service.jpg">

                      <ul>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                      </ul>

                  </div>

                  <div class="four">

                      <h2>电子商务类网站建设</h2>

                      <img alt="" src="./indexPics/eshop_service.jpg">

                      <ul>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                      </ul>

                  </div>

               </div>

               <div id="rside">

                  <div class="subtitle">

                      <img alt="" src="./indexPics/circle.gif">

                   </div>

                  <ul id="article">

                      <li>文章1</li>

                      <li>文章2</li>

                      <li>文章3</li>

                      <li>文章4</li>

                      <li>文章5</li>

                      <li>文章6</li>

                      <li>文章7</li>

                  </ul>

               </div>

           </div>

           <div class="clr"></div>

           <div id="footer"></div>

        </div>

      </body>

    </html>

     

     

     

    第45课 首页实战之main区(2)

    css

    @CHARSET "UTF-8";

     

    .clr {

        clear: both;

        width: 0px;

        height: 0px;

    }

     

     

    #container {

        width: 1002px;

    }

     

    #header {

        height: 128px;

        background: gray url("../indexPics/top_bg.jpg");

    }

     

    #navi li {

        width: 90px;

        margin-right: 1px;

        float: left;

    }

     

    #navi a {

        font-size: 16px;

        font-family: Microsoft YaHei;

        color: #363636;

        display: block;

        width: 90px;

        height: 37px;

        text-align: center;

    }

    #navi a:HOVER {

        color: white;

        background-image: url("../indexPics/nav_on.gif");

    }

     

    #main {

    }

    #lside {

        height: 480px;

        width: 694px;

        border: 1px solid gray;

        background-color: white;

        float: left;

    }

    .subtitle {

        height: 37px;

        background-image: url("../indexPics/index_main_top_bg.gif");

    }

    .subtitle img {

        margin:5px 0 0 10px;

        float: left;

    }

    .subtitle h1 {

        float: left;

        margin-left:10px;

        font-size: 16px;

        font-family: Microsoft Yahei, SimHei, sans-serif;

    }

    .subtitle a {

        font-size:12px;

        color: gray;

        float: right;

    }

    .four {

        width: 326px;

        height: 200px;

        background-color: #eee;

        float: left;

        margin: 10px;

    }

    .four h2 {

        margin:6px 0 6px 10px;

        font-size: 16px;

        font-family: Microsoft Yahei, SimHei, sans-serif;

    }

    .four img {

        background-color:white;

        float: left;

        margin-left: 10px;

        padding: 6px;

    }

    .four ul {

        float: left;

        margin-left: 10px;

    }

    .four li {

        background-image: url("../indexPics/service_intro_bg.gif");

        background-repeat: no-repeat;

        padding-left:10px;

        height: 20px;

    }

    .four a {

        color: gray;

    }

    .four a:VISITED{

        color: gray;

    }

    .four a:HOVER {

        text-decoration: underline;

    }

    #rside {

        width: 294px;

        float: right;

    }

    #article {

        background: #eee;

        margin-top: 1px;

        padding-top: 10px;

    }

    #article a {

        display: block;

        height: 29px;

        padding-left:30px;

        background-image: url("../indexPics/article_head.gif");

        background-repeat: no-repeat;

    }

    #article a:HOVER {

        background-image: url("../indexPics/article_on_bg.gif");

    }

    #contact {

        margin-top:1px;

        height: 240px;

        background-color: #eee;

    }

     

    #footer {

        height: 120px;

        background-color: black;

    }

     

     

    html

    <!DOCTYPE html>

    <html>

      <head>

        <title>首页实战</title>

       

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

        <meta http-equiv="description" content="this is my page">

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       

        <link rel="stylesheet" type="text/css" href="./css/reset.css">

        <link rel="stylesheet" type="text/css" href="./css/index.css">

        <style type="text/css">

          

        </style>

      </head>

     

      <body>

        <div id="container">

           <div id="header">

               <img id="logo" src="./indexPics/logo.jpg" alt="">

               <ul id="navi">

                  <li><a href="#">导航1</a></li>

                  <li><a href="#">导航2</a></li>

                  <li><a href="#">导航2</a></li>

                  <li><a href="#">导航2</a></li>

                  <li><a href="#">导航2</a></li>

                  <li><a href="#">导航2</a></li>

                  <li><a href="#">导航2</a></li>

               </ul>

           </div>

           <div id="main">

               <div id="lside">

                  <div class="subtitle">

                      <img alt="" src="./indexPics/circle.gif">

                      <h1>核心业务</h1>

                      <a href="#">MORE&gt;&gt;</a>

                  </div>

                  <div class="four">

                      <h2>电子商务类网站建设</h2>

                      <img alt="" src="./indexPics/eshop_service.jpg">

                      <ul>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                      </ul>

                  </div>

                  <div class="four">

                      <h2>电子商务类网站建设</h2>

                      <img alt="" src="./indexPics/eshop_service.jpg">

                      <ul>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                      </ul>

                  </div>

                  <div class="four">

                      <h2>电子商务类网站建设</h2>

                      <img alt="" src="./indexPics/eshop_service.jpg">

                      <ul>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                      </ul>

                  </div>

                  <div class="four">

                      <h2>电子商务类网站建设</h2>

                      <img alt="" src="./indexPics/eshop_service.jpg">

                      <ul>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                      </ul>

                  </div>

               </div>

               <div id="rside">

                  <div class="subtitle">

                      <img alt="" src="./indexPics/circle.gif">

                      <h1>文章观点</h1>

                      <a href="#">MORE&gt;&gt;</a>

                  </div>

                  <ul id="article">

                      <li><a href="#">好文章1</a></li>

                      <li><a href="#">好文章1</a></li>

                      <li><a href="#">好文章1</a></li>

                      <li><a href="#">好文章1</a></li>

                      <li><a href="#">好文章1</a></li>

                  </ul>

                  <div class="subtitle">

                      <img alt="" src="./indexPics/circle.gif">

                      <h1>联系我们</h1>

                      <a href="#">MORE&gt;&gt;</a>

                  </div>

                  <div id="contact">

                 

                  </div>

               </div>

           </div>

           <div class="clr"></div>

           <div id="footer"></div>

        </div>

      </body>

    </html>

     

     

    第46课 首页实战之footer区域开发

    css

    @CHARSET "UTF-8";

     

    .clr {

        clear: both;

        width: 0px;

        height: 0px;

    }

     

     

    #container {

        width: 1002px;

        margin: 0 auto;

    }

     

    #header {

        height: 128px;

        background: gray url("../indexPics/top_bg.jpg");

    }

     

    #navi li {

        width: 90px;

        margin-right: 1px;

        float: left;

    }

     

    #navi a {

        font-size: 16px;

        font-family: Microsoft YaHei;

        color: #363636;

        display: block;

        width: 90px;

        height: 37px;

        text-align: center;

    }

    #navi a:HOVER {

        color: white;

        background-image: url("../indexPics/nav_on.gif");

    }

    #banner{

        margin: 5px 0;

    }

    #main {

    }

    #lside {

        height: 480px;

        width: 694px;

        border: 1px solid #eee;

        border-top:none;

        background-color: white;

        float: left;

    }

    .subtitle {

        height: 37px;

        background-image: url("../indexPics/index_main_top_bg.gif");

    }

    .subtitle img {

        margin:5px 0 0 10px;

        float: left;

    }

    .subtitle h1 {

        float: left;

        margin-left:10px;

        font-size: 16px;

        font-family: Microsoft Yahei, SimHei, sans-serif;

    }

    .subtitle a {

        font-size:12px;

        color: gray;

        float: right;

    }

    .four {

        width: 326px;

        height: 200px;

        background-color: #eee;

        float: left;

        margin: 10px;

    }

    .four h2 {

        margin:6px 0 6px 10px;

        font-size: 16px;

        font-family: Microsoft Yahei, SimHei, sans-serif;

    }

    .four img {

        background-color:white;

        float: left;

        margin-left: 10px;

        padding: 6px;

    }

    .four ul {

        float: left;

        margin-left: 10px;

    }

    .four li {

        background-image: url("../indexPics/service_intro_bg.gif");

        background-repeat: no-repeat;

        padding-left:10px;

        height: 20px;

    }

    .four a {

        color: gray;

    }

    .four a:VISITED{

        color: gray;

    }

    .four a:HOVER {

        text-decoration: underline;

    }

    #rside {

        width: 294px;

        float: right;

    }

    #article {

        background: #eee;

        margin-top: 1px;

        padding-top: 10px;

    }

    #article a {

        display: block;

        height: 29px;

        padding-left:30px;

        background-image: url("../indexPics/article_head.gif");

        background-repeat: no-repeat;

    }

    #article a:HOVER {

        background-image: url("../indexPics/article_on_bg.gif");

    }

    #contact {

        margin-top:1px;

        height: 240px;

        background-color: #eee;

    }

     

    #footer {

        margin-top:15px;

        height: 120px;

    }

    #footer ul {

        height: 40px;

        background-color: #eee;

    }

    #footer li {

        float: left;

        margin-top: 15px;

        margin-right: 10px;

    }

    #footer address {

        font-family: Microsoft Yahei, SimHei, sans-serif;

        font-size: 12px;

        margin-top: 12px;

    }

     

    <!DOCTYPE html>

    <html>

      <head>

        <title>首页实战</title>

       

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

        <meta http-equiv="description" content="this is my page">

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       

        <link rel="stylesheet" type="text/css" href="./css/reset.css">

        <link rel="stylesheet" type="text/css" href="./css/index.css">

        <style type="text/css">

          

        </style>

      </head>

     

      <body>

        <div id="container">

           <div id="header">

               <img id="logo" src="./indexPics/logo.jpg" alt="">

               <ul id="navi">

                  <li><a href="#">导航1</a></li>

                  <li><a href="#">导航2</a></li>

                  <li><a href="#">导航2</a></li>

                  <li><a href="#">导航2</a></li>

                  <li><a href="#">导航2</a></li>

                  <li><a href="#">导航2</a></li>

                  <li><a href="#">导航2</a></li>

               </ul>

           </div>

           <img alt="" src="./indexPics/about_banner.jpg" id="banner">

           <div id="main">

               <div id="lside">

                  <div class="subtitle">

                      <img alt="" src="./indexPics/circle.gif">

                      <h1>核心业务</h1>

                      <a href="#">MORE&gt;&gt;</a>

                  </div>

                  <div class="four">

                      <h2>电子商务类网站建设</h2>

                      <img alt="" src="./indexPics/eshop_service.jpg">

                      <ul>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                      </ul>

                  </div>

                  <div class="four">

                      <h2>电子商务类网站建设</h2>

                      <img alt="" src="./indexPics/eshop_service.jpg">

                      <ul>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                      </ul>

                  </div>

                  <div class="four">

                      <h2>电子商务类网站建设</h2>

                      <img alt="" src="./indexPics/eshop_service.jpg">

                      <ul>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                      </ul>

                  </div>

                  <div class="four">

                      <h2>电子商务类网站建设</h2>

                      <img alt="" src="./indexPics/eshop_service.jpg">

                      <ul>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                          <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                      </ul>

                  </div>

               </div>

               <div id="rside">

                  <div class="subtitle">

                      <img alt="" src="./indexPics/circle.gif">

                      <h1>文章观点</h1>

                      <a href="#">MORE&gt;&gt;</a>

                  </div>

                  <ul id="article">

                      <li><a href="#">好文章1</a></li>

                      <li><a href="#">好文章1</a></li>

                      <li><a href="#">好文章1</a></li>

                      <li><a href="#">好文章1</a></li>

                      <li><a href="#">好文章1</a></li>

                  </ul>

                  <div class="subtitle">

                      <img alt="" src="./indexPics/circle.gif">

                      <h1>联系我们</h1>

                      <a href="#">MORE&gt;&gt;</a>

                  </div>

                  <div id="contact">

                 

                  </div>

               </div>

           </div>

            <div class="clr"></div>

           <div id="footer">

               <ul>

                  <li><a href="#">联系我们</a></li>

                  <li><a href="#">联系我们</a></li>

                  <li><a href="#">联系我们</a></li>

                  <li><a href="#">联系我们</a></li>

                  <li><a href="#">联系我们</a></li>

                  <li><a href="#">联系我们</a></li>

                  <li><a href="#">联系我们</a></li>

               </ul>

               <address>&copy; 2009-2016 西安豪氧公司 版权所有 http://www.gigigig.com

               京ICP备123456789号</address>

           </div>

        </div>

      </body>

    </html>

     

     

    第47课 首页实战之色彩微调

    @CHARSET "UTF-8";

     

    .clr {

        clear: both;

        width: 0px;

        height: 0px;

    }

     

     

    #container {

        width: 1002px;

        margin: 0 auto;

    }

     

    #header {

        height: 128px;

        background: gray url("../indexPics/top_bg.jpg");

    }

     

    #navi li {

        width: 90px;

        margin-right: 1px;

        float: left;

    }

     

    #navi a {

        font-size: 16px;

        font-family: Microsoft YaHei;

        color: #363636;

        display: block;

        width: 90px;

        height: 37px;

        text-align: center;

    }

    #navi a:HOVER {

        color: white;

        background-image: url("../indexPics/nav_on.gif");

    }

    #banner{

        margin: 5px 0;

    }

    #main {

    }

    #lside {

        height: 480px;

        width: 694px;

        border: 1px solid #eee;

        border-top:none;

        background-color: white;

        float: left;

    }

    .subtitle {

        height: 37px;

        background-image: url("../indexPics/index_main_top_bg.gif");

    }

    .subtitle img {

        margin:5px 0 0 10px;

        float: left;

    }

    .subtitle h1 {

        float: left;

        margin-left:10px;

        font-size: 16px;

        font-family: Microsoft Yahei, SimHei, sans-serif;

    }

    .subtitle a {

        font-size:12px;

        color: #888;

        float: right;

    }

    .four {

        width: 326px;

        height: 200px;

        background-color: #eee;

        float: left;

        margin: 10px;

    }

    .four h2 {

        color:#a0a0a0;

        margin:6px 0 6px 10px;

        font-size: 16px;

        font-family: Microsoft Yahei, SimHei, sans-serif;

    }

    .four img {

        background-color:white;

        float: left;

        margin-left: 10px;

        padding: 6px;

    }

    .four ul {

        float: left;

        margin-left: 10px;

    }

    .four li {

        background-image: url("../indexPics/service_intro_bg.gif");

        background-repeat: no-repeat;

        padding-left:10px;

        height: 20px;

    }

    .four a {

        color: #888;

    }

    .four a:VISITED{

        color: #808080;

    }

    .four a:HOVER {

        color:#ff832c;

        text-decoration: underline;

    }

    #rside {

        width: 294px;

        float: right;

    }

    #article {

        background: #eee;

        margin-top: 1px;

        padding-top: 10px;

    }

    #article a {

        color:#888;

        display: block;

        height: 29px;

        padding-left:30px;

        background-image: url("../indexPics/article_head.gif");

        background-repeat: no-repeat;

    }

    #article a:HOVER {

        color:#ff832c;

        background-image: url("../indexPics/article_on_bg.gif");

    }

    #contact {

        margin-top:1px;

        height: 240px;

        background-color: #eee;

    }

     

    #footer {

        margin-top:15px;

        height: 120px;

    }

    #footer ul {

        height: 40px;

        background-color: #eee;

    }

    #footer li {

        float: left;

        margin-top: 15px;

        margin-right: 10px;

    }

    #footer a {

        color: #888;

    }

    #footer a:HOVER {

        color:#ff832c;

    }

    #footer address {

        font-family: Microsoft Yahei, SimHei, sans-serif;

        font-size: 12px;

        margin-top: 12px;

    }

     

     

    <!DOCTYPE html>

    <html>

      <head>

        <title>首页实战</title>

       

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

        <meta http-equiv="description" content="this is my page">

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       

        <link rel="stylesheet" type="text/css" href="./css/reset.css">

        <link rel="stylesheet" type="text/css" href="./css/index.css">

        <style type="text/css">

          

        </style>

      </head>

     

      <body>

        <div id="container">

           <div id="header">

               <img id="logo" src="./indexPics/logo.jpg" alt="">

               <ul id="navi">

                  <li><a href="#">导航1</a></li>

                  <li><a href="#">导航2</a></li>

                  <li><a href="#">导航2</a></li>

                  <li><a href="#">导航2</a></li>

                  <li><a href="#">导航2</a></li>

                  <li><a href="#">导航2</a></li>

                  <li><a href="#">导航2</a></li>

               </ul>

           </div>

           <img alt="" src="./indexPics/about_banner.jpg" id="banner">

           <div id="main">

               <div id="lside">

                  <div class="subtitle">

                      <img alt="" src="./indexPics/circle.gif">

                      <h1>核心业务</h1>

                      <a href="#">MORE&gt;&gt;</a>

                  </div>

                  <div class="four">

                      <h2>电子商务类网站建设</h2>

                      <img alt="" src="./indexPics/eshop_service.jpg">

                      <ul>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                      </ul>

                  </div>

                  <div class="four">

                      <h2>电子商务类网站建设</h2>

                      <img alt="" src="./indexPics/eshop_service.jpg">

                      <ul>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                      </ul>

                  </div>

                  <div class="four">

                      <h2>电子商务类网站建设</h2>

                      <img alt="" src="./indexPics/eshop_service.jpg">

                      <ul>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                      </ul>

                  </div>

                  <div class="four">

                      <h2>电子商务类网站建设</h2>

                      <img alt="" src="./indexPics/eshop_service.jpg">

                      <ul>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                      </ul>

                  </div>

               </div>

               <div id="rside">

                  <div class="subtitle">

                      <img alt="" src="./indexPics/circle.gif">

                      <h1>文章观点</h1>

                      <a href="#">MORE&gt;&gt;</a>

                  </div>

                  <ul id="article">

                      <li><a href="#">好文章1</a></li>

                      <li><a href="#">好文章1</a></li>

                      <li><a href="#">好文章1</a></li>

                      <li><a href="#">好文章1</a></li>

                      <li><a href="#">好文章1</a></li>

                  </ul>

                  <div class="subtitle">

                      <img alt="" src="./indexPics/circle.gif">

                      <h1>联系我们</h1>

                      <a href="#">MORE&gt;&gt;</a>

                  </div>

                  <div id="contact">

                 

                  </div>

               </div>

           </div>

           <div class="clr"></div>

           <div id="footer">

               <ul>

                  <li><a href="#">联系我们</a></li>

                  <li><a href="#">联系我们</a></li>

                  <li><a href="#">联系我们</a></li>

                  <li><a href="#">联系我们</a></li>

                  <li><a href="#">联系我们</a></li>

                  <li><a href="#">联系我们</a></li>

                  <li><a href="#">联系我们</a></li>

               </ul>

               <address>&copy; 2009-2016 西安豪氧公司 版权所有 http://www.gigigig.com

               京ICP备123456789号</address>

           </div>

        </div>

      </body>

    </html>

     

     

    第48课 利用行高实现文字居中

    @CHARSET "UTF-8";

     

    .clr {

        clear: both;

        width: 0px;

        height: 0px;

    }

     

     

    #container {

        width: 1002px;

        margin: 0 auto;

    }

     

    #header {

        height: 128px;

        background: gray url("../indexPics/top_bg.jpg");

    }

     

    #navi li {

        width: 90px;

        margin-right: 1px;

        float: left;

    }

     

    #navi a {

        font-size: 16px;

        line-height:37px;

        font-family: Microsoft YaHei;

        color: #363636;

        display: block;

        width: 90px;

        height: 37px;

        text-align: center;

       

    }

    #navi a:HOVER {

        color: white;

        background-image: url("../indexPics/nav_on.gif");

    }

    #banner{

        margin: 5px 0;

    }

    #main {

    }

    #lside {

        height: 480px;

        width: 694px;

        border: 1px solid #eee;

        border-top:none;

        background-color: white;

        float: left;

    }

    .subtitle {

        height: 37px;

        background-image: url("../indexPics/index_main_top_bg.gif");

    }

    .subtitle img {

        margin:5px 0 0 10px;

        float: left;

    }

    .subtitle h1 {

        line-height:37px;

        float: left;

        margin-left:10px;

        font-size: 16px;

        font-family: Microsoft Yahei, SimHei, sans-serif;

    }

    .subtitle a {

        display:block;

        line-height:37px;

        font-family:SimSun, serif;

        font-size:12px;

        color: #888;

        float: right;

    }

    .four {

        width: 326px;

        height: 200px;

        background-color: #eee;

        float: left;

        margin: 10px;

    }

    .four h2 {

        color:#a0a0a0;

        margin:6px 0 6px 10px;

        font-size: 16px;

        font-family: Microsoft Yahei, SimHei, sans-serif;

    }

    .four img {

        background-color:white;

        float: left;

        margin-left: 10px;

        padding: 6px;

    }

    .four ul {

        float: left;

        margin-left: 10px;

    }

    .four li {

        background-image: url("../indexPics/service_intro_bg.gif");

        background-repeat: no-repeat;

        padding-left:10px;

        height: 20px;

    }

    .four a {

        color: #888;

    }

    .four a:VISITED{

        color: #808080;

    }

    .four a:HOVER {

        color:#ff832c;

        text-decoration: underline;

    }

    #rside {

        width: 294px;

        float: right;

    }

    #article {

        background: #eee;

        margin-top: 1px;

        padding-top: 10px;

    }

    #article a {

        color:#888;

        display: block;

        height: 29px;

        line-height:29px;

        padding-left:30px;

        background-image: url("../indexPics/article_head.gif");

        background-repeat: no-repeat;

    }

    #article a:HOVER {

        color:#ff832c;

        background-image: url("../indexPics/article_on_bg.gif");

    }

    #contact {

        margin-top:1px;

        height: 240px;

        background-color: #eee;

    }

     

    #footer {

        margin-top:15px;

        height: 120px;

    }

    #footer ul {

        height: 40px;

        background-color: #eee;

    }

    #footer li {

        float: left;

        margin-top: 15px;

        margin-right: 10px;

    }

    #footer a {

        color: #888;

    }

    #footer a:HOVER {

        color:#ff832c;

    }

    #footer address {

        font-family: Microsoft Yahei, SimHei, sans-serif;

        font-size: 12px;

        margin-top: 12px;

    }

     

    <!DOCTYPE html>

    <html>

      <head>

        <title>首页实战</title>

       

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

        <meta http-equiv="description" content="this is my page">

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       

        <link rel="stylesheet" type="text/css" href="./css/reset.css">

        <link rel="stylesheet" type="text/css" href="./css/index.css">

        <style type="text/css">

          

        </style>

      </head>

     

      <body>

        <div id="container">

           <div id="header">

               <img id="logo" src="./indexPics/logo.jpg" alt="">

               <ul id="navi">

                  <li><a href="#">导航1</a></li>

                  <li><a href="#">导航2</a></li>

                  <li><a href="#">导航2</a></li>

                  <li><a href="#">导航2</a></li>

                  <li><a href="#">导航2</a></li>

                  <li><a href="#">导航2</a></li>

                  <li><a href="#">导航2</a></li>

               </ul>

           </div>

           <img alt="" src="./indexPics/about_banner.jpg" id="banner">

           <div id="main">

               <div id="lside">

                  <div class="subtitle">

                      <img alt="" src="./indexPics/circle.gif">

                      <h1>核心业务</h1>

                      <a href="#">MORE&gt;&gt;</a>

                  </div>

                  <div class="four">

                      <h2>电子商务类网站建设</h2>

                      <img alt="" src="./indexPics/eshop_service.jpg">

                      <ul>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                      </ul>

                  </div>

                  <div class="four">

                      <h2>电子商务类网站建设</h2>

                      <img alt="" src="./indexPics/eshop_service.jpg">

                      <ul>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                      </ul>

                  </div>

                  <div class="four">

                      <h2>电子商务类网站建设</h2>

                      <img alt="" src="./indexPics/eshop_service.jpg">

                      <ul>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                      </ul>

                  </div>

                  <div class="four">

                      <h2>电子商务类网站建设</h2>

                      <img alt="" src="./indexPics/eshop_service.jpg">

                      <ul>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                      </ul>

                  </div>

               </div>

               <div id="rside">

                  <div class="subtitle">

                      <img alt="" src="./indexPics/circle.gif">

                      <h1>文章观点</h1>

                      <a href="#">MORE&gt;&gt;</a>

                  </div>

                  <ul id="article">

                      <li><a href="#">好文章1</a></li>

                      <li><a href="#">好文章1</a></li>

                      <li><a href="#">好文章1</a></li>

                      <li><a href="#">好文章1</a></li>

                      <li><a href="#">好文章1</a></li>

                  </ul>

                  <div class="subtitle">

                      <img alt="" src="./indexPics/circle.gif">

                      <h1>联系我们</h1>

                      <a href="#">MORE&gt;&gt;</a>

                  </div>

                  <div id="contact">

                 

                  </div>

               </div>

           </div>

           <div class="clr"></div>

           <div id="footer">

               <ul>

                  <li><a href="#">联系我们</a></li>

                  <li><a href="#">联系我们</a></li>

                  <li><a href="#">联系我们</a></li>

                  <li><a href="#">联系我们</a></li>

                  <li><a href="#">联系我们</a></li>

                  <li><a href="#">联系我们</a></li>

                  <li><a href="#">联系我们</a></li>

               </ul>

               <address>&copy; 2009-2016 西安豪氧公司 版权所有 http://www.gigigig.com

               京ICP备123456789号</address>

           </div>

        </div>

      </body>

    </html>

     

     

    第49课 IE浏览器兼容

    主要是字体大小的问题

     

     

    bug的几种常见原因:

    1 没有正确使用doctype,解决方案正确声明即可

    2 个浏览器对不同标签的初始值不同,解决方案 css初始化

    3 自身书写不规范,写规范即可

    4 浏览器bug

     

    IE下真正的bug

    1 盒模型bug,解决方案使用严格doctype声明

    2 双倍margin bug,解决方案:    _display:inline此时只影响IE浏览器, 左浮元素,左margin是定义的2倍

    3 不认识a:link,解决方案只定义a

    4 3像素margin bug,解决方案规范浮动与清楚浮动

     

    最终代码:

    <!DOCTYPE html>

    <html>

      <head>

        <title>首页实战</title>

       

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

        <meta http-equiv="description" content="this is my page">

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       

        <link rel="stylesheet" type="text/css" href="./css/reset.css">

        <link rel="stylesheet" type="text/css" href="./css/index.css">

        <style type="text/css">

          

        </style>

      </head>

     

      <body>

        <div id="container">

           <div id="header">

               <img id="logo" src="./indexPics/logo.jpg" alt="">

               <ul id="navi">

                  <li><a href="#">导航1</a></li>

                  <li><a href="#">导航2</a></li>

                  <li><a href="#">导航2</a></li>

                  <li><a href="#">导航2</a></li>

                  <li><a href="#">导航2</a></li>

                  <li><a href="#">导航2</a></li>

                  <li><a href="#">导航2</a></li>

               </ul>

           </div>

           <img alt="" src="./indexPics/about_banner.jpg" id="banner">

           <div id="main">

               <div id="lside">

                  <div class="subtitle">

                      <img alt="" src="./indexPics/circle.gif">

                      <h1>核心业务</h1>

                      <a href="#">MORE&gt;&gt;</a>

                  </div>

                  <div class="four">

                      <h2>电子商务类网站建设</h2>

                      <img alt="" src="./indexPics/eshop_service.jpg">

                      <ul>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                      </ul>

                  </div>

                  <div class="four">

                      <h2>电子商务类网站建设</h2>

                      <img alt="" src="./indexPics/eshop_service.jpg">

                      <ul>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                      </ul>

                  </div>

                  <div class="four">

                      <h2>电子商务类网站建设</h2>

                      <img alt="" src="./indexPics/eshop_service.jpg">

                      <ul>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                      </ul>

                  </div>

                  <div class="four">

                      <h2>电子商务类网站建设</h2>

                      <img alt="" src="./indexPics/eshop_service.jpg">

                      <ul>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                         <li><a href="#">方便的订单管理</a></li>

                      </ul>

                  </div>

               </div>

               <div id="rside">

                  <div class="subtitle">

                      <img alt="" src="./indexPics/circle.gif">

                      <h1>文章观点</h1>

                      <a href="#">MORE&gt;&gt;</a>

                  </div>

                  <ul id="article">

                      <li><a href="#">好文章1</a></li>

                      <li><a href="#">好文章1</a></li>

                      <li><a href="#">好文章1</a></li>

                      <li><a href="#">好文章1</a></li>

                      <li><a href="#">好文章1</a></li>

                  </ul>

                  <div class="subtitle">

                      <img alt="" src="./indexPics/circle.gif">

                      <h1>联系我们</h1>

                      <a href="#">MORE&gt;&gt;</a>

                  </div>

                  <div id="contact">

                 

                  </div>

               </div>

           </div>

           <div class="clr"></div>

           <div id="footer">

               <ul>

                  <li><a href="#">联系我们</a></li>

                  <li><a href="#">联系我们</a></li>

                  <li><a href="#">联系我们</a></li>

                  <li><a href="#">联系我们</a></li>

                  <li><a href="#">联系我们</a></li>

                  <li><a href="#">联系我们</a></li>

                  <li><a href="#">联系我们</a></li>

               </ul>

               <address>&copy; 2009-2016 西安豪氧公司 版权所有 http://www.gigigig.com

               京ICP备123456789号</address>

           </div>

        </div>

      </body>

    </html>

     

    @CHARSET "UTF-8";

     

    .clr {

        clear: both;

        width: 0px;

        height: 0px;

    }

     

     

    #container {

        width: 1002px;

        margin: 0 auto;

    }

     

    #header {

        height: 128px;

        background: gray url("../indexPics/top_bg.jpg");

    }

     

    #navi li {

        width: 90px;

        margin-right: 1px;

        float: left;

    }

     

    #navi a {

        font-size: 16px;

        line-height:37px;

        font-family: Microsoft YaHei;

        color: #363636;

        display: block;

        width: 90px;

        height: 37px;

        text-align: center;

       

    }

    #navi a:HOVER {

        color: white;

        background-image: url("../indexPics/nav_on.gif");

    }

    #banner{

        margin: 5px 0;

    }

    #main {

    }

    #lside {

        height: 480px;

        width: 694px;

        border: 1px solid #eee;

        border-top:none;

        background-color: white;

        float: left;

    }

    .subtitle {

        height: 37px;

        background-image: url("../indexPics/index_main_top_bg.gif");

    }

    .subtitle img {

        margin:5px 0 0 10px;

        float: left;

    }

    .subtitle h1 {

        color:#151515;

        line-height:37px;

        float: left;

        margin-left:10px;

        font-size: 16px;

        font-family: Microsoft Yahei, SimHei, sans-serif;

    }

    .subtitle a {

        display:block;

        line-height:37px;

        font-family:SimSun, serif;

        font-size:12px;

        color: #888;

        float: right;

    }

    .four {

        width: 326px;

        height: 200px;

        background-color: #eee;

        float: left;

        margin: 10px;

    }

    .four h2 {

        color:#a0a0a0;

        margin:6px 0 6px 10px;

        font-size: 16px;

        font-family: Microsoft Yahei, SimHei, sans-serif;

    }

    .four img {

        background-color:white;

        float: left;

        margin-left: 10px;

        padding: 6px;

    }

    .four ul {

        float: left;

        margin-left: 10px;

    }

    .four li {

        background-image: url("../indexPics/service_intro_bg.gif");

        background-repeat: no-repeat;

        padding-left:10px;

        height: 20px;

    }

    .four a {

        font-size:12px;

        color: #888;

    }

    .four a:VISITED{

        color: #808080;

    }

    .four a:HOVER {

        color:#ff832c;

        text-decoration: underline;

    }

    #rside {

        width: 294px;

        float: right;

    }

    #article {

        background: #eee;

        margin-top: 1px;

        padding-top: 10px;

    }

    #article a {

        color:#888;

        display: block;

        height: 29px;

        line-height:29px;

        font-size:12px;

        padding-left:30px;

        background-image: url("../indexPics/article_head.gif");

        background-repeat: no-repeat;

    }

    #article a:HOVER {

        color:#ff832c;

        background-image: url("../indexPics/article_on_bg.gif");

    }

    #contact {

        margin-top:1px;

        height: 240px;

        background-color: #eee;

    }

     

    #footer {

        margin-top:15px;

        height: 120px;

    }

    #footer ul {

        height: 40px;

        background-color: #eee;

    }

    #footer li {

        font-size:12px;

        float: left;

        margin-top: 15px;

        margin-right: 10px;

    }

    #footer a {

        color: #888;

    }

    #footer a:HOVER {

        color:#ff832c;

    }

    #footer address {

        font-family: Microsoft Yahei, SimHei, sans-serif;

        font-size: 12px;

        margin-top: 12px;

    }

    第六章 附录

    第50课 色彩的表示

    第51课 尺寸的表示

    像素表示

    百分比表示:占父元素的百分比

     

    <!DOCTYPE html>

    <html>

      <head>

        <title>study51.html</title>

       

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

        <meta http-equiv="description" content="this is my page">

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       

        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

     

        <style type="text/css">

           #parent {

               font-size: 10px;

           }

           #p1 {

               font-size: 20px;

           }

           #p2 {

               font-size: 1.5em;

           }

        </style>

      </head>

     

      <body>

        <div id="parent">

            父div

            <p id="p1">我用px表示文字大小</p>

            <p id="p2">我用em表示文字大小,em是相对大小,是指其父元素中的1个"M"的大小,简单理解为父元素的font-size就是一个emd单位</p>

        </div>

      </body>

    </html>

     

     

     

    ex (x-height,字母 "x" 的高度)
    cm (
    厘米,1厘米=10毫米)
    mm (
    )
    pt (
    点,1=1/72英寸)

    pc(12点活字,1pc=12)

     

     

    CSS中的单位有9种,他们是百分比(%)、英寸(in)、厘米(cm)、毫米(mm)、磅数(pt)、12点活字(pc)、字母高度一半(ex)、字体高度(em)和像素(px)。  网页制作时最常用的四个尺寸单位是:px、%、em、pt,但在使用时也需要根据不同的情况进行选择。  比如字体的大小经常使用px、em和pt,元素的宽度经常使用%、px、em。

     

    第52课 CSS画圆角

    <!DOCTYPE html>

    <html>

      <head>

        <title>study52.html</title>

       

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

        <meta http-equiv="description" content="this is my page">

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       

        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

       

        <style type="text/css">

           #test1 {

               width:300px;

               height:300px;

               border:1px solid blue;

               border-radius:15px;

           }

           #test2 {

               width:300px;

               height:300px;

               border:1px solid red;

               border-radius:150px;

           }

        </style>

       

      </head>

     

      <body>

        <div id="test1">CSS画圆角,目前的主流浏览器都已经支持</div>

       <div id="test2">CSS画一个圆</div>

      </body>

    </html>

     

     

    第53课 相对定位与绝对定位

    <!DOCTYPE html>

    <html>

      <head>

        <title>study53.html</title>

       

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

        <meta http-equiv="description" content="this is my page">

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       

        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

        <style type="text/css">

           #test1 {

               width: 300px;

               height: 300px;

               background-color: green;

           }

           p {

               margin: 0;

               padding: 0;

           }

           #p1 {

               width: 100px;

               height: 100px;

               background-color: gray;

               position: relative;

               /* top: 20px;

               left: 20px; */

               right: 20px;

               bottom: 20px;

           }

           #p2 {

               width: 100px;

               height: 100px;

               background-color: orange;

           }

           #test2 {

               width: 300px;

               height: 300px;

               background-color: pink;

               position: relative;

           }

           #p3 {

               width: 100px;

               height: 100px;

               background-color: yellow;

               position: absolute;

               right:20px;

               bottom: 30px;

               z-index: 1000;

           }

           #p4 {

               width: 100px;

               height: 100px;

               background-color: gray;

               position: absolute;

               right:30px;

               bottom: 40px;

           }

        </style>

      </head>

     

      <body>

        <div id="test1">

            <p id="p1">我是p1,相对定位是指元素在其正常的位置,偏移某些像素</p>

            <p id="p2">我是p2,相对定位是指元素在其正常的位置,偏移某些像素</p>

        </div>

        <div id="test2">

            用绝对定位时,父元素要求有position属性才行,否则将依据父的父,父的父的父……body,<br>

            哪个祖先有position就相对哪个,否则相对body

            <p id="p3">我是p3,绝对定位是指相对于父元素的top,right,bottom,left来定位</p>

            <p id="p4">我是p4</p>

        </div>

      </body>

    </html>

     

     

     

    第54课 overflow溢出处理

     

    overflow 属性规定当内容溢出元素框时发生的事情。

     

    visible 默认值。内容不会被修剪,会呈现在元素框之外。

    hidden 内容会被修剪,并且其余内容是不可见的。

    scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。

    auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

    inherit 规定应该从父元素继承overflow 属性的值。

     

    清楚浮动的方法:1. 使用空div,这只其div

    css{clear:both;}。

    2.通过:after伪类来清理浮动,淘宝、腾讯使用的清除浮动的代码:

    .allCon {}.allCon:after {    clear: both;    content: ".";    display: block;    height: 0;    visibility: hidden;}

     

    <!DOCTYPE html>

    <html>

    <head>

    <title>study54.html</title>

     

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

     

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

    <style type="text/css">

    div {

        width: 200px;

        height: 200px;

        border: 1px solid blue;

        overflow: auto;

    }

     

    p {

        border: 1px solid red;

    }

    </style>

    </head>

     

    <body>

        <div id="">

           <p>内容很多,会不会溢出越过山和大海前端是近几年发展起来的职业,很多人对前端的认识比较模糊,因此开篇我有必要介绍一番,前端(这里的前端是大众口中的前端)偏美工是视觉设计,前端偏用户是用户体验,前端偏目标导向是交互设计,前端偏技术才是大家口中的前端。和前端有关系的几样技术:PS,DW,FL,HTML+CSS+JS,看过很多人给前端的建议也差不多是学习这几种软件和HTML+CSS+JS等等了,不过我却觉得大家在把前端往一个误区引导。为什么呢?听我慢慢解释。

               先来说说和前端有联系的几个职位:前端工程师、视觉设计师、用户研究工程师、交互设计师。我用一个简单的例子来分析:我们都经常在一些社区评论留言,留言的表面过程:打开留言页面——输入留言内容——点击提交按钮——留言显示在留言列表上。我这里不解释这个过程的实现原理。

     

               ---2012年10月12日修改--- 前端工程师:留言框代码怎么写?留言框的显示、一些JS动态效果的显示(可能涉及异步请求)。

               视觉设计师:什么样的留言框最漂亮?怎么布局?用什么色彩还是需要做一些纹理?

               用户研究工程师:用户怎么留言最舒服?很多人可能会和用户体验师混淆在一起,其实这两种人有着本质的区别,用户研究更侧重的是方法论,注重问卷调查访谈等等行为来了解用户的潜在行为习惯,而用户体验是一种行为,更侧重的是体验之后的实际感受。

               交互设计师:留言过程中的反馈?输入错误后的提示,留言成功后的反馈等等。交互设计可以理解为人机对话,交互设计侧重和用户交流之后,引导用户有效操作,比如鼠标放在超链接上字体变颜色,有title提示,用户点击超链接,我们就可以称这次交互是成功的,因此交互设计的重点在于目标向导。

     

               ---修改结束---

     

               这些分工十分细微,如果留言本是一个项目的话,需要从几个不同的角度来分析留言框,一个大型的项目比如社交网站、门户网站、行业网站这些职位都必须明确分工才能把整个项目做好,但是实际上即使条理清晰在项目开展过程中还会出现诸多意想不到的问题,什么问题呢?不在本文讨论范畴。回到话题,现在你还认为你理解意义上的前端是前端吗?我以前以为前端是美工,但是后来我发现很多前端博客都在研究一个技术JS的各大框架,我更加确定前端并不是我理解意义上的前端,我更喜欢视觉设计,但是我依旧也是一个前端,所以前端是模糊的,甚至包括了一切。

               前端没什么不好

               如果你觉得前端没有前(钱)途,那我劝你干别的行业吧,如果你确定你喜欢前端,那就听听我的一些看法,当然也纯属主观臆断,你可以拍砖。逛过一些前端博客,大部分文章都是在分享JS的几大框架技术,Jquery占很多数,那其他框架呢?所以我也有个疑问,前端难道就是JS吗?最后我的答案:是的,如果你想成为纯粹意义上的前端,JS很大部分上代表了前端。

               程序员眼中的前端(后端程序员和前端工程师的不同)

               真正意义上学习编程是在大学的时候,那时候我的一个师长,他现在是Java工程师,他给我的建议是HTML+CSS随便玩玩就好了,我不太认同他的观点还是玩了很久,我并没有停留在HTML上,而是了解了更多技术,HTML是很多技术人都不耻的语言,甚至在一些人看来HTML连编程语言都不是,这个我在大学招新时候很有感触,他们觉得HTML不值钱又是小儿科的东西,连PHP他们都觉得2个小时就能上手,那HTML他们不用看就懂了,甚至在一些无知的人看来网站开发不算真正意义上的程序,因此也就不是程序员了,因为他们的眼中只有C/C++,很多前人的建议也是学编程从C开始学起,我现在再来看这种回答,真好笑,无知的人在骗无知的人罢了。尤其再看看那些人在做着二级、三级试卷,我当时就想说哥们儿你醒醒吧,但是我还是忍住了,因为他跟我无关。所以不要以程序员的思维来看待前端,前端是快乐的,不是挑战各种技术。前端的出发点也是用户(体验等等),程序员是以电脑为核心(算法等等)。千万要记住前端是以用户为出发点的,而在很多公司面试前端工程师时,只考察了前端工程师的编程技巧。

               如果你确定你想做一个优秀的前端,我的个人建议: 首先,了解HTTP协议(HTTP

               1.1),玩弄各大浏览器于鼓掌之中,你是前端工程师不要跟我说你只知道IE核心的浏览器。IE系列,FirefoxChrome,Opera,Safari都应该是你平时常用的浏览器,我经常使用chrome,其中elements,Resources,Network,Script,....这些你了解多少?还是你从来都不知道?那赶紧去了解吧。

               其次,非常熟悉HTML+CSS+JS。我把学习技术放到了第二位,因为你必须首先了解整个网络,你才会更快捷和全面的了解前端技术。

               之前说过很多技术人都不耻学HTML,那我来解释为什么要先学HTML?

               先和大家一起梳理各类编程语言,大致分为了六大类:网页语言、解析型语言、混合型语言、编译型语言、汇编语言和机器语言,依次越来越苦逼,无论从用户还是开发者角度看待,越深入越不能让人理解,用户体验越差,当然开发者也是用户,所以也就能理解为什么会有PHP、Python,Ruby之类的解释型语言了。

               如果你只想学习好前端技术的话,只需要了解前两层的东西,也就是网页语言和解析型语言,网页语言HTML,解析型语言PHP,Python,Ruby至少要学会一种。如果你有更多的精力,你可以跳到更高层次,学习混合型语言C#或者Java,对于编译型语言C和C++如果你想做好前端工作,你可以不用懂得的。

               为什么前端工程师需要了解这些编程语言呢?

               一个WEB项目需要三种人:项目经理、前端工程师和后端程序员,他们之间需要沟通,不懂得如何沟通?如何说服?懂得能让项目进展的更顺利一些。我们回到刚才的例子——留言本,过程可以参照PHP的CGI(请求和响应等等),如果你不懂或者还是很模糊的话,我认为你还不是一个合格的前端工程师,当然你可以说你更偏向于视觉设计、用户体验之类的了。我的这种说法并不绝对,甚至如果你觉得你需要鼓励才能进步?那不好意思了,我只知道这是残酷的招聘法则,你可以去看看各公司对招聘前端的要求。

               最后HTML5很重要,就犹如空气,看似不存在,好似不重要,但是缺少了空气,人类就无法生存,所以HTML是根本。

               再次,艺术品的欣赏能力。PS、切图等等这些只是工具,工具只要经常用就会的,但是欣赏能力,或者只能说是天生的了,但是也要多培养自己的艺术欣赏能力,或者说让自己时髦起来。学会欣赏学会鉴别,其他的不多说了。

               最后,关注前端们都在做什么?国外的我不推荐,我觉得国外的天空没那么蔚蓝。腾讯、新浪、淘宝、网易、百度……很多公司都有前端体验中心,他们的前端博客你知道不?他们在干什么?这些你了解吗,去了解他们在干什么吧,慢慢你就能培养出你的前端嗅觉了。

               学会思考,自己去辨别真伪,每个人都有自己的体验,本篇文章纯属一家之言,主观臆断的说法,你可以参考并自己去验证,这也是前端工程师需要学会的东西。</p>

        </div>

        <div></div>

    </body>

    </html>

     

     

    第55课 表单

    <!DOCTYPE html>

    <html>

      <head>

        <title>study55.html</title>

       

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

        <meta http-equiv="description" content="this is my page">

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       

        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

     

      </head>

     

      <body>

        <div>

            在用户注册,在线报名等场合时<br>

            需要把用户的信息,填写并提交,这时要用到表单来收集用户的信息

        </div>

        <form action="http://baidu.com" method="post">

            <p>

               用户名:<input type="text" name="username" value="lisi">

            </p>

            <p>

               密码:<input type="password" name="password">

            </p>

            <p>

               性别:男<input type="radio" name="gender" value="male" checked="checked">

                   女<input type="radio" name="gender" value="female">

            </p>

            <p>

               爱好:篮球<input type="checkbox" name="hobby" value="basketball">

               足球<input type="checkbox" name="hobby" value="football">

               乒乓球<input type="checkbox" name="hobby" value="pingpang">

               游泳<input type="checkbox" name="hobby" value="swimming" checked="checked">

            </p>

            <p>

               <select name="xueli">

                   <option value="university">大学</option>

                   <option value="shighSchool" selected="selected">高中</option>

                   <option value="jhighSchool">初中</option>

               </select>

            </p>

            <p>

               <textarea rows="" cols="" name="intro">nimanaoiabkjgslfdghfdlskjghsld</textarea>

            </p>

            <p>

               上传头像:<input type="file" name="pic">

            </p>

            <p>

               隐藏域:<input type="hidden" name="IP" value="192.168.1.100">

            </p>

            <p>

               <input type="submit" value="提交">

            </p>

        </form>

      </body>

    </html>

     

     

    第56课 框架集

    Element (frameset) is obsolete. Its use isdiscouraged in HTML5 documents.

     

    第57课 结课作业

    <!DOCTYPE html>

    <html>

      <head>

        <title>study57.html</title>

       

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

        <meta http-equiv="description" content="this is my page">

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

       

        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

     

      </head>

     

      <body>

        <pre>

            作业提交:论坛

            有疑问:论坛

            结课实习作业--做一个仿照京东商城主页。

            做出首页,栏目页,商品页

        </pre>

      </body>

    </html>

     

     

    展开全文
  • 完整版,详细,前端学习的宝典.内容包括HTML,CSS,JAVASCRIPT的内容,讲解详细易懂,掌握其中的原理
  • html中“↵”换行符号处理

    千次阅读 2019-04-19 14:43:56
    var myString = myString.replace(/(\r\n|\n|\r)/gm, "<br />");
  • HTML代码中{ % % }

    万次阅读 2018-07-30 00:21:04
    1. HTML代码中&lt;%%&gt;,&lt;%=%&gt;,&lt;%:%&gt;各是什么意思?分享用来实现什么的?  运行,获取后台代码或值。  &lt;%%&gt;之间可以写服务器端代码,如 : &lt;...
  • html

    2020-03-12 13:04:07
    HTML 概念:是最基础的网页开发语言 Hyper Text Markup Language 超文本标记语言 超文本: 超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本. 标记语言: 由标签构成的语言。<标签名称> ...
  • import sun.misc.BASE64Encoder; import java.io.File; import java.io.FileInputStream; import java.io.IOException;... * @Description: 根据图片或音频地址转换为base64编码字符串(直接在html中使用...
  • HTML 常用特殊符号

    千次阅读 2019-02-11 15:06:24
    HTML CODE HTML ENTITY CSS CODE Left Arrow ← U+02190 &amp;#x2190; &amp;#8592; &amp;larr; \2190 Up Arrow ↑ U+02191 &amp;#x2191;...
  • html5中页面拨打电话的方式

    万次阅读 2013-12-23 22:49:13
    拨号  发短信
  • html 标签内背景图片自适应div大小

    万次阅读 2017-10-29 14:43:56
    只需通过css设置background-size属性为contain,即 background-size:contain 注意:一定要在先设置background之后再设置background-size属性,这样才有效
  • html中如何设置背景和背景颜色的透明度
  • html的单选框和复选框

    万次阅读 2018-12-11 11:10:59
    DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;!-- 单选框 --&gt; &lt;div&...
  • html禁止手机页面放大缩小

    万次阅读 2014-07-01 14:51:02
    meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  • html背景图片自适应窗口大小

    万次阅读 多人点赞 2019-05-06 19:14:05
    html 图片自适应窗口大小 background-size:cover 会把图片拉伸至足够大,但是背景图片有些部分可能显示不全 #bgImg { height: 100%; width: 100%; background: url('../img/bg/snow.jpg') no-repeat; background...
1 2 3 4 5 ... 20
收藏数 9,473,423
精华内容 3,789,369
关键字:

html