Day03

属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo a{
            float:left;
            display: block;
            height: 50px;
            width:50px;
            border-radius:10px;
            background: #b5c1cd;
            text-align:center;
            color:greenyellow;
            text-decoration: none;
            margin-right: 5px;
            font:bold 20px/50px Arial;
        }
        /*属性名=属性值（正则 ）
                = 绝对等于
                *= 包含这个元素
                ^= 以这个开头
                $= 以这个结尾
                   */
        /*存在id属性的元素   a[id]{}
    (属性名)    a[id]{
            color:red;
        }

    (属性名=属性值)    a[id=first]{
            background: indianred;
        }
        */
    /*class中有links的元素
      a[class*=links] {
          background: #a24fff;
      }
        */
    /*    选中href中以http开头的元素
        a[href^=http]{
            background: aqua;
        }
        */
        /*href以pdf结尾
        a[href$=pdf]{
            background: seagreen;
        }
         */
    </style>
</head>
<body>
<p class="demo">
<a href="http://www.baidu.com" class="links item first" id="first">1</a>
<a href="" class="links item active" target="_blank" title="test">2</a>
<a href="image/123.html" class="links item">3</a>
<a href="images/123.png" class="links item">4</a>
<a href="images/123.jpg"class="links item">5</a>
<a href="abc"class="links item">6</a>
<a href="/a.pdf"class="links item">7</a>
<a href="/abc.pdf"class="links item">8</a>
<a href="/abc.doc"class="links item">9</a>
<a href="/abcd.doc" class="links item last">10</a>
</p>
</body>
</html>

美化网页元素

3.1、为什么要美化网页

1.有效传递页面信息

2.美化网页，页面漂亮，才能吸引用户

3.凸显页面的主题

4.提高用户的体验

span标签：重点要突出的字，使用span套起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #title1{
        font-size: 50px;
    }
</style>
<body>
欢迎学习<span id="title1">java</span>
</body>
</html>

3.2.字体样式

<style>
    /*斜体 更细 大小 字体*/
    p{
        font: obliqe lighter 16px 楷体;
    }
</style>

3.3.文本样式

1.颜色 color rgb rgba

2.文本对齐方式 text-align=center

3.首行缩进 text-indent:2em

4.行高 line-height

5.装饰 text-decoration (上中下划线)

6.文本图片水平对齐：vertical-align:middle

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #title1{
        font-size: 50px;
    }
    body{
        font-family: 楷体;
    }
    h1{
        font-size: 50px;
        color: #a24fff;
    }
    .p1{
        font-weight: bold;
    }
    .l1{
        text-decoration: underline;
    }
    .l2{
        text-decoration: line-through;
    }
    .l3{
        text-decoration: overline;
    }
</style>
<body>
<p class="l1">1111111</p>
<p class="l2">2222222</p>
<p class="l3">3333333</p>
欢迎学习<span id="title1">java</span>
<h1>心是净土，滋生万物</h1>
<p class="p1">倘若你的生命足够的纯洁，我们的心便可以滋生花，滋生草，滋生万物，小花招展着微笑，小草深情对视，从你的心开始成为净土的那一刻，就意味着你一定会有丰富的生命。</p>
<p>我一直在修行的路上，慢慢清空杂念，清空杂质，生命方才犹如水晶般清莹，我内在的力量总会越来越强大，总有一天，我会站在那一座属于我的高台，去眺望属于我的碧海蓝天。</p>
<p>心，是无比美丽的爱的结晶，生命来到这个世界上，是带着父母的爱来的，每个人的心之所以有力量，是因为父母注入了爱的力量</p>。
<p>我们的心，像一座城堡，华丽无比，又强大无比，心，是美丽的亭台楼阁，是支撑我们生命的支柱，在每一刻，宽容盛放，爱盛放，温暖盛放，温柔盛放。</p>
<p>每一个生命之所以美丽，是因为有着温柔无比的心，我爱着这个世界，所以不管风雨有多大，我都会迎面向你走来，不管岁月有多忧伤，我总是盛满温情，等待着陪你走一程。</p>
<p>心，能滋生万物，是因为内在的力量，它向阳，追光，积极，绽放，于是成为了光，我们的心灵，十分的渺小，却有着强大的力量，这就是爱的奇迹。</p>
<p>无论过去，现在还是未来，我都一直在专注自己的起心动念，过去的我有多痛苦，我就集中精力想着，过去一定会过去的，在有一天，我的杂念将制止，我将注入力量，获得的是生命的力量。</p>
<p>修行，看似简单，却是一生的事，心灵，看似渺小，却是生命的支撑，当我们不断修行，内在一定有一处栖息地，是属于你的净土，让智慧之花开放，让灵性之草成长，让心灵的阳光一直照耀，所以我们要一直走下去，在未来的远方，遇见更好的自己。</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    水平对齐~参照物， a,b-->
    <style>
        img,span{
            vertical-align:middle;
        }

    </style>
