利用HTML+CSS实现一个简单的网页
原网页地址
一 网站结构分析
我采用的方法是从上到下逐个用DIV来实现
二 导航栏
不难发现 原网页的导航栏是始终在网页的最上方
所以采用position:fixed;来将导航栏的DIV固定在想要的地方
导航栏里面
这个东西编写起来比较麻烦
我用DIV将图片包起来 再用DIV将两行字包起来 但是用display的话会发现两个DIV没法对齐
所以我只能用浮动来将两个div并列
右边的导航栏比较容易写
用列表或者SPAN都可以实现 大概是这样子的效果
二 网页内容
接下来的话是一张很大的图片 这个很好写 用DIV限制一下图片 然后直接放上去就行了
接下来是这块 网页剩下的内容大概跟这个差不多 所以只要复制粘贴 再稍微改一改样式就可以了
用一个大DIV来放背景颜色 然后里面的内容用DIV限制一下宽度然后使用MARGIN来让DIV居中 再写一个textalign：center；让文本居中
原网页的
本来是一张PNG格式的图片
但是做之前我并不知道 我以为只是外面的边框包一个图片
大概讲一下我怎么实现的
先写一个方的DIV 用BORDER-REDIUS让其变成圆形 然后再写一个DIV用绝对定位将这个DIV放在写好的圆形上面
然后用CSS3的transform属性调成一个菱形 然后图片放在底下的DIV里面就可以了
原网页的这个元素是有悬浮变小的动画效果
过渡非常好看
稍微自学了一下CSS3 用transition属性来实现过渡效果
接下来也是跟上面的内容差不多的一个大块
这个样子只要用浮动就可以轻松实现
但是悬浮可以发现 他有一个淡入淡出的层
我用老方法display：none；然后悬浮display:block；写了一遍 然后用CSS3来给一个过渡效果
但是发现并没有想象中的淡入淡出效果
百度之后发现CSS3居然对DISPLAY没有用
我用visibility标签来代替display的效果
加完transition属性后发现还是没有想象中的效果
他只会延时出现 并没有发生过渡效果
然后我再ceng的DIV里面加了opacity: 0;
然后悬浮的时候让他的值变为1
然后加了过渡效果
transition: all 0.5s linear;
最终实现了淡入淡出的过渡效果
但是具体原理还是不太清楚 日后通过学习再来搞清楚到底是怎么回事把。。。
底下还有一个效果不会弄
通过看源码发现他是两张图片 悬浮的时候另外一张图片从0变大
我是使用CSS3效果让他慢慢改变背景颜色
希望以后的学习中能够解决这个问题
至此大概的网页也写的差不多了 剩下的都是很简单的DIV排版
网友评论