趣群网

 找回密码
 立即注册
查看: 184|回复: 0

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

[复制链接]

1

主题

7

帖子

7

积分

新手上路

Rank: 1

积分
7
发表于 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样式



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



相关样式



当前效果



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
把它的边框取消掉





》头部全部完成

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|趣群网

GMT+8, 2025-3-16 20:30 , Processed in 0.100354 second(s), 23 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表