【慕课网】前端零基础入门---步骤二：页面化妆师CSS---06-CSS定位（position）

最新推荐文章于 2020-02-13 20:03:19 发布
最新推荐文章于 2020-02-13 20:03:19 发布
阅读量248 收藏 1
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43405634/article/details/104180619
版权

06-CSS定位（position）

第1章 position属性

1-1 position-static

在这里插入图片描述

1-2 position-relative

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		.blue{
			width: 100px;
			height: 100px;
			background: blue;
			position: relative;
			top: 50px;
			left: 50px;
		}
		.red{
			width: 100px;
			height: 100px;
			background: red;
		}
	</style>
</head>
<body>
	<div class="blue"></div>
	<div class="red"></div>
</body>
</html>
1-3 position-absolute(实际工作用的最多，同时也相对比较难)


在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<style type="text/css">
		.per{
			width: 300px;
			height: 300px;
			background: red;
			margin-left: 200px;
			margin-top: 200px;
		}
		.son{
			width: 100px;
			height: 100px;
			background: blue;
			position: relative;
			top: 100px;
			left: 100px;
		}
	</style>
</head>
<body>
	<div class="per">
		<div class="son"></div>
	</div>
</body>
</html>
1-4 position-fixed

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.test{
			width: 800px;
			height: 100px;
			background: red;
			position: fixed;
			margin-left: -400px;
			top: 0;
			left: 50%;
		}
		.out{
			width: 100%;
			height: 2000px;
			background: #abcdef;
		}
	</style>
</head>
<body>
	<div class="out">
		<div class="test"></div>
	</div>
</body>
</html>
1-5 position-sticky(了解即可)

在这里插入图片描述

第2章 实际应用

