串联内容练习【二】

已于 2022-06-16 11:26:04 修改
阅读量1.3k 收藏
点赞数
文章标签： 前端 css html
于 2022-04-23 19:38:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67176957/article/details/124364765
版权
这是一个关于网页布局的示例，主要介绍了如何设置一个宽度为1226px的中间容器，并使其居中显示。页面包含顶部导航条，包括多个导航链接、购物车和用户登录注册选项。此外，还展示了广告部分的布局，包括快捷方式和图片轮播。整体使用了CSS进行样式控制，如去除链接下划线，设置字体和颜色等。
摘要由CSDN通过智能技术生成

网页的宽度，一般是在1000-1200这个范围左右，而我们的这个练习宽度是1226

我们需要专门设置一个类，用来表示中间容器的宽度

公共样式表中的内容

.clearfix::before,

.clearfix::after{

       centent:‘  ’;

      display:table;

      clear:both;

     }

去除a的下划线

a{

   text-decoration:none;

   color:#333;

}

body{

         font:14px/1.5  字体.........

        color:#333;

        min-width:1226px;

}

设置一个类，用来表示容器的宽度

.w{

      固定容器的宽度

      width:1226px;

      设置容器居中

      margin: 0  auto;

   }

 

.........

<body>

           顶部导航条

           顶部导航条的外部容器

           <div  class=“topbar-wrapper”>

          创建内部容器

          <div  class=“topbar  w clearfix”>

                   左侧的导航条

                 <ul  class=“service”>

                      <li><a href=“javascript:;”>小米商城</a>

                     </li>

                     <li class=“line”>｜</li>

                     <li><a href=“javascript:;”>MTUI</a>

                     </li>

                     <li class=“line”>｜</li>

                     <li><a href=“javascript:;”>loT</a>

                     </li>

                     <li class=“line”>｜</li>

                    <li><a href=“javascript:;”>云服务</a>

                     </li>

                     <li class=“line”>｜</li>

                     <li><a href=“javascript:;”>金融</a>

                     </li>

                     <li class=“line”>｜</li>

                     <li><a href=“javascript:;”>有品</a>

                     </li>

                     <li class=“line”>｜</li>

                     <li><a href=“javascript:;”>小爱开放平台</a>

                     </li>

                     <li class=“line”>｜</li>

                     <li><a href=“javascript:;”>企业团购</a>

                     </li>

                     <li class=“line”>｜</li>

                    <li><a href=“javascript:;”>资质证照</a>

                     </li>

                     <li class=“line”>｜</li>

                     <li><a href=“javascript:;”>协议规则</a>

                     </li>

                     <li class=“line”>｜</li>

                     <li>

                           <a class=“app” href=“javascript:;”>下载app

     添加一个弹出层

                                <div class=“qrcode”>

将元网页中的下载app的二维码保存至项目中

                                       <img src=“图标链接”>

                                    <span>小米商城APP</span>

                            </a>

                     </li>

                     <li class=“line”>｜</li>

                     <li><a href=“javascript:;”>Select  location</a>

                     </li>

                     <li class=“line”>｜</li>

               </ul>

                 购物车

               <ul  class=“shop-cart”>

                   <li><a href=“javascript:;”>

                           <i class=“fas  fa-shopping-cart”>                                 </i>

                           购物车（0）【中文的括号】

                        </a>                         

                   </li>

            </ul>

               用户的登录注册

               <ul class=“user-info”>

                    <li><a href=“javascript:;”>登录</a>

                    </li>

                    <li class=“line”>｜</li>

                     <li><a href=“javascript:;”>注册</a>

                     </li>

                     <li class=“line”>｜</li>

                     <li><a href=“javascript:;”>消息通知</a>

                     </li>

             </ul>           

          </div>

     创建banner的容器

         <div class="banner-wrapper">

             <div  class="banner  w">

                      <ul  class="img-list">

                            <li>

                                 <a href="#">

                              引入图片链接

                                       <img  src="链接" alt="">

                           ……一共五个，粘贴复制一下就可以了

                                 </a>

                           </li>

                     </ul>

                     

             <div class="pointer">

                   <a class="active" href="javascript:;"></a>

                  ……一共五个

             <div class="prev-next">

               <a class="prev" href="javascript:;"></a>

               <a class="next" href="javascript:;"></a>

          </div>

     </div>

      固定定位的工具条

            <div class=" back-top"></div>

     创建广告容器

           <div class＝"ad w">

                <ul class＝"shortcut">

                     <li>

                           <a href＝"#">

                               <i class＝"fas fa-clock"></i>

                               小米秒杀

                           </a>

                     </li>

                   <li>

                           <a href＝"#">

                               <i class＝"fas fa-builing"></i>

                               企业团购

                           </a>

                     </li>

                     <li>

                           <a href＝"#">

                                 <i class＝"fas fa-frog"></i>

                               F码通道

                           </a>

                     </li>

                     <li>

                           <a href＝"#">

                                 <i class＝"fas fa-frog"></i>

                               米粉卡

                           </a>

                     </li>

                     <li>

                           <a href＝"#">

                                 <i class＝"fas fa-clock"></i>

                               以旧换新

                           </a>

                     </li>

                      <li>

                           <a href＝"#">

                                 <i class＝"fas fa-clock"></i>

                               话费充值

                           </a>

                     </li>

                </ul>

                <ul class＝"imgs">

                     <li>

                          <a href＝"#"><img src＝"图片路径"></a>

                      </li>

                      <li>

                          <a href＝"#"><img src＝"图片路径"></a>

                      </li>

                      <li>

                          <a href＝"#"><img src＝"图片路径"></a>

                      </li>

