学成在线-Pink老师教

1026-徐同学

发表文章数:41

首页 » 算法 » 正文

页面布局整体思路

1、必须确定页面的版心(可视区),我们测量可得知、
2、分析页面中的行模块,以及每个行模块中的列模块。是页面布局第一准则。
3、一行中的列模块经常浮动布局,先确定每个列的大小,之后确定列的位置,页面布局第二准则。
4、制作HTML结构。我们还是遵循先有结构后又样式的原则。结构永远最重要。

确定版心

每个版心都要水平居中对齐,可以定义版心为公共类

.w {
    width: 1200px;
    margin: auto;
}

头部制作

学成在线-Pink老师教
导航栏注意点:
实际开发中,我们不会直接用链接a而是用包含链接(li+a)的做法
1、li+a语义更清晰,一看就是有条理的列表型内容
2、如果直接用a,搜索引擎容易辨别为有堆砌关键字嫌疑从而影响网站排名
注意:
1、让导航栏一行显示,给li加浮动,因为li是块级元素,需要一行显示
2、这个nav导航栏可以不给宽度,将来可以继续添加其余文字
3、因为导航栏里面文字不一样多,所以最好给链接a左右padding撑开盒子,而不是指定宽度

search搜索框:
一个search大盒子里面包含两个表单(文本框+按钮)

学成在线-Pink老师教

精品推荐模块

精品推荐大模块

学成在线-Pink老师教

底部模块

学成在线-Pink老师教

未经允许不得转载:作者:1026-徐同学, 转载或复制请以 超链接形式 并注明出处 拜师资源博客
原文地址:《学成在线-Pink老师教》 发布于2021-01-01

分享到:
赞(0) 打赏

评论 抢沙发

评论前必须登录!

  注册



长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

Vieu3.3主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录