zoukankan html css js c++ java

css

CSS 基础使用

一、CSS介绍

CSS全称为： Cascading Style Sheets ，意为层叠样式表，与HTML相辅相成，实现网页的排版布局与样式美化

二、CSS使用方式

1. 行内样式/内联样式

借助于style标签属性，为当前的元素添加样式声明

<标签名 style="样式声明">
代码：
<div style="color:red; font-size:60px;">行内样式</div>
弊端：维护困难，数据多很难修改

CSS样式声明 : 由CSS属性和值组成
例： style="属性:值;属性:值;"
常用CSS属性 :
- 设置文本颜色 color:red;
- 设置背景颜色
- 设置字体大小 font-size:32px;

2. 内嵌样式

借助于style标签，在HTML文档中嵌入CSS样式代码，可以实现CSS样式与HTML标签之间的分离。同时需借助于CSS选择器到HTML 中匹配元素并应用样式
示例: <style> 选择器{ 属性:值; 属性:值; } </style>
选择器 : 通过标签名或者某些属性值到页面中选取相应的元素，为其应用样式
示例：
```

/标签选择器 : 根据标签名匹配所有的该元素/

p{
color:red;
}
```

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--引入外部样式表-->
    <link rel="stylesheet" href="index.css">
    <style>
        /*内嵌样式,借助style标签书写样式声明,
        实现样式与结构的分离*/
        /*使用选择器匹配文档元素,为其应用样式*/
        /*标签选择器:根据标签名匹配元素应用样式*/
        h1{
            background:green;
        }
        span{
            color:orange;
        }
        span{
            color:pink;
        }
    </style>


</head>
<body>
    <!--行内样式,借助style标签属性设置样式规则-->
    <!--CSS样式声明 属性名:属性值;-->
    <h1 style="font-size:16px;color:red;">老祁营救小泽失败</h1>
    <h1 style="font-size:16px;color:red;">隔壁老王在扒图</h1>
    <h2>
        测试<span>老王</span>
    </h2>
    <span>老王2</span>
    <div style="color:green;">
        <p style="color:blue;">
            <span style="color:gray;">子元素可以继承父元素或祖先元素的文本样式</span>
        </p>
    </div>
</body>
</html>

View Code

3. 外链样式表

创建外部样式表文件后缀使用.css
在HTML文件中使用标签引入外部样式表
html <link rel="stylesheet" href="URL" type="text/css"> 其中rel="stylesheet"表示样式表文件；href="URL"路径， type="text/css"固定书写格式，不能写反
样式表文件中借助选择器匹配元素应用样式

三、样式表特征

1. 层叠性

多组CSS样式共同作用于一个元素

2. 继承性

后代元素可以继承祖先元素中的某些样式
例 : 大部分的文本属性都可以被继承，超链接a标签文本颜色不能由继承得到，需要单独修改。
注意：块元素默认宽度和父元素保持一致。

3. 样式表的优先级

优先级用来解决样式冲突问题。同一个元素的同一个样式(例如文本色)，在不同地方多次进行设置，最终选用哪一种样式？此时哪一种样式表的优先级高选用哪一种。
- 行内样式的优先级最高
- 文档内嵌与外链样式表,优先级一致,看代码书写顺序,后来者居上
- 浏览器默认样式和继承样式优先级较低

四、CSS 选择器重点

1. 作用

匹配文档中的某些元素为其应用样式

2. 分类 :

1. 标签选择器

根据标签名匹配文档中所有该元素
语法 :

标签名{
属性:值;
}

2. id选择器

根据元素的 id 属性值匹配文档中惟一的元素，id具有唯一性，不能重复使用
语法 :

注：需要放置在属性标签<style>内
<style>
#baidu1{
color:red;
font-size:20px;
text-decoration:none; }
</style>
<a href="https://www.baidu.com" target="_blank" id="baidu1">百度</a>

注意 :
id属性值自定义,可以由数字，字母，下划线，- 组成，不能以数字开头;
尽量见名知意，多个单词组成时，可以使用连接符，下划线，小驼峰表示

练习：创建超链接，修改文本颜色，取消下划线。
取消下划线，用text-decoration：none；

代码：

<style>

a{

color:#000000;

text-decoration:none;

}

</style>

3. class选择器/类选择器

根据元素的class属性值匹配相应的元素,class属性值可以重复使用,实现样式的复用
语法 :

.class属性值 {

}

特殊用法 :
1. 类选择器与其他选择器结合使用
注意标签选择器与类选择器结合时,标签在前,类选择器在后
例 : a.c1{ }
2. class属性值可以写多个,共同应用类选择器的样式

例 : .c1{ } .c2{ } <p class="c1 c2"></p> <p class="c1 c2">选择器和选择器结合使用</p>

4. 群组选择器

为一组元素统一设置样式
语法 :

selector1,selector2,selector3{

}

例：h1,div,p{

}或者.c1,#d1{ }

5. 后代选择器

匹配满足选择器的所有后代元素(包含直接子元素和间接子元素)
语法 :

selector1 selector2{

}

选择器1表示外层元素，选择器2表示内层元素。注意中间空格为后代。

例如： #nav span{color:red;}

代码：

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

#nav span{

color:red;}

</style>

</head>

<body>

<div id="nav">

<span>导航中的文本</span>

<ul>

<li>示例

<span>文本</span>

</li>

</ul>

</div>

<div id="main">

<span>

主体中的文本

</span>

</div>

</body>

匹配selector1中所有满足selector2的后代元素（包括直接和间接）

6. 子代选择器

匹配满足选择器的所有直接子元素
语法 :

selector1>selector2{

}

代码如下：

<style>

#nav>span{

color:red;}

</style>

</head>

<body>

<div id="nav">

<span>导航中的文本</span>

<ul>

<li>示例

<span>文本</span>

</li>

</ul>

</div>

<div id="main">

<span>

主体中的文本

</span>

</div>

</body>

7. 伪类选择器

为元素的不同状态分别设置样式,必须与基础选择器结合使用
分类 :

:link 超链接访问前的状态

:visited 超链接访问后的状态

:hover 鼠标滑过时的状态

:active 鼠标点按不抬起时的状态(激活)

:focus 焦点状态(文本框被编辑时就称为获取焦点比，输入框)

使用 :

a:link{

}

a:visited{

}

.c1:hover{ } **最常用**

代码如下：

<style>

a:link{

color:black;}

a:visited{

color:gray;}

a:hover{

background-color:orange;}

a:active{

color:blue;}

</style>

</head>

<body>

<a href="#">超链接</a>

</body>

注意：书写顺序必须按照以上4部顺序书写，否则可能有些状态显示不出

文本框聚焦代码如下：

<style>

input:focus{

/*取消轮廓线*/

outline:none}

</style>

<input type="text">

注意 :
1. 超链接如果需要为四种状态分别设置样式,必须按照以下顺序书写

:link

:visited

