大一寒假自学html和css第一个完整页面布局_m0_61274686

网络投稿 02-07 3242

第一个html+css页面布局是在b站上跟着李立超老师一步步做的小米官网

当然只是做了一个视图加一点点的东西，先看看效果

这是我的，然后下面是小米官网的

由于是第一次做完整的页面布局，真的真的很粗糙，特别是整体代码结构。尽管说各种类名已经非常注意，并且注释也在尽可能写得清楚一点。但是现在真的是不想再回头去看看自己的代码。太难受了 (┬┬﹏┬┬)。

emm因为没有js，整个页面都是纯html+css写的。所以说很多js能轻松实现的效果都只能用css去硬磕，但有的地方我是真的没办法了，比如说轮播图什么的，还有右侧工具栏（在页面大小改变的时候会有两种大小情况）。

现在来看看整个页面一张截图体现不出来的地方

第一就是顶部导航栏文字在鼠标移动到上面时的一个高亮，这个很简单，给对应的a标签设置一个:hover就行

然后就是下载app这里这个下拉框，这个框的实现实际上也就是设置一个：hover的伪类，css有很多方法能在鼠标移动到上面的时候弹出来。我的代码里这个二维码下拉框的类名是一个.app下的.qrcode。我一开始的解决方案是这样的（只是体现这一个功能的部分代码）

.app .qrcode{ display: none; } .app .qrcode:hover{ display: block; }

?因为这里的框是有一个过渡效果的，像上面这种解决方案的话就看不出来。所以后来是改成这样：设置块高度为0，但是这里要有一个overflow：hidden；来隐藏块的内容，不然会直接被内容撑开；直到鼠标移入才改成正常高度，然后可以用transition设置一个0.3秒的过渡效果

.app .qrcode{ height: 0px; overflow: hidden; transition: height .3s; } .app .qrcode{ height: 148px; }

?这样的话动画效果和官网的也就差不多了；但是这里还有一个麻烦的点，就是下拉框上面的那个小箭头：这个箭头是可以用图片来解决，貌似官网用的也是图片。但是这里采用的在一个::after的伪元素中添加边框的方法，再用绝对定位去调整它的位置。（这个小箭头真的费了我特别特别特别多的功夫）

.app::after{ display: none; content: ""; position: absolute; width: 0px; height: 0px; border: 8px solid transparent; border-top: none; border-bottom-color: #fff; left: 0; right: 0; bottom: 0px; margin: 0 auto; } .app:hover::after{ display: block; }

这个箭头的出现方式就是上面那个下拉框的第一种解决方案。

第一个费了较多功夫的地方就是这个下拉框，然后接下来就是在购物车那里也有一个下拉框

?这个下拉框一整个和刚刚那个也差不多，动画效果也是一样的；然后其中的文字真的只是简单的手动输入的哈哈哈哈。

整个顶部导航差不多就是这样，但是这个顶部导航的宽度是占据屏幕的百分之百，然后内容区是固定的宽度，然后还设置了一个min-width最小宽度。

然后就是下面这个头部导航的界面

这个导航其实在logo图标后是有一部分是隐藏着的?，因为这是一个通用的导航，就是在这个网站相关的的其他页面也会用到，所以在其他的页面它是这样的（多了一个全部商品分类）

?这个全部商品分类在主页是隐藏不出现的，所以我也是用了一个display：none；来隐藏。

然后当鼠标移动到这一块上面也有一个下拉框

?由于我的懒惰这里面也就没有设置了，然后每一个分区用的也都是这一个下拉框，它的实现也和上面的下拉框是一个方法。在最后的服务和社区两个块那里就不会有下拉框，于是我给这两个a标签设置了一个叫.none的类名，然后再用一个：none伪类选择器，让鼠标移动到它们上面的时候不显示下拉框。

在这个头部板块还有右边的一个搜索框，就是一个简单的表单。

这里用一个：focus的伪类设置点击后边框变成橙色?

?再就是鼠标停在搜索按钮上的时候会变成白色加一个橙色背景，搜索图标还有上面的购物车用的都是一个Font Awesome的图标字体。

按照整个布局走下来接下来就应该是这个banner板块

?但其实这左边的导航条还是在刚刚的头部里面，并且是在被隐藏的全部商品分类里面的。

因为官网的其他页面是像这样：

这个导航条是在鼠标移动到全部商品分类的时候才显示出来?，所以将这个导航条布局在哪个版块其实是一个比较重要的地方。

然后像官网这样一个hover效果我也是有做的，但是一样，因为懒所以内容就算了?。像这些下拉框弹出框都是有着一个阴影效果的，我都做了，但是肯定和官网的效果还是有点差别

?然后banner的轮播图中大概也就是调整一个图片的位置

然后左右两个箭头用的是一个雪碧图的方法，在鼠标悬停的时候会有一个背景的变换，下面那几个点也是比较容易实现的。

做到这里，下一步就是做右侧的一个工具栏，这个工具栏设置的是一个固定定位，在页面上下滑动的过程中它始终是在视图的同一位置显示的。文章开头说到的工具栏在视图大小改变的时候有两种显示情况，下面就是官网视图分别为100%和110%的两种情况

然后由于没有js，我就只做了下面一种情况

然后真的是太懒了哈哈哈，所以各种弹出框什么的也没有去做了?

再往下走就是这里

?这里的话左侧导航框是一个单独的板块，右侧图片很容易，设置浮动后调整外边距就能设置好位置。但左侧导航框是确实有点烦，把它单独拿出来看一下。

左边是官网的，右边是我自己的

?这也是有一个鼠标移入后的高亮，里面的图标都是从官网上直接扒的图片，将这些框框布局好以后最烦的地方就来了：那些个中间的分隔线。像小米这里的设计就是每个a标签的左边和上面有这个分隔线，因为它不是在最边缘所以不能按照边框来做。于是就采用::before和::after伪元素来实现的。代码如下：

/* 中间分割线 */ .ad .shortcut li::before{ content: ""; width: 64px; height: 1px; background-color: rgb(102,94,87); position: absolute; top: 2px; left: 12px; }

?这里只放了before的代码了，开启绝对定位以后再来调整位置。但是在这里我是真的被搞了一波心态，当然主要还是自己的问题。一开始我代码写出来以后，没有太过注意，将background-color写成了一个color，以至于这几条线就一直出不来。然后我以为是我a标签的布局出了问题，然后一顿魔改发现还是没有任何用处，最后才发现原来是background-color的问题。唉，终究还是太嫩，没啥经验。不过现在的话这方面的经验还是有了，以后再遇到这种情况肯定能第一时间往这方面想了。

写到这里差不多要结束了（对我来说）。所以说也就是草草收尾了。

因为我只是做到这里就没有做了?

?像下面那些，难度应该也就是那样了，嘿嘿嘿（将懒贯彻到底）

这一个页面布局差不多是写了八百多行代码的样子

?作为一个上了一个学期大学的菜鸡大学生，这是我第一次一个东西写了这么长的代码，对我个人来说也是一个很大的突破，这也是第一次在CSDN上发文，希望能得到大家的多多支持。