1.布局结构(头部固定,内容分为左右结构)

2.结果展示

3.HTML代码

<div class="logo">logo
</div>
<div class="container-fluid">    <div class="row main"><div class="col-md-3 nav">nav</div><div class="col-md-9 content"><div class="content-body">content</div></div></div>
</div>

4.CSS样式

代码分为格式化代码(用于清除不同浏览器兼容性问题)
布局代码(用于界面布局的代码)

<style>/*淘宝CSS格式化代码*/body,h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {margin: 0;padding: 0;}body, button, input, select, textarea {font: 12px/1.5 tahoma, arial, \5b8b\4f53;}h1, h2, h3, h4, h5, h6 {font-size: 100%;}address, cite, dfn, em, var {font-style: normal;}code, kbd, pre, samp {font-family: couriernew, courier, monospace;}small {font-size: 12px;}ul, ol {list-style: none;}a {text-decoration: none;}a:hover {text-decoration: underline;}sup {vertical-align: text-top;}sub {vertical-align: text-bottom;}legend {color: #000;}fieldset, img {border: 0;}button, input, select, textarea {font-size: 100%;}table {border-collapse: collapse;border-spacing: 0;}/*布局CSS代码*/body, html {background: #EAEEF2;width: 100%;height: 100%;color: lightblue;}.container-fluid {background: aquamarine;height: 100%;}.logo {background: black;font-size: 40px;padding-left: 20px;height: 60px;min-height: 60px;width: 100%;position: fixed;top: 0;right: 0;z-index: 100;}.nav {background: white;font-size: 30px;height: 100%;width: 15%;float: left;position: relative;margin-right: -100%;box-shadow: 0px 2px 3px 2px rgba(0, 0, 0, 0.1);}.content {height: 100%;width: 85%;margin-left: 15%;}.content-body {padding-left: 15px;padding-right: 15px;background: white;height: 100%;font-size: 300px;box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);overflow: auto;}.main {background: #F8F8F8;height: 100%;padding-top: 68px;padding-bottom: 6px;}</style>

bootstrap简单的页面布局相关推荐

div实现简单的页面布局
摘要:使用html和css实现简单的旅游网站布局,从而熟练地运用css样式,达到美观的布局效果. HTML代码: <!DOCTYPE html> <html><head& ...
ExtJs懒人笔记(2) ExtJs页面布局
ExtJs学习目录懒人笔记(1) ExtJs初探 ExtJs懒人笔记(2) ExtJs页面布局 ExtJs懒人笔记(3) 动态Grid的实现页面布局,对于做Web开发者来说是一定不会陌生的,而这些 ...
Redesign Your App for iOS 7 之页面布局
前言 iOS7是目前iOS史上最颠覆的一次改版. 它的出现令人兴奋,因为它将会带我们进入一个全新的时代: 它的到来也让我们忧心,因为它颠覆了一切,包括我们过去做过的很多努力. 但是,相信大家乐意为这个 ...
后台管理页面布局、web页面布局
做一个简单的页面布局演示地址:https://genin.gitee.io/web-demo/web-layout.html 基本结构如下 <body> <!-- svg图标 -- ...
移动端页面布局方式，简单记录一下
目录 1.视口 2.多倍图 3.移动端开发选择 4.移动端技术解决方案 5.移动端常见布局 6.流式布局 7.flex弹性布局 ①flex与传统布局比较 ②flex布局原理 ③常见父项属性 8.rem ...
bootstrap图片怎么横向布局_AMOS画图小技巧1：页面布局由竖向调整为横向A4尺寸...
打开AMOS后,如果你对它默认的页面布局感到不爽的话,怎么办呢?当然是去调整一下它的页面布局嘛,这样有助于后面在更大的空间内画出模型图. 看,上面呢就是AMOS默认的页面,它是竖向的,类似于一张竖版的 ...
轻量级mvc框架之：stripes （二、简单开发指引及页面布局标签）
一.创建stripes Action类创一个实现ActionBean的接口即可,如 public class UserAction implements ActionBean {private Ac ...
HTMLCSS--使用CSS完成页面布局及排版（附案例代码）
CSS简介 CSS (Cascading Style Sheets) 层叠样式表,是一个用于修饰文档的语言,可以将文档以更优雅的形式呈现给用户. 在html中引入css 1.将css规则直接填写在st ...
Bootstrap栅格系统（布局）
栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅格系 ...

bootstrap简单的页面布局

1.布局结构(头部固定,内容分为左右结构)

2.结果展示

3.HTML代码

4.CSS样式

bootstrap简单的页面布局相关推荐

最新文章

热门文章