网页代码 录播

8tFHps___GSz3zP 02.复合选择器 / V10 网页电商代码

 交集选择器 p.tesu{ } 是个P标签，同时身上也有.tesu这个属性 

*{margin: 0; padding:0;}

后代选择器(descendant selector) 

后代选择器 descendant selector   

ul li{}      ul的后代li 

ul li a{}   ul的孙子a

ctrl+T  环绕标签操作  

  分组选择器  ul,li,a{    }

8tFHps___GSz3zP 04.CSS基础属性 / V10 网页电商代码

 P  H   strong  diving  b加粗   u加下划线   em  强调语义的标签  

<style  type="text/css"  > 

            h1{font-size: 60px; color:#36c;}

             p{color:#63c; font-size:30px; color:#00ff;}

</style>

选择器  { 属性1：属性值1；属性2：属性值；}

文字属性 font-size    color   font-family 

辅助属性  首行缩进 text-indent  : 2em;

                line-height:100; 

8tFHps___GSz3zP 01.列表 / V10 网页电商代码

 <ol style="list-style:none">  

       <li><li>

       <li><li>

 <ol> 有序列表

<ul style="list-style:none">   

<li><li>

<li><li>

</ul> 无序列表

<dl>

  <dt></dt>

 <dd></dd>

 <dt></dt>

 <dd></dd>

</dl>定义列表

8tFHps___GSz3zP 09.综合案例 / V10 网页电商代码

图片属性标签 <img src="      "   title="haokan">

父子关系 同辈关系 包含关系

<ul>  

       <li></li>

</ul> 列表 

<h1>.</h1>

 &nbsp 空格

shift+7 打出符号   <hr />  pragraph 

8tFHps___GSz3zP 07-锚点链接 / V10 网页电商代码

瞄点链接 

 <a hre="#down ">我想去下面看看</a> 

 <p id="down">快来这里看看</p >

<p id="top">我是顶部</p>

<a hre="#top">回到顶部<a>

Ctrl+alt+i  插入图片 

8tFHps___GSz3zP 06.超链接 / V10 网页电商代码

超级链接的属性语法

<a ></a>

<a href="页面1.html">去页面1</a> 

打开新窗口

<a target="_blank"  href="页面1.html">去页面1</a>

title="提示信息"  

 k="value"  

内部跳转

<a href="   .html">我想打开上一节内容</a>

8tFHps___GSz3zP 05.标签转换 / V10 网页电商代码

盒子标签  大盒子div    小盒子span  三属性 width  height  background

<style type="text-css">

            div{  width:300px; height:300px; background: red;}

            span{width:300px; height:300px; background: red; }

</style>

    div     块级元素

display:inline   把块级元素转换为行内元素

span      行内元素 

display:block   把行内元素换为块级元素

diaplay:inline-block    行内块 行内二相性 

块元素  div  p  h ul  li  dl  dd  dt   能够设置width height padding border margin line-height    

行内元素 span a b i u em strong  

行内快 img 

转换  diaplay:inline    diapplay:block  diaplay:inlne-block 

8tFHps___GSz3zP 01.CSS基础选择器 / V10 网页电商代码

标签选择器 前面是标签来命名 P{  }  h1-h6{} span{  }   div{  } 

类选择器  用  .   后面跟26个英文字母 尽量用小写  . box{}    .test{}  

调用规则  用class来调用 

<div class="box"></div>

<div  class="test"></div> 

id选择器 用（#）后面跟26个英文字母 尽量小写 

列如：#box{}

调用规则 用 id 来调用

<div  id="box"></div> 

全局选择器 通配符的作用

*{   }

8tFHps___GSz3zP 07.综合案例 / V10 网页电商代码

1 先拖image  css img js  html   

inline-block;  text-align:right;

8tFHps___GSz3zP 06.样式表的写法 / V10 网页电商代码

样式表的写法  

行内式 <div style="color:orange;font-size:50px;">我是盒子 </div>

内嵌式  <style type="text-css"></style>

吴佳宇 01.上网的原理（有素材下载） / V10 网页电商代码

DW：学习代码的含义

现状

1做可行性设计

2使沟通更轻松

3缩短开发时间

4设计更加市场化

平时我们是这么上网的？

系统为我们打开一个临时文件夹 

绿色表是交互软件

上网的原理

上网就是请求数据，并且请求的不是一个数据，而是页面上的所有图片，css,js,flash等相关资源

用户电脑---虚拟服务器

虚拟服务器-----用户电脑

8tFHps___GSz3zP 03.基础表单 / V10 网页电商代码

表头 <caption> 汽车厂商人气排行</caption>

rowspan="2" 竖向合并

colspan="3"横向合并

 border-collapse  

cellpading="" 表格边框到内容的距离

bordercolor="yellow" 

基础表单   登录注册窗口怎么做的？

<form  action=""  method=""post>

      <input type="text"/> 单行文本框

     <input type="password"/>密码输入框

   <input type="submit" value="登录"

     <input type="button" value="默认显示文字"/>（注册）

<button></buton>  按钮另一种写法

</form>  

选项卡

<input type="radio"  name="属性规定表单的名称" />  单选  

<select></select>

<input type="checkbox" />xigua

<input type="reset" /   value="复位">

8tFHps___GSz3zP 02-表格 / V10 网页电商代码

行=摇头  列=低头 

<table border="1"  align="center" style="border-collapse:collapse"> 边框塌陷

       <tr align="center">

                 <td></td>

        </tr>

</table>

ctrl+alt+t  制作表格快捷键   粗线表头  td 改成 th 

拆分 

8tFHps___GSz3zP 08-相对路径和绝对路径 / V10 网页电商代码

 A B C D E F G H  文件 Ctrl+Alt+i  调出图片 

(框架   交互    图片  样式)是同一个文件夹里面

文件夹1   文件夹2    文件夹3 

../              ../            index.html

不知道取什么名字 01.上网的原理（有素材下载） / V10 网页电商代码

误人子弟的东西 07-锚点链接 / V10 网页电商代码

24何岱林 02.浏览器介绍 / V10 网页电商代码

浏览器：ie 360 百度

火狐

webkit    blin

24何岱林 01.上网的原理（有素材下载） / V10 网页电商代码

代码：

意义：1 可行性设计

2 沟通方便

3 缩短开发时间

4 设计市场化

04吕 01.认识三大流派_edit / V10 网页电商代码

杨松波 03-HTML及软件介绍 / V10 网页电商代码

最新版本HTML5；

课程学习版本HTML4.01