HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第7章定位

简介: HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第7章定位

本教程案例在线演示


有路网PC端

有路网移动端


免费配套视频教程


免费配套视频教程


教程配套源码资源


教程配套源码资源


定位


position属性

static:默认值,没有定位

relative:相对定位

absolute:绝对定位

fixed:固定定位


标准文档流


标准文档流:是指页面上从上到下,从左到右,网页元素一个挨一个的简单的正常的布局方式。

一般在HTML元素分为两种:块级元素和行内元素。像div,p这些的元素属于块级元素,块级元素是从上到下一行一行的排列;默认一个块级元素会占用一行,而跟在后面的元素会另起一行排列;

行内元素是在一行中水平布置,从左到右的排列;span,strong等属于行内元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div style="background-color:dodgerblue">我是块级元素,我单独占一行 我单独占一行 我单独占一行</div>
<div style="background-color:yellow">我是块级元素,我一行一行的排列,我一行一行的排列,我一行一行的排列</div>
<span style="background-color:green">我的行内元素,我水平的排列,我水平的排,我水平的排,我水平的排列,我水平的排列</span>
<span style="background-color:gray">我是行内元素,没有那么霸道,没有那么霸道,没有那么霸道,没有那么霸道,没有那么霸道</span>
</body>
</html>
</body>
</html>


static定位


position:static

元素没有定位,以标准流方式显示


image.png


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>position属性</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="father">
  <div id="first">第一个盒子</div>
  <div id="second">第二个盒子</div>
  <div id="third">第三个盒子</div>
</div>
</body>
</html>

@charset "gb2312";
/* CSS Document */
div {
    width: 300px;
    margin:10px;
    padding:5px;
    font-size:12px;
    line-height:25px;
}
#father {
    width: 500px;
    margin: 50px auto;
    border:1px #666 solid;
    padding:10px;
}
#first {
    background-color:#FC9;
    border:1px #B55A00 dashed;
}
#second {
    background-color:#CCF;
    border:1px #0000A8 dashed;
}
#third {
    background-color:#C5DECC;
    border:1px #395E4F dashed;
}


相对定位


relative属性值

相对自身原来位置进行偏移

偏移设置:top、left、right、bottom可以用left来描述盒子向右移动;

可以用right来描述盒子向左的移动;

可以用top来描述盒子向下的移动;

可以用bottom来描述盒子的向上的移动;

如果是负数就是相反的方向。

相对定位的盒子,不脱离标准流,老家保留位置,其后的元素不能占用其原有位置。

相对定位的主要用途是作为其内部元素绝对定位时的参照标准,有相对于我之义。


image.png


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>position属性</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="father">
  <div id="first">第一个盒子</div>
  <div id="second">第二个盒子</div>
  <div id="third">第三个盒子</div>
</div>
</body>
</html>

@charset "gb2312";
/* CSS Document */
div {
    width: 300px;
    margin:10px;
    padding:5px;
    font-size:12px;
    line-height:25px;
}
#father {
    width: 500px;
    margin: 50px auto;
    border:1px #666 solid;
    padding:10px;
}
#first {
    background-color:#FC9;
    border:1px #B55A00 dashed;
    position:relative;
    top:10px;
    left:50px;
}
#second {
    background-color:#CCF;
    border:1px #0000A8 dashed;
}
#third {
    background-color:#C5DECC;
    border:1px #395E4F dashed;
}


绝对定位


absolute属性值

偏移设置: left、right、top、bottom

使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移。如果没有已经定位的祖先元素,那么会以浏览器窗口为基准进行定位。绝对定位的元素从标准文档流中脱离,其后的元素会占据其原有的位置。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>position属性</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="father">
  <div id="first">第一个盒子</div>
  <div id="second">第二个盒子</div>
  <div id="third">第三个盒子</div>
</div>
</body>
</html>

@charset "gb2312";
/* CSS Document */
div {
    width: 300px;
    margin:10px;
    padding:5px;
    font-size:12px;
    line-height:25px;
}
#father {
    width: 500px;
    margin: 50px auto;
    border:1px #666 solid;
    padding:10px;
}
#first {
    background-color:#FC9;
    border:1px #B55A00 dashed;
    position: absolute;
    top:10px;
    right: 10px;
}
#second {
    background-color:#CCF;
    border:1px #0000A8 dashed;
}
#third {
    background-color:#C5DECC;
    border:1px #395E4F dashed;
}


image.png

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>position属性</title>
<link href="css/style2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="father">
  <div id="first">第一个盒子</div>
  <div id="second">第二个盒子</div>
  <div id="third">第三个盒子</div>
</div>
</body>
</html>

