第二周学习
二十一、嵌套列表
列表之间可以相互嵌套，形成多层级的列表
<ul>
<li>辽宁省
<ul>
<li>沈阳</li>
<li>大连</li>
<li>丹东</li>
</ul>
</li>
<li>
山东省
<ul>
<li>济南</li>
<li>青岛</li>
<li>烟台</li>
</ul>
</li>
</ul>
<dl>
<dt>中国</dt>
<dd>
<dl>
<dt>辽宁省</dt>
<dd>沈阳</dd>
<dd>大连</dd>
<dd>丹东</dd>
</dl>
<dl>
<dt>山东省</dt>
<dd>济南</dd>
<dd>青岛</dd>
<dd>烟台</dd>
</dl>
</dd>
</dl>
二十二、表格标签
table、tr、th、td、caption等
注：之间是有嵌套关系的，要符合嵌套规范。
二十三、表格属性
align : left 、center 、right
valign : top 、middle 、bottom
<body>
<table border="10" cellpadding="50" cellspacing="50">
<caption>大数据</caption>
<thead>
<tr valign="top">
<th>辅导员</th>
<th>班长</th>
<th>最聪明的人</th>
</tr>
</thead>
<tbody>
<tr>
<td>王建华</td>
<td>王星博</td>
<td><strong>李俊达</strong></td>
</tr>
<tr>
<td>王建华</td>
<td>王立航</td>
<td>李俊达</td>
</tr>
<tr>
<td>王建华</td>
<td>薛海笑</td>
<td>李俊达</td>
</tr>
</tbody>
</table>
</body>
二十四、表单标签
注：input 是单标签
<body>
<form action="https://mp.csdn.net/mp_blog/manage/article?spm=1000.2115.3001.5448">
<h1>输入框：</h1>
<input type="text" placeholder="来吃粑粑吧">
<h2>密码框：</h2>
<input type="password" placeholder="请输入你的粑粑">
<h2>复选框：</h2>
<input type="checkbox" checked>吃粑粑
<input type="checkbox" >吃粑粑粑粑
<input type="checkbox" >吃粑粑粑粑粑粑啊
<h2>单选框：</h2>
<input type="radio" name="1" disabled>我不是变态
<input type="radio" name="1" disabled>我是变态
<h2>上传文件：</h2>
<input type="file">
<h2>提交和重置</h2>
<input type="submit">
<input type="reset">
</form>
</body>
二十五、表单相关标签
<textarea> : 多行文本框
<select> 、<option> :下拉菜单
<label> :辅助表单常见属性 : checked、disabled、name、for …
<body>
<h2>多行文本框</h2>
<textarea cols="30" rows="10"></textarea>
<h2>下拉菜单</h2>
<select name="" id="">
<option value="" selected disabled>请选择</option>
<option value="">北京</option>
<option value="">上海</option>
<option value="">杭州</option>
<option value="">南京</option>
</select>
<select name="" id="" size="3">
<option value="">盐城</option>
<option value="">北京</option>
<option value="">上海</option>
<option value="">杭州</option>
</select>
<select name="" id="" multiple>
<option value="">南通</option>
<option value="">广西</option>
<option value="">福州</option>
</select>
<input type="file" multiple>
<input type="radio" name="1" id="man"><label for="man">男</label>
<input type="radio" name="1" id="woman"><label for="woman">女</label>
</body>
二十六、表格表单组合使用
<body>
<form action="">
<table border="1" cellpadding="30">
<tbody>
<tr align="center">
<td rowspan="4"总体信息></td>
<td colspan="2">用户注册</td>
</tr>
<tr align="right">
<td>用户名：</td>
<td><input type="text" placeholder="请输入用户名"></td>
</tr>
<tr align="right">
<td>密码：</td>
<td><input type="password" placeholder="请输入密码"</td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit">
<input type="reset">
</td>
</tr>
</tbody>
</table>
</form>
</body>
二十七、div与span
<div>
<h2><a href="https://www.4399.com/">小游戏,4399小游戏,小游戏大全,双人小游戏大全- www.4399.com </a></h2>
<p>4399小游戏大全包含连连看 ,连连看小游戏大全,双人小游戏大全,H5在线小游戏,4399洛克王国,4399赛尔号,4399奥拉星,4399奥比岛,4399弹弹堂,4399单人小游戏,奥比岛小...</p>
<a href="https://www.4399.com/">www.4399.com 4399小游戏<title>水滴信用为您检测该网站主体信息
主体：四三九九网络股份有限公司
详情 >水滴信用®️ 实名企业</title></a>
</div>
<div>
<h2><a href="https://ssjj.4399.com/">生死狙击,生死狙击官网,生死狙击微端下载,4399生死狙击游戏</a></h2>
<a href="a"><img src="https://so.360tres.com/dmsmfl/120_80_/t01f5f278e82879a833.webp?size=456x290"></a>
<p>4399生死狙击是一款3D第一人称射击网页游戏,打开网页在线玩,即可感受枪林弹雨的枪战乐趣。4399生死狙击官网提供生死狙击微端下载...</p>
<p><a href="http://v.4399pk.com/ssjj/">视频攻略</a></p>
<p><a href="https://ssjj.4399.com/">ssjj.4399.com</a></p>
</div>
二十八、CSS语法格式
格式：选择器{属性1：值1；属性2：值2}
width : 宽
height : 高
background-color : 背景色长度单位：
px : 像素
% : 百分比
二十九、内联样式与内部样式
三十、外部样式及两种写法
引入单独的CSS文件 name.css
通过link标签引入外部资源，rel属性指定资源跟页面的关系，href属性指定资源的地址。
HTML<link>标签的rel属性
三十一、CSS颜色表示法
1.单词表示法：red , blue , green…
2.十六进制表示法：0 1 2 3 4 5 6 7 8 9 a b c d e f
<style>
div{ background-color:#000000;} → 黑色
</style>
3.rgb三原色表示法：rgb(255,255,255);
提取颜色的工具：下载地址
photoshop工具
三十二、背景样式
background-color 背景色
background-image 背景图url（背景地址）
默认：会水平垂直都铺满背景图background-repeat 平铺方式
repeat-x
repeat-y
repeat（x，y 都进行平铺，默认值）
no-repeat 都不平铺background-position 背景位置
x y : number (px、%) 单词x : left、center、right
y : top、center、bottombackground-attachment :背景图随滚动条移动的方式
scroll : 默认值（背景位置是按照当前元素进行偏移的）
fixed（背景位置是按照浏览器进行偏移的）
三十三、背景实现视觉差效果
<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>
#div1{width: 1400px ; height: 800px ; background-image: url(3-1F923144206.jpg); background-attachment: fixed;}
#div2{width: 1400px ; height: 800px ; background-image: url(QQ图片20221011231256.png); background-attachment: fixed;}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
三十四、边框样式
border-style : 边框样式
单独一条边设置 ：border-left-stylesolid : 实线
dashed : 虚线
dotted : 点线border-width : 边框大小
px …
border-color : 边框颜色
red #f00 …
<style>
div{width: 300px ; height: 300px ; border-style: dashed ; border-color: brown ; border-width: 1px ;}
</style>
</head>
<body>
<div></div>
</body>
三十五、边框实现三角形
<style>
div{width: 0px ; height: 0px ;
border-top-style: solid ; border-top-color: rgb(255, 255, 255) ; border-top-width: 40px ;
border-left-style: solid ; border-left-color: rgb(255, 255, 255) ; border-left-width: 40px ;
border-right-style: solid ; border-right-color: rgb(75, 21, 4) ; border-right-width: 40px ;
border-bottom-style: solid ; border-bottom-color: rgb(255, 255, 255) ; border-bottom-width: 40px ;}
</style>
三十六、family字体类型
font-family : 字体类型
英文字体：Arial,‘Times New Roman’
中文字体：微软雅黑，宋体中文字体的英文名称
微软雅黑：‘Microsoft YaHei’
宋体：SimSun注：当字体名称中出现空格时，字体用"引号框住。
<style>
div{ font-family: 华文彩云 , 'Times New Roman' , SimSun ,微软雅黑;}
</style>
</head>
<body>
<div>啊啊啊啊啊啊啊啊</div>
<p>啊啊啊啊啊啊啊啊</o>
<div>啊啊啊啊啊啊啊啊</div>
<div>啊啊啊啊啊啊啊啊</div>
<div>啊啊啊啊啊啊啊啊</div>
</body>
三十七、字体大小粗细样式
注：字体大小一般为偶数在这里插入图片描述
三十八、文本修饰与文字大小写
text-decoration : 文本修饰
下划线：underline
删除线：line-through
上划线：overline
不添加任何装饰：none
注：同时添加多个属性用空格隔开。text-transform：文本大小写（英文段落）
小写：lowercase
大写：uppercase
只针对首字母大写：capitalize
三十九、文本缩进与文本对齐
text-indent：文本缩进
首行缩进
em单位：相对单位，1em永远都是跟字体大小相同text-align：文本对齐
left , right , center , justify（两端点对齐）
四十、文本的行高
取值：number（ px ） scale（比例值，跟文字大小）
四十一、文本间距与英文折行
letter-spacing：字之间的间距
word-spacing：词之间的间距（英文段落）
四十二、文本与段落实现个人简介
<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>
div{ width: 800px;}
h1{ text-align: center;color: red;}
h2{ color: blue;}
#p1{ font-style: italic;}
#p2{ font-weight: bold; letter-spacing: 10px;line-height: 30px; text-indent: 2em;}
</style>
</head>
<body>
<h1>aaaaaaaaaaa</h1>
<h2>bbbbbbbbbbbbbbbbbbbbbb</h2>
<p>啊啊啊啊啊啊啊啊</p>
<h2>cccccccccccccccc</h2>
<p>dddddddddddddddddd</p>
<h2>eeeeeeeeeeeeeeeeee</h2>
<p>gggggggggggggggg</p>
</body>
</html>
四十三、CSS复合样式
复合写法，用空格方式实现，复合写法有些不需要关心顺序，例如background、border；有的需要关心顺序，例如font。
background：red url( ) repeat 0 0;
border：1px red solid;
font：注：最少要有其中两个值weight、style、size、family（不写color）
注：混合写的时候，先写复合样式，再写单一样式。
四十四、id选择器及注意事项
id选择器
#elem{ } id=“elem”
注：ID是唯一值，在一个页面中只能出现一次，出现多次不符合规范。驼峰写法：searchButton（小驼峰） SearchButton（大驼峰） searchsmallbutton
短线写法：search-small-button
下划线写法：search_small_button
四十五、CLASS选择器及注意事项
<title>Document</title>
<style>
.box{ background:red}
</style>
</head>
<body>
<div class="box">这是一个块</div>
<div class="box">这是两个块</div>
<div class="box">这是三个块</div>
<p class="box"></p>
</body>
扫一扫
1186
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