在这里插入图片描述
效果图：
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<title>3</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.page{
			width: 1400px;
			height: 800px;
			background: url(http://climg.mukewang.com/59c9f7ce0001839219034033.png) no-repeat center top;
		}
		.left{
			width: 210px;
			height: 250px;
			background: url(http://climg.mukewang.com/5a3383d00001a3dd02240364.png) no-repeat center top;
			position: fixed;
			left: 0;
			top: 50%;
			margin-top: -105px;
		}
		.right{
			width: 210px;
			height: 250px;
			background: url(http://climg.mukewang.com/5a3383c70001f1b702240364.png) no-repeat center top;
			position: fixed;
			right: 0;
			top: 50%;
			margin-top: -105px;
		}
	</style>
</head>
<body>
	<div class="page">
		<div class="left"></div>
		<div class="right"></div>
	</div>
</body>
</html>
dqh_zsh
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
nextjs-tailwindcss-typescript-starter:NextJS、TailwindCSS 和 Typescript 入门模板
05-30
Next.js TailwindCSS 打字稿入门这是 10.0、 2.0 和 4.0 入门模板有关更多详细信息，请参阅我的博客文章。如何使用这个模板以下是使用此模板创建新项目的几种方法。使用create-next-app 使用从模板创建一个新的 next...
hugo-theme-tailwindcss-starter:带有Tailwindcss的Hugo主题的入门文件
05-01
雨果入门主题与Tailwind CSS 带有Tailwind CSS的Hugo主题的入门文件。 设置为使用 -v2.0 + 包括插件，用于标记降价内容 使用根据dev或build环境构建和加载CSS ...请确保在您的环境中全局安装postcss-cli和autoprefix
慕课网CSS
菜鸟大佬的博客
06-01 194
CSS：层叠样式表 p { font-size:12px; color:red; font-weight:bold; } CSS样式的三种方法 1.内联式：直接写在现有的HTML标签中 2.嵌入式：写在当前的文件中 3.外部式：写在单独的一个文件中 style.css span { color:red; } 类型选择器： 这是HTML: <p>...
编程练习
diaoyajin9674的博客
04-30 107
一 、水仙花 二、鸡兔同笼 三、求100以内的质数（除了1和本身,不能被其他的数整除） 转载于:https://www.cnblogs.com/wuy401120html/p/8974096.html
慕课网跟练系列——圣杯布局
qq_42969437的博客
08-22 172
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;meta name=&quot;viewport&quot; conten
Web-前端html+css从入门到精通 135. transition过渡基础语法.zip
05-23
在Web前端开发中，HTML和CSS是构建网页的基础。CSS（层叠样式表）赋予了网页样式和布局，而HTML（超文本标记语言）则负责结构化内容。本主题聚焦于CSS中的一个重要特性——`transition`，即过渡效果，它是创建平滑...
Web-前端html+css从入门到精通 142. animation动画基础语法.zip
05-23
animation动画基础语法"着重讲解了如何使用CSS3的`@keyframes`规则以及`animation`属性来创建丰富的网页动画。 首先，我们了解`@keyframes`规则，它是定义动画的关键帧。`@keyframes`的名字是你自定义的，它由...
CSS 同级元素position:fixed和margin-top共同使用的问题
09-22
主要介绍了CSS 同级元素position:fixed和margin-top共同使用的问题的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
慕课网3-10编程练习：简单的flex布局
weixin_34203426的博客
05-31 128
小伙伴们，我们学习了伸缩容器的一些属性，接下来使用我们所学的伸缩容器属性完成下面的效果图。 完成效果： 任务 1、先将容器设置为伸缩容器 2、在垂直方向上对齐，行与行之间的空白距离一样 3、在水平方向上对齐，第一个和最后一个项目位于容器的最左边和最右边 <!DOCTYPE html> <html> <head lang="zh-CN"&gt...
前端开发基础：这些网页布局方法你都知道吗？
张飞鹏的博客
03-27 240
最近很多小伙伴在学习基础布局的时候很纠结布局方法，那么就要就来给大家总结几个常用的页面架构布局方案，看完可以随收收藏起来，以后都能用到 今天讲解的布局大致可以分成两种布局，分别是居中布局和多列布局。这两种布局又有好几种小布局方案，一起来看看吧！ 居中布局 a.水平居中 b.垂直居中 c.水平垂直 多列布局 a.自适应布局 b.等宽布局 c.等高布局 居中布局 HTML代码 水平居中 在水平居中里...
1-16作业
art8886565的博客
01-17 89
《第 04 讲:一维数组》 1. (*)先调试,调试成功后抄写下列程序: #include <stdio.h> #define SIZE 10 int main(int argc, char *argv[]) { int a[SIZE] = {0},i= 0; for(i = 0; i < SIZE; i++){ a[i] = i+10...
作业10-16
Victor的BLOG
10-16 187
1.求1到20的阶乘之和； #include   int main()     {       int i,s=0,p=1;       for(i=1;i         {p*=i;             s+=p;           }     printf("sum=%d\n",s);   return 0;   } 结果为：sum=268040729 2
【慕课网】前端零基础入门---步骤三：页面升级结构HTML5---02-HTML5属性变化
qq_43405634的博客
02-13 391
01-HTML5标签变化 第1章 HTML5简介 第2章 DOCTYPE声明 2-1 doctype 2-2 DTD 第3章 HTML5新增标签 2-1 结构标签 2-2 结构标签简单使用 2-3 结构标签使用补充 2-4 audio 2-5 video 2-6 embed 2-7 多媒体标签的意义 2-8 状态标签 2-9 列表标签 2-10 注释标签 2-11 其他标签 第4章 HTML5删...
前端零基础入门：页面结构层HTML
程序员哆啦A梦，蓝胖子
11-11 894
HTML页面结构层HTML分以下方面学习：HTML基础，HTML表格，HTML表单，搭建网页结构 html基础 学习前端的第一门课程，为HTML基础，HTML标记语言，它是网页制作的第一步。 学习内容：HTML概念，了解HTML发展史，基础语法，常用标签（段落，图片，链接等）结合小例子 什么是HTMLHTML（Hypertext Markup Language）即超文本标记语言 html发...
零基础学编程-CSS
风萧萧兮易水寒，壮士一去兮不复还
07-25 310
现已推出零基础学编程系列的第二部分内容：CSS视频教程，该视频介绍了常用的CSS的入门基础知识，包括选择器、背景、文本、字体、列表、表格、定位、伪元素、导航栏、下拉菜单、Tooltip提示工具、图片拼合技术等等。总时长为760‬分钟，总大小为3.47G，共73节，包括如下内容： CSS是什么 CSS规则和注释 CSS颜色值的写法 选择器的分组 派生选择器 ID选择器 Class选择器...
基础学习5 浮动
aZF1997的博客
08-01 177
背景: background: #000 url(“ ”) no-repeat xpx ypx /10% 20% / center center top left / 10% 20% 指的是背景盒子的宽度-图片的宽度的10% background-position: xpx ypx /10% 20% / center center top left ; back...
浏览器对象练习（慕课网题目）
weixin_30611509的博客
09-09 106
编程练习 制作一个跳转提示页面： 要求： 1. 如果打开该页面后，如果不做任何操作则5秒后自动跳转到一个新的地址，如慕课网主页。 2. 如果点击“返回”按钮则返回前一个页面。 效果: 注意: 在窗口中运行该程序时，该窗口一定要有历史浏览记录，否则"返回"无效果。 我的解答 <!DOCTYPE html> <html lang="en"> ...
第讲-css动态网站制作优秀文档.ppt
最新发布
11-14
第讲-css动态网站制作优秀文档.ppt

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值