寒假中前端学习归档html/css

最新推荐文章于 2021-06-04 01:54:19 发布

欧阳小百合

最新推荐文章于 2021-06-04 01:54:19 发布

阅读量1.2k

点赞数 3

文章标签： html css

本文链接：https://blog.csdn.net/weixin_45849398/article/details/107229193

版权

寒假中前端学习归档html/css

001blog:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>我&nbsp有&nbsp很&nbsp多&nbsp想&nbsp实&nbsp现&nbsp的&nbsp愿&nbsp望</h1>
		<!--h1~h6为标题标签，加粗，数字越大字号越小；‘&nbsp’代表一个空格-->
		<i>2020.2.12</i>
		<hr>
		<!--单标签hr横隔线/单标签<br>实现<p></p>内换行-->
		<p>我有很多想实现的愿望</p>
		<p>只要<b>努力</b>的话，<br>一定可以<b>成功</b>！</p>
	</body>
</html>

如下效果：

——————————————————————————————

我有很多想实现的愿望

2020.2.12

我有很多想实现的愿望

只要努力的话，
一定可以成功！

——————————————————————————————

002新闻列表：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>科技&nbsp;<img src="../img/boar.jpeg"></h1>
		<hr>
		<ul>
			<!--制表功能，每个li代表一行-->
			<li>
				<a href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=%E6%88%91%E6%83%B3%E7%BB%8F%E6%B5%8E%E7%8B%AC%E7%AB%8B%EF%BC%81&oq=%25E6%2588%2591%25E6%2583%25B3%25E7%25BB%258F%25E6%25B5%258E%25E7%258B%25AC%25E7%25AB%258B&rsv_pq=9a1e151e00333e3e&rsv_t=25f3H7Bp6nwWPG6knm8H3%2FBU5%2F0bo%2FqEvuql6%2BcREGFTttTANWD2dDKBRMo&rqlang=cn&rsv_enter=1&rsv_dl=tb&inputT=536&rsv_sug2=0&rsv_sug4=1098">
				还行！
				</a></li>
			<li>
				<a href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=%E6%88%91%E6%83%B3%E5%AD%A6%E5%BE%88%E5%A4%9A%E5%BE%88%E6%A3%92%E7%9A%84%E4%B8%9C%E8%A5%BF%EF%BC%81&oq=%25E6%2588%2591%25E6%2583%25B3%25E7%25BB%258F%25E6%25B5%258E%25E7%258B%25AC%25E7%25AB%258B!&rsv_pq=9fcbdf5f003440e2&rsv_t=8cedZUA1QUj%2FpDZ4GS7IIJ3PVgWuGs0tor8FbnXijQa439FmCz2KfLfzKhU&rqlang=cn&rsv_enter=1&rsv_dl=tb&inputT=552&rsv_sug2=0&rsv_sug4=1491">
					累死了！
				</a></li>
			<li>
				<a href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=%E6%88%91%E6%83%B3%E8%B5%9A%E9%92%B1%EF%BC%81&oq=%25E6%2588%2591%25E6%2583%25B3%25E5%25AD%25A6%25E5%25BE%2588%25E5%25A4%259A%25E5%25BE%2588%25E6%25A3%2592%25E7%259A%2584%25E4%25B8%259C%25E8%25A5%25BF!&rsv_pq=857e66ce0033ce1f&rsv_t=88dbgPbrYK19Y8RwcFE79bm7aDO0rY0bKHhL66%2FzUXe5TFfQb1Kg8DM51MY&rqlang=cn&rsv_enter=1&rsv_dl=tb&inputT=634&rsv_sug2=0&rsv_sug4=1532">
					我想想！
				</a></li>
			<li>
				<a href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=%E5%B0%B1%E6%98%AF%E8%BF%99%E4%B9%88%E7%9B%B4%E6%8E%A5%EF%BC%81&oq=%25E6%2588%2591%25E6%2583%25B3%25E8%25B5%259A%25E9%2592%25B1!&rsv_pq=f53c9d3100334dfd&rsv_t=4c41gqnIQLM8%2BoVrQL6HZlyuWU7NXNqfudMvtwqnKAd0Hc9rxj4LgLLvLu4&rqlang=cn&rsv_enter=1&rsv_dl=tb&inputT=531&rsv_sug2=0&rsv_sug4=1325">
					OK！
				</a></li>
		</ul>
		<ol>
			<!--制表功能，每个li代表一行-->
			<li>
				<a href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=%E6%88%91%E6%83%B3%E7%BB%8F%E6%B5%8E%E7%8B%AC%E7%AB%8B%EF%BC%81&oq=%25E6%2588%2591%25E6%2583%25B3%25E7%25BB%258F%25E6%25B5%258E%25E7%258B%25AC%25E7%25AB%258B&rsv_pq=9a1e151e00333e3e&rsv_t=25f3H7Bp6nwWPG6knm8H3%2FBU5%2F0bo%2FqEvuql6%2BcREGFTttTANWD2dDKBRMo&rqlang=cn&rsv_enter=1&rsv_dl=tb&inputT=536&rsv_sug2=0&rsv_sug4=1098">
				还行
				</a></li>
			<li>
				<a href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=%E6%88%91%E6%83%B3%E5%AD%A6%E5%BE%88%E5%A4%9A%E5%BE%88%E6%A3%92%E7%9A%84%E4%B8%9C%E8%A5%BF%EF%BC%81&oq=%25E6%2588%2591%25E6%2583%25B3%25E7%25BB%258F%25E6%25B5%258E%25E7%258B%25AC%25E7%25AB%258B!&rsv_pq=9fcbdf5f003440e2&rsv_t=8cedZUA1QUj%2FpDZ4GS7IIJ3PVgWuGs0tor8FbnXijQa439FmCz2KfLfzKhU&rqlang=cn&rsv_enter=1&rsv_dl=tb&inputT=552&rsv_sug2=0&rsv_sug4=1491">
					累死了！
				</a></li>
			<li>
				<a href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=%E6%88%91%E6%83%B3%E8%B5%9A%E9%92%B1%EF%BC%81&oq=%25E6%2588%2591%25E6%2583%25B3%25E5%25AD%25A6%25E5%25BE%2588%25E5%25A4%259A%25E5%25BE%2588%25E6%25A3%2592%25E7%259A%2584%25E4%25B8%259C%25E8%25A5%25BF!&rsv_pq=857e66ce0033ce1f&rsv_t=88dbgPbrYK19Y8RwcFE79bm7aDO0rY0bKHhL66%2FzUXe5TFfQb1Kg8DM51MY&rqlang=cn&rsv_enter=1&rsv_dl=tb&inputT=634&rsv_sug2=0&rsv_sug4=1532">
					我想想！
				</a></li>
			<li>
				<a href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=%E5%B0%B1%E6%98%AF%E8%BF%99%E4%B9%88%E7%9B%B4%E6%8E%A5%EF%BC%81&oq=%25E6%2588%2591%25E6%2583%25B3%25E8%25B5%259A%25E9%2592%25B1!&rsv_pq=f53c9d3100334dfd&rsv_t=4c41gqnIQLM8%2BoVrQL6HZlyuWU7NXNqfudMvtwqnKAd0Hc9rxj4LgLLvLu4&rqlang=cn&rsv_enter=1&rsv_dl=tb&inputT=531&rsv_sug2=0&rsv_sug4=1325">
					OK！
				</a></li>
		</ol>
		<!--ul改ol从普通标签变1234排序标签-->
	</body>
