大学生WEB前端HTML网页大作业,学生模仿当当网首页、详情页和注册页面布局样式

于 2024-09-05 17:59:55 发布
阅读量470 收藏 1
点赞数 14
分类专栏： HTML网页作业 模仿官网 文章标签： 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_19465203/article/details/141937277
版权

网站简介

网站介绍： 为了锻炼学生的前端水平，模仿当当网官网首页、产品详情页以及当当注册页面，包括当当网js动态效果

网站布局：网站使用div+css布局页面，网站使用div,ul,li,a,p,h1,h2,h3,h4,form,input,button,table,tr,td等标签，css使用margin，border，padding，font-weight，font-family，color，width，line-height，overflow，float，text-align，background，display等样式

网站JS效果：网站首页banner，tab选项卡切换，图片滚动，js动态生成验证码以及验证用户注册输入信息

网站编辑器：网站是最简单的页面布局，任何编辑器都可以打开网站代码进行编辑，包括Dreamweaver，vs code，HBuilds，sublime，记事本等软件都可以进行编辑

网站截图

网站div布局代码

<div class="navtips">
    <div class="wrappers">
      <div class="adddres"><span>送至：北京</span>
        <ol>
          <li><a href="#">北京</a></li>
          <li><a href="#">北京</a></li>
          <li><a href="#">北京</a></li>
          <li><a href="#">北京</a></li>
          <li><a href="#">北京</a></li>
          <li><a href="#">北京</a></li>
          <li><a href="#">北京</a></li>
          <li><a href="#">北京</a></li>
          <li><a href="#">北京</a></li>
          <li><a href="#">北京</a></li>
          <li><a href="#">北京</a></li>
          <li><a href="#">北京</a></li>
          <li><a href="#">北京</a></li>
        </ol>
      </div>
      <ul>
        <li>欢迎光临当当，请<a href="login.html">登录</a>成为会员</li>
        <li><a href="#"><i class="icon_card"></i> 购物车</a></li>
        <li><a href="#">我的订单</a></li>
        <li><a href="#">我的云书房</a></li>
        <li><a href="#">我的当当</a></li>
        <li><a href="#">当当拼团</a></li>
        <li><a href="#">小说投稿</a></li>
        <li><a href="#">企业采购</a></li>
        <li><a href="#">客户服务</a></li>

      </ul>
    </div>
  </div>

  <div class="logobox wrapper">
    <div class="addcart">
      <a><i>0</i> <span></span>我的购物车</a>
    </div>
    <a class="logo" href="index.html"><img src="./images/logo.gif"></a>
    <div class="searchmian">
      <div class="searchBox">
        <form name="head_search" id="searchom" method="GET">
          <input type="text" placeholder="搜索商品" class="searchInput">

          <input type="button" value="搜索" class="searchBtn">
        </form>
      </div>

      <p>热搜:
        <a href="#">戴森 </a>
        <a href="#"> 你也不差 </a>
        <a href="#"> 中华寻宝 </a>
        <a href="#"> 笛莎童装 </a>
        <a href="#"> 徐文兵新书 </a>
        <a href="#"> 今日抢购 </a>
      </p>
    </div>
  </div>

  <div class="nav">
    <div class="wrapper">
      <span>商品分类
      </span>
      <ul>
        <li><a href="index.html"> 图书</a></li>
        <li><a href="#">电子书</a></li>
        <li><a href="#">网络文学</a></li>
        <li><a href="#"> 运动户外</a></li>
        <li><a href="#"> 乐高玩具</a></li>
        <li><a href="#"> 美妆</a></li>
        <li><a href="#"> 家用电器</a></li>
      </ul>
    </div>




  </div>





  <div class="wrapper">
    <div class="menuBox">
      <div class="menu">

        <ul>
          <li>
            <a href="#">图书、童书</a>
          </li>
          <li><a href="#"> 电子书、网络文学</a></li>
          <li><a href="#"> 创意文具</a></li>
          <li><a href="#"> 服饰、内衣</a></li>
          <li><a href="#"> 鞋靴、箱包</a></li>
          <li><a href="#"> 运动户外</a></li>
          <li><a href="#"> 孕、婴、童</a></li>
          <li><a href="#"> 家居、家纺、汽车</a></li>
          <li><a href="#"> 家具、家装、康体</a></li>
          <li><a href="#"> 美妆、个人护理、清洁</a></li>
          <li><a href="#"> 食品、茶酒</a></li>
          <li><a href="#"> 珠宝饰品</a></li>
          <li><a href="#"> 手机、数码、电脑办公</a></li>
          <li><a href="#"> 家用电器</a></li>
          <li><a href="#"> 当当礼品卡、生活服</a></li>



        </ul>

      </div>
      <div class="menuright">
        <div class="menuimgtips">
          <div class="menutu1">
            <img src="./images/qc.jpg" alt="">
          </div>
          <div class="menutab">
            <ul>
              <li class="cur">信息公告</li>
              <li>服务公告</li>
            </ul>
            <ol>
              <li>
                <p><a href="#">三彩女装 2件3折 3件2.5折</a></p>
              </li>
              <li>
                <p><a href="#">夏日超能力 图书5折封顶</a></p>
              </li>
              <li>
                <p><a href="#">笛莎超品限时3件1.5折</a></p>
              </li>
              <li>
                <p><a href="#">babycare超级品牌日抢！5折</a></p>
              </li>
            </ol>
            <ol style="display: none;">

              <li>
                <p><a href="#">关于谨防诈骗的重要提示 </a></p>
              </li>
              <li>
                <p><a href="#">当当阅读器 海量电子书随时读 </a></p>
              </li>
              <li>
                <p><a href="#">话费卡兑换当当礼品卡 </a></p>
              </li>
              <li>
                <p><a href="#">多种商品，礼品卡支付更优惠！ </a></p>
              </li>
            </ol>

          </div>
          <div class="menurightimg">

            <img src="./images/banner-samll10.jpg" alt="">
          </div>
        </div>
        <div class="banner">
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <div class="bannerimg">
                  <img src="./images/banner1.png" alt="">
                </div>
                <div class="bannerlist">
                  <ul>
                    <li><a href="#"><img src="./images/banner-samll.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./images/banner-samll2.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./images/banner-samll3.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./images/banner-samll4.jpg" alt=""></a></li>

                  </ul>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="bannerimg">
                  <img src="./images/banner2.png" alt="">
                </div>
                <div class="bannerlist">
                  <ul>
                    <li><a href="#"><img src="./images/banner-samll5.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./images/banner-samll6.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./images/banner-samll7.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./images/banner-samll8.jpg" alt=""></a></li>

                  </ul>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="bannerimg">
                  <img src="./images/banner3.png" alt="">
                </div>
                <div class="bannerlist">
                  <ul>
                    <li><a href="#"><img src="./images/banner-samll9.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./images/banner-samll10.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./images/banner-samll11.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./images/banner-samll12.jpg" alt=""></a></li>

                  </ul>
                </div>
              </div>
              <div class="swiper-slide">

                <div class="bannerimg">
                  <img src="./images/banner4.png" alt="">
                </div>
                <div class="bannerlist">
                  <ul>
                    <li><a href="#"><img src="./images/banner-samll.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./images/banner-samll2.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./images/banner-samll3.jpg" alt=""></a></li>
                    <li><a href="#"><img src="./images/banner-samll4.jpg" alt=""></a></li>

                  </ul>
                </div>
              </div>

            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
          </div>
        </div>

      </div>

    </div>

