布局案例

最新推荐文章于 2022-05-26 13:33:44 发布
最新推荐文章于 2022-05-26 13:33:44 发布
阅读量174 收藏
点赞数 1
分类专栏： 前端、Java 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51055743/article/details/113738765
版权
本文通过实例讲解了如何使用CSS进行布局设计，强调了通过设置不同元素的左右margin来实现精准布局的方法，并提及了权重在布局中的作用。
摘要由CSDN通过智能技术生成
  • 首先每个都设置左右margin，然后，最左最右再分别设置相应的margin为none，更详细的名称，权重也会更大

在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>布局框架</title>
        <style>
            *{
    
                margin: 0;/*将所有的元素边距都设置为0*/
                padding: 0;
            }
            #header{
    
                height: 50px;
                background:#E83828;
            }
            #header .head{
    
                width: 1005px;
                height: 50px;
                margin: auto;
            }
            #banner{
    
                height: 500px;
                background: slateblue;
            }
            #category{
    
                width: 1005px;
                height: 200px;
                margin: auto;
                background
最低0.47元/天 解锁文章
小XiaXia
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
网站布局案例模板
03-31
在这个"网站布局案例模板"中，我们可以深入探讨两种主要的布局方式——单页布局和多页布局，并结合2016年4月26日的案例来详细阐述它们的特点、优缺点以及在实际应用中的策略。 首先，我们来看单页布局。单页布局，...
动态布局案例
baidu_41388533的博客
07-18 247
动态布局案例 【注 <QtGlobal> - Global Qt Declarations】 官网：https://doc.qt.io/qt-5/qtglobal.html template <typename T> typename std::add_const<T>::type &qAsConst(T &t) 【参考：《QT qOverload用法示例》】 以QComboBox作为示例对象。 例如，QComboBox类的存在如下信号.
30个blog设计的创意布局
coderidea
07-28 301
     Blog的数量已经是汪洋大海， 设计师应该如何发挥长处， 让读者的视线多做停留？本文中举出的是30个blog设计显然做到了这一点， 通过强烈的个 人风格、布局和精致的背景。 Ashley Tisdale ↓ Design Spartan ↓ mashKULTURE ↓ Fran Fernández ↓ Get Back To Work ↓ Squ...
