前端--CSS

最新推荐文章于 2022-05-10 16:04:12 发布

天才小楼楼

最新推荐文章于 2022-05-10 16:04:12 发布

阅读量411

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/sinat_29214327/article/details/82259221

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、CSS是什么?

CSS对网页上的元素(即对HTML标签)做一个优化，排版，布局，是整个网页看起来更漂亮！

1.1、网页布局的三个阶段
1、table网页设计内容和样式(外观和布局)混合
2、table+css网页设计 table布局,css指定外观
3、div+css网页设计 div放内容,css指定样式(外观和布局), 内容和样式彻底分离

1.2、 CSS的基本概念
CSS（cascading style sheet，层叠样式表)是一种制作网页的新技术，现在已经为大多数浏览器所支持，成为网页设计必不可少的工具之一。

1.3、 CSS的优点
使网页代码更少，网页下载更快
实现了内容与样式的分离，使网站维护更快捷
使网页与浏览器的兼容性更好

二、CSS的语法结构

每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束

FZSFP.md.png

注意：在CSS中，选择器是非常重要的，它制定了对哪些元素进行样式设置

三、CSS的三种引入方式

3.1、行内样式

直接在HTML的标签使用style属性，将css代码直接写在其中！

<body>
    <p style="color:#ff0000; font-size:20px; ">正文内容 1</p>
    <p style="color:#000000; font-style:italic;">正文内容 2</p>
    <p style="color:#ff00ff; font-size:25px; ">正文内容 3</p>
    <div style="background-color: red">这行的背景是红色！</div>
</body>

效果图：

3.1、 内部样式

将内舒样式写到<head>里面，定义一个<style>(类似学一个变量)，然后定义CSS格式。然后在<body>里面调用这个变量！

# <style> 写在<head>标签里面

<head>
    <style>
        p{
            background-color: red;
        }
    </style>
</head>

<body>
     <p>这是第1行正文内容......</p>
     <p>这是第2行正文内容......</p>
     <p>这是第3行正文内容......</p>
</body>

效果图：

3.1、外部样式

将css写在一个单独的文件中，然后在页面进行引入这个文件(在<head>里面使用link)

<head>
    <link rel="stylesheet" href="./06.css" type="text/css">
</head>
<body>
     <div>这是第1行正文内容......</div>
     <div>这是第2行正文内容......</div>
     <div>这是第3行正文内容......</div>
</body>

效果图：

四、选择器

4.1、标签选择器

例子：

<head>
    <style>
        div{
            background-color: antiquewhite;       #背景色
            color: red;                           #字体颜色
        }
        span{
            color: blue;
        }
    </style>
</head>
<body>
    <span>这一行是蓝色！</span>
    <div>这一行是红色！</div>
</body>

效果图：

4.2、ID选择器在<style>标签里面, 以 #开头

FZPSS.md.png

例子：

<head>
    <style>
        #one{
            color: aqua;
        }
    </style>
</head>
<body>
    <span id="one">ID选择器！</span>
</body>

效果图：

4.3、类别选择器在<style>标签里面, 以 .开头

<head>
    <style>
    .two{
    background-color: aquamarine;
    }
    </style>
</head>
<body>
    <div class="two">这是一个类别选择器</div>
    <div class="two">这是一个类别选择器</div>
    <div>什么选择器也没有</div>
</body>

效果图：

4.4、通用选择器给网页里面所有的元素都加这个属性

例子：把网页的整个背景都替换为某一个颜色

<head>
    <style>
    .two{
        background-color: aquamarine;
    }
    *{
        background-color: antiquewhite;
    }
    </style>
</head>
<body>
    <div class="two">这是一个类别选择器</div>
    <div class="two">这是一个类别选择器</div>
    <div>什么选择器也没有</div>
</body>

效果图：

4.5、包含选择器给不同的行级设置不同的背景

例子：

<head>
    <style>
        span{
            background-color: red;
        }
        div span{
            background-color: blue;
        }
    </style>
</head>
<body>
    <span>一级！</span>
    <div>
        <span>二级</span>
    </div>
</body>

ID选择器，类别选择器，都可以修改：下面这个例子是ID选择器

<head>
    <style>
        span{
            background-color: red;
        }
        #one span{
            background-color: blue;
        }
    </style>
