- HTML5的學習及練習
紅米個人案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>redmi</title>
</head>
<body>
<div class="father">
<img src="images/red.jpg" alt="">
<h4>小米Redmi紅米K30pro 5G手機 (可選變焦版) 天際藍 變焦版 8G+256G 全網通</h4>
<div class="son">
<span class="one"> ￥3199</span>
<span class="two"> ￥3599</span>
</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>
- 學成在線的案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>學成在線首頁</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--頭部區域-->
<div class="header w">
<!-- logo部分-->
<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>
<!--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 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="#">jQuery</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">jQuery</a></li>
</ul>
<a href="#" class="niu">修改興趣</a>
</div>
<!--box核心區域-->
<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>
<!--footer區域-->
<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">下載APP</a>
</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;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/255225.html
標籤：其他
下一篇：定位