天星数科首页CSS布局回顾

主要使用的CSS技术

吸顶定位
两端对齐
绝对定位相对定位
固定定位
弹性布局
背景定位
高级选择器

实现效果

吸顶定位

使用吸顶定位将header 标签固定在页面的顶部不随滚动条移动

position: sticky;top: 0;

 header {position: sticky;height: 76px;top: 0;right: 0;background-color: white;z-index: 1;}

两端对齐

使用浮动将logo与nav在header中两端对齐

float: left;float: right;

 .logo {background: url("img/logo.8e6b0dc.png") no-repeat;background-size: contain;width: 140px;height: 50px;float: left;margin-top: 13px;}.nav {float: right;}

父相子绝定位

给与父元素banner 相对定位给与子元素 text绝对定位将子元素固定于父元素中心位置。

父 position: relative;子  position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;

 .banner {background: url("https://cdn.cnbj1.fds.api.mi-img.com/mifi-web/img/top-banner.3daf51a.png") no-repeat;width: 1000px;height: 445px;background-size: cover;float: left;position: relative;}.text {width: 690px;height: 150px;color: white;font-size: 54px;font-weight: bold;letter-spacing: 15px;position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;}

固定定位

使用固定定位将页面的下载专区固定于页面右下角，不随滚动条变化

position: fixed;bottom: 0;right: 0;

 .download {width: 84px;height: 150px;position: fixed;bottom: 0;right: 0;box-shadow: -3px 0px 17px rgba(0, 0, 0, 0.1);background-color: white;}

弹性布局

使用弹性布局将service > container 内的item进行两端对齐

 .service>.container {display: flex;justify-content: space-between;
}

弹性布局设置

display: flex;

默认情况下弹性布局会将内容元素拍成一排，不自动换行，超出盒子宽度后会自动减小盒子大小

可使用设置自动换行

flex-wrap: wrap;

可设置弹性布局的主轴方向使其横行或纵向排列

flex-direction: row; 行 横向flex-direction: column; 列 纵向

可设置主轴的排列方式

justify-content: 主轴横向内容的排列方式flex-end 整体靠右排列，不会颠倒顺序flex-start 默认值 整体靠左center 整体水平居中space-between 左右两端对齐，其他元素平分space-evenly 均分剩余空间space-around 等分剩余空间 左右两侧为中间空隙一半align-items:    主轴纵向内容的排列方式flex-start 默认值 整体靠上flex-end;整体靠下center 整体垂直居中

背景固定

使用背景bg固定将背景设置在footer>container的右侧

  .footer > .container > .bg {width: 506px;height: 464px;background: url("https://cdn.cnbj1.fds.api.mi-img.com/mifi-web/img/line.040249c.png") no-repeat;background-size: contain;position: absolute;top: 0;right: 0;}

高级选择器

使用高级选择器设置banklist的div中的背景图减少类选择器的命名

直接选中第n个div元素

div:nth-child(n)

 .partner > .container > .banklist > div:nth-child(1) {background:url("img/bank1.a87d4d7.png") no-repeat;background-size: contain;}..........partner > .container > .banklist > div:nth-child(10) {background:url("img/bank10.2e45cd8.png") no-repeat;background-size: contain;}

使用高级选择器选中link中的最后一个a链接清除右侧的边框

选中第5个a元素清除边框

a:nth-child(5)

  .footer > .container > .reght > .link > a:nth-child(5) {border-right: 0px;}

天星数科首页CSS布局回顾相关推荐

HTML+CSS简单的淘宝首页框架布局小练(一）
开的前端的课程,练习淘宝的前台页面的框架,就简单根据理解写了下,(小傻猫)记录学习的经历简单首先分析下淘宝首页的布局框架(小傻猫),自己理解的首先需要注意的是该部分的布局,是将该部分分成量大块布局 ...
店铺首页图片css,CSS布局与JS结合实现某宝店铺首页
前几天根据学习的知识整理的JS运动框架,这里直接引用JS运动框架,页面主要是实现css网页布局与JS运动.事件,随便找了一个某宝上的店铺借鉴简书.gif 传送门 JS运动搞不定,你缺少一个框架而已 ...
3.实战HTML+CSS布局（实例入门篇）
转自:https://www.cnblogs.com/hmyprograming/archive/2012/03/23/2414373.html 学习这篇入门教程我们假定你已经具有了一定的HTML基础 ...
可缺省的CSS布局——张鑫旭
一.技术不难.意识很难有些东西的东西的实现,难的不是原料.技术:而是想不到,或者说意识不到. 例如下面这个简单而又神奇的魔术: 是吧.搞通了,才发现,哦~原来这么回事,很简单的嘛,我也可以实现的!其 ...
css布局难,运用 CSS布局到底有多难?[多图]
找Bug 篇原始代码,未做修正: 运行代码框首页-牛腩新闻揭晓系统 /* /* * 建立人:牛腩 */ * { /* 把默认值都配置为0 */ margin:0; padding:0; bo ...
Web标准概念--摘抄《CSS布局实录》
前言对于日常的很多事情,我们并没有注意到这背后都有着一个隐藏的"因素"在起作用,这个因素就是:标准. 生活中各行各业都有着自己相应的标准与规范,标准可以方便交流.促进协作.提高效 ...
Web:flex模拟移动商城首页页面布局/grid布局的相关属性
flex模拟移动商城首页页面布局 1.布局页面导航大家可以看到图片上的红色边框,用了flex布局,布局了一个多行容器,采用的是无序列表ul. css代码块 /* 设置导航样式,定义flex容器 */ ...
CSS基础学习十七：CSS布局之定位
在我们开始学习CSS布局之前,先来了解一下文档流的概念.文档流即是HTML的布局机制,块级元素占一行, 行内元素不占一行.将窗体自上而下分成一行行,并在每行中按从左往右的顺序排放元素. 一CSS定位和 ...
DIV+CSS布局基本流程及实例介绍
都说用DIV+CSS布局来设计网站便于优化,容易被收录,那么你对DIV+CSS布局的用法是否了解?CSS布局是网页html通过DIV标签+CSS样式表代码开发制作的(html)网页的统称.DIV+CS ...

天星数科首页CSS布局回顾

天星数科首页CSS布局回顾

主要使用的CSS技术

实现效果

吸顶定位

两端对齐

父相子绝定位

固定定位

弹性布局

弹性布局设置

背景固定

高级选择器

天星数科首页CSS布局回顾相关推荐

最新文章

热门文章