</html>

如下效果：
——————————————————————————————

科技

————————————————————————————————

003图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<img src="image/军训.jpg" width="100px" >
		<img src="image/姑娘.jpg" width="100px">
		<img src="image/幼年.jpeg" width="100px">
		<img src="image/眨眼.jpg" width="100px"> 
	<!--图片在网络上的呈现顺序是从左到右依次排放的-->
    <!--默认底部对齐，空间不足时换行-->
	<!--单独设置width/height等比例缩小；同时设置则拉伸-->
	</body> 
</html>

004绝对地址和相对地址

#绝对路径#

<img src="http://1000phone.com/html5/logo.png">
完整地址时是绝对路径。

#相对路径#

<a hrtf ="pages/articles/xishuo.html">
不完整地址时为相对路径 格式为"one/one.html"
需要以当前页面为参考系（返回上一层用"…/")补完网址

#引用图片#

返回上一层目录用../image;
返回上两层目录用../../image；
src/title/alt
除此之外没什么可说的了

005简单表格

未来规划

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h3><center>沈宁的未来规划</center></h3>
		<table cellpadding="10" frame="box" border="1" cellspacing="1" bgcolor="aquamarine">
			<tr>
				<td align="center" 项目></td>
				<td align="center" 目标></td>
				<td align="center" deadline></td>
			</tr>
			<tr>
				<td>学习前端</td>
				<td>经济独立</td>
				<td>June</td>
			</tr>
			<tr>
				<td>学习acm</td>
				<td>不用苦手代码</td>
				<td>April</td>
			</tr>
		</table>
	</body>
