定位属性的布局网页html,css布局基础：定位综合练习

主要知识点：

1、5种常用

position:static/relative/absolute/fixed/sticky。

2、除静态定位外，都可以用left/top/bottom/right/z-index属性进行移动。

整体效果图：

效果说明：

1、随着网页向下滚动，当导航到达窗口顶端(top=0)时，固定在顶端。

2、分享模块在屏幕的固定位置显示。

3、banner图是由3部分堆叠组成：底层图片、中层透明遮罩层、顶层文字加按钮。

参考：

导航吸附效果：

nav{ position: sticky; top: 0; z-index: 9999; }

分享模块固定显示：

.share{ position: fixed; left: 100%; margin-left: -100px; bottom: 50px; width: 100px; ...}

3层banner图部分：

html结构部分：

MY BEAUTIFUL LIFE

LOOK MORE >

css效果：

.top{ position: relative; }

.top img{ width: 100%; height: 200px; }

.top div:nth-child(2){

width: 100%;

height: 200px;

background-color: #000000;

opacity: 0.5;

position: absolute; /*最近定位祖先元素为.top*/

top:0;

left: 0;

}

.top div:nth-child(3){

position: absolute;

width: 350px;

height: 80px;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto auto; /*四边都为0，margin为auto，居中*/

text-align: center; /*内容又居中*/

}

本文来自投稿，不代表中国网页设计立场，如若转载，请注明出处：http://www.125jz.com/5538.html

定位属性的布局网页html,css布局基础：定位综合练习相关推荐

HTML+CSS第十课：常见的3种网页布局方式：表格布局、DIV+CSS布局、框架布局
知识点:网页布局的方式 1.网页布局常见的页面布局方式:表格布局.DIV+CSS布局.框架布局. 表格布局:用来显示较多的数据,如OA系统.ERP系统或CRM系统.(一般用在局部) DIV+CSS布 ...
html中表格布局还是div布局,Table布局 VS Div+CSS布局，选哪个？
Table布局和 Div+CSS布局的争论,过了7-8年了,今天看到一篇文章<为什么我们不建议用Table布局>,又想发表下自己的见解,供初学 <为什么我们不建议用Table布局& ...
web第一课模拟淘宝设置静态网页——html+css布局设计
学会使用webstorm 先打开webstorm(注意需要破解)然后注意首次打开之后会出现让你新建一个存放所有文件的目录(如下图所示文件保存在c盘路径为C:\Users\baitianmeng\Web ...
【web前端】pc网页适配移动网页和css布局之间的矛与盾
最近在写一个前端的网站,主要结构是html和css写法,当然还加了部分js内容,但是写完之后发现只写了一种css样式,只能在电脑版网页完整显示,而在手机小屏设备显示格式就乱了,出现只能显示电脑的内容. ...
用html布局怎么调试,网页规划 CSS布局调试的有用办法
网页规划中CSS布局是很重要的部分,下面介绍几种查看调试CSS布局的有用办法. 1. 查看HTML元素是否有拼写过错.是否忘掉完毕符号即使是内行也经常会弄错div的嵌套关系.能够用dreamweav ...
css布局难,运用 CSS布局到底有多难?[多图]
找Bug 篇原始代码,未做修正: 运行代码框首页-牛腩新闻揭晓系统 /* /* * 建立人:牛腩 */ * { /* 把默认值都配置为0 */ margin:0; padding:0; bo ...
微信小程序中布局使用的css布局语法
微信小程序的布局是基于css的布局,可以参考一些学习网站上面的css的基础学习以下是布局的一些语法规则 class 用 .class{} id 用 #id{} 类的子元素添加css (1 ...
关于css加div布局和表格布局,菜鸟学习笔记:表格布局和div+css布局
网页布局可以通过表格和div元素来实现(注:table布局已经淘汰),首先我们来看看table布局表格布局导航推荐文章一个猴子成长史你看个毛线我就瞅你咋地村里出了个半边天一个猴子的成长 ...
css 左右布局高度自适应,CSS布局-高度自适应
前面一篇讲述了有关高度自适应的问题,现在来讨论下用CSS2来实现高度自适应的方式. 单个自适应当且只有个一个div的高度需要自适应时,我们可以使用以下方法,*{padding:0;margin:0; ...

定位属性的布局网页html,css布局基础：定位综合练习

定位属性的布局网页html,css布局基础：定位综合练习相关推荐

最新文章

热门文章