当前位置： 移动技术网 > IT编程>网页制作>CSS > 前端学习日记之HTML、CSS 简单总结

前端学习日记之HTML、CSS 简单总结

2018年05月08日  | 移动技术网IT编程  | 我要评论

前端学习日记之HTML、CSS 简单总结

标签（空格分隔）： html css 前端学习日记

html超文本标记语言

一. h标题标签

h1-h7

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="keywords" content="11">
        <meta name="description" content="11">
        <title>test</title>
    </head>
<body>
    <h1>1</h1>
    <h2>2</h2>
    <h3>3</h3>
    <h4>4</h4>
    <h5>5</h5>
    <h6>6</h6>
    <h7>7</h7>
    </body>
</html>

  • H1标签(搜索引擎可以搜索到)在一个页面当中只能出现一次，其它h次数不限
  • 标签中无论输入多少空格或换行符都只显示一个空格

二. p段落标签

<p>----------------------------------</p>

  • 上下元素自动换行，为文字添加样式
  • p标签中不能嵌套块级元素（前后元素会被换行） 都是内联标签

三. a超链接标签

<a href="">i am a title</a>

  • href 属性指定超链接目标的URL
  • href=“# ” 锚点标记只能作用于别的a标签中的name值
  • id 属性可以在任何标签中跳转

<a name="tag" href="javascript: void(0);">我是顶部的a标签</a>

<a href="tag"></a>

四. b、i、u、strong、特殊符号使用

1. i标签(斜体)

<i>我会倾斜</i>

2. b标签(粗体)

<b>我被加粗了</b>

3. 标签(下划线)

<u>我有下划线</u>

4. strong标签(加粗)

<strong>我也可以加粗</strong>

  • 与b标签不同的是strong标签可被搜索引擎搜到

5. 特殊符号

  • &nbsp; 可以代替一个空格，输入几次得到几个空格！
  • &lt;strong&gt;小于符号;大于号
  • &quot; 引号
  • &copy; 版权号
  • &times; × 符号 非X符号
  • &amp; & 符号
  • <hr>标签 ：分隔线
  • <br>标签 ：换行

五. 图片标签

1. 图片的常见格式

1> BMP:位图格式(点阵图),占用空间大，色彩丰富(相机主流格式)
2> JPEG: 压缩格式，通常是破坏数据性压缩方式, 图片失帧效果.
3> GIF: 对透明色和多帧支持,动态图。
4> PNG:透明图片格式，无损压缩位图格式，支持Alpha通道的透明、半透明特性

2. 如何引用一个图片标签

1> 绝对路径引用图片

<img src="/home/halooyan/图片/3.png" alt="图片3">

  • src:图片的绝对路径
  • alt:图片描述信息（当图片显示不成功时会显示）可供搜索引擎爬取信息
2> 相对路径引用图片

<img src="2.jpg" alt="图片2">

  • src:图片的相对路径（相对于当前html文件下的路径）
  • alt:图片描述信息（当图片显示不成功时会显示）可供搜索引擎爬取信息

3. 图片标签的其他属性

<img src="" alt="e" width="px" height="px">

  • width、height属性：图片显示的大小，单位为像素

六.列表标签

1. 无序列表

<ul type=""> <li>123</li> </ ul>

  • <li></li>:列表项
  • type="disc(圆点)、square(方块)、circle(圆环)"
  • ul>li*10>a[href="javascript:void(0);"]{$@-}

2. 有序列表

<ol>
    <li>123</li>
    <li>12314</li>
    <li>asd</li>
</ol>
  • type="a(a.b.c..字母)、1(1.2.3...数字)、i(罗马小写数字) "
  • li{$}*27 按tab键 生成27个li项

3. 自定义列表

<dl>
    <dt>上衣</dt>
    <dd>T恤</dd>
    <dd>羊毛衫</dd>
    <dd>衬衣</dd>
</dl>
  • dt: define title
  • dd: define data

七.表格

