2-1div、span、ul、ol、li 标记及css的调用方式

最新推荐文章于 2024-05-14 09:58:41 发布
原创 最新推荐文章于 2024-05-14 09:58:41 发布 · 1.8k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了CSS的基本概念，包括常见的HTML标记如div、span等的使用方法，CSS的调用方式及选择器，以及具体的样式设置如边框、布局属性等。

知识点：

         一、  div 、span、 ul、 ol、 li  标记

         二 、css概述

         三、css的调用方式

         四、css的选择器

         五、css中具体的样式

         六、 demo 当当网页


一、 div、span、ul、ol、li  标记

         常用的web2.0思想中的标记

          1、div

                    注意：div独占一行

          2、span

          3、ul、ol 一组

                  <ul  type="square 正方形 circle圆圈 disc实心点">  无序列表

                       <li>今天天气不错</li>

                       <li>明天天气也不错</li>

                       <li>后天天气仍然不错</li>

                  </ul>    

                 <ol  type="1 a i I">  有序列表

                       <li>今天天气不错</li>

                       <li>明天天气也不错</li>

                       <li>后天天气仍然不错</li>

                  </ol>             

   二 css概述

            1>什么是css

                    css层叠样式表     替代属性的 不用写在标记中   

                       实现 表现与结构分离, 便于管理，使页面整洁

            2->web2.0

                  table 架构页面

                   web2.0  div+css架构页面****

                   html5  css3   在web2.0思想上 添加了一些内容

三 css的调用方式

       1》css格式

           {样式名称: 样式值；样式名称: 样式值；样式名称: 样式值；样式名称: 样式值；............}

       2》html页面中如何调用css        表现和结构分离

             A标记上直接使用style属性来调用样式

                   <标记 style="样式名称：样式值;样式名称：样式值;样式名称：样式值;样式名称：样式值;.......">

                                  style属性所有标记都有

             B html页面中的内嵌样式

                          </head>
                                <style type="text/css">
                                </style>
                           <body>

             C 外部调用样式

                      index.html----->index.css 样式文件

                    <link href="index2.css" rel="stylesheet" type="text/css">

                     </head>之前

四、css选择器  在页面中找到元素

       1、使用选择器的格式

            选择器{样式名称：样式值;样式名称：样式值;样式名称：样式值;样式名称：样式值;...............}

       2、css中的六种选择器

              1》 通配选择器   选择页面上的所有元素

                    *{            }

              2》标记选择器

                     标记名称{      }  具有相同标记名称的元素

              3》 class 选择器 选中具有相同class 属性的元素

                      .className{        }       选择同类的不同名的元素

              4》  id选择器

                             #id{            }  选择具有相同id的元素

              5》 群组选择器:

                     #id,  .className  ,标记名称............{     }

              6》  派生选择器

                        父选择器  子选择器

  五、css中的具体样式

           1》 boder   width   height

              border: 粗细  solid(实线)  颜色  元素边框

               width: 像素值

               height: 像素值

           2》布局属性

                   padding：上 右 下 左 内边距 注意：padding会改变元素的内外宽度

                         padding-top: 像素

                         padding-right:像素

                         padding-bottom：像素

                          padding-left：像素

                    注意：padding : val;  表示上 右 下 左都是五十 。以 上和左 为主的位置。

               margin：外边距 上 右 下 左  注意：margin不会改变 外边元素的大小的

                            margin-top:像素

                            margin-right:像素

                            margin-bottom:像素

                            margin-left:像素

                      margin: 50px;    以上边 和 左边为主

                      margin: auto 水平居中****


                     float: left，right  浮动元素的。独占一行的特性消除掉（div具有独占一行的特性）

                      clear: both；   消除前后元素浮动所带来的影响的   

                      display: none 或block    控制显示隐藏元素的

          3》背景属性 ：

                 background-color:  背景色

                 background-image:url(img/1.png); 背景图 ：如果背景图的宽高小于元素的宽高 背景图横向和纵向平铺

                 background-repeat: no-repeat不平铺 repeat-x 横向平铺   repeat-y 纵向平铺

                  background-position:  x(正 向右  负 向左),  y(正 向下  负 向上):           调整背景图的位置

                 background:  color  image   repeat  附着方式   位置

          4》 字体属性：

                  font-size:  像素值  ：大小

                 color：颜色

                  font-style: normal    italic斜体

                            font-weight:  100------900    900==bold   字体的粗细

                  font-family: 文本书法体

                  text-align :    left  center right  水平位置

                  line-height: 行高

                  font： style  weight  size   line-height   famliy

         5》边框属性：

               border：1px solid #ff0000;

              单独指定哪个位置的边框：

               border-top: 粗细 线体 颜色

               border-right:粗细 线体 颜色

               border-bottom: 粗细  线体  颜色

               border-left: 粗细 线体 颜色

          6》列表

                    list-style:none;//消除列表前面的小黑点

                    list-style-image:url(img/1.png); 列表中的标识 ，可以是图片。

          7》其他的常用样式

                        text-decoration:文本修饰线  line-through  underline

                       四种状态： 超链接样式  伪类

                                   刷新状态                ：link{}-->不太支持  a  #id  .className{样式}

                                    鼠标移动上去的状态 ：hover{}

                                    鼠标单击的状态           :active{}

                                    单击过后的状态               :visited{}

               

                                      

               