</html>

个人简历：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table  border="1" cellspacing="0">
			<col width="200px">
			<col width="200px">
			<col width="200px">
			<col width="200px">
			<col width="200px">
			<col width="200px">
			<col width="200px">
			<!--设定每列宽度-->
			<!--tr内设置每行的高度-->
			<tr align="center" height="40px">
				<th colspan="7">个人简历</th>
			</tr>
			<tr align="center" height="40px">
				<td>姓名</td>
				<td></td>
				<td>性别</td>
				<td></td>
				<td>年龄</td>
				<td></td>
				<td colspan="2" rowspan="4">照片</td>
			</tr>
			<tr  align="center" height="40px">
				<td>学历</td>
				<td></td>
				<td>籍贯</td>
				<td colspan="3"></td>
			</tr>
			<tr  align="center" height="40px">
				<td>电话</td>
				<td></td>
				<td>政治面貌</td>
				<td colspan="3"></td>
			</tr>
			<tr align="center" height="40px">
				<td>毕业院校</td>
				<td colspan="5"></td>
			</tr>
			<tr align="center" height="40px">
				<td>求职意向</td>
				<td colspan="6"></td>
			</tr>
			
		</table>
	</body>
</html>

横跨的单元格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h4>横跨两列的单元格：</h4>
		<table border="1">
			<tr>
				<th>姓名</th>
				<th colspan="2">电话</th>
				<!--colspan为一个单元格对应第二行的两个单元格-->
				<!--列的合并-->
			</tr>
			<tr>
				<td>Bill Gates</td>
				<td>555 77 854</td>
				<td>555 77 855</td>
			</tr>
		</table>

		<h4>横跨两行的单元格：</h4>
		<table border="1">
			<tr>
				<th>姓名</th>
				<td>Bill Gates</td>
			</tr>
			<tr>
				<th rowspan="2">电话</th>
				<!--rowspan为一个单元格对应第二列的两个单元格-->
				<!--行的合并-->
				<td>555 77 854</td>
			</tr>
			<tr>
				<td>555 77 855</td>
			</tr>
		</table>


	</body>
</html>

效果如下：

横跨两列的单元格：

姓名	电话
Bill Gates	555 77 854	555 77 855

横跨两行的单元格：

姓名	Bill Gates
电话	555 77 854
电话	555 77 855

套娃表格内元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<html>
		
		<body>
		
		<table border="1">
		<tr>
		  <td>
		   <p>这是一个段落。</p>
		   <p>这是另一个段落。</p>
		  </td>
		  <td>这个单元包含一个表格：
		   <table border="1">
		   <tr>
		     <td>A</td>
		     <td>B</td>
		   </tr>
		   <tr>
		     <td>C</td>
		     <td>D</td>
		   </tr>
		   </table>
		  </td>
		</tr>
		<tr>
		  <td>这个单元包含一个列表：
		   <ul>
		    <li>苹果</li>
		    <li>香蕉</li>
		    <li>菠萝</li>
		   </ul>
		  </td>
		  <td>HELLO</td>
		</tr>
		</table>
		
		</body>
		</html>
	</body>
</html>

效果如下：

这是一个段落。

这是另一个段落。

这个单元包含一个表格：

A	B
C	D

这个单元包含一个列表：

苹果
香蕉
菠萝

HELLO

frame框架

<table frame="box">
		  <tr>
		    <th>Month</th>
		    <th>Savings</th>
		  </tr>
		  <tr>
		    <td>January</td>
		    <td>$100</td>
		  </tr>
		</table>
		
		<p>Table with frame="above":</p>
		<table frame="above">
		  <tr>
		    <th>Month</th>
		    <th>Savings</th>
		  </tr>
		  <tr>
		    <td>January</td>
		    <td>$100</td>
		  </tr>
		</table>
		
		<p>Table with frame="below":</p>
		<table frame="below">
		  <tr>
		    <th>Month</th>
		    <th>Savings</th>
		  </tr>
		  <tr>
		    <td>January</td>
		    <td>$100</td>
		  </tr>
		</table>
		
		<p>Table with frame="hsides":</p>
		<table frame="hsides">
		  <tr>
		    <th>Month</th>
		    <th>Savings</th>
		  </tr>
		  <tr>
		    <td>January</td>
		    <td>$100</td>
		  </tr>
		</table>
		
		<p>Table with frame="vsides":</p>
		<table frame="vsides">
		  <tr>
		    <th>Month</th>
		    <th>Savings</th>
		  </tr>
		  <tr>
		    <td>January</td>
		    <td>$100</td>
		  </tr>
		</table>

