从零开始搭建网站(第一天)

本文讲述了网站开发者在设计初期如何构建框架,包括导航栏的排版、CSS重置、使用less简化代码、左右布局实现以及遇到的问题,如浮动元素处理和中间区域宽度填充的挑战。
摘要由CSDN通过智能技术生成

第一天先做好框架描述,页面上方的第一行是网站logo和网站的一些导航,中间是主体部分,下面是一些关于企业的介绍。
先做网站logo和网站的一些标题导航。遇到的第一个问题就是如何把导航栏的内容排版好,不做调整的效果如下。
在这里插入图片描述

在调整时明显可以感觉到浏览器默认样式对我们调整的影响。使用reset.css。
然后进行微调,这期间会遇到一些问题,比如直觉上会想用span标签包裹导航列表,但是行内元素不能包裹块元素(ul是块元素),会出现内容溢出。还有就是如果一个块元素内的含有两个块元素而想让它们在同一行,则这两个块元素都需要添加float:left。还有一些小技巧比如将文本的height和line-height设置为相同可以使得文本垂直居中。还有就是清楚浮动比较通用的::after伪元素。遇到不懂的可以去看看别人的排版参考下,第一遍不会的话多思考多费点劲,就会越写越容易了。这里可以看到如果使用less会使得层次非常分明,比直接使用css在嵌套层次多的时候简洁和清晰许多。
稍微改一下就初具雏形了。
在这里插入图片描述

然后主体内容进行左右布局,左边是包含一些筛选条件的边栏,右边是呈现主体内容的区域。因为左右布局也是面试中最常被问到的布局。然后底部是包含版权信息的一个条栏,我想使它一直在浏览器底部,使用绝对定位postion:fixed即可,初步布局如图。
在这里插入图片描述

在做中间区域的内容时先构思下,左边要作为筛选依据,以这个案例来看的话我想设计筛选依据为1、男性女性2、价格区间3、物品类别(衣服,裤子,鞋子)。虽然简单但是五脏俱全。后台数据也要具备这些属性。
有待解决的问题:中间部分左右两边的宽度只是大概,没有能够填满,虽然肉眼看不出来,但如果要填满的话,如何将它填满。

  • 7
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

returnadsss

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值