札记丶2017-09-07

感觉一周真是太快了，转眼又周四了，这周疯狂学H5，基础知识倒是看得不亦乐乎，昨天一打开实际项目直接两眼懵逼了，还差的很远呢，昨晚回去又没忍住去网吧打了个晋级赛，新买的星之守护者金克丝皮肤真是太炫了，手感一流，就是第一把打的真不舒服，还好最后赢了还来了把三连胜，特别享受这种成就感带来的喜悦，我好像又懈怠了，啊~~~~~

好了好了，整理下心态，继续codeing~

今天从HTML CSS学习到了HTML图像

图1.1

实现效果:

图1.2

今天想好好学一下CSS，但是发现有点晦涩难懂

1.CSS

实现效果：

图2.1

实现步骤：

其实CSS更多就像这个页面的一个头文件，里面规定了各种样式，比如文字大小，颜色，字体等，这里我就将标题和

段落设置为红色和蓝色

           

           设置当前文本显示为中文（其实不写也会照常显示，这个下去再仔细研究）

           

           

2.设置背景图片

实现效果：

图2.2

在body里面设置background

3.实现一个没有下划线的网页链接

实现效果:

一般情况下设置网页链接会出现下划线

图2.2

设置后取消下划线

图2.3

实现步骤:

点击进入Fantasychong的数码小店

4.创建HTML超级链接

实现效果：

图2.4

实现步骤：

本文本是一个指向万维网的页面的链接

5.创建图片链接

实现效果：

图2.5

实现步骤：

     

6.定位到同一个页面的某个位置

实现效果：会直接跳转到该页面的某个位置，在网页的最上面展示

图2.6

       定位到C4的位置

图2.7

张永冲Fantasychong

       

zhangyongchong

张永冲Fantasychong

       

zhangyongchong

7.HTML链接语法，链接文本除了文字还有其它图片等其它HTML元素

实现效果：

图2.8

实现步骤：

百度一下，你就知道

8.在新窗口打开链接

一般情况下，会在当前页面跳转到新的网页，通过设置target属性可以在新的窗口打开链接

实现效果：

图2.9

实现步骤：

访问百度

9.创建电子邮件链接

前提是要有邮件客户端，这里用的是foxmail。

实现效果：

图3.0

实现步骤：

发送邮件

10.创建复杂的邮箱链接

在上面创建的邮箱链接编写收件人，主题的基础上，再添加抄送和文本内容

实现效果：

图3.1

实现步骤：

点击发送邮件

11.一幅静态图像

实现效果：

图3.2

       

12.一副动态图像

实现效果：

图3.3

实现步骤：

和静态没区别，没有什么特殊处理的地方，就是放上个动图的gif链接就可以

13.替换文本属性alt，当图片不能正常加载时候会出现文字提示

实现效果：

当图片可以正常加载时，效果如下

图3.4

当图片不能加载时（几率很小，这里我们给图片链接做点处理，让其不能读取），就会出现alt文本，相应提升了用户体验

图3.5

14.设置图文的几种对齐方式

图文默认对齐，图文底部对齐，图文中部对齐，图文顶部对齐

1)图文默认对齐

实现效果：

图3.6

实现步骤：

图文默认对齐方式

2)图文底部对齐(和默认相同)

实现效果：

图3.7

实现步骤：

图文设置底部对齐

3)图文中部对齐

实现效果：

图3.8

实现步骤：

图文设置中部对齐

4)图文顶部对齐

实现效果：

图3.9

实现步骤：

图文设置顶部对齐