前端学习 02 —— CSS 02

最新推荐文章于 2024-10-04 06:11:34 发布

老板来碗小面加蛋~

最新推荐文章于 2024-10-04 06:11:34 发布

阅读量220

点赞数

分类专栏： # CSS 文章标签： html css html5

本文链接：https://blog.csdn.net/qq_39763246/article/details/113356640

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

系列文章目录

前端学习 01 —— HTML5
前端学习 02 —— CSS01
前端学习 02 —— CSS 02
前端学习 02 —— CSS 03
前端学习 03 —— JavaScript 01
前端学习 03 —— JavaScript 02

3、美化网页元素

3.1、为什么要美化网页

1、有效的传递页面信息

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

3、凸显页面的主题

4、提高用户的体验

span标签：重点要突出的字使用span标签套起来。标签本身没什么效果，主要是约定俗成，在span标签上通过class、id来定位美化，后面有一个div标签也是同理。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>span标签</title>
    <style>
        #title1{
            font-size: 40px;
        }
    </style>
</head>
<body>
学习<span id="title1">前端</span>
</body>
</html>

3.2、字体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            font-size: 40px;
        }
        .content{
            font-family: "Franklin Gothic Demi", 楷体;
            color: #ff6eb1;
            font-weight: bold;
        }
        /*
        font-style                  italic斜体、oblique倾斜
        font-variant                small-caps小型大写字母
        font-weight                 粗细
        font-size/line-height       大小/行高
        font-family                 字体
        */
        #last{
            font: italic small-caps bolder 20px/30px 宋体;
        }
    </style>
</head>
<body>
<h1>程序猿</h1>
<p class="content">程序员不是你们眼中的程序猿。程序猿是一种非常特殊的、可以从事程序开发、维护的动物。
    一般分为程序设计猿和程序编码猿，但两者的界限并不非常清楚，都可以进行开发、维护工作，
    特别是在中国，而且最重要的一点， 二者都是一种非常悲剧(加班)的存在。</p>
<p class="content">
    Programmers are not the programmers in your eyes.
    The programmer is a very special animal that can be engaged in program development and maintenance.
    Generally divided into programming apes and programming coding apes,
    but the boundary between the two is not very clear, both can be developed and maintained,
    especially in China, and most importantly, both are very tragedy )The presence.
</p>
<p id="last">程序猿都是Good Man！</p>
</body>
</html>

结果：

3.3、文体样式

CSS：

/*文本对齐居中*/
h1{
    text-align: center;
}
/*首行缩进 px是像素，em是字符，缩进一般用em */
p{
    text-indent: 2em;
}
/* 文本装饰：设置下划线、中划线、上划线*/
#p1{
    text-decoration: underline line-through overline;
}
/*图片文字垂直对齐*/
img, span{
    vertical-align: middle;
}
/*让文本垂直对齐：行高和块的高度相同，p标签是块*/
#p3{
    background: bisque;
    height: 50px;
    line-height: 50px;
}

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>程序猿</h1>
    <p id="p1">
        程序员不是你们眼中的程序猿。程序猿是一种非常特殊的、可以从事程序开发、维护的动物。
    </p>
    <p id="p2">
        <img src="images/1.png"><span>这是一只哈士奇。</span>
    </p>
    <p id="p3">程序猿都是Good Man！</p>
</body>
</html>

结果：

3.4、超链接伪类和文本阴影

a:hover比较常用！！

a{
    text-decoration: none;
    color: black;
}
/*
a:link     未访问的链接
a:visited  已访问的链接
a:hover    当有鼠标悬停在链接上
a:active   被选择的链接
*/
/*text-shadow属性是文本阴影：水平阴影位置、垂直阴影位置、模糊距离、阴影颜色*/
.a1:hover {
    color: red;
    text-shadow: 5px 5px 1px #8dff84;
}
.a2{
    text-shadow: 0px 0px 3px #4673ff;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p><a href="#"><img src="images/码出高效.png" alt="码出高效"></a></p>
<p><a href="#" class="a1">作者：杨冠宝 高海慧</a></p>
<p><a href="#" class="a2">价格：99￥</a></p>
</body>
</html>

结果：

3.5、列表

主要利用列表将之前所学的练习一下，顺便学习使用列表去掉前面的原点。

这里的div标签和之前的span标签一样，本身是没作用的，只是方便我们用来加上标识，例如这里我们没有使用原本的nav标签作为导航，而是通过div标签加上id=“nav”，一般开发也都是这样，逐步积累吧。

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.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></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>&nbsp;&nbsp;<a href="#">票务</a></li>
    </ul>
</div>
</body>
</html>

原效果：

在这里插入图片描述
CSS：

#nav{
    width: 250px;
    background: gray;
}
.title{
    background: red;
    font-size: 18px;
    font-weight: bold;
    line-height: 30px;
    text-indent: 1em;
}
a{
    text-decoration: none;
    font-size: 16px;
    color: black;
}
a:hover{
    color: orange;
    text-decoration: underline;
}
/*list-style属性:none去掉列表原点，circle空心圆，decimal数字，square方块*/
ul li{
    list-style: none;
}

