Python【day 12】：Python学习(前端开发：html,css)
HTML
01 a标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--网站的编码--> <title>jack网站</title> <!--网站的标题--> <link rel="shortcut icon" href="test.ico"> <!--网站标题前面的图标--> </head> <body> <!--标签一般分为两种：块级标签 和 行内标签--> <!--块级标签和行内标签的区别--> <!--谷歌或者360浏览器，右键审查元素，点击左上角的放大镜后，鼠标移动到页面元素，点击元素，占一行的是块级标签，占指定长度的是行内标签--> <!--span,a,select,label,input,form,img等 行内标签 --> <!--div、h、p 等 块级标签--> <!--各种符号--> <!-- 空格--> <!--http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html--> <!--p 和 br--> <!--p表示段落，默认段落之间是有间隔的！--> <!--br 是换行--> <p>段落 段落<br>段落换行</p> <!--a标签--> <!--< a href="http://www.autohome.com.cn"> </a>--> <!--1、target属性，_black表示在新的页面打开--> <!--2、锚--> <!--3、可以跳转到外网百度，也可以跳转到同级目录别的页面-自定义--> <a href="http://www.baidu.com">百度</a> <!--a标签主要用于网站链接跳转--> <!--1、不带target属性,表示在原来的页面打开--> <a href="http://www.baidu.com" target="_blank">百度1</a> <!--1、target属性，_black表示在新的页面打开--> <!--a标签是行内标签，不能独占一行--> <div> <a href="http://www.baidu.com" target="_blank">百度2</a> </div> <!--div是块级标签 独占一行--> <div> <a href="02被跳转.html">02跳转</a> <!--跳转到同级目录别的页面--> </div> <a href="#tt">第二章</a> <div style="background-color: red;height: 2000px;">第一章</div> <div id="tt" style="background-color: yellow;height: 2000px;">第二章</div> <!--锚跳转，应用场景：书的目录，点击目录后，跳转到对应章节--> <!--50行的#后面是id编号，点击50行第二章链接后，会跳转到52行--> </body> </html>
03 h标签和img标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1>h1标签</h1> <h2>h2标签</h2> <h3>h3标签</h3> <h4>h4标签</h4> <h5>h5标签</h5> <h6>h6标签</h6> <!--h1-h6是标题标签，大小从大到小依次递减--> <!--id、style是所有标签都可以定义的属性--> <!--a标签特有的属性:href target--> <div> <img title="图片tips" src="test_img.png"/> <!--图片的原始大小--> <!--这里的title指的图片的tips，src值图片的名字（同一级目录就直接写名字，不是同一级目录，就带上路径）--> </div> <div> <img title="图片tips" src="test_img.png" style="height: 30px;width: 30px;"/> <!--图片按照指定大小增大或者缩小--> </div> <!--DIV和span的区别--> <!--2个都是用来划分区间但是没有实际语义的标签,差别就在于div是块级元素,不会其他元素在同一行;--> <!--span是内联元素~可以与其他元素位于同一行~--> </body> </html>
04 select标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <select> <option>北京</option> <option>>上海</option> <option>广州</option> <option>深圳</option> </select> <!--下拉菜单-普通版 默认选中第一项--> <select> <option>北京</option> <option>上海</option> <option selected="selected">广州</option> <option>深圳</option> </select> <!--下拉菜单- 修改默认 默认选中第三项--> <select size="2"> <option>北京</option> <option>上海</option> <option>广州</option> <option>深圳</option> </select> <!--下拉菜单 可以一次显示2个城市--> <select size="12" multiple="multiple"> <option>北京</option> <option>上海</option> <option>广州</option> <option>深圳</option> </select> <!--下拉菜单 下拉菜单长度是12 允许ctrl多选--> <select> <optgroup label="一线城市"> <option>北京</option> <option>上海</option> <option>广州</option> <option>深圳</option> </optgroup> <optgroup label="二线城市"> <option>武汉</option> <option>成都</option> <option>苏州</option> <option>哈尔滨</option> </optgroup> </select> <!--下拉菜单，有分组--> </body> </html>
05 input标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h3>复选框</h3> <div> 篮球：<input type="checkbox" checked="checked"/> <!--checked这个属性是默认选中的意思--> </div> <div> 足球：<input type="checkbox"/> </div> <div> 排球：<input type="checkbox"/> </div> <!--复选框--> <h3>单选框</h3> 男：<input name="gender" type="radio" checked="checked"/> <!--checked这个属性是默认选中的意思--> 女：<input name="gender" type="radio"/> <!--单选框 这里name必须一样，否则就没有单选效果--> <h3>普通输入框</h3> <input type="text"/> <h3>普通输入框，默认值</h3> <input type="text" value="普通输入框"/> <h3>密码输入框</h3> <input type="password"/> <input type="button" value="确定"/> <input type="submit" value="提交"/> <!--value是指按钮上的字，在form中，只有submit类型可以提交数据，button类型无法提交数据--> <!--input是行内标签，可以在外围加上div变成块标签--> <hr/> <!--分割线--> <input type="file"/> </body> </html>
06 form标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h2>form</h2> <form action="http://127.0.0.1:8000/django_form/" enctype='multipart/form-data' method='POST'> <!--这里action指的是后台接受数据的地址，这里指本机8000端口的django框架--> <div> 主机名:<input name="host" type="text"/> </div> <div> 端口:<input name="port" type="text"/> </div> <div> 类型:<input name="type" type="text"/> </div> <div> 用户名:<input name="user" type="text"/> </div> <div> 用户名:<input name="file_name" type="file"/> </div> <!--enctype='multipart/form-data' method='POST'--> <!--提交文件，必须加上上述的一段代码到form的属性中 9行，否则上传不了文件--> <input value="提交" type="submit"/> <input value="取消" type="submit"/> </form> <!--form中必须用submit类型的按钮才行，button类型的按钮无法提交数据--> <!--form中text类型的普通输入框，必须加上name属性才行，前台传到后台收到数据是{name:输入值}键值对的形式--> </body> </html>
07 textare标签、label标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <textarea> 默认大文本框，可以多行输入 </textarea> <textarea style="width:500px;height: 200px;">支持多行输入</textarea> <h3>普通输入框，默认值</h3> <input type="text" value="普通输入框"/> <h3>label</h3> <div> 姓名：<input type="text"/> <!--鼠标必须点击到输入框才行，点击到姓名汉字，鼠标光标是不会定位到输入框--> 婚否:<input type="checkbox"/> <!--鼠标必须点击到复选框才行，点击到婚否汉字，鼠标光标是不会勾选复选框--> </div> <div> <label for="cb2">姓名:</label> <input id="cb2"type="text"/> <!--鼠标点击到姓名汉字处，鼠标默认到输入框，这里label后面的for需要和input后面的id相等才行--> <label for="cb1">婚否</label> <input id="cb1"type="checkbox"/> <!--鼠标点击到婚否汉字处，鼠标就会自动勾选复选框，这里label后面的for需要和input后面的id相等才行--> </div> </body> </html>
08 ul ol dl编号标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul> <li>111</li> <li>222</li> <li>333</li> </ul> <!--编号都是默认的黑色正方块--> <ol> <li>11</li> <li>22</li> <li>33</li> </ol> <!--编号都是数字1,2,3.。。--> <dl> <dt>标题</dt> <dd>内容</dd> <dt>一线城市</dt> <dd>北京</dd> <dd>上海</dd> <dd>广州</dd> <dd>深圳</dd> </dl> </body> </html>
09 table fieldset标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p> <!--这里的p段落有默认的行间距--> <table border="1"> <tr> <th>第一列</th> <th>第二列</th> <th>第三列</th> </tr> <!--第一组tr是 表头的字段th--> <!--第一组之外的tr是 表的值td--> <tr> <td>h1</td> <td>h2</td> <td>h3</td> </tr> <tr> <td>h11</td> <td>h22</td> <td>h33</td> </tr> <tr> <td>h111</td> <td>h222</td> <td>h333</td> </tr> </table> </p> <p> <table border="1"> <tr> <th>第一列</th> <th>第二列</th> <th>第三列</th> </tr> <!--第一组tr是 表头的字段th--> <!--第一组之外的tr是 表的值td--> <tr> <td rowspan="2">h1,h11</td> <!--合并单元格 2行成1行--> <td>h2</td> <td>h3</td> </tr> <tr> <td>h22</td> <td>h33</td> </tr> <tr> <td>h111</td> <td>h222</td> <td>h333</td> </tr> </table> </p> <table border="1"> <tr> <th>第一列</th> <th>第二列</th> <th>第三列</th> </tr> <!--第一组tr是 表头的字段th--> <!--第一组之外的tr是 表的值td--> <tr> <td>h1</td> <td>h2</td> <td>h3</td> </tr> <tr> <td>h11</td> <td>h22</td> <td>h33</td> </tr> <tr> <td>h111</td> <td colspan="2">h222,h333</td> </tr> </table> <fieldset> <legend>登录</legend> <p>用户名：</p> <p>密码：</p> </fieldset> </body> </html>
10 html综合
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--网站的编码--> <title>jack网站</title> <!--网站的标题--> <link rel="shortcut icon" href="test.ico"> <!--网站标题前面的图标--> </head> <body> <div style="height: 48px;background-color: pink;">头部</div> <!--设置顶部 背景色：粉色 高度：48像素--> <div style="background-color: #ddd;"> <!--<div>--> <!--14和15行的设置，提交取消的按钮位置不同--> <div style="width: 20%;height:500px;float: left;background-color: aquamarine;">左边内容</div> <!--左下设置20% float: left设置左漂才行 也可以根据情况设置右漂--> <div style="width: 80%;height:500px;float: left;">右边内容 <!--右下设置80% 不设置背景色就默认白色--> <h1>Form表单提交</h1> <!--标题说明--> <form action="http://10.0.4.42:8000/django_form/" enctype="multipart/form-data" method="post"> <p> <label for="tt">主机名:</label> <!--for后面不需要#--> <input id="tt" type="text" name="host" /> <!--提交给后台的key对应的值value就是输入的内容--> <!--name的值是提交给后台的key--> <label for="tt2">密码：</label> <input id="tt2" type="password" name="pwd" /> </p> <div style="background-color: rosybrown;color: white;"> <!--设置背景色和字体颜色--> <h6>爱好</h6> <label for="tt3">篮球:</label> <!--设置label for需要和下面的id一致--> <input name="favor" type="checkbox" value="1" checked="checked" id="tt3" /> <!--设置默认勾选--> <label for="tt4">足球:</label> <input name="favor" type="checkbox" value="2" id="tt4" /> <!--value的值是提交给后台的key对应的值value--> <!--name的值是提交给后台的key--> <label for="tt5">排球:</label> <input name="favor" type="checkbox" value="3" id="tt5" /> </div> <div> <h6>性别</h6> <label for="tt6">男:</label> <input name="gender" type="radio" value="1" checked="checked" id="tt6"/> <!--这里的单选，需要设置name属性一致，否则就不是互斥的--> <label for="tt7">女:</label> <input name="gender" type="radio" value="0" id="tt7"/> </div> <div> <h6>城市</h6> <select name="city"> <option value="888">上海</option> <option value="sb99" selected="selected">北京</option> <!--value的值是提交给后台的key对应的值value--> <!--name的值是提交给后台的key--> </select> </div> <div> <textarea name="mono">默认输入</textarea> <!--提交给后台的key对应的值value就是输入的内容--> <!--name的值是提交给后台的key--> </div> <div> <h4>文件</h4> <input type="file" name="file_name"> <!-- enctype="multipart/form-data" method="post"--> <!--文件上传提交必须加上上传代码到action后，否则无法提交--> </div> <input type="submit" value="提交" /> <!--内容只有包在form中，才能提交，提交2个字是按钮上的字--> <input type="submit" value="取消" /> </form> </div> </div> </body> </html>
css
01css元素内联
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="color: red;font-size: 28px;">css元素内联</div>
<!--style设置样式内联，单个设置 字体大小28像素；字体颜色红色-->
</body>
</html>
02 外部引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="commons.css" />
<!--外部引入，commons.css是同一级目录的文件名 rel="stylesheet" 是固定写法 类似于python的import-->
</head>
<body>
<div class="bb">外部引入_class选择器_红色</div>
<div id="uu">外部引入_id选择器_黄色</div>
<div>外部引入_div标签选择器_蓝色</div>
<!--标签选择器的优先级高于组合，就是标签和组合选择器都定义了div标签，div优先按照标签来生效-->
<p>外部引入_组合多标签p选择器_绿色</p>
<h1>外部引入_组合多标签h1选择器_绿色</h1>
外部引入_属性选择器_深红色（输入的字体是深红色 input[type="text"]）:<input type="text"/>
<div id="uut">div关联选择器_蓝色
<p>div p关联选择器--黄绿色（青色）</p>
</div>
<!--适用场景：div标签，id是uu且 div内嵌p标签 适用上面的设置-->
<!--优先级：代码中style>head中的style>文件中-commons.css的style 针对同一个div来说-->
</body>
</html>
02css页面嵌入_class选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .cc{ color: red; font-size: 19px; } .ccc{ color: green; } /*class选择器定义 点*/ </style> </head> <body> <div class="cc">class选择器cc</div> <div class="ccc">class选择器ccc</div> <div class="cc ccc">class选择器cc ccc</div> <!--指定2个class选择器的时候，按照class选择器定义的顺序，后面定义的覆盖前面定义的--> <!--class选择器适用于单个设置 全局设置好了后，具体应用的时候，指定class名字即可--> <!--允许多个class都指定cc 允许class和id都同时应用上，优先级style>head>文件--> <!--id选择器和标签选择器一般不要使用，推荐使用class选择器--> <!--class选择器格式--> <!--.bd{ background-color:red; } --> <!--<div class='bd'> </div>--> <!--最常用，最重要的是class选择器、关联选择器、属性选择器，其余的选择器了解即可--> </body> </html>
03css页面嵌入_id选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> #uu{ color: red; /*字体颜色红色，字大小19像素*/ font-size: 19px; } #uuu{ color: green; } /*id选择器定义 井号#后面是id名称*/ </style> </head> <body> <!--id选择器--> <!--#idselect{ background-color:red; } --> <!--<div id='idselect' > </div>--> <div id="uu">css页面嵌入_id选择器uu_红色字体</div> <div id="uuu">css页面嵌入_id选择器uuu_绿色字体</div> <!--id选择器适用于单个设置 全局设置好了后，具体应用的时候，指定id名字即可 id不可重复（不推荐） 和class选择器用法类似--> </body> </html>
04css页面嵌入__标签选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> div{ color: red; /*字体颜色红色，字大小19像素*/ font-size: 19px; } p{ color: green; } input{ color: yellow; } input[type="text"]{ color: blue; } /*标签选择器定义 div标签样式设置后，body中所有的div标签都应用这个样式*/ /*标签选择器定义 p标签样式设置后，body中所有的p标签都应用这个样式*/ /*标签选择器定义 input标签样式设置后，body中所有的input标签都应用这个样式*/ /*标签选择器定义 input text标签样式设置后，body中所有的input text标签都应用这个样式*/ /*input select a标签都可以设置*/ </style> </head> <body> <!--标签选择器--> <!--div{ background-color:red; } --> <!--<div > </div>--> <div>div标签选择器_红色字体</div> <p>p标签选择器_绿色字体</p> input标签选择器_按钮黄色字体<input type="button" value="确定"/> input[type="text"]标签选择器_输入内容蓝色字体<input type="text"/> <!--适用场景：适用于当前页面一类标签的样式的统一设置--> </body> </html>
05css页面嵌入_组合选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> div,p,input,input[type="text"]{ color: red; /*字体颜色红色，字大小19像素*/ font-size: 19px; } .c1 #i1 a .cc1,.c1 #i1 a .cc2{} .c1 #i1 a .cc1,.cc2{} /*组合选择器定义 逗号相当于或的意思 div p input input text标签样式设置后，body中所有的这些标签都应用这个样式*/ /*input select a标签都可以设置*/ </style> </head> <body> <!--组合选择器--> <!--input,div,p{ background-color:red; }--> <div>div标签选择器_红色字体</div> <p>p标签选择器_绿色字体</p> input标签选择器_按钮黄色字体<input type="button" value="确定"/> input[type="text"]标签选择器_输入内容蓝色字体<input type="text"/> <!--适用场景：适用于当前页面前面定义的几类标签的样式的统一设置--> </body> </html>
06_1css页面嵌入_属性选择器2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .con input[type="text"][name="username"]{ border: 1px solid red; } .con input[alex="sb"]{ border: 1px solid yellow; } /*alex是自定义的属性，可以单独只写自定义的属性 自定义属性一般都是独一无二的 css的注释*/ </style> </head> <body> <div class="con"> <input type="text" name="username"/> </div> <div class="con"> <input alex="sb" type="text" name="username2"/> </div> <!--alex="sb"是自定义属性 html注释--> </body> </html>
06css页面嵌入_属性选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> input{ color: red; /*字体颜色红色，字大小19像素*/ font-size: 19px; } input[type="text"]{ color: yellow; /*字体颜色黄色，字大小19像素*/ font-size: 19px; } .con input[type="text"][name="username"]{ border: 1px solid red; } .container li{ background-color: red; } .container li a{ background-color: yellow; } .container .l .a{ background-color: blue; } /*属性选择器定义 input标签样式设置后，body中所有的这个标签都应用这个样式*/ /*属性选择器定义 input text标签样式设置后，body中所有的这个标签都应用这个样式*/ /*class是container 且样式只适用container下的li*/ /*.container .l .a表示class=container下的class=l下的class=a的样式*/ </style> </head> <body> <!--属性选择器--> <!--input[type='text']{ width:100px; height:200px; } --> input标签选择器_按钮红色字体<input type="button" value="确定"/> input[type="text"]标签选择器_输入内容黄色字体<input type="text"/> <!--适用场景：适用于当前页面前面定义的2类标签的样式的统一设置--> <div class="container"> <ul> <li>123</li> <li>1234</li> <li>12345</li> </ul> </div> <div class="container"> <ul> <li> <a>a标签 链接</a> </li> <li>1234</li> <li>12345</li> </ul> </div> <div class="container"> <ul class="l"> <li> <a>a标签 链接</a> </li> <li class="a">1234</li> <li>12345</li> </ul> </div> </body> </html>
07css页面嵌入_关联选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> #uu p{ color: red; /*字体颜色红色，字大小19像素*/ font-size: 19px; } #c1 div{} /*在id=c1下，找div标签*/ .c1 #i1 a .cc1{} /*在class=c1下，找id=i1，接着在il下找a标签，接着在a标签下找class=cc1的*/ /*关联选择器定义 有空格*/ </style> </head> <body> <!--关联选择器-- <!--#idselect p{ background-color:red; }--> <!--<div id='idselect' > <p> </p> </div>--> <div id="uu">div关联选择器 <p>div p关联选择器--红色</p> </div> <!--适用场景：div标签，id是uu且 div内嵌p标签 适用上面的设置--> <!--最常用，最重要的是class选择器和关联选择器，其余的选择器了解即可--> </body> </html>
08_1css_div布局_overflow
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> body{ margin:0 auto; } </style> <!--把当前页面body居中放在浏览器窗口，去掉四周的边框，定格左上角--> </head> <body> <div style="overflow:auto;height: 100px;background-color: pink;"> hello<br/> hello<br/> hello<br/> hello<br/> hello<br/> hello<br/> hello<br/> hello<br/> hello<br/> hello<br/> hello<br/> hello<br/> </div> <!--高度一定的情况下，100像素只能容纳5,6行hello，多余的hello就不是粉色底色了--> <!--加上overflow：auto；属性后，就自动出现了滚动条，从而保证所有的hello都是粉色底色--> <!--加上overflow：hidden；属性后，就隐藏了滚动条--> </body> </html>
08css_div布局_float
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="height: 48px;background-color: pink;">头部</div>
<!--设置顶部 背景色：粉色 高度：48像素-->
<div style="background-color: #ddd;">
<!--<div>-->
<!--10和11行的设置，提交取消的按钮位置不同-->
<div style="width: 20%;height:500px;float: left;background-color: aquamarine;">左边内容</div>
<!--左下设置20% float: left设置左漂才行 也可以根据情况设置右漂-->
<div style="width: 80%;height:500px;float: left;background-color: burlywood;">右边内容</div>
<!--右下设置80% 不设置背景色就默认白色-->
<!--div里面必须有内容 左边内容 或者右边内容 否则看不到设置效果-->
<!--这里div是块级标签,默认会占一行,加上float后,就可以飘起来，才能实现2个div都放在一行-->
</div>
</body>
</html>
09css_div布局_底色显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--<div style="height: 48px;background-color: pink;">头部</div>-->
<!--<!–设置顶部 背景色：粉色 高度：48像素–>-->
<!--<div style="background-color: #ddd;">-->
<div style="background-color: blue;">
<!--10和11行的设置，提交取消的按钮位置不同-->
<div style="width: 20%;height:500px;float: left;background-color: aquamarine;">左边内容</div>
<!--左下设置20% float: left设置左漂才行 也可以根据情况设置右漂-->
<div style="width: 50%;height:500px;float: left;background-color: darkorange">中间内容</div>
<!--右下设置80% 如果不设置背景色就默认白色-->
<div style="width: 10%;height:500px;float: right;background-color: fuchsia;">右边内容</div>
<div style="clear:both;"></div>
<!--显示父标签的底色：方式1(推荐)：加上19行，底色蓝色就会显示在余下的20%区域，如果注释19行，余下的20%区域就是白色，而不是蓝色-->
<!--不加19行的话，就会出现将父标签的底色11行全部覆盖-->
<!--显示父标签的底色：方式2：在父标签11行，加上高度height
方式1和方式2任取其一即可 推荐方式1-->
</div>
</body>
</html>
10css_position_fixed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--<div style="position: fixed;bottom: 40px;right: 30px">返回顶部1</div>-->
<div id="content" style="height: 5000px;background-color:darkorange;width: 100%;"></div>
<a style="position: fixed;bottom: 30px;right: 30px;" href="#content">返回顶部</a>
<!--即fixed总是以body为定位对象的，按照浏览器的窗口进行定位。返回顶部 离右边和底部都是30像素-->
<!--不管滚动条怎么拖动，都是在屏幕（浏览器）的固定位置-->
<!--点击返回顶部后，滚动条就知道回到顶部了，锚来实现-->
<!--总结：fixed是相对整个屏幕来说，不管滚动条怎么动，位置都不变-->
<!--absolute单独出现：是相对当前页面来说，随着滚动条滚动，位置会变化-->
<!--absolute和relative成对出现：父标签是relative（在外层div），子标签是absolute（在内层div），
这样的话，返回顶部就会出现在修改数据的右下角-->
</body>
</html>
11css_position_relative相对
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="content" style="position:relative;height: 5000px;background-color:darkorange;width: 100%;">
<div style="position:relative;background-color: green;width: 300px;margin: 0 auto;height: 300px;">修改数据
<a style="position: absolute;bottom: 30px;right: 30px;" href="#content">返回顶部</a>
</div>
</div>
<!--这里relative和absolute是成对出现的，效果是返回顶部出现在修改数据这个小窗口的右下角，而不是出现在最外面大窗口的右下角-->
<!--子标签absolute是在其父标签-修改数据的绝对位置-->
<!--absolute和relative成对出现：父标签是relative（在外层div），子标签是absolute（在内层div），这样的话，返回顶部就会出现在修改数据的右下角
如果去掉父标签的relative的话，返回顶部就会出现在最外面背景图片的右下角，这里一共3层，1最外层，2修改数据层，3返回顶部层-->
<!--margin: 0 auto; 表示居中显示-->
</body>
</html>
12css_position_absolute绝对
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="height: 5000px;background-color:darkorange;"></div>
<div style="position: absolute;bottom: 30px;right: 30px;background-color: yellow">返回顶部</div>
<!--absolute单独出现的话 返回顶部本身背景色是黄色 离右边和底部都是30像素-->
<!--随着滚动条拖动，返回顶部也会随着滚动条拖动-->
</body>
</html>
13_1css_backgroup-position挖洞看我
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div style="background-image:url('test_img.png'); /*背景图片*/ height: 80px;background-repeat:no-repeat; background-position:-105px -112px;"></div> <!--北京图片的遮挡位置，0,0代表左上角 这里的(-105,-112)代表图片的左上角那个点的坐标 相对屏幕最最上角 （0，0）来说 相当于在挡板上扣一个洞，该洞的高度是80像素，可以通过移动这个挡板上的洞，就可以看到挡板后不同的图标--> <!--background-position ok--> </body> </html>
14css_border边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="border: 1px solid #dddddd; height: 20px;width: 150px;"></div><br>
<!--边框 solid是实线 颜色：灰色-->
<div style="border:1px dotted red; height: 10px;"></div><br>
<!--边框 dotted是点线-->
<div style="border:1px dashed red; height: 10px;"></div>
<!--边框 dotted是虚线-->
<!--可以单独设置上下左右其中的一个边框-->
</body>
</html>
15css_display隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="border: 1px solid #dddddd; height: 20px;width: 150px;"></div><br>
<!--边框 solid是实线 颜色：灰色-->
<div style="display:none;border: 1px solid #dddddd; height: 20px;width: 150px;"></div><br>
<!--display:none;隐藏窗口-->
<span style="background-color: red;">content</span>
<span style="display: block; background-color: red;">content</span><br>
<!--span是行内标签，加上display: block属性后，就将行内标签变成了块级标签-->
<div style="background-color: red;">content</div>
<div style="display:inline;background-color: red;">content</div>
<!--div是块级标签，加上display: inline属性后，就将块级标签变成了行内标签-->
</body>
</html>
16css_cursor光标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span style="cursor:pointer;">pointer</span>
<!--小手 鼠标放在上面的时候，光标的形状会变成不同的东西-->
<span style="cursor:help;">help</span>
<!--问号-->
<span style="cursor:wait;">wait</span>
<!--加载-->
<span style="cursor:move;">move</span>
<!--方向-->
<span style="cursor:crosshair;">crosshair</span><br>
<!--十字准线-->
<span style="cursor:pointer;color:blue;">pointer</span>
<!--蓝色小手，伪造超链接-->
<span style="cursor:url(cursor.png),auto;">mine</span>
<!--自定义光标形状，图片的大小有限制 16*16px 太大不行 一般不用-->
</body>
</html>
17css_padding内边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="border:1px solid red; height: 100px;">
<div style="background-color: green; height: 50px; padding-top: 10px;"></div>
<!--<div style="background-color: green; height: 50px; padding: 10px 10px 0px 10px;"></div>-->
<!--padding: 10px 10px 0px 10px代表上右下左-->
</div>
<!--外面一个红框高100，内部的背景色绿色-高50，内部边框增加10 padding-top: 10px padding-bottom: 10px-->
<!--padding-left: 10px padding-right: 10px padding: 10px(上下左右都增加10px)-->
<!--内边距是增加自己，让自己变大-->
</body>
</html>
18css_margin外边距
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div style="border:1px solid red; height: 100px;"> <div style="background-color: green; height: 50px; margin-top: 10px;"></div> </div> <!--外面一个红框高100，内部的背景色绿色-高50，内部边框增加10 margin-top: 10px margin-bottom: 10px--> <!--margin-left: 10px margin-right: 10px margin: 10px(上下左右都增加10px)--> <!--外边距是自己内层div没有增大，自己之外变大了 但是外div不变还是高度100px--> <br> <br> <div style="border:1px solid red; height: 100px;"> <div style="background-color: green; height: 50px; padding-top: 10px; /* margin-top: 10px; */"></div> </div> <!--内外边距放在一起对比效果--> <!--应用场景：jd登录padding--> <!--不加的话，就是顶天立地，加上好看--> <!--用内外边距的时候，必须设置边框border，否则不好使--> <!--margin:0 auto; 水平居中 在div属性中加上这个就是水平居中 应用场景：电商网站的搜索条--> </body> </html>
19css_透明度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--F:\360data\重要数据\桌面\s12day12\demo\HtmlStore\app\load.html-->
<!--opacity 适用于谷歌 来设置透明度 在0-1之间 1是全挡着最不透明 0是最透明 比如2层，最外层设置透明度 内层就可以看见 -->
<!-- -moz-opacity 适用于火狐-->
<!--filter:alpha(opacity=50) 适用于ie8及更早版本-->
</body>
</html>
20css_分层加载_底层遮罩层外层_模态框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--z-index:分层使用 这个值越大，越靠近外层，越小越靠近底层-->
</body>
</html>
21css_load
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .shade{ position:fixed;z-index:1040;top:0;left:0;right:0;bottom:0;background-color:#999;filter:alpha(opacity=50); -moz-opacity:0.5;opacity:0.5; } .loading{ position:fixed;z-index:1050;top:40%;left:50%;height:32px;width:32px;margin:0 0 0 -16px;background:url(../img/loading.gif); } </style> </head> <body> 卡卡卡卡打卡单单熬到 <div style="height: 2000px;z-index:0"></div> <input type="button" value="提交数据"/> <div style="z-index:1;opacity:0.2;position: fixed;bottom: 0;right: 0;top:0;left:0;background-color: black"></div> <!--display:none;设置隐藏--> <!--<div style="z-index:2;position: fixed;left:50%;top:50%;margin-top: -16px;margin-left: -16px;">--> <div style="z-index:2;position: fixed;left:50%;top:50%;margin-top: -50px;margin-left: -150px;"> <!--<!– 遮罩层开始 –>--> <!--<div id='shade' class='shade'></div>--> <!--<!– 遮罩层结束 –>--> <!--<!– 加载层开始 –>--> <!--<div id='loading' class='loading'></div>--> <!--<!– 加载层结束 –>--> <!--<img src="loading.gif">--> <!--加载图标--> <div style="background-color: white;width: 300px;height: 100px;"> <input/> <input/> <input/> <input/> </div> <!--模态对话框--> </div> </body> </html>
22css_布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> body{ margin: 0 auto; /*顶部顶格*/ } .pg_header{ height: 50px; background-color: #000060; } .pg_body .menu{ background-color:#dddddd ; position: absolute; top:52px; left:0; bottom: 0; width: 200px; overflow: auto; /*float:left;*/ /*width: 20%;*/ } .pg_body .content{ background-color: #70b0ff; position: absolute; top:52px; right:0; bottom: 0; left:210px; overflow: auto; /*float:left;*/ /*width: 80%;*/ } </style> </head> <body> <div class="pg_header"></div> <div class="pg_body"> <div class="menu"> <a>123</a> <a>123</a> <a>123</a> <a>123</a> <a>123</a> <p>234</p> <p>234</p> <p>234</p> <p>234</p> <p>234</p> <p>234</p> <p>234</p> <p>234</p> <p>234</p> <p>234</p> <p>234</p> <p>234</p> <p>234</p> <p>234</p> <p>234</p> <p>234</p> <p>234</p> <p>234</p> <p>234</p> <p>234</p> </div> <div class="content"> neiru-内容 <div style="height: 1000px;"> <h1>biaoti</h1> </div> </div> </div> </body> </html>
浙公网安备 33010602011771号