前端布局之一html、css

效果图

三个固定部分、中间为主要内容部分

pos1.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>布局一</title><link rel="stylesheet" href="pos1.css">
</head>
<body><!--固定部分：顶栏、左侧栏、 右侧栏--><div id="fixedbarTop"><p>FOR ADs OR Quick Navigation</p></div><div id="fixedbarL"><p>FOR ADs OR Quick Navigation</p></div><div id="fixedbarR"><p>FOR ADs OR Quick Navigation</p></div><!-- 框架布局部分 --><div id="container"><div id="header"></div><!-- <div id="nav"></div> --><div id="main"><div id="sideL"></div><div id="content"></div></div><div id="footer"></div></div></body>
</html>

pos1.css

/*清除所有内外边距*/
*{margin: 0;padding: 0;
}/*-----------------三个固定边栏样式----------------*/#fixedbarTop{height: 70px;width: 100%;position: fixed;top: 0px;left: 0px;background-color: #b7cbc0;
}#fixedbarL{height: 50%;width: 5%;position: fixed;left: 0px;top: 50%;background-color: #b7cbc0;
}#fixedbarR{height: 50%;width: 5%;position: fixed;top: 50%;right: 0px;background-color: #b7cbc0;
}/*----------------------主界面样式--------------------*/#container{width: 88%;/*居中对齐*/margin: 0 auto;
}#header{margin-top: 124px;height: 150px;width: 100%;background-color: #804e00;
}#main{height: 800px;width: 100%;clear: right;
}/*#nav{height: 100px;width: 100%;background-color: #8891bf;
}*/#sideL{float: left;width: 20%;height: 100%;background-color: #be6c30;
}#content{float: left;width: 78%;height: 100%;margin-left: 2%;background-color: green;
}#footer{height: 100px;     width: 100%;background-color: wheat;margin-bottom: 40px;
}

前端布局之一html、css相关推荐

前端：40 个 CSS 布局技巧
CSS是Web开发中不可或缺的一部分,随着Web技术的不断革新,CSS也变得更加强大.CSS的众多属性你知道了多少?具体开发中该使用什么属性才最适合恰当?如今的一些CSS属性可以让我们节约更多的时间. ...
一个div 上下两行_web前端工程师如何理解 CSS 布局和块级格式化上下文
CSS是web前端中的重要内容,很多初学者在学习CSS时都会遇到各种各样的问题,今天就给大家分享web前端开发如何理解CSS不惧和块级格式化上下文.也许你从未听说过这个术语,但是如果你曾经用 CSS ...
前端面试1：CSS布局
课程思维导图 Q:三栏布局,高度已知,左右两栏固定,中间自适应的三栏布局有几种实现方式,各自的优缺点是什么?  ...
从上往下流式布局_教大家怎么写前端布局
一.静态布局(Static Layout) 1. 布局概念最传统.原始的Web布局设计.网页最外层容器(outer)有固定的大小,所有的内容以该容器为标准,超出宽高的部分用滚动条(overflow: ...
【持续..】WEB前端面试知识梳理 - CSS部分
传送门: WEB前端面试知识梳理 - CSS部分 WEB前端面试知识梳理 - JS部分最近在看大厂的一些面试题,发现很多问题都是平时没有在意的,很多知识都是知道一点但又很模糊说不出个所以然来,反思自 ...
css清除浮动的几种方法_web前端学习路线分享CSS浮动-清除浮动篇
web前端学习路线分享CSS浮动-清除浮动篇,为什么要清除浮动这里所说的清除浮动,并不是不要浮动了,而是清除浮动与浮动之间的影响.那么到底会有什么影响呢? 1．高度塌陷举个例子我们看一下. 我们在 ...
前端总结·基础篇·CSS（二）视觉
前端总结系列前端总结·基础篇·CSS(一)布局前端总结·基础篇·CSS(二)视觉前端总结·基础篇·CSS(三)补充前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...
flex 左右布局_面试必考点：前端布局知识
前端的页面布局知识是初中级前端工程师必须掌握的内容,在面试的时候无论大厂小厂都有很大概率被提问到,作为与页面最紧密的前端开发者,前端布局知识是必不可少的一环. 前言这里所要介绍的布局知识主要是在解决 ...
做好前端的话HTML和CSS基础必须夯实!
很多前端大佬说,要做好前端的话html和css基础必须夯实.那么,达到什么水平才能叫基础夯实呢? 1.拿到设计人员给的图,不管是pc或者是移动端的图,看一遍之后脑海中已经有了很明确的结构和页面书写过程 ...
一个注册页面的前端模板（html+css+javascript）可自适应屏幕
一个注册页面的前端模板(html+css+javascript)可自适应屏幕,修改样式即可用. 截图代码 <!DOCTYPE html> <html><head> ...

前端布局之一html、css

效果图

pos1.html

pos1.css

前端布局之一html、css相关推荐

最新文章

热门文章