CSS布局必备的列表元素：ul、ol、li、dl、dt、dd详解及经验交流
DbjrClojure的博客
10-01 1443
列表元素ul、ol、li、dl、dt和dd在网页布局中起着重要的作用。它们不仅可以用于展示有序或无序的项目和内容，还能够帮助构建页面的结构和布局。通过灵活运用这些列表元素，并结合CSS样式的设置，可以实现各种不同的布局效果。它们不仅用于展示内容的有序或无序列表，还能够帮助构建页面的结构和布局。本文将详细介绍常用的列表元素ul、ol、li、dl、dt和dd，并提供相应的源代码示例，以便更好地理解和使用。以上代码会生成一个描述列表，其中dt表示术语，dd表示对应的描述。li元素用于表示列表中的每一项。
[网络安全自学篇] 八十三.WHUCTF之CSS注入、越权、csrf-token窃取及XSS总结
热门推荐
杨秀璋的专栏
06-09 1万+
这是作者网络安全自学教程系列，主要是关于安全工具和实践操作的在线笔记，特分享出来与博友们学习，希望您喜欢，一起进步。前文分享了WHUCTF隐写和逆向题目，包括文字解密、图片解密、佛语解码、冰蝎流量分析、逆向分析。这篇文章将详细讲解一道CSS注入题目，包括CSS注入、越权、csrf-token窃取及CSP绕过，同时总结XSS绕过知识，希望对您有所帮助。第一次参加CTF，还是学到了很多东西。人生路上，要珍惜好每一天与家人陪伴的日子。感谢武汉大学，感谢这些大佬和师傅们（尤其出题和解题的老师们）~
CSS
dh的博客
10-05 888
一、CSS 的复合选择器 1.1 什么是复合选择器 在 CSS 中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。 复合选择器可以更准确、更高效的选择目标元素（标签）。 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的。 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等。 1.2 后代选择器 后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用
html中有序列表的css样式,HTML ol li有序列表标签
weixin_39622562的博客
06-03 1212
本篇文章帮大家学习HTML ol li有序列表标签，包含了HTML ol li有序列表标签使用方法、操作技巧、实例演示和注意事项，有一定的学习价值，大家可以用来参考。一、ol li有序列表标签语法与结构内容一内容二内容三以上3个li标签组放在标签之间。并且ol标签之间可以放若干li标签组。通常我们使用li标签都是使用无序ul li列表标签。一般情况无论是有序列表(ol li)还是无序列表(ul l...
Html中＜div＞＜/div＞标签和＜li＞＜/li＞标签的简单应用
ZLQiang_csdn的博客
06-04 4419
实现简单的鼠标的导航渐变和简单电器分类页面 我们知道<div></div>标签： <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。 <div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。 如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。 <div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table&g
码农成长记——css ul li 中嵌套span
xueyue_zx的博客
12-12 5631
今天为了实现标题的分隔 在ul li 中嵌套了一个span 用css 规定大小然后float:right;结果|跑到span标签的范围之外去了 最后解决的方法是单独使用一个li把|包起来 经验：并排的元素或者没的包含关系的元素 尽量不是去用父子关系的嵌套 采用兄弟关系的并列更容易实现功能
<!-- * @Author: luoxianbo combatzone@163.com * @Date: 2025-07-12 20:23:28 * @LastEditors: luoxianbo combatzone@163.com * @LastEditTime: 2025-08-03 16:32:25 * @FilePath: \VUE3-PROJECT\vite-project\src\components\tecHigLin\TecHigligInfo.vue * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE --> <template> <div class="parent-div"> <div class="left-cloums-div" v-show="leftShowFlag"> <div class="main-div"> <div> <h2>详细介绍</h2> </div> <div class="main-info-div"> <p> <span class="span-title">id </span> <span class="span-message">{{ tecDetil.id }}</span> </p> <p> <span class="span-title">名称 </span> <span class="span-message">{{ tecDetil.name }}</span> </p> <p> <span class="span-title">模块id </span> <span class="span-message">{{ tecDetil.type }}</span> </p> <p> <span class="span-title">模块名称 </span> <span class="span-message">{{ tecDetil.typeName }}</span> </p> <span class="span-title">内容</span> <div class="message-div" v-html="tecDetil.techigligmessage"></div> <div> <button class="gobackBt" @click="goBack">返回</button> </div> </div> </div> <div class="small-list-div"> <div class="small-list-div-div">子项目清单</div> <div class="list-div" id="listContainer"></div> </div> </div> <div class="right-cloums-div" v-show="!leftShowFlag"> <div class="small-list-div"> <div class="small-list-div-div">子项目清单</div> <div class="list-div" id="listContainer"></div> </div> <div class="small-detil-div">详情页面</div> </div> </div> </template> <script setup> import technologyTypeApi from "../../api/technologyTypeIndex.js"; import "@vueup/vue-quill/dist/vue-quill.snow.css"; import { ref, onMounted } from "vue"; //缓存内容引入 import { useRoute, useRouter } from "vue-router"; //详情接口返回数据承接声明 const tecDetil = ref({ id: "", name: "", type: "", typeName: "", techigligmessage: "", smalltecVOList: [], // 初始化为空数组 }); // 路由信息对象 const route = useRoute(); const router = useRouter(); const leftShowFlag = ref(true); //组件渲染函数 onMounted(() => { //调用详情接口函数 getTecDetil(route.params.id); }); //获取详情接口调用函数 const getTecDetil = (id) => { //情趣详情接口 technologyTypeApi.detail({ id: id }).then((res) => { tecDetil.value = res.data.data; const smallTecList = res.data.data.smalltecVOList || []; console.log(typeof smallTecList); // 1. 获取列表容器 const listContainer = document.getElementById("listContainer"); // 2. 清空现有内容 listContainer.innerHTML = ""; let ulElement = document.createElement("ul"); ulElement.className = "el-class-name"; smallTecList.forEach((item) => { //创建ol标签 let elElement = document.createElement("ol"); elElement.innerText = item.title; elElement.addEventListener("click", () => { getSmallDetil(item.id); }); //将创建的ol标签加到ul标签中 ulElement.appendChild(elElement); }); // 4. 将ul添加到容器 listContainer.appendChild(ulElement); }); }; function getSmallDetil(id) { console.log("调用子项目详情查询接口", id); leftShowFlag.value = false; } //返回函数 const goBack = () => { router.push({ name: "TecHigligListName", }); }; </script> <style scoped lang="scss"> .left-cloums-div { display: flex; //弹性布局 justify-content: center; //水平居中 gap: 10px; //子元素间距 margin: 10px; height: 560px; } .right-cloums-div { display: flex; //弹性布局 justify-content: left; //水平居中 gap: 10px; //子元素间距 margin: 10px; height: 560px; } //子级元素布局 .main-div { flex: 1; height: 100%; } .small-list-div { flex: 0.3; height: 100%; weight: 100px; } p { margin: 10px; } .span-title { background-color: #bed2f0; font-size: 16px; //字号 font-family: Arial, sans-serif; //字体 font-weight: bold; //加粗 border: 1px solid #000; //边框 border-radius: 4px; //圆角 padding: 2px 5px; margin: 5px; } .span-message { background-color: #dde5f1; font-size: 16px; //字号 font-family: Arial, sans-serif; //字体 border: 1px solid #bdb6b6; //边框 border-radius: 4px; //圆角 padding: 2px 5px; } .message-div { background-color: rgb(163, 171, 167); margin: 5px; padding: 3px; height: 300px; width: 100%; overflow-y: auto; //当div的内容过多，则垂直滚动显示 } .small-list-div-div { background-color: #bdb6b6; width: 100%; border: 1px solid #bdb6b6; //边框 border-radius: 4px; //圆角 } .list-div { margin: 4px; width: 100%; height: 400px; } .li-class { background-color: rgb(118, 115, 115); } .gobackBt { width: 50px; height: 30px; background-color: brown; } </style> 分析这段代码，在点击left-cloums-div元素下的ol标签之后，right-cloums-div元素下的list-div列表没有数据，式什么原因，如何解决
08-04
当点击left-cloums-div中的ol标签（即子项目清单中的某一项）时，会触发getSmallDetil函数，该函数将leftShowFlag设置为false，从而隐藏left-cloums-div，显示right-cloums-div。 4. 但是，在right-cloums-div中，...
--------------------------------------------------------------------------- ElementNotInteractableException Traceback (most recent call last) Cell In[27], line 4 2 element = web.find_element(By.XPATH, '/html/body/app-root/layout-default/div/layout-sidebar/div/ul/li[7]/a/span').click() 3 time.sleep(1) ----> 4 element = web.find_element(By.XPATH,'/html/body/app-root/layout-default/div/layout-sidebar/div/ul/li[7]/ul/li[1]/a/span').click() 6 element = web.find_element(By.XPATH, '/html/body/app-root/layout-default/div/layout-sidebar/div/ul/li[7]/ul/li[1]/ul/li[6]/a/span').click() 7 #all_windows = web.window_handles 8 #web.switch_to.window(all_windows[-1]) File c:\Users\Administrator\AppData\Local\Programs\Python\Python313\Lib\site-packages\selenium\webdriver\remote\webelement.py:120, in WebElement.click(self) 112 def click(self) -> None: 113 """Clicks the element. 114 115 Example: (...) 118 >>> element.click() 119 """ --> 120 self._execute(Command.CLICK_ELEMENT) File c:\Users\Administrator\AppData\Local\Programs\Python\Python313\Lib\site-packages\selenium\webdriver\remote\webelement.py:573, in WebElement._execute(self, command, params) 571 params = {} 572 params["id"] = self._id --> 573 return self._parent.execute(command, params) File c:\Users\Administrator\AppData\Local\Programs\Python\Python313\Lib\site-packages\selenium\webdriver\remote\webdriver.py:458, in WebDriver.execute(self, driver_command, params) 455 response = cast(RemoteConnection, self.command_executor).execute(driver_command, params) 457 if response: --> 458 self.error_handler.check_response(response) 459 response["value"] = self._unwrap_value(response.get("value", None)) 460 return response File c:\Users\Administrator\AppData\Local\Programs\Python\Python313\Lib\site-packages\selenium\webdriver\remote\errorhandler.py:232, in ErrorHandler.check_response(self, response) 230
08-22
### 三级标题：Selenium中出现ElementNotInteractableException异常的原因及解决方法 `ElementNotInteractableException` 是 Selenium 自动化测试中常见的异常之一，通常表示目标元素无法与之交互，例如无法点击、...
Jquery使用css方法改变样式实例
12-10
- **举例3**：通过链式调用`css()`方法，依次设置了`div`元素的宽度、背景颜色和字体大小。这种链式调用是jQuery的一个特性，使得代码更紧凑。 总结来说，jQuery的`css()`方法是动态修改网页样式的重要工具，它可以...
--------------------------------------------------------------------------- AttributeError Traceback (most recent call last) Cell In[11], line 9 1 #web.execute_script("window.scrollBy(0, 3000);") 2 # element = web.find_element(By.XPATH, '/html/body/app-root/layout-default/div/layout-sidebar/div/ul/li[7]/a/span').click() 3 # time.sleep(1) (...) 7 # #all_windows = web.window_handles 8 #web.switch_to.window(all_windows[-1]) ----> 9 tbody = web.find_elements(By.XPATH,'/html/body/app-root/layout-default/section/div/web-resultquery/div/div[3]/nz-table/nz-spin/div/div/div/div/div/table/tbody').find_elements_by_class_name("tr") 10 #tbody = web.find_elements(By.XPATH,'/html/body/app-root/layout-default/section/div/web-resultquery/div/div[3]/nz-table/nz-spin/div/div/div/div/div/table/tbody') 11 for tr in tbody : 12 # str = ""; 13 # for tr in tbody : 14 # str += tr.text AttributeError: 'list' object has no attribute 'find_elements_by_class_name'
最新发布
08-23
更高效的方式是直接使用 XPath 或 CSS 选择器来定位目标元素，避免多层查找： ```python # 使用 XPath 查找所有 tr 行中 class 为 "cell" 的 td 元素 cells = driver.find_elements(By.XPATH, "//tr//td[@class='...
CSS中的div和span标签
shwanglp的专栏
12-04 8947
今天学习了关于CSS中的div和span标签，下面来通过例子简单的介绍一下这几个标签怎么使用。 part1： div标签： 一般用于配合css完成网页的基本布局 span标签：一般用于配合css修改网页中的一些局部信息 二者的区别：div会单独的占领一行，而span不会单独占领一行；div是一个容器级的标签，span是一个文本级的标签 补充： 什么是容器级标签？ 什么是文本级标签？ 容
用Div标签替换ul和li标签
weixin_44617651的博客
05-14 668
使用 `` 标签可以替换 `` 和 `` 标签的功能，从而创建类似于列表的结构。下面是一个简单的示例，演示如何使用 `` 标签替换 `` 和 `` 标签：下面是我整理的接种解决方案，可以一起看看。
利用div、span、ul分别来实现99乘法表
StruggleBamboo的博客
01-16 628
99乘法表一、代码1.99乘法表不同方法的代码总结 一、代码 1.99乘法表不同方法的代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> td{ border: 1px solid red; }
HTML书写表单div,03-HTML 列表、div、 span、表单
weixin_42315341的博客
06-29 498
一、列表：列表分为三种： 无序列表 有序列表 定义列表1.1 无序列表无序列表是用来表示一个列表的语义，并且每个项目和项目之间是不分先后的。ul:(unordered list) 无序列表li:(list item) 列表项所有的li不能单独存在，必须包裹在ul里面，反过来说ul的儿子不能是别的东西，必须只能有li,例如：中国的主要城市上海北京郑州杭州 ul标签的实际应用：可以做导航条(导航条通...
div span ul ol 区别
weixin_33841722的博客
03-13 547
一不小心跑偏了qwq 1、ol和ul <ol> 　　<li> </li> <li> </li> <ul> <ul> 　　<li> </li> <li> </li> </u...
html:(13):ol-li和div作用
歌谣的博客
09-23 665
使用ol，添加图书销售排行榜 如果想在网页中展示有前后顺序的信息列表，怎么办呢？如，当当网上的书籍热卖排行榜，如下图所示。这类信息展示就可以使用<ol>标签来制作有序列表来展示。 语法： <ol> <li>信息</li> <li>信息</li> ...... </ol> 举例： 下...
简述div标签和span标签的不同_html中div和span元素的用法区别及举例说明
weixin_39851261的博客
12-21 619
摘要:下文讲述Html中元素div和span的用法用法说明，如下所示div 和 span 两个标签是我们在html开发中常用的元素,那么它们到底由哪些功能呢?下文将一一讲述。1.div元素div 元素默认为一个块级元素，常用于页面结构布局例： 左 中 右 三 栏布局，可使用css集合div进行布局设计2.span元素span 默认为一个内联元素，通过用于包裹一个元素，方便对齐css样式设计。...
css:ul,ol,li妙用
weixin_34055910的博客
12-28 312
LI代码的格式化:A).运用CSS格式化列表符： ul li{list-style-type:none;}例如下面的： 供求信息 B).如果你想将列表符换成图像，则： ul li{        list-style-type:none; 　　　font-size:12px;        list-style-image: url("csdnindex_pic35.gif");        ...
Web知识整理01
weixin_47701814的博客
09-14 314
Web知识整理 html (HyperText Markup Language) 超文本标记语言，标准通用标记语言下的一个应用。 “超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。(来自360百科). html基本标签 注释符号 ctrl+/为注释快捷键 标题标签< h1 > </ h1 > 数字可取1-7 1
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值