项目：学成在线

Date: September 9, 2022
Summary: 创建根目录、创建网页布局

0. 项目预览：

1. 创建根目录：

目标：创建项目根目录

根目录：网站的第一级文件夹

根目录：

1. 图片文件夹: images
2. 样式文件夹: CSS
3. 首页 : index.html

VSCode中的根目录：

Code:

注意点：

1. 网站标题命名
2. 引入CSS文件

2. 创建网页布局：

2.0 掌握网页布局基本步骤

2.1 网页预处理

index.css

/* 0 预处理 */
* {margin: 0;padding: 0;/* 內减模式 */box-sizing: border-box;
}li {list-style: none;
}a {text-decoration: none;
}.clearfix:before,.clearfix:after {content:"";display:table; 
}.clearfix:after {
clear:both;
}/* 1 背景色 */
.body{background-color: #f3f5f7;
}

注意：

1. 这里的*处补充了内减模式，更好。
2. pxcook中记得量一下网页的背景色，这里就不是纯白，需要调成#f3f5f7

2.1 设置版心

index.css

.wrapper{width: 1200px;margin:0 auto;
}

index.html

123

效果：

总结经验：

以后项目中，可以单独设置 wrapper 这个类负责版心居中，然后具体模块如 header 再单独起一个类，负责模块特色效果，即分工明确。

3 网页导航

3.1 设置Logo

3.2 设置导航

HTML

首页
课程
职业规划

CSS

.nav{float: left;margin-left: 70px;height: 42px;/* background-color: green; */
}.nav li {float: left;margin-right: 26px;
}.nav li a{display: block;/* 上下居中 */padding: 0 9px;height: 42px;line-height: 42px;/* border-bottom:2px solid #00a4ff; */font-size: 18px;color: #050505;
}.nav li a:hover{border-bottom:2px solid #00a4ff;
}

3.3 设置搜索框

HTML

CSS

.search{float: left;margin-left: 59px;width: 412px;height: 40px;border: 1px solid #00a4ff;
}.search input{float: left;padding-left: 20px;width: 360px;height: 38px;border:0;
}/* 单独控制placeholder */
.search input::placeholder{font-size: 14px;color:#bfbfbf;
}.search button{float: left;width: 50px;height: 40px;background-image: url(../images/btn.png);border: 0;
}

3.4 设置用户栏

HTML

lilei

CSS

.user{float: right;margin-right: 35px;height: 42px;line-height: 42px;
}.user img{vertical-align: middle;
}

4 轮播图

CSS

/* 2 轮播图 */
.banner{height: 420px;background-color: #1c036c;
}/* 2.1 标签页 */
.banner .wrapper{height: 420px;background-image: url(../images/banner2.png);
}

4.1 左部菜单栏

CSS

.banner .wrapper{height: 420px;background-image: url(../images/banner2.png);
}
.wrapper .left{float: left;padding: 28px 20px;opacity: 0.3;width: 190px;height: 420px;border: 1px solid red;/*1*/line-height: 44px;
}
.banner .left span{float: right;margin-right: 21px;
}
.banner .left a{font-size: 14px;color: #ffffff;
}
.banner .left:hover{color: #00b4ff;
}

HTML

前端开发>
前端开发>
前端开发>
前端开发>
前端开发>
前端开发>
前端开发>
前端开发>
前端开发>

注意：这里用行高来撑开

易错点&经验：

1. 行高设置在外级标签，颜色等属性设置在内级标签

   比如我们对left设置行高，对子级中的a设置具体的字体颜色

2. 覆盖问题：

.banner .left li{font-size: 14px;line-height: 44px;/* 注意：这里color会失效，因为a在后面且本身为标签，会覆盖前面的，所以要设置a的字体颜色属性 *//* color: #ffffff; */margin-bottom: 25px;
}
.banner .left a{font-size: 14px;line-height: 44px;color: #ffffff;margin-bottom: 25px;
}

1. 研究下opacity与background-color: rgb的区别

   background-color: rgb(0, 0, 0, 0.3);