网站css样式代码


.wrappers {
  width: 1200px;
  margin: 0 auto;
}

.navtips {
  width: 100%;
  min-width: 1200px;
  height: 30px;
  line-height: 30px;
  background: #f8f8f8;
  border-bottom: 1px solid #dbdbdb;
}

.navtips div.adddres {
  float: left;
  position: relative;
  width: 80px;
  text-align: center;
}

.navtips div.cur {
  border: 1px solid #ddd;
  border-bottom: none;
  background-color: #fff;
}

.navtips ol {
  position: absolute;
  background-color: #fff;
  border: 1px solid #ddd;
  display: none;
  top: 28px;
  width: 270px;
  padding: 5px 10px;
  box-sizing: border-box;
  border-top: none;
}

.navtips ol li {
  width: 40px;
  float: left;
}

.navtips ul {
  float: right;
}

.navtips ul li {
  float: left;
  padding: 0 5px;
  color: #666;
}

.navtips ul li a {
  color: #666;
}

.navtips ul li .icon_card {
  float: left;
  width: 15px;
  height: 14px;
  background: url(../images/home_sprite2.png) no-repeat -40px -86px;
  overflow: hidden;
  margin: 6px 9px 0 0;
}

.searchmian {
  padding: 10px 0 0 0px;
  width: 548px;
  float: left;
}