</head>
<body>
    <span>一级！</span>
    <div id="one">
        <span>二级</span>
    </div>
</body>

效果图：

4.6、分组选择器

<head>
    <style>
        span{
            background-color: red;
        }
        #one,span{
            background-color: blue;
        }
    </style>
</head>
<body>
    <span>一级！</span>
    <div id="one">
        <span>二级</span>
    </div>
</body>

效果图：

4.7、伪类选择器

<head>
    <style>
        a:link { color:#ff0000; }  /*默认样式，超链接文字为红色*/
        a:visited { color:#00ff00; }  /*访问过后，超链接文字为绿色*/
        a:hover { color:#0000ff; }  /*鼠标经过，超链接文字为蓝色*/
        a:active { color:#ffff00; }  /*鼠标按下时，超链接文字为黄色*/
    </style>
</head>
<body>
    <a href="http://www.baidu.com">baidubaidubaidu</a>
</body>

4.8、选择器的优先级

行内样式 > id选择器 > 类选择器 > 标签选择器 > 通用选择器

测试例子：

<head>
    <style type="text/css">
        #show1{color:red;}
        .show{color:blue;}
        h1{color:green;}
        *{color:aquamarine;}
    </style>
 </head>
 <body>
 	<h1 id="show1" class="show" style="color: darkturquoise;">优先级测试</h1>
 </body>

五、段落(文本)属性和边框以及背景属性

5.1、边框设置 --> border

<head>
    <meta charset="UTF-8">
    <title>CSS study</title>
    <style>
        #one{
            border: 1px solid red;
            width: 400px;                /*设置文本框的宽度*/
            height: 320px;               /*设置文本框的高度*/
            text-align: center;          /*设置字体的位置*/
            line-height: 300px;          /*设置字体的高度*/
            text-decoration: underline;  /*给文本内容加一条下划线 */
            color: #7ff8ff;              /*字体颜色*/
            font-size: 20px;             /*设置字体大小*/
        }
    </style>
 </head>
 <body>
    <div id="one">Hello world</div>
 </body>

特别注意：

width: 400px; /*设置文本框的宽度*/
height: 320px; /*设置文本框的高度*/
text-align: center; /*设置字体的位置*/
line-height: 300px; /*设置字体的高度*/
text-decoration: underline; /*给文本内容加一条下划线 */
color: #7ff8ff; /*字体颜色*/
font-size: 20px; /*设置字体大小*/

效果图：

5.2、背景属性

    <style>
        #myimg{
            border: 1px solid red;
            width: 18px;
            height: 18px;
            background-color: red;               /*设置背景颜色*/
            background-image: url("118.png");    /*设置背景图片*/
            background-repeat: no-repeat;        /*设置背景图片是否重复*/
            background-position-y:38px;          /*设置图片背景位置*/
        }
    </style>
 </head>
 <body>
    <div id="myimg"></div>
 </body>

特别注意：

background-color: red; /*设置背景颜色*/
background-image: url("118.png"); /*设置背景图片*/
background-repeat: no-repeat; /*设置背景图片是否重复*/
background-position-y:38px; /*设置图片背景位置*/

使用背景属性的一个常见案例：

当我们的网站流量比较大的时候，我们一般在请求图片资源时，并不是一张一张的去请求，而是一整张的去请求，然后根据需求对图像进行截取，这样的话，能够减少网络的请求，节省大量的费用

如上图，如何截取这行图片里面的某一个小图片呢？ 使用： background-position-y:38px;

<head>
    <meta charset="UTF-8">
    <title>CSS study</title>
    <style>
        #myimg{
            border: 1px solid red;
            width: 18px;
            height: 18px;
            background-color: red;               /*设置背景颜色*/
            background-image: url("118.png");    /*设置背景图片*/
            background-position-y:38px;          /*设置图片背景位置*/
        }
    </style>
 </head>
 <body>
    <div id="myimg"></div>
 </body>

效果图：

六、布局属性 ******

注意：只有块级元素使用下列属性才有效
6.1、元素浮动 – float
float的取值：left, right, none(默认值)

3个div正常显示如下：

如果想让3个div并排显示，就需要设置它们的float属性，如下是设置float:left;

FZQlF.md.png

如下是设置第1个和第3个div向左浮动float:left;第2个div向右浮动float:right;

FZly4.md.png

因此我们想，如果有若干个div，都设置float:left,则会像流水一样排开

FZ1OJ.md.png

看到这块以后，想必聪明的你也许想到了，各大电商网站上商品的展示不就是这个样子的吗。

FZGwR.md.png

6.2、内边距 – padding

FZVwn.md.png

padding是对内元素，用来控制内部元素的位置

6.1、padding的取值：

四边距padding
上边距padding-top
下边距padding-bottom
左边距padding-left
右边距padding-right

paddingpadding 10 10pxpx 20 20pxpx 30 30pxpx 40 40pxpx;;

6.1.1、padding取值解释：

提供一个，用于四边；
提供两个，第一个用于上－下，第二个用于左－右；
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
提供四个参数值，将按上－右－下－左的顺序作用于四边；

padding 用于<div>里面的内容做设置。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #one{
            border: 1px solid red;
            width: 200px;
            height: 160px;
            padding-left: 100px;
            padding-top: 100px;
        }
    </style>