@charset "gb2312";
/* CSS Document */
div {
    width: 300px;
    margin:10px;
    padding:5px;
    font-size:12px;
    line-height:25px;
}
#father {
    width: 500px;
    margin: 50px auto;
    border:1px #666 solid;
    padding:10px;
    position: relative;
}
#first {
    background-color:#FC9;
    border:1px #B55A00 dashed;
    position: absolute;
    top:10px;
    right: 10px;
}
#second {
    background-color:#CCF;
    border:1px #0000A8 dashed;
}
#third {
    background-color:#C5DECC;
    border:1px #395E4F dashed;
}


image.png


练习 微信消息提示


image.png


image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #dot{
            height: 20px;
            width: 20px;
            background-color: red;
            border-radius: 50%;
            line-height: 20px;
            text-align: center;
            font-size: 14px;
            position: absolute;
            top:-10px;
            right: -10px;
        }
        #weixin{
            height: 80px;
            width: 80px;
            font-size: 20px;
            line-height: 80px;
            text-align: center;
            border: 1px solid green;
            position: relative;
        }
    </style>
</head>
<body>
<div id="weixin">微信
    <div id="dot">2</div>
</div>
</body>
</html>


z-index属性


调整元素定位时重叠层的上下位置

z-index属性值:整数,默认值为0

设置了positon属性时,z-index属性可以设置各元素之间的重叠高低关系

z-index值大的层位于其值小的层上方


image.png


网页元素透明度


CSS设置元素透明度

opacity:x

x值为0~1,值越小越透明

opacity:0.4;

filter:alpha(opacity=x)

x值为0~100,值越小越透明

filter:alpha(opacity=40);


练习 香山红叶


image.png

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>z-index属性</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="content">
  <ul>
    <li><img src="image/maple.jpg"  alt="香山红叶" /></li>
    <li class="tipText">京秋魅力&#8226;相约共赏香山红叶</li>
    <li class="tipBg"></li>
    <li>时间:11月16日 星期六 8:30</li>
    <li>地点:朝阳区西大望路珠江帝景K区正门前集合</li>
  </ul>
</div>
</body>
</html>

@charset "gb2312";
/* CSS Document */
ul, li {
    padding:0px;
    margin:0px;
    list-style-type:none;
}
#content {
    width:331px;
    overflow:hidden;
    padding:5px;
    font-size:12px;
    line-height:25px;
    border:1px #999 solid;
}
#content ul {
    position:relative;
}
.tipBg, .tipText {
    position:absolute;
    width:331px;
    height:25px;
    top:100px;
}
.tipText {
    color:#FFF;
    text-align:center;
    z-index:1;
}
.tipBg {
    background:#000;
    opacity:0.5;
    filter:alpha(opacity=50);
}


项目实战 有路网首页轮播图


image.png

lunbo.css

.lunbotu{
  width: 750px;
  position: relative;
}
.lunbotu img{
  width: 750px;
}
.lunbotu ul{
  position: absolute;
  right: 12px;
  bottom: 20px;
}
.lunbotu li{
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: gray;
  text-align: center;
  line-height: 20px;
  color: white;
  border-radius: 50%;
  margin: 0 4px;
}
li:hover{
  background-color: tomato;
}

youlu-lunbo.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="lunbo.css">
</head>
<body>
  <div class="lunbotu">
    <img src="img/lunbo.jpg" alt="">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </div>
</body>
</html>


固定定位


position: fixed;

仿简书网站顶部导航

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .top-nav{
      height: 80px;
      width: 100%;
      background-color: pink;
      position: fixed; 
      top: 0px;
    }
  </style>
</head>
<body style="height: 2000px;">
  <div class="top-nav">顶部导航</div>
</body>
</html>


目录
相关文章
|
23天前
|
前端开发 Java 开发工具
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
67 18
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
|
2天前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
118 89
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
2月前
|
前端开发 JavaScript API
(前端3D模型开发)网页三维CAD中加载和保存STEP模型
本文介绍了如何使用`mxcad3d`库在网页上实现STEP格式三维模型的导入与导出。首先,通过官方教程搭建基本项目环境,了解核心对象如MxCAD3DObject、Mx3dDbDocument等的使用方法。接着,编写了加载和保存STEP模型的具体代码,包括HTML界面设计和TypeScript逻辑实现。最后,通过运行项目验证功能,展示了从模型加载到保存的全过程。此外,`mxcad3d`还支持多种其他格式的三维模型文件操作。
|
17天前
|
Dart 前端开发
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
112 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
7天前
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
64 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
15天前
|
Dart 前端开发 容器
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
61 18
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
4天前
|
Dart 前端开发 Android开发
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
24 4
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
20天前
|
缓存 前端开发 Android开发
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
55 12
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
|
23天前
|
Dart 前端开发 Android开发
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
28 1
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
25天前
|
Dart 前端开发 架构师
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
86 26

热门文章

最新文章