:hover

:active

超链接常用设置 :

a{

/*统一设置超链接默认样式(不分状态)*/

}

a:hover{

/*鼠标滑过时改样式*/

}

以超链接为例：

常用设置：基础样式

a{ /*统一设置超链接默认样式(不分4种状态)*/

color:gray;

text-decoration:none

}

a:hover{background-color:orange;}

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /*1.根据标签名匹配所有相应元素应用样式*/
        h1{
            color:green;
        }
        /*2.根据元素的id属性值匹配(id选择器)*/
        #d1{
            /*匹配id为"d1"的元素*/
            font-size:40px;
        }
        #d2{
            font-size:42px;
        }
        /*3.类选择器:根据元素的class属性值匹配到相应元素*/
        .c1{
           background: orange;
        }
        .c2{
            width:200px;
        }
        /*组合选择器*/
        h2.c1{
            /*匹配类名为c1的h2元素*/
            height:200px;
        }
        /*4.群组选择器:将选择器组合起来,统一为元素设置样式*/
        h2,h3,h4{
            font-size:20px;
        }
        #d1,.c1{}
        /*5.后代选择器:匹配所有满足选择器的后代元素*/
        div span{
            color:red;
        }
        /*6.子代选择器:匹配所有满足选择器的直接后代*/
        div>span{
            background:cyan;
        }
        /*7.伪类选择器:为元素的不同状态分别设置样式,
        需要和基础选择器结合使用*/
        /*
        超链接伪类:
            :link(超链接访问前的状态)
            :visited(超链接访问后的状态)
        动态伪类:
            :hover(鼠标悬停时的状态)
            :active(激活状态,鼠标点按时的状态)
            :focus(表单控件的焦点状态,输入框的编辑状态)
        */
        /*
        a:link{
            color:black;
        }
        a:visited{
            color:gray;
        }
        a:hover{
            font-size:28px;
        }
        a:active{
            background:orange;
        }
        */
        /*
            1.统一设置超链接四种状态下的样式
            2.单独设置鼠标悬停时的样式
        */
        a{
            color:black;
            /*取消超链接默认下划线*/
            text-decoration:none;
        }
        a:hover{
            color:orange;
        }
        /*创建h5标签,设置初始尺寸和背景颜色;
        鼠标悬停时修改背景颜色*/
        h5{
            width:200px;
            height:200px;
            background:pink;
        }
        h5:hover{
            background:green;
        }
        /*取消表单控件在焦点状态下的轮廓线*/
        input:focus{
            outline:none;
        }

    </style>
</head>
<body>
    <input type="text">
    <h5></h5>
    <a href="01_form.html">表单应用</a>
    <div>
        <span>div->span</span>
        <p>
            <span>div->p->span</span>
        </p>
    </div>

    <!--基础选择器:标签,id,类-->
    <!--class属性可以取多个值,使用空格隔开-->
    <h1 id="d2" class="c1 c2">老祁</h1>
    <h1 id="d3" class="c1">小泽</h1>
    <h1 id="d1">老王</h1>
    <h2 class="c1 c2">MM</h2>
    <h2>参考</h2>
    <h3>测试</h3>
    <h4>测试2</h4>
    
</body>
</html>

View Code

3. 选择器的优先级

使用选择器为元素设置样式,发生样式冲突时,主要看选择器的权重,权重越大,优先级越高

选择器	权重
标签选择器	1
(伪)类选择器	10
id选择器	100
行内样式	1000

复杂选择器(后代,子代,伪类)最终的权重为各个选择器权重值之和
群组选择器权重以每个选择器单独的权重为准，不进行相加计算
例 :

/*群组选择器之间互相独立，不影响优先级*/

body,h1,p{ /*标签选择器权重为 1 */

color:red;

}

.c1 a{ /*当前组合选择器权重为 10+1 */

color:green;

}

#d1>.c2{ /*当前组合选择器权重为 100+10 */

color:blue;

}

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .c1{
            color:blue;
        }
        #d1{
            color:pink;
        }
        h1{
            color:red;
        }
        h1{
           color:green;
        }

        /*十六进制表示颜色,以#前缀,每两位为一组,
        代表一种三原色(r,g,b),每位字符取值范围0~9,a~f
        ff:(255)*/

        #d1{/*100*/
            color:#997679;
        }
        div h1{/*1+1*/
            color:red;
        }
        div .c1{/*1+10*/
            color:green;
        }
        div #d1{/*1+100*/
            /*#000000*/
            color:#000;
        }


    </style>
</head>
<body>
    <div>
        <h1 id="d1" class="c1">小泽Maria</h1>
    </div>
</body>
</html>

View Code

五、标签分类及嵌套

1. 块元素

独占一行,不与元素共行;可以手动设置宽高,默认宽度与与父元素保持一致
例 : body div h1~h6 p ul ol li form, table(默认尺寸由内容决定)

2. 行内元素

可以与其他元素共行显示;不能手动设置宽高,尺寸由内容决定
例 : span label b strong i s u sub sup a

3. 行内块元素

可以与其他元素共行显示,又能手动调整宽高
例 : img input button (表单控件)

行内块元素调整属性：vertical-align 可取top/middle/bottom */调整行内块元素的垂直对齐方式，默认为baseline（文本基线对齐）一般有文本和输入框或者图片时使用。

4. 嵌套原则

块元素中可以嵌套任意类型的元素
p元素除外,段落标签只能嵌套行内元素,不能嵌套块元素

行内元素中最好只嵌套行内或行内块元素

5.转换元素类型：

属性：display
取值:liline:(行内元素)、block（元素）、inline-block(行内块元素)、none（隐藏）

6. 尺寸与颜色原则

1、尺寸单位
px 默认使用像素
%默认参照父元素相应的属性值进行百分比计算
代码如下：

div{

width:600px;

height:300px;

background-color:red;}

h1{

width:50%;

height:50%;

background-color:pink;}

<body>

<div>

<h1>标签好</h1>

</div>

</body>

em参照父元素的字体大小计算（默认1em=16px）
rem 参照根元素的字体大小计算（默认1em=16px）

2、颜色取值

去颜色的英文单词； rgb（R,G，B）三原色设置，每种颜色取值范围0-255
rgba（R,G，B，alpha）设置三原色及透明度，alpha取值0（透明度）~1（不透明）
将三原色的范围0-255转换16进制表示（00-ff）
长十六进制，每2位表示一组代表一种三原色。

#ff0000 red
短16进制，采用三位字符代表三原色，浏览器会自动对每一位进行重复，最终完善为长十六进制。
#0f0--》#00ff00

例：
black rgb（0,0,0）
white rgb（0,0,0）
red rgb（255,0,0）
rgb（R,G，B）

下拉选择器列表代码如下：使用ul，ol

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport"

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<style>

ul,ol{

list-style:none;/*取消列表的项目符号*/

padding:0; /*清除默认的内边距，列表中有默认的项目符号padding占4px；需要去除*/

width:150px;

background-color:yellow;}