2. 伪类选择器写法

   .banner .left :hover 
   

注意：这里的写法

4.2 课程表

CSS

.banner .right{float: right;width: 228px;height: 300px;margin-top: 50px;/* 当初背景色就应该立刻填好 */background-color: #fff;
}.banner .right h2{text-align: center;height: 48px;/* 字体上下居中方式 */line-height: 48px;background-color: #9bceea;font-size: 18px;color: #ffffff;
}.banner .right .content{padding: 0 18px;
}.banner .right .content dl{padding: 12px 0;border-bottom: 2px solid #e5e5e5;
}.banner .right .content .dt{font-size: 16px;color: #4e4e4e;
}.banner .right .content .dd{font-size: 14px;color: #4e4e4e;
}.banner .right .more{/* a中的宽高不生效 */display: block;margin: 0 auto;width: 200px;height: 40px;border: solid 1px #00a4ff;font-size: 16px;color: #00a4ff;font-weight: bold;line-height: 40px;text-align:center;
}

HTML

我的课程表
继续学习 程序语言设计
正在学习-使用对象
继续学习 程序语言设计
正在学习-使用对象
继续学习 程序语言设计
正在学习-使用对象
全部课程

5 精品推荐

效果：

注意：边框有阴影

HTML

精品推荐
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
修改兴趣

CSS

/* 3 精品推荐 */
.goods{margin-top: 8px;padding-left: 34px;padding-right: 26px;height: 60px;background-color: #ffffff;box-shadow: 0px 2px 3px 0px rgba(118, 118, 118, 0.2);line-height: 60px;
}
.goods h2{float: left;font-size: 16px;color: #00a4ff;font-weight: bold;
}
.goods ul{float: left;margin-left: 30px;
}
.goods ul li{float: left;
}
.goods li a{border-left: 1px solid #bfbfbf;padding: 0px 30px;font-size: 16px;color: #050505;
}
.goods .interest{float: right;font-size: 14px;color: #00a4ff;
}

6 精品推荐课程

CSS

/* 4 精品推荐课程 */
.box{margin-top: 36px;height: 595px;
}
.box .title{height: 40px;
}
.box .title h2{float: left;font-size: 20px;color: #494949;
}
.box .title a{float: right;margin-right: 35px;font-size: 12px;color: #a5a5a5;line-height: 40px;
}
.box .content li{float: left;margin-right: 15px;margin-bottom: 15px;width: 228px;height: 270px;background-color: #ffffff;box-shadow: 0px 2px 5px 0px rgba(118, 118, 118, 0.5);
}
.box .content li:nth-child(5n){margin-right: 0px;
}
.box .content li h3{padding: 20px;font-size: 14px;color: #050505;
}
.box .content li p{padding: 0 20px;font-size: 12px;color: #999;
}
.box .content li p span{font-size: 12px;color: #ff7c2d;
}

HTML

精品推荐
查看全部
Think PHP 5.0 博客系统实战项目
高级·1125人正在学习
Think PHP 5.0 博客系统实战项目
高级·1125人正在学习
Think PHP 5.0 博客系统实战项目
高级·1125人正在学习
Think PHP 5.0 博客系统实战项目
高级·1125人正在学习
Think PHP 5.0 博客系统实战项目
高级·1125人正在学习
Think PHP 5.0 博客系统实战项目
高级·1125人正在学习
Think PHP 5.0 博客系统实战项目
高级·1125人正在学习
Think PHP 5.0 博客系统实战项目
高级·1125人正在学习
Think PHP 5.0 博客系统实战项目
高级·1125人正在学习
Think PHP 5.0 博客系统实战项目
高级·1125人正在学习
                   

关键：处理结构伪类选择器，即处理好第5n个li

7 版权区域

效果：

CSS