</head>
<body>
    <div id="one">
        asdasdasdasdasdasd
    </div>
</body>

效果图：

6.3、外边距 – margin

FZkLj.md.png
margin是对外元素的距离，用来控制元素本身的浮动位置

6.3.1、margin的取值：

四边距margin
上边距margin-top
下边距margin-bottom
左边距margin-left
右边距margin-right

margin 10px 20px 30px 40px;

margin取值解释：

注意：margin: 0 auto — 居中显示

margin是对<div>里面的<div>做设置

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #one{
            border: 1px solid red;
            width: 200px;
            height: 160px;
        }
        #two{
            border: 1px solid blue;
            width: 100px;
            height: 80px;
            margin-top:30px ;
            margin-left:10px ;
        }
    </style>
</head>
<body>
    <div id="one">
        <div id="two">
        </div>
    </div>
</body>

效果图：

6.4、练习：写一个类似淘宝的pg-header界面

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #pg-header{
            background-color: #f5f5f5;
            height: 28px;
            font-size: 10px;
            line-height: 28px;
        }
        #pg-left{
            float: left;
        }
        #pg-right{
            float: right;
        }
        *{margin: 0}
    </style>
</head>
<body>
    <div id="pg-header">                             /*最外层的div，包含里面所有的div*/
        <div style="width: 980px; margin: 0 auto">   /*这个div包含了内容1和内容2，并居中显示*/
            <div id="pg-left">请登录</div>           /*第一列要显示的内容*/
            <div id="pg-right">                      /*第二例要显示的内容*/
            <a href="#">收藏</a>  
            <a href="#">购物车</a>
            <a href="#">分类</a>
            </div>
        </div>
    </div>
</body>

效果图：

设计思路：

6.5、 display属性

block：将元素变成块级标签，可以设置高度和宽度
inline：将元素变成行内标签，不能设置高度和宽度
inline-block：同时具有两种
none：标签消失

<body>
    <span style="background-color: blue;width: 500px;height: 50px;display: block">asdasdasdad</span>
</body>

6.6、小例子--限时抢购活动

