HTML、CSS制作小米商城网页首页源码解析

2023-11-17

简介：
这是我学习前端以来仿写的第一个项目，沿着尚硅谷李立超老师的教学视频学习。
在仿写这个项目的过程中即巩固了这两周以来的知识，也增加了一些小经验（主要是老师传授），同时也让自己更加有信心学习下去。相信自己一定会实现自己的小梦想！加油！

小米官网效果：
在这里插入图片描述
效果图：

文件目录：

HTML文件
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城</title>
    <!-- 重置样式表 -->
    <link rel="stylesheet" href="./XiaomiProject/css/reset.css">
    <!-- 引入公共样式表 -->
    <link rel="stylesheet" href="./XiaomiProject/css/base.css">
    <!-- 引入图标字体库 -->
    <link rel="stylesheet" href="./XiaomiProject/fa/css/all.css">
    <link rel="stylesheet" href="./XiaomiProject/iconfont/iconfont.css">
    <link rel="stylesheet" href="./XiaomiProject/iconfont/tool/iconfont.css">
    <!-- 引入当前页面的样式表 -->
    <link rel="stylesheet" href="./XiaomiProject/css/index.css">
</head>
<body>

    <!-- 顶部导航条 -->
    <!-- 顶部导航条外部容器 -->
    <div class="topbar-waibu">
        <!-- 创建内部容器 -->
        <div class="topbar w">
            <!-- 服务 -->
            <ul class="service">
                <li>
                    <a href="">小米商城</a>
                </li>
                <li class="line">|</li>
                <li>
                    <a href="">MIUI</a>
                </li>
                <li class="line">|</li>
                <li>
                    <a href="">loT</a>
                </li>
                <li class="line">|</li>
                <li>
                    <a href="">云服务</a>
                </li>
                <li class="line">|</li>
                <li>
                    <a href="">金融</a>
                </li>
                <li class="line">|</li>
                <li>
                    <a href="">有品</a>
                </li>
                <li class="line">|</li>
                <li>
                    <a href="">小爱开放平台</a>
                </li>
                <li class="line">|</li>
                <li>
                    <a href="">企业团购</a>
                </li>
                <li class="line">|</li>
                <li>
                    <a href="">资质证照</a>
                </li>
                <li class="line">|</li>
                <li>
                    <a href="">协议规则</a>
                </li>
                <li class="line">|</li>
                <li>
                    <a href="" class="app">下载app
                        <div class="qrcode">
                            <img src="./XiaomiProject/img/download.png" alt="">
                            <p>小米商城APP</p>
                        </div>
                    </a>
                </li>
                <li class="line">|</li>
                <li>
                    <a href="">Select Location</a>
                </li>
            </ul>

            <!-- 注册登录 -->
            <ul class="login">

                <!-- 购物车 -->
                <li class="shop-cart"><a href="javascript:;">
                    <i class="fas fa-shopping-cart"></i>
                    购物车
                </a><div class="shop-list"><span>购物车中还没有商品，赶紧选购吧！</span></div>
                </li>
                <li>
                    <a href="">消息通知</a>
                </li>
                <li class="line">|</li>
                <li>
                    <a href="">注册</a>
                </li>
                <li class="line">|</li>
                <li>
                    <a href="">登录</a>
                </li>
                
            </ul>
        </div>
    </div>

    <!-- 顶部标题栏 -->
    <div class="nav-head">
        <div class="header w">
            <!-- logo -->
            <div class="logos">
                <a href="/" class="home"></a>
                <a href="/" class="logo"></a>
            </div>
            <!-- header导航栏 -->
            <div class="header-nav">
                <ul>
                    <div class="shop-nav">
                        <li class="shop">
                            <a href="">全部商品分类</a>
                            <div class="center-left-nav">
                                <ul>
                                    <li><a href="">手机 电话卡</a><span class="fas fa-angle-right"></span></li>
                                    <li><a href="">电视 盒子</a><span class="fas fa-angle-right"></span></li>
                                    <li><a href="">笔记本 显示器</a><span class="fas fa-angle-right"></span></li>
                                    <li><a href="">家电 插线板</a><span class="fas fa-angle-right"></span></li>
                                    <li><a href="">出行 穿戴</a><span class="fas fa-angle-right"></span></li>
                                    <li><a href="">智能 路由器</a><span class="fas fa-angle-right"></span></li>
                                    <li><a href="">电源 配件</a><span class="fas fa-angle-right"></span></li>
                                    <li><a href="">健康 儿童</a><span class="fas fa-angle-right"></span></li>
                                    <li><a href="">耳机 音箱</a><span class="fas fa-angle-right"></span></li>
                                    <li><a href="">生活 箱包</a><span class="fas fa-angle-right"></span></li>
                                </ul>
                            </div>
                        </li>
                    </div>
                    <div class="auterlist">
                        <li class="list">小米手机</li>
                        <li class="list">Readmi 红米</li>
                        <li class="list">电视</li>
                        <li class="list">笔记本</li>
                        <li class="list">家电</li>
                        <li class="list">路由器</li>
                        <li class="list">智能硬件</li>
                        <li class="alist"></li>
                    </div>
                    <li><a href="">服务</a></li>
                    <li><a href="">社区</a></li>
                </ul>
            </div>
            <!-- 右侧搜索框 -->
            <div class="search">
                <form action="">
                    <input type="text" value="  Readmi Note 9 Pro">
                    <div class="textlist">
                        <ul>
                            <li>小米11</li>
                            <li>笔记本</li>
                            <li>Note 9</li>
                            <li>耳机</li>
                            <li>小米10</li>
                            <li>加湿器</li>
                            <li>洗衣机</li>
                            <li>全部商品</li>
                        </ul>
                    </div>
                    <button><i class="fas fa-search"></i></button>
                </form>
            </div>
        </div>
    </div>
    
    <!-- 中部轮播图 -->
    <div class="auter-banner">
        <div class="banner w">
            <ul class="image-list">
                <li>
                    <a href=""><img src="./XiaomiProject/img/banner1.jpg" alt=""></a>
                </li>
                <li>
                    <a href=""><img src="./XiaomiProject/img/banner2.jpg" alt=""></a>
                </li>
                <li>
                    <a href=""><img src="./XiaomiProject/img/banner3.jpg" alt=""></a>
                </li>
                <li>
                    <a href=""><img src="./XiaomiProject/img/banner4.jpg" alt=""></a>
                </li>
                <li>
                    <a href=""><img src="./XiaomiProject/img/banner5.jpg" alt=""></a>
                </li>
            </ul>

            <div class="left-arrow">
                <p class="iconfont">&#xe62b;</p>
            </div>
            <div class="right-arrow">
                <p class="iconfont">&#xe62a;</p>
            </div>

            <ul class="point-list">
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href="" class="active"></a></li>
            </ul>
        </div>
    </div>

    <!-- 底部工具栏 -->
    <div class="bottom">
        <div class="bottom-nav w">
            <ul class="left-bar">
                <li>
                    <a href="">
                        <i class="iconfont">&#xe63a;</i>
                        <p>小米秒杀</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <i class="iconfont">&#xe613;</i>
                        <p>企业团购</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <i class="iconfont">&#xe632;</i>
                        <p>F码通道</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <i class="iconfont">&#xe637;</i>
                        <p>米粉卡</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <i class="iconfont">&#xe71a;</i>
                        <p>以旧换新</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <i class="iconfont">&#xe6a8;</i>
                        <p>话费充值</p>
                    </a>
                </li>
                <ul class="line-row">
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
                <ul class="line-col">
                    <li></li>
                    <li></li>
                </ul>
            </ul>
            <div class="img-list">
                <img src="./XiaomiProject/img/1.jpg" alt="">
                <img src="./XiaomiProject/img/2.jpg" alt="" class="img2">
                <img src="./XiaomiProject/img/3.jpg" alt="">
            </div>
        </div>
    </div>

    <!-- 右侧固定窗格 -->
    <div class="tool">
        <ul>
            <li class="iconfont">
                <p></p><i>&#xe607;</i>
            </li>
            <li class="iconfont">
                <p></p><i>&#xe658;</i>
            </li>
            <li class="iconfont">
                <p></p><i>&#xe614;</i>
            </li>
            <li class="iconfont">
                <p></p><i>&#xe848;</i>
            </li>
            <li class="iconfont">
                <p></p><i>&#xe64e;</i>
            </li>
        </ul>
    </div>