ol{

/*默认隐藏*/

display:none;}

/*设置内层列表显示*/

#set:hover ol{

display:block;

}

ol li:hover{

background-color:gray;

}

</style>

</head>

<body>

<div>

请选择城市:

<select name="city" >

<option value="beijing">北京</option>

<option value="shanghai">上海</option>

<option value="nanjing">南京</option>

<option value="hangzou">杭州</option>

</select>

</div>

<div>

<ul>

<li id="set">设置

<ol>

<li>高级设置</li>

</ol>

</li>

</ul>

</div>

</body>

</html>

注其中有属性：

dispaly:none 表示隐藏显示

diaplay:block 表示显示

作业：淘宝引擎

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

#nav{

width:500px;

height:50px;

background-color:orange;

font-size:0; /*解决换行空隙问题*/

}

a{

display:inline-block;

text-decoration:none;

color:#fff;

width:100px;

height:50px;

font-size:16px; /*子继承父字体为0，需要重新设置字体大小可见*/

text-align:center; /*水平居中*/

line-height:50px; /*文本垂直居中调整行高，将行高调整为与元素高度一致*/

}

a:hover{background-color:pink;}

</style>

</head>

<body>

<div id="nav">

<a href="">首页</a>

</div>

</body>

</html>

ul{

200px;

background:orange;

/*设置水平居中*/

text-align:center;

/*设置鼠标的显示形状,取default(箭头),

pointer(手指),text(文本'I')*/

cursor:default;

}

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table,form,span,b,a,input{
            width:300px;
            height:300px;
            background:pink;
        }
    </style>
</head>
<body>
    <h1>标题</h1>
    <p>段落</p>
    <ul>
        <li>列表项</li>
    </ul>
    <table>
        <tr>
            <td>单元格</td>
        </tr>
    </table>
    <form action="">
        此处为表单
        <input type="text">
    </form>
    <div>容器标签</div>
    <span>span</span>
    <b>加粗</b>
    <a href="">超链接</a>
    <div>
        <div>
            <h1>
                <span></span>
                <button></button>
            </h1>
        </div>
    </div>
    <p>
        <h1>1.参照效果图实现表单练习</h1>
        <h1>2.实现下拉菜单的隐藏与显示
            (display:none(隐藏)/block(显示))</h1>
        <h1>3.模拟横向导航栏(淘宝),
            鼠标悬停时修改导航项文本色或背景色</h1>
    </p>
</body>
</html>

View Code

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <form action="/login" method="get" enctype="">
        <h1>增加管理员</h1>
        <table>
            <tr>
                <td>姓名:</td>
                <td>
                    <input type="text" name="uname" value=""
                           placeholder="" maxlength="10">
                </td>
                <td>十个字符以内</td>
            </tr>
            <tr>
                <td>密码:</td>
                <td>
                    <input type="password" name="upwd" value=""
                           placeholder="" maxlength="10">
                </td>
                <td>十个字符以内</td>
            </tr>
            <tr>
                <td>性别:</td>
                <td colspan="2">
                    <input type="radio" name="gender"
                           value="man">男士
                    <input type="radio" name="gender"
                           value="woman">女士
                </td>
            </tr>
            <tr>
                <td>角色:</td>
                <td>
                    <input type="checkbox" name="role"
                           value="superAdmin" checked>超级管理员
                    <br>
                    <input type="checkbox" name="role"
                           value="billAdmin">账单管理员
                </td>
                <td>至少选择一个角色</td>
            </tr>
            <tr>
                <td>头像:</td>
                <td>
                    <input type="file" name="uimg">
                </td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="button" value="保存">
                    <input type="reset" value="重填">
                </td>
                <td></td>
            </tr>


        </table>
    </form>

</body>
</html>

View Code

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        ul,ol{
            /*取消默认内边距*/
            padding:0;
            /*取消列表的项目符号*/
            list-style:none;
        }
        ul{
            width:200px;
            background:orange;
            /*设置水平居中*/
            text-align:center;
            /*设置鼠标的显示形状,取default(箭头),
            pointer(手指),text(文本'I')*/
            cursor:default;
        }
        ol{
            /*默认隐藏*/
            display:none;
        }
        .address:hover ol{
            /*设置显示*/
            display:block;
        }
        ol li:hover{
            background:pink;
        }

    </style>
</head>
<body>
    <ul>
        <li class="address">
            北京
            <ol>
                <li>北京</li>
                <li>上海</li>
                <li>张家口</li>
                <li>深圳</li>
            </ol>
        </li>
    </ul>
</body>
</html>

View Code

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #nav{
            width:500px;
            height:50px;
            background:orange;
            color:#fff;
            /*处理水平方向上由于换行导致的空隙,
            子元素需要手动设置可见大小*/
            font-size:0px;
        }
        a{
            font-size:24px;
            color:#fff;
            text-decoration:none;
            /*转换元素类型,按照指定元素类型显示
            display取值:block(块元素)/inline(行内元素)/
            inline-block(行内块元素)/none(隐藏)
            */
            display:inline-block;
            width:100px;
            height:50px;
            text-align:center;
            /*一行文本在当前行中永远垂直居中,
            可以设置行高与元素高度一致,
            实现一行文本的垂直居中效果*/
            line-height:50px;
        }
        a:hover{
            background:green;
        }

    </style>
</head>
<body>
    <!--导航栏整体尺寸为500*50,包含五个导航项-->
    <div id="nav">
        <!--
        文本属性可以被继承,但是超链接的文本颜色需要单独设置,
        表单控件的文本样式也需要单独设置
        <span>测试</span>
        <input type="text">
        -->
        <!--代码中的换行会被解析为一个空格字符,影响布局-->
        <a href="">天猫</a><a href="">天猫</a>
        <a href="">天猫</a>
        <a href="">天猫</a>
        <a href="">天猫</a>
    </div>
    <div id="main"></div>
</body>
</html>

View Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    #nav{
    width:500px;
    height:50px;
    background-color:orange;
    color:#fff;
    /*处理水平方向上换行导致的空格问题，但a继承父也为0，需要从新设置子元素*/
    font-size:0;
    }

    a{
      font-size:24px;  /*因父元素设置为0继承，需要重新设置字体大小*/
      color:white;
      text-decoration:none; /*去除下划线*/
      display:inline-block; /*a标签行内元素，不能调整宽高，变成行内块元素调整*/
      width:100px;
      height:50px;
      background-color:green;
      line-height:50px;
      text-align:center;
    }

    a:hover{
        background:blue;}

    </style>
    <script> </script>
</head>
<body>
    <div id="nav">
        <a href="">天猫1</a>
        <a href="">天猫2</a>
        <a href="">天猫3</a>
        <a href="">天猫4</a>
        <a href="">天猫5</a>
    </div>
    <div id="main"></div>
