12.4课堂笔记及作业

最新推荐文章于 2023-10-31 16:56:54 发布

huqiang0816

最新推荐文章于 2023-10-31 16:56:54 发布

阅读量459

点赞数

本文链接：https://blog.csdn.net/huqiang0816/article/details/78726223

版权

12.4课堂笔记

1、bootstrap

1.1表单和图片

表单

Bootstrap 提供了一些丰富的表单样式供开发者使用。

基本格式

实现基本的表单样式

<form>
    <div class="form-group">
        <label>电子邮件</label>
        <input type="email" class="form-control" placeholder="请输入您的邮箱..." />
    </div>      
    <div class="form-group">
        <label>密码</label>
        <input type="password" class="form-control" placeholder="请输入您的密码..." />
    </div>
</form>

单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control 类的 input、textarea和 select 元素都将被默认设置宽度属性为 width: 100%;。将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

内联表单

让表单左对齐浮动，并表现为 inline-block 内联块结构

<form class="form-inline">
//注：当小于768px，会恢复独占样式

表单合组

前后增加片段

<div class="form-group">
    <label>价格</label>
    <div class="input-group">
        <div class="input-group-addon">$</div>
        <input type="text" class="form-control" />
        <div class="input-group-addon">.00</div>
    </div>
</div>

不要将表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。

水平排列

让表单内的元素保持水平排列

<form class="form-horizontal"> 
<div class="form-group">
<label class="col-sm-2 control-label">电子邮件</label>
        <div class="col-sm-10">
<input type="email" class="form-control" placeholder="请输入您的电子邮件">

</div>
</div>
</form>
//注：control-label表示和父元素样式同步。

复选框和单选框

<div class="checkbox disabled">
    <label>
        <input type="checkbox" disabled/>体育
    </label>
</div>
<div class="checkbox">
    <label>
        <input type="checkbox" />音乐
    </label>
</div>
<label class="checkbox-inline">
    <input type="checkbox" disabled/>体育
</label>
<label class="checkbox-inline">
    <input type="checkbox" />音乐
</label>

下拉列表

<select class="form-control">
        <option value="">1</option>
        <option value="">2</option>
        <option value="">3</option>
        <option value="">4</option>
</select>

校验状态

设置为错误状态

<div class="form-group has-error">

注：还有其他的状态如下
has-error:错误状态
has-success:成功状态
has-warning:警告状态

label标签同步相应状态

<label class=" control-label">电子邮件</label>

添加额外的图标

文本框右侧内置文本图标

<div class="form-group has-error has-feedback">
    <label class="col-sm-2 control-label">电子邮件</label>
    <div class="col-sm-10">
        <input type="email" class="form-control" placeholder="请输入您的邮箱..." />
            <span class="glyphicon glyphicon-ok form-control-feedback"></span>
    </div>
</div>

glyphicon-ok：成功状态
glyphicon-warning-sign：警告状态
glyphicon-remov：错误状态

控制尺寸

从小到大

<input type="email" class="form-control input-lg" placeholder="请输入您的邮箱..." />
注：也可以设置父元素form-group-lg、form-group-sm来调整

图片

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

作业

临摹米家有品首页