</body>
</html>

CSS文件
1、base.css

/* 公共样式 */
.clearfix::before,
.clearfix::after{
    content: '';
    display: table;
    clear: both;
}

/* 去除a的下划线 */
a{
    text-decoration: none;
    color: #333;
}

body{
    font:14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
    color: #333;
    min-width: 1226px;
}

/* 设置一个类，用来表示中间容器的宽度 */
.w{
    /* 固定容器的宽度 */
    width: 1226px;
    /* 设置容器居中 */
    margin: 0 auto;
}

2、index.css

/* 主页的CSS样式 */

/* 顶部导航的容器 */
.topbar-waibu{
    /* 设置全屏宽度 */
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: #333;
}

/* 顶部字体颜色 */
/* 设置左侧的导航栏 */

.service,.topbar li{
    float: left;
    font-size: 13px;
    color: #474747;
    margin-right: 8px;
}
.topbar a{
    display: inline-block;
    font-size: 12px;
    color: #b0b0b0;
    position: relative;
}
/* 右侧登录注册 */
.topbar .login li{
    float: right;
    position: relative;
}
/* 购物车 */
.topbar-waibu .topbar .login{
    margin-right:-8px;
}
.topbar .login .shop-cart{
    position: relative;
    float: right;
    background-color: #424242;
    width: 120px;
    height: 40px;
    margin-left: 25px;
    text-align: center;
    vertical-align: middle;
    z-index: 20;
}
.topbar .login .shop-cart a{
    width: 120px;
}

