黑马程序员-学成在线项目总结

黑马程序员-学成在线项目总结

收获

  1. 基础公共样式
    清除默认样式,例如内边距、外边距、项目符号等等
    设置通用样式,例如:文字样式

  2. 项目结构
    在这里插入图片描述
    注:多个css文件引入顺序,先清除,后设置
    在这里插入图片描述

  3. 版心效果
    许多网页整体都有版心居中,可将版心样式设为通用css
    在这里插入图片描述
    在这里插入图片描述

    若有通栏(水平方向铺满)则多嵌套一层div即可
    在这里插入图片描述

  4. 整体布局方法
    先整体后局部,从左往右,层层递进,善用flex布局,例下图

在这里插入图片描述
第一步:本模块为通栏效果,则先设置通栏div的效果
在这里插入图片描述
第二步:设置版心样式,分析可知,内容左右两部分,采用flex布局
在这里插入图片描述
第三步:设置左侧样式,分析可知logo部分需用a标签,报名部分也需要a标签,中间采用p标签,分别加入测试内容,随即依次调整三部分的样式及内外边距,最后换成正式内容,设置行高,字体等属性。

在这里插入图片描述

在这里插入图片描述

第四步:设置右边整体样式,分析三个重复自定义里边组成,采用flex布局,先设置右边整体样式,在设置dl样式,在设置dt样式,在设置dd或a标签样式,层层递进,从整体到局部
在这里插入图片描述

  1. 细节之处
    在这里插入图片描述
    在这里插入图片描述
    注:此处flex:1 之处善用,下面两幅图都是
    在这里插入图片描述

在这里插入图片描述
重复部分设置公用css
在这里插入图片描述
考虑后期js,选中部分设置active类,需要更改部分加标签
在这里插入图片描述
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值