<table border="1">
    <caption>hahaha</caption>
    <thead>
        <tr>
            <th>1</th>
            <th>1</th>
            <th>1</th>
        
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>111</td>
            <td colspan="2">222</td>
        </tr>
        <tr>
            <td>444</td>
            <td>555</td>
            <td rowspan="2">666</td>
        </tr>
        <tr>
            <td>777</td>
            <td>888</td>
        </tr>
    </tbody>
</table>
  • border="1" :1像素的线框
  • tr :橫行
  • td :一个单元格
  • rowspan="2" :从上往下合一列的两个单元格(跨行)
  • cospan="2" : 从左往右合并一行的两个单元格(跨列)
  • caption: 表格标题
  • th :td加粗,表头专用
  • thead：表头
  • tbody：表身

八.form表单域

1. 单行输入框、密码框、单选按钮、多选框、提交方式

    <form action="#" method="get/post ">
    
    账号：<input name="user" type="text" value="123456" maxlength="7"readonly disabled placeholder="请输入账号"><br><br>
    密码：<input name="pwd" type="password" placeholder="请输入密码"><br><br>
    
    性别：
        <input type="radio" name="gender" value="男"> 男
        <input type="radio" name="gender"value="女"> 女 <br><br>
    爱好:
        <input name="run" type="checkbox">跑步
        <input checked name="swim" type="checkbox">游泳
        <input name="basketball" type="checkbox">篮球
        <input name="bassball "type="checkbox">足球
        
    生日:
        <select size="3">
            <option value="1990">1990</option>
            <option value="1991">1991</option>
            <option selected value="1992">1992</option>
            <option value="1993">1993</option>
            <option value="1994">1994</option>
            <option value="1995">1995</option>
            <option value="1996">1996</option>
            <option value="1997">1997</option>
            <option value="1998">1998</option>
            <option value="1999">1999</option>
            <option value="2000">2000</option>
        </select>
        <select>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
        </select>   
        
    <input type="submit" value="完成"> <!--value修改了提交按钮的文字显示内容-->
    </form>
  • action="#":发送到哪个服务器(# 代表当前网页)
  • method="get" 不写method的话默认是get-在url后拼接？
  • method="post" 隐式的提交
  • <input type=" ">:一个输入框，默认type为text(明文输入)，password(隐藏输入)
  • radio(单选按钮)，在单选按钮中加一个name属性，且值相同就可以实现互斥
  • checkbox(多选按钮)，可选可不选，可多选
  • checked：默认选择了当前项
  • submit:将name=" "这个属性提交给服务器,该属性的值的属性的值为input的内容如果没有input，而是选择(单选或多选)那么该属性的值的属性可用value=" "来代替
  • maxlength: 限制字符长度
  • readonly : 只读
  • disabled : 明令禁止，不会向服务器发送该数据
  • <select><option></option></select>:下拉列表
  • sezi="3":下拉列表框呈现3列数据
  • selected:默认选择了当前项

2. 多行文本输入框、按钮、重置、hidden、pre

  • 多行文本输入框

```

    <textarea name="" id="" cols="10" rows="3">您好啊</textarea>

</form>

```

  • 按钮

<input type="button" value="确认">

  • 重置:还原页面初始加载内容

<input type="reset" value="reset">

  • 隐藏域:在页面上不会显示，value由系统生成

<input type="hidden" name="hidden" value="1231241241">

  • lable标签:文字和选项都可点击，for=" " == id=" "

<input id="1" type="radio" name="gender" value="male"><label for="1">male</label> <input id="2" type="radio" name="gender" value="famale"> <label for="2">famale</label><br>

  • pre标签：格式化文本，保留空格换行

<pre> ad asd asd asd </pre>

CSS层叠样式表

  • cascading style sheet
  • CSS属性和值使用冒号分隔，每条样式结束后加分号；

一. 引用样式的方法

1. 选择器(选择标签，添加样式)

1> class选择器：将多个元素规成一类，对这一类的元素应用样式。
<head>

    <style type="text/css">
    .title{
        color:red;
    }
    </style>
</head>
<body>
    <h2 class="title">This is H2</h2>
    <h2 class="title">This is H2</h2>
    <h2 class="title">This is H2</h2>
    <p class="title">
        This is P
    </p>
    <h2 class="title">This is H2</h2>
    <h2 class="title">This is H2</h2>
</body>
2> id选择器： id的值具有唯一性
<head>
    <style type="text/css">
    #title{
        color: green;
    }
    </style>
