background&&标签分类&&选择器&&基本网站布局&&浮动

最新推荐文章于 2022-11-07 23:15:53 发布

二三子_

最新推荐文章于 2022-11-07 23:15:53 发布

阅读量387

点赞数

分类专栏： Web前端技术文章标签： html css html5 css3

本文链接：https://blog.csdn.net/dai_0724/article/details/115449758

版权

Web前端技术专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、background

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            height: 400px;

            /* background：值可以直接书写颜色 */
            /* background:lime; */
            /*  background-color只能设置颜色 可以是英文或者十六进制或者rgba*/
            /* background-color:red; */
            /* rgba  前三个表示红绿蓝 a透明度0-1 */
            /* background-color: rgba(255,0,0,0.4); */

            /* 
                    第一个值代表的值图片地址
                    第二个值代表的是平铺方式 默认是平铺 no-repeat不重复  repeat-x水平轴重复  repeat-y垂直重复
                    第三个值代表水平方向坐标   可以设置具体的值，但是也可以 left   center right 
                    第四个值代表垂直方向坐标   可以设置具体的值，但是也可以  top   center  bottom
                    第五个值 背景颜色 
                 */
            /* 
                红色不会生效，background相当于默认没有设置颜色为空
                background-color: red;
                background: url('pic.webp.jpg') no-repeat center bottom; 
            */
           
            /* 同样的样式，后写的生效  background包含了background-color/background-size/background-position*/
            background: url('pic.webp.jpg') no-repeat ;
            /*  单独的修改了颜色*/
            /* background-color: red; */
            /* 相当于重写了背景，后写的生效 */
            /* background:red; */

            /* 
                背景图片大小。第一个值：宽度  第二个值：高度。一般只设置一个值
                一般只设置一个值，另外一个值计算机等比例计算。
                如果只设置一个值宽度为该值，高度自适应
                auto  固定值  高度设置值，宽度自适应
                设置百分比的时候，参照物是当前标签

             */
            /* background-size:  auto 300px; */
            /* background-size: auto 50%; */
            /* 背景图片位置 第一个值水平 第二个值垂直 */
            /* background-position:100px 100px; */
            background-position-x: center;
            background-position-y:center ;
             

        }

        p {
            font-size: 40px;
            font-weight: bold;
            color: rgba(255, 0, 0, 0.4);
            background: green;
        }
        /* 
            img与background
                img:占位，引入重要图片 能被搜索引擎抓取通过alt属性(alt设置关键字)
                background不占位，引入装饰性图片 不能被搜索引擎抓取
         */
    </style>
</head>

<body>
   
    <div>
        文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
    </div>
    <p>文字</p>
</body>

</html>

二、标签分类

父级：第一层包裹该标签的就是该标签的父级
标签分类：
第一种：单双标签
单标签<标签名>或者<标签名/>
双标签<标签名></标签名>
第二种：行内标签、块级标签、行内块
块级标签：独占一行，默认宽度不设置由父级的宽度决定 p h1-h6 ul li ol div
行内标签：和其他元素并排，宽度和高度由内容决定，设置宽度和高度无效 a
行内块：和其他元素并排,设置宽度和高度有效 img

网页布局标准流：行内元素水平，块级元素垂直。

三、选择器

选择器{}

            选择器分类：
            标签名选择标签:直接通过标签名选择div  p  
            类名选择器:首先给标签取class值。使用的时候 .+类名
            交集选择器:交集中间没有空格   p.one标签名为p类名为one    .one.two类名为one和two
            并集选择器：使用逗号隔开div,p,a同时选择了div  p  a

            类名：一般需要有语义，不能以数字开头，只能英文开头，一般是纯英文
            一个标签可以有多个类名 class="类名1  类名2 ..."

选择器权重

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <!-- 
            css书写方式
            嵌入样式:把css放置在style标签对里
            行内样式：<标签 style="k:v;k:v"></标签>不推荐使用，权重高，不利于代码分离
         -->
        <style>
            *{
                color:yellow;
            }
            .txt{
                color:tomato;
            }
            div{
                color:red !important;
                font-size: 100px;
            }
            div{
                color:blue;
            }
            /* #id名 */
            #txt{
                color:mediumvioletred;
            }
        </style>
    </head>
    <body>
        <!-- 
            选择器权重可以叠加
            选择器权重
            权重一样后写的生效,权重不一样的时候，取决于权重高的。
            权重高低：*<标签选择器(1g)<类名选择器(1kg)<id名(1吨)<行内样式<!important(提升的是一个样式的权重，不是一个选择器)
            id以后的选择器，都不推荐，权重太高，不利于后期维护
         -->

         <!-- id名不推荐使用 id名太高，不容易维护 -->
         <!-- class相当于人名，可以有多个，可以一样 id相当于身份证，唯一性(一个标签只能有一个，自己的不能和别的重复) -->
         <div class="txt" id="txt" style="color:olivedrab;font-size:20px">
             文字
         </div>
        
    </body>
