html+css,part 3

已于 2022-02-06 12:07:11 修改
阅读量121 收藏 1
点赞数 1
分类专栏： 笔记 文章标签： css html html5
于 2021-09-25 17:31:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Titijiang233/article/details/119958851
版权

目录

CSS三大特性

1.层叠性

2.继承性

3.优先级

优先级注意事项

 权重的叠加

盒子模型 边框border

border复合写法

表格细线边框

盒子模型内边距padding

padding复合写法

新浪导航栏

 小米侧栏修改

padding不会撑开盒子的情况

盒子模型外边距margin

 外边距典型应用

清除内外边距 

综合案例1

 综合案例2

CSS三大特性

1.层叠性

<!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>
        .div {
            color: blue;
        }

        #pp {
            color: rgb(226, 43, 43);
        }

        body {
            font-size: 50px;
        }
    </style>
</head>

<body>
    <div id="pp">春风不度玉门关</div>
</body>

</html>

2.继承性

<!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>
        div {
            color: rgb(17, 184, 226);
            font-size: 50px;
        }
    </style>
</head>

<body>
    <div>
        <p>龙生龙，凤生风，老鼠生的儿子会打洞</p>
    </div>
</body>

</html>

 

行高的继承

<!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>
        body {
            color: rgb(17, 184, 226);
            /* 原来行高的1.5倍 */
            font: 20px/1.5 'Microsoft YaHei';
        }

        div {
            font-size: 14px;
        }

        p {
            font-size: 40px;
        }
    </style>
</head>

<body>
    <div>一川烟草</div>
    <p>一川烟草</p>
</body>

</html>

  

3.优先级

运行结果：

但是style 权重更高

 <body>

    <div class="p" id="qwq" style="color: darkorchid;">一川烟草</div>

</body>

运行结果： 

 

!important        最重要 ，权重最高

 

 运行结果：

优先级注意事项

 

运行结果：

 权重的叠加