图片：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #pg-content{
            border: 1px solid orange;
            width: 600px;
            height: 450px;
        }
        #pg-content h3{
            height: 30px;
            line-height: 28px;
            color: orange;
            font-size: 18px;
            border: 1px solid orange;
            margin: 0 auto;
            padding-left: 18px;
        }
        .pg-frame{
            border: 1px solid #868181f7;
            width: 130px;
            height: 185px;
            float: left;
            margin-left: 15px;
            margin-top: 15px;
        }
        .pg-frame img{
            width: 115px;
            height: 110px;
            float: left;
            margin: 7px;
        }
        .pg-frame p,span{
            font-size: 5px;
            text-align: center;
            margin: 5px;
        }
        .current{
            color: red;
            font-size: 15px;
            margin-left: 25px;
        }
        .origin{
            color: black;
            font-size: 10px;
            text-decoration: line-through;
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <div id="pg-content">
        <h3>限时抢购</h3>
        <div class="pg-frame">
            <img src="szq.png" alt="">
            <p><a href="">[特价款]玛雅干红葡萄酒 满1000元减500元</a></p>
            <div>
                <span class="current">&yen;144</span><span class="origin">&yen;188</span>
            </div>
        </div>
        <div class="pg-frame">
            <img src="szq.png" alt="">
            <p><a href="">[特价款]玛雅干红葡萄酒 满1000元减500元</a></p>
            <div>
                <span class="current">&yen;144</span><span class="origin">&yen;188</span>
            </div>
        </div>
        <div class="pg-frame">
            <img src="szq.png" alt="">
            <p><a href="">[特价款]玛雅干红葡萄酒 满1000元减500元</a></p>
            <div>
                <span class="current">&yen;144</span><span class="origin">&yen;188</span>
            </div>
        </div>
        <div class="pg-frame">
            <img src="szq.png" alt="">
            <p><a href="">[特价款]玛雅干红葡萄酒 满1000元减500元</a></p>
            <div>
                <span class="current">&yen;144</span><span class="origin">&yen;188</span>
            </div>
        </div>
        <div class="pg-frame">
            <img src="szq.png" alt="">
            <p><a href="">[特价款]玛雅干红葡萄酒 满1000元减500元</a></p>
            <div>
                <span class="current">&yen;144</span><span class="origin">&yen;188</span>
            </div>
        </div>
        <div class="pg-frame">
            <img src="szq.png" alt="">
            <p><a href="">[特价款]玛雅干红葡萄酒 满1000元减500元</a></p>
            <div>
                <span class="current">&yen;144</span><span class="origin">&yen;188</span>
            </div>
        </div>
        <div class="pg-frame">
            <img src="szq.png" alt="">
            <p><a href="">[特价款]玛雅干红葡萄酒 满1000元减500元</a></p>
            <div>
                <span class="current">&yen;144</span><span class="origin">&yen;188</span>
            </div>
        </div>
        <div class="pg-frame">
            <img src="szq.png" alt="">
            <p><a href="">[特价款]玛雅干红葡萄酒 满1000元减500元</a></p>
            <div>
                <span class="current">&yen;144</span><span class="origin">&yen;188</span>
            </div>
        </div>
    </div>
</body>
</html>

七、作业测试：

图片资源：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HomeWork</title>
    <style>
        #pg-header-one{
            background-color: #f5f5f5;
            height: 34px;
            font-size: 13px;
            line-height: 32px;
        }
        .pg-header-one-left{
            float: left;
            margin-left: 77px;
        }
        .pg-header-one-right{
            float: right;
            margin-right: 43px;
        }
        *{margin: 0}
        /*分割线*/
        #pg-header-two{
            height: 28px;
            font-size: 10px;
            line-height: 28px;
            margin-top: 15px;
        }
        .pg-header-two-one{
            float: left;
            margin-left: 100px;
        }
        .pg-header-two-one img{
            width: 135px;
            height: 55px;
            float: left;
            margin-left: 300px;
        }
        .pg-header-two-two{
            float: left;
            margin-left: 85px;
            margin-top: 10px;
        }
        .pg-header-two-three{
            border: 1px solid #e4dddd;
            height: 32px;
            width: 250px;
            font-size: 13px;
            float: right;
            margin-right: 43px;
            margin-top: 7px;
            text-align: center;
            padding-top: 2px;
            background-color: #f5f5f5;
        }

        /*分割线*/
        #pg-content{
            border: 1px solid white;
            width: auto;
            height: auto;
            margin-top: 60px;
        }
        .all_commodity{
            background-color: #ca0a39;
            height: 30px;
            line-height: 28px;
            color: white;
            font-size: 18px;
            border: 1px solid orange;
            margin: 0 auto;
            padding-left: 188px;
        }
        .all_commodity_one{
            width: 302px;
            height: 30px;
            background-color: #bd294e;
            text-align: center;
            float: left;
            margin-right: 30px;
        }
        .all_commodity_two{
            text-align: center;
            float: left;
            margin-right: 15px;
        }
        .all_commodity_three{
            text-align: center;
            float: right;
            margin-left: -186px;
            margin-right: 197px;
        }
        .pg-frame{
            border: 1px solid red;
            width: 203px;
            height: 250px;
            float: left;
            margin-left: 5px;
            margin-top: 5px;
        }
        .pg-frame img{
            width: 189px;
            height: 171px;
            float: left;
            margin: 7px;
        }
        .pg-frame p{
            font-size: 5px;
            text-align: center;
            margin: 13px;
        }
        .current{
            color: red;
            font-size: 10px;
            margin-left: 10px;
            float: left;
            margin-top: -12px;
        }
        .buy{
            height: 20px;
            width: 30px;
            color: white;
            font-size: 3px;
            background-color: red;
            float: left;
            margin-left: 109px;
            text-align: center;
            margin-top: -8px;
            line-height: 20px;
        }
        .southern_fruit{
            border: 1px solid #e4dddd;
            height: 418px;
            width: 300px;
            margin-left: 190px;
            margin-top: -1px;
            font-size: 18px;
        }
        .southern_fruit_one{
            border: 1px solid #e4dddd;
            height: 65px;
            text-align: left;
            padding-left: 15px;
            padding-top: 6px;
        }
        .southern_fruit_two{
            border: 1px solid #e4dddd;
            height: 45px;
            text-align: left;
            padding-left: 15px;
            padding-top: 6px;
        }
        .select_one{
            border: 1px solid #e4dddd;
            height: 192px;
            width: 845px;
            margin-right: 165px;
            margin-top: -350px;
            font-size: 18px;
            float: right;
        }
        .select_two{
            border: 1px solid white;
            width: 760px;
            margin-right: 250px;
            margin-top: -386px;
            font-size: 13px;
            float: right;
        }
        .select_one_one{
            border: 1px solid #e4dddd;
            height: 38px;
            text-align: left;
            padding-left: 41px;
            padding-top: 9px;
        }
        .select_one_two{
            border: 1px solid #e4dddd;
            height: 36px;
            text-align: left;
            padding-left: 78px;
            padding-top: 10px;
        }
        .goods_content{
            border: 1px solid white;
            width: 847px;
            height: 652px;
            margin-left: 506px;
            margin-top: -106px;
        }
        .goods_content h3{
            height: 30px;
            line-height: 28px;
            font-size: 13px;
            border: 1px solid #e4dddd;
            padding-left: 10px;
            margin-left: -1px;
        }
    </style>