HTML5 页面布局【结合案例】
热门推荐
weixin_41964994的博客
08-19 3万+
新布局的意义 语义化 HTML5 可以让很多更语义化的结构化代码标签代替大量无意义的 div 标签 1. 这种语义化的特性提升了网页的质量和语义 2. 减少了以前用于CSS 调用的class 和 id 属性 对搜索引擎的友好 新的结构标签带来的是网页布局的改变及提升对搜索引擎的友好    额外补充点：新巩固 index.html  &lt;!DOCTYPE html&...
流式布局案例（怎么能把名字到11个字）.zip
06-21
在"流式布局案例（怎么能把名字到11个字）.zip"这个压缩包中，包含了构建流式布局所需的几个关键文件。让我们逐一解析这些文件的作用： 1. **index.html**：这是网页的主入口文件，其中包含了HTML标记语言，用于...
移动web开发实例flex布局案例源码
02-16
通过学习这些Flex布局案例，你可以应用到实际项目中，比如创建响应式菜单、自适应图片网格、滚动同步效果等，提升移动Web应用的交互性和视觉一致性。 总之，Flex布局为移动Web开发提供了强大的布局工具，通过深入...
rem布局案例
03-29
在这个“rem布局案例”中，我们看到开发者采用了Less预处理器和rem单位来创建一个模仿京东手机端界面的示例。下面我们将深入探讨rem布局、Less以及它们如何协同工作。 首先，让我们了解什么是rem。REM（root em）是...
圆形转盘布局案例
04-04
这个案例，"圆形转盘布局案例"，提供了一个名为"CircularLayout"的自定义布局，允许开发者构建一个圆心对称、可旋转的界面元素展示方式。这种布局特别适合于制作轮盘式的选择器或者游戏中的菜单系统。 首先，`...
http相关
m0_51055743的博客
03-20 3717
一、HTTP协议简介 1、通信的定义 通信，就是信息的传递和交换。 通信三要素： 通信的主体 通信的内容 通信的方式 案例： 服务器把传智专修学院的简介通过响应的方式发送给客户端浏览器。 其中， 通信的主体是服务器和客户端浏览器； 通信的内容是传智专修学院的简介； 通信的方式是响应； 2、通信协议 通信协议（Communication Protocol）是指通信的双方完成通信所必须遵守的规则和约定。 通俗的理解：通信双方采用约定好的格式来发送和接收消息，这种事先约定好的通信格式，就叫做通信协议。 2.1互联
防抖为什么要使用闭包
m0_51055743的博客
03-11 3639
1. 防抖 从概念上来讲，所谓的闭包指的是一个函数，有权访问另一个函数作用域中的变量的函数。 直观点来讲，JavaScript的闭包就是函数中嵌套函数。 <input type="text" id="input"/> <div id="show"></div> <script> function showInfo(text){ document.getElementById('show').innerHTML=text.target.value }
前端性能优化
m0_51055743的博客
03-21 2830
一、地址栏输入URL发生了什么 大致分为：DNS域名解析、TCP连接、HTTP请求、处理请求返回HTTP响应、页面渲染、关闭连接 首先会进行 url 解析，根据 dns 系统进行 ip 查找 根据 ip 就可以找到服务器，然后浏览器和服务器会进行 TCP 三次握手建立连接，如果此时是 https 的话，还会建立 TLS 连接以及协商加密算法（注意的问题"https 和 http 的区别"） 连接建立之后浏览器开始发送请求获取文件，此时这里还会出现一种情况就是缓存，建立连接后是走缓存还是直接重新获取，需要看
transform位移、缩放、旋转效果(hover、transition、trasform)
m0_51055743的博客
02-20 2147
背景介绍 进行absolute绝对定位，改变位置时，脱离文档流，影响布局 使用transform属性，不影响其他元素布局，只在原来的位置上发生了偏移 这2种效果一样 transform的缩放和旋转 缩放： 1为正常大小，正常情况下，变形时的原点在元素中心位置，但，可改变原点位置transform-oringin：50% 50%（默认位置，中心） 放：transform:scale(1.5); 缩：transform:scale(0.6); 旋转(3D立体效果）： transform:ro.
JS作用域(链)和变量提升
m0_51055743的博客
03-14 1260
一、作用域 JS是静态作用域 let x = 10; function f() { return x; } function g() { let x = 20; return f(); } console.log(g()); // 10 解释：我们调用一个函数时，如果这个函数的变量没有在函数中定义，就去定义该函数的地方查找相似题： var n=123; function f1(n){ console.log(n); } function f2(){ v.........
移动端和PC端（dpr、viewport、rem）
m0_51055743的博客
02-28 807
移动端与网页端的相关介绍 dpr dpr值的意义：当在网页上用CSS划出一条1像素的线段时，当手机的dpr值为2，就会用2个像素划出这条像素。 网页缩放 网页缩放为原来的1/2，就相当于网页本身的大小变成了原来的2倍，下例中变为1:1 meta标签中属性叫做name=“viewport”,viewport指的是手机浏览器的窗口大小，content中指让窗口的宽度跟手机的设备保持一致，当dpr=3,initial-scale取值1/3，即0.333 移动端网页端适配 一：百分比布局(
socket.io的使用问题
m0_51055743的博客
08-18 462
在使用 Node http 服务器时，需要解决跨域问题 在server对应文件夹运行终端node index.js（index为自定义的名称） index.js文件中（名称自定） 原var io = require('socket.io')(app); 改为var io = require('socket.io')(app,{cors:true}); 修改前： 修改后： but 一般我们不会自己写一个服务器，所以，用express框架 安装 npm install --save express 同样要解
如何区分对象自身的属性以及原型上的属性
m0_51055743的博客
05-26 407
两种属性: 自身属性和 prototype 属性。 自身属性是直接在对象上定义的。 而原型属性在 prototype 上定义。 function Dog(name) { this.name = name; } Dog.prototype.numLegs = 4; let beagle = new Dog("Snoopy"); let ownProps = []; let prototypeProps = []; // 只修改这一行下面的代码 for(let property in beagle)
hover鼠标的划入效果、精灵图的使用
m0_51055743的博客
02-10 394
hover鼠标的划入效果 当鼠标划入到元素上，背景颜色、链接效果等可设置变化。当想增加鼠标划入效果时，用 :hover 选择器。 <!DOCTYPE> <head> <title>定位</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style type="text/css"> .test{
JS预编译
m0_51055743的博客
03-14 340
(function(a){ console.log(a); var a = 12; console.log(a); function a(){...} console.log(a); var b = function(){...} console.log(b); function d(){...} })(1); 先创建GO对象(Global Object)，再创建AO对象(Activation Object)。 1.首先创建一个GO对象,和AO对象 （立即执行函数是在全局作用域中执行的,立即执行函数执行
容器的作用
m0_51055743的博客
02-03 300
style属性：可设置width，height，background-color，color，text-align：center等值，颜色可通过颜色拾色器获取值来填入,";"分隔 text-align:center； 让内部元素水平居中 margin：auto； 让元素本身水平居中 background-color：gray； 设定背景颜色 font-size：24px; 设定字体大小 color：white；设定文字颜色 <span></span>：span是
移动端flex布局案例
最新发布
08-19
当然，我可以为您提供一个移动端的Flex布局案例。假设您想要创建一个简单的导航栏，其中包括三个链接按钮，它们应该在移动设备上水平居中显示。以下是一个使用Flex布局实现此效果的示例代码： HTML代码： ```html ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值