8.14前端(3)
---恢复内容开始---
2018-8-14 15:25:31
伪类选择器
2018-8-14 19:55:44 明天继续学前端!!!啦啦啦 这星期结束前端 下星期就可以愉快进行Django啦!!!
越努力越幸运!
发现前端还是不难,就是东西太碎!!!
越努力越幸运!!
2018-8-14 19:53:17 把今天学的粘贴过来 周末复习一下!
弄到了 老男孩九期全套所有视频!15部分,感觉好开森!!
day49 1. 内容回顾 1. 昨日内容 1. form表单(一般method="post") 1. input系列 type 1. text 2. password 3. radio 4. checkbox 5. date(datetime) 6. submit 7. button 8. reset 9. hidden 10. file (enctype="multipart/form-data") 2. select 1. select>option(分组的下拉框 select>optgroup>option) 3. textarea 2. form表单提交 三要素: 1. input\select\textarea 要有一个name属性 2. 提交按钮必须要是 type="submit" 3. form不是from;获取用户输入的标签都要放到form标签里面(仅限于form提交数据) 3. CSS选择器 1. 基本选择器 1. 标签选择器 2. ID选择器 3. 类选择器(class="c1 c2 ...") 2. 通用选择器(*) 3. 组合选择器 1. 后代选择器(空格) 2. 儿子选择器(>) 3. 毗邻选择器(div+p) 4. 弟弟选择器(~) 4. 属性选择器 1. [s9] 2. [s9="hao"] 3. 其他不常用的(有印象即可) 5. 分组和嵌套 1. 分组(用逗号分隔的多个选择器条件) 2. 嵌套(选择器都可以组合起来使用) 6. 选择器的优先级 1. 越靠近标签的优先级越高(就近原则) 2. 权重的计算 1. 内联样式1000 2. ID选择器100 3. 类选择器10 4. 元素选择器1 div#d1(101)/div.c1(11)/div .c1 2. 之前内容复习 1. Python语法基础 2. 数据类型和内置方法 3. 函数 1. 参数 2. 装饰器 3. 迭代器和生成器 4. 匿名函数 5. 递归 6. 内置函数 7. 三元运算和列表推导式 4. 文件操作 5. 面向对象(CRM项目会有大量的应用) 6. 常用的模块和包 7. 网络编程和并发编程(优先级低) 8. 数据库(建库\建表\基本查询\) 建立自己的自信 2. CSS选择器补充 http://www.cnblogs.com/liwenzhou/p/7999532.html 3. CSS属性 1. 文字属性 1. font-family 2. font-size 3. font-weight 4. color 1. rgb(255, 255, 255) 2. #f00 3. red 4. rgba() 2. 文本属性 1. text-align 2. text-decoration 3. 背景属性 1. background-color 2. background-image 4. 边框属性 1. border 2. border-radius --> 变圆 5. display属性 1. inline 2. block 3. inline-block 4. none (隐藏) 6. CSS盒子模型(从外到内) 1. margin: 边框之外的距离(多用来调整 标签和标签之间的距离) 2. border边框 3. padding:内容区和边框之间的距离(内填充/内边距) 4. condent: 内容
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>伪类选择器</title> 6 <style> 7 /*连接没有被点击过*/ 8 a:link { 9 color: burlywood; 10 } 11 /*连接被点击过*/ 12 a:visited{ 13 color: green; 14 } 15 /*鼠标一上去*/ 16 a:hover{ 17 color: black; 18 } 19 div:hover{ 20 color: green; 21 } 22 23 /*input获取光标时*/ 24 input:focus{ 25 outlion:0; 26 background-color: green; 27 } 28 /*伪元素选择器*/ 29 .c1:before{ 30 content: '*'; 31 color:red; 32 } 33 .c1:after{ 34 content: '[?]'; 35 color:blue; 36 } 37 </style> 38 </head> 39 <body> 40 <a href="http://www.sougo.com">搜狗</a> 41 <input name="input"> 42 <p class="c1">啊啊啊</p> 43 <p class="c1">啊啊啊</p> 44 <p class="c1">啊啊啊</p> 45 <div id="d1">我是div</div> 46 </body> 47 </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>字体属性测试</title> <link rel="stylesheet" href="test.css"> </head> <body> <h1>海燕</h1> <p>在苍茫的大海上</p> <p class="c1">在苍茫的大海上</p> </body> </html>
<!DOCTYPE html>
<html>
<head>
<title>背景不动效果实例</title>
<style type="text/css">
.d1 {
height: 500px;
background: red;
}
.d2 {
height: 500px;
background-image: url("C:\Users\Administrator\Desktop\朕的东西\随手壁纸1.jpg");
/*把背景固定住*/
background-attachment: fixed;
}
.d3 {
height: 500px;
background: green;
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2">.</div>
<div class="d3"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>display属性</title>
<style type="text/css">
.c1 {
background-color: red;
display: inline;
/*display: block;*/
}
.c2{
background-color: green;
}
ul {
/*去掉小圆点*/
list-style-type:none;
}
/*横着排列*/
li {
display: inline;
/*上下左右都是20*/
padding: 20px;
border-right: 1px solid #666;
}
li a{
border: 1px solid red;
}
/*单独某个标签设置*/
li.last {
border-right: none;
}
</style>
</head>
<body>
<div class="c1">div</div>
<span class="c2">span</span>
<span class="c2">span</span>
<ul>
<li><a href="http://www.baidu.com">玉米商城</a></li>
<li><a href="http://www.baidu.com">玉米商城</a></li>
<li><a href="http://www.baidu.com">玉米商城</a></li>
<li><a href="http://www.baidu.com">玉米商城</a></li>
<li class="last">玉米商城</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>盒子模型</title>
<style type="text/css">
.c1{
height: 200px;
width: 300px;
border: 5px solid green;
margin:-top:5px;
margin-right: 1px;
/*上右下左*/
margin: 5px 10px 15px 200px;
/*块级的居中*/
margin: 0px auto;
}
</style>
</head>
<body>
<div class="c1"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>背景颜色</title>
<style type="text/css">
.d1 {
background: red;
}
.d2 {
width: xx px;
height: xx px;
/*不重复*/
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="d1">我是div</div>
<div class="d2">我是div2</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>边框实例</title>
<style type="text/css">
div{
height: 200px;
width: 300px;
background-color: red;
/*
border-width: 10px;
border-style: solid; */
border: 1px solid green;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
