响应式布局

最新推荐文章于 2025-05-31 10:10:35 发布
最新推荐文章于 2025-05-31 10:10:35 发布
阅读量298 收藏
点赞数
文章标签： html css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_52580155/article/details/121386373
版权

响应式布局

html
<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="./css/bootstrap.css">
    <link rel="stylesheet" href="./css/normalize.css">

    <link rel="stylesheet" href="./css/index.css">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed  col-xs-pull-10" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
                <a class="navbar-brand col-xs-1 col-xs-push-5 hidden-lg hidden-md hidden-sm " id="minlogo" href="#"><img src="./img/logo.png" alt=""></a>
                <a class="navbar-brand hidden-xs" href="#"><img src="./img/logo.png" alt=""></a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">关于百度<span class="sr-only">(current)</span></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>
                <!-- <form class="navbar-form navbar-left hidden-sm hidden-md">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="站内搜索">
                    </div>
                    <button type="submit" class="btn btn-default">百度一下</button>
                </form> -->
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>
    <div class="container-fluid">
        <div class="row">
            <div class="digtu col-lg-12 col-md-12 col-sm-12 col-xs-12"><img src="./img/大图.jpg" alt=""></div>
        </div>
    </div>
    <div class="ge"></div>
    <div class="container-fluid yemian">
        <div class="row">
            <div class="digtu col-lg-4 col-md-4 col-sm-4 col-xs-12">
                <img src="./img/1页面1.jpg" alt="">
                <div class="hidden-xs a1">百度AL开放平台</div>
                <p class="hidden-sm hidden-md hidden-lg a2 col-xs-6 col-xs-push-6">百度AL开放平台</p>
            </div>
            <!-- <div class="hidden-sm hidden-md hidden-lg a2 col-xs-6">百度AL开放平台</div> -->
            <div class=" digtu col-lg-4 col-md-4 col-sm-4 col-xs-12 ">
                <img src="./img/2页面2.jpg " alt=" ">
                <div class="hidden-xs a1">DuerOS,唤醒万物</div>
                <p class="hidden-sm hidden-md hidden-lg a2 col-xs-6 col-xs-push-6">DuerOS,唤醒万物</p>

            </div>
            <!-- <div class="hidden-sm hidden-md hidden-lg a2 col-xs-6">DuerOS,唤醒万物</div> -->
            <div class="digtu col-lg-4 col-md-4 col-sm-4 col-xs-12 ">
                <img src="./img/3页面3.jpg " alt=" ">
                <div class="hidden-xs a1">百度自动加上平台Apollo</div>
                <p class="hidden-sm hidden-md hidden-lg a2 col-xs-6 col-xs-push-6">百度自动加上平台Apollo</p>
            </div>
            <!-- <div class="hidden-sm hidden-md hidden-lg a2 col-xs-6">百度自动加上平台Apollo</div> -->
        </div>
    </div>
    <!-- <div class="ge"></div> -->
    <div class="xinwen hidden-xs">
        <div class="title">百度动态</div>
        <!-- 新闻 -->
        <div class="container-fulit ">
            <div class="row">
                <div class="col-sm-5 col-xs-12">
                    <div class="new">
                        <div class="title1">新闻动态</div>
                        <div class="writing">
                            <p class="write"><i class="glyphicon glyphicon-triangle-right"></i> 百度神经网络机器翻译技术获北京科技进步奖</p>
                            <p class="time">2021-09-25</p>
                        </div>
                        <div class="writing">
                            <p class="write"><i class="glyphicon glyphicon-triangle-right"></i>百度与清华大学出版社签注战略合作协议</p>
                            <p class="time">2021-09-22</p>
                        </div>
                        <div class="writing">
                            <p class="write"><i class="glyphicon glyphicon-triangle-right"></i>百度世界大会：与时代共振AI让生活更好</p>
                            <p class="time">2021-08-18</p>
                        </div>
                        <div class="writing">
                            <p class="write"><i class="glyphicon glyphicon-triangle-right"></i>百度Q2财报超预期：营收314亿元</p>
                            <p class="time">2021-08-12</p>
                        </div>
                        <div class="writing">
                            <p class="write"><i class="glyphicon glyphicon-triangle-right"></i>人工智能：影响未来人类发展的变革力量</p>
                            <p class="time">2021-07-08</p>
                        </div>
                        <div class="writing">
                            <p class="write"><i class="glyphicon glyphicon-triangle-right"></i>百度神经网络机器翻译技术获北京科技进步奖</p>
                            <p class="time">2021-09-25</p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-7 col-xs-12">
                    <div class="new">
                        <div class="title1">专题</div>
                    </div>
                    <div class="by_tu">
                        <div class="container-fluid">
                            <div class="row">
                                <div class=" col-sm-6 col-md-6  col-xs-12 by_t1 td1">
                                    <img src="./img/21度.jpg" alt="">
                                    <div class="t2">二十度</div>
                                </div>
                                <div class="by_t1 td2 col-sm-6 col-md-6  col-xs-12">
                                    <img src="./img/坚持.jpeg" alt="">
                                    <div class="t2">2020致敬我们的坚持</div>
                                </div>
                                <div class="by_t1 td3  col-sm-6 col-md-6  col-xs-12">
                                    <img src="./img/纪录片.jpg" alt="">
                                    <div class="t2">2020百度用户纪录片</div>
                                </div>
                                <div class="by_t1 td4  col-sm-6 col-md-6  col-xs-12">
                                    <img src="./img/回家短片.jpg" alt="">
                                    <div class="t2">百度AI寻人温情短片《一条回家路》</div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="lanyin hidden-lg hidden-md hidden-sm">查看更多</div>
    <!-- 在百度工作 -->
    <div class="datu">
        <div class="biao">工作在百度</div>
        <div class="xiabu">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-4 hidden-xs">
                        <div class="zi_zh">
                            <div></div>
                            <div></div>
                            <div>我们的故事</div>
                            <div class="bdd"></div>
                            <div></div>
                        </div>
                        <div>
                            <img src="./img/水晶球.jpg" alt="">
                        </div>
                    </div>
                    <div class="col-sm-4 ">
                        <div class="zi_zh">
                            <div></div>
                            <div></div>
                            <div>加入我们</div>
                            <div class="bdd"></div>
                            <div></div>

                        </div>
                        <div class="hidden-xs">
                            <img src="./img/多人.jpg" alt="">
                        </div>
                        <div class="hidden-sm hidden-md hidden-lg">
                            <img src="./img/多人.jpg" alt="" id="quanping">
                        </div>
                    </div>
                    <div class="col-sm-4 hidden-xs">
                        <div class="zi_zh">
                            <div></div>
                            <div></div>
                            <div>在这里工作</div>
                            <div class="bdd"></div>
                            <div></div>
                        </div>
                        <div>
                            <img src="./img/楼.jpg" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 我的Doodle -->
    <div class="dool hidden-xs">我们的Doodle</div>
    <!-- 继续 -->
    <div class="container-fluid hidden-xs">
        <div class="row">
            <div class="work col-sm-4  hidden-xs ">
                <span>宝藏中国之宝藏四川</span>
                <p>2021-10-12</p>
                <img src="./img/四川.gif" alt="">
            </div>
            <div class="work col-sm-4 hidden-xs ">
                <span>百度世界大会2021</span>
                <p>2021-08-18</p>
                <img src="./img/世界大会.gif" alt="">
            </div>
            <div class="work col-sm-4 hidden-xs">
                <span>宝藏中国之宝藏西藏</span>
                <p>2021-08-12</p>
                <img src="./img/江西.gif" alt="">
            </div>
        </div>
    </div>
    <!-- c查看更多 -->
    <div class="cha_big hidden-xs">
        <div class="cha">查看更多</div>
    </div>
    <div class="hidden-sm hidden-md hidden-lg col-xs-12 tiao">
        <div>>></div>
    </div>
    <!-- 下一趟 -->
    <div class="duc hidden-xs">
        <div class="biao">百度公司介绍</div>
        <div class="container-fluid">
            <div class="row">
                <div class="du_tu1 col-sm-3">
                    <div class="du_tu2">我们的核心价值观</div>
                    <img src="./img/核心价值.jpg" alt="">
                </div>
                <div class="du_tu1 col-sm-3">
                    <div class="du_tu2">我们的公司</div>
                    <img src="./img/公司.jpg" alt="">
                </div>
                <div class="du_tu1 col-sm-3">
                    <div class="du_tu2">百度之路</div>
                    <img src="./img/百度之路.jpg" alt="">
                </div>
                <div class="du_tu1 col-sm-3">
                    <div class="du_tu2">我们的管理团队</div>
                    <img src="./img/管理团队.jpg" alt="">
                </div>
            </div>
        </div>
    </div>

    <!-- 底部 -->
    <div class="dibu">
        <div class="di_body">
            <div class="yilan hidden-lg hidden-md hidden-sm">
                <span class="col-xs-4 ">实时资讯请关注：</span>
                <img src="./img/vx.png" alt="" class="col-xs-2">
                <img src="./img/wb.png" alt="" class="col-xs-2">
                <img src="./img/f.png" alt="" class="col-xs-2">
                <img src="./img/xx.png" alt="" class="col-xs-2">
            </div>
            <div class="yilan hidden-xs">
                <span>实时资讯请关注：</span>
                <img src="./img/vx.png" alt="">
                <img src="./img/wb.png" alt="">
                <img src="./img/f.png" alt="">
                <img src="./img/xx.png" alt="">
            </div>
            <div class="erlan hidden-xs">
                <ul class="col-sm-4">更多信息
                    <li class="hidden-xs">可持续发展</li>
                    <li class="hidden-xs">联系我们</li>
                </ul>
                <ul class="col-sm-4">商业合作
                    <li class="hidden-xs">百度联盟</li>
                    <li class="hidden-xs">百度推广</li>
                    <li class="hidden-xs">营销中心</li>
                </ul>
                <ul class="col-sm-4">更多资源
                    <li class="hidden-xs">媒体资源库</li>
                </ul>
            </div>
            <div class="sanlan">
                © Baidu使用百度前必读 京ICP证030173号
            </div>
        </div>




        <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
        <script src="./js/jquery-3.6.0 .js "></script>
        <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
        <script src="./js/bootstrap.js "></script>