.searchBox {
  width: 548px;

  float: left;
  height: 38px;
  border: 2px solid #b9213a;
  position: relative;
  border-radius: 2px;
  background: #fff;
}

.searchmian P {
  line-height: 34px;
}

.searchmian P a {
  color: #666;
  margin-right: 15px;
}

.searchBox .searchInput {
  border: none;
  line-height: 24px;
  height: 24px;
  width: 375px;
  margin: 7px 0;
  float: left;
  font-size: 14px;
  outline: none;
}

.logobox {
  overflow: hidden;
  padding: 15px 0 10px 0;
}

.logo {
  float: left;
  overflow: hidden;
  width: 362px;
  height: 100px;
}


.searchBox .searchBtn {
  width: 68px;
  height: 42px;
  margin: -2px -2px 0 0;
  background: #dadada;
  background-color: #FE0000;
  border: none;
  float: right;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
}

.searchBox form {
  width: 100%;
}

.searchBox {
  width: 548px;

  float: left;
  height: 38px;
  border: 2px solid #FE0000;
  position: relative;
  border-radius: 2px;
  background: #fff;
}

.searchBox .searchInput {
  border: none;
  line-height: 24px;
  height: 24px;
  width: 375px;
  margin: 7px 0;
  float: left;
  font-size: 14px;
  outline: none;
}

.addcart {
  width: 200px;
  float: right;
  border: 1px solid #dbdbdb;
  font-size: 16px;
  color: #f00;
  line-height: 36px;
  color: #f00;
  margin-top: 12px;
}

.addcart a {
  color: #f00;
}

.addcart span {
  margin: 0 15px;
  height: 36px;
  width: 36px;
  display: block;
  float: left;
  background: url(../images/icons.png) 0 -300px no-repeat;
  float: left;
}

.addcart i {
  height: 36px;
  width: 36px;
  display: block;
  float: right;
  color: #fff;
  text-align: center;
  line-height: 36px;
  font-size: 20px;
  background-color: #f00;
}

.nav {
  background-color: #F9F9F9;
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #dbdbdb;
}

.nav span {
  width: 200px;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  display: block;
  text-align: center;
  color: #fff;
  font-weight: bold;
  float: left;
  background-color: #ff2832;
}

.nav ul {
  float: left;
  padding-left: 30px;
}

.nav ul li {
  float: left;
  padding: 0 15px;
  color: #dbdbdb;
}

.nav ul li a {
  color: #222;
  font-size: 14px;
  font-weight: bold;
}














/*****/


.menu ul li {
  height: 32px;
  line-height: 32px;
  padding: 0 18px;
  overflow: hidden;

}

.menu ul li:hover {
  background-color: #ddd;
}

.menu ul li a {
  float: left;
  font-size: 14px;
  color: #666;
}

.menu ul li span {
  color: #222;
  float: left;
  padding: 0 2px;
}