</body>
</html>

View Code

一、尺寸与颜色单位

1. 尺寸单位

px 像素单位
% 百分比，参照父元素对应属性的值进行计算
em 字体尺寸单位，参照父元素的字体大小计算，1em=16px
rem字体尺寸单位,参照根元素的字体大小计算，1rem=16px

2. 颜色单位

英文单词：red，green，blue
rgb(r,g,b) 使用三原色表示，每种颜色取值0~255
rgba(r,g,b,alpha) 三原色每种取值0~255，alpha取值0（透明）~1（不透明）
十六进制表示：以#为前缀，分为长十六进制和短十六进制。
- 长十六进制：每两位为一组，代表一种三原色；每位的取值范围0~9，a~f
例：red rgb(255,0,0) #ff0000
- 短十六进制：由3位组成，每一位代表一种三原色，浏览器会自动对每一位进行重复扩充，仍然按照长十六进制解析
例：#000 #fff #f00

2. CSS 盒模型

1. 内容尺寸

一般情况下，为元素设置width/height，指定的是内容框的大小
内容溢出：内容超出元素的尺寸范围，称为溢出。默认情况下溢出部分仍然可见，可以使用overflow调整溢出部分的显示,取值如下：

overflow：visible 默认值，溢出部分可见
overflow：hidden 溢出部分隐藏 ,容易显示下一行字体的一半，解决布局问题可以使用
overflow：scroll 强制在水平和垂直方向添加滚动条
overflow：auto 自动在溢出方向添加可用滚动条

View Code

2. 边框

1. 边框实现

1、盒模型包含内容区域，padding（内边距），border（边框），margin（外边距），关系元素在文档中的实际占位，影响排版布局
2、内容区域，使用width/height属性设置（按钮元素除外）
3、边框设置
边框实现

border:width style color; 其中style必填项

#d1{ border:5px solid red;}

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

h1{

/*

300px; 文本内容宽高

height:200px;} */

width:0;

height:0;}

#d1{

border-top:250px solid red;

border-right:250px solid transparent;

border-bottom:250px solid transparent; 边框样式必填

border-left:250px solid transparent;}

#d2{

border:5px dashed green;}

#d3{

border:5px dotted yellow;}

#d4{

border:double;}

#d5{

border:solid;}

</style>

</head>

<body>

<h1 id="d1"></h1>

<h1 id="d2"></h1>

<h1 id="d3"></h1>

<h1 id="d4"></h1>

<h1 id="d5"></h1>

</body>

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        h1{
            width:300px;
            height:100px;
            background:pink;
        }
        #d1{
            border:solid;
        }
        #d2{
            border:5px solid red;
        }
        #d3{
            border:5px dotted green;
        }
        #d4{
            border:5px dashed blue;
        }
        #d5{
            border:5px double gray;
        }
        div{
            width:0px;
            height:0px;
            /*
            border-top:10px solid red;
            border-right:10px solid rgba(0,0,0,0);
            border-bottom:10px solid transparent;
            border-left:10px solid transparent;
            */
            border:10px solid transparent;
            border-top:10px solid red;
        }
        span{
            /*
            display:inline-block;
            0;
            height:0;
            */
            /*行内元素默认不能手动调宽高,空标签默认宽度为0,
            默认高度与字体大小有关,可以设置字体大小为0实现高度为
            0的效果*/
            font-size:0;
            border-top:10px solid red;
            border-right:10px solid green;
            border-bottom:10px solid blue;
            border-left:10px solid gray;
        }
    </style>
</head>
<body>
    <div></div>
    <span></span>
    <h1 id="d1"></h1>
    <h1 id="d2"></h1>
    <h1 id="d3"></h1>
    <h1 id="d4"></h1>
    <h1 id="d5"></h1>
</body>
</html>

View Code

2. 单边框设置

分别设置某一方向的边框，取值：width style color;

3. 网页三角标制作

元素设置宽高为0

分别添加四个方向的边框，保留一个可见色，其他为透明色

三角形的大小可通过边框宽度调整
通常使用文本标签来做辅助的效果。
块元素自带默认的宽度，行内标签自带默认的高度

设置矩形边框

h1{

/*

300px;

height:200px;} */

width:0;

height:0;}

#d1{

border-top:250px solid red;

border-right:250px solid transparent;

border-bottom:250px solid transparent;

border-left:250px solid transparent;}

图像呈现一个三角形，使用了透明transparent;统一设置四个方向透明边框

获取一个三角形图标代码如下图所示

#d1{

border-top:250px solid red;

border-right:250px solid transparent; 其中transparent为透明

border-bottom:250px solid transparent;

border-left:250px solid transparent;}

调整某个方向边框可见色，一般文本和三角标并行并行 :

span{

border:25px solid transparent;

border-top:25px solid green;

}

4. 圆角边框

属性：border-radius 指定圆角半径

取值：像素值或百分比
取值范围：
1.统一设置四个角的圆角半径，最大取50%(超过50%,仍然显示50%的效果，过大图像变样)
2.单独设置每个角的圆角半径可以取0%-100%。一般取高度的一半作为圆弧半径，设置像素值。例如：淘宝搜索框。

h1{

background-color:blue;

border-radius:50%;}

取值规律：

一个值表示统一设置上右下左

div{

background-color:red;

/*一个值，左上角开始为起点*/

border-radius:20px }

四个值表示分别设置上右下左，顺时针描述，以左上角为起点。

代码

div{ background-color:red;

/*按照上右下左顺序分别设置，左上角开始为起点，表示上*/

border-radius:20px 30px 40px 50px;}

两个值表示分别设置上下左右

div{

background-color:red;

/*按照上右下左顺序分别设置，左上角开始为起点*/

border-radius:20px 50px;}

三个值表示分别设置上右下，（左右）保持一致

代码

div{

background-color:red;

/*按照上右下左顺序分别设置，左上角开始为起点*/

border-radius:20px 30px 50px;}

扩充内容：过度属性：在元素切换时添加平滑效果代码：transition:3s

注意：书写位置不同，效果不同，书写在默认属性中，有往返效果。写在hover内只有鼠标进入时有效果，移除时没有效果。

div:hover{
border-radius:50px;
/*过度属性：在元素切换时添加平滑效果*/
transition:3s;}

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width:300px;
            height:50px;
            background:orange;
            /*上 右 下 左*/
            /*border-radius:10px 20px 30px;*/
            /*百分比表示参照元素自身尺寸,
            分别计算横轴半径和纵轴半径,
            统一设置四个角的圆角半径时,最多取到50%,
            改变元素形状*/
            /*border-radius:50%;*/
            border-radius:25px;
        }
        /*创建h1,设置尺寸为200*200,自定义背景颜色,
            鼠标悬停时修改背景颜色并且显示为圆形*/
        h1{
            width:200px;
            height:200px;
            background:green;
            /*过渡属性:在元素两种状态切换时添加平滑过渡效果*/
            transition:3s;
        }
        h1:hover{
            border-radius:50%;
            background:red;

        }
    </style>
