about Us html DOCTYPE html html langen head
页面整体结构 about. Us. html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>关于我� </title> </head> <body bgcolor="blue" background="img/bg. jpg" > <!--以下是site. Nav部分代� --> <div id="site. Nav" >site. Nav部分</div> <!--以下是header��部分代� --> <div id="header" style="background: #ccc; ">��部分 </div> <!--以下是content内容部分代� --> <div id="content" style="background: #fff; "> </div> 以about. Us. html为例，我们来分析一下怎么样去划分 一个页面呢？ 从这两张图我们可以清晰的看到这个页面被划分为 site. Nav、header、content、footer四部分以及他对应 的代码结构布局。 <!--以下是footer�脚部分代� --> <div id="footer" style="background: #ccc; ">�脚部分</div> </body> </html>
4. 运用div定义结构 div元素定义HTML文档中的一个分隔区块或者一个区域部分。犹如一个容器，可以将HTML其 他元素嵌套在div元素中，从而达到结构化页面的目的。 它是双标记标签，使用id属性定义了div的唯一ID名，style属性可以定义它的行内样式。 5. HTML 5 语义元素 <header> <nav> <section> <article> <aside> <footer> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>关于我们</title> </head> <body bgcolor="blue" background="img/bg. jpg" > <nav>site. Nav部分</nav> <header style="background: #ccc; "> </header> <section style="background: #fff; "> </section> <footer style="background: #ccc; "> </footer> </body> </html>
html 5新标签为图片添加标题 figure标签来标记文档中的一个图像，采用figcaption标签说明图片的标题。 <figure> <img src="img/register 1. jpg" alt=" 用户注册按钮位置" title="用户注册1" width="1138 px" > <figcaption>图 1 -用户注册按钮</figcaption> </figure> figure标签里包含img与figcaption标签。 figcaption标签放置图片标题。
<thead>、<tbody>、<tfoot>表格分区
用户登录表单 表单主要用于采集用户数据，并将数据传送到服务器，用于前后端交互的 具。 <form action="" method="post"> <fieldset > <legend>用户登录表单</legend> <label> 用户名： <input type="text" id="user. Name" placeholder="请输入用户名" > </label> <br/> <label> 密 码： <input type="password" id="user. Password" > </label> <br/> <input type="submit" value="提交" id="submit. Btn"> </fieldset> </form> 1. 表单的结构<form>标签是所有表单控件的基本容器，它的结构如下： <form action="URL" method="get|post"> <!--表单控件--> </form>
HTML 5 Canvas step 1: 创建一个画布（Canvas） <canvas id="my. Canvas" width="200" height="100" style="border: 1 px solid #000000; "></canvas> step 2: 绘制线条 move. To(x, y) 定义线条开始坐标 line. To(x, y) 定义线条结束坐标 var c=document. get. Element. By. Id("my. Canvas"); var ctx=c. get. Context("2 d"); ctx. move. To(0, 0); ctx. line. To(200, 100); ctx. stroke(); step 3: 绘制圆形arc(x, y, r, start, stop) var c=document. get. Element. By. Id("my. Canvas"); var ctx=c. get. Context("2 d"); ctx. begin. Path(); ctx. arc(95, 50, 40, 0, 2*Math. PI); ctx. stroke();
CSS样式表的分类 CSS样式表根据位置的不同分为三种类型：即外部样式表、内部样式表和内联样式表。 1: 外部样式表 <link type="text/css" rel="stylesheet" href="css/style. css" /> 2: 内部样式表 <style type="text/css"> body { font-family: "宋体"; color: #616161; } h 2, h 3{ color: red; } #content{width: 1190 px; background: #fafafa; }. red{ color: red; } </style> 3: 内联样式表 <body style="font-family: '宋体'; color: #616161; ">
“footer”部分美化 step 1: HTML构建页面结构 step 2: 导入favicon. ico <link rel="shortcut icon" href=". . /favicon. ico" /> step 3: 创建外部样式表 step 4: 样式初始化 step 5: 通栏样式设置 step 6: 对页面内容进行美化
字体图标（icon font）：是指一种可以当作字体一样使用的矢量图标，支持CSS对它们进行样式改 变，包括：大小、颜色、阴影或者其它任何支持的效果。 step 1: 去官网http: //www. thinkcmf. com/font下载一套fontawesome，在项目根目录下创建文件夹 plug，将fontawesome下载包放置进去，里面包含有font-awesome. css文件。 step 2: 加载fontawesome。 <link rel="stylesheet" href=". . /plug/font-awesome/css/font-awesome. min. css"> step 3: 使用fontawesome图标。 <a href="#" class="f. Sort">综合 <i class="fa fa-arrow-down"></i></a> <a href="#" class="f. Sort">人气<i class="fa fa-arrow-down"></i> </a> <a href="#" class="f. Sort">新品<i class="fa fa-arrow-down"></i> </a> <a href="#" class="f. Sort. Cur">价格 <i class="fa fa-chevron-up"></i> <i class="fa fa-chevron-down"></i> </a>
相对定位 绝对定位 回到任务中来，要设置上下字体图标为期待的效果，就是需要将它们脱离标准流，设置为绝对定位， 同时将父元素设置为相对定位，这里重新为两个字体图标设置class为“up”和“down”，HTML代码 如下： <a href="#" class="f. Sort. Cur">价格 <i class="fa fa-chevron-up up"></i> <i class="fa fa-chevron-down"></i> </a>. f. Sort{ height: 22 px; line-height: 20 px; border: 1 px solid #ccc; display: inline-block; float: left; padding: 0 15 px 0 5 px; position: relative; } i. up{ position: absolute; right: 3 px; top: 1 px; } i. down{ position: absolute; right: 3 px; top: 9 px; }
练习： 代码见 project 4 -task 2 -index. html及css页面
- Slides: 67
