黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程（权重，盒子模型）

已于 2022-02-12 01:49:52 修改
阅读量989 收藏 7
点赞数 1
文章标签： html5 css3 css
于 2021-10-18 14:30:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51448653/article/details/120824929
版权

一、基础班学习路线

在这里插入图片描述

三、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

1
在这里插入图片描述

在这里插入图片描述

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>

解惑

在这里插入图片描述

5pace
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端
m0_64372176的博客
08-20 2166
黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端
学成在线案例——黑马程序员pink老师\思路讲解\完整源代码
imByte的博客
08-14 6834
本文为跟随B站黑马程序员pink老师学习CSS时所写，文章讲解了学成在线首页的制作思路，并贴出了源代码，作为学习笔记分享给大家 如有错误，欢迎指出。如有侵权，联系删除 文章目录1. 案例准备工作2. CSS属性书写顺序3. 页面布局思路4. 确定版心5. 头部制作6. banner 制作7. 精品推荐小模块8. 精品推荐大模块9. 底部模块10. 完整源代码 总体制作效果如下，完整源代码见文末 1. 案例准备工作 本案例采取结构与样式相分离思想 images中存储所用图片 index.h.
03 day1--javascript笔记pink老师-基础知识 看这一篇就够了！
小女不才
08-30 3278
内容 链接 day1 基础知识大总结 链接 day2 基础知识之函数与作用域 链接 day3 基础知识之对象与内置对象 链接 day4 进阶之DOM技术 链接 day5 进阶之BOM技术 链接 day6 提高之面向对象 链接 day7 提高之ES6 链接 1 初识JavaScirpt JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思） 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来...
黑马程序员pink老师Javascript语法基础 | 总结
Caiyii530的博客
07-31 1495
Javascript caiyi 2021/7/30 初识JS 解释型语言和编译型语言： 程序语言翻译成机器语言，一种是编译，一种是解释 编译器在代码执行之前编译，生成中间代码文件 解释器是在运行是进行及时解释，并立即执行 运行在客户端的脚本语言，不需要编译，运行过程中由js解释器逐行来进行解释并执行 现在也可以基于node.js技术进行服务器端的编程 作用：表单动态校验，网页特效，服务端开发，桌面程序，app，物联网，游戏开发 浏览器执行JS简介： 渲染引擎：解析HTML/CSS JS引擎：读取
CSS实现: 水平居中 的几种方法
热门推荐
qq_53985958的博客
06-28 2万+
margin值auto、position(子绝父相)+偏移值left+margin-left、position+偏移left+CSS2d transform、text-align:center;+display:inline-block;、display:flex;justify-content:center;margin塌陷:父元素为BFC:overflow:hidden;只设置left:50%;不能实现水平居中:left:50%;与transform:translateX(-50%);中的50%意义不同
该仓库是基于黑马程序员-Pink老师的前端入门教程, 对前端基础知识进行系统性学习。包括HTML + CSS.zip
最新发布
03-08
可以在这些基础上学习借鉴进行修改和扩展，实现其它功能。 【无积分此资源可私信博主有偿获取】 可放心下载学习借鉴，你会有所收获。 —— 对于学习和实践，选择合适的项目和资源确实是一种有效的方式。 在进行毕业...
HTML5、CSS3零基础入门（超详细）
02-19
根据pink老师的课程做的学习笔记 学习HTML、CSS以及HTML5 CSS3新增的属性、看完这篇文章你就学会了
pink老师html＋css综合案例个人练习
03-13
在“pink老师html+css综合案例个人练习”中，我们可以看到一个关于HTML和CSS技术应用的实际项目。这个练习可能是为了帮助学习者巩固和提升他们在HTML结构化标记语言和CSS样式表语言方面的技能。日期标注为“2023.3....
HTML+CSS的入门知识点总结
09-20
HTML+CSS入门知识点总结 HTML（HyperText Markup Language）是用于创建网页的标准标记语言，而CSS（Cascading Style Sheets）是用于控制网页样式的语言。本文将总结HTML+CSS的入门知识点，涵盖HTML的基本结构、CSS...
相片展示类CSS模板8582_html网站模板_网页源码移动端前端_H5模板_自适应响应式源码.rar
08-05
该压缩包文件“相片展示类CSS模板8582_html网站模板_网页源码移动端前端_H5模板_自适应响应式源码.rar”包含了创建一个照片展示网站所需的全部资源，特别适合那些想要构建一个优雅且功能丰富的移动端前端网页的人。...
2019传智最新黑马前端39期视频课程 .txt
08-17
2019传智最新黑马前端39期视频课程 本套视频为传智2019web前端开发全套视频教程基础班+就业班，视频+源码+案例笔记，全套高清不加密~2019最新传智播客视频！ 本教程是实战派课程！为传智最新web前端39期，课程由教学视频+案例源码+教学课件组成，边看边练，效果好！全部课程无加密，无加密，无加密。本套课程，特别适合零基础者进行系统学习前端！
pink老师 黑马程序员 p215
Jing0921的博客
09-22 242
世纪佳缘 <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>世纪佳缘</title> <style>
黑马程序员pink老师_CSS学习笔记
weixin_46764819的博客
03-07 1万+
CSS参考手册网址 一、CSS字体样式属性 font-size：字号 相对长度单位 说明 em 相当于当前对象内文本的字体尺寸 px 像素【最常用，推荐使用】 绝对长度单位 说明 in 英寸 cm 厘米 mm 毫米 pt 点 font-family：字体样式 p { 　　font-family: "宋体"；／＊可以写多个字体，用英文逗号隔开，表示找不到１字体去找２字体，.
CSS实现水平垂直居中的五种方法
Ned的CSDN博客
12-22 6055
前言 今天来看看一个之前困扰我很久的问题，在CSS中，水平垂直居中，能有几种写法。 方法一：margin:auto 子绝父相，当元素绝对定位的时候，会根据最近父元素进行定位，利用这个特性，我们有了这种方法。 CSS代码： div{ width: 600px; height: 600px; position: relative; border: 1px solid #000000; } img{ position: absolute; margin: auto
前端Javascript第一天理论：初识 JavaScript
m0_46597922的博客
04-20 425
1. 初识 JavaScript 1.1 JavaScript 是什么 布兰登·艾奇（Brendan Eich，1961年～）。 神奇的大哥用10天完成 JavaScript 设计。 最初命名为 LiveScript，后来在与 Sun 合作之后将其改名为 JavaScript。 JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思） 脚本语...
黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程（HTML）
m0_51448653的博客
09-27 1955
一、基础班学习路线 二、HTML5基础 1.网页的相关概念 什么是网页 网站是网页的集合 网页是网站中的一页，通常是HTML格式的文件，网页是构成网站的基本元素，常见以**.htm或.html**后缀结尾的文件 什么是HTML HTML指的是超文本标记语言，它是用来描述网页的语言 HTML不是一种编程语言，而是一种标记语言。标记语言是一套标记标签。 2. ...
黑马pink老师的HTML基础总结
weixin_42575796的博客
08-22 3200
文章目录HTML基础总结1.格式标签2.图像3.链接4.特殊字符5.表格6.列表6.1.无序列表6.2.有序列表6.3.自定义列表7.表单 HTML基础总结 学习于黑马程序员pink老师的教程 Web标准的构成主要包括结构( Structure)、表现 ( Presentation )和行为( Behavior )三个方面。 构成 作用 结构 结构用于对网页元素进行整理和分类，现阶段主要学的是HTML. 表现 表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS 行为
跟着黑马程序员pink老师学习的笔记及小破站学习的笔记
我是一只蘑菇17的博客
07-22 3601
网页 1.什么是网页？ 网页是
黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程（CSS字体，文本）
m0_51448653的博客
10-12 964
一、基础班学习路线 三、CSS3基础 1.CSS简介 CSS是 层叠样式表 的 简称，有时也称为 CSS样式表 ，级联样式表 也是一种标记语言 CSS主要用于设置HTML页面中的文本内容，图片的外形以及版面的布局和外观显示样式 2.CSS语法规范 CSS规则由两个主要的部分构成：选择器以及一条或多条声明 ...
黑马程序员css笔记pink
02-02
黑马程序员是一家知名的IT培训机构，他们提供了一系列的编程教育课程。其中，CSS（层叠样式表）是前端开发中非常重要的一部分，用于控制网页的样式和布局。关于黑马程序员的CSS笔记，我无法提供具体的介绍，因为我...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值