HTMLday8

最新推荐文章于 2024-06-17 19:56:22 发布
最新推荐文章于 2024-06-17 19:56:22 发布
阅读量103 收藏
点赞数
分类专栏： 微信小程序 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51213025/article/details/112796330
版权

背景综合案例

    <style>
        body {
            background-color: #000;
        }
        /* a是行内块元素没有宽高，display:inline-block;转为行内块元素  inline块元素 */
        a {
            display:inline-block;
            width: 200px;
            height: 50px;
            /* background-color: orange; */
            text-align: center;
            line-height: 50px;
            /* line-height=height的高度是垂直居中 一行才能生效*/
            color: #fff;
            font-size: 22px;
            text-decoration:none;         
            /* 文本装饰：line-through   删除线 
                        none            无线
                        underline       下划线  a链接文本自带的
                        overline        上划线 */
        }
        a:hover {
            color: orange;
        }
    </style>
</head>
<body>
    <a href="#">专区说明</a>
    <a href="#">申请资格</a>
    <a href="#">奖励总换</a>
    <a href="#">下载游戏</a>
</body>

在这里插入图片描述

导航栏案例

    <style>
        nav {
            height: 41px;
            background-color: rgb(236, 236, 236);
            border-top: 3px solid #FF8500;
            border-bottom: 1px solid #EDEF00;
        }
        nav a {
            font-size: 16px;
            color: #3a3a39;
            text-decoration: none;
            /* 取消下划线 */
            padding:0 15px;
            height: 41px;
            background-color: rgb(116, 116, 116);
            /* 因为链接是行内元素 转为行内块元素 */
            display:inline-block;
            line-height: 41px;
            /* padding-top: 20px; */
        }
        nav a:hover {
            background-color: blue;
        }
    </style>    
</head>
<body>
    <nav>
        <a href="#">首页</a>
        <a href="#">新浪网</a>
        <a href="#">网站导航</a>
        <a href="#">姜云升</a>
    </nav>
</body>

在这里插入图片描述

盒子border

    <style>
        div {
            font-size: 30px;
            width: 200px;
            height: 200px;
            border-width: 5px;
            /* 边框宽度 粗细 */
            border-color: red;
            /* 边框颜色 */
            border-style: solid;
            /* 边框样式：    solid:单实线
                            dashed：虚线
                            dotted：电线
                            double：双实线 
                            */
        }
        input {
            border: 0;
            /* 取消border边框 */
        }
        .uesr {
            border-width: 1px;
            border-color: red;
            border-style: solid;
        }
        .nc {
            /* border-top: 1px;
            border-color: blue;
            border-style: solid; */
            border-top: 1px solid green;
        }
        .js {
            border-bottom: 1px;
            border-color: rgb(0, 255, 98);
            border-style: solid;
            /* border-collapse: collapse;合并边框 */
        }
        
    </style>
</head>
<body>
    <div>姜云升</div>
    姜云升<input type="text" class="uesr" /><br />
    姜云升<input type="text" class="nc" /><br />
    姜云升<input type="text" class="js" /><br />
</body>

内边距padding

        div {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            font-size: 40px;
            padding-left: 30px;
            padding-right: 100px;
            padding-top: 10px;
            /* 左边距 
            padding:上 右 下 左*/
        }

在这里插入图片描述

外边距margin

        * {
            margin:0;
            padding:0;
        }
        div {
            background-color: red;
            width: 200px;
            height: 200px;
            margin: 30px 100px 50px 10px;
            /* margin:上 右 下 左 */
        }

在这里插入图片描述

图片背景文字盒子对齐的区别

        div {
            width: 300px;
            height: 100px;
            border: 1px solid red;
            text-align: center;
            /* 文字水平居中 */
            margin: 10px auto;;
            /* 盒子水平居中 左右auto */
        }

    </style>
</head>
<body>
    1.文字水平居中 和 盒子水平居中
    <div>文字水平居中</div>
    2.插入图片和背景图片的区别
    <section>
        <p>插入图片用width height 直接改大小
            用margin- 改位置</p>
            <p>背景图片用background-size改大小
                用background-position改位置
            </p>
    </section>

在这里插入图片描述

圆角边框

        div {
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
        div:first-child {
            border-radius: 10px;
            /* 圆角边框 可以变成圆
            border-radius:左上 右上 右下 左下
             */
        }

在这里插入图片描述

        div:nth-child(2) {
            border-radius: 100px;
            /* 取宽度和高度的一半会变成圆形 或者 50%*/
        }

在这里插入图片描述

        div:nth-child(3) {
            border-radius: 10px 110px ;
            /* 取宽度和高度的一半会变成圆形 或者 50%*/
            background-color: yellow;
            border-style: none;
        }

在这里插入图片描述

css层叠性就近原则

        div {
            color: orange;
            font-size: 20px;
        }
        div {
            color: blue;  css层叠性就近原则
        }



    <div>王可可 dog</div>

根据就近原则文字会显示blue蓝色
在这里插入图片描述

css继承性

        div {
            color: blue;
            font-size:100px;
        }

    <div>
        <p>姜云升</p>
    </div>

子标签会继承父标签的内容 p 继承 div 内容 字体显示blue蓝色
在这里插入图片描述

选择器小到大优先级

.batter :first-child同级 就近原则


        div {
            color: blue;
            font-size: 30px;
        }        
        .batter {
            color: black;
        }
        :first-child {
            color: rgb(192, 0, 0);
        }
        #wang {
            color: rgb(255, 160, 200);
        }
        /* style="color: rgb(11, 255, 223); */
        div {
            color: rgb(174, 0, 255)!important;
        }

    <div class="batter" id="wang" style="color: rgb(11, 255, 223);">姜云升</div>