/* 鼠标移入菜单项的操作 */
.topbar a:hover{
    color: white;
}
.topbar .shop-cart:hover,.shop-cart:hover a{
    color: #FF6700;
    background-color: white;
}

/* 顶部导航下拉层 */
/* 下载app弹框 */

/* app下的小三角 */
.app .qrcode::before{
    content: '';
    position: absolute;
    width: 0px;
    height: 0px;
    display: block;
    border: 8px solid transparent;
    border-top: none;
    border-bottom-color:white;
    left: 50px;
    top: -8px;
}
.topbar .app .qrcode{
    /* display: none; */
    width: 124px;
    height: 0px;
    overflow: hidden;
    transition: height 0.3s;
    text-align: center;
    line-height: 1;
    background-color: white;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
    position: absolute;
    left: -35px;
    z-index: 2;
}
.qrcode p{
    color: #424242;
}
.app .qrcode img{
    position: relative;
    width: 90px;
    height: 0px;
    margin: 17px;
    margin-bottom: 13px;
    transition: height 0.2s;
}
.app:hover .qrcode img{
    height: 90px;
}
.topbar li .app:hover .qrcode{
    height: 148px;
    overflow: visible;
}
/* 购物车弹窗 */
.topbar .login .shop-list{
    /* position: relative; */
    width: 310px;
    height: 0px;
    transition: height 0.3s;
    overflow: hidden;
    background-color: white;
    margin-left: -190px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
    z-index: 1;
}
.topbar .login .shop-list span{
    font-size: 8px;
    color: #424242;
    display: block;
    width: 310px;
    height: 100px;
    padding-top: 28px;
    /* margin: 150px auto; */
}
.topbar .shop-cart:hover .shop-list{
    height: 100px;
}


/* 顶部标题栏header */
.nav-head{
    width: 100%;
    height: 100px;
    position: relative;
}
.header{
    height: 100px;
    /* background-color: aqua; */
}

