HTML+CSS作品展示(仿写携程网移动端首页①)

已于 2024-02-18 14:54:20 修改
阅读量2.4k 收藏 22
点赞数 6
分类专栏： HTML+CSS+JS（案例展示） 文章标签： css html 前端
于 2022-01-28 15:30:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42541725/article/details/122731265
版权

参考来源：

黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili

仿写携程网移动端首页

网页如下：

ctripH5

总结：

技术选型：

  1. 单独制作移动页面方案
  2. flex弹性布局

搭建相关项目结构：

  1. CSS文件夹，
  2. images文件夹，
  3. upload文件夹，
  4. index.html

设置视口标签以及引入初始化样式：

  1. <meta ...>,
  2. <link ...normalize.css>,
  3. <link ...index.css>

设置常用初始化样式：

  1. body{ }

具体布局：

  1. 固定定位的居中效果：搜索框，
  2. 上图片下文字布局：局部导航栏，把主轴设成Y轴，把侧轴设成居中对齐，
  3. 利用属性选择器更换背景图片：局部导航栏，
  4. 给前两个盒子加白色边框：导航栏，
  5. 文字阴影：导航栏，
  6. 背景图片靠底部居中对齐：导航栏，
  7. 背景色渐变：导航栏，
  8. seo优化隐藏文字：侧边导航栏入口，
  9. CSS3写“>”符号：侧边导航栏

网页代码如下：

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ctripH5</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header class="search">
        <div class="search-inner">
            <span class="search-icon icon-search"></span>
            <span>搜索:目的地/酒店/景点/航班号</span>
        </div>
    </header>
    <nav class="top-nav">
        <div class="top-nav-inner">
            <ul>
                <li class="top-nav-hd-bj1">
                    <span class="top-nav-icon-icon1"></span>
                    <span>酒店</span>
                </li>
                <li class="top-nav-bd-bj1">
                    <span class="top-nav-icon-icon2"></span>
                    <span>民宿/客栈</span>
                </li>
                <li class="top-nav-bt-bj1">
                    <span class="top-nav-icon-icon3"></span>
                    <span>特价/爆款</span>
                </li>
            </ul>
            <ul>
                <li class="top-nav-hd-bj2">
                    <span class="top-nav-icon-icon4"></span>
                    <span>机票</span>
                </li>
                <li class="top-nav-bd-bj2">
                    <span  class="top-nav-icon-icon5"></span>
                    <span>接送机/包车</span>
                </li>
                <li class="top-nav-bt-bj2">
                    <span class="top-nav-icon-icon6"></span>
                    <span>航班助手</span>
                </li>
            </ul>
            <ul>
                <li class="top-nav-hd-bj3">
                    <span class="top-nav-icon-icon7"></span>
                    <span>火车票</span>
                </li>
                <li class="top-nav-bd-bj3">
                    <span class="top-nav-icon-icon8"></span>
                    <span>汽车/船票</span>
                </li>
                <li class="top-nav-bt-bj3">
                    <span class="top-nav-icon-icon9"></span>
                    <span>租车</span>
                </li>
            </ul>
            <ul>
                <li class="top-nav-hd-bj4">
                    <span class="top-nav-icon-icon10"></span>
                    <span>旅游</span>
                </li>
                <li class="top-nav-bd-bj4">
                    <span class="top-nav-icon-icon11"></span>
                    <span>门票/活动</span>
                </li>
                <li class="top-nav-bt-bj4">
                    <span class="top-nav-icon-icon12"></span>
                    <span>周边游</span>
                </li>
            </ul>
            <ul>
                <li class="top-nav-hd-bj5">
                    <span class="top-nav-icon-icon13"></span>
                    <span>攻略/景点</span>
                </li>
                <li class="top-nav-bd-bj5">
                    <span class="top-nav-icon-icon14"></span>
                    <span>美食</span>
                </li>
                <li class="top-nav-bt-bj5">
                    <span class="top-nav-icon-icon15"></span>
                    <span>购物/免税</span>
                </li>
            </ul>
        </div>
    </nav>
    <nav class="switch1">
        <span class="switch1-item1"></span>
        <span class="switch1-item2"></span>
    </nav>
    <section class="product">
        <div class="product-left">
            <div class="product-left-hd">
                <img src="images/zhibo-left.png" alt="">
                <span>特价好货直播中</span>
            </div>
            <div class="product-left-bd">
                <img src="upload/zhibo1.jpg" alt="">
                <div class="tag1">酒店套餐</div>
                <span class="fuhao">￥</span>
                <span class="xprice">2022</span>
                <span class="yprice">4009</span>
                <span class="lijian">立减￥1987</span>
            </div>
        </div>
        <div class="product-right">
            <div class="product-right-hd">
                <img src="images/jingxuan-right.png" alt="" class="product-right-hd-img">
                <span class="product-right-hd-span">权威排行榜</span>
            </div>
            <div class="product-right-bd">
                <div class="jingxuan1">
                    <img src="upload/jingxuan1.jpg" alt="">
                    <div class="tag2">华东</div>
                    <span class="left">华东奢华酒店榜</span>
                </div>
                <div class="jingxuan2">
                    <img src="upload/jingxuan2.jpg" alt="">
                    <div class="tag2">华东</div>
                    <span class="right">华东滑雪景点榜</span>
                </div>
            </div>
        </div>
    </section>
    <banner class="tejia">
        <img src="upload/tejia.jpg" alt="" class="tejia-img">
        <div class="switch2">
            <div class="switch2-item1"></div>
            <div class="switch2-item2"></div>
            <div class="switch2-item3"></div>
        </div>
    </banner>
    <footer class="toolbox">
        <div class="toolbox-hd">
            <a href="#" class="phone">
                <i class="icon-phone"></i>
                <span class="phone-span">电话预定</span>
            </a>
            <a href="#" class="download">
                <i class="icon-download3"></i>
                <span class="download-span">下载携程</span>
            </a>
            <a href="#" class="language">
                <i class="icon-sphere"></i>
                <span class="language-span">Language</span>
                <i class="triangle"></i>
            </a>
        </div>
        <div class="toolbox-bd">
            <a href="#" class="map">网站地图</a>
            <a href="#" class="computer">电脑版</a>
            <p class="link">©2022携程旅行 沪ICP备08023580号</p>
        </div>
    </footer>
    <nav class="bottom-nav">
        <a href="#">
            <span></span>
            <span>首页</span>
        </a>
        <a href="#">
            <span></span>
            <span>社区</span>
        </a>
        <a href="#">
            <span></span>
            <span>消息</span>
        </a>
        <a href="#">
            <span></span>
            <span>我的</span>
        </a>
    </nav>
    <a href="#" class="qiandao"></a>