（1）html部分

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>有品</title>
        <link href="css/bootstrap.css" type="text/css" />
        <link href="css/base.css" type="text/css" rel="stylesheet" />
        <link href="css/standard.css" type="text/css" rel="stylesheet" />
        <link href="css/standard-1.css" type="text/css" rel="stylesheet" />
    </head>

    <body>
        <div id="root">
            <div class="home-wrap">
                <div class="m-site-top">
                    <div class="container">
                        <div class="fr">
                            <div class="fl-m-user-con site-item">
                                <div class="m-no-login">
                                    <a href="https://youpin.mi.com/app/shop/login?followup=https%3A%2F%2Fyoupin.mi.com%2F%3Fsource%3Dbdss_bdpc10" class="m-safe-anchor">登录</a>
                                    <a href="https://account.xiaomi.com/pass/register?followup=https%3A%2F%2Fyoupin.mi.com%2F%3Fsource%3Dbdss_bdpc10" class="m-safe-anchor">注册</a>
                                </div>
                                <span class="fl-m-line"></span>
                                <div class="clearfix"></div>
                            </div>
                            <div class="fr-m-download site-item">
                                <a href="#" class="">
                                    <span></span> 下载APP
                                </a>
                                <div class="site-item-nav ">
                                    <div class="site-nav-inner">
                                        <img class="qr-code" src="img/c1.png" />
                                        <p>
                                            下载有品APP<br /> 得新人1000元礼包
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
                <div class="m-header">
                    <div class="container">
                        <div class="m-header-top">
                            <div class="m-logo">
                                <img src="img/c2.png" />
                            </div>
                            <div class="m-card-wrap">
                                <img src="img/c3.png" />
                            </div>
                            <div class="m-search">
                                <div class="search-form ">
                                    <div class="search-card-wrap">
                                        <img src="img/c4.png" />
                                    </div>
                                    <div class="search-input-con">
                                        <input type="text" placeholder="冬日里不能错过的美食" />
                                    </div>
                                    <div class="clearfix"></div>
                                </div>
                            </div>
                        </div>
                        <div class="m-nav">
                            <ul class="nav-list">
                                <li><span class="item">有品推荐</span></li>
                                <li><span class="item">家电</span></li>
                                <li><span class="item">影音</span></li>
                                <li><span class="item">餐厨</span></li>
                                <li><span class="item">服饰</span></li>
                                <li><span class="item">智能</span></li>
                                <li><span class="item">健康</span></li>
                                <li><span class="item">洗护</span></li>
                                <li><span class="item">日杂</span></li>
                                <li><span class="item">饮食</span></li>
                                <li><span class="item">居家</span></li>
                                <li><span class="item">手机</span></li>
                                <li><span class="item">箱包</span></li>
                                <li><span class="item">配件</span></li>
                                <li><span class="item">婴童</span></li>
                                <li><span class="item">出行</span></li>
                                <li><span class="item">品牌</span></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="m-banner">
                    <div class="m-ban-con">
                        <div class="swiper-container">
                            <div class="swiper-wrapper">
                                <a href="#" style="display: block;" data-swiper-slide-index="0"><img src="img/move1.jpg"></a>
                                <a href="#" style="display: none;" data-swiper-slide-index="1"><img src="img/move2.jpg"></a>
                                <a href="#" style="display: none;" data-swiper-slide-index="2"><img src="img/move3.jpg"></a>
                                <a href="#" style="display: none;" data-swiper-slide-index="3"><img src="img/move4.jpg"></a>
                                <a href="#" style="display: none;" data-swiper-slide-index="4"><img src="img/move5.jpg"></a>
                            </div>
                            <div class="swiper-pagination">
                                <span class="swiper-pagination-bullet">
                                    <input type="radio" />
                                </span>
                                <span class="swiper-pagination-bullet">
                                    <input type="radio" />
                                </span>
                                <span class="swiper-pagination-bullet">
                                    <input type="radio" />
                                </span>
                                <span class="swiper-pagination-bullet">
                                    <input type="radio" />
                                </span>
                                <span class="swiper-pagination-bullet">
                                    <input type="radio" />
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="p-hero-wrap">
                    <div class="container">
                        <ul class="p-hreo-nav">
                            <li class="m-tag-a" data-src="https://home.mi.com/app/shop/content?id=r9509d039c0bc6bc4">
                                <img src="img/p1.jpg" alt="" />
                            </li>
                            <li class="m-tag-a" data-src="https://home.mi.com/app/shop/content?id=s8939d03918810635">
                                <img src="img/p2.jpg" alt="" />
                            </li>
                            <li class="m-tag-a" data-src="https://home.mi.com/app/shop/content?id=Vcec75039f10ed7b3">
                                <img src="img/p3.jpg" alt="" />
                            </li>
                            <li class="m-tag-a" data-src="https://home.mi.com/app/shop/content?id=qcec75039f10ed7b3">
                                <img src="img/p4.jpg" alt="" />
                            </li>
                            <li class="m-tag-a no-mr" data-src="https://home.mi.com/app/shop/content?id=rada7d03957b90e05">
                                <img src="img/p5.jpg" alt="" />
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="h-section">
                    <div class="container">
                        <div class="h-sec-top">
                            <h2 class="h-subTit">
                                有品推荐
                                <span>有品为您甄选 悦心购买</span>
                            </h2>
                            <a href="">更多></a>
                            <div class="clearfix"></div>
                        </div>
                        <div class="m-sec-main">
                            <div class="item-pos0" data-src="https://home.mi.com/app/shop/content?id=Vcec75039f10ed7b3">
                                <div class="h-layer-con">
                                    <div data-src="https://home.mi.com/app/shop/content?id=Vcec75039f10ed7b3">
                                        <img src="img/h-sec1-1.jpg" alt="" />
                                        <img src="img/h-sec1-2.png" alt="" />
                                        <div class="clearfix"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="item-pos1" data-src="https://home.mi.com/app/shop/content?id=sd87cd03985daac35">
                                <div class="item-inner  ">
                                    <img src="img/h-sec1-3.jpg" alt="" />
                                </div>
                            </div>
                            <div class="item-pos2" data-src="https://home.mi.com/app/shop/content?id=ma5e65039f6882631">
                                <div class="item-inner  ">
                                    <img src="img/h-sec1-4.jpg" alt="" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                </div>
        </div>
        <!--<script src="js/jquery.js" type="text/javascript"></script>-->
        <script src="js/jquery-2.1.0.js" type="text/javascript"></script>
        <script src="js/bootstrap.js" type="text/javascript"></script>
        <script src="js/base.js" type="text/javascript"></script>
    </body>

