千锋week.2

最新推荐文章于 2024-08-19 17:04:41 发布

YOU WANG TY

最新推荐文章于 2024-08-19 17:04:41 发布

阅读量1.3k

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/weixin_73247622/article/details/127561859

版权

千锋week.2

千锋week.2
一.嵌套列表
- 概念
- 小练习-代码块
- 小练习-成品
二.表格标签
- 种类
- 浅解说
- 语义化标签
- 展示
三.表格属性
- 分类
- 展示
四.表单标签
- 种类
五.表单标签2
- 种类
- 展示
六.表格表单组合
- 概念
- 练习
七.div标签与span标签
- div
- span
八.css基础语法
- 1.格式：
- 2.单位：
- 3.基本样式：
- 4.css注释
- 例如
九.css样式的两种引入方式
- 内联（行内，行间）样式
- 内部样式
- 例如
十.css的外部引入方式
- 概念
- 外部样式
十一.css中的颜色表示法
- 种类
- 获取颜色方法
十二.css背景样式
- 种类
- 例如
- 总结说明
十三.背景实现视觉差效果
- 直接上代码
十四.css边框样式
- 种类
- 详细介绍
十五.实现三角形
十六.十七.css的文字样式
- 1. font-family：字体类型
- 2. font-size:字体大小
- 3.font-weight：字体粗细
- 4.font-style：字体样式
- 5.字体颜色
十八.十九.二十一.二十二.css段落样式
- 1.ext-decoration：文本修饰
- 2.text-transform：文本大小写（针对英文）
- 3.text-indent:文本缩进
- 4.text-align：文本对齐方式
- 5.line-height：定义行高
- 6.letter-spacing：定义字间距
- 7word-spacing：定义词间距（针对英文）
二十三.css复合样式
- 概念
- 具体情况
二十四.css选择器：ID选择器
- 上代码
- 注意事项
二十五.css选择器：class选择器
- 上代码
- 注意

一.嵌套列表

概念

列表之间可以互相嵌套

小练习-代码块

<!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属性

type属性
type属性	含义
text	普通的文本输入框
password	密码输入框
checkbox>	复选框
radio	单选框
file	上传文件
submit	提交按钮
reset	重置按钮

## 展示

<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>

Document

这是一个块

![在这里插入图片描述](https://img-blog.csdnimg.cn/365f19dad204430aabd143086861897a.png)

九.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>

Document

这是一个块

十一.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”

Document

这是一个块

这是另一个块

注意事项

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>