/* 5  版权区域 */
.footer{margin-top: 40px;padding-top: 30px;height: 417px;background-color: #fff;
}
.footer .left{float: left;
}
.footer .left p{padding: 15px 0px;font-size: 12px;color: #666666;
}
.footer .left a{width: 120px;height: 36px;padding: 11px 27px;font-size: 16px;color: #00a4ff;border: solid 1px #00a4ff;
}
.footer .right dl{float: right;margin-left: 146px;
}
.footer .right dl:last-child{margin-left: 0px;
}
.footer .right dl dt{margin-bottom: 3px;font-size: 16px;color: #333333;
}
.footer .right dl dd{padding: 3px 0;
}
.footer .right dl dd a{font-size: 12px;color: #333333;
}

HTML

学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。
© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号"
下载APP
合作伙伴
合作机构
合作导师
合作城市
合作伙伴
合作机构
合作导师
合作城市
合作伙伴
合作机构
合作导师
合作城市
                

基础知识补充：

字体水平与上下居中：

.banner .right h2{height: 48px;background-color: #9bceea;**line-height: 48px;text-align: center;**
}

设置边线：

.goods li a{border-left: 1px solid #bfbfbf;padding: 0 30px;font-size: 16px;color: #050505;
}

项目整体代码：

CSS

/* index.css用于美化首页的 *//* 0 预处理 */
* {margin: 0;padding: 0;/* 內减模式 */box-sizing: border-box;
}
li {list-style: none;
}
a {text-decoration: none;
}
.clearfix:before,.clearfix:after {content:"";display:table; 
}
.clearfix:after {
clear:both;
}/* 背景色 */
body{background-color: #f3f5f7;
}/* 版心 */
.wrapper{width: 1200px;margin:0 auto;
}/* 1 header 
*/.header{height: 42px;margin-top: 30px;margin-bottom: 30px;
}/* 注意：h1不要写成类（即 .h1 的形式） *//* 1.1 Logo */
h1{float: left;
}/* 1.2 导航栏 */
.nav{float: left;margin-left: 70px;height: 42px;/* background-color: green; */
}
.nav li {float: left;margin-right: 26px;
}
.nav li a{display: block;/* 上下居中 */padding: 0 9px;height: 42px;line-height: 42px;/* border-bottom:2px solid #00a4ff; */font-size: 18px;color: #050505;
}
.nav li a:hover{border-bottom:2px solid #00a4ff;
}/* 1.3 搜索框 */
.search{float: left;margin-left: 59px;width: 412px;height: 40px;border: 1px solid #00a4ff;
}
.search input{float: left;padding-left: 20px;width: 360px;height: 38px;border:0;
}/* 单独控制placeholder */
.search input::placeholder{font-size: 14px;color:#bfbfbf;
}
.search button{float: left;width: 50px;height: 40px;background-image: url(../images/btn.png);border: 0;
}/* 1.4 用户 */
.user{float: right;margin-right: 35px;height: 42px;line-height: 42px;
}
.user img{vertical-align: middle;
}/* 2 轮播图 */
.banner{height: 420px;background-color: #1c036c;
}/* 2.1 标签页 */
.banner .wrapper{height: 420px;background-image: url(../images/banner2.png);
}
.banner .left{float: left;padding: 10px 20px;width: 190px;height: 420px;/* border: 1px solid red; */line-height: 44px;background-color: rgb(0, 0, 0, 0.3);
}
.banner .left span{float: right;margin-right: 21px;
}
.banner .left a{font-size: 14px;color: #fff;
}
.banner .left :hover{color: #00b4ff;
}/* 2.2 课程表 */
.banner .right{float: right;width: 228px;height: 300px;margin-top: 50px;/* 当初背景色就应该立刻填好 */background-color: #fff;
}.banner .right h2{text-align: center;height: 48px;/* 字体上下居中方式 */line-height: 48px;background-color: #9bceea;font-size: 18px;color: #ffffff;
}.banner .right .content{padding: 0 18px;
}.banner .right .content dl{padding: 12px 0;border-bottom: 2px solid #e5e5e5;
}.banner .right .content .dt{font-size: 16px;color: #4e4e4e;
}.banner .right .content .dd{font-size: 14px;color: #4e4e4e;
}.banner .right .more{/* a中的宽高不生效 */display: block;margin: 0 auto;width: 200px;height: 40px;border: solid 1px #00a4ff;font-size: 16px;color: #00a4ff;font-weight: bold;line-height: 40px;text-align:center;
}/* 3 精品推荐 */
.goods{margin-top: 8px;padding-left: 34px;padding-right: 26px;height: 60px;background-color: #ffffff;box-shadow: 0px 2px 3px 0px rgba(118, 118, 118, 0.2);line-height: 60px;
}
.goods h2{float: left;font-size: 16px;color: #00a4ff;font-weight: bold;
}
.goods ul{float: left;margin-left: 30px;
}
.goods ul li{float: left;
}
.goods li a{border-left: 1px solid #bfbfbf;padding: 0px 30px;font-size: 16px;color: #050505;
}
.goods .interest{float: right;font-size: 14px;color: #00a4ff;
}/* 4 精品推荐课程 */
.box{margin-top: 36px;height: 595px;
}
.box .title{height: 40px;
}
.box .title h2{float: left;font-size: 20px;color: #494949;
}
.box .title a{float: right;margin-right: 35px;font-size: 12px;color: #a5a5a5;line-height: 40px;
}
.box .content li{float: left;margin-right: 15px;margin-bottom: 15px;width: 228px;height: 270px;background-color: #ffffff;box-shadow: 0px 2px 5px 0px rgba(118, 118, 118, 0.5);
}
.box .content li:nth-child(5n){margin-right: 0px;
}
.box .content li h3{padding: 20px;font-size: 14px;color: #050505;
}
.box .content li p{padding: 0 20px;font-size: 12px;color: #999;
}
.box .content li p span{font-size: 12px;color: #ff7c2d;
}/* 5  版权区域 */
.footer{margin-top: 40px;padding-top: 30px;height: 417px;background-color: #fff;
}
.footer .left{float: left;
}
.footer .left p{padding: 15px 0px;font-size: 12px;color: #666666;
}
.footer .left a{width: 120px;height: 36px;padding: 11px 27px;font-size: 16px;color: #00a4ff;border: solid 1px #00a4ff;
}
.footer .right dl{float: right;margin-left: 146px;
}
.footer .right dl:last-child{margin-left: 0px;
}
.footer .right dl dt{margin-bottom: 3px;font-size: 16px;color: #333333;
}
.footer .right dl dd{padding: 3px 0;
}
.footer .right dl dd a{font-size: 12px;color: #333333;
}