</ul>

          </div>

</body>

</html>

 

 

 

 

 

 

 

 

 

 

 

 

m0_67176957
关注
Java基础--数组练习1（让你醍醐灌顶！！！）
人生得意须尽欢
07-24 1035
Java数组很重要，这里为小白量身定制了数组练习，快来看看吧！！！
字符串联练习
JY970316的博客
07-06 434
练习1：检测变量名是否有效 #!/usr/bin/env python #coding:utf-8 __author__ = "hahaha" ''' @author:hahaha @file:haha.py @contact：769218703@qq.com @time:7/01/10:18 AM @desc: ''' import string alphas
RC串联电路
热门推荐
godiszc的专栏
02-05 1万+
图6-9所示是RC串联电路，RC串联电路由一个电阻Rl和一个电容Cl串联而成。在串联电路中，电容Cl在电阻Rl后面或在电阻Rl前面是一样的，因为串联电路中流过各元器件的电流相同。                        1．RC串联电路电流特性     (1)电流特性。由于有电容的存在，电路中是不能流过直流电流的，但是可以流过交流电流，所以这一电路用于交流电路中。     (2)
Promise练习一（Promise串联执行）
岂曰无衣
12-17 687
有一些业务场景下，比如上传文件扫描图等，需要严格按照顺序上传，这就需要一个方法能保证这些操作任务串联执行。 Promise的then方法链式调用可以串联多个同步/异步任务，可以实现此功能。 function task1(){ return new Promise(function(resolve, reject){ setTimeout(()=>{ var random = Math.random() * 10; console.log('task1成功了！' +
电路串联和并联图解_串并联电路的识别方法图解
weixin_35658042的博客
12-24 8421
初中物理学科中，电学是最简单也是最难的一部分，简单的原因是如果弄明白了电路图，就会做所有的题目，难的原因是没明白电路图，就什么都不会。所以解电学的关键就是学会区分串、并联电路，知道串、并联电路的特点，会分析电路图，会将复杂的电路图简化为简单的串、并联电路。本期就给大家介绍几种串、并联电路的识别方法。一起来学习吧！串联电路定义：两个或两个以上的用电器顺次连接到电路中，这种连接方式叫做串联。(用电器“...
python练习题__列表
逆境清醒的博客
04-04 1075
python练习题__列表
LeetCode题练习与总结：串联所有单词的子串
一直学习永不止步
03-09 1359
在解决这个字符串串联问题时，我们首先分析了单词长度和字符串 s 的潜在组合。通过哈希表和滑动窗口技术，我们有效地遍历并验证了 s 中的子串。最终，我们返回了所有有效串联子串的起始索引。这个过程不仅展示了字符串处理和数据结构的应用，也体现了对边界条件和异常处理的重视。
HDLBits第二章练习及答案
Alice的博客
09-11 2905
HDLBits第二章 向量0(Vector0) 矢量用于使用一个名称对相关信号进行分组，以便更方便地操作。例如，wire [7:0] w; 声明了一个名为w的 8 位向量，它在功能上等同于具有 8 条单独的线。 请注意，向量的声明将维度放在向量名称之前，这与 C 语法相比是不寻常的。然而，部分选择了尺寸后，如你所期望的矢量名称。 wire [99:0] my_vector; // Declare a 100-element vector assign out = my_vector[10];
电路设计（二）之串联匹配电阻的应用
pangjian118114的专栏
04-24 1414
注意：为统筹电路设计较全面的知识点，本人将转载电路设计中各种常用器件与设计理念，如基本元器件电阻、电容、电感、二极管保护，存储器件SDRAM、FLASH，PCB设计工艺DCDC电源、PCB板布线设计工艺等，希望能为大家提供些许参考。   在电路设计中，经常需要使用匹配电阻，如闭路电视同轴电缆、时钟数据线等，如果阻抗不匹配会有什么不良后果呢？如果不匹配，则会形成反射，能量传递不过去，降低效率；会
串联电路和并联电路的电流练习题.pdf
09-30
“串联电路和并联电路的电流练习题” 电流是电路中最基本的物理量之一，电流的测量和分析是电学实验中最重要的部分。串联电路和并联电路是两种基本的电路结构，它们在电路分析和设计中扮演着重要的角色。本文将通过...
第二节 探究串联电路电压的规律练习题及答案.doc
10-11
【知识点详解】 1. 串联电路电压规律：在串联电路中，总电压等于各部分电路电压之和。根据题目中的习题1，如果灯泡L1的电压为2.5V，...这些内容是初中物理课程中的重要组成部分，有助于理解电路的工作原理和故障排查。
串联和并联电路练习电路图专题练习.pdf
09-30
在电子技术和电工学中，串联和并联电路是基本的电路连接方式，它们的理解和应用是电气工程基础知识的重要组成部分。本专题练习旨在帮助学生或从业者深入理解和熟练掌握这两种电路的特性，通过实践来巩固理论知识。 ...
串联电路和并联电路练习题(含答案).doc
11-21
根据题目内容，我们可以看到一系列关于串联电路和并联电路的问题，包括选择题和填空题，涉及电流、电压、电阻和功率的计算。例如： - 第1题，通过欧姆定律可以计算出电路中的电流和电阻 R2 的阻值。 - 第2题，考察...
串联及并联电路练习题.doc
10-08
串联及并联电路练习题 串联电路是指两个或两个以上的电路元件通过串联连接在一起的电路，其中每个电路元件之间只有一个节点，电流从一个电路元件流入下一个电路元件。串联电路的特点是电流处处相等，即电流从电源...
Vue实现登录功能
最新发布
qq_47296476的博客
11-07 228
总体来说，这段代码主要负责处理用户登录成功后的一系列操作，包括权限控制、路由跳转、消息提示和加载状态管理。方法用于获取有当前用户权限标识的路由数组，并进行对原路由的替换。方法用于设置递归过滤有权限的路由到 Pinia 的 routesList 中，并缓存多级嵌套数组处理后的一维数组。方法中创建的加载状态元素包含了一组加载动画的 HTML 结构，通过设置不同的类名和样式来展示加载效果。方法中，将创建的加载状态元素插入到页面的顶部，显示加载状态。这些方法共同实现了前端控制路由的权限管理和动态路由添加的功能。
Webserver(3.3)生产者消费者模型
学习历程记录和分享
11-05 308
解决该问题需要用互斥量确保线程同步，用条件变量或者信号量去解决生产者和消费者之间同步的问题，生产者把数据生产满了要通知消费者去消费。会产生数据安全问题，比如生产者还未生产出来，就去消费。
vxe-grid ，增加新行，并且定位到新增的行
花花鱼的专栏
11-05 181
vxe-grid新增空行，并且定位到空行位置。
前端react常见面试题目（basic)
警警的博客
11-02 1035
react常见面试题目（basic)
[]简单无废话]前端知识点(HTML+CSS)---IFC
2302_80171619的博客
11-02 209
IFC（Inline Formatting Context，行内格式化上下文）是指在 CSS 中控制行内元素如何布局的一个环境。它主要用于处理行内元素（如 span , a 等）在文本流中的位置和排列方式。IFC 会影响行内盒子的布局，包括换行、行高和文本对齐等。
高频电子线路综合练习题及复习指南
练习题的内容涵盖了高频电子线路的各个方面，如谐振电路、滤波电容、偶合电路、电路等效阻抗变换、谐振电路中的Q值等。通过解答这些问题，学生可以进一步理解和掌握这些概念和方法。 其中，对于RLC串联和LC并联谐振...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值