周总结
- HTML5的学习及练习
红米个人案例
<html lang="en">
<head>
<meta charset="UTF-8">
<title>redmititle>
head>
<body>
<div class="father">
<img src="images/red.jpg" alt="">
<h4>小米Redmi红米K30pro 5G手机 (可选变焦版) 天际蓝 变焦版 8G+256G 全网通h4>
<div class="son">
<span class="one"> ¥3199span>
<span class="two"> ¥3599span>
div>
<div class="zi clearfix">
<span class="shu">已售87%span>
<div class="niu">
<div class="little">div>
div>
<span class="wen">剩余29件span>
div>
<div><a href="#">立即抢购a>div>
div>
body>
html>
- 学成在线的案例
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学成在线首页title>
<link rel="stylesheet" href="style.css">
head>
<body>
<div class="header w">
<div class="logo">div>
<div class="nav">
<ul>
<li><a href="#">首页a>li>
<li><a href="#">课程a>li>
<li><a href="#">职业规划a>li>
ul>
div>
<div class="search">
<input class="one" type="text" value="输入关键词" >
<input class="two" type="button">
div>
<div class="user">
<img src="images/user.png" style="vertical-align: middle">
qq-lilei
div>
div>
<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 class="biao">我的课程表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>
<div class="goods w">
<h3>精品推荐h3>
<ul>
<li><a href="#">jQuerya>li>
<li><a href="#">jQuerya>li>
<li><a href="#">jQuerya>li>
<li><a href="#">jQuerya>li>
<li><a href="#">jQuerya>li>
ul>
<a href="#" class="niu">修改兴趣a>
div>
<div class="box w">
<div class="box-hd">
<h3>精品推荐h3>
<a href="#">查看全部a>
div>
<div class="box-bd">
<ul class="clearfix">
<li>
<em>
<img src="images/hot.png" alt="">
em>
<img src="images/pic.png" alt="">
<h4>
Think PHP 5.0 博客系统实战项目演练
h4>
<div class="infor">
<span>高级span>• 1125人在学习
div>
li>
<li><img src="images/pic.png" alt="">
<h4>
Think PHP 5.0 博客系统实战项目演练
h4>
<div class="infor">
<span>高级span>• 1125人在学习
div>
li>
<li><img src="images/pic.png" alt="">
<h4>
Think PHP 5.0 博客系统实战项目演练
h4>
<div class="infor">
<span>高级span>• 1125人在学习
div>
li>
<li><img src="images/pic.png" alt="">
<h4>
Think PHP 5.0 博客系统实战项目演练
h4>
<div class="infor">
<span>高级span>• 1125人在学习
div>
li>
<li><img src="images/pic.png" alt="">
<h4>
Think PHP 5.0 博客系统实战项目演练
h4>
<div class="infor">
<span>高级span>• 1125人在学习
div>
li>
<li><img src="images/pic.png" alt="">
<h4>
Think PHP 5.0 博客系统实战项目演练
h4>
<div class="infor">
<span>高级span>• 1125人在学习
div>
li>
<li><img src="images/pic.png" alt="">
<h4>
Think PHP 5.0 博客系统实战项目演练
h4>
<div class="infor">
<span>高级span>• 1125人在学习
div>
li>
<li><img src="images/pic.png" alt="">
<h4>
Think PHP 5.0 博客系统实战项目演练
h4>
<div class="infor">
<span>高级span>• 1125人在学习
div>
li>
<li><img src="images/pic.png" alt="">
<h4>
Think PHP 5.0 博客系统实战项目演练
h4>
<div class="infor">
<span>高级span>• 1125人在学习
div>
li>
<li><img src="images/pic.png" alt="">
<h4>
Think PHP 5.0 博客系统实战项目演练
h4>
<div class="infor">
<span>高级span>• 1125人在学习
div>
li>
ul>
div>
div>
<div class="footer">
<div class="w">
<div class="copyright">
<img src="images/logo2.png">
<p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br>
© 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号p>
<a href="#" class="app">下载APPa>
div>
<div class="links">
<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>
<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>
<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>
- 学成在线案例
4. {
margin: 0;
padding: 0;
}
.w {
width: 1200px;
margin: 0 auto;
}
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
body {
background-color: #f3f5f7;
}
a {
text-decoration: none;
}
.header {
height: 42px;
/*注意此地方会重叠w中的margin*/
margin: 30px auto;
}
.logo {
float: left;
width: 198px;
height: 42px;
background-image: url(images/logo.png);
}
.nav {
float: left;
font-size: 18px;
margin-left: 60px;
}
.nav ul li {
float: left;
margin: 0 15px;
}
.nav li a {
display: block;
height: 42px;
text-decoration: none;
color: black;
line-height: 42px;
padding: 0 10px;
}
li {
list-style: none;
}
.nav li a:hover {
border-bottom:2px solid skyblue;
color: #00a4ff;
}
.search {
width: 421px;
height: 42px;
float: left;
line-height: 42px;
margin-left: 70px;
}
.search .one {
float: left;
width: 345px;
height: 40px;
border: 1px solid skyblue;
border-right: 0;
color: #bfbfbf;
font-size: 16px;
padding-left: 15px;
}
.search .two {
float: left;
width: 50px;
height: 42px;
/*button默认有一个边框需要我们手动去掉*/
border: 0;
background-image: url(images/tuceng.png);
}
.user {
float: right;
height: 42px;
line-height: 42px;
margin-right: 30px;
font-size: 14px;
color: #666666;
}
.banner {
height: 421px;
background-color: #1c036c;
}
.banner .w {
height: 421px;
background-image: url(images/banner.png);
background-position: top center;
}
.banner .subnav {
float: left;
width: 190px;
height: 421px;
background-color: rgba(0,0,0,.3);
}
.subnav ul li {
height: 45px;
line-height: 45px;
padding: 0 20px;
}
.subnav ul li a {
text-decoration: none;
font-size: 14px;
color: white;
}
.subnav ul li a span {
float: right;
}
.subnav ul li a:hover {
color: #00a4ff;
}
.course {
float: right;
width: 230px;
height: 300px;
background-color: #fff;
/*浮动的盒子不会有外边距合并的问题*/
margin-top: 50px;
}
.course .biao {
height: 48px;
text-align: center;
line-height: 48px;
background-color: #9bceea;
color: white;
}
.course .bd {
padding:0 20px;
}
.bd ul li {
border-bottom: 1px solid #ccc;
padding: 12px 0;
}
.course .bd ul li h4 {
font-size: 16px;
color: #4e4e4e;
}
.bd ul li p {
font-size: 12px;
color: #a5a5a5;
}
.bd .more{
display: block;
text-decoration: none;
height: 38px;
line-height: 38px;
border: 1px solid #00a4ff;
text-align: center;
margin-top: 5px;
color: #00a4ff;
font-size: 16px;
font-weight: 700;
}
.goods {
height: 60px;
background-color: white;
box-shadow: 0 2px 3px 3px rgba(0,0,0,.1);
margin-top: 10px;
/*行高会继承，会继承给h3 ul a*/
line-height: 60px;
}
.goods a {
float: right;
text-decoration: none;
}
.goods h3 {
font-size: 20px;
margin-left: 30px;
float: left;
color: #00a4ff;
}
.goods ul {
padding-left: 30px;
float: left;
}
.goods li {
float: left;
}
.goods ul li a {
font-size: 16px;
color: #050505;
padding: 0 30px;
border-left: 1px solid #ccc;
}
.goods .niu {
margin-right: 30px;
color: #00a4ff;
}
.box {
margin-top: 30px;
}
.box-hd {
height: 45px;
}
.box h3 {
font-size: 20px;
color: #494949;
float: left;
}
.box .box-hd a {
font-size: 12px;
color: #a5a5a5;
float: right;
margin-top: 10px;
margin-right: 30px;
}
/*把li的父亲ul修改的足够宽一行能装开五个盒子就不会换行了*/
.box-bd ul {
width: 1225px;
}
.box-bd ul li {
/*子绝父相*/
position: relative;
/*overflow: hidden;*/
float: left;
width: 228px;
height: 270px;
background-color: #fff;
margin-right: 15px;
margin-bottom: 15px;
}
.box-bd ul li >img {
width: 100%;
}
.box-bd ul li h4 {
margin: 20px 20px 20px 25px;
color: #050505;
font-size: 14px;
font-weight: 400;
}
.box-bd ul li em {
position: absolute;
top: 4px;
right: -4px;
}
.box-bd ul li .infor {
margin: 0 20px 0 25px;
font-size: 12px;
color: #999;
}
.box-bd ul li .infor span {
color: orange;
}
.footer {
height: 415px;
background-color: #fff;
}
.footer .w {
/*会有外边距合并问题*/
/*margin-top: 35px;*/
padding-top: 35px;
}
.footer .copyright {
float: left;
}
.footer .copyright p {
font-size: 12px;
color: #666;
margin-top: 15px;
margin-bottom: 20px;
}
.footer .copyright .app {
display: block;
width: 118px;
height: 35px;
text-align: center;
line-height: 35px;
font-size: 20px;
color: #00a4ff;
border: 1px solid #00a4ff;
}
.footer .links {
float: right;
}
.footer .links dl {
float: right;
margin-left: 100px;
}
.footer .links dl dt {
font-size: 16px;
color: #333;
margin-bottom: 5px;
}
.footer .links dl dd a {
font-size: 12px;
color: #333;
}
- 红米案例
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6、7 专有 */
*zoom: 1;
}
body {
background-color: beige;
}
.father {
width: 300px;
height: 550px;
background-color: white;
margin: 100px auto;
}
.father img {
width: 100%;
height: 350px;
}
.father .son .one {
font-size: 20px;
font-weight: 700;
color: red;
}
.son .two {
font-size: 15px;
color: gray;
text-decoration: line-through;
}
.father .niu {
position: absolute;
top: 9px;
left: 25px;
width: 160px;
height: 8px;
border: 1px solid red;
border-radius: 4px;
margin-left: 40px;
}
.niu .little {
width: 87%;
height: 100%;
background-color: red;
transition: width 1s;
}
.little:hover {
width: 100%;
}
.zi {
position: relative;
height: 30px ;
}
.zi .shu{
position: absolute;
top: 7px;
left: 5px;
font-size: 12px;
}
.zi .wen{
position: absolute;
top: 6px;
right: 15px;
font-size: 12px;
}
a {
display: block;
width: 300px;
height: 55px ;
text-decoration: none;
color: #fff;
background-color: red;
font-size: 20px;
text-align: center;
line-height: 55px;
}