码迷，mamicode.com
首页 > Web开发 > 详细

html+css 习题

时间：2018-08-11 21:54:30      阅读：200      评论：0      收藏：0      [点我收藏+]

标签：元素   font   院校   NPU   repeat   containe   wrapper   推荐   社区   

 

day02

技术分享图片 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>作业</title>
    <style type="text/css">
        body {
            padding:0;
            margin:0;
        }
        .section {
            text-align: center;
            padding: 20px;
            height:700px;
            color: #fff;
        }
        #nav {
            position: fixed;
            bottom:20px;
            right:10px;
            width:120px;
            height: 521px;
        }
    </style>
</head>
<body>

    <div class="section" id="section01" style="background:#369;">
        <h2>五折抄底</h2>
    </div>
    <div class="section" id="section02" style="background:#f90;">
        <h2>疯狂秒杀</h2>
    </div>
    <div class="section" id="section03" style="background:#1c3;">
        <h2>电视家影</h2>
    </div>
    <div class="section" id="section04" style="background:#234;">
        <h2>冰箱、洗衣机</h2>
    </div>
    <div class="section" id="section05" style="background:#f86;">
        <h2>空凋</h2>
    </div>
    <div class="section" id="section06" style="background:#4bc;">
        <h2>厨房电器</h2>
    </div>
    <div class="section" id="section07" style="background:#5a9;">
        <h2>生活各护</h2>
    </div>
    <div class="section" id="section08" style="background:#61c;">
        <h2>烟灶、热水器</h2>
    </div>
    <div class="section" id="section09" style="background:#7a2;">
        <h2>热销品牌区</h2>
    </div>
    <div class="section" id="section10" style="background:#eb1;">
        <h2>精彩推荐区</h2>
    </div>

    <div id="nav">
        <img src="../../../front-end/dist/images_two/navbar.png" alt="家装节" usemap="#mymap">
    </div>

    <map name="mymap" id="mymap">
        <area shape="rect" coords="0,50,120,85" href="#section01">
        <area shape="rect" coords="0,90,120,125" href="#section02">
        <area shape="rect" coords="0,130,120,165" href="#section03">
        <area shape="rect" coords="0,170,120,205" href="#section04">
        <area shape="rect" coords="0,210,120,245" href="#section05">
        <area shape="rect" coords="0,250,120,285" href="#section06">
        <area shape="rect" coords="0,290,120,325" href="#section07">
        <area shape="rect" coords="0,330,120,365" href="#section08">
        <area shape="rect" coords="0,370,120,405" href="#section09">
        <area shape="rect" coords="0,410,120,445" href="#section10">
        <area shape="circle" coords="58,489,32" href="#">
    </map>

</body>
</html>
图片映射和锚点
技术分享图片 
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        #huawei {
            display:inline-block; /*默认a元素 没有宽高*/
            width: 20px;
            height: 20px;
            background-color:red;

            background: url(./loginv4.png) no-repeat -5px -32px;
        }

        #weixin {
            display:inline-block; /*默认a元素 没有宽高*/
            width: 22px;
            height: 18px;
            background-color:red;

            background: url(./loginv4.png) no-repeat -30px -30px;
        }
        #weibo {
            display:inline-block; /*默认a元素 没有宽高*/
            width: 20px;
            height: 18px;
            background-color:red;

            background: url(./loginv4.png) no-repeat -55px -32px;
        }
        #qq {
            display:inline-block; /*默认a元素 没有宽高*/
            width: 18px;
            height: 18px;
            background-color:red;

            background: url(./loginv4.png) no-repeat -7px -53px;
        }
        #tianyi {
            display:inline-block; /*默认a元素 没有宽高*/
            width: 24px;
            height: 16px;
            background-color:red;

            background: url(./loginv4.png) no-repeat -30px -54px;
        }
        #mahuateng {
            display:inline-block; /*默认a元素 没有宽高*/
            width: 14px;
            height: 18px;
            background-color:red;

            background: url(./loginv4.png) no-repeat -55px -54px;
        }
    </style>