</html>

（2）css部分

* {
    margin: 0;
    padding: 0;
}

img {
    border: none;
    cursor: pointer;
}

.clearfix {
    clear: both;
}

.home-wrap {
    min-width: 1080px;
    margin: 0 auto;
}

.container {
    width: 1080px;
    margin: 0 auto;
}

.m-site-top {
    background: #333;
}

.fr {
    float: right;
}

.fr a {
    text-decoration: none;
    color: #fff;
}

.fr .fl-m-user-con {
    float: left;
    height: 48px;
}

.fr .fl-m-user-con .m-no-login {
    float: left;
    width: 90px;
    height: 48px;
    margin-right: 8px;
}

.fr .fl-m-user-con .fl-m-line {
    float: right;
    display: inline-block;
    height: 21px;
    border-left: 1px solid #fff;
    margin-top: 15px;
    margin-left: 6px;
    margin-right: 3px;
}

.fr .fl-m-user-con .m-no-login a {
    line-height: 48px;
    font-size: 16px;
    margin-left: 8px;
}

.fr .fr-m-download {
    float: right;
    margin-left: 5px;
    position: relative;
}

.fr .fr-m-download a {
    display: block;
    height: 48px;
    width: 110px;
    line-height: 48px;
}

.site-item-nav {
    position: absolute;
    top: 48px;
    left: -20px;
    display: none;
}

.site-item-nav .site-nav-inner {
    width: 120px;
    height: 140px;
    font-size: 14px;
    color: #aaa;
    text-align: center;
}

.qr-code {
    width: 100px;
    height: 100px;
}

.m-header {
    padding-top: 20px;
    margin-bottom: 5px;
}

.m-header .m-header-top {
    height: 51px;
}

.m-header .m-header-top>div {
    display: inline-block;
}

.m-header .m-header-top .m-logo img {
    width: 123px;
    height: 45px;
    cursor: pointer;
}

.m-card-wrap,
.m-search {
    float: right;
}

.m-card-wrap {
    margin-top: 23px;
    margin-left: 5px;
}

.search-form {
    padding-top: 18px;
    border-bottom: 1px solid #ccc;
}

.search-card-wrap {
    float: left;
}

.search-input-con {
    float: right;
}

.search-input-con input {
    display: inline-block;
    border: none;
    width: 250px;
    height: 25px;
}

.m-nav {
    margin-top: 30px;
}

.nav-list {
    list-style-type: none;
    font-size: 14px;
    cursor: pointer;
}

.nav-list li {
    margin: 0;
    padding: 0;
    display: inline-block;
    width: 59px;
    height: 46px;
    text-align: center;
    color: #333;
}