</head>
<body>
    <h2 id="title">This is H2</h2>
</body>
3> 标签(元素)选择器：当前页面所有此标签
<html>
<head>
    <style>
    h2{
        background: orange;
    }
    </style>
</head>
<body>
    <h2 class="title">This is H2</h2>
</body>
</html>
4> 通配符：选择页面所有元素
<html>
<head>
    <style>
     *{
        background:blue 
    }
    </style>
</head>
<body>
    <h2 class="title">This is H2</h2>
</body>
</html>
  • 权重： ID选择器 > Class 选择器 > 元素选择器 >
  • 假如选择器相同，则从上往下覆盖，下面覆盖上面
  • 派生（子代）选择器 ：.list li
  • 有子代选择器时，要比较，强的大于弱的，多的大于少的
  • 表示重要的一个样式，一定会被用
        color:gree !important;
}

2. 行内样式、内联样式（标签中直接添加样式）

<html>
<head>
    <style>
    </style>
</head>
<body>
    <h2 class="title" style="color:blue;">This is H2</h2>
</body>
</html>
  • 权重大于style里面的样式

3. 通过link标签，引用style.css样式文件

<head>
    <style>
        
    </style>
    <link rel="stylesheet" href="样式文件的路径">
</head>

二. 段落文本样式

1. 字符间距

letter-spancing: *px;

2. 行间距

line-height: *px;

3. 背景颜色

background: green;

4. 空格间距(主要用于英文文本)

<html>
<head>
    <style>
        .spacing{
            word-spacing: 10px;
        }
    </style>
</head>
<body>
    <h2 class="title" style="color:blue;">This is H2</h2>
    <p class="spacing">
        jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
    </p>
</body>
</html>

空间间距效果图

5. 对其方式

<html>
<head>
    <style>
        .align1{
            /*文本对齐方式:左对齐left,居中center,右对齐right*/
            text-align: center; /*可以水平居中内容中的文字、内联元素、内联块*/
        }
        .align2{
            text-align: left;
        }
        .align3{
            text-align: right;
        }
    </style>
</head>
<body>
    <p class="align1">
        男，1952年出生于中国香港，香港邵氏电影演员，于70年代开始活跃娱乐圈，曾参演过不少动作电影，专演反派角色。他是空手道高手，所以不少电影中以及兼任武指，代表作包括《扮猪吃老虎》、黄志强执导的《打擂台》、《大纽约华埠风云》、《皇家飞凤》等，演出超过100部电影。</p>
    <p class="align2">
        男，1952年出生于中国香港，香港邵氏电影演员，于70年代开始活跃娱乐圈，曾参演过不少动作电影，专演反派角色。他是空手道高手，所以不少电影中以及兼任武指，代表作包括《扮猪吃老虎》、黄志强执导的《打擂台》、《大纽约华埠风云》、《皇家飞凤》等，演出超过100部电影。</p>
    <p class="align3">
        男，1952年出生于中国香港，香港邵氏电影演员，于70年代开始活跃娱乐圈，曾参演过不少动作电影，专演反派角色。他是空手道高手，所以不少电影中以及兼任武指，代表作包括《扮猪吃老虎》、黄志强执导的《打擂台》、《大纽约华埠风云》、《皇家飞凤》等，演出超过100部电影。</p>
</body>
</html>

对齐方式效果图

6. 缩进及文字大小

<!DOCTYPE html>
<html>
<head>
    <style>
        .indent{
            /*默认body标签的文字大小font-size:16px;可以自定义*/
                        font-size:20px;
                        /*首行缩进*/
            text-indent:2em;
                            /*
                单位:
                    px 像素
                    % 百分比 相对body根文字大小
                    em 相对单位, 1em == 当前文字大小
                    rem rootem 根文字大小
                    vem
            */
        }
    </style>