</head>
<body>
    <div></div>
    <h1></h1>
</body>
</html>

View Code

5. 轮廓线

属性：outline

取值：width style color

区别：边框实际占位，轮廓不占位

#d2{

outline:green solid 5px;}

特殊：文本输入框在编辑状态自带轮廓线，取消可以设置outline：none

按照width style color顺序书写，写反则显示不出。

input:focus{outline:none}取消轮廓线

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div,h1{
            width:300px;
            height:50px;
            background:pink;
        }
        div{
            border:5px solid red;
        }
        h1{
            outline:5px solid green;
        }
        input:focus{
            /*取消表单控件焦点状态下默认轮廓线*/
            outline:none;
        }
        h2{
            width:300px;
            height:100px;
            background:orange;
            box-shadow:0px 0px 0px;
        }
    </style>
</head>
<body>
    <div></div>
    <h1></h1>
    <input type="text">
    <h2></h2>
</body>
</html>

View Code

6. 盒阴影

属性：box-shadow

取值：offsetX offsetY blur (spread) color;

注：以坐标点为中心，向右为正方向，向下为正方向，负号则反方向。

<style>

div{

width:300px;

height:200px;

border:1px solid red;

box-shadow:10px 10px 10px blue}

</style>

使用：

不管是浏览器窗口还是元素自身都可以构建坐标系，统一以左上角为原点，向右向下为X轴和Y轴的正方向

offsetX 取像素值，阴影的水平偏移距离，正值向右，负值向左

offsetY 取像素值，阴影的垂直偏移距离，正值向下，负值向上

blur 取像素值，表示阴影的模糊程度，值越大越模糊

spread 选填，取像素值，阴影是否需要延伸，选择使用一般不超过20

color 设置阴影颜色,默认为黑色

box-shadow:10px 10px 10px blue}

坐标系:不管是元素还是窗口都可以构建坐标系，一律以左上角为原点（0,0），向右向下为x轴和y轴正方向 ，延伸扩展一般不超过20px,阴影分内阴影和外阴影。

3. 内边距

属性：padding

作用：调整元素内容框与边框之间的距离

取值：

20px; 一个值表示统一设置上右下左

20px 30px; 两个值表示分别设置(上下) (左右)

20px 30px 40px; 三个值表示分别设置上右下，左右保持一致

20px 30px 40px 50px; 表示分别设置上右下左

单方向内边距,只能取一个值：

padding-top

padding-right

padding-bottom

padding-left

行内元素对盒模型属性不完全支持,不能设置宽高,不支持上下内边距

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width:200px;
            height:200px;
            border:1px solid orange;
            /*padding:10px 50px 60px;*/
            padding-top:20px;
            padding-left:50px;
        }
        h1{
            width:200px;
            height:200px;
            background:pink;
            padding:50px;
        }
        span{
            width:200px;
            height:200px;
            border:1px solid blue;
            /*行内元素对盒模型属性不完全支持,
            不能设置宽高,不支持上下内边距*/
            padding:0 50px;
        }
    </style>
</head>
<body>
    <div>老祁真帅</div>
    <h1>小泽真稳重</h1>
    <span>老王</span>
</body>
</html>

View Code

4. 外边距

属性：margin

作用：调整元素与元素之间的距离

特殊：

