学成在线网站——banner部分的构建
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>学成在线首页</title> <link rel="stylesheet" href="study.css"> </head> <body> <!-- 1.首先确定版心，整个版面的核心 2.分析页面中的行模块，以及每个行模块中的列模块，页面布局第一准则 3.一行中的列模块经常浮动布局，先确定每个列大小之后在确定列的位置，页面布局第二准则 4.制作HTML结构，遵循现有结构后又样式的原则，结构永远是最重要的 5.县里清楚布局结构，然后再去写代码 --> <!--头部区域--> <div class="header w"> <div class="logo"> 盒子 </div> <!--导航栏 实际开发中导航栏的链接制作一般情况下是用li+a做的 1.li+a结构更加清晰，有条理的列表内容 2.如果只使用a搜索引擎很容易辩别为有堆砌关键字的嫌疑（ 故意堆砌关键字容易被搜索引擎有降权的风险 ）从而影响网站排名 --> <div class="nav"> <ul> <li><a href="">首页</a></li> <li><a href="">课程</a></li> <li><a href="">职业规划</a></li> </ul> </div> <!--search外面是一个大盒子里面是一个文本框和一个按钮--> <div class="search"> <input type="text" value="输入关键词"> <button></button> </div> <!--用户头像--> <div class="user"> <img src="kjnij" alt=""><!--放一张图片--> qq-lilei </div> </div> <!--t头部区域结束了--> <!--banner区域 大盒子，里面在来一个内容区域，然后就是其他的浮动小盒子。 --> <div class="banner"> <!--整体来看里面的盒子可以放一个固定的版心盒子一次防止内次的盒子溢出来--> <div class="w"> <div class="subnav"> <ul> <li><a href="#">前端开发 <span> ></span></a></li> <li><a href="#">前端开发 <span> ></span></a></li> <li><a href="#">前端开发 <span> ></span></a></li> <li><a href="#">前端开发 <span> ></span></a></li> <li><a href="#">前端开发 <span> ></span></a></li> <li><a href="#">前端开发 <span> ></span></a></li> <li><a href="#">前端开发 <span> ></span></a></li> <li><a href="#">前端开发 <span> ></span></a></li> <li><a href="#">前端开发 <span> ></span></a></li> </ul> </div> <div class="course"> <h2>我的课程表</h2> <div class="bd"> <ul> <li> <h4> 继续学习，程序语言设计 </h4> <p>正在学习，使用对象</p> </li> <li> <h4> 继续学习，程序语言设计 </h4> <p>正在学习，使用对象</p> </li> <li> <h4> 继续学习，程序语言设计 </h4> <p>正在学习，使用对象</p> </li> </ul> <a href="#" class="more">全部课程</a> </div> </div> </div> </div> </body> </html>
本次代码中没有设么特别需要强调的部分，只是在css中关于浮动的问题，前面的记录中都有提及到，这里简要提示一下：在大盒子中有盒子浮动要浮动全部都得浮动，不然就会出现错误。
还有就是之前的知识，a是行列元素，无法有宽高，对应我们这里右侧的课表最下方他必须要有一个宽高，所以要先变成块级元素才可以进行改变。
下面是css的代码：
* {
margin: 0;
padding: 0;
}
/*书写方式*/
/**
布局定位：display position float等等
自身属性：width padidng background等等
文本属性：color text
其他属性：border-radious等等
**/
/*版心,这一块是我们中间盒子的样式
居中且宽度为1200px写在这里的原因是
如果有盒子需要直接调用即可
*/
.w {
width: 1200px;
margin: auto;
}
body {
background-color: #f3f5f7;
}
/*头部*/
.header {
height: 42px;
/* background-color: palegoldenrod;*/
margin: 30px auto;/*此地方会层叠上面的w*/
}
.logo {
width: 198px;
height: 42px;
/* background-color: powderblue;*/
float: left;
}
li {
list-style: none;
}
.nav {
float: left;
margin-left: 60px;
}
.nav ul li {
float: left;
margin: 0 15px;
}
.nav ul li a {
display: block;/*转化w为块级元素来由宽高*/
height: 42px;/*为啥这里不给宽度是因为给了宽度就固定了从案例来看
我们这里的字数不同所以选择给padding左右值来撑开盒子
*/
padding: 0 10px;
line-height: 42px;
font-size: 18px;
color: black;
text-decoration: none;
}
.nav ul li a:hover{
border-bottom: 2px solid #00a4ff;
color: #00a4ff;
}
.search {
width: 412px;
height: 42px;
/*background-color: burlywood;*/
float: left;
margin-left: 50px;
}
.search input {
float: left;
width: 345px;
height: 40px;
border: 1px solid #00a4ff;
border-right: none;
color: #bfbfbf;
font-size: 14px;
padding-left: 15px;
}
.search button {
float: left;
width: 50px;
height: 42px;
background-color:#00a4ff ;
/*按钮有默认的边框所以我们要去掉*/
/*并且前面的文本输入框和这个按钮一样同属于行内块元素
这里注意两个行内块元素在起事他们之间默认有一个距离所以
当我们直接这样运行的时候按钮会掉下来
解决方案：
给这两个盒子加浮动，浮动的两个盒子之间没有距离
*/
border-style: none;
/* background-image: url();这里我没有图片就这样写路径就行*/
}
.user {
float: right;
line-height: 42px;
margin-right: 30px;
font-size: 14px;
color: #666;
}
/*banner区域*/
.banner {
height: 421px;
background-color: #1c036c;
}
.banner.w {
height: 421px;
background-color: pink;
}
.subnav {
float: left;
width: 190px;
height: 421px;
background-color: rgba(0,0,0,0.3);
}
.subnav ul li {
height: 45px;
line-height: 45px;
padding: 0 20px;
}
.subnav ul li a {
text-decoration-line: none;
font-size: 14px;
color: #f3f5f7;
}
.subnav ul li a:hover {
color: #00a4ff;
}
.subnav ul li a span {
float: right;
}
.course {
float: right;
width:230px;
height: 300px;
background-color: #fff;
margin-top: 50px;
}
.course h2 {
height: 48px;
background-color: #9bceea;
text-align:center;
line-height: 48px;
font-size: 18px;
color: #fff;
}
.bd {
padding: 0 20px;
}
.bd ul li h4 {
font-size: 16px;
color: #4e4e4e;
}
.bd ul li {
padding: 14px 0;
border-bottom: 1px solid #ccc;
}
.bd ul li p {
font-size: 10px;
color: #8d8a8a;
}
.bd .more{
text-decoration: none;
height: 38px;
border: 1px solid #00a4ff;
display: block;
text-align: center;
line-height: 38px;
color: #00a4ff;
font-size: 16px;
font-weight: 700;/*字体加粗中间值是400*/
}
.bd .more:hover {
background-color: #00a4ff;
color: #fff;
}