结果：

3.6、背景图片及渐变

background里面可以使用image，默认放入的图片是平铺填满，所以需要配合no-repeat，同时也要利用position来调整图片位置。这些可以一次性利用background写完，就像font一样。

ul li{
    list-style: none;
    background-image: url("../images/right.png");
    background-position: 175px 3px;
    background-repeat: no-repeat;
}
.title{
    background: red url("../images/down.png") no-repeat 210px 10px;
    font-size: 18px;
    font-weight: bold;
    line-height: 30px;
    text-indent: 1em;
}

结果：

渐变色：通过linear-gradient实现，Grabient

可以去这个网站找一些好看的渐变色，里面直接复制代码。网站加载有点慢！

例如：复制这个到css里的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            background: #D9AFD9 linear-gradient(0deg, #D9AFD9 0%, #97D9E1 100%);
            width: 100px;
            height: 200px;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

结果：

4、盒子模型

4.1、什么是盒子

盒子模型分为外边距margin、边框border、内边距padding，我们可以在运行的网页上F12，然后选中某个元素查看其盒子模型，然后在浏览器上直接调整好，再复制到代码中。
在这里插入图片描述
盒子模型2

4.2、边框

边框border设置粗细、样式（实线、虚线）、颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*一般元素都有外边距，可以先设置为0，方便后面设置*/
        h1, body,div{
            margin: 0;
        }
        h1{
            text-align: center;
            font-size: 18px;
        }
        /*边框粗细、实线、颜色*/
        #box{
            border: 2px solid #9bfcff;
            width: 250px;
        }
        div input{
            border-width: 2px;
            border-style: dashed ;
            border-color: #4673ff;
        }
    </style>
</head>
<body>
    <div id="box">
        <h1>会员登录</h1>
        <form action="#">
            <div>
                <span>账号：</span>
                <input type="text">
            </div>
            <div>
                <span>密码：</span>
                <input type="password">
            </div>
        </form>
    </div>
</body>
</html>

结果：
在这里插入图片描述

4.3、内外边距

盒子的计算方式：margin+border+padding+内容宽度
在这里插入图片描述

那上面登录的div盒子来看，我指定了外边距为0，同时边框是2px，内边距也是2px，内容包括里面的表单等一共是250x70px。

/*margin 四个值就是上 下 左 右，两个就是 左右 上下*/
#box{
    border: 2px solid #9bfcff;
    width: 250px;
    margin: 0 auto;
}

修改下box的属性，设置margin：0 auto，表示该box上下外边距是0，左右外边距是自动，就能使该div页面水平居中，之前是默认放在左上角。通过这种方法设置的居中有前提，首先得是块级元素，其次要有固定宽度。
在这里插入图片描述

4.4、圆角边框及盒子阴影

可以利用边框来限制内容，甚至裁剪图片来作为头像(｀・ω・´) ，如下，将原本方形的图片加上圆角限制，这里图片原本是720x720，设置其宽高为70px后，将radius设置为一半就能变为圆形。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*border：粗细、实线、颜色*/
        #div1{
            width: 100px;
            height: 100px;
            background: #73ffd6;
            border: 5px solid #4673ff;
            border-radius: 20px;
            text-align: center;
            box-shadow: 3px 3px 3px #a82fff;
        }
        /*box-shadow和前面的text-shadow一样，阴影偏移x，y，模糊距离，颜色*/
        #tx{
            width: 70px;
            height: 70px;
            border-radius: 35px;
            box-shadow: 0 0 10px gold;
        }
    </style>
</head>
<body>
<div id="div1"></div>
<img id="tx" src="images/tx.jpg" alt="">
</body>
</html>