前端基础第七天案例

学成在线案例

准备工作

CSS属性书写顺序(重点)

页面布局思路

确定版型

通过ps量取 确定每个版心都要居中对齐 并且宽度为1200px

第一行头部head里面 可以看作1行四列 分别是logo 导航 搜索 头像

search 搜索框

第一个logo是图片设置左浮 设置好宽高 第二个搜索栏大盒子nav 里面装ul 里面三个小li 小li nav设置左浮动 和margin left 与logo隔开 每个小li之间设置左右 15px的margin 每个小li里面都有一个a链接 a链接转化为块级元素设置左右10padding 会根据文字内容撑开这个链接 再设置一个光标 鼠标经过更换颜色

第二大部分banner制作

一个大盒子banner 宽度默认浏览器 里面放一个w 版心盒子 版心盒子左边是subnav 导航右边是课程表模块 subnav导航 里面 通过无序列表ul li 整齐排列 小li 里放a链接 和一个大于号 大于号用span盒子 装 设置右浮动

再看右边的course模块

首先有一个course 大盒子装下 一个H4标题 下面是一个bd模块盒子装下一个ul 和三个小li 以及最后的a超链接 h4标题用父级宽度 文字水平垂直居中 bd盒子设置内边距padding 里面的小li跟bd左右内边距20px li 小li设置上下内边距 14px隔开 小li之间就会隔开 并且根据内容撑开 并且设置下边框 a 链接转换为块级元素 设置边框 并设置其中文字水平垂直居中 更改文字大小加粗以及和上内边距

goods商品模块

goods大盒子里有三个小盒子 第一个第三个距离侧边有距离 可以让h3给goods盒子一个左边距。同理 mod盒子给goods一个右边距 这样就不用减宽度了 里面三个小li 小li里面带a链接， 设置li里面的a链接的外边距 撑开li不用调宽度 设置的边框跟a链接一样高 因为高度会继承ul会继承父盒子的高度，所以不能给li直接设置padding

精品推荐大模块

fooer模块

选择器

.footer {
    height: 415px;
    background-color: #fff;
}
.footer .w {
    padding-top: 35px;
}
.copyright {
    float: left;
}
.copyright p {
    font-size: 12px;
    color: #666;
    margin: 20px 0 15px 0;
}
.copyright .app {
    display: block;
    width: 119px;
    height: 33px;
    border: 1px solid #00a4ff;
    font-size: 16px;
    text-align: center;
    line-height: 33px;
    color: #00a4ff;
}
.links {
    float: right;
}
.links dl {
    float: left;
    margin-left: 100px;
}
.links dl dt {
    font-size: 16px;
    color: #333;
    margin-bottom: 5px;
}
.links dl dd a {
    font-size: 12px;
    color: #333;
}