</head>
<body>
    <a id="huawei" title="华为" target="_blank" href="http://www.huawei.com"></a> <br>
    <a id="weixin" title="微信" target="_blank" href="http://www.qq.com"></a> <br>
    <a id="weibo" title="微博" target="_blank" href="http://www.weibo.com"></a> <br>
    <a id="qq" title="qq" target="_blank" href="http://www.qq.com"></a> <br>
    <a id="tianyi" title="tianyi" target="_blank" href="http://www.hicdma.com/"></a> <br>
    <a id="mahuateng" title="mahuateng" target="_blank" href="http://www.qq.com"></a> <br>

</body>
</html>
精灵图
技术分享图片 
import re

#读取文件
with open(‘./示例.md‘, ‘r‘, encoding=‘utf-8‘) as f:
    data = f.read()

# 替换标题 h1~h6
data = re.sub(‘######(.*)‘, r‘<h6>\1</h6>‘, data)
data = re.sub(‘#####(.*)‘, r‘<h5>\1</h5>‘, data)
data = re.sub(‘####(.*)‘, r‘<h4>\1</h4>‘, data)
data = re.sub(‘###(.*)‘, r‘<h3>\1</h3>‘, data)
data = re.sub(‘##(.*)‘, r‘<h2>\1</h2>‘, data)
data = re.sub(‘#(.*)‘, r‘<h1>\1</h1>‘, data)

# 替换 列表
data = re.sub(‘\*(.*)‘, r‘<li>\1</li>‘, data) #替换li
data = re.sub(‘((<li>(.*)</li>\n*)+)‘, r‘<ul>\1</ul>‘, data)

#替换代码块
data = re.sub(‘```([^`]+)```‘, r‘<pre>\1</pre>‘, data)

#把data处理html
html = """
<meta charset="utf-8">
"""

html += data

with open(‘./实例.html‘, ‘w‘, encoding=‘utf-8‘) as wf:
    wf.write(html)
md转html

 

day03

技术分享图片 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日历备忘录</title>
    <style>
        table {
            width: 700px;
            table-layout: fixed;
            border-collapse: collapse;
            font-size:12px;
        }
        th,td {
            border: 1px dotted #999;
        }
        .album-header {
            height:30px;
            background: #add;
        }
        .album-content {
            height: 100px;
            vertical-align: top;
        }
    </style>
</head>
<body>
    <table>
        <tr class="album-header">
            <th>周日</th>
            <th>周一</th>
            <th>周二</th>
            <th>周三</th>
            <th>周四</th>
            <th>周五</th>
            <th>周六</th>
        </tr>

        <tr class="album-content">
            <td>27</td>
            <td>28</td>
            <td>29</td>
            <td>30</td>
            <td>31</td>
            <td>1</td>
            <td>2</td>
        </tr>

        <tr class="album-content">
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8
                <ul>
                    <li>吃饭</li>
                    <li>钓鱼</li>
                    <li>约会</li>
                </ul>
            </td>
            <td>9</td>
        </tr>

        <tr class="album-content">
            <td>10</td>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
            <td>15</td>
            <td>16</td>
        </tr>

        <tr class="album-content">
            <td>17</td>
            <td>18</td>
            <td>19</td>
            <td>20</td>
            <td>21</td>
            <td>22</td>
            <td>23</td>
        </tr>

        <tr class="album-content">
            <td>24</td>
            <td>25</td>
            <td>26</td>
            <td>27</td>
            <td>28</td>
            <td>29</td>
            <td>30</td>
        </tr>
    </table>
</body>
</html>
日历
技术分享图片 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简历表格</title>
    <style>    
        table {
            width: 500px;
            table-layout: fixed;
            border-collapse: collapse;
            font-size: 14px;
        }
        table img {
            width:90px;
        }
        tr {
            height: 40px;
        }
        th,td {
            border:1px solid #999;
        }
    </style>
</head>
<body>
    <table>
        <caption><h3>简历</h3></caption>

        <tr>
            <th>姓名</th>
            <td></td>
            <th>性别</th>
            <td></td>
            <td rowspan="3" style="text-align:center">
                <img src="../../dist/images_one/avatar.jpg" alt="">
            </td>
        </tr>

        <tr>
            <th>出生年月</th>
            <td></td>
            <th>籍贯</th>
            <td></td>            
        </tr>

        <tr>
            <th>政治面貌</th>
            <td></td>
            <th>民族</th>
            <td></td>
        </tr>

        <tr>
            <th>联系电话</th>
            <td></td>
            <th>Email</th>
            <td colspan="2"></td>
        </tr>

        <tr>
            <th>家庭住址</th>
            <td></td>
            <th>毕业院校</th>
            <td colspan="2"></td>
        </tr>

        <tr>
            <th>学历</th>
            <td></td>
            <th>专业</th>
            <td colspan="2"></td>
        </tr>

        <tr>
            <th rowspan="5">学习工作经历</th>
            <th>起止时间</th>
            <th>工作单位</th>
            <th>职务</th>
            <th>岗位职责及业绩成绩</th>
        </tr>

        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>

        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>

        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>

        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>

        <tr style="height:80px">
            <th>个人能力</th>
            <td colspan="4"></td>
        </tr>

        <tr style="height:80px">
            <th>兴趣及爱好</th>
            <td colspan="4"></td>
        </tr>

        <tr style="height:80px">
            <th>个人评价</th>
            <td colspan="4"></td>
        </tr>
    </table>
</body>
</html>
简历

 

小米

技术分享图片 
html{
    color:#000;
    background:#FFF;
}
body, div, dl, dt, dd, ul, ol, li,h1, h2, h3, h4, h5, h6, pre, code,form, fieldset, legend, input, button,textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}
fieldset, img{
    border:0;
}
input,select,textarea{
    outline:none;
}
textarea{
    resize:none;
}
a{
    text-decoration:none;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
    font-style:normal;
    font-weight:normal;
}

ol,
ul {
    list-style:none;
}

caption,
th {
    text-align:left;
}
/* 清除浮动*/
base.css
技术分享图片 
/*通用的样式*/
body {
        font: 14px "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei","Hiragino Sans GB","Heiti SC","WenQuanYi Micro Hei",sans-serif;
}
.container {
    margin: 0 auto;
    width: 1226px;
}
.leftfix {
    float: left;
}
.rightfix {
    float: right;
}
.clearfix{
    clear:both
}

/*banner*/
.page-banner {
    width: 100%;
    height: 120px;
}
.page-banner a {
    display: block;
    height: 120px;
    background:url(‘../images/banner-bg.jpg‘) no-repeat center 0;
}
/*end banner*/

/*header*/
.page-header{
    background:#333;
    height: 40px;
    line-height: 40px;
    color:#b0b0b0;
    font-size: 12px;
}
.page-header a {
    color:#b0b0b0;
}
.page-header-nav li{
    float: left;
}
.page-header-nav li a {
    display: inline-block;
    padding: 0px 7px;
    border-right:1px solid #424242;
    line-height: 1em;
}
.page-header-nav ul li:first-child a {
    padding-left: 0;
}
.page-header-nav ul li:last-child a {
    border-right: 0;
}
.page-header-btn-group a {
    padding:0px 7px;
    border-right: 1px solid #424242;
}
.page-header-btn-group a:last-child {
    border-right: none;
}
.page-header-shopcar  {
    margin-left:15px;
}
.page-header-shopcar a {
    display: block;
    width: 120px;
    text-align: center;
    background-color:#424242;
}
.page-header-shopcar .fa {
    font-size:20px;
    margin-right: 4px;
    vertical-align: middle;
}
/*end header*/

/*page-header2*/
.page-header2 {
    height: 100px;
    line-height: 100px;
}
.page-header2-logo {
    margin-right: 7px;
}
.logo {
    display: inline-block;
    width:55px;
    height:55px;
    line-height: 55px;
    font-size:0px;
    background: #ff6700 url(‘../images/mi-logo.png‘) no-repeat center;
    vertical-align: middle;
}
.page-header2-nav {
    margin-left:7px;
}
.page-header2-nav li{
    float:left;
}
.page-header2-nav li a{
    font-size:16px;
    padding: 0px 10px;
    color: #333;
}
.page-header2-nav li a:hover{
    color: #ff6700;
}
.mi-item a{
    display:block;
    width: 127px;
    height: 100px;
    background:url(‘../images/nav.gif‘) no-repeat center; 
}
.page-header2-nav .mi-item a {
    padding-left:30px;
    padding-right:15px;
}
.search {
    width: 223px;
    height: 50px;
    border: 1px solid #e0e0e0;
    border-right:none;
    padding: 0 10px;
}
.search-btn {
    width:50px;
    height:50px;
    border: 1px solid #e0e0e0;
    background:transparent;
    font-size:24px;
    cursor:pointer;
    outline: none;
}
.search-btn:hover {
    background: #ff6700;
    color:#fff;
}
.page-header2-search {
    position:relative;
    margin-top:25px;
}
.page-header2-search form {
    width:273px;
}

.search-hot-word {
    position: absolute;
    right:55px;
    top:19px;
    height:12px;
    line-height: 1em;
}
.search-hot-word a{
    background:#eee;
    color:#757575;
    padding:0px 3px;
}
.search-hot-word a:hover{
    background:#ff6700;
    color:#fff;
}
/*end page-header1*/


/*轮播图 和 菜单*/
.menu-play-wrapper {
    position: relative;
}
.menu {
    position: absolute;
    z-index: 2;
    padding:20px 0px;
    width: 234px;
    left: 0;
    top: 0;
    background: rgba(0,0,0,.6);
    
}
.menu li{

}
.menu li a {
    display: block;
    position: relative;
    padding-left: 30px;
    height: 42px;
    line-height: 42px;
    color: #fff;
}
.menu li a:hover {
    background: #ff6700;
}
.menu li a i {
    position: absolute;
    right:30px;
    top: 14px;
    opacity: .5;
}
.play-wrapper img {
    width: 100%;
}
.play-wrapper li {
    display: none;
}
.play-wrapper li.current {
    display: block;
}

.play {
    position: relative;
}

.control-list {
    position: absolute;
    bottom:30px;
    right:30px;
    font-size:0;
}
.control-list span {
    display: inline-block;
    margin:0 5px;
    width: 6px;
    height: 6px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 5px;
    background: rgba(0,0,0,0.4);
    cursor: pointer;
}
.control-list span:hover {
    background: rgba(255,255,255,0.4);
    border-color: rgba(0,0,0,0.4);
}
.control-list span.current {
    background: rgba(255,255,255,0.4);
    border-color: rgba(0,0,0,0.4);
}
.control-sider span {
    position: absolute;
    top:50%;
    transform: translate(0, -50%);
    width: 41px;
    height: 69px;
    line-height: 69px;
    text-align: center;
    font-size:30px;
    color:rgba(0,0,0,.3);
    cursor: pointer;
    
    /*transform: translatey(-50%);*/
}
.control-sider span:hover {
    background: rgba(0,0,0,.5);
    color: #fff;
}

.control-left {
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    left:234px;
}
.control-right {
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
    right: 0px;
}
/*轮播图 和 菜单 结束*/


/*page-hero*/
.page-hero {
    margin-top:14px;
}
.tag-list {
    width: 234px;
    background: #5f5750;
}
.tag-list li {
    float: left;
    position: relative;
}
.tag-list li a {
    display: block;
    padding: 18px 10px;
    width: 58px;
    height: 49px;
    color: rgba(255,255,255,0.7);
    text-align: center;
    font-size: 12px;
}
.tag-list li a:hover {
    color: #fff;
}
.tag-list li a i {
    font-size: 30px;
}

.left-line::after {
    content: "";
    position: absolute;
    height: 75px;
    left:0;
    top: 5px;
    border-left: 1px solid #665e57;
}
.top-line::before {
    content: "";
    position: absolute;
    border-top: 1px solid #665e57;
    top: 0;
    left: 5px;
    width: 68px;
}

.banner-list li {
    margin-left: 15px;
    width: 316px;
    height: 170px;
}
.banner-list li:first-child {
    margin-left: 0px;
}

.banner-list img {
    width: 316px;
    height: 170px;
}
/*page-hero end*/

/*page-main*/
.page-main {
    margin-top: 40px;
    background: #f5f5f5;
    overflow: hidden;
}

/*手机闪购*/
.title-box {
    height: 58px;
    line-height: 58px;
}
.title-box h2{
    font-size: 22px;
    font-weight: normal;
    color: #333;
}
.more {
    color: #424242;
    font-size: 16px;
}
.more:hover {
    color: #ff6700;
}
.more i {
    font-size: 18px;
}

.content-box {

}
.content-box-image img {
    width: 234px;
    height: 614px;
}
.product-list {
    width: 978px;
}
.product-item {
    position: relative;
    width: 234px;
    height: 260px;
    padding: 20px 0px;
    background: #fff;
    text-align: center;
    margin-left:14px;
    transition: .5s;
}
.product-item:hover{
    transform: translate(0, -2px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}
.product-item:first-child {
    margin-left: 0;
    margin-bottom: 14px;
}
.product-item:nth-child(2) {
    margin-bottom: 14px;
}
.product-item:nth-child(3) {
    margin-bottom: 14px;
}
.product-item:nth-child(4) {
    margin-bottom: 14px;
}
.product-item:nth-child(5) {
    margin-left: 0;
}
.product-image {
    margin-bottom: 12px;
}
.product-image img {
    width: 160px;
    height: 166px;
}
.product-title{
    margin-bottom:2px;
    font-size: 14px;
    color: #333;
}
.product-title a {
    color: #333;
}
.product-des {
    overflow: hidden;
    width: 214px;
    padding:0 10px;
    margin-bottom:10px;
    color:#b0b0b0;
    font-size:12px;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.product-price span {
    color: #ff6700;
}

.product-price del {
    color: #b0b0b0;
}

.product-item .flag {
    position: absolute;
    top:0;
    left: 50%;
    transform: translatex(-50%); /*代替的是margin-left：-32px*/
    width: 64px;
    height: 20px;
    line-height: 20px;
    color: #fff;
    background: #e53935;
    font-size:12px;
}
.product-message {
    box-sizing: border-box;
    display: block;
    position: absolute;
    bottom:0px;
    background: #ff6700;
    font-size: 12px;
    height: 0px;
    padding: 0px 30px;
    overflow: hidden;
    transition: .5s;
}
.product-item:hover .product-message {
    height: 78px;
    padding:8px 30px;
}
.message {
    color: #fff;
    margin-bottom: 5px;
}

.author {
    color: rgba(0,0,0,.6);
}
/*手机闪购 结束*/



/*页脚*/
.footer-services {
    padding: 27px 0px;
    border-bottom:1px solid #e0e0e0;
    text-align: center;
}
.footer-services a {
    display: inline-block;
    width: 234px;
    font-size: 16px;
    color: #616161;
    border-right: 1px solid #c0c0c0;
}
.footer-services a:last-child {
    border-right: 0;
}

.footer-links {
    padding: 40px 0px;
}
.footer-links-left dl {
    width: 160px;
}
.footer-links-left dt {
    font-size: 14px;
    margin-bottom:26px;
    color: #424242;
}
.footer-links-left dd {
    margin-top: 10px;
    font-size: 12px;
    color: #757575;
}
.footer-links-right {
    width: 252px;
    text-align: center;
    border-left: 1px solid #c0c0c0;
}
.phone-number {
    font-size: 22px;
    color: #ff6700;
    margin-bottom: 5px;
}
.phone-time {
    margin-bottom: 16px;
    color: #616161;
    font-size: 12px;
}
.kefu-btn {
    display: inline-block;
    width:120px;
    height:30px;
    line-height:30px;
    border: 1px solid #ff6700;
    color:#ff6700;

}
.kefu-btn:hover {
    background: #ff6700;
    color: #fff;
}
/*页脚 结束*/
style.css
技术分享图片 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="renderer" content="webkit">
    <title>小米首页</title>
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <!--banner-->
    <div class="page-banner">
        <a href="#"></a>
    </div>

    
    <!--header-->
    <div class="page-header">
        <div class="container">
            <div class="page-header-nav leftfix">
                <ul>
                    <li><a href="#">小米商城</a></li>
                    <li><a href="#">MIUI</a></li>
                    <li><a href="#">loT</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="#">政企服务</a></li>
                    <li><a href="#">Select Region</a></li>
                </ul>
            </div>
            <div class="page-header-shopcar rightfix">
                <a href="#">
                    <i class="fa fa-shopping-cart"></i>
                    购物车
                    <span>(0)</span>
                </a>
            </div>
            <div class="page-header-btn-group rightfix">
                <div class="btn-list">
                    <a href="#" class="btn">登录</a>
                    <a href="#" class="btn">注册</a>
                    <a href="#" class="btn">消息通知</a>
                </div>
            </div>
            
        </div>
    </div>

    <!--header2-->
    <div class="page-header2">
        <div class="container">
            <div class="page-header2-logo leftfix">
                <a href="#" class="logo">小米</a>
            </div>
            <div class="page-header2-nav leftfix">
                <ul class="header2-nav-list">
                    <li class="mi-item"><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="#">盒子</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="#">社区</a></li>
                </ul>
            </div>
            <div class="page-header2-search rightfix">
                <form action="#">
                    <input type="search" name="wd" class="search leftfix" id="search">
                    <button class="search-btn rightfix">
                        <i class="fa fa-search"></i>
                    </button>
                </form>

                <div class="search-hot-word" id="hotWord">
                    <a href="#">小米8</a>
                    <a href="#">小米Max2s</a>
                </div>
            </div>
        </div>
    </div>

    <!--轮播图和菜单-->
    <div class="menu-play-wrapper container">
    
        <!--菜单 定位-->
        <div class="menu">
            <ul>
                <li><a href="#">手机 电话卡 <i class="fa fa-chevron-right"></i></a>  </li>
                <li><a href="#">电视 盒子 <i class="fa fa-chevron-right"></i></a> </li>
                <li><a href="#">笔记本 平板 <i class="fa fa-chevron-right"></i></a> </li>
                <li><a href="#">家电 插线板 <i class="fa fa-chevron-right"></i></a> </li>
                <li><a href="#">出行 穿戴 <i class="fa fa-chevron-right"></i></a> </li>
                <li><a href="#">智能 路由器 <i class="fa fa-chevron-right"></i></a> </li>
                <li><a href="#">电源 配件 <i class="fa fa-chevron-right"></i></a> </li>
                <li><a href="#">个护 儿童 <i class="fa fa-chevron-right"></i></a> </li>
                <li><a href="#">耳机 音响 <i class="fa fa-chevron-right"></i></a> </li>
                <li><a href="#">生活 箱包 <i class="fa fa-chevron-right"></i></a> </li>
            </ul>
        </div>
        <!--轮播图-->
        <div class="play">
            <ul class="play-wrapper">
                <li class="current">
                    <a href="http://www.mi.com" target="_blank">
                        <img src="images/play01.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/play02.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/play03.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/play04.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/play05.jpg" alt="">
                    </a>
                </li>
            </ul>

            <div class="control-list">
                <span class="current">1</span>
                <span>2</span>
                <span>3</span>
                <span>4</span>
            </div>

            <div class="control-sider">
                <span class="control-left">
                    <i class="fa fa-chevron-left"></i>
                </span>
                <span class="control-right">
                    <i class="fa fa-chevron-right"></i>
                </span>
            </div>
        </div>
        
    </div>

    <div class="clearfix"></div>

    <!--page-hero -->
    <div class="page-hero container">
        <div class="tag-list leftfix">
            <ul>
                <li>
                    <a href="#"> <i class="fa fa-mobile-phone"></i><br>  选购手机 </a>
                </li>
                <li class="left-line">
                    <a href="#"><i class="fa fa-mobile-phone"></i><br>选购手机</a>
                </li>
                <li class="left-line">
                    <a href="#"><i class="fa fa-mobile-phone"></i><br>选购手机</a>
                </li>
                <li class="top-line">
                    <a href="#"><i class="fa fa-mobile-phone"></i><br>选购手机</a>
                </li>
                <li class="left-line top-line">
                    <a href="#"><i class="fa fa-mobile-phone"></i><br>选购手机</a>
                </li>
                <li class="left-line top-line">
                    <a href="#"><i class="fa fa-mobile-phone"></i><br>选购手机</a>
                </li>
            </ul>
        </div>
        <div class="banner-list rightfix">
            <ul>
                <li class="leftfix">
                    <a href="#">
                        <img src="images/b1.jpg" alt="">
                    </a>
                </li>
                <li  class="leftfix">
                    <a href="#">
                        <img src="images/b2.jpg" alt="">
                    </a>
                </li>
                <li  class="leftfix">
                    <a href="#">
                        <img src="images/b3.jpg" alt="">
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <div class="clearfix"></div>
    

    <div class="page-main">
        <div class="container">
            
            <!--手机闪购-->
            <div class="phone">
                <div class="title-box">
                    <h2 class="leftfix">手机</h2>
                    <a href="#" class="more rightfix">
                        查看全部
                        <i class="fa fa-chevron-circle-right"></i>
                    </a>
                </div>
                <div class="clearfix"></div>
                <div class="content-box">
                    <div class="content-box-image leftfix">
                        <a href="#">
                            <img src="images/p1.jpg" alt="">
                        </a>
                    </div>
                    <div class="product-list rightfix">
                        <ul>
                            <li class="product-item leftfix">
                                <div class="product-image">
                                    <a href="#">
                                        <img src="images/product01.jpg" alt="">
                                    </a>
                                </div>
                                <h3 class="product-title">
                                    <a href="#">红米6A</a>
                                </h3>
                                <p class="product-des">
                                    AI人脸解锁，小巧全面屏，高性能处理器哈哈哈哈
                                </p>
                                <p class="product-price">
                                    <span>597元</span>
                                    <del>998元</del>
                                </p>

                                <div class="flag">
                                    减20元
                                </div>

                                <a class="product-message" href="#">
                                    <p class="message">小米电视给我惊喜，昨天下午下单，第二天上午就送到家啦...</p>
                                    <p class="author"> 来自于 陈金壮 的评价 </p>
                                </a>
                            </li>

                            <li class="product-item leftfix">
                                <div class="product-image">
                                    <a href="#">
                                        <img src="images/product01.jpg" alt="">
                                    </a>
                                </div>
                                <h3 class="product-title">
                                    <a href="#">红米6A</a>
                                </h3>
                                <p class="product-des">
                                    AI人脸解锁，小巧全面屏，高性能处理器
                                </p>
                                <p class="product-price">
                                    <span>597元</span>
                                    <del>998元</del>
                                </p>
                                <a class="product-message" href="#">
                                    <p class="message">小米电视给我惊喜，昨天下午下单，第二天上午就送到家啦...</p>
                                    <p class="author"> 来自于 陈金壮 的评价 </p>
                                </a>
                            </li>

                            <li class="product-item leftfix">
                                <div class="product-image">
                                    <a href="#">
                                        <img src="images/product01.jpg" alt="">
                                    </a>
                                </div>
                                <h3 class="product-title">
                                    <a href="#">红米6A</a>
                                </h3>
                                <p class="product-des">
                                    AI人脸解锁，小巧全面屏，高性能处理器
                                </p>
                                <p class="product-price">
                                    <span>597元</span>
                                    <del>998元</del>
                                </p>
                                <a class="product-message" href="#">
                                    <p class="message">小米电视给我惊喜，昨天下午下单，第二天上午就送到家啦...</p>
                                    <p class="author"> 来自于 陈金壮 的评价 </p>
                                </a>
                            </li>

                            <li class="product-item leftfix">
                                <div class="product-image">
                                    <a href="#">
                                        <img src="images/product01.jpg" alt="">
                                    </a>
                                </div>
                                <h3 class="product-title">
                                    <a href="#">红米6A</a>
                                </h3>
                                <p class="product-des">
                                    AI人脸解锁，小巧全面屏，高性能处理器
                                </p>
                                <p class="product-price">
                                    <span>597元</span>
                                    <del>998元</del>
                                </p>
                                <a class="product-message" href="#">
                                    <p class="message">小米电视给我惊喜，昨天下午下单，第二天上午就送到家啦...</p>
                                    <p class="author"> 来自于 陈金壮 的评价 </p>
                                </a>
                            </li>

                            <li class="product-item leftfix">
                                <div class="product-image">
                                    <a href="#">
                                        <img src="images/product01.jpg" alt="">
                                    </a>
                                </div>
                                <h3 class="product-title">
                                    <a href="#">红米6A</a>
                                </h3>
                                <p class="product-des">
                                    AI人脸解锁，小巧全面屏，高性能处理器
                                </p>
                                <p class="product-price">
                                    <span>597元</span>
                                    <del>998元</del>
                                </p>
                            </li>

                            <li class="product-item leftfix">
                                <div class="product-image">
                                    <a href="#">
                                        <img src="images/product01.jpg" alt="">
                                    </a>
                                </div>
                                <h3 class="product-title">
                                    <a href="#">红米6A</a>
                                </h3>
                                <p class="product-des">
                                    AI人脸解锁，小巧全面屏，高性能处理器
                                </p>
                                <p class="product-price">
                                    <span>597元</span>
                                    <del>998元</del>
                                </p>
                            </li>

                            <li class="product-item leftfix">
                                <div class="product-image">
                                    <a href="#">
                                        <img src="images/product01.jpg" alt="">
                                    </a>
                                </div>
                                <h3 class="product-title">
                                    <a href="#">红米6A</a>
                                </h3>
                                <p class="product-des">
                                    AI人脸解锁，小巧全面屏，高性能处理器
                                </p>
                                <p class="product-price">
                                    <span>597元</span>
                                    <del>998元</del>
                                </p>
                            </li>

                            <li class="product-item leftfix">
                                <div class="product-image">
                                    <a href="#">
                                        <img src="images/product01.jpg" alt="">
                                    </a>
                                </div>
                                <h3 class="product-title">
                                    <a href="#">红米6A</a>
                                </h3>
                                <p class="product-des">
                                    AI人脸解锁，小巧全面屏，高性能处理器
                                </p>
                                <p class="product-price">
                                    <span>597元</span>
                                    <del>998元</del>
                                </p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="clearfix"></div>

        <div style="height: 200px"></div>
    </div>

    <div class="page-footer">
        <div class="container">
            <div class="footer-services">
                <a href="#"><i class="fa fa-bitbucket"></i> 预约维修服务</a>
                <a href="#"><i class="fa fa-bitbucket"></i> 7天无理由退款</a>
                <a href="#"><i class="fa fa-bitbucket"></i> 预约维修服务</a>
                <a href="#"><i class="fa fa-bitbucket"></i> 预约维修服务</a>
                <a href="#"><i class="fa fa-bitbucket"></i> 520余家售后网点</a>
            </div>
            <div class="footer-links">
                <div class="footer-links-left leftfix">
                    <dl class="leftfix">
                        <dt>帮助中心</dt>
                        <dd>购物管理</dd>
                        <dd>购物指南</dd>
                        <dd>订单操作</dd>
                    </dl>
                    <dl class="leftfix">
                        <dt>帮助中心</dt>
                        <dd>购物管理</dd>
                        <dd>购物指南</dd>
                        <dd>订单操作</dd>
                    </dl>

                    <dl class="leftfix">
                        <dt>帮助中心</dt>
                        <dd>购物管理</dd>
                        <dd>购物指南</dd>
                        <dd>订单操作</dd>
                    </dl>

                    <dl class="leftfix">
                        <dt>帮助中心</dt>
                        <dd>购物管理</dd>
                        <dd>购物指南</dd>
                        <dd>订单操作</dd>
                    </dl>

                    <dl class="leftfix">
                        <dt>帮助中心</dt>
                        <dd>购物管理</dd>
                        <dd>购物指南</dd>
                        <dd>订单操作</dd>
                    </dl>
                    <dl class="leftfix">
                        <dt>帮助中心</dt>
                        <dd>购物管理</dd>
                        <dd>购物指南</dd>
                        <dd>订单操作</dd>
                    </dl>
                </div>
                <div class="footer-links-right rightfix">
                    <p class="phone-number">
                        400-100-5678
                    </p>

                    <p class="phone-time">
                        周一至周日 8:00-18:00
                        <br>
                       （仅收市话费）
                    </p>

                    <a href="#" class="kefu-btn">联系客服</a>
                </div>

            </div>
            <div class="footer-info"></div>


            <div style="height:200px"></div>
        </div>
    </div>



    



    
</body>

<script src="javascript/script.js"></script>
</html>
index.html

 

html+css 习题

标签：元素   font   院校   NPU   repeat   containe   wrapper   推荐   社区   

原文地址：https://www.cnblogs.com/xujinjin18/p/9460993.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！