</body>
</html>

CSS:

body {
    max-width: 540px;
    min-width: 320px;
    margin: 0 auto;
    padding: 0;
    font: normal 16px/1.5 PingFangSC-regular,Tahoma,Lucida Grande,Verdana,Microsoft Yahei,STXihei,hei;
    color: #000;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
    background: #f4f4f4;
}
.search {
    position: fixed;
    max-width: 540px;
    min-width: 320px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 50px;
    background-color: #fff;
    box-sizing: border-box;
    z-index: 1;
}
.search-inner {
    box-sizing: border-box;
    margin: 12px 8px;
    border: 1.8px solid #0086f6;
    border-radius: 15px;
}
.search-inner span {
    box-sizing: border-box;
    margin-left: 6px;
    font-size: 15px;
    line-height: 21px;
    color: #999;
}
.search-icon {
    box-sizing: border-box;
    color: #666;
    font-size: 20px;
    margin-left: 12px;
    font-family: "icomoon";
}
.top-nav {
    box-sizing: border-box;
    max-width: 540px;
    min-width: 320px;
    margin-top: 50px;
    height: 184px;
    display: flex;
    background-color: #fff;
    
}
.top-nav-inner {
    display: flex;
    flex: 95%;
    margin: 0 12px 0;
    /* background-color: pink; */
}
.top-nav ul {
    display: flex;
    flex: 1;
    margin: 0;
    padding: 0;
    list-style: none;
    flex-direction: column;
    width: 20%;
    /* background-color: purple; */
}
.top-nav-inner ul li {
    flex: 1;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}