</body>

</html>

css

@import url(../css/01.css);
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* font-size: 1.2rem; */
  line-height: 1.42857143;
  color: #333333;
  background-color: #fff;
}
.navbar .container-fluid .navbar-header .navbar-brand {
  padding: 3px 15px;
}
.navbar .container-fluid .navbar-header .navbar-toggle {
  border: none;
  border-radius: 4px;
}
.navbar-default {
  background-color: #fff;
  border-color: #fff;
}
.navbar-toggle .icon-bar {
  display: block;
  width: 1.6rem;
  height: 0.16rem;
  border-radius: 1px;
  color: #000000;
  margin: 0.4rem 0;
}
.navbar .container-fluid .navbar-header #minlogo {
  /* padding: 3px 15px; */
  padding: 0.4rem 0.2rem;
}
.navbar .container-fluid .navbar-header #minlogo img {
  width: 6rem;
  height: 2rem;
}
.navbar-default .navbar-nav > .active > a {
  background-color: #fff;
  font-size: 0.4rem;
  font-weight: 600;
  border-bottom: 0.1rem solid #2577f1;
}
.navbar-default .navbar-form {
  border-radius: 0.1rem;
  background-color: #1A89ED;
  float: left;
  width: 3.6rem;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.btn-default {
  color: #f8f4f4;
  background-color: #1A89ED;
  border-color: #1A89ED;
}
.digtu {
  margin-top: 0px;
}
.digtu img {
  width: 100%;
  height: 100%;
}
.ge {
  width: 1.5rem;
  height: 0.6rem;
}
.yemian .row div img {
  width: 100%;
  height: 100%;
}
.yemian .row div .a1 {
  width: 100%;
  height: 1.6rem;
  background-color: #CCD6E2;
  color: #666;
  font-size: 0.4rem;
  text-align: center;
  line-height: 1.6rem;
}
@media screen and (max-width: 750px) {
  .yemian .row div img {
    width: 50%;
    height: 6rem;
    display: block;
    left: 0;
    position: relative;
  }
  .yemian .row .a2 {
    width: 8rem;
    font-size: 0.8rem;
    color: #000;
    top: -3.3rem;
    right: 0;
    position: relative;
  }
  #quanping {
    width: 100%;
    height: 6rem;
    margin-left: 0rem;
    margin-bottom: 0.4rem;
  }
}
@media screen and (max-width: 1200) {
  .by_t1 {
    width: 8rem;
    height: 6rem;
    background-color: red;
    margin-right: 0.2rem;
    margin-bottom: 0.2rem;
  }
}
.title {
  font-size: 0.8rem;
  line-height: 1;
  padding-bottom: 1.2rem;
  padding-top: 1.6rem;
  color: #969696;
  letter-spacing: 0;
  text-align: center;
  border-bottom: 1px #E8E8E9 solid;
  margin-top: 0.6rem;
}
.title1 {
  width: 100%;
  height: 100%;
  margin-bottom: 0.6rem;
}
.container-fulit .row .col-sm-6 .new {
  padding-bottom: -2rem;
}
.new {
  font-size: 0.52rem;
  color: #505050;
  letter-spacing: 0;
  text-align: left;
}
.writing {
  width: 100%;
  height: 100%;
}
.writing .write {
  font-size: 0.32rem;
  width: 100%;
  height: 100%;
}
.writing .time {
  font-size: 0.28rem;
  color: #969696;
  margin: 0 0.8rem;
  width: 100%;
  height: 100%;
}
.by_t1 {
  margin-bottom: 0.2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.by_t1 img {
  width: 100%;
  height: 100%;
}
.t2 {
  width: 93.5%;
  height: 12%;
  background-color: rgba(255, 255, 255, 0.6);
  color: #666;
  text-align: center;
  position: absolute;
  bottom: 0;
  font-size: 0.28rem;
}
.lanyin {
  display: block;
  border: 1px solid #2472dc;
  border-radius: 2rem;
  width: 6rem;
  font-size: 1rem;
  line-height: 2rem;
  text-align: center;
  margin: 0.4rem auto;
  cursor: pointer;
  background-color: #2472dc;
  color: #ffffff;
}
.datu {
  margin-top: 0.6rem;
  background: url(../img/背景.jpg);
  background-size: cover;
}
.biao {
  width: 100%;
  height: 2rem;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  font-size: 0.6rem;
  text-align: center;
  line-height: 2.42rem;
}
.bdd {
  width: 0.4rem;
  border-bottom: 4px #fff solid;
  border-radius: 6px;
}
.zi_zh {
  width: 100%;
  height: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.zi_zh div {
  color: #fff;
}
.xiabu img {
  width: 100%;
  height: 100%;
}
.dool {
  font-size: 0.6rem;
  color: #969696;
  height: 2.8rem;
  width: 100%;
  border-bottom: 1px solid #969696;
  text-align: center;
  line-height: 3.6rem;
}
.work {
  width: 33%;
  height: 100%;
}
.work img {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
.work span {
  display: inline-block;
  width: 100%;
  height: 100%;
  margin-top: 0.2rem;
  font-size: 0.4rem;
  text-align: center;
  color: #E10602;
}
.work p {
  width: 100%;
  height: 0.4rem;
  color: #9c9999;
  text-align: center;
}
.cha {
  width: 10%;
  height: 0.6rem;
  border-radius: 0.4rem;
  border: 1px solid #2472DC;
  color: #2472DC;
  line-height: 0.6rem;
  text-align: center;
}
.cha_big {
  width: 100%;
  height: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tiao {
  width: 100%;
  height: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tiao div {
  width: 2rem;
  height: 1rem;
  border-radius: 50%;
  border: 1px solid #2472DC;
  color: #2472DC;
  text-align: center;
  line-height: 1rem;
  font-size: 0.8rem;
}
@media screen and (max-width: 750px) {
  .dibu {
    width: 100%;
    height: 4.6rem;
    margin-top: 4rem;
  }
  .dibu .di_body .yilan {
    width: 100%;
    height: 20%;
    border-bottom: 0.006rem solid #969696;
    padding-bottom: 5.2rem;
  }
  .dibu .di_body .yilan span {
    font-size: 0.4rem;
  }
  .dibu .di_body .yilan img {
    width: 1.6rem;
    height: 1rem;
  }
}
.duc {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.6);
}
.duc .biao {
  width: 100%;
  height: 2rem;
  font-size: 0.4rem;
  color: #969696;
}
.du_tu1 {
  width: 25%;
  height: 100%;
}
.du_tu2 {
  height: 20%;
  position: absolute;
  top: 50%;
  left: 0;
  background: rgba(255, 255, 255, 0.8);
  width: 100%;
  font-size: 0.32rem;
  line-height: 210%;
  color: #505050;
  text-align: center;
}
.du_tu1 img {
  width: 100%;
  height: 100%;
}
.dibu {
  width: 100%;
  height: 4.6rem;
  margin-top: 0.4rem;
}
.di_body {
  width: 80%;
  height: 100%;
  margin: 0 auto;
  color: #666666;
}
ul li {
  list-style: none;
}
.di_body .yilan {
  width: 100%;
  height: 20%;
  border-bottom: 0.006rem solid #969696;
  padding-bottom: 0.2rem;
}
.di_body .erlan {
  width: 60%;
  height: 70%;
  margin-top: 0.4rem;
}
.di_body .erlan ul {
  font-weight: 800;
  font-size: 0.36rem;
  color: #666;
}
.di_body .erlan ul li {
  font-weight: 400;
  font-size: 0.28rem;
  color: #666;
}
.di_body .sanlan {
  width: 100%;
  height: 20%;
  text-align: center;
}

在这里插入图片描述

在这里插入图片描述

龍赢
关注
【响应式布局】
小王的博客
09-26 4099
什么是响应式布局、响应式布局的5种实现方案
CSS响应式布局
热爱WebGIS的博客
10-21 1132
vw ，就是相对于视口的宽度，分成100等份，100vw就表示满宽，50vw就表示一半宽。（vw 始终是针对窗口的宽），同理，vh则为相对于视口的高度。查询，可以通过给不同分辨率的设备编写不同的样式来实现响应式的布局，比如我们为不同分辨率的屏幕，设置不同的背景图片、字体大小等等。响应式布局：是同一页面在不同的屏幕上有不同的布局，即只需要一套代码使页面适应不同的屏幕，简单来说就是屏幕。flex 布局在响应式方面，主要是实现元素宽高的自适应，无法实现其他属性，如字体大小的自适应。
前端响应式布局
m0_69435612的博客
10-15 831
响应式布局是一种使网页在不同设备（如手机、平板和桌面）上均能良好显示的设计理念。
CSS实现前端响应式布局
m0_54829066的博客
09-06 1689
总之，CSS 实现前端响应式布局是一项非常重要的技术，它可以提高网页的可访问性、可用性和用户体验。通过掌握 CSS 的基础知识、媒体查询、响应式图像和媒体、响应式导航菜单、响应式网格系统等技术，可以实现高效、灵活和自适应的响应式布局。同时，需要注意响应式布局的测试与调试、性能优化和未来发展趋势，不断提高响应式布局的设计和开发水平。是媒体特性的值，如具体的像素值、百分比等。响应式布局的挑战与解决方案。响应式布局的定义与重要性。响应式设计的进一步发展。响应式布局的设计原则。响应式布局的性能优化。
前端【技术方案】多端适配 -- 响应式布局（含 rem 详解）
热门推荐
朝阳39的博客
03-02 1万+
px 绝对长度单位，不同客户端表现都相同，不具有响应式 em 相对长度单位，相对于父元素的 font-size 值，不同元素的父元素的尺寸各不相同，没有统一标准。 rem 相对长度单位，相对于根元素的 font-size 值，页面中的根元素只有一个（即 html 标签），标准统一，可用于响应式布局。 <!DOCTYPE html> <html lang="en"> <head> <meta cha
响应式布局 android,Android响应式布局
weixin_28309723的博客
05-27 975
本文由伯乐在线 -chris 翻译。未经许可，禁止转载！英文出处：mdswanson。欢迎加入翻译组。由于目前在做的一款app需要适配手机和平板，所以我在研究怎么构建可适应所有屏幕尺寸的布局方法。在web的响应式布局上我有很多经验，比如使用网格流，CSS3中的media queries属性等等，这些都可以实现web上的响应式布局，所以我想在Android上试试看。在Android上，是通过conf...
基于layui框架响应式布局的一些使用详解
12-13
响应式布局是现代网页设计的关键特性，它使得网站在不同尺寸的设备上，如桌面、平板和手机上，都能提供良好的用户体验。layui是一款优秀的前端框架，它的响应式布局功能简化了这一过程，使得开发者能够快速构建适应...
响应式布局的简单案例
09-24
响应式布局是一种网页设计技术，它能够确保网页在不同设备上具有良好的显示效果，无论是在桌面电脑、平板电脑还是手机上，用户都能获得满意的浏览体验。一个优秀的响应式布局应当能够让网页内容自动适应不同的屏幕...
【Java Web】速通HTML
m0_55908255的博客
05-29 803
HTML是网页内容的载体。"网页内容"就是指网页制作者放在页面上想要让用户浏览的信息，包括文字图片视频等。如下就是基础的没有任何CSS样式的HTML页面🆗，以上就是本文内容，表格标签和表单标签是必须掌握的，尤其是表单标签，后期使用频率很高，几乎是不可避免。
Python爬虫实战：研究Requests-HTML库相关技术
ylfhpy的博客
05-29 513
传统爬虫技术在面对现代 JavaScript 动态渲染网页时面临挑战，而 Requests-HTML 库通过集成浏览器渲染引擎，为解决这一问题提供了有效方案。本文旨在通过实际案例，系统研究 Requests-HTML 库的技术特点和应用场景。采用案例研究法，结合理论分析与实验验证，深入探讨该库在处理复杂网页结构时的优势与局限性。验证了 Requests-HTML 在处理复杂 JavaScript 渲染页面时的有效性。：基于 Requests 库，支持 HTTP/HTTPS 请求。
纯html，js创建一个类似excel的表格
全粘工程师
05-29 351
摘要：该系统为基于PHP的员工绩效管理平台，支持数据增删改查操作。主要功能包括：1）员工绩效数据表格化管理，支持按年月查询；2）动态添加/删除员工记录；3）积分
使用 HTML + JavaScript 实现可拖拽的任务看板系统
cfxiaoding的博客
05-30 1181
本文将介绍如何使用 HTML、CSS 和 JavaScript 创建一个交互式任务看板系统。
【HTML-15.1】HTML表单中的文件操作：全面指南
最新发布
weixin_39033358的博客
05-31 1096
本文详细介绍了HTML表单中的文件上传操作技术。首先讲解了基本文件上传表单的实现方法，包括必须设置的enctype和method属性。然后深入解析了文件输入控件的各种属性，如accept属性限制文件类型、multiple允许多选等。文章还展示了如何使用JavaScript File API进行前端文件验证和预览，以及HTML5拖放上传的实现方案。在服务器端处理部分，以Node.js为例演示了文件接收、大小限制和类型验证的代码实现。最后强调了文件上传的安全注意事项，包括双重验证文件类型、限制文件大小等最佳实践
国产化Word处理控件Spire.Doc教程：通过Java简单快速的将 HTML 转换为 PDF
开发者效率提升工具的博客
05-29 1092
HTML 转换为 PDF 则可以有效地保留其布局和格式，从而确保内容在不同设备和平台上的呈现保持一致。本文将介绍如何在 Spire.Doc for Java 的帮助下通过 Java 将 HTML 文件或 HTML 字符串转换为 PDF。
使用jessibuca+wvp+zlm实现html无插件播放摄像头实时画面
nov4th的博客
05-28 537
访问wvp的api文档：http://IP:18080/doc.html。
HTML实战：响应式个人资料页面
2302_81112251的博客
05-28 989
我将创建一个现代化的响应式个人资料页面，展示HTML在实际应用中的强大功能。这个页面将包含多个实战元素：导航栏、个人简介、技能展示、作品集和联系表单。
HTML5响应式布局案例解析
在信息技术行业，响应式布局是网页设计中的一种非常重要的技术。它能够使网页在不同的设备（如手机、平板电脑、台式机等）上拥有良好的显示效果，无论这些设备的屏幕尺寸如何。响应式布局通常涉及到HTML、CSS和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值