web框架之HTML5前端开发(python3入门)
一、简介
前端： html5+css+javaScript(js+jq+bs)
h5 不擅长 应用程序
小程序是基于h5的封装产物 html(html有三个载体：pc端浏览器，移动端浏览器，移动端app)
*** 标签
*** 层级关系css
*** 样式
*** 选择器 (通过css来控制html，就是用选择器来建立这个控制的桥梁)
*** 布局
二、了解h5
标签：被<>包裹，以字母开头，可以结合合法字符(-、数字)，能被浏览器解析的符号，被称之为标签 指令： => doctype>规定文档类型， 转义字符： 空格转义,基本不用转义字符(http://tool.oschina.net/commons?type=2) 数据：文本、图片、视频。。。
1 分析第一个h5页面
DOCTYPE html><head><meta charset="UTF-8"><title>第一个页面title>head><abc>ABCabc><body>body>html> View Code
2 常用标签
### h1~h6，p、span、i、b 标签建议h1代表页面标题，在同一个页面中只出现一次
### a(herf|targer) img(src|alt|title) hr|br
### ul>li table(了解) form(表单) 常用标签
3 单双标签
有头有尾的就是双标签
img，input等都是单标签
所有的标签 都是有结束标志,单标签，默认省略了 "/"，建议省略双标签，如果省略了结束标志的话，系统会默认按系统自行判断进行添加，开发过程中不建议省略
单标签：主功能（一般不需要内容）
双标签：主内容（要显示字标签，及内容） 单双标签
4 层级关系
<div class="wrapper"><div class="header">div><div class="navigation">div><div class="body"><div class="left">div><div class="center">div><div class="right">div>div><div class="foot">div><div class="idea"><h3>h3><p>p><p>p><p>p><p><b>b>p>div><div class="left"><div class="list"><h3>h3><ul><li>li><li>li><li>li>ul>div><div class="list"><h3>h3><ul><li>li><li>li><li>li>ul>div><div class="list"><h3>h3><ul><li>li><li>li><li>li>ul>div>div>div>层级关系
5 css
# 选择器: html页面标签的某种名字, 用来将html与css建立起链接, 就可以通过css来控制html样式
# 作用域: {}, 写在作用域中的样式块就是控制作用域前名字(选择器)的
# 样式块: 样式语句们 css
6 css引入
# 1.行间式: 将css样式直接书写在标签style属性中
# 优点: 直观(对样式操作简单粗暴) 缺点: 可读性极差, 复用性差# 2.内联式: 将css样式书写在style标签中
# 优点: 可读性强, 复用性强 缺点: 延展性(团队开发)# 3.外联式: 将css样式书写在css文件中, 用html文件中link标签将两个文件建立起联系
# 优点: 适合团队开发 css引入
7 基础选择器
通配: *
标签选择器: 标签名 div
class选择器: .box
id选择器: #box# 基础选择器优先级: !important > 行间式 > id > class > 标签 > 通配 基础选择器
8 高级选择器
# 群组选择器 ，隔开 控制多个 div, .div , #div{}# 后代选择器 .sup .sub{# sup可以为.sub的父亲 也可以为父辈 }子代 .sup > ,.sub{#.sup 只能为.sub的父亲 }#兄弟选择器 .div1 ~ .div2 {# .div2 在.div1的兄弟 ， .div1是修饰词， 。div1 与.div2之间可以有其他兄弟 }.div1 + .div2 {# .div2 在.div1的兄弟 ， .div1是修饰词， 。div1 与.div2之间不可以有其他兄弟 }#交叉选择器 h2.h{# 是h2标签且有一个class名为h }.h1.h2.h3{# 有一个标签有三个类名 } <div class="h1 h2 h3">div>高级选择器
9 高级选择器优先级
1 高级选择器的优先级由个数决定
2 高级选择器的优先级与类别无关(后代、子代、兄弟、相邻等 同等对待)
3 id无限大于class，id无限大于标签
4 上方结果之后优先级还是一致，则跟顺序有关
10 伪类选择器
:nth-child()/* 先确定位置, 再匹配类型*//*li:nth-child(3), 先将所有结构下的第3个标签找出来, 再匹配选择器的类型*//*li:nth-child(2n), 匹配偶数位的li*//*li:nth-child(2n - 1), 匹配奇数位的li*//*li:nth-child(3n), 匹配3的倍数的li*/li:nth-child(3) {color: orange;} 伪类选择器 .box {width: 200px;height: 200px;background-color: orange;/*过度(实现动画): 过度时间 延迟时间(省略) 动画属性(可省略默认all) 过度曲线(可省略)*/transition: 1s all cubic-bezier(0.38, 1.65, 0, -0.97);
}
.box:hover {width: 400px;height: 400px;background-color: red;
} 鼠标悬浮伪类
11 字体操作
.box {/* 字重 大小/行高 字族 */font: 900 30px/200px "STSong";/*字体水平居中方式*/text-align: center;/*字体颜色*/color: red;
} 字体操作
12 背景图片操作
background-color: orange;
/*加载背景图片*/
background-image: url("img/001.png");
/*平铺: repeat | repeat-x | repeat-y | no-repeat*/
background-repeat: no-repeat;
/*背景尺寸: 会缩放背景图*/
background-size: 100px 200px;
/*背景定位: x轴左右偏移 y轴左右偏移*/
background-position: -10px 20px;background: 颜色 url("图片地址") no-repeat 10px -20px;
精灵图在显示区域向右移动10px向上移动20px 背景图片操作
13 浮动布局
DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>浮动布局title><style>.box {width: 200px;height: 80px;background-color: brown;border: 1px solid black;/*浮动布局*//*子级一但浮动，就不再撑开父级高度*//*浮动的元素会不完全脱离文档流*//*脱离文档流：高于原文档流内盒子的显示层次*//*不完全：浮动有一个清浮动操作，可以让子级重新撑开父级的高度*//*清浮动：可以让子级重新撑开父级高度*/float: left;}/*子浮动，父级清浮动，父的兄弟显示区域正常*/.sup:after{content: '';display: block;clear: both;}.ele {width: 200px;height: 80px;background-color: red;}/*border: 1px solid black;*/style>head>
<body>
<div class="sup"><div class="box">1div><div class="box">2div><div class="box">3div>
div><div class="ele">div>body>
html> 浮动布局介绍 1 css: 2 /*reset操作：清楚系统默认样式的操作*/ 3 4 body{ 5 margin: 0; 6 } 7 8 9 a{ 10 /*统一a标签的字体颜色*/ 11 color: black; 12 /*清除下划线*/ 13 text-decoration: none; 14 15 } 16 17 18 19 ul{ 20 list-style: none; 21 margin: 0; 22 padding: 0; 23 24 } 25 26 27 28 ######################### 29 30 31 h5: 32 DOCTYPE html> 33 <html lang="en"> 34 <head> 35 <meta charset="UTF-8"> 36 <title>浮动布局案例title> 37 38 <link rel="stylesheet" href="./css/reset.css"> 39 <style> 40 .header { 41 width: 1210px; 42 height: 100px; 43 background-color: orange; 44 /*margin-left: auto;*/ 45 /*margin-right: auto;*/ 46 /*上下为0 右左为auto*/ 47 margin: 0 auto; 48 } 49 50 .nav { 51 /*父级的宽度决定自己一排排列的个数*/ 52 width: 1210px; 53 margin: 0 auto; 54 55 } 56 57 /*父标签清浮动：高度需要子级撑开，自己可以设置高度，但不一定准确*/ 58 .nav:after { 59 content: ''; 60 display: block; 61 clear: both; 62 } 63 64 /*子标签浮动：同行显示*/ 65 .nav li { 66 width: 200px; 67 height: 48px; 68 background-color: brown; 69 float: left; 70 71 } 72 73 .body { 74 width: 1210px; 75 margin: 0 auto; 76 background-color: cyan; 77 height: 100px; 78 } 79 80 .nav li:nth-child(1) { 81 width: 155px; 82 background: url("./img/bg.png") no-repeat; 83 } 84 85 .nav li:nth-child(2) { 86 width: 157px; 87 background: url("./img/bg.png") no-repeat -155px 0; 88 89 } 90 91 .nav li:nth-child(3) { 92 width: 167px; 93 background: url("./img/bg.png") no-repeat calc(-155px - 157px) 0; 94 95 } 96 97 .nav li:nth-child(4) { 98 width: 158px; 99 background: url("./img/bg.png") no-repeat calc(-155px - 157px - 167px) 0; 100 101 } 102 103 .nav li:nth-child(5) { 104 width: 101px; 105 background: url("./img/bg.png") no-repeat calc(-155px - 157px - 167px - 158px) 0; 106 107 } 108 109 .nav li:nth-child(6) { 110 width: 185px; 111 background: url("./img/bg.png") no-repeat calc(-155px - 157px - 167px - 158px - 101px) 0; 112 113 } 114 115 .nav li:nth-child(7) { 116 width: 177px; 117 background: url("./img/bg.png") no-repeat calc(-155px - 157px - 167px - 158px - 101px - 185px) 0; 118 119 } 120 121 .nav li:hover { 122 background-position-y: -48px; 123 } 124 125 126 style> 127 128 129 head> 130 <body> 131 132 133 <div class="header">div> 134 135 136 <ul class="nav"> 137 <li>li> 138 <li>li> 139 <li>li> 140 <li>li> 141 <li>li> 142 <li>li> 143 <li>li> 144 ul> 145 146 <div class="body">div> 147 148 149 body> 150 html>浮动布局案例
转载于:https://www.cnblogs.com/lich1x/p/11166577.html
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！