盒子模型 边框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>
        div {
            width: 200px;
            height: 200px;
            /* 边框颜色 */
            border-color: pink;
            /* 边框样式 */
            border-style: solid;
            /* 边框粗细 */
            border-width: 1px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

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>
        div {
            width: 200px;
            height: 200px;
            /* border-color: pink;
            border-style: solid;
            border-width: 1px; */
            /* 复合写法 */
            border: pink 1px solid;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

 上下左右边框可以分开写

而且具有层叠性

例如：

<!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>
        div {
            width: 200px;
            height: 200px;
            /* 其余边框 */
            border: dashed 10px purple;
            /* 上边框 */
            border-top: solid 5px pink;

        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

表格细线边框

<style>
        table {
            width: 600px;
            height: 249px;
        }

        table,
        td {
            border: purple 1px solid;
            /* 合并相邻的边框 */
            border-collapse: collapse;
            font-size: 14px;
            text-align: center;
        }
    </style>

 原来：

加了style之后：

 边框会影响盒子大小

盒子模型内边距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>
        div {
            width: 200px;
            height: 200px;
            background-color: rgb(255, 167, 167);
            padding-left: 50px;
            padding-right: 50px;
            padding-top: 50px;

        }
    </style>
</head>

<body>
    <div>愿你去往之地皆为热土，愿你将遇之人皆为挚友。万千祈福皆如愿，逐梦长路化坦途。万物更新，旧疾当愈，长安常安。</div>
</body>

</html>

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;
            line-height: 41px;
            border-color: #fcfcfc;
            color: #4c4c4c;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
        }

        .nav a {
            height: 41px;
            font-size: 12px;
            color: #4c4c4c;
            text-decoration: none;
            display: inline-block;
            padding: 0 20px;

        }

        .nav a:hover {
            background-color: rgb(228, 228, 228);
            color: #ff8500;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">设为首页</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>
        <a href="#">博客</a>
        <a href="#">微博</a>
        <a href="#">关注我</a>
    </div>
</body>

</html>

 小米侧栏修改

缩进用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>
        a {
            display: block;
            width: 234px;
            height: 42px;
            text-decoration: none;
            color: rgb(255, 255, 255);
            background-color: rgb(156, 155, 163);
            padding-left: 40px;
            line-height: 42px;
        }

        a:hover {
            background-color: rgb(255, 103, 0);
        }
    </style>
</head>

<body>
    <a href="#">手机</a>
    <a href="#">电视</a>
    <a href="#">笔记本 平板</a>
    <a href="#">家电</a>
    <a href="#">出行 穿戴</a>
    <a href="#">智能 路由器</a>
    <a href="#">电源 配件</a>
    <a href="#">健康 儿童</a>
    <a href="#">耳机 音箱</a>
    <a href="#">生活 箱包</a>
</body>

</html>

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>
        h1 {
            width: 100%;
            height: 200px;
            background-color: pink;
            padding: 30px;
        }

        div {
            width: 300px;
            height: 200px;
            background-color: rgb(154, 241, 103);
        }

        div p {
            width: 100%;
            padding: 30px;
            background-color: rgb(139, 0, 0);
        }
    </style>
</head>

<body>
    <h1></h1>
    <div>
        <p></p>
    </div>
</body>

</html>

 没给盒子width，盒子就不会变宽

给盒子   width:100%;    盒子就会变宽

给盒子里面的p加    width:100%;    padding，会超出盒子宽度

盒子模型外边距margin

<!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>
        div {
            height: 200px;
            width: 200px;
            background-color: rgb(255, 124, 124);
        }

        /* .one {
            margin-bottom: 20px;
        } */
        .two {
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div class="one">1</div>
    <div class="two">2</div>
</body>

</html>

 外边距典型应用

行内元素和行内块元素水平居中

 外边距合并

 

父元素和子元素的塌陷问题，加一个外边框就能解决

<!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>
        .father {
            width: 400px;
            height: 400px;
            background-color: rgb(255, 168, 168);
            margin-top: 50px;
            /* border: 1px blue solid; */
            /* border: 1px transparent solid; */
            /* padding: 1px; */
            overflow: hidden;
        }

        .son {
            width: 200px;
            height: 200px;
            background-color: rgb(91, 236, 205);
            margin-top: 100px;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>

 也可以将边框改为透明

transparent

 加内边距也能解决塌陷问题

padding:1px;

清除内外边距 

<!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>
        * {
            padding: 0;
            margin: 0;
        }

        span {
            margin: 20px;
        }
    </style>
</head>

<body>
    <div>456789</div>
    <ul>
        <li>asd</li>
    </ul>
    <span>行内元素尽量只设置左右边距，不设置上下边距</span>
</body>

</html>

综合案例1

产品模块布局

使用ps

<!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>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            background-color: #f5f5f5;
        }

        .box {
            width: 351px;
            height: 452px;
            background-color: #fff;
            /* 让块级盒子水平居中 */
            margin: 100px auto;
        }

        .name {
            /* padding: 0; */
            font-size: 17px;
        }

        a {
            text-decoration: none;
            color: black;
        }

        .review {
            padding-top: 5px;
            color: #b0b0b0;
            font-size: 10px;
        }

        .v {
            padding-top: 27px;
        }

        .v span {
            color: #ff7f00;
            font-size: 14px;
        }

        .v h4 {
            display: inline-block;
            color: #b0b0b0;
            font-weight: 400;
            font-size: 14px;
        }

        em {
            font-style: normal;
            color: #ebe4e0;
            margin-left: 20px;
            margin-right: 7px;
        }
    </style>
</head>

<body>
    <a href="#">
        <div class="box" align="center">
            <img src="images/手机.jpg" alt="">
            <p class="name">Xiaomi MIX 4</p>
            <div class="review">CPU全面屏</div>
            <div class="v">
                <h4>小米手机...</h4>
                <em>|</em>
                <span>4999元起</span>
            </div>
        </div>
    </a>
</body>

</html>

 

 综合案例2

 快报模块列表制作

<!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;
        }

        .box {
            width: 248px;
            height: 163px;
            border: 1px solid #ccc;
            margin: 100px auto;
        }

        .box h3 {
            height: 32px;
            border-bottom: 1px dotted #ccc;
            font-size: 14px;
            font-weight: 400;
            height: 32px;
            padding-left: 15px;
        }

        .box ul li a {
            font-size: 12px;
            color: #666;
            text-decoration: none;
        }

        .box ul li a:hover {
            text-decoration: underline;
        }

        li {
            /* 去掉li前面的小圆点 */
            list-style: none;
        }

        .box ul li {
            height: 23px;
        }

        ul {
            padding: 17px 0 0 18px;
        }
    </style>
</head>

<body>
    <div class="box">
        <h3>品优购快报</h3>
        <ul>
            <li><a href="#">【特惠】爆款耳机5折秒!</a></li>
            <li><a href="#">【特惠】母亲节，健康好礼低至5折！</a></li>
            <li><a href="#">【特惠】爆款耳机5折秒!</a></li>
            <li><a href="#">【特惠】9.9元洗100张照片!</a></li>
            <li><a href="#">【特惠】长虹智能空调立省1000</a></li>
        </ul>
    </div>
</body>

</html>

Titijiang233
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
纯HTML+CSS实现3D炫酷魔方（相册）
weixin_51261234的博客
12-22 7174
文章目录引言：效果演示：正文：1.HTML部分CSS部分：part 1.我们先实现大盒子在页面垂直水平居中的效果：part 2.我们来设置第二大盒子，加旋转效果。part 3.将外部盒子形成正方形盒子；注意每个面在X,Y,Z轴上的旋转角度。part 3.外部六面悬浮效果：part 4.实现内部的魔方part 5.添加音乐part 6.结束展示：代码：闲聊： 注意：完整代码在本文的最后面，前面分散的代码是我的讲解部分，如果只想使用代码，可以直接到本文的最下面取。 引言： ​ 本周我们专业实训，实训的内容是h
网页结构（html+css)
qq_46127986的博客
01-11 668
居中固定宽度 网页结构图 代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title&g
html+css+js之20个练手小项目（一）
热门推荐
qq_40312477的博客
11-07 1万+
html+css+js之20个练手小项目（一）——Hangman前言一、HTML二、CSS三、JS 前言 前端新手练习，记录不迷失。 主要练习html和CSS布局以及JS。 来源github，参考链接：使用html+css和纯js实现小项目 Hangman是一个单词拼写的小游戏，主要功能包括： （1）利用svg画小人图 （2）生成随机单词并展示 （3）单词正确与错误提醒 一、HTML HTML结构比较简单，主要使用了SVG构造小人。学习一下标签svg中的line,circle。 <!DOCTY
html+css实现常见的网页特效
戴翔的技术博客
10-09 2622
0. 效果预览 1. 文字遮罩 html <li class="big-grid havehover"> <a href=""> <div class="mask"> </div> <div class="circle"> <p> 城市 </p> <p> CityWalk </p> </div> <div class=
HTML+css制作简单游戏界面
qq_53541336的博客
08-31 3188
开学在即闲来无事在家做了一个简单的游戏开始界面，下面看看具体代码吧，其实非常的简单这里只用HTML和css做的静态页面。
HTML + CSS +JavaScript 实战小项目 【实现动画导航栏效果】
m0_72773837的博客
05-10 1095
HTML + CSS + JavaScript 小项目 实战
HTML+CSS基础知识点(part10)
2201_75597173的博客
06-24 742
keyframes 动画名称 {from{ 开始位置 }to{ 结束 }@keyframes 动画名称 {0%55%....100%/* 关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意*/
HTML5+CSS3静态网页开发 —— 慕云游项目
明哥
07-19 1394
难度：⭐⭐（中等）——适合学习完html5和css3的小伙伴用于巩固练习 编辑器:WebStorm慕云游项目是一个基于HTML5和CSS3的静态网页开发项目。在项目中，使用了一些HTML5和CSS3的新功能和特性来创建一个具有现代化外观和交互性的网页。使用语义化的HTML结构：在项目中，我们遵循了HTML5的语义化标签，如等来更好地描述页面的结构和内容。
HTML+CSS（part 2）
XSL_HR的博客
09-07 428
此blog是主要是对css重点知识的总结，由本人结合所学和笔记资料整理得出，欢迎交流，互相进步！
【web开发网页制作】Html+Css网页制作关于明星介绍王嘉尔（5页面）【附源码下载】
赏樱看雪撸代码
12-07 1691
期末作业网页制作练习，网页制作大作业，介绍人物网页制作，网页制作demo源代码，简单的网页制作，html+css多页面样例，原创网页制作源代码。
HTML+css卷帘样式效果
11-19
这个效果通常通过CSS3的动画属性来实现，可以为用户提供一种交互式的视觉体验。 在HTML中，我们需要创建一个包含多个部分的结构，这些部分将作为卷帘效果的“窗帘”。例如，我们可以创建多个`<div>`元素，每个元素...
跟我学HTML+CSS.part1
09-11
跟我学HTML+CSS 分卷1 目录 第一章 HTML的基本概念 1.1 什么是HTML 1.2 HTML的发展历史
跟我学HTML+CSS.part2
09-11
跟我学HTML+CSS 分卷2 目录 第一章 HTML的基本概念 1.1 什么是HTML 1.2 HTML的发展历史
css+html.part3
12-26
这个是精通CSS之高级Web设计的书，个人感觉很好
HTML5_CSS3 从入门到精通 随书光盘 part2
10-10
HTML5_CSS3 从入门到精通 李东博著 随书光盘 part2，共4部分。
在一个使用了 Sass 的 React Webpack 项目中安装和使用 Tailwind CSS
最新发布
Chloeeeeeeee的博客
07-11 191
在使用了 Sass 的 React 和 Webpack 项目中安装和使用 Tailwind CSS，可以按以下步骤进行：安装 Tailwind CSS 及其依赖，并初始化配置文件；创建 `postcss.config.js` 并配置 Tailwind CSS 插件；在 `src` 目录中创建 `index.css` 并引入 Tailwind 的基础、组件和工具类；更新 Webpack 配置以处理 PostCSS 插件和 Tailwind CSS；最后在组件中导入 `index.css` 和 Sass 文件
CSS实现从上往下过渡效果
m0_56164131的博客
07-11 126
要实现一个从上往下显示的过渡效果，可以使用CSS的@keyframes规则来创建一个动画，使得元素在垂直方向上逐渐改变其位置。
css 自定义变量 var()
Z_Wonderful的博客
07-10 169
css的一个函数：`var()`，此函数在有些场景下能优化不少代码量。
CSS的选择器、常用属性、盒子模型和定位
secret010的博客
07-08 439
CSS选择器：选择页面(文档)中对应的标签，并设置样式。
有四个类名叫part1-pic-bg的盒子。id分别是part1-iconinfo1，part1-iconinfo2，part1-iconinfo3，part1-iconinfo4，在这个大盒子里面分别有一个类名叫part1-iconinfo的小盒子，，id值分别叫part1-iconinfo1-content，part1-iconinfo2-content，part1-iconinfo3-content，part1-iconinfo4-content，最初类名叫part1-iconinfo的盒子是隐藏状态，当点击大盒子的时候，对应的显示各自的小盒子，再次点击任意地方可以隐藏小盒子的html，css，jquery代码
05-26
<div class="part1-iconinfo3" data-target="part1-iconinfo3-content">Icon Info 3 <div class="part1-iconinfo4" data-target="part1-iconinfo4-content">Icon Info 4 <div class="part1-iconinfo" id="part1...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Titijiang233

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值