.m-banner .m-ban-con {
    width: 1080px;
    margin: 0 auto;
}

.m-banner .m-ban-con .swiper-container {
    position: relative;
}

.m-banner .m-ban-con .swiper-container .swiper-pagination {
    position: absolute;
    height: 21px;
    width: 1080px;
    bottom: 10px;
    text-align: center;
}

.m-banner .m-ban-con .swiper-container .swiper-pagination-bullet {
    cursor: pointer;
    margin-left: 8px;
    margin-right: 8px;
    line-height: 16px;
}

.p-hero-wrap {
    margin-top: 30px;
}

.p-hero-wrap .container .p-hreo-nav {
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
}

.p-hero-wrap .container .p-hreo-nav .m-tag-a {
    display: inline-block;
    margin-right: 102px;
    cursor: pointer;
}

.p-hero-wrap .container .p-hreo-nav .m-tag-a.no-mr {
    display: inline-block;
    margin-right: 0;
}

.p-hero-wrap .container .p-hreo-nav .m-tag-a img {
    width: 130px;
    height: 140px;
}

.h-section {
    margin-top: 90px;
}

.h-section .container .h-sec-top {
    margin-bottom: 20px;
}

.h-section .container .h-sec-top h2 {
    float: left;
    font-size: 24px;
    font-weight: 400;
    color: #333;
}

.h-section .container .h-sec-top h2 span {
    font-size: 14px;
    color: #333;
    margin-left: 10px;
}

.h-section .container .h-sec-top a {
    float: right;
    text-decoration: none;
    cursor: pointer;
    font-size: 16px;
    line-height: 31px;
    color: #666;
}

.h-section .container .h-sec-top a:hover {
    color: #333;
}

.h-section .container .m-sec-main {
    margin-top: 30px;
}

.h-section .container .m-sec-main>div {
    display: inline-block;
}

.h-section .container .m-sec-main .h-layer-con {
    width: 538px;
    height: 206px;
}

.h-section .container .m-sec-main .h-layer-con div {
    position: relative;
    float: left;
}

.h-section .container .m-sec-main .h-layer-con div img {
    width: 538px;
    height: 206px;
    position: absolute;
    left: 0;
    top: 0;
}

.h-section .container .m-sec-main .item-inner {
    position: relative;
}

.h-section .container .m-sec-main .item-inner img {
    width: 266px;
    height: 206px;
}

.h-section .container .m-sec-main .item-inner .pro-text {
    position: absolute;
    left: 0;
    top: 0;
    color: #333;
    padding: 10px;
}

.h-section .container .m-sec-main .item-inner .pro-text .pro-info {
    margin-top: 10px;
    height: 26px;
    line-height: 26px;
}

.h-section .container .m-sec-main .item-inner .pro-text .pro-price {
    height: 26px;
    line-height: 26px;
    color: red;
    font-size: 14px;
}

.h-section .container .m-sec-main .m-progress-wrap .m-bar-con img {
    width: 266px;
    height: 3px;
}

.h-section .container .m-sec-main .m-progress-wrap .m-progress-info {
    margin-top: 10px;
}

.h-section .container .m-sec-main .m-progress-wrap .m-progress-info .fl-m-suppory{
    float: left;
    color: #333;
    font-size: 14px;
}
.h-section .container .m-sec-main .m-progress-wrap .m-progress-info .fr-m-persent{
    float: right;
    margin-right: 15px;
    color: red;
}
.h-section .container .m-sec-main .m-progress-wrap .m-progress-info .fl-m-suppory .sup-num{
    color: red;
    font-size: 16px;
}
.h-section .container .m-sec-main .m-progress-wrap .m-progress-info .fl-m-suppory .m-tag-hot{
    font-size: 16px;
}
.h-section .container .m-sec-main .m-progress-wrap .m-progress-info .fl-m-suppory .sup-num span{
    color: #333;
    font-size: 15px;
}
.h-section .container .m-sec-main .item-pos2 .item-inner{
    width: 266px;
    height: 210px;
}
.h-section .container .m-sec-main .item-pos2 .item-inner .pic{
    position: absolute;
    left: 0;
    top: 0;
}