td | 易学教程

解决table边框圆角无效

阅读更多关于解决table边框圆角无效

在table中设置border-radius发现不起作用，网上查找了一番，原因是border-collapse:collapse和border-radius不兼容。 css: border-collapse: separate; border-spacing: 0; 设计图效果代码实现效果： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> #table_wrap > table { font-size: 16px; text-align: center; margin: 0 auto; border-collapse: separate; border-spacing: 0; border: 2px #000; } table thead tr,table tbody tr { height: 50px; line-height: 50px; /*background-color: pink;*/ } table tr th:first-child,table tr td:first-child {/*设置table左边边框*/ border-left: 2px solid #eaeaea; } table tr th:last-child,table

简单的jquery实现购物车全选按钮

阅读更多关于简单的jquery实现购物车全选按钮

在我们去完成一个电商平台这种项目的时候，你会发现购物车有一个全选的功能，这个功能我们可以通过jquery来实现首先是我们的Html页面 < table class = "table table-bordered" > < thead > < tr > < th > < input type = "checkbox" class = "styled" > < / th > < th > 用户id < / th > < th > 用户名 < / th > < th > 电子邮箱 < / th > < th > 操作 < / th > < / tr > < / thead > < tbody > < tr > < td > < input type = "checkbox" class = "sty" / > < / td > < td > 1 < / td > < td > 小明 < / td > < td > 2393724001 @qq . com < / td > < td > < a class = "buttons" > 删除 < / a > < / td > < / tr > < / tbody > < / table > 在页面上就是这样的一个效果，但是现在我们的全选按钮没有效果，需要我们为他添加事件 1.全选影响单独的 $ ( ".styled" ) . change

HTML+CSS学习笔记（一）

阅读更多关于 HTML+CSS学习笔记（一）

一、HTML的概念 HTML：Hyper Text Markup Language 超文本标签语言 HTML：网页的“源码” 浏览器：“解释和执行”HTML源码的工具二、HTML文件的基本结构 < html > < head > < title > 我是标题 </ title > </ head > < body > 你好，我是HTML基本结构 </ body > </ html > 主要由“head头部”和“body主体”组成，网页内容（包括文本、图像、链接等）都在body内三、块级标签基本块级标签 1、标题标签<h1>-<h6> 2、段落标签<p></p> 3、水平线标签<hr/> 常用于布局的块级标签 1、有序列表标签<ol></ol> 2、无序列表标签<ul></ul> 3、定义描述标签 < dl > < dt > 标题 </ dt > < dd > 描述 </ dd > …… </ dl > 4、表格<table></table> 一行<tr></tr> 一列<td></td> < table > < Tr > < td > 百度 </ td > < td > 新浪 </ td > < td > 天涯 </ td > </ Tr > < Tr > < td > 谷歌 </ td > < td > 搜狐 </ td > < td > 猫扑 </ td > </ Tr

Python之路_Day14

阅读更多关于 Python之路_Day14

Python之路_Day14_课堂笔记前期回顾：本节内容：一、HTML - 标签二、CSS - 效果 color: red; 三、JavaScript - 语言基础 - 效果查找操作 jQuery 一、HTML 1、头部标签 meta、 title、 link、引入css、引入js <!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8" />  <meta http-equiv="Refresh" Content="30"/>    <meta name="keywords" content="星际2,星际老男孩,专访,F91,小色,JOY" >  <title name="alex">老男人</title>  <link rel="shortcut icon" href="favicon.ico"></head><body>测试</body></html> 2、常用标签标签一般分为两种

Html动态表格

阅读更多关于 Html动态表格

< ! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < title > 动态表格 < / title > < style > table { border : 1 px solid ; margin : auto ; width : 500 px ; } td , th { text - align : center ; border : 1 px solid ; } div { text - align : center ; margin : 50 px ; } < / style > < / head > < body > < div > < input type = "text" id = "id" placeholder = "请输入编号" > < input type = "text" id = "name" placeholder = "请输入姓名" > < input type = "text" id = "gender" placeholder = "请输入性别" > < input type = "button" value = "添加" id = "btn_add" > < / div > < table id = "table" > < caption >