.top-nav-hd-bj1 span:nth-child(2) {
    display: block;
    margin: 0 auto;
    font-size: 12px;
    color: #fff;
}
.top-nav-hd-bj2 span:nth-child(2) {
    display: block;
    margin: 0 auto;
    font-size: 12px;
    color: #fff;
}
.top-nav-hd-bj3 span:nth-child(2) {
    display: block;
    margin: 0 auto;
    font-size: 12px;
    color: #fff;
}
.top-nav-hd-bj4 span:nth-child(2) {
    display: block;
    margin: 0 auto;
    font-size: 12px;
    color: #fff;
}
.top-nav-hd-bj5 span:nth-child(2) {
    display: block;
    margin: 0 auto;
    font-size: 12px;
    color: #fff;
}
.top-nav-bd-bj1 span:nth-child(2) {
    display: block;
    margin: 0 auto;
    font-size: 12px;
    color: #000;
}
.top-nav-bd-bj2 span:nth-child(2) {
    display: block;
    margin: 0 auto;
    font-size: 12px;
    color: #000;
}
.top-nav-bd-bj3 span:nth-child(2) {
    display: block;
    margin: 0 auto;
    font-size: 12px;
    color: #000;
}
.top-nav-bd-bj4 span:nth-child(2) {
    display: block;
    margin: 0 auto;
    font-size: 12px;
    color: #000;
}
.top-nav-bd-bj5 span:nth-child(2) {
    display: block;
    margin: 0 auto;
    font-size: 12px;
    color: #000;
}
.top-nav-bt-bj1 span:nth-child(2)  {
    display: block;
    margin: 0 auto;
    font-size: 12px;
    color: #000;
}
.top-nav-bt-bj2 span:nth-child(2)  {
    display: block;
    margin: 0 auto;
    font-size: 12px;
    color: #000;
}
.top-nav-bt-bj3 span:nth-child(2)  {
    display: block;
    margin: 0 auto;
    font-size: 12px;
    color: #000;
}
.top-nav-bt-bj4 span:nth-child(2)  {
    display: block;
    margin: 0 auto;
    font-size: 12px;
    color: #000;
}
.top-nav-bt-bj5 span:nth-child(2)  {
    display: block;
    margin: 0 auto;
    font-size: 12px;
    color: #000;
}
.top-nav-inner ul span[class^="top-nav-icon"] {
    display: block;
    margin: 5px auto 0 auto;
    width: 28px;
    height: 28px;
    background: url(../images/stprites1.png) no-repeat 0 -84px;
    background-size: 28px auto;
}
.top-nav-inner ul li .top-nav-icon-icon2 {
    background: url(../images/stprites1.png) no-repeat 0 -335px;
    background-size: 28px auto;
}
.top-nav-inner ul li .top-nav-icon-icon3 {
    background: url(../images/stprites1.png) no-repeat 0 0px;
    background-size: 28px auto;
}
.top-nav-inner ul li .top-nav-icon-icon4 {
    background: url(../images/stprites1.png) no-repeat 0 -168px;
    background-size: 28px auto;
}
.top-nav-inner ul li .top-nav-icon-icon5 {
    background: url(../images/stprites1.png) no-repeat 0 -56px;
    background-size: 28px auto;
}
.top-nav-inner ul li .top-nav-icon-icon6 {
    background: url(../images/stprites1.png) no-repeat 0 -280px;
    background-size: 28px auto;
}
.top-nav-inner ul li .top-nav-icon-icon7 {
    background: url(../images/stprites1.png) no-repeat 0 -364px;
    background-size: 28px auto;
}
.top-nav-inner ul li .top-nav-icon-icon8 {
    background: url(../images/stprites1.png) no-repeat 0 -224px;
    background-size: 28px auto;
}
.top-nav-inner ul li .top-nav-icon-icon9 {
    background: url(../images/stprites1.png) no-repeat 0 -250px;
    background-size: 28px auto;
}
.top-nav-inner ul li .top-nav-icon-icon10 {
    background: url(../images/stprites1.png) no-repeat 0 -140px;
    background-size: 28px auto;
}
.top-nav-inner ul li .top-nav-icon-icon11 {
    background: url(../images/stprites1.png) no-repeat 0 -196px;
    background-size: 28px auto;
}
.top-nav-inner ul li .top-nav-icon-icon12 {
    background: url(../images/stprites1.png) no-repeat 0 -392px;
    background-size: 28px auto;
}
.top-nav-inner ul li .top-nav-icon-icon13 {
    background: url(../images/stprites1.png) no-repeat 0 -28px;
    background-size: 28px auto;
}
.top-nav-inner ul li .top-nav-icon-icon14 {
    background: url(../images/stprites1.png) no-repeat 0 -112px;
    background-size: 28px auto;
}
.top-nav-inner ul li .top-nav-icon-icon15 {
    background: url(../images/stprites1.png) no-repeat 0 -308px;
    background-size: 28px auto;
}
.top-nav-hd-bj1 {
    border-top-left-radius: 10px;
    border-right: 1px solid #fff;
    background-image: linear-gradient(180deg,#fa5956,#fb8650);
}
.top-nav-hd-bj2 {
    border-right: 1px solid #fff;
    background-image: linear-gradient(180deg,#3c83fa,#50b2fa);
}
.top-nav-hd-bj3 {
    border-right: 1px solid #fff;
    background-image: linear-gradient(0deg,#66a4ff,#5e80ff);
}
.top-nav-hd-bj4 {
    border-right: 1px solid #fff;
    background-image: linear-gradient(180deg,#2fc3b6,#52d9b3);
}
.top-nav-hd-bj5 {
    border-top-right-radius: 10px;
    background-image: linear-gradient(0deg,#ffa846,#ff8939 99%);
}
.top-nav-bd-bj1 {
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    background-color: #fff5f1;
}
.top-nav-bt-bj1 {
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    background-color: #fff5f1;
}
.top-nav-bd-bj2 {
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    background-color: #eff9ff;
}
.top-nav-bt-bj2 {
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    background-color: #eff9ff;
}
.top-nav-bd-bj3 {
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    background-color: #f2f5ff;
}
.top-nav-bt-bj3 {
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    background-color: #f2f5ff;
}
.top-nav-bd-bj4 {
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    background-color: #ecfcf8;
}
.top-nav-bt-bj4 {
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    background-color: #ecfcf8;
}
.top-nav-bd-bj5 {
    border-top: 1px solid #fff;
    background-color: #fff9f2;
}
.top-nav-bt-bj5 {
    border-top: 1px solid #fff;
    background-color: #fff9f2;
}
.switch1 {
    display: flex;
    justify-content: center;
    padding-top: 4px;
    height: 20px;
    width: 100%;
    background-image: linear-gradient(0deg,#f4f4f4,#fff);
}
.switch1-item1 {
    margin-right: 4px;
    width: 14px;
    height: 4px;
    border-radius: 2px;
    background-color: #0086f6;
}
.switch1-item2 {
    width: 4px;
    height: 4px;
    border-radius: 2px;
    background-color: #ccc;
}
a {
    text-decoration: none;
    color: #000;
}
.product {
    display: flex;
    margin-left: -8px;
    margin-bottom: 10px;
    padding: 0 12px;
    background-color: #f4f4f4;
    box-sizing: border-box;
}
.product-left {
    flex: 50%;
    margin: 5px;
    background-color: #fff;
    border-radius: 10px;
}
.product-left-hd {
    height: 20px;
    margin: 8px;
}
.product-left-hd img {
    float: left;
    width: 73px;
    height: 20px;
}
.product-left-hd span {
    float: right;
    padding: 0 4px;
    font-size: 10px;
    color: #ff4607;
    border-radius: 2px;
    background-color: #ffebe3;
}
.product-left-bd {
    position: relative;
}
.product-left-bd img {
    width: 238px;
    height: 84px;
    border-radius: 5px;
    margin: 0 5px;
}
.fuhao {
    float: left;
    margin-left: 5px;
    font-size: 11px;
    color: #f60;
    line-height: 2.2;
}
.product-left-bd .xprice {
    float: left;
    font-size: 16px;
    color: #f60;
    font-weight: 700;
}
.product-left-bd .yprice {
    float: left;
    margin: 0 3px;
    font-size: 10px;
    color: #666;
    line-height: 1.8;
    vertical-align: middle;
    text-decoration: line-through;
}
.lijian {
    float: left;
    padding: 3px;
    background-image: linear-gradient(90deg,#fa5956,#fb8650);
    border-radius: 2px;
    font-size: 10px;
    line-height: 1.1;
    color: #fff;
}
.product-right {
    flex: 50%;
    margin: 5px;
    background-color: #fff;
    border-radius: 10px;
}
.product-right-hd {
    height: 20px;
    margin: 8px;
    box-sizing: border-box;
}
.product-right-hd-img {
    float: left;
    width: 73px;
    height: 20px;
}
.product-right-hd-span {
    float: right;
    padding: 0 4px;
    font-size: 10px;
    color: #ae6e15;
    border-radius: 2px;
    background-color: #fdefd2;
}
.product-right-bd {
    text-align: center;
    padding: 0 5px;
    box-sizing: border-box;
}
.jingxuan1 {
    width: 48%;
    float: left;
    margin: 1%;
    position: relative;
    overflow: hidden;
}
.jingxuan1 img {
    width: 100%;
    height: 84px;
    margin: 0;
    padding: 0;
    border-radius: 6px;
}
.product-right-bd span {
    display: block;
    margin-left: -28px;
    font-size: 11px;
    color: #333;
    line-height: 11px;
    height: 11px;
}
.jingxuan2 {
    width: 48%;
    float: left;
    margin: 1%;
    position: relative;
    overflow: hidden;
}
.jingxuan2 img {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 84px;
    border-radius: 6px;
}
.tag1 {
    position: absolute;
    top: 0;
    left: 5px;
    padding: 0 3px;
    border-top-left-radius: 6px;
    border-bottom-right-radius: 6px;
    font-size: 10px;
    line-height: 14px;
    background: rgba(51,51,51,.8);
    color: #fff;
}
.tag2 {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 3px;
    border-top-left-radius: 6px;
    border-bottom-right-radius: 6px;
    font-size: 10px;
    line-height: 14px;
    color: #663c00;
    background-image: linear-gradient(270deg,#f8e1bd,#e2c089);
}
.tejia {
    margin-top: 10px;
    padding: 0 12px 12px;
    display: flex;
    position: relative;
    background-color: #f4f4f4;
    box-sizing: border-box;
}
.tejia-img {
    width: 100%;
    border-radius: 10px;
}
.switch2 {
    position: absolute;
    bottom: 13%;
    left: 50%;
}
.switch2-item1 {
    float: left;
    margin: 0 4px;
    width: 12px;
    height: 4px;
    opacity: 1;
    border-radius: 25%;
    /* transform: translateX(-50%); */
    background: rgb(255, 255, 255);
}
.switch2-item2 {
    float: left;
    margin: 0 4px;
    width: 4px;
    height: 4px;
    opacity: 0.4;
    border-radius: 50%;
    background: rgb(255, 255, 255);
}
.switch2-item3 {
    float: left;
    margin: 0 4px;
    width: 4px;
    height: 4px;
    opacity: 0.4;
    border-radius: 50%;
    background: rgb(255, 255, 255);
}
.toolbox {
    height: 100px;
    padding-top: 12px;
    padding-bottom: 50px;
}
.toolbox-hd {
    display: flex;
    justify-content: space-around;
    margin: 0 12px;
}
.toolbox-hd a {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    border: 1px solid #999;
    background-color: transparent;
    border-radius: 4px;
    min-width: 100px;
}
.toolbox-hd span {
    font-size: 13px;
    color: #333;
    line-height: 17px;
    margin-right: 4px;
}
.toolbox-hd i[class^=icon-] {
    color: #ccc;
    font-size: 13px;
    line-height: 17px;
    margin-right: 4px;
}
.triangle {
    display: inline-block;
    border-top: 5px solid #666;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}
.toolbox-bd {
    text-align: center;
    font-size: 12px;
    line-height: 15px;
    margin-top: 13px;

}
.toolbox-bd a,
.toolbox-bd p {
    color: #666;
}
.map {
    margin-right: 24px;
    padding-right: 24px;
}
.bottom-nav {
    display: flex;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    position: fixed;
    justify-content: center;
    align-items: center;
    height: 49px;
    max-width: 540px;
    background-color: #fff;
    box-shadow: 0 -5px 15px 0 rgb(0 0 0 / 5%);
}
.bottom-nav a {
    margin-top: 1px;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-bottom: 5px;
    color: #666;
    font-size: 11px;
    line-height: 12px;
}
.bottom-nav a:nth-child(1) span:nth-child(1) {
    width: 32px;
    height: 32px;
    background: url(../images/stprites2.png) no-repeat 0 0;
    background-size: 32px auto;
}
.bottom-nav a:nth-child(2) span:nth-child(1) {
    width: 32px;
    height: 32px;
    background: url(../images/stprites2.png) no-repeat 0 -32px;
    background-size: 32px auto;
}
.bottom-nav a:nth-child(3) span:nth-child(1) {
    width: 32px;
    height: 32px;
    background: url(../images/stprites2.png) no-repeat 0 -64px;
    background-size: 32px auto;
}
.bottom-nav a:nth-child(4) span:nth-child(1) {
    width: 32px;
    height: 32px;
    background: url(../images/stprites2.png) no-repeat 0 -96px;
    background-size: 32px auto;
}
.qiandao {
    position: fixed;
    bottom: 55px;
    right: 0;
    height: 76px;
    width: 76px;
    background: url(../images/qiandao.png) no-repeat;
    background-size: 76px;
}

hacalili
关注
  • 6
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html携程网首页，移动端css
07-03
一个简单的移动端携程网首页，交互性不大。
HTML实现移动端布局与页面自适应
热门推荐
qq_44552416的博客
09-13 1万+
结论：1.如果只做pc端，那么静态布局（定宽度）是最好的选择；2.如果做移动端，且设计对高度和元素间距要求不高，那么弹性布局（rem+js）是最好的选择，一份css+一份js调节font-size搞定；3.如果pc，移动要兼容，而且要求很高那么响应式布局还是最好的选择，前提是设计根据不同的高宽做不同的设计，响应式根据媒体查询做不同的布局。
Web大学生网页作业成品——仿腾讯游戏官网网站设计与实现(HTML+CSS+JavaScript)
最新发布
HTML网页设计
06-08 862
🎉精彩专栏推荐👇🏻👇🏻👇🏻 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】 🌎超炫酷的Echarts大屏可视化源码：【🔰 echarts大屏展示大数据平台可视化(150套) 】 🎁 免费且实用的WEB前端学习指南： 【📂web前端零基础到高级学习视频教程 120G干货分享】 🥇 关于作
携程网首页案例制作（移动端）
guai_guai_guai的博客
02-07 1304
直接添加图片即可，但因为上面搜索区域是固定定位，不占据位置，下方图片某部分会被搜索区域覆盖住，因此要设置焦点图区域的padding-left使其往下方移动。搜索模块是一个固定定位，它与父亲没有关系，只与视口有关，所以设定位置为水平居中时，要以视口为标准。background:linear-gradient(起始方向，颜色1，颜色2，...);通常要设置最大宽度，最小宽度，水平居中，字体设置，背景颜色以及相关初始化。伪元素添加定位之后就变成行内块元素。三个子盒子就用到了线性渐变。固定定位的盒子要有宽度。
携程网移动端首页制作（html5+css3）
qq_53767416的博客
09-14 8371
携程网移动端页面首页制作（html5+css3）
仿开心网的前端页面 html+css
凉意的博客
03-21 3095
效果如下图所示 这就不贴代码了，代码和图片全放在https://gitee.com/feeling-cool/html-css​​​​​​
html+css练习（仿小米官网）
qq_51365907的博客
03-16 400
小白学习html+css第三天
基于HTML+CSS+JavaScript+jQuery，仿写美团网移动端页面.zip
12-14
基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于...
HTML5+CSS3前端小案例——移动端购物支付页面
08-18
黑马的案例，跟着视频学完后做的。 在练习HTML和CSS的同学们...4、css文件夹 1）base.css 2）orders.css 5、image文件夹 6、lib文件夹 7、upload文件夹 使用软件：PxCook、VSCode、Goolge Chrome 使用网站：iconfont
html+css 移动端商城网页设计实现
04-27
在本文中，我们将深入探讨如何使用HTML5和CSS来实现移动端商城网页的设计。移动商城网站是现代电子商务不可或缺的一部分，它们提供了便捷的购物体验，让用户在手机和平板电脑上也能轻松浏览和购买商品。我们将逐一...
html+css淘宝网站仿写.zip
05-08
个人仿写的淘宝网站首页，资源包含完整html+css代码和图片字体等资源，适合新手查看和仿写练习，涉及如何引用icon图标，relative和absolute定位以及精灵图等知识点，由于是自己仿写的，可能不够完美，所以有问题请...
仿携程网移动端网页——包含图片背景
09-23
纯h5＋css
HTML网页作业代码（仿写商城首页、学校官网网页等、源码可直接运行）
做笔记\记录遇到的程序bug
11-28 5139
HTML网页作业代码（仿写商城首页、学校官网网页等、源码可直接运行）
纯HTML5+CSS3仿B站首页
weixin_48493613的博客
08-15 8404
纯HTML5+CSS3仿B站首页
HTML/CSS实战训练（仿新浪网页）
giserhfbuie的博客
03-14 2157
学了两天的HTML/CSS了，这是第一次参与实战做网页，发现将零碎知识点串在一起很重要，要不然还是不知道怎么写，而且深刻感受到了前端的不易，虽然前端逻辑简单，但实际上手却有很多疑问和考虑的点，不过幸好通过不断的尝试做出来了。在用CSS选择器时，一定要注意是块级元素还是行内元素，它们之间的特点，margin和padding是对哪个标签使用的，float使用完毕对齐后，要在div标签中加入<div style="clear:both;">，这样其他边框才不会改变。另外，对于行内元素来说，是不能直接控
HTML+CSS实现的华为商城静态网页设计项目分享
爱吃雪糕的小布丁的博客
07-11 6209
项目用到知识点：HTML5+CSS3，网页设计期末项目，华为商城
html5+css3案例——仿瓢城旅行网
qq_42515626的博客
03-26 5417
一、主页 二、机票订购页面 三、index.html <!DOCTYPE html> <html> <head> <title>瓢城旅行网</title> <meta charset="utf-8" /> <link href="css/index.css" rel="stylesheet" type="tex...
HTML5+CSS3实现小米静态首页（仿写）
IT_Tea的博客
04-12 1987
HTML5+CSS3实现小米静态首页，这是我仿写的一个小米的官方网站，小米网站相对于来说比较简洁，看起来比较简单但是实现所有的样式还是有点难度（相对于新手来说）。期末作业也经常做一个天猫，京东等静态页面，需要的话可以下载，地址放在下面（图标、图片都有）。
HTML5+CSS3实现华为商城（课程设计完整版）
m0_63512120的博客
11-06 2012
这个是用HTML5+CSS3实现的一个华为商城的页面，并且实现了二级页面。 结构相对简单不复杂，适合在校生当课程设计，当然 如果你的需要其他的网页作品可以移步我的其他作品，或者点击下面的“传送墙”！ 希望可以帮助到大家，有什么问题可以联系我或者在评论区指出！ 文章末尾附项目完整源代码。 HTML5+CSS3实现小米商城 HTML5+CSS3实现华为官网 HTML5+CSS3实现哔哩哔哩首页 HTML5+CSS3实现小米官网 HTML5+CSS3实现QQ注册页面话不多说，直接展示项目运行效果！ 因为文章篇
用html+css+js写一个移动端登录页面
09-12
### 回答1： 好的，我会尽力帮你。 HTML (Hypertext Markup Language) 是用来描述网页的一种语言。HTML 不是一种编程语言，而是一种标记语言 (markup language)。标记语言是一套标记标签 (markup tag)，用来描述文档中的内容。 CSS (Cascading Style Sheets) 是一种样式表语言，用来描述 HTML 或 XML (包括如 SVG、HTML 之类的 XML 文档) 文档的呈现方式。 JavaScript 是一种轻量级的编程语言。它是设计用来给 HTML 网页增加交互性的。 要写一个移动端登录页面，你可以使用 HTML、CSS 和 JavaScript 来创建一个响应式的登录表单，并让它适应不同大小的屏幕。 以下是一个简单的登录页面的示例： HTML 代码: ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>登录页面</title> </head> <body> <form id="login-form"> <label for="username">用户名:</label><br> <input type="text" id="username" name="username"><br> <label for="password">密码:</label><br> <input type="password" id="password" name="password"><br><br> <input type="submit" value="登录"> </form> </body> </html> ``` CSS 代码: ``` #login-form { width: 300px; margin: 0 auto; text-align: center; } #login-form label { display: block; margin-bottom: 8px; font-size: 18px; } #login-form input[type="text"], #login-form input[type="password"] { width: 80%; height: 32px; padding: 8px; border: 1px solid #ccc; ### 回答2： 要用HTML、CSS和JS编写一个移动端登录页面，首先，我们需要创建一个HTML文件，然后在文件中添加必要的HTML结构和内容。 在HTML文件中，我们可以使用<meta>元素设置视口尺寸，以确保页面适应移动设备的屏幕。然后，我们可以创建一个表单元素，用于用户输入用户名和密码。这可以通过<input>元素实现，设置不同的类型和属性来指定用户名和密码输入框。我们还可以添加一个提交按钮，供用户点击以提交登录表单。 接下来，我们可以使用CSS来为登录页面添加样式。我们可以使用选择器来选择特定的元素，然后使用CSS属性来定义它们的样式。例如，我们可以设置表单的边框、背景颜色和字体样式等。我们还可以使用媒体查询来调整页面布局和样式，以适应不同大小的移动设备。 最后，我们可以使用JavaScript来为登录页面添加交互功能。例如，我们可以使用JavaScript来验证用户输入的用户名和密码是否符合要求，或者在用户点击提交按钮时执行某些操作。我们可以使用事件监听器来侦听按钮点击事件，并在事件发生时触发相应的功能。 通过结合HTML、CSS和JS，我们可以创建一个移动端登录页面，并为其添加样式和交互功能，使其适应不同的移动设备。这样用户就可以在移动设备上方便地登录并使用网站或应用程序。 ### 回答3： 移动端登录页面可以使用HTML、CSS和JavaScript来实现。 首先，在HTML中创建一个登录页面的结构，可以使用`<form>`标签来包裹登录表单，包含用户名和密码的输入框以及提交按钮。可以使用`<input type="text">`来创建文本输入框和`<input type="password">`来创建密码输入框。 接下来，使用CSS样式给登录页面添加样式，使其适应移动设备。可以使用媒体查询来设置页面在不同屏幕尺寸下的样式。可以设置背景颜色、字体样式、边框等等，以及通过`@media`查询来调整页面布局。 然后，使用JavaScript来处理表单提交的事件。当用户点击提交按钮时，可以使用`addEventListener`方法监听提交事件，在事件处理函数中获取输入框中的用户名和密码，并进行验证。可以使用正则表达式或者其他方法来验证输入的合法性。如果验证通过，则可以跳转至用户的登录页面，或者显示登录成功的提示信息。 此外，可以使用JavaScript根据设备的屏幕尺寸动态调整页面布局和样式，以实现响应式设计。可以使用`window.onload`函数或者其他方法来检测屏幕尺寸，并进行相应的调整。 最后，可以在HTML中引入所需的CSS和JavaScript文件，以便页面正确显示和交互。 总的来说，使用HTML、CSS和JavaScript可以很方便地创建一个移动端登录页面。需要注意页面布局和样式的适应性以及输入验证的安全性。感谢您的提问，希望这个回答对您有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值