</head>
<body>
<p>
    <img src="images/img.png" alt="">
    <span>asdsadsfsdfdfsvdsdfs</span>
</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
/*颜色：
        单词
        RGB 0~F
        RGBA-->
        text-align排版
        text-indent缩进
        height:300px;
        line-height:300px;行高和块的高度一致，就可以上下居中
*/
    h1{
        color:#a24fff;
        text-align: center;
    }
    p{
        text-indent: 2em;
    }
    .p3{
        background: #3748ff;
        height: 300px;
        line-height:300px;
    }
</style>
<body>
欢迎学习<span class="title1">java</span>
<h1>心是净土，滋生万物</h1>
<p class="p1">倘若你的生命足够的纯洁，我们的心便可以滋生花，滋生草，滋生万物，小花招展着微笑，小草深情对视，从你的心开始成为净土的那一刻，就意味着你一定会有丰富的生命。</p>
<p>我一直在修行的路上，慢慢清空杂念，清空杂质，生命方才犹如水晶般清莹，我内在的力量总会越来越强大，总有一天，我会站在那一座属于我的高台，去眺望属于我的碧海蓝天。</p>
<p class="p3">心，是无比美丽的爱的结晶，生命来到这个世界上，是带着父母的爱来的，每个人的心之所以有力量，是因为父母注入了爱的力量</p>。
<p>我们的心，像一座城堡，华丽无比，又强大无比，心，是美丽的亭台楼阁，是支撑我们生命的支柱，在每一刻，宽容盛放，爱盛放，温暖盛放，温柔盛放。</p>
<p>每一个生命之所以美丽，是因为有着温柔无比的心，我爱着这个世界，所以不管风雨有多大，我都会迎面向你走来，不管岁月有多忧伤，我总是盛满温情，等待着陪你走一程。</p>
<p>心，能滋生万物，是因为内在的力量，它向阳，追光，积极，绽放，于是成为了光，我们的心灵，十分的渺小，却有着强大的力量，这就是爱的奇迹。</p>
<p>无论过去，现在还是未来，我都一直在专注自己的起心动念，过去的我有多痛苦，我就集中精力想着，过去一定会过去的，在有一天，我的杂念将制止，我将注入力量，获得的是生命的力量。</p>
<p>修行，看似简单，却是一生的事，心灵，看似渺小，却是生命的支撑，当我们不断修行，内在一定有一处栖息地，是属于你的净土，让智慧之花开放，让灵性之草成长，让心灵的阳光一直照耀，所以我们要一直走下去，在未来的远方，遇见更好的自己。</p>
</body>
</html>

3.4.阴影

text-shadow:阴影颜色，水平偏移，垂直偏移，阴影半径

