web前端20200310学习笔记

最新推荐文章于 2024-05-04 16:34:07 发布

--believe

最新推荐文章于 2024-05-04 16:34:07 发布

阅读量134

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/qq_44850917/article/details/104786633

版权

前端学习专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1.网页布局总结

一个完整的网页，有标准流，浮动，定位一起完成布局的，每个都有自己的专门用法

标准流
可以让盒子上下排列或者左右排列的
浮动
可以让多个块级元素一行显示或者左右对齐盒子浮动的盒子就是按照顺序左右排列
定位
定位最大的特点就是有层叠的概念，可以让多个盒子前后叠压来显示，但是每个盒子需要测量数值

2.display显示（重点）

display设置或检索对象是否及如何显示。
display:none 隐藏对象
display:block除了转换为块级元素之外，同时还有显示元素的意思
特点，隐藏之后不再保留位置
举例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.damao{
			/*隐藏元素*/
			/*display: none;*/
			/*1.先隐藏元素*/
			/*2.不保留位置*/
			display: block;
			width: 200px;
			height: 200px;
			background-color: pink;
		}
		.ermao{
			width: 250px;
			height: 250px;
			background-color: purple;
		}
	</style>
</head>
<body>
	<div class="damao"></div>
	<div class="ermao"></div>
</body>
</html>

2.1 visibility可见性

设置或检索是否显示对象
visibility：visible|hidden
特点：隐藏之后，继续保留原有的位置。

在这里插入图片描述

2.2 溢出（重点）

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

在这里插入图片描述

3.综合案例仿照土豆视频效果

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.box{
			position: relative;
			width: 222px;
			height: 220px;
			margin:auto;

		}
		.mask{
			display: none;
			position: absolute;
			top:0;
			left:0;
			width: 222px;
			height: 220px;
			/*margin: 100px auto;*/
			/*background-color: pink;*/
			background: rgba(0,0,0, .3) url(imgs/arr.png) no-repeat center center;
		}
		/*当我们鼠标经过的时候，a里面的mask显示出来*/
		.box a:hover .mask{
			display: block;
		}

	</style>
</head>
<body>
<div class="box">
<a href="#">
<div class="mask"></div>
<img src="imgs/3.jpg" alt="">
</a>



</div>
	
</body>
</html>

运行结果：

在这里插入图片描述

4.CSS用户界面样式

所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验

更改用户的鼠标样式（滚动条因为兼容性非常差我们不研究）
表单轮廓等
防止表单域拖拽

4.1鼠标样式cursor

设置或检索在对象上移动的鼠标指针采用何种系统的光标形式

在这里插入图片描述
举例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>1</title>
	<style>
		li{
			font-size: 40px;
		}
	</style>
</head>
<body>
	<ul>
		<li style="cursor:default;">默认的</li>
		<li style="cursor:pointer;">小手</li>
		<li style="cursor: move;">移动</li>
		<li style="cursor:text ">文本</li>
		<li style="cursor:not-allowed; ">禁止</li>
	</ul>
</body>
</html>

4.2轮廓线outline

是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用 我们一般都是去掉的，最直接的写法是：outline:0;或者outline：none;

举例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		input{
			/*去掉轮廓线*/
			outline: none;
		}
	</style>
</head>
<body>
	<input type="text">
</body>
</html>
``







<h2>4.3防止拖拽文本域resize</h2>
实际开发中，我们文本域右下角是不可以拖拽的

<strong>举例：</strong>


```css
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>	
		textarea{
			/*取消轮廓线*/
			outline: none;
			width: 500px;
			height: 250px;
			border:1px solid blue;
			/*防止用户拖拽文本域*/
			resize: none;
		}
	</style>
</head>
<body>
	<textarea name="" id="" cols="30" rows="10">请留言</textarea>
</body>
</html>

--believe

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端20200310学习笔记

1.网页布局总结一个完整的网页，有标准流，浮动，定位一起完成布局的，每个都有自己的专门用法标准流可以让盒子上下排列或者左右排列的浮动可以让多个块级元素一行显示或者左右对齐盒子浮动的盒子就是按照顺序左右排列定位定位最大的特点就是有层叠的概念，可以让多个盒子前后叠压来显示，但是每个盒子需要测量数值 2.display显示（重点） display设置或检...
复制链接

扫一扫

专栏目录