头部 演练 开心网首页的布局与制作 1003
时间：2023-07-03 04:21:01 | 来源：网站运营
时间：2023-07-03 04:21:01 来源：网站运营
头部 演练 开心网首页的布局与制作 1003：
视频
阶段代码源文件
01-最外层容器分析-演练-开心首页-HTML-1003
先分析目标网站如何布局
总共划分为三个区
我们一起完成宽度的测量
版心是1000的宽度
02-头部组成与技术细分-演练-开心首页-HTML-1003
头部盒子技术分析
先看头盒子的结构组成
由三个部分组成
三个盒子通过浮动定位
》头部的底色是浅变色
03-项目结构准备-演练-开心首页-HTML-1003
创建一个项目
做好相关的布局
需要有网页文件，图片文件，样式文件等
我们可以先建好目录，用于存放相关文件
新建css目录
新建images目录
到此完成了样式目录，images目录的创建（images里同时也准备好了相关的图片素材）
新建index.html文件
到此，文件与目录都建好了
还需要有一个css样式文件，与html文件关联起来
试一试是否生效
测试完毕，结构完成
小结：
新建图片目录
新建样式目录
新建首页文件
新建样式文件
首页与样式文件产生关联
注意：当前我们是扩展阶段，所以开发顺序摸着石头走
04-布局头部内容区和底部盒子-演练-开心首页-HTML-1003
先实现容器并用文字占位
然后给容器设置他们自己的样式，并且居中
下一步，依次实现各个部分的内容即可
当前的这几个盒子都没有给高度
让内容把高度撑开
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样式
其它的样式默认给白色
调改一下后变成如下
相关样式
当前效果
08-头部右侧登陆区-演练-开心首页-HTML-1003
当前
》先做上内容
利用a标签来做
》让文字下来一些
可以利用padding或者利用margin
先看看a盒子的空间
让盒子下来一些
思考？
如何让一个盒子垂直居中？
可以利用定位
top:50%;
transform:translateY(-50%)
1，让父盒子相对定位
更正，是父盒子，当前要操作.login盒子
它的父盒子是header
让header相对定位
2，让子盒子绝对定位
让.login盒子绝对定位
3，调一下.login盒子的偏移
距右0
距顶部50%
向上偏移自己高度的一半
》设置链接
文字是白色
来一些间距，填充左右
换行了？a的父盒子空间不够，不设空间
给a右边框
白颜色
鼠标移上去文字加粗
去掉a的父底色
修改一下内容
》解决掉这里藏着的一根右边框
利用last-child找到最后一个a
把它的边框取消掉
》头部全部完成
在线咨询