1）margin:0; 取消默认外边距
50px：一个值统一设置四个方向的外边距
20px 50px：上下20px，左右50px的外边距
20px 30px 40px：分别设置上，下，（左右）保持一致
20px 30px 40px 50px：分别设置四个方向的外边距
```
body{
margin:0}

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width:200px;
            height:200px;
            background:red;
        }
        #d1{
            /*100%;*/
            background:green;
            /*margin:0 auto;*/
            border:1px solid blue;
            padding:50px;
            margin:50px;
        }
        b,span{
            background:green;
            /*行内元素不支持上下边距*/
            margin:50px;
        }
        b{
            margin-right:-5px;
        }
    </style>
</head>
<body>
    <div id="d1"></div>
    <div></div>
    <b>加粗</b>
    <span>span</span>
    作业2:完善横向导航栏,模块500*50,实现整体居中,
    内部导航项之间添加10像素外边距
    作业1:参照百度搜索栏,创建输入框(500*50)和按钮(150*50)
</body>
</html>

View Code

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #nav,#search{
            width:650px;
            margin:0 auto;
        }
        #nav{
            margin-bottom:50px;
            height:30px;
            background:gray;
            font-size:0;
        }
        a{
            display:inline-block;
            text-decoration:none;
            color:#fff;
            width:122px;
            height:30px;
            font-size:20px;
            background:green;
            /*调边距,行内块元素完全支持盒模型属性*/
            /*margin:5px 10px;*/
            margin-right:10px;
            text-align:center;
            line-height:30px;
        }
        .no-margin{
            margin:0;
        }
        #search{
            height:200px;
            background:gray;
        }
        input{
            width:500px;
            height:50px;
            /*调整盒模型的计算方式,取值为border-box时,表示
            当前元素指定的width/height是包含边框在内区域的尺寸*/
            box-sizing:border-box;
            border:1px solid red;
            padding:5px 10px;

        }
        button{
            border:none;
            /*水平方向上元素之间的垂直对齐方式,可取:
            top/middle/bottom
            */
            vertical-align:middle;
            width:150px;
            height:50px;
        }


    </style>
</head>
<body>
    <!--导航栏-->
    <div id="nav">
        <a href="">首页</a>
        <a href="">导航</a>
        <a href="">天猫</a>
        <a href="">天猫</a>
        <a href="" class="no-margin">天猫</a>
   


   </div>
    <!--搜索栏-->
    <div id="search">
        form
        <input type="text"><button>全网搜</button>
    </div>
</body>
</html>

View Code

2）margin:0 auto;左右自动外边距，实现元素在父元素范围内水平居中，如果子元素和父元素外边距相等则水平居中无效，只有父元素的padding大于子元素的padding才显示居中。

注意：不支持垂直方向居中，只支持水平方向。

3）margin:-10px;元素位置的微调

margin: 0 0 0 -5px;

1. 单方向外边距：只取一个值

margin-top

margin-right

margin-bottom

margin-left

1. 外边距合并：

1）垂直方向

1. 子元素的margin-top作用于父元素上，使父元素位置发生变化。

解决：

1、为父元素添加顶部透明边框transparent；

2、或为父元素设置padding-top:0.1px ;

2. 元素之间同时设置垂直方向的外边距（2个元素的间距），最终取较大的值显示。

2）水平方向

块元素对盒模型相关属性（width,height,padding,border,margin）完全支持;

行内元素对盒模型相关属性不完全支持，不支持width/height,不支持上下边距

行内元素水平方向上的外边距会叠加显示

带有默认边距的元素（带有默认的上下外边距）：

body,h1,h2,h3,h4,h5,h6,p,ul,ol{

margin:0;

padding:0;

list-style:none;

}

5. 元素最终尺寸的计算

盒模型相关的属性会影响元素在文档中的实际占位，进而影响布局

属性：box-sizing

取值：content-box/border-box

1）标准盒模型计算：各个属性值累加得到最终尺寸

box-sizing:content-box;

元素设置width/height指定的是内容框的大小

最终尺寸 = width/height+padding+border+margin

2）特殊盒模型计算（按钮元素）：

box-sizing:border-box;

元素设置width/height指定的是包含边框在内的区域大小

最终尺寸 = width/height+margin

作业：

在横向导航栏的基础上，调整导航项的边距

1. 整体导航栏水平居中

2. 导航项之间10px的外边距

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #nav,#search{
            width:650px;
            margin:0 auto;
        }
        #nav{
            margin-bottom:50px;
            height:30px;
            background:gray;
            font-size:0;
        }
        a{
            display:inline-block;
            text-decoration:none;
            color:#fff;
            width:122px;
            height:30px;
            font-size:20px;
            background:green;
            /*调边距,行内块元素完全支持盒模型属性*/
            /*margin:5px 10px;*/
            margin-right:10px;
            text-align:center;
            line-height:30px;
        }
        .no-margin{
            margin:0;
        }
        #search{
            height:200px;
            background:gray;
        }
        input{
            width:500px;
            height:50px;
            /*调整盒模型的计算方式,取值为border-box时,表示
            当前元素指定的width/height是包含边框在内区域的尺寸*/
            box-sizing:border-box;
            border:1px solid red; /*给出指定内容可让浏览器自动计算*/
            padding:5px 10px;  /*给出指定内容可让浏览器自动计算*/

        }
        button{
            border:none;
            /*水平方向上元素之间的垂直对齐方式,可取:
            top/middle/bottom
            */
            vertical-align:middle;
            width:150px;
            height:50px;
        }


    </style>
</head>
<body>
    <!--导航栏-->
    <div id="nav">
        <a href="">首页</a>
        <a href="">导航</a>
        <a href="">天猫</a>
        <a href="">天猫</a>
        <a href="" class="no-margin">天猫</a>
   </div>
    <!--搜索栏-->
    <div id="search">
        form
        <input type="text"><button>全网搜</button>
    </div>
</body>
</html>

View Code

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            margin:0;
            /*border-top:1px solid blue;*/
            padding-top:0.1px;
        }
        div{
            width:200px;
            height:200px;
            background:red;
            margin-top:100px;
            margin-bottom:200px;
        }
        h1{
            width:200px;
            height:200px;
            background:green;
            margin-top:100px;
        }
        b,span{
            background:blue;
            /*行内元素不支持垂直边距,水平方向上外边距会
            叠加显示*/
            margin:10px 50px;
        }
        body,h1,h2,h3,h4,h5,h6,p,ul,ol{
            /*取消默认样式*/
            margin:0;
            padding:0;
            list-style:none;
        }
    </style>
</head>
<body>
    <!--第一个子元素的margin-top作用于父元素上
    解决:
        方式1.父元素添加顶部边框
        方式2.父元素添加padding-top:0.1px;
    -->
    <div></div>
    <!--同时设置垂直方向上的边距,取最大值-->
    <h1></h1>
    <b>加粗</b>
    <span>span文本</span>
    <h2></h2>
    <p></p>
    <ul></ul>
    <form action=""></form>
</body>
</html>

View Code

一、布局方式

1. 标准流/静态流

默认布局方式,按照代码书写顺序及标签类型从上到下,从左到右依次显示

2. 浮动布局

主要用于设置块元素的水平排列

1）属性

`float`

2）取值

可取left或right，设置元素向左浮动或向右浮动

float:left/right;

3）特点

元素设置浮动会从原始位置脱流,向左或向右依次停靠在其他元素边缘,在文档中不再占位

元素设置浮动,就具有块元素的特征,可以手动调整宽高，不论任何元素（包含块元素，span元素等）

"文字环绕":浮动元素遮挡正常元素的位置,无法遮挡正常内容的显示,内容围绕在浮动元素周围显示;行内元素直接围绕浮动标签显示；

如果浮动元素的高度不一致，则浮动元素靠近相邻的元素位置，位置不够往下移动。

4）常见问题

子元素全部设置浮动,导致父元素高度为0,影响父元素背景色和背景图片展示,影响页面布局

5）解决

对于内容固定的元素,如果子元素都浮动,可以给父元素固定高度(例:导航栏)

在父元素的末尾添加空的块元素。设置clear:both;清除浮动造成的影响。即在正常元素内添加。clear:取值left/right/both;

为父元素设置overflow:hidden;解决高度为0

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #nav{
            width:900px;
            height:30px;
            background:gray;
        }
        .left{
            width:300px;
            float:left;
            background:green;
        }
        .right{
            width:300px;
            float:right;
            background:red;
        }
        ul{
            margin:0;
            padding:0;
            list-style:none;
        }
        li{
            float:left;
            margin-right:30px;
        }
        #main{
            margin-top:50px;
            width:900px;
            /*解决子元素全部浮动造成父元素高度为0的问题*/
            /*height:400px;*/
            /*overflow:auto;*/
            background:pink;
        }
        .item1{
            width:580px;
            height:400px;
            background:gray;
            float:left;
        }
        .item2,.item3{
            float:right;
            width:300px;
            height:190px;
            background:gray;
        }
        .item2{
            margin-bottom:20px;
        }
        #d1,#d2{
            width:200px;
            height:200px;
            background:red;
        }
        #d1{
            background:green;
            float:left;
        }
        #d2{
            /*使文档中正常元素不受前面浮动元素的影响
            clear:left/right/both;
            */
            clear:left;
        }
        .clear{
            clear:both;
        }
    </style>
</head>
<body>
    <div id="nav">
        <div class="left">
            <ul>
                <li>首页</li>
                <li>物流</li>
                <li>客服</li>
            </ul>
        </div>
        <div class="right">右侧导航</div>
    </div>
    <div id="main">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
        <div class="clear"></div>

    </div>
    <div>
        联系我们
        <div id="d1"></div>
        <div id="d2"></div>
    </div>
</body>
</html>

View Code

3. 定位布局

结合偏移属性调整元素的显示位置

1）属性

position

2）取值

可取relative（相对定位）/absolute（绝对定位）/fixed（固定定位）

postion:relative/absolute/fixed

3）偏移属性

设置定位的元素可以使用偏移属性调整距离参照物的位置

top 距参照物的顶部

right 距参照物的右侧

bottom 距参照物的底部

left 距参照物的左侧

4）分类

relative 相对定位

元素设置相对定位,可参照元素在文档中的原始位置进行偏移,不会脱离文档流

代码：

#d1{

background-color:green;

/*相对位置,调整*/

position:relative;

top:100px;

right:100px;

}

absolute 绝对定位

1. 绝对定位的元素参照离他最近的已经定位的祖先元素进行偏移,如果没有,则参照窗口（html）进行偏移

2. 绝对定位的元素会脱流,在文档中不占位,可以手动设置宽高

使用绝对定位 :
"父相子绝" : 父元素设置相对定位,子元素绝对定位，参照已定位的父元素偏移.
+ fixed 固定定位

1. 参照窗口进行定位,不跟随网页滚动而滚动

2. 脱离文档流，参照窗口进行偏移

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #main{
            height:1500px;
            background:pink;
        }
        #chat{
            width:300px;
            height:300px;
            background:orange;
            /*固定定位:脱离文档流,参照窗口进行偏移;不跟随
            页面滚动而滚动*/
            position:fixed;
            right:0;
            bottom:0;
        }

    </style>
</head>
<body>
    <div id="main">

    </div>
    <div id="chat"></div>
</body>
</html>

View Code

#chat{

width:300px;

height:300px;

background:blue;

position:fixed;

right:0;

bottom:0;

}

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #banner{
            width:300px;
            height:250px;
            position:relative;
        }
        a{
            color:#fff;
            background:orange;
            position:absolute;
            width:100px;
            height:30px;
            right:10px;
            /*根据参照物对应方向的值计算偏移量
            (250*50%)*/
            top:50%;
            /*通过外边距微调元素的位置*/
            margin-top:-15px;
        }
    </style>
</head>
<body>
    <div id="banner">
        <img src="northStar.jpg" alt="">
        <a href="">下一张</a>

    </div>
</body>
</html>

View Code

5）堆叠次序

元素发生堆叠时可以使用 z-index 属性调整已定位元素的显示位置，值越大元素越靠上：只有定位元素能使用偏移属性调整位置；
+ 属性 : z-index
+ 取值 : 无单位的数值,数值越大,越靠上

堆叠：

定位元素与文档中正常元素发生堆叠，永远是已定位元素在上

同为已定位元素发生堆叠，按照 HTML 代码的标签的书写顺序，后来者居上与css无关。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width:200px;
            height:200px;
            background:red;
        }
        #d1{
            background:green;
            position:relative;
            z-index:1;
            /*只有定位元素才能使用偏移属性调位置*/
            /*

            top:100px;
            left:100px;
            */
        }
        #d2{
            position:relative;
            left:100px;
            bottom:-100px;
        }
        #d2:hover{
            /*调整堆叠次序.属性:z-index
            取值为无单位的整数,值越大越靠上;只有定位元素能够
            使用z-index属性调整次序*/
            z-index:10;
        }
    </style>
</head>
<body>
    <!--正常元素与定位元素发生堆叠,永远是定位元素在上方显示-->
    <!--同为定位元素发生堆叠,根据标签书写顺序,后来者居上-->
    <div id="d2"></div>
    <div id="d1"></div>
    <h1>
        实现网页:
        上方为导航栏(包含若干导航项,包含下拉菜单)
        下方为轮播图区域(包含图片,图片索引,左右按钮)
    </h1>
</body>
</html>

View Code

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /*清除浏览器默认样式*/
        body,ul,ol{
            margin:0;
            padding:0;
            /*取消列表默认样式(项目符号)*/
            list-style:none;
        }
        body{
            color:#ddd;
        }
        a{
            text-decoration:none;
            color:#ddd;
        }
        /*外围结构的样式*/
        #nav,#banner{
            width:990px;
            margin:0 auto;
        }
        /*单独设置每个模块的样式*/
        /*1.导航栏*/
        #nav{
           background: green;
           height:30px;
        }
        /*匹配ul中的直接子元素li*/
        #nav ul>li{
            float:left;
            margin-left:50px;
            line-height:30px;
        }
        #nav ul>li:first-child{
            position:relative;
        }
        #nav ol{
            display:none;
            position:absolute;
            z-index:10;
        }
        /*子元素过滤选择器,
        li:first-child匹配作为第一个子元素存在的li */
        #nav ul>li:first-child:hover ol{
            background:red;
            display:block;
        }
        #nav ol li:hover{
            background:orange;
        }
        /*2.轮播图*/
        #banner{
            /*margin-top:30px;*/
            margin:30px auto;
            height:300px;
            position:relative;
        }
        #banner>img{
            width:990px;
            height:300px;
        }
        #banner ul{
            width:140px;
            position:absolute;
            bottom:20px;
            /*参照父元素的宽度计算偏移量*/
            left:50%;
            margin-left:-70px;
            background:green;
        }
        #banner li{
            float:left;
            width:20px;
            height:20px;
            background:red;
            border-radius:50%;
            margin-left:10px;
        }
        #banner ul>li:first-child{
            margin:0;
        }
        #banner a{
        /*元素脱流之后,可以手动调整尺寸,默认大小由内容决定*/
            position:absolute;
            width:60px;
            height:30px;
            background:orange;
            top:50%;
            margin-top:-15px;
        }
        .prev{
            left:10px;
        }
        .next{
            right:10px;
        }

    </style>
</head>
<body>
    <div id="nav">
       <ul>
            <li>
                北京
                <ol>
                    <li>北京</li>
                    <li>上海</li>
                    <li>广州</li>
                    <li>深圳</li>
                </ol>
            </li>
            <li>订单查询</li>
            <li>配送范围</li>
       </ul>
    </div>
    <div id="banner">
        <img src="wxy.jpeg" alt="">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <!--阻止超链接默认的跳转行为
        href="javascript:void(0)"
         才能添加自定义点击事件-->
        <a href="javascript:void(0)" class="prev">上一张</a>
        <a href="javascript:void(0)" class="next">下一张</a>
    </div>
</body>
</html>

View Code

二、背景属性

1. 背景颜色

background-color: red;

2. 背景图片相关

1）设置背景图片

background-image : url("路径");

background-image:url(wxy.jpg)

设置背景图片，指定图片路径，如果路径中出现中文或空格，需要加引号

2）设置背景图片的重复方式

默认背景图片从元素的左上角显示，如果图片尺寸与元素尺寸不匹配时，会出现以下情况：

1. 如果元素尺寸大于图片尺寸，会自动重复平铺，直至铺满整个元素

2. 如果元素尺寸小于图片尺寸，图片默认从元素左上角开始显示，超出部分不可见

background-repeat:repeat/repeat-x/repeat-y/no-repeat

取值：

repeat 默认值，沿水平和垂直方向重复平铺

repeat-x 沿X轴重复平铺

repeat-y 沿Y轴重复平铺

no-repeat 不重复平铺

3）设置背景图片的显示位置

默认显示在元素左上角

background-position:x y;

取值方式：

1. 像素值

设置背景图片的在元素坐标系中的起点坐标(0,0)

2. 方位值

水平：left/center/right

垂直：top/center/bottom

注：如果只设置某一个方向的方位值，另外一个方向默认为center

3. 百分比

类似于方位值，根据百分比计算背景图片的显示坐标。

计算方式：

横坐标 = (元素宽度 - 背景图片宽度）* x%

纵坐标 = (元素高度 - 背景图片高度) * y %

特殊值：

0% 0% 左上角

100% 100% 右下

50% 50% 居中显示

精灵图技术：为了减少网络请求，可以将所有的小图标拼接在一张图片上，一次网络请求全部得到；借助于background-position进行背景图片位置的调整，实现显示不同的图标

div:hover{

background-position:-130px -10px;}

4）设置背景图片的尺寸

background-size:width height;

取值方式：

1. 像素值

1. 500px 500px; 同时指定宽高

2. 500px; 指定宽度，高度自适应

2. 百分比

百分比参照元素的尺寸进行计算

1. 50% 50%; 根据元素宽高,分别计算图片的宽高

2. 50%; 根据元素宽度计算图片宽高,图片高度等比例缩放

3、 cover将图片等比例拉伸足够大，完全覆盖元素，超出部分不可见

contain：将图片拉伸至刚好被元素容纳。

background-size：cover

3. 背景属性简写

background:color url("") repeat position;

h2{

width:200px;

height:200px;

background:red url(mm.jpg) no-repeat center;}

注意：

1. 如果需要同时设置以上属性值，遵照相应顺序书写

2. background-size 单独设置

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div,h1{
            width:100px;
            height:100px;
            margin:200px auto;
            background-color:pink;
            background-image:url(wxy.jpeg);
            background-repeat:no-repeat;
            /*background-position:-100px -100px;*/
            /*background-position:right bottom;*/
            /*background-position:10% 10%;*/
        }
        div:hover{
            background-position:-130px -10px;
        }
        h1{
            width:500px;
            height:500px;
            margin:0 auto;
            /*
            background-size特殊取值:
            cover将图片等比拉伸至足够大,完全覆盖元素,超出部分不可见
            contain将图片拉伸至刚好被元素容纳
            */
            background-size:cover;

        }
        h2{
            width:500px;
            height:500px;
            background:cyan url(wxy.jpeg) no-repeat center;
            font:italic 400 32px youyuan;
        }

    </style>
</head>
<body>
    <h2>字体样式展示</h2>
    <h1></h1>
    <div></div>
</body>
</html>

View Code

三、文本属性

1. 字体相关

1）设置字体大小

font-size:20px;

2）设置字体粗细程度

font-weight:normal;

取值：

1. normal（默认值）等价于400

2. bold (加粗) 等价于700

3）设置斜体

font-style:italic;

4）设置字体名称

font-family:Arial,"黑体";

取值 :

1. 可以指定多个字体名称作为备选字体,使用逗号隔开

2. 如果字体名称为中文,或者名称中出现了空格,必须使用引号

例 :

font-family:Arial;

font-family:"黑体","Microsoft YaHei",Arial;

5）字体属性简写

font : style weight size family;

注意 :
1. 如果四个属性值都必须设置,严格按照顺序书写
2. size family 是必填项

2. 文本样式

1）文本颜色

color:red;

2）文本装饰线

text-decoration:none;

取值 :
underline 下划线
overline 上划线
line-through 删除线
none 取消装饰线

3）文本内容的水平对齐方式

text-align:center;

取值 :

left(默认值) 左对齐

center 居中对齐

right 右对齐

justify 两端对齐

4）行高

line-height:30px;

使用 :
文本在当前行中永远垂直居中,可以借助行高调整文本在元素中的垂直显示位置
line-height = height 设置一行文本在元素中垂直居中
line-height > height 文本下移显示
line-height < height 文本靠上显示
特殊 :
line-height可以采用无单位的数值,代表当前字体大小的倍数,以此计算行高

5） font属性简写2

font : size/line-height family;

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        p{
            font-size:32px;
            font-weight:bold;
            /*font-style:italic;*/
            font-family:"黑体","宋体";
            color:blue;
            /*text-decoration:overline;*/
            width:200px;
            height:200px;
            background:orange;
            text-align:justify;
            /*根据字体大小计算行高*/
            line-height:2;
        }

        span{
            font:italic 700 32px/2 "黑体","宋体";
            background:red;
        }
    </style>
</head>
<body>
    <h1>小泽老师</h1>
    <p>隔壁老王hello隔壁老text-decoration王隔壁老王</p>
    <span>王老师最帅</span>

</body>
</html>

View Code

<div style="400px;height:80px; position:relative" >
    <input type="text" style="370px;height:80px;padding-right:30px;">
    <span style="background-image:url('用户名1.jpg');85px;height:70px;display:inline-block; radius:50%;position:absolute;right:0;top:10px;" ></span>
</div>
利用：padding-right,position:relative，absolute

查看全文

相关阅读:
Memoization-329. Longest Increasing Path in a Matrix
Map-560. Subarray Sum Equals K
Geometry-587. Erect the Fence
Reservoir Sampling-382. Linked List Random Node
Brainteaser-292. Nim Game
Minimax-486. Predict the Winner
Topological Sor-207. Course Schedule
web前端开发规范手册
 css初始化
 asp.net LINQ实现数据分页

原文地址：https://www.cnblogs.com/gyl10/p/11126138.html

css

一、CSS介绍

二、CSS使用方式

1. 行内样式/内联样式

2. 内嵌样式

三、 样式表特征

1. 层叠性

2. 继承性

3. 样式表的优先级

四、CSS 选择器 重点

1. 作用

2. 分类 :

1. 标签选择器

2. id选择器

3. class选择器/类选择器

5. 后代选择器

6. 子代选择器

7. 伪类选择器

2. 行内元素

3. 行内块元素

4. 嵌套原则

5.转换元素类型：

6. 尺寸与颜色原则

1. 尺寸单位

2. 颜色单位

2. CSS 盒模型

1. 内容尺寸

1. 边框实现

3. 网页三角标制作

4. 圆角边框

3. 内边距

1）属性

float

2）取值

3）特点

4）常见问题

5）解决

1）属性

2） 取值

3）偏移属性

4）分类

1. 背景颜色

2. 背景图片相关

1） 设置背景图片

2） 设置背景图片的重复方式

3） 设置背景图片的显示位置

4）设置背景图片的尺寸

3. 背景属性简写

1. 字体相关

1） 设置字体大小

2）设置字体粗细程度

3）设置斜体

4） 设置字体名称

5）字体属性简写

2. 文本样式

1）文本颜色

2） 文本装饰线

3）文本内容的水平对齐方式

4）行高

5） font属性简写2

三、样式表特征

四、CSS 选择器重点

`float`

2）取值

1）设置背景图片

2）设置背景图片的重复方式

3）设置背景图片的显示位置

1）设置字体大小

4）设置字体名称

2）文本装饰线