CSS例子
学成网
需要使用的图片：
代码：
<html>
<head>
<style>
/*CSS初始化*/
* { /*清除内外边框*/
padding: 0;
margin: 0;
}
ul {
list-style: none; /*清除列表样式*/
}
.clearfix:before,.clearfix:after { /*清除浮动*/
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
.clearfix {
zoom: 1;
}
a {
text-decoration: none;
}
input {
border: 0; /*所有表单边框为0*/
box-sizing: border-box; /*border和padding包含到盒子里*/
}
.contanier { /*因为样式相同，事先声明*/
width: 1500px;
margin: 0 auto;
}
/*css初始化结束*/
body {
background-color: #f3f5f7; /*页面背景色*/
}
header { /*页面头部*/
height: 100px;
overflow: hidden; /*防止外边距合并*/
}
nav {
width: 2000px;
height: 42px;
margin: 26px auto 0;
}
.logo{
float: left;
}
.navbar {
height: 42px;
line-height: 42px; /*行高等于高，垂直居中*/
float: left;
margin-left: 52px;
}
.navbar li {
float: left;
}
.navbar li a {
color: #666;
padding: 0 9px;
display: block;
height: 42px;
}
.navbar li a:hover {
border-bottom: 2px solid skyblue;
}
.search {
width: 410px;
height: 40px;
border: 1px solid #00a4ff;
float: right;
}
.search input[type=text] { /*属性选择器 type为text的文本框*/
width: 360px;
height: 40px;
padding-left: 20px;
float: left;
}
.search input[type=submit] {
width: 50px;
height: 40px;
float: left;
background: #00a4ff url(images/search.png) center center no-repeat;
}
.personal {
float: right;
height: 42px;
line-height: 42px;
margin: 0 15px 0 35px;
}
.personal a {
color: #666;
}
.personal img {
margin: 0 10px;
}
/*banner部分*/
.banner {
height: 420px;
background-color: #1c036c;
}
.banner-in {
height: 420px;
background: url(images/pic1.png) center center no-repeat;
}
.sliderbar {
height: 420px;
width: 190px;
background: rgba(0,0,0,0.3); /*盒子背景半透明*/
float: left;
}
.sliderbar li a {
font-size: 16px;
color: white;
padding: 0 20px;
display: block;
height: 45px;
line-height: 45px; /*单行垂直居中有了行高可以不用给高度*/
}
.sliderbar li a span {
float: right;
font-family: Arial, Helvetica, sans-serif;
}
.sliderbar li a:hover {
color: #00a4ff;
}
.timetable {
width: 230px;
height: 300px;
margin-top: 50px ;
background-color: #fff;
float: right;
}
.timetable dt {
height: 50px;
background-color: #00a4ff;
text-align: center;
line-height: 50px;
color: white;
font-weight: 700; /*字体加粗*/
letter-spacing: 2px; /*字符间距*/
margin-bottom: 6px;
}
.timetable dd {
width: 193px;
height: 60px;
margin: 0 auto;
border-bottom: 1px solid #ccc;
padding-top: 12px;
box-sizing: border-box;
}
.timetable dd h4 {
font-size: 16px;
font-weight: normal;
color: #4e4e4e;
}
.timetable dd h5 {
font-size: 14px;
font-weight: normal;
color: #a5a5a5;
}
.timetable dd:last-child {
border: 0;
}
.timetable dd a {
height: 38px;
border: 1px solid #00a4ff;
display: block;
text-align: center;
line-height: 38px;
color: #00a4ff;
font-weight: 700;
}
/*推荐部分*/
.recom {
height: 60px;
background-color: #fff;
margin-top: 10px;
box-shadow: 0 2px 2px rgba(0,0,0,0.2);
}
.recom a {
color: #4e4e4e;
float: left;
display: block;
padding: 20px;
border-right: 1px solid #4e4e4e;
box-sizing: border-box;
}
.recom a:last-child {
float: right;
border: 0;
}
</style>
</head>
<body>
<!--页面头部分-->
<header>
<nav>
<!--logo部分-->
<div class="logo">
<img src="images/logo.png" alt=""/>
</div>
<!--导航栏部分-->
<div class="navbar">
<ul>
<li><a href="">首页</a></li>
<li><a href="">课程</a></li>
<li><a href="">职业规划</a></li>
</ul>
</div>
<!--个人中心部分-->
<div class="personal"> <!--个人中心放到上面因为是右浮动，需要先浮动-->
<a href="">个人中心<img src="images/ld.png" alt=""></a>
<a href=""><img src="images/pic.png" alt="">123</a>
</div>
<!--搜索框部分-->
<div class="search">
<input type="text" placeholder="请输入关键词">
<input type="submit" value=" "> <!--图片背景-->
</div>
</nav>
</header>
<!--banner部分-->
<div class="banner">
<div class="banner-in contanier">
<!--左侧导航栏-->
<div class="sliderbar">
<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="">UI设计 <span>></span> </a></li>
<li><a href="">产品 <span>></span> </a></li>
</ul>
</div>
<!--小课表部分-->
<dl class="timetable">
<dt>我的课程表</dt>
<dd>
<h4>继续学习 程序语言设计</h4>
<h5>正在学习 使用对象</h5>
</dd>
<dd>
<h4>继续学习 程序语言设计</h4>
<h5>正在学习 使用对象</h5>
</dd>
<dd>
<h4>继续学习 程序语言设计</h4>
<h5>正在学习 使用对象</h5>
</dd>
<dd><a href="">全部课程</a></dd>
</dl>
</div>
<!--推荐部分-->
<div class="recom contanier">
<a href="">精品推荐</a>
<a href="">JQuery</a>
<a href="">Spark</a>
<a href="">MySQL</a>
<a href="">JavaWb</a>
<a href="">MySQL</a>
<a href="">JavaWb</a>
<a href="">修改兴趣</a>
</div>
</body>
</html>
