HTML的布局的小秘密
HTML的布局的小秘密
一． 头部与轮播
头部页面整洁，各个功能部分要求不能静态，其中头部中的首页、华为官网等等文字，当鼠标移入就要字体颜色发生变化，而且搜索栏当鼠标点击，文字要自动消失。
轮播：不但要自动轮动，而且当鼠标移入，滚动就停止，右下角也要有五个小点选择，左右也要
上下按钮，满足上下切换，页面的切换。
图1 头部 以及 轮播
图1 轮播代码
- 1
点击 图1中的头部中Select Region 弹出遮罩层
当弹出遮罩层后，中间有一个白色文本框，文本框里面可以选择各种选择，而且鼠标移入选择项中也需要发生颜色的变化，作为显示给用户当前的鼠标位置，让人看起舒服而清晰。
- 1
二． 中间
图二 商品
中间作为商品信息，一张图片内不止要求可以显示价格的提示，而且也要简单描述功能的提示，每一张图也是有联系的，位置与空隙要保持优美的一致。
功能：每一张图片点击都要有跳到相应的页面，鼠标移入时，要有一个动漫效果。
图二 html的代码- 1
三. 尾部
图三 信息相关
图三 布置代码
- 1
- 尾部不止要求排布一目了然 ，而且可以用来显示相关服务信息，和相关合作信息,和客服询问等等…
- 每一个文字都跳转链接与鼠标移入可以出现颜色发生变化。
四、 开发总结
图1
图1代码
第一次代码都是靠自己打的，我发现原来每一个项目之中的每一部分，可以多种代码方式来实现的，这无疑提高了我的实现每一个代码功能探索，比如图1中的五段文字要有高亮效果以及下划线高亮效果，首先我用的是js方式来实现，但是才发现下划线不可完美的实现效果，下划线的大小不好，文字与下划线距离不好，从而我想到用hover伪类实现这一效果，如图1代码：一开始我把每一个文字用span标签来，每一个span标签外面我都要用一个p标签来包裹着，为什么我要如此布局呢？因为这样方便我五个中只有后三个才有高亮效果的功能，虽然复杂，但是也让我对每一层代码布局的深入认识的了解哦。
用另外一种代码方式来做同一种的功能也不错哦！我觉得可以探索每一种代码实现方式，加深的了解，整体来我学习到了布局的多种方式。
HTML的布局的小秘密相关推荐
- 在布局空间标注的尺寸量不对_你最关心的4大空间家居尺寸布局，设计师之间的秘密...
为了日常家居生活的舒适性,从人体工程学上去合理地设计家居尺寸,是很有必要的.今天我们就以客厅.餐厅.厨房.卧室等四个功能空间为例,来聊聊家居尺寸怎么设计才合理?设计师之间才会说的小秘密哦~ 客厅 一个 ...
- html让页面两边都留点空位,标记语言——CSS布局_HTML/Xhtml_网页制作
Chapter 12 CSS布局 本书到此为止,讨论的主要是页面内部元素,也就是内容,但是大结构怎么办?长久以来,设计者都依赖表格进行分栏布局,常常在表格之内嵌套其 点击这里返回脚本之家 HTML教程 ...
- 蚂蚁集团IPO的小秘密：人均月薪5.5万，利润有望超中国石油
蚂蚁集团IPO的小秘密:人均月薪5.5万,利润有望超中国石油 出品 l 观点财经 作者 l 大钊 8月25日晚,上交所受理蚂蚁集团科创板上市申请,同日,蚂蚁集团也向港交所递交上市申请. 招股书显示,蚂 ...
- 界面布局上大胆突破，关注到的细分领域
其中一些是抓住了用户的某一种心里,或者是在界面布局上大胆突破,或者是做了很少有人关注到的细分领域,或者是让人产生了真实生活中的亲切感. 1.细分领域的产品路线 对于创新型的产品,很难做到大而全,最好的 ...
- 点击改变div高度_css实现div两列布局（两种方法）
一.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 二.思路 首先把这个问题分步解决,需要攻克以下两点: 1.让两个div并排到一行 2.让一个div宽度固定,另个div占 ...
- Android布局优化之include、merge、ViewStub
include:引入重复使用的相同布局 merge:减少include布局的层级,将子元素直接添加到merge标签的parent中 ViewStub:其实就是一个宽高都为0的一个View,它默认是不可 ...
- Laravel Dcat-admin 详情页多栏布局开发
背景 随着 dcat-admin 越来越多的人使用,相信有许多跟我一样热爱这个项目的的人最后也会参与到这个项目中来,从使用者到项目的维护者,可以为项目贡献一份自己的力量.我以后也会将维护这个项目的一些 ...
- [JAVA EE] Thymeleaf 高级用法：模板布局，带参数的引用片段，表单验证，常用校验注解
模板布局 公共部分通常定义为模板布局:如页眉,页脚,公共导航栏.菜单等. 模板布局定义方法 布局页中用 th:fragment 定义模板片段,其他页面用 th:insert 引用片段 例如:foote ...
- java gui 案例_JavaGui入门—布局的嵌套使用附实例
JavaGui布局 常见布局 BorderLayout(边界布局) BorderLayout.EAST BorderLayout.WAST BorderLayout.NORTH BorderLayou ...
最新文章
- 清华大学魏少军教授：中国发展芯片瓶颈在哪里？
- Linux C编程--线程操作3--线程属性解析
- 要想保研成功！寒假就干这几件事~
- 以ThreadStart方式实现多线程
- 用Unity开发AR创意礼物：会动的照片
- 一个API方式存取日志文件的模块[VB]
- C# 缓存学习第一天
- mp3排序软件哪个好用_电脑上有什么录音软件，哪个电脑录音软件好用
- linux防火墙reject,linux 防火墙配置与REJECT导致没有生效问题(示例代码)
- 一个计算机专业女孩的求学之路——七年之痒，痒之感悟
- Android高级工程师面试实战，我的Android美团求职之路，3面直接拿到offer
- AGE-PERIOD-COHORT (APC) 连续变量和二分类变量分析全代码
- 华北地区博友链接集合(陆续增加中)
- html中颜色的编码,css颜色编码对照表
- PW6276具有短路保护功能内部 集成软启动电路
- 在 阿里云ECS 上安装 CDH6.2 standalong
- 原生JS写仿淘宝搜索框（代码+效果），可实现3级搜索哦！
- 应用题：计算以秒为单位的时间量所包含的分钟数和秒数。例如，500秒就是8分20秒
- 各种jar下载 Jar File Download
- Word里面如何修图