成品截图
前期准备素材
一、项目页面PSD源文件
下载地址https://chuen ST.lanzous.com/I7hlg gn l6 VC
二、前期准备工作
创建study目录文件夹以存储此页面的相关内容
在study目录中创建新的images文件夹(用于保存图像) )。
新的index.html首页html文件(网站首页与index.html统一) )。
创建新的style.css样式文件(链样式表)
将样式导入到我们的HTML页面文件中
样式表写入会清除内部和外部边距样式，以检测样式表是否成功部署
*{
margin: 0；
padding: 0；
}
ul{
列表样式： none；
}
三. CSS属性书写顺序
布局放置属性： display/position/float/clear/visibility/overflow (建议首次写入显示
结果与模式有关)
自身属性： width/height/margin/padding/border/background
文本属性： color/font/text-decoration/text-align/vertical-align/white-space/break -
单词
其他属性(CSS3 ) content/cursor/border-radius/box-shadow/text-shadow /
背景：线性梯度…
四.布局分析
五.布局流程
必须决定页面的版心(可视区域)
分析页面中的行模块和各行模块中的列模块，逐行排列
创建HTML结构。 遵循先有结构后有样式的原则
之后，采用盒子模型的原理，通过DIV CSS布局控制网页的各个模块
开始页面制作
头部制作
1号将版心盒header 1200 * 100的盒子水平居中，上下赋予margin值
. top{
width: 1200px；
height: 100px；
margin :0自动；
}
版心盒包含2号盒的标志
. top img{
浮点：左；
margin-top: 29px；
width: 195px；
height: 42px；
}
版心盒中包含3号盒的nav导航栏
首页课程职业规划. top ul{
浮点：左；
玛姬- left : 59px；
}
. top li{
浮点：左；
padding: 10px 12px；
margin: 28px 13px；
}
版心盒包含4号盒search搜索框
. top input{
浮点：左；
高清： 38px；
width: 360px；
margin-top: 29px；
玛姬- left : 70px；
border: 2px solid #00a4ff；
边框光号： none；
}
. top button{
浮点：左；
width: 50px；
height: 42px；
border :否；
margin-top: 29px；
背景色： # 00 a4ff；
ack ground-image 3360 URL (./images/fa-search.png )；
后台- repeat :否- repeat；
背景定位：中心中心；
}
版心盒包含5号盒user个人信息
初辰
.toplast{
float: left;
width: 120px;
height: 30px;
margin-top: 35px;
margin-left: 30px;
}
.toplast img{
margin: 0;
float: left;
height: 30px;
width: 30px;
border-radius: 50% 50%;
}
.toplast span{
vertical-align: middle;
padding-left:5px;
}
注意，要求里面的 4个盒子 必须都浮动
banner制作
1号盒子是通栏的大盒子banner， 不给宽度，给高度，给一个蓝色背景
.nav{
width: 100%;
height: 420px;
background-color:#1c036c;
}
2号盒子是版心， 要水平居中对齐
.navbox{
width: 1200Px;
height: 420px;
margin: 0 auto;
background-image: url(./images/banner2.png);
}
3号盒子版心内，左对齐侧导航栏
.navbox .u1{
width: 190px;
height: 420px;
float: left;
background-color: rgba(19,1,75,0.5) ;
background-repeat: no-repeat;
}
4号盒子版心内，右对齐 course 课程
.kebiao{
margin-top: 50px;
width: 228px;
height: 300px;
background-color: white;
float: right;
}
左侧导航栏
.navbox a,.navbox li{
background-color: rgba(0, 0, 0, 0) ;
background-repeat: no-repeat;
color: white;
}
.navbox li{
margin: 23px;
}
课程表模块
1号盒子 是 228 * 300 的盒子 右浮动
.kebiao{
width: 228px;
height: 300px;
float: right;
}
1号盒子内 分为 上下 两个 子盒子
我的课程表继续学习 程序语言
正在学习
继续学习 程序语言
正在学习
继续学习 程序语言
正在学习
全部课程
2号子盒子是 上部分
.kebiao h3{
margin: 0 ;
padding: 0;
line-height: 48px;
height: 48px;
width: 228px;
text-align: center;
background-color: #9bceea;
}
3号子盒子是 下部分
.kbs1{
color: #000;
background-repeat: no-repeat;
background-color: white;
}
.kbs2{
font-size: smaller;
color: slategrey;
background-repeat: no-repeat;
background-color: white;
}
.kebiao ul{
height: 252px;
width: 228px;
margin: 0;
padding: 0;
background-repeat: no-repeat;
background-color: white;
}
.kebiao li{
padding:9px 0;
margin:0 20px;
height: 45px;
width: 192px;
border-bottom: 1px solid rgb(203, 206, 209);
}
项目未完待续。。。(详情见下篇)
源代码下载
源码下载地址https://chuenst.lanzous.com/iJXVHgnq8fi