边框合并，其中一个表格悬浮变色

阅读更多关于边框合并，其中一个表格悬浮变色

<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #itemKey { width: 100%; border-collapse: collapse; } table, td { height: 40px; border: 1px inset black; border-collapse: collapse; } td:hover { border: 1px solid red; } </style> </head> <body> <table id="itemKey"> <tbody> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </tbody> <

python中difflib内置模块的应用

阅读更多关于 python中difflib内置模块的应用

一、difflib的定义 1. 什么是difflib? 用来做什么? difflib为python的标准库模块，无需安装。作用时对比文本之间的差异。并且支持输出可读性比较强的HTML文档，与Linux下的diff 命令相似。在版本控制方面非常有用。 2. 符号理解符号含义 '-' 包含在第一个系列行中，但不包含第二个。 '+' 包含在第二个系列行中，但不包含第一个。 ' ' 两个系列行一致 '?' 存在增量差异 '^' 存在差异字符二、应用实例（1）比较两个文本的不同（内置模块的文件对比） """ text1 = ''' 1. Beautiful is better than ugly. 2. Explicit is better than implicit. 3. Simple is better than complex. 4. Complex is better than complicated. ''' text2 = ''' 1. Beautiful is better than ugly. 3. Simple is better than complex. 4. Complicated is better than complex. 5. Flat is better than nested. ''' """ import difflib text1 =

页面布局

阅读更多关于页面布局

页面布局的三种方式：（1）table 布局：过时（2）div css：当前主流（3）html5布局标签：未来趋势 <div>LOGO欢迎语句</div> <div>导航</div> <div>侧边栏</div> <div>页尾：版权申明</div> <table> 　　<thead> 　　　　<tr><th></th><tr> 　　</thead> 　　<tbody> 　　　　<tr><td></td><tr> 　　　　<tr><td></td><tr> 　　</tbody> 　　<tfoot> 　　　　<tr><td></td><tr> 　　</tfoot> </table> 来源： CSDN 作者：会做饭的技术男链接： https://blog.csdn.net/u011927449/article/details/103538511

展示书功能：

阅读更多关于展示书功能：

views： #定义展示书功能：def book(request): #查询所有书籍： all_books = models.Book.objects.all() for book in all_books: print(book) print(book.id) print(book.pk) print(book.pub_id) #所关联的出版社对象的id 对象.外键_id print(book.pub) #所关联的出版社对象对象.外键 return render(request,"book.html",{"all_books":all_books})HTML： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><table border="1"> <thead> <tr> <th>序号</th> <th>id</th> <th>书名</th> <th>出版社名字</th> <th>操作</th> </tr> </thead> <tbody> {% for book in all_books %} <tr> <td>{{ forloop.counter }}</td> <td>{{ book.pk }}</td> <td>{{ book

JavaScript-DOM

阅读更多关于 JavaScript-DOM

JavaScript-DOM 概念： Document Object Model 文档对象模型将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作。 W3C DOM 标准被分为3个不同的部分：核心 DOM - 针对任何结构化文档的标准模型 Document：文档对象 Element：元素对象 Attribute：属性对象 Text：文本对象 Comment：注释对象 Node：节点对象，其他5个的父对象 XML DOM - 针对 XML 文档的标准模型 HTML DOM - 针对 HTML 文档的标准模型 DOM将HTML文档表达为树结构核心DOM模型 Document：文档对象 Element：元素对象 Node：节点对象，其他5个的父对象 Document：文档对象 1、创建（获取）：在html dom模型中可以使用window对象来获取 window.document document 2、方法： 1.获取Element对象： getElementById(): 根据id属性值获取元素对象。id属性值一般唯一 getElementsByTagName() 返回带有指定标签名的对象的集合。返回值是一个数组，元素排列的顺序就是它们在文档中的顺序。 var x=document.getElementsByTagName(

订阅 td