头部演练开心网首页的布局与制作 1003

清寒入骨 · 发表于 2022-12-28 15:12:25

视频

阶段代码源文件

<hr/>

01-最外层容器分析-演练-开心首页-HTML-1003

先分析目标网站如何布局

总共划分为三个区

头部
内容主体
底部

我们一起完成宽度的测量

版心是1000的宽度

<hr/>
02-头部组成与技术细分-演练-开心首页-HTML-1003

头部盒子技术分析

先看头盒子的结构组成
由三个部分组成

三个盒子通过浮动定位

》头部的底色是浅变色

03-项目结构准备-演练-开心首页-HTML-1003

创建一个项目

做好相关的布局
需要有网页文件，图片文件，样式文件等
我们可以先建好目录，用于存放相关文件
新建css目录
新建images目录

到此完成了样式目录，images目录的创建（images里同时也准备好了相关的图片素材）

新建index.html文件

到此，文件与目录都建好了
还需要有一个css样式文件，与html文件关联起来

试一试是否生效

测试完毕，结构完成

小结：
新建图片目录
新建样式目录
新建首页文件
新建样式文件
首页与样式文件产生关联

注意：当前我们是扩展阶段，所以开发顺序摸着石头走

04-布局头部内容区和底部盒子-演练-开心首页-HTML-1003

先实现容器并用文字占位

然后给容器设置他们自己的样式，并且居中

下一步，依次实现各个部分的内容即可
当前的这几个盒子都没有给高度
让内容把高度撑开

<hr/>06-头内部logo与菜单上-演练-开心首页-HTML-1003

先做三个容器，装三个部件
做前测大小

LOGO盒子

导航按钮盒子

右侧注册盒子

头部盒子高 50

测量完毕，开始代码

先把头部盒子弄出来
50高

实现三个盒子
盒子宽度分别是
247
100
207

盒子做出来

设置宽

让盒子浮起来
写一个浮动样式类，让需要浮的盒子装备一下

现在想让盒子浮起来。如何利用这样样式？

LOGIN应该是右浮动

来一个右浮的样式

装备给对应的盒子

06-头部细调-演练-开心首页-HTML-1003

》实现浅变色的效果
向下的渐变
#d01d3b
#d36079

》实现LOGO图象的插入
由于LOGO是可以点击的
用A包IMG

》菜单栏

是一个文字按钮
也有链接

使用ul>li结构来实现

考虑拓展性，做成多个a包li的结构

高度是40

现在，去掉小黑点，高度调40

一般情况，li这样的样式要在初始化时去掉

/*通用样式的初始化*/
* {
padding: 0;
margin: 0;
}

/*列表样式初始化*/
li {
list-style: none;
}

/*超链接样式初始化*/
a {
text-decoration: none;
}

高度调40
现在只针对头部，菜单中的li进行这样的设置
使用后代选择器

让他们浮起来

思考办法
1，可以给所有的li加fl属性
2，可以直接给li里加float left样式

为了方便，直接在li样式里加

希望让盒子低一些
可以考虑利用margin把它挤下来
也可以利用定位

我们使用margin，让头部多10
为什么margin要给ul加？
可以直接给li加吗？
也是可以的

》按钮背景是白色，左右有边距

给了一个左右外边距后，由于父盒子宽度不够，有内容被挤下去了

考虑把父盒子宽度去掉
父盒子宽度没有后，它就没有宽度了
原因，被浮动的盒子，它的display相当于是inline-block
inline-block的宽度由内容决定宽
因此，需要把宽度给多一些才可解决
宽度给够了，子浮动元素就不会因为浮动问题，父宽度不够被挤下去了

07-头内部菜单下-演练-开心首页-HTML-1003

》让文字垂直居中
行高=高度

》左右给些白色的填充
微调一下padding与margin

》让按钮变成上圆角

》文字颜色与加粗

采集到的色

#cb3333

》让选中的li才会有这样的按钮效果

新建一个active的li的样式
把按钮相关的特效给它

给第一个li添加上active样式

其它的样式默认给白色
调改一下后变成如下

		自动登录	找回密码
密码			立即注册

头部 演练 开心网首页的布局与制作 1003

头部演练开心网首页的布局与制作 1003