<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常见布局操作</title>
<style>
.topheight{ clear: both; display: block; margin-top:350px;}
h1{text-align: center;}
.container1{max-width: 960px; margin: 0 auto;}
.header1{height:20px;background: red;}
.main1{height:50px;background: green;}
.footer1{height:20px;background: blue;}
/*3*/
.left3{width:200px; height: 300px;float: left; background: skyblue;}
.main3{height: 300px; margin-left: 200px; background: blue;}
/*4 */
.right4{width:200px; height: 300px;float: right; background: skyblue;}
.main4{height: 300px; margin-right: 200px; background: blue;}
/*5*/
.container5{width: 960px;margin: 0 auto;background: blue;}
.clear5{-ms-zoom:1;}
.clear5:after{content: '';clear: both; display: block;}
.left5{width:200px; height: 300px; float: left;background: red;}
.right5{width:750px; height: 300px; float: right; background: green;}
/*6*/
.container6{position:absolute;max-width: 960px;margin:auto; left:0; right:0;background: blue;}
.left6{position:absolute;top:0;left:0;width:200px; height: 300px; background: red;}
.right6{position:absolute;top:0;right:0;width:750px; height: 300px; background: green;}
/*7*/
.container7{max-width: 960px; margin: 0 auto; position: relative;z-index: 999;}
.left7{float: left; width: 200px; height: 300px; background: red}
.right7{float: right; width: 200px; height: 300px; background: blue}
.main7{margin-left:200px; margin-right:200px; height: 300px; background: green;}
/*8*/
.container8{max-width: 960px; position: absolute;left: 0;right:0; margin: 0 auto;}
.left8{position: absolute;top:0;left:0;width: 200px; background: pink; height: 300px;}
.right8{position: absolute;top:0;right:0;width: 200px; background: yellow; height: 300px;}
.main8{margin-left: 200px;margin-right: 200px; background:blue; height: 300px;}
</style>
</head>
<body>
<h1>1、单列:上中下等宽</h1>
<div class="container1">
<div class="header1">头部</div>
<div class="main1">主体</div>
<div class="footer1">底部</div>
</div>
<h1>2、单列自适应布局:只需改变案例1中的布局即可不用改css</h1>
<div class="header1"><div class="container1">头部</div></div>
<div class="main1"><div class="container1">主体</div></div>
<div class="footer1"><div class="container1">底部</div></div>
<h1>3、二列布局:左侧固定,右侧自适应</h1>
<div class="left3">左侧</div>
<div class="main3">主体</div>
<h1>4、二列布局:右侧固定,左侧自适应</h1>
<div class="right4">右侧</div>
<div class="main4">主体</div>
<h1>5、二列左右固定、自动撑开父类(伪类方式)</h1>
<div class="container5 clear5">
<div class="left5"></div>
<div class="right5"></div>
</div>
<h1>6、二列左右固定(绝对定位方式)</h1>
<div class="container6">
<div class="left6">左</div>
<div class="right6">右</div>
</div>
<h1 class="topheight">7、三列布局:float+margin</h1>
<div class="container7">
<div class="left7"></div>
<div class="right7"></div>
<div class="main7"></div>
</div>
<h1>8、三列布局:绝对定位+margin</h1>
<div class="container8">
<div class="left8"></div>
<div class="right8"></div>
<div class="main8"></div>
</div>
</body>
</html>相关推荐
【实战指南】OpenClaw Telegram 群聊不响应完整解决方案:从获取群 ID 到关闭隐私模式全流程
将整个从“获取群组 ID → 配置 OpenClaw Telegram 通道 → 关闭隐私模式 → 测试”的全流程都整合进去。
div+css常见布局:两列布局、三列布局、圣杯布局和双飞翼布局
1、两列布局:左边固定,右边自适应 左右两侧,左侧固定宽度 200px,右侧自适应占满。 方法1: 左侧采用 float:left 往左浮动,右侧 margin-left:200px,留出左侧内容的空间 // html 代码 <div class="divBox"> <div class="left">左侧固定200px</div> <div class="right">右侧自适应</div> </div> // C
PMOS缓启动电路设计实战:用LTspice优化上电时序,把60A冲击降到15A
本文通过一个实战案例,深入解析了PMOS缓启动电路如何有效抑制上电冲击电流。文章指出,低ESR电容是导致冲击电流飙升的元凶,并详细阐述了利用LTspice仿真工具,通过优化栅极电阻和栅源电容等参数,将高达60A的冲击电流成功降至15A的设计与优化过程,为电源开关电路设计提供了可复用的方法论。
div的简单布局
div的简单布局 一、标签定义及使用说明: 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。 标签常用于组合块级元素,以便通过 CSS 来对这些元素进行格式化。 **二、提示和注释** 提示: 元素经常与 CSS 一起使用,用来布局网页。 注释:默认情况下,浏览器通常会在 元素前后放置一个换行符。然而,您可以通过使用 CSS 改变这种情况。 **三、属性** *1、全局属性* 1)accesskey 设置访问元素的键盘快捷键。 2)class 规定元素的类名(classname) 3)cont
高通QCOM Camera Pipeline 可视化工具:从XML到交互式图谱的工程实践
本文详细介绍了高通QCOM Camera Pipeline可视化工具的工程实践,旨在解决Camera驱动与算法工程师在解析复杂XML配置文件时的痛点。该工具能将静态的XML文件(如g_camx_usecase.xml)自动转换为交互式视觉图谱,通过分层布局算法清晰展示Pipeline、Node、Port和Link的拓扑关系,并支持悬停查看、拖动缩放等交互操作,极大提升了开发调试与架构理解的效率。
从DCI-P3到sRGB:跨媒体色彩转换的矩阵奥秘与实践
本文深入解析从DCI-P3到sRGB的色彩空间转换技术,揭示矩阵运算的核心原理与实践技巧。通过实战案例展示如何正确处理白点差异、伽马曲线转换等关键环节,帮助影视从业者解决跨媒体色彩匹配问题,确保作品在不同设备上呈现一致的视觉效果。
div常用的定位布局方式
1.固定定位 固定定位即将元素固定在页面的某个位置 。元素不会随页面的滚动而盖板边位置。 固定定位适合用座悬浮效果。如网页咨询栏丶窗口丶广告等 效果如下图 运用position: fixed;对元素进行固定 然后,用Left ,top对位置进行调整。 .ceb ul { list-style: none; position: fixed; right: 10px; bottom: 80px; ```} ## 标题2.相对定位 对元素使用相对定位,元素不会脱离文档层,会占
ARM Cortex-M系列授权解析:从研发到量产的免费与付费之路
本文深入解析了ARM Cortex-M系列内核从研发到量产过程中的授权模式。研发阶段可利用ARM DesignStart等免费资源进行原型验证,但产品商业化量产则需支付授权费与版税。文章对比了采购商用MCU与自研芯片的成本差异,并探讨了RISC-V作为免费替代方案在IoT领域的应用前景与挑战,为开发者提供了清晰的选型指南。
不会前端也可以看得懂的3种DIV+CSS布局技术
网页布局(layout)是CSS的一个重点应用。 很多小伙伴一直在反馈不怎么会 css,其实 css 布局也就那么几种 我们需要有全局思维 我们可能无法一下子就很细致地还原页面的每一个细节 但是我们至少可以把最基本的布局搭建出来,然后再慢慢打磨~ 接下来拿出我的 css 布局笔记,简单阐述下3种DIV+CSS布局技术 虽然说我现在开发基本都是用 flex 啦~ 接下来开始动手实践~ 前期准备 先搭建一个容器,我们可以把每一个div当作一个容器,存放我们需要的内容。 <div class="cont.
手把手教你用BQ Studio给BQ40Z50电量计“做体检”:从Golden Learning到精度验证的全流程实操
本文详细介绍了如何使用BQ Studio对BQ40Z50电量计进行全流程调试,从Golden Learning到精度验证。通过硬件连接、参数配置和优化技巧,帮助工程师提升电池管理系统的精度和性能,适用于BMS开发和电量计校准的实际应用场景。
STM32 FMC驱动AD7606实战:从硬件连接到时序调试全流程解析
本文详细解析了STM32 FMC驱动AD7606的全流程,包括硬件连接、FMC接口配置、驱动程序设计和时序调试。通过实战案例,展示了如何利用STM32的FMC总线实现与AD7606的高效数据传输,特别强调了电源设计、信号连接和PCB布局等关键要点,为嵌入式数据采集系统开发提供了实用指导。
Div属性方法与布局速查表
id。
硬件知识点-----SPI串联电阻、振铃、过冲
电阻取值,没有公式,一被传输线的特征阻抗为50欧姆左右,而TTL电路输出电阻大桃为13欧姆左右,在源端串一个33姆,大致和50相当,这样就可以柳制从终端反射回来的倍号,防止再次反射。传输时间tp=L/V,其中L是导线长度,V是电磁波在电路板中的传输速度V=C/sqrDk,其中Dk是光速衰减因子,对于电路板而言是铜线,Dk=4电磁波在电路板中的速度都是慢于光速的。实际上串联多大的电阻与传输线的阻抗有关,为了保证阻抗的连续性,如果传输线的特性阻抗 Z0与驱动源的输出阻抗 Zd不匹配,会引发信号的反射。
新手该怎么学习DIV+CSS网页标准布局?
WEB标准(div+css)该怎么去学习?学习中该注意什么?div布局和table布局的不同在哪里?它的优势在哪儿?css hack又是怎么一回事等等,如果你对这些问题还一头雾水,那么下边这些内容将为你解开谜团,带你找到答案。 俗话说:工欲善其事,必先利其器。要想学好,首先要了解什么是div标准布局,和talle相比,优势在哪儿?那么《DIV+CSS是什么意思?实质是什么? 》这篇文章将告诉你这...
深度学习工具包 DeepLearningToolbox
深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[](https://bitdeli.com/free "Bitdeli Badge")
WINCC7.3破解文件
WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载!
DIV+CSS实现两个DIV相互叠加
一、代码 Title 二、效果 
1网页简介:此作品为学生个人主页网页设计题材,HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码,这是一个不错的网页制作,画面精明,代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑等任意html编辑软件进行运行及修改编辑等操作)。3.知识应用:技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等,视频、 音频元素 、Flash,同时设计了Logo(源文件)所需的知识点。
CSS随笔
注:随笔有错误,全屏本人自己开发所写,不推荐借鉴。 CSS背景操作: div居中: background-position:center;div在中间居中 background-position:right bottom;div在右下角 background-position:20px 30px;距离左边20个像素,距离上边30个像素。 background-repea...
freeCodeCamp教程:使用div元素嵌套多个HTML元素
freeCodeCamp教程:使用div元素嵌套多个HTML元素 【免费下载链接】freeCodeCamp freeCodeCamp.org的开源代码库和课程。免费学习编程。 项目地址: https://gitcode.com/G...
网页设计(二)——DIV+CSS布局1
前言:好久没更新过优快云博客了,现在从原来的OI,变成了一个科研工作者。最近打算把原来的一些资料整理一下,作为经验公开分享,希望能帮到更多默默努力耕耘的人~ 网页设计系列源于早几年在学校网站工作做入门培训时的一些讲稿,有关HTML+CSS框架的编程,比较基础。当时为了给入门的同学更多感性认识,提供了很多小实例,这里也都给出来了。 DIV+CSS布局 DIV+CSS布局概念 DIV+CSS布局方式并不是一种新的语言或者体系,它就是html语言中的一部分。 简单来说就是把标签中的样式...
第九章 DIV+CSS布局
理解DIV元素:<div>是一个块级元素,通常用于对页面上的内容进行分组或应用样式。它本身没有特定的语义含义,但可以通过CSS来赋予各种布局和样式。使用CSS进行布局:CSS允许你控制<div>元素的位置、大小、颜色、边距等属性。你可以使用CSS的position属性(如static、relative、absolute、fixed)来控制元素的定位。创建布局:固定布局:使用固定像素值来定义<div>的大小和位置。
3491



被折叠的 条评论
为什么被折叠?