</head>
<body>
    <h2 class="title" style="color:blue;">This is H2</h2>
    <p class="indent">
    美国航空（American Airlines）作为寰宇一家的创始成员之一，是世界最大的航空公司。联合旗下附属美鹰航空和美国连接，美国航空遍布260余个通航城市——包括美国本土150个城市及40个国家的城市。
    </p>
</html>

缩进及文字大小效果图

三. 装饰文本：

1. 上、下、删除划线（～～xx～～）

<!DOCTYPE html>
<html>
<head>
    <style>
        .underline{
            text-decoration: underline; /*下划线*/
        }
        .overline{
            text-decoration: overline;/*下划线*/
        }
        .line-through{
            text-decoration: line-through;/*删除线*/
        }
    </style>
</head>
<body>
    <p class="underline">
    美国航空（American Airlines）作为寰宇一家的创始成员之一，
    </p>
    <p class="overline">是世界最大的航空公司。联合旗下附属美鹰航空和美国连接，</p>
    <p class="line-through">美国航空遍布260余个通航城市——包括美国本土150个城市及40个国家的城市。</p>
</html>
  • <del>￥9.9<\del>del标签也可以表示中划线

装饰文本效果图

2. 字体样式

1>字体大小：font-size:16px;一般都为偶数像素
2>文字字体：font-family:"微软雅黑";衬线体：有笔锋 ，arial无衬线，sans-serif有衬线
3>font-face: xx
4>字体风格：font-style:italik主要用于倾斜或者不倾斜 italik,normal
5>加粗（除了标签，样式也可以加粗）：font-weight:normal; 100-900不同字体有限制, normal==400,bold==700
6>简写方式：font: italik bold 12px/20px(行距离) arial

三. 背景样式

1. div(division划分即图层)