.swiper-container {
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;


  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.menuright {
  width: 1000px;
  height: 488px;
  float: right;
}

.banner {

  width: 796px;
  height: 488px;
  overflow: hidden;

}

.menuBox {
  overflow: hidden;
  margin-bottom: 25px;
}

.menuBox .menu {
  width: 200px;
  height: 488px;
  background: #fff;
  float: left;
  overflow: hidden;
  background-color: #f1f1f1;
}

.swiper-slide img {
  width: 100%;
  height: 100%;
}

.bannerimg {
  width: 796px;
  flex: 1;
  height: 326px;
  overflow: hidden;
}

.bannerlist {
  width: 796px;
  flex: 1;
  border-bottom: 1px solid #e6e6e6;
}

.bannerlist ul {
  display: flex;
  justify-content: space-between;
}

.bannerlist ul li {
  width: 198px;
  height: 160px;
  position: relative;
  border-right: 1px solid #e6e6e6;
}

.bannerlist ul li img {
  width: 198px;
  height: 160px;
}

.bannerlist ul li a::after {
  content: '';
  display: none;
  background-color: #000;
  opacity: 0.04;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.bannerlist ul li a:hover::after {
  display: block;
}

.swiper-button-next,
.swiper-button-prev {
  color: #F699B4;
}

.gooddetial {
  padding-top: 30px;
}

.bannertips {
  background: #f1f1f1;
  width: 80px;
  height: 80px;
  position: fixed;
  right: 10px;
  bottom: 80px;
}


.bannertips h3 a {
  display: block;
  width: 100%;
  height: 100%;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}

.menuimgtips {
  float: right;
  width: 202px;
  overflow: hidden;
}




.menutab ul {
  height: 30px;
  overflow: hidden;
}

.menutab ul li {
  margin-left: -1px;
  float: left;
  width: 100px;
  border: 1px solid #e6e6e6;
  border-top: 0;
  height: 28px;
  background-color: #f0f0f0;
  cursor: default;
  font: 14px/29px "Microsoft Yahei";
  text-align: center;
  color: #646464;
  overflow: hidden;
  cursor: pointer;
}

.menutab ul li.cur {
  background-color: #fff;
  border-bottom: none;
  padding-bottom: 1px;
}



.titlemenu {
  height: 40px;
  border-bottom: 2px solid #000;
  margin-bottom: 10px;
}

.titlemenu strong {
  float: left;
  line-height: 40px;
  font-size: 20px;
  margin-right: 180px;
}

.titlemenu ul {
  float: left;
}

.titlemenu ul li {
  width: 102px;
  text-align: center;
  float: left;
  height: 38px;
  line-height: 40px;
  font-size: 16px;
  cursor: pointer;
}

.titlemenu ul li.cur,
.titlemenu ul li:hover {
  border: 2px solid #000;
  color: #000;
  line-height: 36px;
  border-bottom: 2px solid #fff;
  background-color: #fff;
}

.menutab ol {
  padding: 10px 0;
}

.menutab ol li {
  line-height: 24px;
  height: 24px;
  overflow: hidden;
  padding: 0 20px;
}

.menutab ol li a {
  color: #f00;
}

.directleft {
  width: 240px;
  height: 400px;
  position: relative;
}

.book_tab_img {
  position: absolute;
  bottom: 0;
  background-color: #fff;
  height: 112px;
  border: 1px solid #dbdbdb;
  padding: 10px 10px 0;
}

.book_tab_img {
  overflow: hidden;
}

.book_tab_img p {
  width: 72px;
  float: left;
  height: 24px;
  line-height: 24px;
}

.book_tab_img p a {
  color: #999;
}

.probook {
  width: 910px;
  float: left;
}

.porlist {
  overflow: hidden;
  margin-bottom: 20px;
}

.pro01 {
  overflow: hidden;
}

.pro01 ul li {
  width: 238px;
  height: 357px;
  float: left;
  border: 1px solid #f8f8f8;
  border-top: none;
  border-left: none;
}

.pro02 ul li {
  width: 166px;
  height: 220px;
  float: left;
  border: 1px solid #ddd;
  border-top: none;
  border-left: none;
}
.pro03 ul li {
  float: left;
  width: 190px;
  height: 258px;
  padding: 4px 3px 7px;
  border: 1px solid #fff;
}
.pro01 ul li .nr {

  padding: 0;
  margin: 0 auto;
}

.pro01 ul li .nr .picture {
  width: 100%;
  height: 158px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pro01 ul li .nr .picture img {
  max-width: 100%;
  max-height: 100%;
}

.pro01 ul li .nr h5 {
  height: 20px;
  line-height: 20px;
  color: #333;
  font-size: 12px;

  overflow: hidden;
  padding: 0 10px;
  position: relative;
  font-weight: normal;

}

.pro01 ul li .nr h5 a {
  color: #666;
}

.pro01 ul li .nr h4 {
  height: 20px;
  line-height: 20px;
  color: #333;
  font-size: 12px;

  overflow: hidden;
  padding: 0 10px;
  position: relative;
  font-weight: normal;

}

.pro01 ul li .nr h4 span {
  font-size: 14px;
  color: #f00;
  margin-right: 15px;
}

.pro01 ul li .nr p {
  height: 40px;
  line-height: 20px;
  font-size: 14px;
  color: #999;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.pro01 ul li .nr .info {
  display: flex;
  justify-content: space-between;
  height: 24px;
  line-height: 24px;
  margin-top: 12px;
}

.pro01 ul li .nr .info .tag {
  width: 72px;
  border-radius: 12px;
  text-align: center;
  background: #ffe3e2;
  color: #de3435;
  font-size: 12px;
}

.pro01 ul li .nr .info .order {
  font-size: 14px;
  color: #333;
}

.directleft {
  width: 240px;
  height: 442px;
  float: left;
  position: relative;

}

.timbox {
  position: absolute;
  top: 20px;
  left: 10px;
  color: #fff;
}

.directleft img {
  width: 100%;
  height: 100%;
}

.directright {
  float: right;
}

网站JS代码

$('.adddres').mouseenter(function (e) { 
	console.log(1);
	// e.preventDefault();
	$(this).addClass('cur');
	$('.adddres ol').show();
	
}).mouseleave(function (e) {
	$('.adddres ol').hide();
	$(this).removeClass('cur');
});
// /选择地址的下拉菜单

$('.menutab ul li').each(function (index, element) { //选项卡遍历选择
	$(this).mouseenter(function () { 
		$('.menutab ul li').removeClass('cur')
		$(this).addClass('cur');
		$('.menutab ol ').css('display',"none");
		$('.menutab ol ').eq(index).css('display',"block");
	});
});


$('.tab_aa li').each(function (index, element) {
	$(this).mouseenter(function () { 
		$('.tab_aa li').removeClass('on')
		$(this).addClass('on');
		$('.sidelist ul ').css('display',"none");
		$('.sidelist ul ').eq(index).css('display',"block");
	});
});


$('.titlemenu ul li').each(function (index, element) {
			$(this).mouseenter(function () { 
				$('.titlemenu ul li').removeClass('cur')
				$(this).addClass('cur');
				$('.pro02 ul ').css('display',"none");
				$('.pro02 ul ').eq(index).css('display',"block");
			});
	

	
});

$('.titlemenu ul li').each(function (index, element) {
	$(this).mouseenter(function () { 
		$('.titlemenu ul li').removeClass('cur')
		$(this).addClass('cur');
		$('.pro02 ul ').css('display',"none");
		$('.pro02 ul ').eq(index).css('display',"block");
	});



});


$('.pro03 ul li').each(function (index, element) {
	$(this).mouseenter(function () { 
		$('.picture').removeClass('cur')	
  $(this).find('.picture').addClass('cur');
 
	});

 

});

黑白说程序
关注
  • 14
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js css3实现tab,纯CSS3实现的Tab选项卡三个实例分享
weixin_34146759的博客
08-03 1534
现在主流浏览器已经支持CSS3了(xp上的ie8就不要说了)，以前在用传统的js css制作的tab选项卡已经过时，本文我们分享几个使用纯css3实现的tab选项卡的实例代码。ec(2);实例一：下面我们一起看看用纯CSS来制作一个选项卡的方法。使用纯CSS3来制作Tab的好处除了不需要使用jquery外，还支持添加一些细微的CSS3交互，使Tab展示效果不错。代码这里主要使用表单的单选按钮来实现...
纯Css制作tab选项卡
weixin_55753367的博客
03-04 2955
Css本身的功能就很强大的，尤其是Css3出来之后，大部分特效只用Css3就能完成了，无需再费心思去研究js、jQuery该怎么怎么去写，代码简洁方便。下面这个是用纯Css制作的tab选项卡效果： 用Css实现这个选项卡效果，需要用到label标签，label标签不会呈现任何效果，当点击label时，浏览器会自动将焦点转到和标签相关的的表单控件上。 这个用Css实现tab效果的主要思路是：使用表单的单选按钮来实现这个tab显示和隐藏，首先tab里的内容默认隐藏，如果单选按钮为选中状态（checked）就显
css3选项卡样式,纯CSS3制作TAB选项卡
weixin_35684578的博客
08-03 338
这个CSS3 Tab样式已经写出来很久了，一直没有时间把它分享出来，也许网上还有其他很多这样子的代码，但没有一种是用到我说的:checked来做的，不管如何，多掌握一种方式对你也是有帮助的。 效果就如博客之前写过的一个Tab一样：有最新文章、热门文章和随机文章。第一种：:checked首先像平常写HTML和CSS一样，不过要使用input的radio来做为点击后选择的内容。通过input:chec...
tab选项卡（纯css）
weixin_54327001的博客
09-06 505
易错点：写清楚是哪个标签，对于子标签操作一定要写清楚，不要只写父标签。
css3选项卡样式,简约时尚的纯CSS3 Tabs选项卡特效
weixin_35714534的博客
08-03 945
插件描述：这是一款使用纯CSS3制作的Tabs选项卡特效。该Tabs选项卡简约时尚，各个选项卡之间切换时使用了下划线跟随动画，整体效果非常不错。简要教程这是一款使用纯CSS3制作的Tabs选项卡特效。该Tabs选项卡简约时尚，各个选项卡之间切换时使用了下划线跟随动画，整体效果非常不错。使用方法HTML结构整个Tabs选项卡的HTML结构分为几个部分：使用元素和一个无序列表来制作导航。Tab1Ta...
html tab选项卡变色,纯CSS tab选项卡
weixin_28882907的博客
06-03 450
css* {font-family: 'Work Sans', sans-serif;}html, body {height: 100%;color: #1a1b1c;}body{background-color: #FFFFFF}label, a {cursor: pointer;user-select: none;text-decoration: none;display: inline-bl...
友情链接tab选项卡css,css实现tab选项卡
weixin_33488806的博客
08-04 168
tab1tab2tab3sample content 1sample content 2sample content 3cssdiv.tab-frame input{ display:none;}div.tab-frame label{ display:block; float:left;padding:5px 10px; cursor:pointer}div.tab-frame input:ch...
纯css制作tab选项卡（一）
热门推荐
web_xiaolei的博客
10-11 1万+
css本身的功能就挺强大的，尤其是css3出来之后，大部分特效只用css3就能完成了，无需再费心思去想js怎么怎么做jQuery怎么怎么做，代码简洁质量轻巧。下面是用纯css制作的tab选项卡效果：原始界面：鼠标划上第一个tab选项，相应内容显示：鼠标划上第二个tab选项：相应内容显示具体内容自己添加啦，下面献上完整代码：<DOCTYPE html> <html> <head> <title
css3 实现选项卡切换,CSS3实现选项卡切换的方法
weixin_39851261的博客
08-04 2776
导语：在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。以下的是YJBYS生小编为大家搜集的使用CSS3实现选项卡切换的方法，欢迎阅读参考。:target是什么?MDN是这样描述的：:targetThe :target pseudo-class represents the unique element, if any, with an id m...
html选项卡怎么做css,纯CSS3制作Tabs选项卡
weixin_29091105的博客
06-03 627
Tabs选项卡对于Web前端攻城师来说并不陌生，也制作了不少，我们在《CSS3+jQuery制作切角的Tabs》也介绍了一个使用CSS3配合jQuery制作Tabs的实例。我想大家在制作Tabs选项卡大多数都是使用jQuery或者javaScript来实现的。而单独使用纯CSS来制作Tabs来说还是比较少见。随着CSS3和CSS技术不断的更新,我们放弃使用jQuery或javaScrip来制作Ta...
jQuery CSS3 Tab选项卡圆角可自由伸缩.rar
07-10
"jQuery CSS3 Tab选项卡圆角可自由伸缩.rar" 文件提供了一个灵活且具有视觉吸引力的Tab选项卡实现，结合了jQuery和CSS3的技术，为网页开发人员提供了一个优雅的解决方案。 首先，jQuery是一个轻量级的JavaScript库...
css3 tab选项卡特效.rar
07-10
一款调用了google jsapi实现的css3 tab选项卡特效，测试时请注意要引入Google的JSAPI才可以正常使用，该TAB选项卡动画效果十分流畅，支持众多鼠标效果，若正常引入JSAPI，会看到动画效果很平滑顺畅，选项卡的样式也...
纯css3经典tab选项卡动画特效
12-13
纯CSS3经典Tab选项卡动画特效是一种无需JavaScript插件，仅通过CSS3属性实现的交互设计。这种技术在现代网页设计中广泛应用，因为其能够提供流畅的用户体验且减少了对JavaScript的依赖，从而优化了页面加载速度。...
一款纯css3实现的tab选项卡的实列教程
01-19
今天给大家带来一款纯css3实现的tab选项卡。单击左侧的选项的时候，右侧内容以动画的形式展示。效果图如下： 　实现的代码。 　html代码： XML/HTML Code复制内容到剪贴板  night-tabs-color-default night-tabs...
关于前端服务器字体的引用
qq_69304031的博客
09-02 360
服务器字体是一种强大的工具，可以帮助我们实现全场景字体风格的统一。通过定义服务器字体，我们可以确保网页在不同的设备和浏览器上都能呈现出一致的字体效果，提升用户体验和品牌形象。在使用服务器字体时，需要注意字体文件的版权问题，并确保字体文件的加载速度不会影响网页的性能。希望这篇博客对你在网页设计中使用服务器字体有所帮助。如果你有任何问题或建议，欢迎在评论区留言。
后端输出二进制数据，前端fetch接受二进制数据，并转化为字符输出
cdcdhj的博客
09-01 488
在这个前端代码中，我们使用fetch API请求PHP脚本，并获取二进制数据。然后，我们将ArrayBuffer转换为字符串，以便在JavaScript中使用。在PHP中，你可以将字符串或其他数据类型转换为二进制数据，并通过HTTP响应发送给前端。
从面向对象(OOP)到面向切面(AOP)：编程范式的演变
妍思码匠的博客
08-30 1380
本文深入探讨了面向切面编程（AOP）在前端开发中的应用，解释了AOP如何通过动态增强与代码复用、降低模块间耦合度，为前端项目带来更高效、更模块化的解决方案。通过具体案例分析，如日志记录切面和动态埋点的实现，展示了如何利用装饰器模式、高阶组件等技术在前端实现AOP。理解AOP的原理与实践，将有助于开发者构建更易于维护和扩展的前端应用。无论你是前端新手还是资深开发者，本文都将为你提供有价值的见解和实用技巧。
vue3使用-watch监听总结
weixin_44072254的博客
09-01 492
{deep: true, immediate: true, flush: 'post'}：deep是深度监听；flush:如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'，sync'创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发；flush: 'post'， 如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'flush: sync'，创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发。监听数组的方式-示例。
深入理解JavaScript闭包：避免常见的内存泄漏问题
最新发布
官方推荐
09-02 3750
深入理解JavaScript闭包：避免常见的内存泄漏问题
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值