有在学习了
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTMLday0618
m0_71108047的博客
06-18 327
一行内显示的元素当空间不足时,会自动换行排列行内以及行内块元素如果HTML元素中间有回车符会被解析为空白符,会有空白。
HTMLday0619
最新发布
m0_71108047的博客
06-19 171
CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位普通流（标准流）块级元素会独占一行，从上向下顺序排行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行；浮动让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示。定位将盒子定在浏览器的某一个位置——CSS 离不开定位，特别是后面的 js 特效清除浮动的影响。
HTMLday0613
m0_71108047的博客
06-14 216
【代码】HTMLday0613。
HTMLday1
hlx250217的博客
07-06 81
---文宇、图片、音频、视频、超链接 打开网页看见的网页的背后：前端程序员写的代码 一------京东网页源代码。不同的标签具有不同的属性 不起作用。1S0 8859-1=====>扩充一些希腊字符 （256)--欧洲人。GBK======》 继续追加收录汉字和字符20000+，支持繁体中文。ASCIl=====》大小写字母、数宇、符号（128个表） 美。6B2312======>扩充6763个汉字，682个字符。包含关茶（父子标签）、并交系（兄弟关系）
HTMLday2
hlx250217的博客
07-07 96
13-css的三种引入方式。09-html的全局属性。10-html5语义标签。07-表单的基本结构。08-常见的表单元素。
HTMLday0614总结
m0_71108047的博客
06-14 312
h-shadow水平阴影 v-shadow垂直阴影 blur模糊半径 color阴影颜色h 正 向右 V 正 向 下。
HTMLday0617总结
m0_71108047的博客
06-17 269
important>行内样式表>ID选择器>类选择器>标签选择器>通配符>继承的样式>浏览器默认样式。保持标记位于文本的左侧，列表项目标记放置在文本以外，且环绕文本不根据标记对齐。/* 下面属性不具有继承性:边框,外边距,内边距,背景,定位元素宽高属性 */复合选择器的权重无论为多少个标记选择器和类选择器的叠加,其权重都不会高于id选择器。复合选择器的权重无论为多少个标记选择器的叠加,其权重都不会高于类选择器。double 双实线。类选择器的权重为10。id>类>标记选择器。square 实心方块。
htmlday1
hpsym的博客
12-29 525
</head> <body> <!-- 1.标题标签:h1~h6 --> <h1>一级标题</h1> <h2>二级标题</h2> <!-- 2.段落标签 --> <p>fsjfshfhjhfhsj</p> <!-- 3.行内文字标签:span --> <span>张阿士大夫撒积分</span> ...
前端HTMLday01
m0_74070936的博客
11-15 59
对于img,video,audio等标签都具有src属性负责接收对应文件，由相对路径和绝对路径两种属性书写方法，绝对路径由于过于死板，在开发过程中使用频率不高。HTML作为对网页内容最基础的处理和修饰，在VSCODE上运行时输出!“内容”由一个一个标签填充。
htmlday2笔记
09-20
HTML是用于创建网页的标准标记语言，本篇笔记主要讲解了两个关键元素：图片标签`<img>`和表格标签`<table>`，以及相关的属性和用法。 首先，我们来看图片标签`<img>`。这是一个单标签，用于在网页中插入图片。...
数组求平均值
热门推荐
qq_51213025的博客
01-25 1万+
数组求平均值 1.先定义变量sum=0求和，变量avr=0求平均数 2.让数组从第0位开始，每个元素相加到变量sum中 3.用变量sum除以数组的长度，求出平均值 4.打印在页面中 <script> var arr = [2,6,1,7,4]; var sum = 0,avr = 0; for(var i = 0;i < arr.length;i++){ sum += arr[i]; }
displayDate显示时间
qq_51213025的博客
01-20 2521
displayDate显示时间 <h1>姜云升</h1> <p id="demo">点击切换当前时间</p> <button type="button" onclick="displayDate()">显示时间</button> <script> function displayDate() { document.getElementById
求1-100之间所有整数的累加，平均值，偶数和奇数和，能被3整除的数
qq_51213025的博客
06-21 1455
求1-100之间所有整数的累加 分析: 1、循环100次要有个计数器i 2、要有一个存储累加结果的变量 sum ，sum 初始值=0 3、sum=sum+i； <script> var sum=0; for (var i = 1;i <= 100;i++) { sum +=i // sum =sum +i; } console.log(sum); </script>
js计算年龄、简单加法器
qq_51213025的博客
06-17 1181
计算年龄案例 分析 1、弹出输入框，输入出生日期 2、用今年年份减去出生年份得出年龄 3、弹出alert，输出结果 <script> var year = prompt('输入年份'); var age =2020 -year; alert(age); </script> ...
输入人数，成绩，打印出班级总成绩和平均值
qq_51213025的博客
06-21 1029
输入人数，成绩，打印出班级总成绩和平均值 var aver =0 ; var score = 0; var sum = 0; var num = prompt ('输入班级总人数'); for ( var i = 1 ; i <= num; i ++) { var score =prompt('第' + i + '人成绩'); sum = sum + parseFloat
js函数的语法基本结构
qq_51213025的博客
06-24 561
1、声明函数 语法： function 函数名 （形参） { 函数体 } 2、调用函数 语法： 函数名（实参）； <script> 1、声明函数 function getsum() { var sum =0; for (var i =0; i <=100; i++) { sum += i ; } console.log(su
登录表单跳转
qq_51213025的博客
07-02 374
登录： <!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&g
国内有哪些热门前端开发的论坛 ，给出地址
03-31
1. 掘金：https://juejin.cn/frontend ...8. 前端网（前端资源分享）：http://www.qdfuns.com/ 9. 前端大全（前端资源库）：http://www.htmlday.com/ 10. 前端工具集（前端工具）：https://www.html.cn/
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值