<!DOCTYPE html>
<html>
<head>
    <style>
    .box1{
        width: 800px;
        height: 800px;
        /*背景颜色*/
        background-color: skyblue;
        /*背景图片*/
        background-image: url(http://img2.imgtn.bdimg.com/it/u=4185127117,2252657627&fm=27&gp=0.jpg);
        /*背景重复*/
        background-repeat: no-repeat; /*repeat-x,repeat-y*/
        /*背景位移，前X后Y*/
        background-position: 0px 
0px; 
                /*背景大小，cover边框自适应/
        background-size: 100%；

    }
    </style>
</head>
<body>
123
<div class="box1">456
</div>

789
</html>

div效果图

2. div特点

1>自动将盒子拉伸到最大，如果有宽度则没有外右边距
2>默认高度为0，可以由子元素将父元素的高度撑起来
3>和h标签类似，前后元素自动换行

3. 外边距

元素与元素之间的距离
margin、margin-top、margin-bottom、margin-left、margin-right

  • 如果div有宽度，就没有外右边距，因为要遵循前后元素换行
  • HTML排练方向，从右到左，从上到下
  • 内联元素没有垂直方向的外边距，但是可以有margin-left、margin-right
  • margin：四个参数时-上右下左、两个参数时-垂直水平、三个参数时-上水平下
  • margin-left：auto; margin-right: auto; 有宽度的块级元素居中
  • 外边距允许负值，auto只有外边距才有
<!DOCTYPE html>
<html>
<head>
    <style>
        .box1{
            width: 160px;
            height: 160px;
            background-color: skyblue;
        }
        .box2{
            width: 160px;
            height: 160px;
            background-color: black;
            margin-top: 20px;
        }
    </style>

</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

外边距效果展示

4. 外边距重合

定义：一个元素的下外边距和下面一个元素的上外边距碰到一起会发生重合，外边距会顶着实际的内容边缘，谁的绝对值大就应用谁的
解决办法：
1> 在外面套一个父类盒子，盒子添加样式border：1px solid transparent;
2> 同样添加父类盒子，添加样式为：overflow: hidden;(溢出隐藏)
3> 设置内边距，给父类盒子设置内边距

5. 内边距

padding

  • 内边距没有负值也没有auto。
  • 可以撑大元素体积填充东西（内补白），不会改变蓝色主要内容区域。
  • 可以解决外边距重合的问题

6. 边框(加在元素外围)

border-width border-color border-style 四面都有边框
border-top-width border-top-color border-top-style 只给一面加边框

  • 可用来做一个三角形：块级元素宽高为0，背景颜色透明或无，三角形腰上的边框用来调整角度 颜色为透明（transparent）
  • border-style: solid(实线)、dotted（点状）、dashed(虚线)、double(双线)
<!DOCTYPE html>
<html>
<head>
    <style>
        .box1{
            width: 160px;
            height: 160px;
            background-color: skyblue;
            padding: 0 0 0 0 ;

            border:5px yellow solid;
        }
        .box2{
            width: 160px;
            height: 160px;
            background-color: pink;
            padding: 0 0 0 0 ;

            border-top-width: 20px;
            border-top-color: red;
            border-top-style: solid;
            border-bottom-width: 20px;
            border-bottom-color: black;
            border-bottom-style: solid;
            border-left-width: 20px;
            border-left-color: yellow;
            border-left-style: solid;
            border-right: 20px green solid;  
        }

    </style>

</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

7. 浮动(元素飘到浮动层上)

<!DOCTYPE html>
<html>
<head>
    <style>
        .box1{
            width: 150px;
            height: 150px;
            background-color: black;
            float: left;
        }
        .box2{
            width: 180px;
            height: 180px;
            background-color: red;
            float: left;
        }

        .box3{
            width: 200px;
            height: 200px;
            background-color: pink;
            float: left;
        }
        .box4{
            width: 400px;
            height: 400px;
            background-color: yellow;
        }
        .clear{
            clear: both; /*清除浮动：让浮动层单独占据一行*/ 
        }
    </style>

</head>
<body>
    <div class="box1"></div>    
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="clear"></div> /* 清除浮动 */
    <div class="box4"></div>
</body>
</html>

8. 多种方式清除浮动

1 > <div class="clear"></div>
2> 创建父类大盒子，其中两个元素分别左右浮动，但F12后，父类大盒子却没有宽度，因为子类浮动在天上，没有撑起父类的宽度，这时给父类添加overflow：hidden；样式。
  • 文字不会写在浮动层下面，会被挤出来！

9. rest CSS重置样式

  • 解决不同浏览器默认样式的兼容问题（自己定义一套）

10. 简单上中下布局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Examples</title>
        <meta name="description" content="">
        <meta name="keywords" content="">
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .header {
                height: 50px;
                background: rgba(0,0,0,0.80);
            }
            .nav {
                width: 980px;
                height: 50px;
                margin: 0 auto;
                color: #fff;
            }
            .content{
                width: 980px;
                height: 425px;
                margin-right: auto;
                margin-left: auto;
                overflow: hidden;
                border-bottom: 1px solid black ;
            }
            .left {
                width: 645px;
                height: 425px;
                background-color: yellow;
                float: left;

            }
            .right {
                width: 310px;
                height: 425px;
                background-color: pink;
                float: right;
            }
            .wrap980{
                width: 980px;
                margin: 0 auto;
                height: 200px;
                background-color: green;
            }
            body{
                min-width: 980px;  
            }


        </style>
    </head>
<body>
    <div class="header">
        <div class="nav">This is NAV</div>
    </div>
    <div class="main">
        <div class="content">
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </div>
    <div class="footer">
        <div class="wrap980"></div>
    </div>

</body>
</html>

11. 定位

1> relative相对定位
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Examples</title>
        <meta name="description" content="">
        <meta name="keywords" content="">
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .box1 {
                width: 150px;
                height: 150px;
                background: black;

            }
            .box2 {
                width: 50px;
                height: 50px;
                background-color: red; 
                position: relative; 
            }
        </style>
    </head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box1"></div>
</body>
</html>

  • 随心所欲将元素摆放任意位置，并且不影响别的元素的位置。
  • 只要用了定位，且值不为static时，都拥有四个样式：top、left、bottom、right，来调整元素的位置，
  • 移动后元素仍然占据原来的位置
  • 相对与元素父类元素定位进行平移
2> absolute绝对定位
  • 不占据任何空间，比浮动飘得还要高
  • 会覆盖浮动，但不会像浮动一样从左到右排列，而是发生重叠现象
  • 相对于该元素的父类元素的非static定位进行移动，若父类元素没有专门定位,则向上参考父类的父类的非static定位。。。
3> fixed固定定位
  • 不占据任何空间
  • 只以浏览器窗口为参考点进行移动
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>fix定位之右下角按钮固定</title>
        <meta name="description" content="">
        <meta name="keywords" content="">
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            .right {
                width: 560px;
                height: 400px;
                background: pink;
                float: left;
            }
            .left {
                width: 250px;
                height: 400px;
                background: green;
                float: right; 
            }
            .warp {
                overflow: hidden;
                width: 825px;
                margin-top: 50px;
                margin-right: auto;
                margin-left: auto;
                
            }
            body {
                height: 2000px;
            }
            .f-box {
                width: 70px;
                height: 80px;
                background: skyblue;
                position: fixed; 
                left: 50%; /* 内容以浏览器中心为参照物*/
                margin-left: 432px; /*内容的左外边距*/
                bottom: 200px; /*内容距参照物底部距离 */
                font-size: 42px; /* 文字大小*/
                color: white; /*文字颜色*/
                cursor: pointer; /* 鼠标小手指 */
                text-align: center; /* 文字对齐方式实现文字上下居中 */
                line-height: 80px;  /* 行间距实现文字水平居中 */
                }
        </style>
    </head>
<body>
    <div class="warp">

    <div class="right"></div>
    <div class="left"></div>

    </div>
    <div class="f-box">^</div>

</body>
</html>

12. 层级关系

z-index: *;

  • 只针对于非static有定位元素
  • 值越高优先级越高，值相等会实现覆盖-后来者居上
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Examples</title>
        <meta name="description" content="">
        <meta name="keywords" content="">
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            .box1 {
                width: 150px;
                height: 150px;
                background: blue;
                position: absolute;
                z-index: 
            }
            .box2 {
                width: 180px;
                height: 180px;
                background: black;
                position: absolute;
                z-index: ;
            }
            .box3 {
                width: 200px;
                height: 200px;
                background: red;
                position: absolute;
            }

        </style>
    </head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

13. banner轮播图

静态简易轮播

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <link href="" rel="stylesheet">
        <title>Examples</title>
        
        <style>
            * {
                margin: 0;
                padding: 0;

            }
            .banner-wrap{
                /* 设置大盒子的宽高和图片一致*/
                width: 1023px; 
                height: 400px;
                /*让轮播图盒子居中*/
                margin-left: auto;
                /*让轮播图盒子居中*/
                margin-right: auto;
                margin-top: 50px;
                position: relative; /* 相对定位，让其占据一定的位置*/
                /* 用户无法选中*/
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                -o-user-select: none;
                user-select: none;
            }
            .img-box{
                width: 1023px;
                height: 400px;
/*              overflow: hidden; 不用overflow解决溢出，用绝对定位让其重叠 */

            }
            .img-box img {
                position: absolute;
            }
            li {
                list-style: none; /*去除列表的小圆点 用列表的原因时其很有规则*/
            }
            .previous, .next { /*注意此处一次写两个样式，要用逗号分隔开*/
                width:70px; 
                height:100px;
                background: rgba(0, 0, 0, 0.8);
                color: #fff;
                font-size: 50px;
                cursor: pointer;
                text-align: center;
                line-height:100px;
                position: absolute; /*绝对定位让其重叠*/
                top: 50%; /* 相对于轮播图盒子位置的百分之五十高度*/
                z-index: 3;  /* 优先级高于图片盒子*/
                margin-top:-50px; /* 位置完全居中*/
            }

            .previous {
                left: 0;  /*靠左*/
            }
            .next{
                right: 0; /*靠右*/
            }
            .button{
                position: absolute;
                bottom: 20px;
                z-index: 2;
                left: 50%;
                margin-left:-39px;
            }

            .button li{

                width: 16px;
                height: 16px;
                background: white;
                float: left; /* 改变列表排列顺序为左到右而不是默认的上到下*/
                margin-left: 10px; /*按钮间间距*/
                border-radius: 8px 8px 8px 8px ; /* CSS3 设置圆角*/
                cursor: pointer;

            }
            .button .on {
                background: orange; /*优先级最高时的颜色变化*/
            }
        </style>

    </head>
    <body>
       <div class="banner-wrap">

        <div class="img-box">
            <img src="image/1.jpg" alt="" width="1023" height="400" >
            <img src="image/2.jpg" alt="" width="1023" height="400" style="z-index: 2">
            <img src="image/3.jpg" alt="" width="1023" height="400">
        </div>

        <div class="paging">
            <div class="previous">&lt;</div>
            <div class="next">&gt;</div>
        </div>
        
        <ul class="button">
            <li class="on"></li>
            <li></li>
            <li></li>
        </ul>

       </div>

    </body>
</html>

14. CSS元素类型

1> 块级元素(display:block)
  • 例如：h p ul ol dl li(list-item) form div body html
  • 前后元素都会换行，可以设置宽高度
  • margin：auto进行居中
  • 当使用了脱离正常文档流的样式（float、absolute、fixed）， 元素作为块级元素显示时无法以正常方式（margin:auto）居中
2> 内联元素、行内元素(display:inline）
  • a b u i strong span
  • 都在一行，前后元素不会换行
  • 无法设置宽高度和上下外边距
3> 内联块、行内快(display:inline-block)
  • input
  • 在一行的元素但是拥有了块的特质（除了占一行）

15. 文字线框样式

vertical-align:bottom/top/baseline/middle; /*不修改默认基线*/

16. overflow溢出样式

overflow: hidden\scroll(滚动)\auto(超出滚动，不超默认)\visible(默认的)

17. 透明样式

1>

opacity：0-1; /* IE 9+ */

  • 子元素不是以继承的方式，但是也能受到影响
2>

filter：alpha(opacity=1-100); /* IE 8~9 */

3>

background:rgba(0-255, 0-255, 0-255 0-1); /*三原色 red green blue alpha*/
background：#21D24C；/*十六进制数值，两个值一个颜色*/

18. 阴影样式

1> 盒子阴影

box-shadow: *px *px *px *px #000000; /* 内阴影， X方向，Y方向，模糊值，阴影大小，阴影颜色 */

2> 文字阴影

text-shadow：inset *px *px *px *px #000000; /* X方向，Y方向，模糊值，阴影大小，阴影颜色 */

19. CSS3 选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>CSS3 select</title>
        <meta name="description" content="">
        <meta name="keywords" content="">
        <link href="" rel="stylesheet">
        
        <style>

            .list1 li:first-child {
                background: orange; /*第一个*/

            }
            .list1 li:first-child + li {
                background: pink;  /*第一个的下一个*/
            }
            .list1 li:last-child {
                background: red;
            }
            .list1 li:nth-child(3) {
                background: black; /* 正数*/
            }
            .list1 li:ntc-last-child(3){
                background: blue;  /*倒数*/
            }

            .list2 li:last-child:not(:first-child) {
                background: #F200E1; /*判断 除了第一个元素*/
            }
            .box div.box1{
                background: yellow
            }
        </style>

    </head>
<body>
    <ul class="list1">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>
    <ul class="list2">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <div class="box">
        <div class="box1">99</div>
        <div class="box1">99</div>
        <div class="box1">99</div>
        <div class="box2">88</div>
        <p class="box1">111</p>
        <span class="box1">234</span>
    </div>
</body>
</html>

20. 锚伪类（主针对a标签）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>CSS3 select</title>
        <meta name="description" content="">
        <meta name="keywords" content="">
        <link href="" rel="stylesheet">
        
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            /* 访问之前的颜色*/
            .a1:link {
                color: yellow;
            }
            /* 访问之后的颜色 */
            .a1:visited {
                color: red;
            }
            /*鼠标划上去的颜色*/
            .a1:hover{
                color: pink;
            }
            /*鼠标点击时的颜色*/
            .a1:active{
                color: green;
            }
            /* 得到焦点*/
            .a1:focus {
                color: blue;
            }
            .nav {
                width: 200px;
                height: 500px;
                border: 1px solid red; 
                position: relative;
            }
            .list {
                display: none;
            }
            .item{
                height: 40px;
                background: orange;
                color: #fff;
                font-size: 20px;
                text-align: center;
                line-height: 40px;
            }
            .item:nth-child(2){
                background: skyblue;
            }
            .item:hover .list {
                width: 225px;
                height: 40px;
                background: skyblue;
                position: absolute;
                left: 202px;
                top: 0;
                display: block;
            }
        </style>

    </head>
<body>

    <a class="a1" href="http://qq.com">tiaozhandaoQQ</a>
    
    <div class="nav">
        <div class="item">
            1
            <div class="list">
                a
            </div>
        </div>
        <div class="item">
            2
            <div class="list">
                b
            </div>
        </div>
    </div>
</body>
</html>

21. 阿里巴巴矢量字体图标

 <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="keywords" content="">
<!--        <link href="http://at.alicdn.com/t/font_654997_e7uuuej0aw9izfr.css
" rel="stylesheet"> -->
        <style>
            
            @font-face {
              font-family: 'iconfont';  /* project id 654997 */
              src: url('http://at.alicdn.com/t/font_654997_e7uuuej0aw9izfr.eot');
              src: url('http://at.alicdn.com/t/font_654997_e7uuuej0aw9izfr.eot?#iefix') format('http:embedded-opentype'),
              url('http://at.alicdn.com/t/font_654997_e7uuuej0aw9izfr.woff') format('woff'),
              url('http://at.alicdn.com/t/font_654997_e7uuuej0aw9izfr.ttf') format('truetype'),
              url('http://at.alicdn.com/t/font_654997_e7uuuej0aw9izfr.svg#iconfont') format('svg');
            }
              .iconfont {
                font-family: "iconfont";
                width: 16px;
                height: 16px;
                font-size: 16px;
              }
}
        </style>

    </head>
<body>
<div class="iconfont">&#xe600;</div>

</body>
</html>

22. 隐藏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Examples</title>
        <meta name="description" content="">
        <meta name="keywords" content="">
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            .box1, .box2 {
                width: 150px;
                height: 150px;  

            }
            .box1 {
                background: orange;
                /*完全隐藏不占据空间 ，也可以用一个父类有高宽度的盒子占据空间*/
                /*display: none;*/
                /* 隐藏占据空间*/
                visibility: hidden; /* 默认 visiable*/
            }
            .box2 {
                background: blue;

            }
        </style>
    </head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>

23. 圆角

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Examples</title>
        <meta name="description" content="">
        <meta name="keywords" content="">
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            .box {
                width: 150px;
                height: 150px;
                background: pink;
                margin: auto;
                margin-top: 100px;
                border-radius: 0px 0px 0px 0px ; /*top right bottom right*/

            }
        </style>
    </head>
<body>
<div class="box"></div>

</body>
</html>

24. 伪类

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Examples</title>
        <meta name="description" content="">
        <meta name="keywords" content="">
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            li {
                list-style: none;
            }
            a {
                text-decoration: none;
            }
            .list li{
                float: left;
                width: 120px;
                background: red;
                text-align: center;
                color:#fff;
                margin-left: 20px;
                position: relative;
            }
            .list li:after {
                content: "";
                border-top: 8px solid #fff;
                border-left:8px dashed transparent;
                border-right: 8px dashed transparent;
                position: absolute;
                right: 5px;
                top: 8px;

            }
        </style>
    </head>
<body>
    <ul class="list">
        <li>home</li>
        <li>photo</li>
        <li>exit</li>
    </ul>

</body>
</html>

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网