3.5超链接伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*默认的颜色*/
        a{
            text-decoration:none;
            color: #000000;
        }
        /*鼠标悬浮的颜色*/
        a:hover{
            color: orange;
        }
        /*鼠标按住未释放的颜色*/
        a:active{
            color:green;
        }
        /*text-shadow:阴影颜色，水平偏移，垂直偏移，阴影半径*/
        #price{
            text-shadow: #37ff66 10px 3px 2px;
        }
    </style>
</head>
<body>
<a href="#">
    <img src="images/R-C.jfif" alt="">
</a>
<p>
    <a href="#">码出高效：java开发手册</a>
</p>
<p>
    <a href="">作者：123</a>
</p>
<p id="price">
    $99
</p>
</body>
</html>

3.6.列表

#nav{
    width:300px;
    background: #b5c1cd;
}
.title{
    font-size:18px;
    font-weight: bold;
    text-indent: 1em;
    line-height:50px;
    background: red;
}
/*ul li*/
/*
    list-style:none  去掉圆点
    list-style:circle    空心圆
    list-style:square    正方形
*/
ul li{
    height:30px;
    list-style:none;
    text-indent:1em;
    background:#37ff66 ;
}
a{
    text-decoration:none;
    font-size: 14px;
    color:#000;
}
a:hover{
    color:orange;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="nav">
    <h2 class="title">全部商品分类</h2>
    <ul>
        <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
        <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>
        <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>
        <li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li>
        <li><a href="#">服装鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</a></a></li>
        <li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">钟表</a>&nbsp;&nbsp;<a href="#">珠宝</a></li>
        <li><a href="#">食品礼包</a>&nbsp;&nbsp;<a href="#">保健食品</a></li>
        <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href="#">重置</a></li>
    </ul>
</div>

</body>
</html>

3.7.背景

背景颜色

/* 设置渐变颜色*/

background-image:linear-gradient(角度，颜色占比，颜色占比)

背景图片

<style>
    div{
        width: 1000px;
        height: 700px;
        border: 1px solid red;   /*solid 实线*/
        background-image:url("images/图片.jfif");/*默认是全部平铺的*/
    }
    .div1{
        background-repeat:repeat-x;
    }
    .div2{
        background-repeat:repeat-y;
    }
    .div3{
        background-repeat: no-repeat;
    }
</style>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 1000px;
            height: 700px;
            border: 1px solid red;
            background-image:url("images/图片.jfif");/*默认是全部平铺的*/
        }
        .div1{
            background-repeat:repeat-x;
        }
        .div2{
            background-repeat:repeat-y;
        }
        .div3{
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>

盒子模型

4.1.什么是盒子模型

margin:外边距

padding：内边距

border：边框

4.2.边框

1.边框的粗细

2.边框的样式

3.边框的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*body总有一个默认的外边距  需要margin：0，常见操作*/
        h1,ul,li,a,body{
            margin: 0;
        }
        h2{
            font-size: 16px;
            background-color:red ;
            line-height: 30px;
            margin: 0;
        }
        #box{
            width:300px;
            border:1px solid red;
        }
        form{
            background: orange;
            margin: 0;
        }
        div:nth-of-type(1) >input{
            border:3px solid black;

        }
        div:nth-of-type(2) >input{
            border:3px dashed #f8e5a4;
            margin-top: 10px;
        }
        div:nth-of-type(3) >input{
            border:3px solid #c396f5;
            margin-top: 10px;

        }
    </style>
</head>
<body>
<div id="box">
    <h2>会员登陆</h2>
    <form action="#">
        <div>
            <span>用户名：</span>
            <input type="text">
        </div>
        <div>
            <span>密&nbsp;&nbsp;&nbsp;码：</span>
            <input type="text">
        </div>
        <div>
        <span>邮&nbsp;&nbsp;&nbsp;箱：</span>
        <input type="email">
    </div>
    </form>
</div>
</body>
</html>

posted @ 2022-10-05 22:40 宙斯xcl 阅读(71) 评论(0) 收藏举报

刷新页面返回顶部

xclxcl