效果如下：

Month	Savings
January	$100

Month	Savings
January	$100

~~气死我了怎么显示不出区别的？？？~~

相关笔记：*
#官方定义#

<table>标签定义 HTML 表格。
简单的 HTML 表格由 table 元素
以及一个或多个tr、th 或 td元素组成。
tr元素定义表格行；
th 元素定义表头；
把表头所在的单元格<td></td>改成<th></th>（会加粗）
垂直or水平表头均如是。
td 元素定义表格单元。
更复杂的 HTML 表格也可能包括：
caption（标题，居中于表格之上）
colgroup(<colgroup span"n" width=“100px”>)
与n个<col width="100px">等价
thead/tfoot 以及 tbody 元素
浏览器会帮我们自动生成的表格主体部分*

#表格的基本属性#
如下：

<table>
<tr>
<td></td>  <td></td>  <td></td>
</tr>
<tr>
<td></td>  <td></td>  <td></td>
</tr>
……
</table>

……

<table></table>为表格标签；
<tr></tr>代表每一行；
<td></td>代表每个单元格。
给table加上 border属性画表格线。
<table border="数字越大边框越粗" cellspacing="0"></table>
border代表表格线；
不加这个属性或者数字ipx=0均表示无边框。
cellspacing代表单元格间隙
横跨两列的单元格`(colspan/rowspan)
与表格内套表格/列表等见相关html;
规定单元格内空白，美观cellpadding"数字"；
表格内添加背景颜色或者背景图像。
前者：<table bgcolor="color"></table>
后者：<table background=""></table>
<th align="left"> <td align="left">
<td align="right"> <th align="right">
控制表格内左对齐/右对齐。

#frame框架#
具体显示见相关文件frame框架
在table中加入属性frame
"box"=全包围
"above"=仅上面一条线
"below"=仅下面一条线
"hsides"=上下包围
"vsides"=左右包围

#其他#
在<table>后加入<col width="200px">
有几个就代表有多少个列的宽度被改变。
用align修饰单元格可以直接修饰<tr></tr>来表示整行的情况。

#禁止套娃：标签的嵌套#
超链接不能嵌套超链接
P标签不能嵌套P标签
标题标签h1~h6不能互相嵌套

006使用表单：

登陆表单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="www.baidu.com">
		<!--需要一个action地址，否则表单没有意义-->
			<table width="600px" border="1px" cellspacing="0">
				<tbody>
					<tr height="40px">
						<td rowspan="4" align="center">总体信息</td>
						<td colspan="2"></td>
					</tr>
					<tr height="40px">
					
						<td align="center">用户名：</td>
						<td colspan="2">
							<input type="text" name="loginname">
						</td>
					</tr>
                    <tr height="40px">
						
						<td align="center">密码：</td>
						<td colspan="2">
							<input type="password" name="PWD">
						</td>
					</tr>
					<tr height="40px">
						<td colspan="2" align="center">
							<input type="submit" value="提交">
							<input type="reset" value="重置">
						</td>
					</tr>



				</tbody>

			</table>



		</form>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="http://www.baidu.com" method="get">
			<p>
				<input type="text" name="login">
			</p>
			<p>
				<input type="password" name="pass">
			</p>
			<p>
				<input type="submit" value="提交">
			</p>
		</form>
	</body>
</html>


<!--地址栏上携带数据就是典型的get-->

post

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="http://www.baidu.com" method="post">
			<p>
				<input type="text" name="login">
			</p>
			<p>
				<input type="password" name="pass">
			</p>
			<p>
				<input type="submit" value="提交">
			</p>
		</form>
	</body>
</html>
<!--出现error数据被用隐蔽方式提交了，地址栏看不见-->

表单属性补充：

相关笔记
#使用表单提交数据#
服务器收取数据传到客户端，客户端将数据提交给服务器.
提交给服务器的数据用表单。
表单需要被包裹在的标签里。

input:

文本框 (type="text")
密码 (type="password")
文件选择框 （type="filr")
按钮 (type="button")
单选框 (type="radio")
复选框 (type="checkbox")
重置 （type="reset" value="重置"）
提交 （type="submit" value="提交"）

#注意事项#
form必须有action属性，表示提交地址。
所有需要提交的数据，input必须有name属性。
input按钮的文字用value显示。
input在<form></form>内才能生效。

#表单和服务器通讯的方式#
客户端与服务器通讯时，获取/提交。

键入-客户端发送请求-服务器发回数据；
请求的最终目的是获取数据，携带信息表达要求。
发表文章，上传视频图片，注册账号；
不需要服务器返回什么，只是单纯提交数据。
get请求/post请求

get请求:
<form method="get"></form>
数据（小容量）被提交，在地址栏可见，用户可见。
如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。
当您使用 GET 时，表单数据在页面地址栏中是可见的：
表示获取数据

post请求:
<form method="post"></form>
数据被用隐蔽的方式提交，地址栏看不见，用户不可见。
如果表单正在更新数据 ，包含敏感信息（例如密码） 。
POST 的安全性更好，因为页面地址栏中被提交的数据是不可见的。
post可以提交大量数据而get不行
表示提交数据

两种提交方式可以混用，但不建议混用
注册账号，提交请求不多，用get是没问题的。
但是提交文章/图片/视频，数据量太大，不能用get。

#其他细节#

单选按钮

<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>

其中的checked是代表默认选择；

文本输入

<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

name表示传输时必须有的，与数据捆绑的东西。
如果要正确地被提交，每个输入字段必须设置一个name 属性。
value则为文本框中默认输入。

action
每个表单都必须要有action，因为表单的目的是提交，将会被提交到action后的网址，若省略则默认为当前页面。
methed
代表提交表单时用的http方法

#用<fieldset>组合表单数据#

<form action="action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit"></fieldset>
</form>

<legend>元素为<fieldset>元素定义标题。

007认识CSS

表单的修饰

	<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="www.baidu.com">
		<!--需要一个action地址，否则表单没有意义-->
			<table width="600px" border="1px" cellspacing="0">
				<tbody>
					<tr height="40px">
						<td rowspan="4" align="center" style="color:red;">总体信息</td>
						<td colspan="2"></td>
					</tr>
					<tr height="40px">
					
						<td align="center">用户名：</td>
						<td colspan="2">
							<input type="text" name="loginname">
						</td>
					</tr>
                    <tr height="40px">
						
						<td align="center">密码：</td>
						<td colspan="2">
							<input type="password" name="PWD">
						</td>
					</tr>
					<tr height="40px">
						<td colspan="2" align="center">
							<input type="submit" value="提交" style="width=80px;height=30px;background-color: darkseagreen;">
							<input type="reset" value="重置"style="width=80px;height=30px;background-color: darkseagreen;">
						</td>
					</tr>



				</tbody>

			</table>



		</form>
	</body>
</html>

文字的修饰

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div style="color: grey;margin:auto;width=500px;">
	<!--通用容器可包裹任何内容，甚至能嵌套容器-->
		<p style="text-align: center;">
			<span style="color:white;font-size: 24px;background-color: grey;">
			沙海节选
			</span>
			<!--给P标签加background-color会有一整行有色-->
			<!--需要引入span,本身不具备特殊功能，作为容器包裹文本增加样式-->
		</p>
		<p>
	    <span style="color:darkcyan;">“你还是先听坏消息吧。”</span>
		<b>梁湾</b>
		道：
		<span>
		“刚才那个吴老板好像他还不知道你已经转医生了，派人送了东西到我这里，我把东西给你拿过来了。”
		</span>
		</p>
		<p>
		黎簇看了看那串香蕉：“就是这个？”
		</p>
		<p>
	   “不是。”梁湾从包里掏出一个信封：“你拿去看吧。”
		</p>
		</div>
	</body>
</html>

页面布局

<!DOCTYPE html>
<html style="background-color: grey;">
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				
			}
			html{
				
			}
			#boar{
				
			}
			#navigation{
				
			}
			#bottom{
				
			}
		</style>
	</head>
	<body style="margin: 0;">
		<!--body默认与页面有缝隙，添加margin属性后去掉-->
		<div id="boar" >
			<img src="../004绝对与相对地址/image/boar.jpeg" style="width: 100%;">
		</div>
		<div id="navigation" style="height: 80px;line-height: 80px;text-align: center;background-color: white;">
			<a href="#" style="text-decoration: none;color: black;margin: 0 15px;">首页</a>
			<a href="#" style="text-decoration: none;color: black;margin: 0 15px;">关于秘书处</a>
			<a href="#" style="text-decoration: none;color: black;margin: 0 15px;">boar农产品批发</a>
			<a href="#" style="text-decoration: none;color: black;margin: 0 15px;">酒瓶捡破烂中心</a>
			<a href="#" style="text-decoration: none;color: black;margin: 0 15px;">lbb会所</a>
		</div>
		<div id="bottom" style="height: 40px;line-height: 40px;text-align: center;font-size: 14px;color=grey;">
		<p>版权所有：欧阳小百合股份公司</p>	
		</div>
		
	</body>
</html>

样式表层

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#navigation{
				text-align: center;
			}
			.item1{
				text-decoration: none;
				color: #000000;
				<!--超链接自带下划线-->
			}
			.item2{
				text-decoration: none;
			     color:black;
				 border-right: solid 1px #000000;
				 padding: 0 15px;
			     
			}
		</style>
	</head>
	<body>
		<div id="navigation">
			<p>方法一：添加span标签内置“|”</p>
			<a href="#" class="item">首页</a>
			<span>|</span>
			<a href="#" class="item">办公家居</a>
			<span>|</span>
			<a href="#" class="item">数码科技</a>
			<span>|</span>
			<a href="#" class="item">母婴</a>
			<span>|</span>
			<a href="#" class="item">团购</a>
			<span>|</span>
			<a href="#" class="item">秒杀活动</a>
			<span>|</span>
		</div>
		<div id="navigation">
			<p>方法二：添加边框增加宽度使之接壤，再只留下右边框</p>
			<p>因为最后一个标签不应该有右边框，单独添加行内样式表优先级更高</p>
			<a href="#" class="item2">首页</a>
			<a href="#" class="item2">办公家居</a>
			<a href="#" class="item2">数码科技</a>
			<a href="#" class="item2">母婴</a>
			<a href="#" class="item2">团购</a>
			<a href="#" class="item2" style="border: none;">秒杀活动</a>
		</div>
		
	</body>
</html>

CSS 文本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style tylie="text/css">
			.p1{color:red;}  /*文字颜色*/
			.p2{font-family:"仿宋";}/*字体样式*/
			.p3{font-size: 26px;}/*文字大小*/
			.p4{font-weight: bold;}/*文字加粗*/
			.p5{font-style: italic;}/*文字倾斜*/
			.p6{text-indent: 60px;}/*首行缩进*/
			.p7{text-align: center;}/*水平对齐方式*/
			.p8{line-height: 100px;}/*行高*/
			.p9{background-color: gray;line-height: 100px;}/*垂直居中*/
			.p10{text-decoration: underline;}/*文本修饰*/
		</style>
	</head>
	<body>
		<ul>
			<li class="p1">我好难啊，晚上九点要打codeforces希望一切顺利</li>
			<li class="p2">我好想和有钱的美少女谈恋爱啊</li>
			<li class="p3">我可以的，反正也不打游戏，没有什么娱乐，不如好好学学</li>
			<li class="p4">都没东西打了，这要我怎么凑到九行，爷爷吐了</li>
			<li class="p5">好烦哦。</li>
			<li class="p6">还想好好了解一下后端，搞啊搞不灵清</li>
			<li class="p7">我会成为很棒的人的</li>
			<li class="p8">git系列三个产品也很实用，会去好好了解一下的</li>
			<li class="p9">加油加油加油加油我冲了</li>
			<li class="p10">靠是十行不是九行</li>
		</ul>
		
	</body>
</html>

背景图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			html,body{
				margin=0;
				height=100%;
			}
			body{
				background-repeat: no-repeat;
				background-image: url(../004绝对与相对地址/image/boar2.jpg);
			}
		</style>
	</head>
	<body>
		
	</body>
</html>

元素浮动布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.green{
				width:100px;
				height:100px;
				background-color:green;
				float:left;
				
			}
			.red{
				width:200px;
				height: 200px;
				background-color: red;
			}
			.a{
				width:300px;
				background-color: green;
			}
			.b{
				width:700px;
				background-color: red;
			}
			.c{
				width:300px;
				background-color: blue;
			}
			
			.a,.b,.c{
				height:200px;
				float: right;	
			}
			
		</style>
	
	</head>
	<body>
		<p>文字环绕效果</p>
		<div class="green"></div>
		<div class="red"></div>
		<div>横向排版布局</div>
		<div class="a"></div>
		<div class="b"></div>
		<div class="c"></div>
	</body>
</html>

+元素的浮动布局2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.a{
				width:300px;
				background-color: green;
			}
			.b{
				width:700px;
				background-color: red;
			}
			.c{
				width:300px;
				background-color: blue;
			}
			
			.a,.b,.c{
				height:200px;
				float: right;	
			}
		</style>
	</head>
	<body>
		<p>横向排版布局</p>
		<div class="a"></div>
		<div class="b"></div>
		<div class="c"></div>
		<div class="d"></div>
	</body>
</html>

盒子模型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				/*将所有元素边距设置为0*/
			}

			.item {
				float: left;
				margin: 20px;
				border: 5px solid black;
				/*设置边框：宽度 样式 颜色；*/
				padding: 15px;
				/*填充*/
			}

			#box {
				overflow: auto;
				/*设置宽度，不然默认100%无法居中*/
				width: 750px;
				margin: auto;
				/*自动设置边距会自动对称（使左右两边边距一样）*/
			}
			
		</style>
	</head>
	<body>
		<div id="box">
			<div class="item">
				<img src="../004绝对与相对地址/image/boar.jpeg">
				<p>测试文字内容</p>
			</div>
			<div class="item">
				<img src="../004绝对与相对地址/image/boar2.jpg">
				<p>测试文字内容</p>
			</div>
			<div class="item">
				<img src="../004绝对与相对地址/image/boar3.jpg">
				<p>测试文字内容</p>
			</div>
		</div>
	</body>
</html>

盒子模型2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin:0;/*将所有元素边距设置为0*/
			}
			.item{
				width:210px;
				height:130px;
				float:left;
				margin:20px;
				
			}
			#box{
				overflow: auto;
				/*设置宽度，不然默认100%无法居中*/
				width:750px;
				margin: auto;
				/*自动设置边距会自动对称（使左右两边边距一样）*/
				
			}
			
			
		</style>
	</head>
	<body>
		<div id="box">
		<div class="item" style="background: url(../004绝对与相对地址/image/boar2.jpg);"></div>
		<div class="item" style="background:url(../004绝对与相对地址/image/boar3.jpg)"></div>
		<div class="item" style="background: url(../004绝对与相对地址/image/boar.jpeg);"></div>
		</div>
	</body>
</html>

相关笔记

#CSS简述#

文字大小style="font-size：24px;"
文字颜色style="color:chosen;"
背景颜色style="background-color:chosen;"
图片/按钮大小style="width:30px;height=40px;"
边框、阴影
标签文字的基本框架，修饰网页样式的语法叫层叠样式表
简称CSS

#div/span的应用#
text-align:center 让内部元素水平居中；
margin:auto 让容器（元素）本身居中；
background-color:grey 设定背景颜色
font-size： 设定字体大小
color:white 设定文字颜色

div 通用容器可包裹任何内容，甚至能嵌套容器
默认width=100%,height=0%,除非添加内容把它撑开。
span有时候若给P标签加background-color会有一整行有色。
需要引入span,本身不具备特殊功能，作为容器包裹文本增加样式。

#页面与选择器#

行的样式

<div id="navigation" style="height: 80px;line-height: 80px;text-align: center;background-color: white;">
			<a href="#" style="text-decoration: none;color: black;margin: 0 15px;">首页</a>
			<a href="#" style="text-decoration: none;color: black;margin: 0 15px;">关于秘书处</a>
			<a href="#" style="text-decoration: none;color: black;margin: 0 15px;">boar农产品批发</a>
			<a href="#" style="text-decoration: none;color: black;margin: 0 15px;">酒瓶捡破烂中心</a>
			<a href="#" style="text-decoration: none;color: black;margin: 0 15px;">lbb会所</a>
</div>

--------------------------------等效于-------------------------------------------

内部样式
简化作用显著！

<style>
a{
	text-decoration:none;
	color:black;
	margin:0 15px;	
}
</style>

<a href="#">首页</a>
<a href="#">关于秘书处</a>
<a href="#">boar农产品批发</a>
<a href="#">酒瓶捡破烂中心</a>
<a href="#">lbb会所</a>

首页
 关于秘书处
 boar农产品批发
 酒瓶捡破烂中心
 lbb会所

那个a就是选择器
分为ID选择器与标签选择器和类别选择器还有通用选择器

id选择表示身份,不允许重复，只接受单个元素；
标签选择则可以根据标签名称选择对应的所有标签。
如a{}/img{}/div{};
类别选择拥有该类别的多个元素。如含clss=“xxx”,则写为.xxx{}
通用选择针对页面上所有元素生效。语法为 *{属性}
body/html等都可以在head中用style/选择器进行内部样式；
如果有多个<div>添加id属性
——选择器使用“#id”来使用
如果有多个超链接，添加class(类别)
——选择器用".class"来使用
如果有多张图片，添加class或者找到对应div使用#id img

#样式表的层叠#
行内样式优先级大于内部样式。
有优先级关系，所以得名*“层叠样式表”*

#选择器的权重#
行内样式优先生效 <...style="##"> 权重值为1000
id选择器次之优先 #box{...}； 权重值为100
类别选择器再次之 .item{...}； 权重值为10
再然后标签选择器 div{...} 权重值为1
通用选择器优先级最弱 *{...} 权重值为0

当样式发生冲突时通过计算权重值判定生效。
选择器选择的范围越小越精确，优先级越高
#box p .tt(意思是id=box下的p标签下面的tt类别)
权重值=100+10+1=111
#box .tt（意思是id=box下的tt类别）
权重值=100+10=110（权重值低于前者）

#CSS文本属性#

颜色color:#;
字体font-family:宋体,sans-serif;
行高line-height:#;(自动设置行高并垂直居中)/height:#;（位于最上方）
大小font-size:9pt; x-large;(特大) xx-small;(极小)
加粗font-weight:#;
bold;(粗体)/lighter;(细体)/normal;(正常)
倾斜font-style:#;
oblique;(偏斜体)/italic;(斜体)/normal;(正常)
首行缩进text-indent:#;
水平对齐text-align:#;
left(文字左对齐)/center(文字居中对齐)/justify(文字分散对齐)
文字修饰text-decoration:#;
小字体font-variant:#;
small-caps;(小型大写字母)/normal;(正常)
字间距离letter-spacing : 1pt;
下标字vertical-align:sub;
上标字vertical-align:super;
文字修饰text-decoration:#;
underline(下划线)/overline(上划线)/line-through(删除线)/blink(闪烁）
英文字符处理text-transform :#;
capitalize;(首字母大写)/uppercase;(英文大写)/lowercase;(英文小写)/none;(无)
垂直对齐vertical-align:#；

针对元素（图片/表格）
top垂直向上对齐/bottom垂直向下对齐/middle垂直居中对齐
针对文本（文字/段落）
text-top文字垂直向上对齐/text-bottom文字垂直向下对齐

#图片格式特点及区别#
图片存储通过三原色混合RGB值
jpg/gif/png为压缩格式，数据量较小，统一粗略处理数据。

GIF支持动画，只有全透明/不透明两种模式，只有256种颜色
JPG采用有损压缩算法，体积较小，不支持透明也不支持动画。
PNG采用无损压缩算法，体积相对较小，支持背景透明，不支持动画。
SVG记录数据情况，本质根据放大/缩小是重新绘制。由于保存颜色形状相对简单的内容。

div默认情况下是透明的。
默认以平铺形式的，设置背景图片会用div的大小对图片进行剪裁。

去除平铺用no-repeat处理

background-repeat: no-repeat;
background-position:right bottom;
(第一个元素为水平位置，第二个为垂直位置)

#元素的浮动布局#
浮动元素脱离网页文档，和其他元素重叠，但不会覆盖文字。
可以做文字环绕效果与横向排列;
float:left/float:right;(左上/右上)；
但此时的横向排列，浮动在上方，后来的元素会被遮盖。
防止元素浮动带来影响

div外层增加父元素class，再为其设定高度（子元素本身浮动无法撑开）。
给父元素加属性overflow:auto
clear:left/right/both
希望当前元素不受（左/右/左与右）浮动影响时加。

#浮动元素#
浮动元素的排列只参考前一个元素。
左浮动换右浮动，为对称过去而非折叠（1/2/3……变成……3/2/1）
浮动元素不会覆盖文字内容也不会覆盖图片内容也不会覆盖表单元素（按钮文本框……）。

#盒子布局#
给元素设置边距，使元素间不会紧贴。
margin设置边距；
想要整体居中设置父元素块。
margin-top/margin-bottom;上下边距
margin-right/margin-left;左右边距
填充
被称为内边距，给一个元素内部增加空间。会改变元素大小。
盒子
从里到外：边距/边框/填充/内容

#CSS属性简写#

背景background
background-color/image/repeat(背景色/背景图片/背景图片填充方式)
background:背景色背景图片平铺方式；
边框border
border-width/style/color(边框宽度/样式/颜色)
border:1px solid black;（只有颜色可以省略，因为默认黑色）
字体font
font-style/weight/family/size/height
(斜体/加粗/字体种类/字号/行高)
font:italic(斜体) bold（加粗）20px(字号)/35px(行高)
arial,sans-serif(前者默认字体，逗号后备用字体可多个)；
外边距margin
margin-top/right/bottom/left;
顺序也为上右下左（顺时针）；
写三个：上左右下；
写两个：上下左右；
写一个：上下左右；
内边距padding
参考外边距；

欧阳小百合

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
寒假中前端学习归档html/css

寒假中前端学习归档html/css001blog:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h1>我&nbsp有&nbsp很&nbsp多&nbsp想&nbsp实&nbsp现&nbsp的&nb
复制链接

扫一扫