归根结底就是标签的学习，不会的直接搜。
基本就是见名猜义，然后验证。
没必要抓得太细，边打边学边查
- 尽量少用* id选择器，通配符选择器,会降低页面响应速度
<style type = "text/css"> <style>添加css样式用的嵌入式代码，其中type=“text/css”是声名了css样式用文本写成。<link rel="stylesheet" type="text/css" href="aa_a_a.css">调用一个外部的CSS样式文件。
他是通过这个标签（只能在head标签里面用）来调用的，href表示外部样式文件的路径，
rel告诉浏览器告诉浏览器你将采用什么编码对内容处理
type设置或获取对象的 MIME 类型，media设置或获取媒体类型。 all 就表示all所有媒体类型的样式。- css可实现样式共享，在html中引入
- id选择符的优先级别要高于class选择符
class的作用范围比id大，id是唯一的，在一个页面中只能被调用一次，
而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>Document</title>
<style>
body {
font-size: 16px;
}
.title {
font-size: 25px;
font-weight: 400;
}
em {
font-style: normal;
color: gold;
/* #红绿蓝 #00fffff, 还有rgb */
/* 吸色器 hex数字, rgb值 */
}
.time{
color: #ccc;
/* 如果必须两两相同是可以采取简写的方式的 */
}
.one {
color: rgb(254, 178, 178);
}
.test {
color: hotpink;
}
.hh {
font-size: 700;
}
.tac {
text-align: center;
}
p {
line-height: 24px;
/* 浏览器的检查也可以改,而且在那里改,这里也会被改 */
/* 一般比字大个7/8px */
text-indent: 2em;
/* 两个字的宽度,首行缩进 */
/* 这个em和标签em没有任何关系 */
}
a {
text-decoration: none;
/* 取消下划线 */
color:indianred;
/* text-align: center; 没法居中,只能想办法*/
}
</style>
</head>
<body>
<h1 class = "title tac">我的快乐时代</h1>
<!-- div和p标签和下面的不太一样, 同样是占一行-->
<div class = "tac">
<span class = "time">2021年</span>
<span class="one">赞同 评论 分享</span>
<a href="#" class = "test">收藏</a>
<input type = "text" value = "请输入查询条件" class = "time"/>
<input type = "button" value = "搜索" class = "hh"/>
<hr />
</div>
<p>
让我有个美满旅程
让我有勇气去喊停
没有结局也可即兴</p>
<p>
难堪的不想
只想痛快事情
时间尚早别张开眼睛
长路漫漫是如何走过
宁愿让乐极忘形的我离时代远远
没人间烟火毫无代价唱最幸福的歌</p>
<p>
让我对这世界好奇
让我信自己的真理
让我有个永远假期
让我渴睡也可嬉戏</p>
<p>
从今天开始相识当作别离
时间就似活多一世纪
无论日夜是如何经过
宁愿在<em>极乐</em>当中的我沉迷或放弃
亦无可不可毫无代价唱最幸福的歌
愿我可唯求在某次尽情欢乐过</p>
<p>
时间够了
时针偏偏出了错</p>
<p style="text-align: center;">
<a href="https://www.bilibili.com/video/BV11p4y1n7fq?p=94&spm_id_from=pageDriver " target = "_blank">快捷键2:30</a>
</p>
</body>
</html>
- 总之一行只能有一个div，span倒是一行可以有多个
- 链接：当不加_blank，则在原页面基础上跳转，不会打开新标签页
<a href = "#">空链接，就点不动</a>
<a href = "http://www.baidu.com"><img src = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftupian.qqjay.com%2Fu%2F2018%2F0125%2F1_135434_3.jpg&refer=http%3A%2F%2Ftupian.qqjay.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1638074826&t=36ce37a442d8d2fcc6e1ee99f7be1cc9"/></a>
<!--target : self / blank(在新窗口的打开方式,原来的还在不在), 毕竟超链接嘛，自己加了-->
<!-- 当用了文件夹，同一目录直接写名字，下一级： src = "文件夹名/名字"， 上一级：../文件夹名，反正要让他找到-->
- 大多数时候div代替了table成为了主流
- 关于单元格
<!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>
</head>
<body>
<table>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>姓名</td>
</tr>
<!-- tr只能嵌套td, 但td就像一个容器 -->
<tr>
<td>对应</td>
<td>2</td>
<td>数量必须相同</td>
</tr>
</table>
<table>
<br />
<tr>
<td>姓名</td>
<td>年龄</td>
<td>姓名</td>
</tr>
</table>
<table border = "100" width = "500" height = "10" align="right" cellspacing = "20">
<!-- align右对齐 and ceter left-->
<!-- cellspacing 单元格间距-->
<!-- cellpadding字与边框间距-->
<caption><h3>个人信息</h3></caption>
<!-- 表的小标题，只在这有用 -->
<tr>
<th>姓名</th>
<!-- 加粗居中 -->
<td>年龄</td>
<td>姓名</td>
</tr>
</table>
<table>
<thead>
<tr>
<th colspan="2">The table header</th>
</tr>
</thead>
<tbody>
<tr>
<td>The table body</td>
<td>with two columns</td>
</tr>
</tbody>
</table>
<!-- 竖着的是跨行合并roespan = “合并个数”// colspan -->
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
</table>
<!-- 合并顺序：先上后下 ,删除多余的单元格-->
<table border="2">
<tr>
<td rowspan = "2">row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
</table>
<!-- 合并顺序：先上后下 ,删除多余的单元格-->
<table border="2">
<tr>
<td rowspan = "2">row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<!-- <td>row 2, cell 1</td> -->
<td>row 2, cell 2</td>
</tr>
</table>
</table>
<!-- 合并顺序：先上后下 ,删除多余的单元格-->
<table border="2">
<thead>
<!-- 内部必须要tr -->
<tr>
<td rowspan = "2">row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
</thead>
<!-- 相当于局部选中吧 -->
<tbody>
<tr>
<!-- <td>row 2, cell 1</td> -->
<td>row 2, cell 2</td>
</tr>
</tbody>
<!-- 同理 还有：脚部分 tfoot 结构更清楚了-->
</table>
</body>
</html>
- 在检查网页时，看见被划掉的，就是没起作用被覆盖了的
/* 并集选择器，用逗号隔开，为和的意思 通常用于集体声明
因为这些选择器里面的样式完全相同 任何选择器都可以作为一部分 */
p,
span,
.red {
color: palevioletred;
}
-
p里面不能包含div ，段落p h dt里面尽量不要放块级元素 （h p div ul ol li ）
-
行内元素，高宽设置无效，除了img/input/td
span行内元素，只能容纳文本或其他行内元素，h、dt也是
行内 块 元素高度行高外边距都可以控制 -
行内元素和块元素可通过
display进行转换
<!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>
.nav {
text-align: center;
}
.nav a {
/* 要行内块元素 */
display: inline-block;
width: 120px;
height: 50px;
line-height: 50px;
/* background-color: rgb(235, 137, 177); */
/*
border-style:solid;
border-color:#0000ff rosybrown; */
text-decoration: none;
background: url(../0.png) no-repeat;
color: rgb(187, 108, 180);
}
/* 鼠标经过换 */
.nav a:hover {
background-image: url(/study/62.png);
}
</style>
</head>
<body>
<div class="nav">
<a href="#">网站首页</a>
<a href="#">网站首页</a>
<a href="#">网站首页</a>
<a href="#">网站首页</a>
<a href="#">网站首页</a>
<a href="#">网站首页</a>
</div>
</body>
</html>
扫一扫
2512
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
