网页布局技巧（网页布局怎么写）
haoteby 2025-05-03 14:12 75 浏览
菜鸟教程
Html教程：
https://www.runoob.com/html/html-tutorial.html
Css教程：
https://www.runoob.com/css/css-tutorial.html
Vue教程：
https://www.runoob.com/vue2/vue-tutorial.html
Html
- div
- span
- h1-h6
- i
- strong
- a
- img
- video
- input
- textarea
- button
CSS布局思路
* {
box-sizing: border-box;
}- 盒子模型
- 外边距 margin 上右下左
- 内边距 padding 上右下左
- 边框 border 上右下左 solid dashed (border: 1px dashed black)
- 阴影 box-shadow: h-shadow v-shadow blur spread color inset; ( box-shadow: 0 0 10px -2px rgba(0,0,0,.5); )
- 边角 box-radius 上右下左
- 内容
- css换行： word-wrap: break-word;
- Flex布局 https://www.runoob.com/w3cnote/flex-grammar.html
- flex-direction row column
- flex-wrap wrap
- justify-content flex-start | flex-end | center | space-between | space-around
- align-items：flex-start | flex-end | center | baseline | stretch
CSS布局元素
- 宽度 width
- 固定宽度 百分比宽度
- 最大宽度
- 最小宽度
- 水平居中 margin: auto
- 高度 height
- 固定高度 （必须）
- 最大高度
- 最小高度
- 行高对齐 line-height
- 字体
- 颜色 color 十六进制、rgb、英文
- 大小 font-size
- 粗细 font-weight bold
- 背景
- https://color.d777.com/
- 颜色 background-color
- 图片 background-img: url(...)
- 定位position
- absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位
- relative 生成相对定位的元素，相对于其正常位置进行定位 （上下移动行内元素最简单的方式）
- fixed 生成固定定位的元素，相对于浏览器窗口进行定位
- overflow: hidden scroll
相关推荐
- DIY桌面激光雕刻机#是时候展现真正的技术了
-
激光雕刻机。这期视频我们来看一下我是如何DIY一台桌面激光雕刻机。前几天在水池子边上发现了一台旧电脑，我看这电脑上还有一些东西可以利用到，比如光驱上面拆出了步进电机和滑轨。所以本期视频我将用这些废品去...
- 100000块多米诺骨牌拼成超级马里奥，这款机器人1天就完成了
-
智东西（公众号：zhidxcom）编译|王健恩编辑|高歌智东西7月30日消息，美国工程师兼YouTube博主MarkRober创造出了一个可以自动摆放多米诺骨牌的机器人。这个机器人被命名为D...
- 这个3D打印机器人可以在30秒内打开密码锁
-
密码锁看似很安全?也许曾经是，但现在你可要当心了!这是因为一台3D打印制造的机器人就可以在半分钟内打开你的密码锁。上周四，知名黑客萨米·卡姆卡尔(SamyKamkar)在自己的网站上公布了一个称之为...
- 密码锁也不安全 这款机器人30秒即可自动打开
-
大学生和体育爱好者们要注意了，千万不要再把贵重物品存放在公共储物柜里。因为现在已经出现了一种3D打印的机器人，据说世界上各大锁商推出的大部分密码锁，它都能够在30秒之内打开。著名黑客山米·卡姆卡(Sa...
- 硬件单片机模拟器，再也不用买开发板了...
-
#头条创作挑战赛#记得2006年在凌阳科技(sunplus)工作的时候，凌阳科技开发了自己的编译器/集成开发环境(unspIDE），那个IDE除了有keil那样的编辑器、编译器、链接器、调试器、下载...
- 3D打印机分哪几部分构成?（3d打印机结构组成及系统分析）
-
3D打印机的构成根据技术类型（如FDM、SLA、SLS等）有所不同，但以最常见的FDM（熔融沉积成型）3D打印机为例，其核心组成部分可分为以下模块：1.机械结构框架提供整体支撑和稳定性，常见材质为金...
- 初学者学伺服都需要什么?石家庄诺仕通
-
#初学者学伺服都需要什么?#对于初学者学习伺服系统，需要从...
- arduino（arduino是单片机吗）
-
arduino学习笔记arduino学习笔记1-什么是arduino？...
- 自制写字机，你需要的全套资料都在这里
-
小编之前发过《用废旧光驱制作迷你绘图仪》，很多读者都成功制作了自己的绘图仪。但是该方法的缺点是gcode要在inkscape软件中生成，然后通过grbl-controller这个没有界面的程序发送画图...
- 自己动手DIY3D打印机 瞬间效果出现桌面时，大家都惊呆了!
-
3D打印机,对数码产品比较了解的朋友都知道，但是真正玩过的童鞋可能就不多了。其实3D打印机离我们并不远，随着3D打印技术越来越成熟，3D打印机的学习资料也越来越多，这让自己动手做一台桌面3D打印机也成...
- 机器人仅用24小时将十万块多米诺骨牌拼出马里奥，创下世界纪录
-
十万块多米诺骨牌倒下是个啥场面？等等，十万块？那得搭多久啊？...
- 如何制作一个机器人?（制作机器人的方法）
-
1.简单机械机器人（例如自动小车）2.智能机器人（带有人工智能或计算机视觉）3.工业机器人（用于生产自动化）4.人形机器人（类人结构，可以行走、对话）...
- CrowPi2树莓派4学习套件评测第1部分–开箱和首次启动
-
文章来源：CNXSoftware中文站2020年6月，我曾写过一篇关于深圳易科诺...
- 基于 Arduino UNO 的蓝牙汽车（arduino智能小车蓝牙控制app）
-
HC-05蓝牙模块HC-05是一款易于使用的蓝牙SPP模块，针对流畅的串行无线通信配置进行了优化。串口蓝牙模块是完全合格的蓝牙V2.0+EDR（增强数据速率）3Mbps调制，具有总2.4...
- 电机驱动设计方案带你初识机电一体化
-
在直流电机驱动电路的设计中，主要考虑以下几点：功能：电机是单向还是双向转动？需不需要调速？...