/* 左侧logo */
.logos{
    height: 100px;
    width: 55px;
    position: absolute;
    float: left;
    height: 55px;
    width: 55px;
    overflow: hidden;
    margin:22.5px 0px;
    /* margin-left: 15px; */
} 
.header .logos .logo,.logos .home{
    position: absolute;
    width: 55px;
    height: 55px;
    float: left;
    background-color: #ff6700;
}
.logos .home{
    left: -55px;
    background-image: url('../img/mi-home.png');
    background-position: center;
    transition: left 0.2s;
}
.logos .logo{
    left: 0px;
    background-image: url('../img/mi-logo.png');
    background-position: center;
    transition: left 0.2s;
}
.logos:hover .home{
    left: 0px;
}
.logos:hover .logo{
    left: 55px;
}

/* 头部导航栏 */
.header-nav{
    float: left;
    height: 100px;
    width: 850px;
    margin-left: 77px;
    line-height: 100px;
}
.header-nav .shop-nav {
    /* visibility: hidden; */
    font-size: 16px;
    height: 100px;
    width: 110px;
    float: left;
    margin-left: 60px;
    /* margin-right: -50px; */
    /* padding-left: 30px; */
}
.header .header-nav .shop-nav .shop > a{
    /* height: 100px; */
    visibility: hidden;
}
.header-nav ul > li,.header-nav ul .list{
    font-size: 16px;
    height: 100px;
    position: relative;
    float: left;
    margin: 0px 10px;
}
.header-nav li:hover,.header-nav a:hover{
    color: #FF6700;
}

/* header下拉层 */
.auterlist{
    width: 520px;
    /* position: relative; */
    float: left;
}
.header .alist{
    position: absolute;
    top: 100px;
    left: -10px;
    width: 100%;
    height:0px;
    background-color: white;
    transition: height 0.3s;
}
.header-nav ul .auterlist:hover .alist{
    height: 200px;
    border-top: 1px #E3E3E3 solid;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, .3);
    z-index: 2;
}
/* header 右侧搜索框 */
.nav-head .header .search{

    height: 50px;
    line-height: 50px;
    position: relative;
    width: 296px;
    margin: 25px auto;
    float: left;
    background-color: red;
}
.header .search input{
    color: #757575;
    float: left;
    /* margin:25px auto; */
    width: 241px;
    height: 49px;
    padding: 0px;
    background-color: white;
    border: 1px #E3E3E3 solid;
    outline: none;
    border-right: none;
}
.header .search button{
    font-size: 18px;
    color: #616161;
    background-color: white;
    float: left;
    /* margin: 25px 0px; */
    width: 52px;
    line-height: 49px;
    padding: 0px;
    border: 1px #E3E3E3 solid;
    /* border-left: none; */
    box-sizing: content-box;
    outline: none;
}
.header .search:hover input,.search:hover button{
    border-color: #B0B0B0;
}
.header .search button:hover{
    color: white;
    background-color: #FF6700;
    border: 1px #ff6700 solid;
}
/* 设置文本框获取焦点后的变化 */
.header .search input:focus
{
    border: 1px #FF6700 solid;
    border-right: none;
}
.header .search input:focus + .textlist{
    display: block;
}
.header .search input:focus + .textlist + button{
    border: 1px #FF6700 solid;
    /* border-left: none; */
}
/* 文本框获取焦点时的弹框 */
.textlist{
    display: none;
    border: 1px #FF6700 solid;
    height: 242px;
    position: absolute;
    width: 241px;
    top: 50px;
    background-color: white;
    z-index: 2;
    /* border: 1px #FF6700 solid; */
}
.header .search .textlist li{
    font-size: 12px;
    color: #424242;
    line-height: 30px;
    margin-left: 15px;
}


