从上个星期开始,在B站自学HTML+CSS,然后跟着视频做了一个项目
这是自己第一次上手项目,很累但是很值得,现在给大家看看成品
## 1.head
2.body
3.bottom
这上面就是网站的全部啦,很有成就感
首先是HTML的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学成在线</title>
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!-- 头部 -->
<div class="header wrapper">
<a class="one" href=""><img src="./images/logo.png" alt=""></a>
<!-- 导航 -->
<ul class="nav">
<li><a href="">首页</a></li>
<li><a href="">课程</a></li>
<li><a href="">职业规划</a></li>
</ul>
<!-- 搜索 -->
<div class="search">
<input type="text" placeholder="输入关键字">
<button></button>
</div>
<!-- 用户 -->
<div class="user">
<img src="./images/user.png" alt="">
<span>Mr.C</span>
</div>
</div>
<!-- 轮播图banner -->
<div class="banner">
<div class="wrapper">
<div class="left">
<ul>
<li><a href="">前端开发</a></li>
<li><a href="">后端开发</a></li>
<li><a href="">移动开发</a></li>
<li><a href="">大数据</a></li>
<li><a href="">运维测试</a></li>
<li><a href="">UI设计</a></li>
<li><a href="">人工智能</a></li>
<li><a href="">大数据</a></li>
</ul>
</div>
<div class="right">
<h2>我的课程表</h2>
<div class="content"><span class="one">继续学习</span>
<span class="two"> 程序设计</span>
<p>正在学习-使用对象</p>
</div>
<div class="content"><span class="one">继续学习</span>
<span class="two"> 数据结构</span>
<p>正在学习-二叉树</p>
</div>
<div class="content"><span class="one">继续学习</span>
<span class="two"> 计算机组成原理</span>
<p>正在学习-流水线</p>
</div>
<button><a href="">全部课程</a></button>
</div>
</div>
</div>
<!-- 精品推荐 -->
<div class="goods wrapper">
<h2>精品推荐</h2>
<ul>
<li><a href="">JQuery</a></li>
<li><a href="">JavaWeb</a></li>
<li><a href="">MySQL</a></li>
<li><a href="">C++</a></li>
<li><a href="">HTML</a></li>
<li><a href="">JavaScript</a></li>
</ul>
<a href="" class="hobby">修改兴趣</a>
</div>
<!-- 精品课程推荐 -->
<div class="box wrapper">
<div class="title">
<h2>精品推荐</h2>
<a href="">查看更多</a>
</div>
<div class="content clearfix">
<ul>
<li>
<a href="">
<img src="./images/course07.png" alt="">
<h3>Think PHP 5.0博客系统实战项目演练</h3>
<p>
<span>高级</span> · 1125人正在学习
</p>
</a>
</li>
<li>
<a href="">
<img src="./images/course02.png" alt="">
<h3>Android 网络图片加载框架详解</h3>
<p>
<span>高级</span> · 1125人正在学习
</p>
</a>
</li>
<li>
<a href="">
<img src="./images/course03.png" alt="">
<h3>Angular 2 最新框架+主流技术+项目实战</h3>
<p>
<span>高级</span> · 1125人正在学习
</p>
</a>
</li>
<li>
<a href="">
<img src="./images/course04.png" alt="">
<h3>Think PHP 5.0博客系统实战项目演练</h3>
<p>
<span>高级</span> · 1125人正在学习
</p>
</a>
</li>
<li>
<a href="">
<img src="./images/course05.png" alt="">
<h3>Think PHP 5.0博客系统实战项目演练</h3>
<p>
<span>高级</span> · 1125人正在学习
</p>
</a>
</li>
<li>
<a href="">
<img src="./images/course06.png" alt="">
<h3>Think PHP 5.0博客系统实战项目演练</h3>
<p>
<span>高级</span> · 1125人正在学习
</p>
</a>
</li>
<li>
<a href="">
<img src="./images/course08.png" alt="">
<h3>Think PHP 5.0博客系统实战项目演练</h3>
<p>
<span>高级</span> · 1125人正在学习
</p>
</a>
</li>
<li>
<a href="">
<img src="./images/course07.png" alt="">
<h3>Think PHP 5.0博客系统实战项目演练</h3>
<p>
<span>高级</span> · 1125人正在学习
</p>
</a>
</li>
<li>
<a href="">
<img src="./images/course02.png" alt="">
<h3>Think PHP 5.0博客系统实战项目演练</h3>
<p>
<span>高级</span> · 1125人正在学习
</p>
</a>
</li>
<li>
<a href="">
<img src="./images/course03.png" alt="">
<h3>Think PHP 5.0博客系统实战项目演练</h3>
<p>
<span>高级</span> · 1125人正在学习
</p>
</a>
</li>
</ul>
</div>
</div>
<!-- 底部版权 -->
<div class="bottom">
<div class="wrapper">
<div class="left">
<img src="./images/logo.png" alt="">
<p>学成在线致力于普及中国最好的教育,它与中国一流大学和机构合作提供在线课程<br>
@2017年XTCG Inc.保留所有权利。</p>
<button>下载APP</button>
</div>
<div class="right">
<dl>
<dt>合作伙伴</dt>
<dd><a href="">合作机构</a></dd>
<dd><a href="">合作导师</a></dd>
</dl>
<dl>
<dt>新手指南</dt>
<dd><a href="">如何注册</a></dd>
<dd><a href="">如何选课</a></dd>
<dd><a href="">学分是什么</a></dd>
<dd><a href="">考试未通过</a></dd>
</dl>
<dl>
<dt>关于学成网</dt>
<dd><a href="">关于</a></dd>
<dd><a href="">管理团队</a></dd>
<dd><a href="">工作机会</a></dd>
<dd><a href="">客户服务</a></dd>
<dd><a href="">帮助</a></dd>
</dl>
</div>
</div>
</div>
</body>
</html>
其次是CSS的代码
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
body{
background-color: rgb(248, 246, 246);
}
.wrapper{
width: 1200px;
margin: 0px auto;
/* background-color: #cccccc; */
}
.header{
height: 42px;
margin: 30px auto;
}
.one{
float: left;
}
.nav{
float: left;
margin-left: 70px;
height: 42px;
}
.nav li{
float: left;
margin-right: 26px;
}
.nav li a{
height: 42px;
padding: 0px 9px;
display: block;
line-height: 42px;
color: #050505;
font-size: 18px;
}
.nav li a:hover{
border-bottom: 2px solid #00a4ff;
}
.search{
float: left;
width: 412px;
height: 40px;
margin-left: 59px;
}
.search input{
float: left;
width: 360px;
height: 38px;
border: 1px solid #00a4ff;
}
.search input::placeholder{
padding: 15px;
font-size: 14px;
color: #bfbfbf;
}
.search button{
float: left;
width: 50px;
height: 40px;
background-image: url(../images/btn.png);
}
.user{
float: right;
margin-right: 35px;
height: 42px;
line-height: 42px;
}
.user img{
vertical-align: middle;
/* 调节图片垂直对齐方式,middle:居中 */
}
.banner{
height: 420px;
background-color: #1c036c;
}
.banner .wrapper{
background-image: url(../images/banner2.png);
height: 420px;
}
.banner .wrapper .left{
padding: 0 30px;
float: left;
height: 420px;
width: 190px;
background-color: rgba(0,0,0,0.3);
}
.banner .wrapper .left li{
font-size: 16px;
}
.banner .left a{
color: #fff;
}
.banner .left a:hover{
color: #00b4ff;
}
.banner .wrapper .right{
float: right;
width: 228px;
height: 300px;
background-color: #fff;
margin-top:50px ;
}
.banner .right h2{
color: #fff;
background-color: #9bceea;
height: 48px;
text-align: center;
line-height: 48px;
font-size: 18px;
}
.banner .right .content{
padding: 12px 18px;
border-bottom: 2px solid #e5e5e5;
}
.banner .one{
font-size: 16px;
color: #4e4e4e;
}
.banner p{
font-size: 12px;
color: #4e4e4e;
}
.banner button{
width: 200px;
height: 50px;
margin: 5px 14px;
background-color: #fff;
border: 2px solid #9bceea;
}
.banner a{
font-size: 16px;
color: #00a4ff;
font-weight: bold;
display: block;
width: 200px;
height: 50px;
line-height: 50px;
}
.goods{
height: 80px;
width: 1146px;
background-color: #fff;
margin-top: 8px;
box-shadow: 0px 2px 3px 0px rgba(118, 118, 118, 0.2);
padding-left: 34px;
padding-right: 20px;
line-height: 80px;
}
.goods h2{
float: left;
color: #00b4ff;
font-size: 20px;
}
.goods ul{
float: left;
margin-left: 30px;
}
.goods ul li{
float: left;
margin-left: 30px;
}
.goods ul a{
border-left: 1.5px solid #bfbfbf;
padding: 0px 0px 0px 30px;
font-size: 16px;
color: #050505;
}
.goods .hobby{
float: right ;
}
.box{
margin: 35px auto;
}
.box .title{
height: 40px;
}
.box h2{
float: left;
font-size: 20px;
color: #494949;
font-weight: 400px;
}
.box a{
float: right;
margin-right: 30px;
font-size: 12px;
color: #a5a5a5;
}
.box .content li{
float: left;
margin-right: 15px;
margin-top: 15px;
width: 228px;
height: 270px;
background-color: #fff;
box-shadow: 0px 2px 3px 0px rgba(118, 118, 118, 0.2);
}
.box .content a{
margin: 0px;
}
.box .content li:nth-child(5n){
margin-right: 0px;
}
.box .content h3{
padding: 20px;
font-size: 14px;
color: #050505;
font-weight: 400px;
}
.box .content p{
margin-left: 20px;
font-size: 12px;
color: #999;
}
.box .content span{
color: orange;
}
.bottom{
background-color: #fff;
height: 417px;
margin-top: 30px;
padding-top: 30px;
}
.clearfix:before,.clearfix:after{
content:"";
display: table;
}
.clearfix:after{
clear: both;
}
.bottom .left{
float: left;
}
.bottom .right{
float: right;
}
.bottom .left p{
margin-top: 15px;
margin-bottom: 15px;
font-size: 12px;
color: #4e4e4e;
}
.bottom .left button{
width: 120px;
height: 36px;
border: 1px solid #00a4ff;
background-color: #fff;
color: #00b4ff;
}
.bottom .right dl{
float: right;
margin-left: 121px;
}
.bottom dt{
margin-bottom: 10px;
font-size: 16px;
}
.bottom dd{
font-size: 10px;
color: #999;
margin-bottom: 7px;
}
以上就是全部代码啦
下面讲讲自己在敲代码的时候遇到的困难
- li标签浮动没有清除,到底底部的块往上走了
.clearfix:before,.clearfix:after{
content:"";
display: table;
}
.clearfix:after{
clear: both;
}
这个是清楚浮动的代码,只有在父级元素加上类选择器clearfix就可以解决了
如果大家有什么问题,欢迎在底下留言