</head>
<body>
    <div id="pg-header-one">
        <div style="width: 1280px; margin: 0 auto">
            <div class="pg-header-one-left">收藏本站</div>
            <div class="pg-header-one-right">
            <a href="#">登录</a>
            <a href="#">注册</a>
            <a href="#">我的订单</a>
            <a href="#">我的收藏</a>
            <a href="#">VIP会员俱乐部</a>
            <a href="#">客户服务</a>
            <a href="#">关注</a>
            <a href="#">手机版</a>
            </div>
        </div>
    </div>

    <div id="pg-header-two">
        <div style="width: 1280px; height: 10px;margin: 0 auto">
            <div class="pg-header-two-one">
                <img src="cuxiao.png" alt="">
            </div>
            <div class="pg-header-two-two">
                <span>
                    <input type="text">
                    <input type="button" value="搜索">
                    <div>热门搜索：
                        <a href="">火龙果</a>
                        <a href="">瓜子</a>
                    </div>
                </span>
            </div>
            <div class="pg-header-two-three">购物车</div>
            <div></div>
    </div>

    <div id="pg-content">
        <div class="all_commodity">
            <div class="all_commodity_one">
                <h4>全部商品分类</h4>
            </div>
            <div class="all_commodity_two"><h4>首页</h4></div>
            <div class="all_commodity_two"><h4>网上超市</h4></div>
            <div class="all_commodity_two"><h4>水果超市</h4></div>
            <div class="all_commodity_two"><h4>超级订餐</h4></div>
            <div class="all_commodity_two"><h4>生活娱乐</h4></div>
            <div class="all_commodity_two"><h4>研究院</h4></div>
            <div class="all_commodity_three"><h4>论坛</h4></div>
            <div class="all_commodity_three"><h4>研究院</h4></div>
            <div class="all_commodity_three"><h4>研究院</h4></div>
        </div>
    </div>
        <div class="southern_fruit">
            <div class="southern_fruit_one"><h4>南方水果</h4><h6>火龙果 火龙果 火龙果</h6></div>
            <div class="southern_fruit_two"><h4>南方水果</h4></div>
            <div class="southern_fruit_one"><h4>南方水果</h4><h6>火龙果 火龙果 火龙果</h6></div>
            <div class="southern_fruit_one"><h4>南方水果</h4><h6>火龙果 火龙果 火龙果</h6></div>
            <div class="southern_fruit_one"><h4>南方水果</h4><h6>火龙果 火龙果 火龙果</h6></div>
            <div class="southern_fruit_one"><h4>南方水果</h4><h6>火龙果 火龙果 火龙果</h6></div>
        </div>
        <div class="select_two">
            福特>蒙迪欧>2.0T
        </div>
        <div class="select_one">
            <div class="select_one_one">您已选择：苹果</div>
            <div class="select_one_two">材质：苹果 苹果 苹果</div>
            <div class="select_one_two">品牌：苹果 苹果 苹果</div>
            <div class="select_one_two">风格：苹果 苹果 苹果</div>

        </div>
        <div class="goods_content">
            <h3>
                <span>排序:</span>
                <span><a href="">价格</a></span>
                <span><a href="">销量</a></span>
                <span><a href="">最新</a></span>
            </h3>
            <div class="pg-frame">
                <img src="kuci.jpg" alt="">
                <p><a href="">[欧凯隆]景德镇骨瓷欧</a></p>
                <div>
                    <span class="current">&yen;1169.00</span><span class="buy">买</span>
                </div>
            </div>
            <div class="pg-frame">
                <img src="kuci.jpg" alt="">
                <p><a href="">[欧凯隆]景德镇骨瓷欧</a></p>
                <div>
                    <span class="current">&yen;1169.00</span><span class="buy">买</span>
                </div>
            </div>
            <div class="pg-frame">
                <img src="kuci.jpg" alt="">
                <p><a href="">[欧凯隆]景德镇骨瓷欧</a></p>
                <div>
                    <span class="current">&yen;1169.00</span><span class="buy">买</span>
                </div>
            </div>
            <div class="pg-frame">
                <img src="kuci.jpg" alt="">
                <p><a href="">[欧凯隆]景德镇骨瓷欧</a></p>
                <div>
                    <span class="current">&yen;1169.00</span><span class="buy">买</span>
                </div>
            </div>
            <div class="pg-frame">
                <img src="kuci.jpg" alt="">
                <p><a href="">[欧凯隆]景德镇骨瓷欧</a></p>
                <div>
                    <span class="current">&yen;1169.00</span><span class="buy">买</span>
                </div>
            </div>
            <div class="pg-frame">
                <img src="kuci.jpg" alt="">
                <p><a href="">[欧凯隆]景德镇骨瓷欧</a></p>
                <div>
                    <span class="current">&yen;1169.00</span><span class="buy">买</span>
                </div>
            </div>
            <div class="pg-frame">
                <img src="kuci.jpg" alt="">
                <p><a href="">[欧凯隆]景德镇骨瓷欧</a></p>
                <div>
                    <span class="current">&yen;1169.00</span><span class="buy">买</span>
                </div>
            </div>
            <div class="pg-frame">
                <img src="kuci.jpg" alt="">
                <p><a href="">[欧凯隆]景德镇骨瓷欧</a></p>
                <div>
                    <span class="current">&yen;1169.00</span><span class="buy">买</span>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

八、HTML 字符实体

注释：实体名称对大小写敏感！

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
'	撇号	' (IE不支持)	'
￠	分（cent）	¢	¢
£	镑（pound）	£	£
¥	元（yen）	¥	¥
€	欧元（euro）	€	€
§	小节	§	§
©	版权（copyright）	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷	÷

天才小楼楼

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端--CSS

一、CSS是什么? CSS对网页上的元素(即对HTML标签)做一个优化，排版，布局，是整个网页看起来更漂亮！1.1、网页布局的三个阶段 1、table网页设计内容和样式(外观和布局)混合 2、table+css网页设计 table布局,css指定外观 3、div+css网页设计 div放内容,css指定样式(外观和布局), 内容和样式彻底分离1.2、 CSS的基...
复制链接

扫一扫