千锋week.2
目录
一.嵌套列表
概念
列表之间可以互相嵌套
小练习-代码块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>好美味小吃</title>
</head>
<body>
<h1>好美味小吃</h1>
<ul><li>小吃类<li>每份五元</li><ul><li>煮粉干</li><li>拌青菜</li><li>蛋炒饭</li><li>煎蛋</li><li>米饭</li></ul></li></ul>
<ul><li>卤味类<li>每份八元</li><ul><li>鸭肠</li><li>面筋</li><li>牛肚</li><li>猪耳朵</li><li>猪头肉</li><li>大肠</li><li>鱿鱼</li></ul></li></ul>
<ul><li>套餐类<li>每份十一元</li><ul><li>卤面筋饭</li><li>猪肉肉饭</li><li>猪耳朵饭</li><li>卤猪脚饭</li><li>卤猪舌头饭</li></ul></li></ul>
<ul><li>炖罐类<li>每份十四元</li><ul><li>猪蹄黄豆</li><li>猪肚莲子</li><li>猪心枸杞</li><li>牛肉枸杞</li></ul></li></ul>
<p><em>亲,20元以上可送餐哝</em></p>
<h3><em>备注:</em></h3>
<p><strong>没有价格怎么凑20?实在不严谨好吧</strong></p>
</body>
</html>
小练习-成品
好美味小吃
- 小吃类
- 每份五元
- 煮粉干
- 拌青菜
- 蛋炒饭
- 煎蛋
- 米饭
- 卤味类
- 每份八元
- 鸭肠
- 面筋
- 牛肚
- 猪耳朵
- 猪头肉
- 大肠
- 鱿鱼
- 套餐类
- 每份十一元
- 卤面筋饭
- 猪肉肉饭
- 猪耳朵饭
- 卤猪脚饭
- 卤猪舌头饭
- 炖罐类
- 每份十四元
- 猪蹄黄豆
- 猪肚莲子
- 猪心枸杞
- 牛肉枸杞
亲,20元以上可送餐哝
备注:
没有价格怎么凑20?实在不严谨好吧
二.表格标签
种类
1.<table>
:表格的最外层容器
2.<tr>
:定义表格行
3.<th>
:定义表头
4.<td>
:定义表格单元
5.<caption>
:定义表格标题
注意,以上均为双标签
浅解说
1.table:表示此代码串编译出的为一个表格,即双标签内内容为表格
2.tr:双标签内为一行
3.th:一行内的每一个格子,比td更粗,并且位于第一行,为列表头,所属tr
4.td:与th一样,所属tr
5.caption:与tr并列,为标题
语义化标签
并无实际用处,但是很规范。分为,,,其中tbody可以出现多次,其余两个只能出现一次。
展示
<body>
<table>
<thead><caption>中国</caption></thead>
<tbody><tr><th>江西</th><th>江苏</th></tr></tbody>
<tbody><tr><td>赣州</td><td>扬州</td></tr></tbody>
<tfoot></tfoot>
</table>
</body>
</html>
江西 | 江苏 |
---|---|
赣州 | 扬州 |
三.表格属性
分类
1.border:表格边框,加在table标签之内
2.cellpadding:单元格内的空间,加在table标签内
3.cellspacing:单元格之间的空间,加在table属性中
4.rowspan:合并行,加在th,td标签内
5.colspan:合并列,加在th,td标签内
6.align:左右对齐方式,分为right,center,left,加在tr标签内
7.valign:上下对齐方式,分为top,middle,bottom,加在tr标签内
展示
<body>
<table border="20" cellpadding="12" cellspacing="14">
<thead><caption>中国</caption></thead>
<tbody>
<tr>
<th colspan="2">江西</th>
<th colspan="2">江苏</th>
</tr>
<tr>
<td>赣州</td>
<td>南昌</td>
<td>扬州</td>
<td>徐州</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
</body>
</html>
江西 | 江苏 | ||
---|---|---|---|
赣州 | 南昌 | 扬州 | 徐州 |
四.表单标签
种类
1.<form>
:表单的最外层容器
2.<input>
:标签用于搜集用户信息,根据不同type属性值,表示不同的控件,如输入框,密码框,复选框等。
3.type属性
text | 普通的文本输入框 |
password | 密码输入框 |
checkbox> | 复选框 |
radio | 单选框 |
file | 上传文件 |
submit | 提交按钮 |
reset | 重置按钮 |
type属性 | 含义 |
---|
<body>
<form>
<h3>输入框</h3>
<input type="text">
<h3>密码框</h3>
<input type="password">
<h3>复选框</h3>
<input type="checkbox">中国
<input type="checkbox">蒙古
<input type="checkbox">俄罗斯
<input type="checkbox">巴基斯坦
<h3>单选框</h3>
<inoput type="radio" name="nimasile">中国
<inoput type="radio" name="nimasile">日本
<h3>上传文件</h3>
<inout type="file">
<h3>提交按钮</h3>
<inout type="submit">
<h3>重置按钮</h3>
<input type="reset">
</form>
</body>
</html>
五.表单标签2
种类
1.<textarea>
多行文本框
2.<select>,<option>
下拉菜单
3.<lable>
辅助表单
展示
六.表格表单组合
概念
:表格表单之间可以相互组合形成数据展示效果
练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小练习</title>
</head>
<body>
</head>
<body>
<h1>小练习</h1>
<form action="">
<table border="1" cellpadding="30">
<tBody>
<td rowspan="4">总体信息</td>
<td colspan="2">用户注册</td>
</tr>
<td>用户名:</td>
<td><input type="text" placeholder="请输入用户名"></td>
</tr>
<td>密码:</td>
<td><input type="password" placeholder="请输入密码"></td>
</tr>
<td colspan="2">
<input type="submit">
<input type="reset">
</td>
</tBody>
</table>
</form>
</body>
</html>
</body>
</html>
七.div标签与span标签
div
div(块):
div全称为division,“分割、分区”的意思,<div>
标签用来划分一个区域,相当于一块区域容器,可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在<div>
标签中,<div>
中还可以嵌套多层<div>
,用来将网页分割成独立的、不同的部分,来实现网页的规划和布局。
span
span(内联):
用来修饰文字的,div与span都是没有任何默认样式的,需要配合CSS才行。
八.css基础语法
1.格式:
选择器{属性1:值1;属性2:值2;}
2.单位:
px->像素(pixel),%->百分比
3.基本样式:
width,height,background-color
4.css注释
/css注释的内容/
例如
<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>
div{ width:100px; height:10op ; background-color:blue;}
</style>
</head>
<body>
<div>这是一个块</div>
</body>
</html>
九.css样式的两种引入方式
内联(行内,行间)样式
在html标签上添加style属性来实现的
内部样式
在style标签内添加的样式
注意,内部样式的优点,可以复用代码
例如
<body>
<div style="width:100px;height:100px;background-color:black">这是一个超大块</dive>
</body>
十.css的外部引入方式
概念
引入一个单独的css文件,即name.css
外部样式
<link>
标签,位于hed标签之内。引入外部资源,rel属性指定资源与页面的关系,href指定资源地址
<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">
<link rel="stylesheet" href="相对关系,绝对关系">
<title>Document</title>
</head>
<body>
<div>这是一个块</div>
</body>
</html>
十一.css中的颜色表示法
种类
1.单词表示法:一些颜色的单词,red,blue,等等
2.十六进制表示法:123456789abcdefgf
3.RGB三原色表示法:rgb(o,o,o),黑色,rgb(255,255,255),白色
获取颜色方法
1,下载fehelper
2,许多网页拾色器
十二.css背景样式
种类
1.background-color:背景颜色
2.background-image:背景图片
3.background-repeat:背景图片中的平铺方式
4.background-position:背景图片的位置
5.background-attachment:背景图随滚动条的移动方式
例如
<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>
div{ width:300px; height:300px; background-color :口red;
background-image:url(./img/dog.jpg);}
background-repeat : repeat-x;
</style>
</head>
<body>
<div></div>
</body>
</html>
总结说明
–background-color 背景色
–background-image 背景图
url(背景地址)
默认:会水平垂直都铺满背景图
–background-repeat 平铺方式
repeat-x x轴平铺
repeat-y y轴平铺
repeat (x ,y 都进行平铺,默认值)
no-repeat都不平铺
–background-position :背景位置
x y: number(px、%)|单词
x: left、center、right
y: top、center、bottom
–background-attachment :背景图随滚动条移动的方式
scroll :默认值〈背景位置是按照当前元素进行偏移的)
fixed,背景位置是按照浏览器进行偏移的
十三.背景实现视觉差效果
直接上代码
<!DOCTYPE html>
<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>
#div1{ width:1400px; height:80opx; background-image:url(./七星.png); background-attachment: fixed;}
#div2{ width:1400px; height:800px; background-image:url(./七星.png); background-attachment: fixed;}
#div3{ width:1400px; height:800px; background-image:url(./七星.png); background-attachment: fixed;}
</style>
</head>
<body>
<div id="divi"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
十四.css边框样式
种类
1.border-style:边框的样式
2.border-width:边框的大小
3.border-color:边框的颜色
注意,以上是针对某一条边进行单独设置
详细介绍
—border-style :边框样式
solid :实线
dashed :虚线
dotted :点线
—border-width :边框大小
px…
—border-color :边框颜色
red #foo …
边框也可以针对某一天边进行单独设置: border-left-style :中间是方向 left、right、top、bottom
十五.实现三角形
做一个三角形:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{background-color:green;}
div{
width:0px;height:0px;
border-top-color:transparent;
border-top-style:solid;
border-top-width:30px;;
border-right-color:transparent;
border-right-style:solid;
border-right-width:30px;;
border-bottom-color:red;
border-bottom-style:solid;
border-bottom-width:30px;;
border-left-color:transparent;
border-left-style:solid;
border-left-width:30px;;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
十六.十七.css的文字样式
1. font-family:字体类型
英文字体:Arial,‘Times New Roman’
中文字体:微软雅黑(默认),宋体
衬线体和非衬线体
中文字体的英文名称:
1.微软雅黑:‘Microsoft YaHei’
2.宋体:SimSun
div{font-family:'Times New Roman',Simsun,微软雅黑 ;}
注:
1.字体加’ '是因为有空格
2.多个字体类型的设置目的:防止电脑里无此种字体,字体选取依次向右
2. font-size:字体大小
默认:16px
写法:number(px)| 单词(small large …不推荐使用)
字体大小一般为偶数
3.font-weight:字体粗细
模式:正常(normal); 加粗(bold)
写法:单词(normal,bold)| number(100 200 300 …900; 100到500都是正常的,600到900都是加粗)
4.font-style:字体样式
模式:正常(normal);斜体(italic)
写法:单词(normal,italic)
注:oblique也是表示斜体,用的比较少,一般了解即可。
区别:
1.italic带有属性倾斜字体的才可以设置倾斜操作
2.oblique没有倾斜属性的字体也可以设置倾斜操作
5.字体颜色
写法:单词(red blue…)
十八.十九.二十一.二十二.css段落样式
1.ext-decoration:文本修饰
下划线:underline
删除线:line-through
上划线:overline
不添加任何装饰:none
注:可添加多个文本修饰:line-through,overline,none(用,隔开)
2.text-transform:文本大小写(针对英文)
小写:lowercase
大写:uppercase
3.text-indent:文本缩进
首行缩进
p{text-indent: 36px;font-size: 18px;}
em单位:相对单位,1em永远都是和字体大小相同。
p{text-indent: 2em;font-size: 16px;}
4.text-align:文本对齐方式
对齐方式:left,right,center,justify(两端点对齐)
p{text-align: right;}
5.line-height:定义行高
行高:一行文字的高度,上边距和下边距的等价关系。
默认行高:不是固定值,而是变化的,根据当前字体的大小在不断的变化。
取值:number(px) | scale(比例值,跟文字大小成比例的)
p{line-height: 30px;}
p{line-height: 2;}
6.letter-spacing:定义字间距
7word-spacing:定义词间距(针对英文)
英文和数字不自动折行问题:
1.word-break:word-all;(非常强烈的折行)
2.word-wrap:break-word;(不是那么强烈,会产生空白区域)
二十三.css复合样式
概念
1.一个css属性只控制一种样式,叫做单一样式
2.一个css属性控制多种样式,叫做复合样式
具体情况
复合的写法,是通过空格的方式实现的。(复合写法有的不需要顺序,例如background,border;有的需要顺序,例如font)
background:
div{background: red url(./m1.jdp) repeat 0 0;}
border:
div{border: 1px red solid;}
font:最少要有两个值size ,family(顺序不能变)
weight style size family √
style weight size family √
weight style size/line-height family √
div{font:bold italic 30px/100px 宋体;}
代码块中100px表示行高
注:尽量不要混写,如果非要混写,那么一定要先写复合样式再写单一样式
div {background: url(./m1.jdp) repeat 0 0;
background-color: red; }
二十四.css选择器:ID选择器
上代码
#elem{ } id=“elem”
注意事项
1.在一个页面中,ID值是唯一的。
2.命名规范,字母 ,下划线,中划线,数字(命名的第一位不能是数字)
3.命名方式
一.驼峰写法:searchButton(小驼峰) SearchButton(大驼峰) searchSmallButton
二.短线写法:search-small-button
三.下划线写法:search_small_button
二十五.css选择器:class选择器
上代码
.elem{ } class=“elem”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{background: red;}
</style>
</head>
<body>
<div class="box">这是一个块</div>
</body>
</html>
style>
.box{background: red;}
.content{font-size: 30px;}
</style>
</head>
<body>
<div class="box content">这是一个块</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p.box{background: red;}
</style>
</head>
<body>
<div class="box content">这是一个块</div>
<div class="box content">这又一个块</div>
<p class="box content">这还一个段落</p>
</body>
</html>
注意
1.class选择器可以复用的(一条样式可以作用许多内容)
2.可以添加多个class样式(用空格来添加)
3.多个样式的时候,样式的优先级根据CSS决定,而不是class属性中的顺序(先识别CSS中的后一个)
4.标签+类的写法:在样式前添加标签,则作用< body>中相同的一类