/* 中部左侧导航栏 */
.header .shop-nav .shop .center-left-nav{
    position: relative;
    left: -137px;
    width: 234px;
    height: 420px;
    padding: 20px 0px;
    background-color: rgba(255, 255, 255, 0.3);
    z-index: 2;
}
.header .shop-nav .shop .center-left-nav li{
    width: 204px;
    height: 42px;
    font-size: 14px;
    line-height: 42px;
    margin: 0px;
    padding-left: 30px;
}
.header .shop-nav .shop .center-left-nav li a{
    color: white;
    float: left;
}
.header .shop-nav .shop .center-left-nav li span{
    font-size: 16px;
    color: white;
    display: block;
    line-height: 42px;
    margin-right: 24px;
    float: right;
}
.header .shop-nav .shop .center-left-nav li:hover{
    background-color: #FF6700;
}


/* 中部轮播图banner */
.banner{
    height: 460px;
    position: relative;
}
.banner .image-list li{
    width: 1226px;
    height: 460px;
    position: absolute;
}
.banner img{
    width: 100%;
    height: 460px;
}
.banner .point-list{
    width: 100px;
    height: 12px;
    /* background-color: red; */
    position: absolute;
    right: 35px;
    bottom: 35px;
    z-index: 2;
}
.banner .point-list li{
    float: left;
    width: 6px;
    height: 6px;
    margin:0px 4px;
    border: 3px rgba(175, 175, 175, 0.5) solid;
    background-color: rgba(0,0,0,0.4);
    border-radius: 6px;
    /* background-color: wheat; */
}
.banner .point-list li:hover{
    background-color: white;
}
.banner .image-list li:nth-child(3){
    z-index: 1;
}
.banner .point-list li:nth-child(3){
    background-color: rgba(255, 255, 255, 0.6);
}

/* 控制箭头 */
.banner .left-arrow{
    position: absolute;
    top: 195px;
    left: 234px;
    z-index: 1;
    width: 40px;
    height: 70px;
    line-height: 70px;
    /* background-color: red; */
}
.banner .right-arrow{
    position: absolute;
    top: 195px;
    left: 1186px;
    z-index: 1;
    width: 40px;
    height: 70px;
    line-height: 70px;
    /* background: red; */
}
.banner .left-arrow p,.banner .right-arrow p{
    color: #D4CFD1;
    /* width: 40px; */
    font-size: 30px;
    text-align: center;
    /* background-color: wheat; */
}
.banner .left-arrow:hover,
.banner .left-arrow:hover p,
.banner .right-arrow:hover,
.banner .right-arrow:hover p{
    color: #EFE7E3;
    background: rgba(0,0,0,0.4);
}


/* 底部工具栏 */
.bottom{
    height: 170px;
    margin-top: 14px;
    /* position: relative; */
}
.bottom .bottom-nav{
    position: relative;
    height: 170px;
}
.bottom .bottom-nav .left-bar{
    position: relative;
    width: 234px;
    height: 170px;
    float: left;
    margin-right: 14px;
    background-color: #5f5750;
}

.bottom .bottom-nav .left-bar li{
    float: left;
    height: 85px;
    width: 78px;
    text-align: center;
}
.bottom .bottom-nav .left-bar li i{
    color: #CFCCCA;
    display: block;
    height: 23px;
    margin-top: 20px;
    margin-bottom: 7px;
    font-size: 22px;
}
.bottom .bottom-nav .left-bar li p{
    font-size: 10px;
    color: #CFCCCA;
}
.bottom .bottom-nav .left-bar li:hover p,
.bottom .bottom-nav .left-bar li:hover i{
    color: white;
}

/* 工具框内部白线 */
.bottom .bottom-nav .left-bar .line-row li{
    position: relative;
    top: -84px;
    height: 1px;
    width: 64px;
    margin: 0px 7px;
    float: left;
    background-color: #665E57;
}
.bottom .bottom-nav .left-bar .line-col li{
    position: relative;
    top: -170px;
    height: 70px;
    width: 77px;
    margin: 6px 78px;
    margin-top: 8px;
    border: 1px #665E57 solid;
    border-top: none;
    border-bottom: none;
    z-index:none;
}
.bottom-nav .img-list{
    float: left;
    width: 978px;
}
.bottom-nav .img-list img{
    width: 316px;
}
.bottom-nav .img-list .img2{
    margin: 0px 11px;
}

