HTML实例
1、原型与实例对比
(1)原型
(2)实例
2、详情
2.1 布局总览
2.2 布局分述
(1)标题+搜索
分两块内容,用<span>
span1:文字:gsonya-HTML
span2:输入框+按钮
(2)导航栏
将这四个内容设置为链接,首页刷新当前页面;HTML实例链接到第(5)块内容;其它和联系我暂时未设置链接内容。
(3)轮播图注释
鼠标移入时,“图1”显示图1内容的解释。主要是通过left:-999em;设置解释内容为隐藏形式,当鼠标移入到字体上时,设置left:100%;就可以实现。
(4)轮播图
点击右下角的1,2,3可以查看轮播图的每张图片,因为轮播图一般涉及点击响应事件,要用到JavaScript内容,但这个网页仅展示HTML内容,所以这个轮播图只是简单的鼠标点击,图片显示问题。将三张图片首先用absolute定位,然后当鼠标点击时设置图片的图层就可展示简单的轮播图。主要通过z-index实现。
(5)HTML实例
HTML实例下面的每个都是实例链接,点击文字就可以展示之前博客web-HTML学习笔记里的内容。
例如:link
其中有内容还未编辑就会显示
注:这些链接都会在新窗口中展开
(6)登录
登录内容是由几个div块组成
div1:文字内容:个人中心
div2:图+文本输入框
div3:图+密码输入框
div4:按钮1(提交)+按钮2(重置)
(7)图片
分配一个div块内容,插入一张图片作为分隔
(8)相关链接
链接内容是由图片+链接文字组成,点击链接文字会打开链接内容(在本窗口中打开)
例:gsonya-blog
(9)页脚
单独的一个div块
3、问题
(1)原型设计和HTML实例展示出来时颜色有不一致情况,原型设计使用透明度时,字体内容是清晰的,但是HTML写出来的透明度会变得模糊,所以在实现时,颜色有所变化。
(2)因为想要页面随着窗口大小的改变而改变,所以采用了absolute定位和宽度高度使用百分比值,但这样一来,当全屏展示时内容会显得比较扁,这点没有设置好。
如图:
小窗口
全屏
4、补充
详细代码及内容请查看https://github/gsonya/web/tree/master/html
更多推荐
HTML实例—以一个简单网页为例
发布评论