目录
HTML
CSS
HTML
1、标签分类
-
link：设置网页标题图标
-
div：块级标签，自占一行；
-
span：内联标签，有多少内容占多少地方
-
<小于，>大于， 空格；注意分号不要少；
-
p表示段落，<br/>换行
-
H1-H5标题大小默认递减，也可以自定制
-
a标签表示跳转，target='_blank'：表示在新的页面打开跳转；a标签内部如果有img标签，记得去掉边框（边框只在IE浏览器中显示），border:0;
-
锚点：href="#1"，链接到ID等于1的标题；
-
常见的块级元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。
-
常见的内联元素有span、a、strong、em、label、input、select、textarea、img、br等
<!DOCTYPE html> <html lang="en"> <head> <!--自闭和标签--> <meta charset="UTF-8"> <!--2秒后刷新，并跳转--> <!--<meta http-equiv="Refresh" Content="2;Url=http://weibo.com"/>--> <title>Charlie语录</title> <!--设置网页标题图标--> <link rel="shortcut icon" href="images/02.jpg"> </head> <body> <!--div：块级标签，自占一行；span：行内标签，有多少内容占多少地方--> <div style="background-color: chocolate">123</div> <span style="background-color: aqua">123</span> <!--<小于，>大于， 空格--> <a b> <!--p表示段落，<br/>换行--> <p>charlie,<br/>have a nice day!</p> <!--H1-H5标题大小默认递减，也可以自定制--> <H1>H1</H1> <H2>H2</H2> <H3 style="font-size: 40px;">H3</H3> <!--a标签表示跳转，_blank表示在新的页面打开跳转--> <a href="http://www.baidu.com">百度1</a> <a href="http://www.baidu.com" target="_blank">百度2</a> <!--锚点--> <a href="#1">第一章</a> <a href="#2">第二章</a> <div id="1" style="height: 300px">第一章内容</div> <div id="2" style="height: 300px">第二章内容</div> </body> </html>
2、菜单样式
-
border：添加边框，以下所有内容都在框内
-
input：输入标签，type类型：
-
text：输入文本，
-
password：输入密文,
-
email：输入邮箱，浏览器会自动检测输入是否正确；
-
radio：圆形框，默认可以多选，name属性相同表示不能同时选择；加上checked='checked'，表示默认被选中；
-
checkbox复选框，方形框，name相同，value不同；加上checked='checked'，表示默认被选中；
-
file：选择文件
-
button：普通按钮
-
submit：提交当前表单
-
reset：重置当前表单；
- <input value='123'/>：文本框内默认就有一个123
-
-
select：下拉菜单；
-
基本使用：<option>中国</option>
- <option selected='selected'>广州</option>：表示默认显示；
-
属性multiple：显示下拉菜单的内容，size指定显示个数，这里可以按住Ctrl多选；
-
下拉菜单指定分组：<optgroup label="河北省"></optgroup>
-
- textarea：多行文本输入，<textarea>123</textarea>，默认值123；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选择菜单</title> <link rel="shortcut icon" href="images/02.jpg"> </head> <body> <form><!--form表单，只提交表单内部的内容--> <!--border添加绿色框，以下所有内容都在框内--> <div style="border: 1px solid green"> <!--text输入文本，password输入密文,email输入邮箱--> <p> 用户名：<input type="text" /> </p> <p> 密码：<input type="password" /> </p> <p> 邮箱：<input type="email" /> </p> <!--radio添加选项,默认可以多选，name属性相同表示不能同时选择--> <p> 性别（单选框）： <br/>男<input type="radio" name="aa"/> <br/>女<input type="radio" name="aa"/> </p> <p>爱好（复选框）：<!--checkbox复选框，方形框--> <br/>篮球<input type="checkbox" /> <br/>足球<input type="checkbox" /> <br/>网球<input type="checkbox" /> </p> <!--选择文件标签--> <p>选择文件：<input type="file"/></p> <p>城市（下拉菜单）： <select> <option>中国</option> <option>美国</option> </select> <select> <option>北京</option> <option>上海</option> </select> <!--multiple,显示下拉菜单，size指定个数，可以多选--> <select multiple size="2"> <option>北京</option> <option>上海</option> <option>杭州</option> <option>宁波</option> </select> <!--下拉菜单指定分组--> <select> <optgroup label="河北省"></optgroup> <option>石家庄</option> <option>沧州</option> <optgroup label="河南省"></optgroup> <option>郑州</option> <option>洛阳</option> </select> </p> <!--多行文本输入--> <p>备注：<textarea></textarea></p> <p><!--提交--> <input type="submit" value="提交"/> <!--普通按钮，默认没有任何功能--> <input type="button" value="按钮"/> <!--重置当前表单内的内容--> <input type="reset" value="重置"/> </p> </div> </form> </body> </html>
3、表单form
-
action：设置提交URL
- method：提交方式，post--发送，get--获取；
-
enctype：发送文件方式，例如：enctype="multipart/form-data"
-
<hr style="background-color: green" size="20px"/>--生成一条横线
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单</title> <link rel="shortcut icon" href="images/02.jpg"> </head> <body><!--form action设置提交网址--> <form action="http://www.baidu.com/s"><!--百度--> <!--name=wd设置提交内容--> <input type="text" name="wd"/> <!--value设置单选框提交内容--> 男<input type="radio" name="gender" value="1"/> 女<input type="radio" name="gender" value="0"/> <br /><input type="submit" value="提交"/> </form> <form action="http://www.sogou.com/web"><!--搜狗--> <input type="text" name="query"/> <br /><input type="submit" value="提交"/> </form> <hr style="background-color: green" size="20px"/><!--生成一条横线--> <!--Django自定制，method指定发送方式，enctype发送文件方式--> <form action="http://127.0.0.1:8000/" method="post" enctype="multipart/form-data"> <!--name=wd设置提交内容--> 用户名：<input type="text" name="user"/> <br/>密 码：<input type="password" name="pwd"/> <p> <!--value设置提交内容--> 男<input type="radio" name="gender" value="1"/> 女<input type="radio" name="gender" value="0"/> </p> <p>爱好： 篮球<input type="checkbox" name="favor" value="1"/> 足球<input type="checkbox" name="favor" value="0"/> </p> <p>上传文件：<input type="file" name="fff"/></p> <p>下拉菜单： <select name="city"><!--指定一个数字value，节省流量--> <option value="1">北京</option> <option value="2">上海</option> </select> </p> <p>备注：<textarea name="extra"></textarea></p> <br /><input type="submit" value="提交"/> </form> </body> </html>
4、表格table
- <table border="2">--创建表格，边框宽度2；
- colspan：左右合并单元格；
- rowspan：上下合并单元格；
<body> <table border="2"><!--创建表格，完整的写法--> <thead><!--标题--> <tr><!--行--> <th>标题一</th><!--th标题列，字体加粗--> <th>标题二</th> <th>标题三</th> </tr> </thead> <tbody><!--内容--> <tr> <td>第一列</td><!--td内容列--> <td>第二列</td> <td>第三列</td> </tr> <tr> <td>第一列</td><!--td内容列--> <td>第二列</td> <td>第三列</td> </tr> </tbody> </table> <table border="2"><!--创建表格，简单的写法--> <tr><!--colspan左右合并单元格--> <th colspan="2">标题一</th> <th colspan="2">标题二</th> </tr> <tr><!--rowspan上下合并单元格--> <td rowspan="2">内容一</td> <td>内容二</td> <td>内容三</td> <td>内容四</td> </tr> <tr> <td>内容二</td> <td>内容三</td> <td>内容四</td> </tr> </table> </body>
5、其他标签
-
label：点击文本，自动触发input框，<label for="name">指定触发的框；
-
ul标签：自动在文本前添加点；子标签为：li
-
ol标签：自动在文本前添加数字；子标签：li
-
dl标签：在文本前添加标题；子标签：dt大标题，dd小标题；
-
fieldset：自定义字段集，所有内容都在一个框内
-
iframe：设置一个框架，里面显示连接的网站内容；
<body><!--label点击文本，自动触发input框--> <label for="name"> 姓名： <input id="name" type="text"/> </label> <label for="marry"> 婚否： <input id="marry" type="checkbox"/> </label> <ul><!--在文本前加上点--> <li>Charlie</li> <li>james</li> <li>paul</li> </ul> <ol><!--在文本前加上数字--> <li>Charlie</li> <li>james</li> <li>paul</li> </ol> <dl><!--在文本前加上标题--> <dt>第一章</dt> <dd>James</dd> <dt>第二章</dt> <dd>科比</dd> </dl> <fieldset><!--自定义字段集，所有内容都在一个框内--> <legend>登陆</legend> <p>用户名：<input type="text"/></p> <p>密码：<input type="password"/></p> </fieldset> <h1>微博</h1><!--设置一个框架，里面显示连接的网站内容--> <iframe style=" 100%;height: 2000px" src="http://weibo.com"></iframe> </body>
CSS
1、基本样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .c1{ color: blueviolet; /*background-color: chartreuse;*/ /*background-color: #00EE00;!*十六进制RGB颜色码*!*/ background-color: rgb(20,250,150);/*RGB方式*/ font-size: 50px; height: 100px;/*没有100%高度*/ width: 100%;/*有100%宽度，不同浏览器宽度不同*/ } </style> </head> <body> <div class="c1">基本样式</div> </body> </html>
2、选择器
-
css存放位置：单独的css文件，html头部，标签属性；
-
三个位置优先级：没有重复，就继承；重复的优先级由高到低顺序为：标签属性、头部、文件；头部的优先级又分为：#id>.class>div
# 样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：
1 内联样式表的权值最高 style=""-------------------1000；
2 统计选择符中的ID属性个数。 #id －－－－－－－－－－－－－100
3 统计选择符中的CLASS属性个数。 .class －－－－－－－－－－－－－10
4 统计选择符中的HTML标签名个数。 p －－－－－－－－－－－－－-1
-
如果样式中加上!important，这个样式就无法被覆盖，例如：color=‘red’ !important；前提是这个样式没有优先级之分，必须是同级的，例如：display就不适用；
选择器分类：
- div：标签选择器
-
i1：id选择器，不能是纯数字，ID不能重复
-
.c2：class选择器，class可以重复
-
.c1 p .c2：层级选择器，c2也可以用标签代替，背景色重叠，c1,c2的背景色都有；
-
.c3,.c4,.c5：组合选择器，逗号隔开；
- .div[charlie="a"]：属性选择器；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <!--css文件：优先级最低--> <link rel="stylesheet" href="style.css"/> <!--头部：优先级中间--> <style> /*标签选择器*/ div{ color: blue; } /*id选择器：不能是纯数字，ID不能重复*/ #i1{ font-size: 50px; background-color: purple; } /*class选择器，class可以重复*/ .c1{ font-size: 30px; background-color: aqua; } /*层级选择器，c2也可以用标签代替，背景色重叠，c1,c2的背景色都有*/ .c1 p .c2{ font-size: 50px; background-color: deeppink; } /*组合选择器，逗号隔开*/ .c3,.c4,.c5{ font-size: 30px; background-color: chartreuse; } /*属性选择器*/ .c1[charlie='a']{ color: orangered; } </style> </head> <body><!--标签属性：优先级最高--> <div style="background-color: palegreen;color: orangered">01</div> <div >02</div> <p id="i1">charlie</p> <a class="c1">a标签</a> <p class="c1" charlie="a">p标签</p> <span class="c1">span标签</span> <div class="c1"> <p> <a class="c2">层级选择器</a> </p> </div> <div class="c3">c3组合</div> <div class="c4">c4组合</div> <div class="c5">c5组合</div> </body> </html>
3、图片样式
-
img标签：页面中直接显示图片，可以拉伸显示，例如：<img src="01.gif" style="height: 500px; 500px;">
-
alt属性：如果图片不存在就显示alt的值；例如：alt="图片"，如果图片不存在就显示“图片”两个字；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .img{ /*只有图片没有宽度和高度，是无法显示的*/ background-image: url("02.gif"); height: 400px; width: 100%; background-repeat: no-repeat;/*不重复显示同一张图*/ } .jpg{ background-image: url("01.jpg"); height: 100px; width: 100px; background-repeat: no-repeat; /*调整显示位置,注意jpg格式显示窗口会固定大小的移动位置，GIF大小会变化*/ background-position: -1134px -316px; } </style> </head> <body> <div class="img"></div> <div class="jpg"></div> <!--页面中显示图片，可以拉伸显示--> <img src="01.gif" style="height: 500px; 500px;"> </body> </html>
4、位置position
-
fixed:固定在窗口某一位置；
-
absolute:位置固定,随着屏幕滚动；绝对定位，相对于relative的位置；
-
absolute会到父级中寻找relative，固定在relative所在父级的边框中；
<body> <div style="height: 1000px;background-color: #dddddd;"></div> <!--fixed:固定在窗口某一位置--> <div style="position: fixed;right: 10px;bottom: 0;font-size: 20px;">返回顶部</div> <!--absolute:位置固定,随着屏幕滚动--> <div style="position: absolute;left: 10px;bottom: 0;font-size: 20px;">屏幕滚动</div> <!--absolute会到父级中寻找relative，固定在relative所在父级的边框中--> <div style="border: 2px solid orangered;height: 200px; 200px;position: relative;"> <div style="position: absolute;right: 10px;bottom: 0;font-size: 20px;">固定窗口</div> </div> </body>
5、边框border
-
border-top上、right右、bottom下、left左，可设置只有一边有边框；如果两个都有，就会重叠显示，可以创建一个四边颜色都不一样的边框；
-
solid-实线
-
dotted-点状虚线
-
dashed-线状虚线
<style> .c1{ /*border边框：solid-实线*/ border: 10px solid lightgreen; /*border-top上、right右、bottom下、left左，可设置只有一边有边框*/ /*如果两个都有，就会重叠显示，可以创建一个四边颜色都不一样的边框*/ border-bottom: 10px solid deeppink; height: 100px; } .c2{ /*dotted-点状虚线，*/ border: 10px dotted blueviolet; height: 100px; } .c3{ /*dashed-线状虚线，*/ border: 10px dashed orangered; height: 100px; } </style>
6、display
-
none：隐藏内容和位置
- visibility:hidden：隐藏内容，位置还在
-
inline：块级标签变为行内标签
-
block：行内标签变为块级标签
-
inline-block同时具有有行内和块级标签的属性，默认只占用自身大小，也可以设置宽度，高度；
- display:inline-block的时候都会有额外的三像素，所以要加上:float：left
<body> <!--display: none;隐藏内容和位置--> <div style="background-color: blue;height: 30px;display: none;">charlie</div> <!--visibility: hidden隐藏内容，位置还在--> <div style="background-color: blue;height: 30px;visibility: hidden;">charlie</div> <!--display: inline块级标签变为行内标签--> <div style="display: inline;background-color: deepskyblue">好好学习</div> <!--display: block行内标签变为块级标签--> <span style="display: block;background-color: gold">好好学习</span> <!--纯正的行内标签无法设置宽度高度，自身多大就占多大--> <!--display: inline-block同时具有有行内和块级标签的属性，默认只占用自身大小，也可以设置宽度，高度--> <span style="display: inline-block;background-color: aqua; 400px">好好学习</span> </body>
7、外边距和内边距
-
margin:外边距，-left左边距，-right右边距，-top上边距，-bottom下边距；
-
padding:内边距，自己会变大，-left左边距，-right右边距，-top上边距，-bottom下边距；
-
块级标签按百分比显示width，float表示靠左或靠右；
- width使用百分比显示时，要在外部定义一个宽度框架，这样缩放页面时就不会乱；
<body> <!--margin:外边距，-left左边距，-right右边距，-top上边距，-bottom下边距--> <!--默认上下左右各加10px--> <div style="border: 3px solid lawngreen;height: 70px;"> <div style="background-color: deepskyblue;height:30px;margin: 10px;"></div> </div> <!--padding:内边距，自己会变大，-left左边距，-right右边距，-top上边距，-bottom下边距--> <!--默认上下左右各加10px--> <div style="border: 3px solid orangered;height: 70px;"> <div style="background-color: deepskyblue;height:30px;padding: 10px;"></div> </div> <div style="border: 2px solid orangered; 500px;"> <!--块级标签按百分比显示，float表示靠左或靠右--> <div style="20%;background-color: chocolate;float: left">大儿子</div> <div style="80%;background-color: aqua;float: left">小儿子</div> <!--加上这句表示子标签在飘起来之后仍然在父标签内,这里只适用于没有高度的边框--> <div style="clear: both;"></div> </div> </body>
8、cursor鼠标样式
<!--cursor给不同的标签设置鼠标接触时的样式--> <a style="cursor: pointer" href="http://www.baidu.com">链接</a> <span style="cursor: help">帮助</span> <span style="cursor: wait">等待</span> <span style="cursor: move">移动</span> <span style="cursor: crosshair">坐标</span>
9、CSS补充
-
十六进制RGB颜色对照表：https://www.114la.com/other/rgb.htm
- 图标字体库和CSS网站：http://www.fontawesome.com.cn/faicons/
-
opacity：透明度0-1，要和background-color结合使用；
-
background-color:rgba(0,0,0,0.6)同时设置颜色和透明度，单独使用；
-
z-index：优先级，数值越大越靠上；
- 去除a标签下面的下划线：a{text-decoration:none}
-
text-align:center：标签内部文本水平居中；
- line-height：30px;表示按30px高度的中心线上下居中；
<div style="text-align: center;height: 100px; 100px;border: 1px solid red;line-height: 100px;">ndddd</div>
10、前端文件夹模板Program
-
app：HTML文件，如果少的话，可以放在最外边；
-
images：图片
-
css：css文件
-
js：js文件
-
plugins：插件
11、鼠标触碰时的样式
-
.c1:hovor{backgound-color:背景色；color：字体颜色；}
-
.c1:before{content: '999';}:在块内容前面加上一些内容；
-
.c1:after{content: '999';}:在块内容后面加上一些内容；
12、HTML中快速写想同类型标签的方法（代码写标签）
# div tab <div></div> # div.main>ul>li.c*4 tab <div class="main"> <ul> <li class="c"></li> <li class="c"></li> <li class="c"></li> <li class="c"></li> </ul> </div>
13、清除浮动
-
在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。
#clear语法： clear : none | left | right | both #取值： none : 默认值。允许两边都可以有浮动对象 left : 不允许左边有浮动对象 right : 不允许右边有浮动对象 both : 不允许有浮动对象 #但是需要注意的是：clear属性只会对自身起作用，而不会影响其他元素。 如果一个元素的右侧有一浮动对象，而这个元素设置了不允许右边有浮动对象， 即clear：right，则这个元素会自动下移一格，达到本元素右边没有浮动对象的目的。
方式1(推荐):clearfix
- 如果网页有背景色，里面的每一个块基本都有float，由于页面没有绝对高度，所以就需要一个clearfix样式，能够让背景色一直显示出来；整段代码就相当于在浮动元素后面跟了个宽高为0的空div，然后设定它clear:both来达到清除浮动的效果。之所以用它，是因为，你不必在html文件中写入大量无意义的空标签，又能清除浮动。只要写一个.clearfix就行了，然后在需要清浮动的元素中 添加clearfix类名就好了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .left{ float: left; } .clearfix{ background-color: #0a9a13; } .clearfix:after{ /*默认after添加的内容是一个span标签*/ content: '.'; /*所以需要改成块级标签*/ display: block; clear: both; /*!*隐藏后面添加的内容*!*/ visibility: hidden; /*!*去掉多余的高度*!*/ height: 0; } </style> </head> <body> <!--如果网页有背景色，里面的每一个块基本都有float， 由于页面没有绝对高度，所以就需要一个clearfix样式， 能够让背景色一直显示出来；--> <div class="clearfix"> <div class="left">大儿子</div> <div class="left">小儿子</div> </div> </body> </html>
方式2：
overflow:hidden;
overflow：hidden的含义是超出的部分要裁切隐藏，float的元素虽然不在普通流中，但是他是浮动在普通流之上的，可以把普通流元素+浮动元素想象成一个立方体。如果没有明确设定包含容器高度的情况下，它要计算内容的全部高度才能确定在什么位置hidden，这样浮动元素的高度就要被计算进去。这样包含容器就会被撑开，清除浮动。
13、插件
- font-awesome.min.css：一行显示，上传时使用；写代码就用不带min的格式；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="plugins/font-awesome-4.7.0/css/font-awesome.css"/> </head> <body> <i class="fa fa-camera" aria-hidden="true"></i> </body> </html>
14、尖角样式
/*边框四边颜色不一样，会变成四个三角形*/ /*其他三边变为透明，只显示一个三角形*/ .c1{ display: inline-block; border-top: 15px solid red; /*transparent表示透明*/ border-bottom: 15px solid transparent; border-left: 15px solid transparent; border-right: 15px solid transparent; }
15、后台管理页面布局的两种样式
- 第一种后台布局，有多少内容就显示多少高度，页面内容框架没有设置bottom=0
<!DOCTYPE html> <html lang="en"> <head><!--第一种后台布局，有多少内容就显示多少高度，页面内容框架没有设置bottom=0--> <meta charset="UTF-8"> <title></title> <style> body{ margin: 0; } .pg-header{ background-color: green; height: 50px; } .pg-body .pg-menu{ width: 300px; position: absolute; top: 60px; left: 0; bottom: 0; background-color: orange; } .pg-body .pg-content{ position: absolute; left: 310px; top: 60px; right: 10px; background-color: lawngreen; } </style> </head> <body> <div class="pg-header"></div> <div class="pg-body"> <div class="pg-menu"></div> <div class="pg-content"> Python从入门到入坟<br/>Python从入门到放弃<br/> Python从入门到入坟<br/>Python从入门到放弃<br/> Python从入门到入坟<br/>Python从入门到放弃<br/> Python从入门到入坟<br/>Python从入门到放弃<br/> Python从入门到入坟<br/>Python从入门到放弃<br/> Python从入门到入坟<br/>Python从入门到放弃<br/> Python从入门到入坟<br/>Python从入门到放弃<br/> Python从入门到入坟<br/>Python从入门到放弃<br/> Python从入门到入坟<br/>Python从入门到放弃<br/> Python从入门到入坟<br/>Python从入门到放弃<br/> Python从入门到入坟<br/>Python从入门到放弃<br/> Python从入门到入坟<br/>Python从入门到放弃<br/> Python从入门到入坟<br/>Python从入门到放弃<br/> Python从入门到入坟<br/>Python从入门到放弃<br/> Python从入门到入坟<br/>Python从入门到放弃<br/> Python从入门到入坟<br/>Python从入门到放弃<br/> Python从入门到入坟<br/>Python从入门到放弃<br/> Python从入门到入坟<br/>Python从入门到放弃<br/> Python从入门到入坟<br/>Python从入门到放弃<br/> Python从入门到入坟<br/>Python从入门到放弃<br/> Python从入门到入坟<br/>Python从入门到放弃<br/> </div> </div> </body> </html>
- 第二种后台布局，头部和左侧菜单固定不动，右侧出现滚动条
<!DOCTYPE html> <html lang="en"> <head><!--第二种后台布局，头部和左侧菜单固定不动，右侧出现滚动条，--> <meta charset="UTF-8"> <title></title> <style> body{ margin: 0; } .pg-header{ background-color: green; height: 50px; } .pg-body .pg-menu{ width: 300px; position: absolute; top: 60px; left: 0; bottom: 0; background-color: orange; } .pg-body .pg-content{ position: absolute; left: 310px; top: 60px; right: 10px; bottom: 0;/*页面内容框架设置bottom=0*/ background-color: lawngreen; /*如果超出了长度，页面右侧出现滚动条*/ overflow: auto; } </style> </head> <body> <div class="pg-header"></div> <div class="pg-body"> <div class="pg-menu"></div> <div class="pg-content"> Python从入门到入坟<br/>Python从入门到放弃<br/> Python从入门到入坟<br/>Python从入门到放弃<br/> Python从入门到入坟<br/>Python从入门到放弃<br/> Python从入门到入坟<br/>Python从入门到放弃<br/> Python从入门到入坟<br/>Python从入门到放弃<br/> Python从入门到入坟<br/>Python从入门到放弃<br/> Python从入门到入坟<br/>Python从入门到放弃<br/> Python从入门到入坟<br/>Python从入门到放弃<br/> Python从入门到入坟<br/>Python从入门到放弃<br/> Python从入门到入坟<br/>Python从入门到放弃<br/> Python从入门到入坟<br/>Python从入门到放弃<br/> Python从入门到入坟<br/>Python从入门到放弃<br/> Python从入门到入坟<br/>Python从入门到放弃<br/> Python从入门到入坟<br/>Python从入门到放弃<br/> Python从入门到入坟<br/>Python从入门到放弃<br/> Python从入门到入坟<br/>Python从入门到放弃<br/> Python从入门到入坟<br/>Python从入门到放弃<br/> Python从入门到入坟<br/>Python从入门到放弃<br/> Python从入门到入坟<br/>Python从入门到放弃<br/> Python从入门到入坟<br/>Python从入门到放弃<br/> Python从入门到入坟<br/>Python从入门到放弃<br/> </div> </div> </body> </html>