.tool{
    width: 26px;
    height: 206px;
    position: fixed;
    bottom: 100px;
    right: 50%;
    margin-right: -639px;
    z-index: 1;
}
.tool ul li i{
    float: left;
    border: 1px #F5F5F5 solid;
    font-size: 20px;
    width: 26px;
    line-height: 41px;
    margin-top: -1px;
    text-align: center;
    background-color: white;
}
.tool ul li:hover{
    color: #FF6700;
}

3、reset.css

/* v2.0 | 20110126
  http://meyerweb.com/eric/tools/css/reset/ 
  License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

积跬步，至千里！加油，上学人！

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

CSS3

html5

css

html

HTML、CSS制作小米商城网页首页源码解析的相关文章

无法更改 SVG 元素的类名

我想通过单击按钮来更改应用于 SVG 的类代码是here http jsfiddle net p19rnmev 我的 SVG 看起来像
使用 CSS 删除不需要的表格单元格边框

我有一个奇怪且令人沮丧的问题对于简单的标记 table thead tr th 1 th th 2 th th 3 th tr thead tbody tr td a td td b gt td td c td tr tr class o
是否可以通过 CSS 3 使用文本内容设置元素中文本的颜色？

好吧这更像是一个有很多非 CSS 解决方案的问题但我希望更多地从理论角度来做这件事我有一个它的应用程序但不值得以任何其他方式对其进行编码有趣的问题如何使用元素的文本为元素的文本着色我有一个元素全部都是它自己的它将包含颜色
html 中的输入字段可以有多少个字符？

html 输入字段中允许的自然字符数是多少多谢根据评论添加我不需要通过邮寄或获取将其发送到服务器我将通过 JS 解析字符串因此如果输入是无限的就像 sAc 所说这会给我带来两个进一步的问题 JS 最长的 String 可
菜单作为水平无序列表或表格？

我有一个无序列表水平显示为页面的顶部菜单栏我已经让它显示得相对较好尽管我一直在调整 IE6 和 IE7 的间距因为它无法正常显示令人震惊无论哪种情况使用表格来显示菜单还是使用一些CSS hack 我找不到解决方法会更好吗显
scrollWidth/scrollHeight 给出无效尺寸

如所述https developer mozilla org en Determining the dimensions of elements https developer mozilla org en Determining the
如何更改chart.js中的标签颜色？

我有一个像这样定义的饼图 var myChart new Chart ctx type doughnut data labels data labels datasets data data values backgroundColor r
水平滚动条仅出现在页面底部

我有一个具有以下 HTML 结构的页面 div class wrapper div The wrapper被设置为min width 1100px至于原因我就不多说了因此当浏览器大小调整为小于 1100px 时我希望出现水平滚动条我
将 div 设置为 post 方法结果页面的目标容器

我有一个 div 标签也分为两个 div 这是代码 div div div div
SASS如何在旋转body时使页面完整的高度和宽度？

我必须旋转我的身体并做到这一点全高 and 全屏宽度嗯我用的是vh公制并且非常适合width但身高还是不太合适我不得不旋转 90 度但是height and width仍然指相同的方向not rotate PS 我添加了 red以便更
为什么 jQuery 点击事件会多次触发

我这里有这个示例代码http jsfiddle net DBBUL 10 http jsfiddle net DBBUL 10 document ready function creategene click function confir
将一个文本框的内容复制到另一个文本框

假设在文本框中输入了一个条目是否可以在第二个文本框中保留相同的输入文本如果是这样这是如何完成的
jQuery .val() 返回单选按钮的未定义

我正在尝试获取 jQuery 中选中的单选按钮值但它返回的值是未定义我搜索了这个问题的解决方案但对我来说没有任何作用我的 HTML 代码
PHP函数返回值到html标签

我想获取函数的返回值并将其显示到特定的id 在我的 Class php 中我有一个名为 login 的函数用于验证密码是否正确不正确
响应式网格布局框架[关闭]

就目前情况而言这个问题不太适合我们的问答形式我们希望答案得到事实参考资料或专业知识的支持但这个问题可能会引发辩论争论民意调查或扩展讨论如果您觉得这个问题可以改进并可能重新开放访问帮助中心 help reopen questi
使用模态表单 ajax 超出 HTMLFormElement.toString 的最大调用堆栈大小

我想使用模态窗口中的 ajax 请求提交表单单击此链接可打开该模式 a class btn btn primary i class fa fa edit i Write a review a 模态窗口 div class modal fa
如何改变HTML5视频的播放速度？

如何更改 HTML5 中的视频播放速度我查过视频标签的属性 https www w3schools com html html5 video asp在 w3school 但无法做到这一点根据这个网站 http www chipwreck
角度 2 中的动态 styleUrls？

是否可以将样式表的 url 动态注入到组件中就像是 styleUrls stylesheet1 css this additionalUrls 或者一厢情愿并注意这只是假代码 export class MyComponent imple
电话号码上未拾取结构化数据

我在网站上有以下代码片段当我通过 Google 结构化数据测试工具运行此程序时它不会获取电话号码我不确定我哪里错了 div class telephone number p Call Us a href 07749 918 143 a
我可以使用 jQuery 动态创建文件（及其内容）吗？ [关闭]

很难说出这里问的是什么这个问题是含糊的模糊的不完整的过于宽泛的或修辞性的无法以目前的形式得到合理的回答如需帮助澄清此问题以便重新打开访问帮助中心 help reopen questions 这是我的 HTML 代码 ul li

随机推荐

Vue实例挂载的过程

一思考与分析我们都听过知其然知其所以然这句话那么不知道是否思考过new Vue 这个过程中究竟做了些什么过程中是如何完成数据的绑定又是如何将数据渲染到视图的等等首先找到vue的构造函数源码位置 src core instanc
因为强行关机，而导致的fedora23 不能重新启动，卡在开机logo那里的修复解决方案...

其实 fedora23的U盘live 也很好用很流畅主要还是要用一个比较好的快的 U盘这样live U盘在4GB 3 75GiB 的内存中还是较快的原来的U盘live系统用得很卡可能是因为 U盘太烂的原因要方便的使用live
SAXParserFactoryImpl cast SAXParserFactory异常

Caused by java lang ClassCastException com sun org apache xerces internal jaxp SAXParserFactoryImpl cannot be cast to ja
web攻击日志分析之新手指

0x00 前言现实中可能会经常出现web日志当中出现一些被攻击的迹象比如针对你的一个站点的URL进行SQL注入测试等等这时候需要你从日志当中分析到底是个什么情况如果非常严重的话可能需要调查取证谁来做的这个事情攻击流程是什么样子的
AlibabaProtect 卸载，不使用其他软件

背景发现系统中存在AlibabaProtect服务停止不掉文件夹也删除不掉还占用内存 CPU 在网上也搜了很多其他的步骤发现不太容易这是整理的比较简单的不需要装其他软件步骤 1 删除注册表 AlibabaProtect搜索之
华为OD机试-最长连续方波信号

Online C compiler to run C program online include
docker-engine安装

最近一直在使用docker 做一些试验每个新机器都需要部署docker的环境环境信息如下 RedHat 7 2 安装 docker官方的安装 docker engine 1 sudo rpm import https sks keyse
Webpack5优化之提高代码运行性能(Preload、Network Cache、Core-js、PWA)

文章目录一 Preload Prefetch 1 1 为什么 1 2 是什么 1 2 1 共同点 1 2 2 区别 1 2 3 问题 1 2 4 总结 1 3 怎么样 1 3 1 安装依赖 1 3 2 配置 1 3 3 测试二 Netw
python获取微信群消息_python-itchat 统计微信群、好友数量,及原始消息数据的实例...

coding utf 8 import itchat from itchat content import TEXT from itchat content import import sys import time import re r
LeetCode Week 4

LeetCode Week 4 练腿是最虐的项目没有之一问题集合 1 Reverse Words in a String III Easy 557 Given a string you need to reverse the order
如何高效安装MindSpore的GPU版本

作者王磊更多精彩分享欢迎访问和关注 https www zhihu com people wldandan MindSpore的GPU版本以前的安装指南只写清楚了安装依赖但没有明确指出安装具体执行的命令缺乏实操性比较依赖开发者
整流七 - 三相PWM整流器—公式推导篇

此篇文章为了进一步理解三相pwm整流器前期的四象限产品以及仿真模型都没有彻底理解三相pwm整流器的数学模型于是现在开始一步步推到整流器各个环节的数学公式三相PWM整流器拓扑结构补充三相 VSR 中交流侧电感的设计尤为重要起到
面积积分_A-level数学：必考题型之积分求面积解题技巧汇总！！！

对于A level 数学的pure Math考试部分总有那么一道积分求面积的题很多同学在做这种题的时候总是觉得即使自己充分调动学过的所有公式都无法做出来导致失分那么今天潘老师带大家一起总结一下 1积分的物理意义我们知道积分其实是微
SAR成像系列：【15】合成孔径雷达（SAR）运动补偿

不同于光学图像 SAR图像的获取的本质是方位信号的累积结果也就是说是在合成孔径时间内的电磁波照射结果类似于光学成像中的延时拍照通常使用手机拍照时若拍照的手臂出现抖动那么得到的照片就会变模糊同样的现象也会出现在SAR图像中 SAR
如何写监听回调（事件完成监听、点击响应监听）

转载请注明出处如何写监听回调事件完成监听点击响应监听 Mr Leixiansheng的博客 CSDN博客主要对监听回调做一个简单说明监听的作用某一事件只要出现就会调用其对应的方法进行响应操作方式有2 1 常规方式和控件设
对虚拟机原有磁盘扩容

对虚拟机原有磁盘扩容扩容不会导致数据丢失 1 先关闭虚拟机手动去虚拟机的硬盘扩容 2 lsblk df h查看磁盘容量 3 fdisk dev sda命令扩展输入P查看分区的start和end的值需要先删除要扩容的分区输入d 选择
转：使用DOS命令chcp查看windows操作系统的默认编码以及编码和语言的对应关系

代码页是字符集编码的别名也有人称内码表早期代码页是IBM称呼电脑BIOS本身支持的字符集编码的名称当时通用的操作系统都是命令行界面系统这些操作系统直接使用BIOS供应的VGA功能来显示字符操作系统的编码支持也就依靠BIOS的编
微信小程序绘制二维码

一前言在日常的小程序项目中会经常遇到需要动态绘制二维码的需求使用场景很多例如绘制在海报上例如制作票务码核销码等等这篇文章是应一位好友的需求而写的也希望能够给有需要的同学一些帮助二实现原理使用微信小程序的canvas组
STM32的低功耗模式

目前的低功耗设计主要从芯片设计和系统设计两个方面考虑随着半导体工艺的飞速发展和芯片工作频率的提高芯片的功耗迅速增加而功耗增加又将导致芯片发热量的增大和可靠性的下降因此功耗已经成为深亚微米集成电路设计中的一个重要考虑因素为了使产品
HTML、CSS制作小米商城网页首页源码解析

简介这是我学习前端以来仿写的第一个项目沿着尚硅谷李立超老师的教学视频学习在仿写这个项目的过程中即巩固了这两周以来的知识也增加了一些小经验主要是老师传授同时也让自己更加有信心学习下去相信自己一定会实现自己的小梦想加油小米官网

HTML、CSS制作小米商城网页首页源码解析

HTML、CSS制作小米商城网页首页源码解析 的相关文章

随机推荐

热门标签

HTML、CSS制作小米商城网页首页源码解析的相关文章