黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程（权重，盒子模型）
2024-06-04 03:02:44
一、基础班学习路线
三、CSS3基础
1.CSS的三大特性
CSS三大特性之层叠性
CSS三大特性之继承性
行高的继承
CSS三大特性之优先级
CSS权重的叠加
- 十个在最后累加会变成0，0，0，10；权重虽然会叠加，但是永远不会有进位
2.CSS盒子模型
网页布局的本质 ：
盒子模型组成部分
盒子模型边框border
边框的复合写法
表格细线边框
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table {width: 500px;height: 249px;}th {height: 35px;}table,td,th {border: 1px pink solid;border-collapse: collapse;font: 14px;text-align: center;}</style>
</head><body><table align="center" cellspacing="0"><thead><tr><th>排名</th><th>关键词</th><th>进入搜索</th><th>最近七日</th><th>相关链接</th></tr></thead><tbody><tr><td>1</td><td>鬼吹灯</td><td>456</td><td>123</td><td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td></tr><tr><td>1</td><td>鬼吹灯</td><td>456</td><td>123</td><td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td></tr><tr><td>1</td><td>鬼吹灯</td><td>456</td><td>123</td><td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td></tr><tr><td>1</td><td>鬼吹灯</td><td>456</td><td>123</td><td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td></tr><tr><td>1</td><td>鬼吹灯</td><td>456</td><td>123</td><td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td></tr></tbody></table>
</body></html>
边框会影响盒子实际大小
盒子模型内边距padding
padding复合属性
padding会影响盒子实际大小
padding应用-新浪导航栏
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.nav {height: 41px;border-top: 3px solid #ff8500;border-bottom: 1px solid #edeef0;background-color: #fcfcfc;line-height: 41px;}.nav a {display: inline-block;height: 41px;text-decoration: none;color: #4c4c4c;font-size: 12px;padding: 0 20px;}.nav a:hover {background-color: #eee;color: #ff8500;}</style>
</head><body><div class="nav"><a href="#">新浪导航</a><a href="#">手机新浪网</a><a href="#">移动客户端</a><a href="#">微博</a><a href="#">三个字</a></div>
</body></html>
小米侧边栏修改
padding不会撑开盒子的情况
- 如果盒子本身没有指定w，h属性，就和它父亲一样大，但如果指定了，又加了padding，可能会超出它的父亲
盒子模型外边距margin
外边距典型应用-块级盒子水平对齐
行内元素和行内块元素水平居中
外边距合并-嵌套块元素塌陷
清除内外边距
3.PS基本操作
4.综合案例
产品模块布局分析
box布局
图片和段落制作
评价和详情制作
竖线细节制作
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}body {background-color: #f5f5f5;}a {color: #333;text-decoration: none;}.box {width: 298px;height: 415px;background-color: #fff;/* 让块级的盒子水平居中对齐 */margin: 100px auto;}.box img {width: 100%;}.review {height: 70px;font-size: 14px;/* 因为这个段落没有width属性，所以 padding不会撑开盒子的宽度 *//* 同理，由于这个盒子有高度，不要因为与上面图片有距离而增加padding上下 */padding: 0 28px;margin-top: 30px;}.appraise {font-size: 12px;color: #b0b0b0;margin-top: 20px;padding: 0 28px;}.info {font-size: 14px;margin-top: 15px;padding: 0 28px;}.info h4 {display: inline-block;font-weight: 400;}.info span {color: #ff6700;}.info em {font-style: normal;color: #ebe4e0;margin-top: 0 6px 0 15px;}</style>
</head><body><div class="box"><img src="" alt=""><p class="review"><a href="#">快递牛，整体不错蓝牙可以秒接。红米给力。</a></p><div class="appraise">来自于 117384232 的评价</div><div class="info"><h4><a href="#">Redmi AirDots真无线蓝...</a></h4><em>|</em><span>99.9元</span></div></div>
</body></html>
解惑
黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程（权重，盒子模型）相关推荐
- 【黑马程序员pink老师前端】网页相关概念
java 学习笔记指路 基础知识 Python转java补充知识 Java中常见的名词解释 前端 [黑马程序员pink老师前端]HTML [黑马程序员pink老师前端]JavaScript基础大总结 ...
- 【黑马程序员pink老师前端】JavaScript对象
java 学习笔记指路 基础知识 Python转java补充知识 Java中常见的名词解释 前端 [黑马程序员pink老师前端]HTML [黑马程序员pink老师前端]JavaScript基础大总结 ...
- html, css学习笔记，自用（B站黑马程序员pink老师）
附上教学视频链接黑马程序员pink老师前端入门教程 该博文是自己随手记的上述视频笔记 跳转到css, p61 P18 <div> </div>一行一个,<span> ...
- 学成在线案例——黑马程序员pink老师\思路讲解\完整源代码
本文为跟随B站黑马程序员pink老师学习CSS时所写,文章讲解了学成在线首页的制作思路,并贴出了源代码,作为学习笔记分享给大家 如有错误,欢迎指出.如有侵权,联系删除 文章目录 1. 案例准备工作 2 ...
- B站黑马程序员pink老师讲的JavaScript代码
B站黑马程序员pink讲课的JavaScript代码(部分代码) <!DOCTYPE html> <html lang="en"> <head> ...
- 跟着黑马程序员pink老师学习的笔记及小破站学习的笔记
网页 1.网站是指在因特网上根据一定的规则,使用HTML等制作的用于展示特定内容相关的网页集合 2.什么是网页? 网页是网站中的一"页",通常是HTML格式的文件,它要通过浏览器来 ...
- CSS 学习笔记总结（借鉴黑马程序员pink老师前端入门）
1. CSS 简介 CSS 的主要使用场景就是美化网页,布局页面的 1.1 HTML 的局限性 说起 HTML ,他只关注内容的语义.比如 <h1> 表明这是一个大标题,<p> ...
- 黑马程序员pink老师前端入门教程，零基础必看的JavaScript基础语法视频教程（一）
一.计算机编程基础 编程语言 编程语言与标记语言的区别 编程语言 有很强的逻辑和行为能力,有if else等具有逻辑性和行为能力的指令,主动 标记语言(html)不用于向计算机发出指令,常用于格式化和 ...
- 黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程（复合选择器，元素显示模式，背景）
一.基础班学习路线 三.CSS3基础 1.Emmet语法 emmet语法生成html标签 <!DOCTYPE html> <html lang="en"> ...
最新文章
- 树——二叉搜索树的实现
- 关于matlab中的梯度使用
- linux下多版本gcc编译器管理方法
- opporeno3pro可以刷鸿蒙系统吗,华为P40放大招！鸿蒙系统+120Hz+徕卡五摄，明年2月发布！...
- python中assert_在Python中带有示例的assert关键字
- Python 正则表达式re模块的使用
- cmdpython命令大全_Python命令 python使用cmd命令
- 把WebForm移植到.Net MVC中
- 前后端通吃，vue大全Mark一下
- 8位串行加法器 计算机组成原理,安尧-2013434158-计算机组成原理8位加法器实验报告.doc...
- OFFICE | WORD VBA 合集
- unef螺纹_统一螺纹(美制螺纹)UN,UNC,UNF,UNEF详细区别
- web安全day19：DNS欺骗、ARP攻击及钓鱼网站制作
- 嵌入式课程 之 超声波传感器实验
- MySql Lock wait timeout exceeded该如何处理
- 利用Python+xarray+cartopy+matplotlib 实现遥感地形图制图绘制 —— xarray 学习文档01
- java集合比较大小_arraylist 怎么比较元素大小？
- SAP软件ERP系统简介
- Hadoop的数据压缩
- 按照分类方法判断图片里是否有鹅蛋