HTML

首页
课程
职业规划
lilei
前端开发>
前端开发>
前端开发>
前端开发>
前端开发>
前端开发>
前端开发>
前端开发>
前端开发>
我的课程表
继续学习 程序语言设计
正在学习-使用对象
继续学习 程序语言设计
正在学习-使用对象
继续学习 程序语言设计
正在学习-使用对象
全部课程
精品推荐
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
JavaScript
修改兴趣
精品推荐
查看全部
Think PHP 5.0 博客系统实战项目
高级·1125人正在学习
Think PHP 5.0 博客系统实战项目
高级·1125人正在学习
Think PHP 5.0 博客系统实战项目
高级·1125人正在学习
Think PHP 5.0 博客系统实战项目
高级·1125人正在学习
Think PHP 5.0 博客系统实战项目
高级·1125人正在学习
Think PHP 5.0 博客系统实战项目
高级·1125人正在学习
Think PHP 5.0 博客系统实战项目
高级·1125人正在学习
Think PHP 5.0 博客系统实战项目
高级·1125人正在学习
Think PHP 5.0 博客系统实战项目
高级·1125人正在学习
Think PHP 5.0 博客系统实战项目
高级·1125人正在学习
                   
学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。
© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号"
下载APP
合作伙伴
合作机构
合作导师
合作城市
合作伙伴
合作机构
合作导师
合作城市
合作伙伴
合作机构
合作导师
合作城市