</html>

四、基本网站布局

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            /* 
                一般一个页面只有一个版心，找到最容易测量的地方，测量版心
                网站布局：先整体，再局部
            
             */
            *{
               margin: 0px;
               padding: 0px; 
               list-style: none;
            }
            .header{
                height:74px;
                background-color: lime;
            }
            .header .nav{
                width: 968px;
                height: 74px;
                /* background-color: linen; */
                /* 块级标签居中 */
                margin-left:auto;
                margin-right:auto;
            }
            .banner{
                height: 424px;
                border-bottom: 1px solid #000;
                background-color: pink;
            }
            .con{
                width: 968px;
                height: 424px;
                background-color: linen;
                /* 块级标签居中 */
                margin-left:auto;
                margin-right:auto
            }
            .menu{
                width: 968px;
                height: 374px;
                background-color: olivedrab;
                margin-top:30px;
                margin-bottom:29px;
                /* 块级标签居中 */
                margin-left:auto;
                margin-right:auto
            }
            .footer{
                width: 968px;
                height: 67px;
                background-color: limegreen;
                 /* 块级标签居中 */
                 margin-left:auto;
                margin-right:auto
            }
            .nav h1{
                float: left;
            }
            .nav img{
                height: 42px;
                margin-top: 14px;
            }
            .nav ul{
                float: right;
            }
            .nav li{
                float: left;
                font-size: 12px;
                font-weight: bold;
                padding:9px 8px;
                margin-top: 21px;
                margin-right: 4px;
            }
            /* 给标签增加鼠标移入的样式  选择标签:hover{样式} */
            .nav li:hover{
                background-color: magenta;
                /* 鼠标移入增加小手的效果 */
                cursor: pointer;
                /* 增加圆角效果 值越大，圆角效果越明显*/
                border-radius: 40px;
            }
        </style>
    </head>
    <body>
        <!-- span引入小元素 -->
        <span></span>
        <div class="header">
            <div class="nav">
                <!-- logo一般要使用h1(浏览器对h1比较敏感) 一般一个页面只有一个h1 引入公司logo -->
                <h1>
                    <a href="#">
                        <img src="https://res.wx.qq.com/a/wx_fed/weixin_portal/res/static/img/dNEBuK6.png" alt="">
                    </a>
                </h1>

                <!-- 导航 一般使用的ul li-->
                <ul>
                    <li>首页</li>
                    <li>首页</li>
                    <li>首页</li>
                    <li>首页</li>
                    <li>首页</li>
                    <li>首页</li>
                </ul>
            </div>
        </div>
        <div class="banner">
            <div class="con"></div>
        </div>
        <div class="menu"></div>
        <div class="footer"></div>
    </body>
</html>

<!-- 

  网站布局：首选标准流(行内元素水平，块级元素垂直)
 -->

浮动

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            *{
                margin: 0px;
                padding: 0px;
                /* 清除列表样式 ul ol */
                list-style: none;
            }
            /* 
                标准流中，不设置标签高度，高度由内容决定

                浮动以后，父级检测不到子级的高度,如果子级浮动，浮动不设置高度，高度为0。如果没有高度，结构不稳定,这种现象称为浮动塌陷。
                第一种解决办法，给父级设置高度(如果子级动态渲染，设置固定高度会有问题)
                第二种：给父加overflow:hidden
             */
            ul{
                background-color: magenta;
                overflow: hidden;
            }
            li{
                width: 100px;
                height: 100px;
                background-color: lime;
                /* float实现水平排列 只有两个值left  right(父级内部的左边或者右边) 浮动的时候，从上到下执行(最上面的标签先浮动)*/
                /* float:left */
            }
            .left{
                float: left;
            }
            .right{
               float: right;
            }
        </style>
    </head>
    <body>
        <ul>
            <!-- <li>3</li> -->

            <li class="left">1</li>
            <li class="right">2</li>
            <!-- <li>4</li> -->
        </ul>
       
    </body>
</html>