html5+css3 笔记

入门知识导读


image.png

本地使用hbuilder 内置服务器访问 原理


image.png

h5 与 h4 区别：
1.h5 比h4 页面 组成要简单明了
2.h5 支持的标签比 h4 要多 比如 video 等


h5页面

h4页面

组面组成 两个部分 0
head 头部 ：内涵
body 身子 ：展示部分


image.png

body中的标签

标题标签 <h1></h1>

当出现错误时不同的浏览器 翻译出来的 页面不同

image.png

image.png

换行标签

浏览器翻译 html过程是 从上到下从左到右

段落标签<p>

实现自然段 效果

横线

(标题与文章内容的分割线)

加粗与斜体 <strong> <em>

image.png

图像标签 <img>

超链接标签

<a href="girl.html" target="_self">卖女孩的小火柴</a>
属性
href : 链接地址
target：目标 当前页跳转 target="_self" / 新打开一个页面 target="_blank"

字符实体 &标签 帮我们进行转义

比如 空格 &nbsp

body 设置背景颜色 使用bgcolor 属性

CSS 层叠样式表

html-body 相当于赤身裸体的人
CSS 相当于衣服
用法 head标签中 写一个<style>标签
选择待修饰的部分如下图：选中的修饰对象是 body 页面全部展示部分


image.png

传统选择器3种
1。 标签选择器 ：直接选择html中的标签 进行修饰
2。 .是类选择器的标志 可以选择对应的类
3。 #是 id选择器的标志 可以选择对应的id


image.png
image.png

对颜色 进行精准的选择 可以使用 #+6个16进制 数的形式
具体可以用百度去搜索rgb颜色对照表


rgb颜色对照表

css 后代选择器


image.png

树状结构的后代


image.png

css高级选择器

使用后代选择器 方法

##后代选择器
h3 strong{ color:blue;font-size:20px }

交集选择器

image.png
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
　　<style type="text/css">
 h3.special{
  color:red;
 }
 h3#aaaa{
    color:green;
 }
　　</style>
 　　  </head>
　　<body>
 　　   <h3>标记选择器.class1</h3>
 　　   <h3>标记选择器.class2</h3>
 　　   <h3 class="special">标记选择器.class3</h3>
 　　   <h3 id="aaaa">标记选择器.class4</h3>
 　　   <h3>标记选择器.class5</h3>    
   　　 <p class="special">使用于别的标记</p>
　　</body>
　　</html>
image.png

并集选择器

image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
　　<style type="text/css">
h1, h2, h3, h4, h5, p{
 color: blue;
}
　　</style>
 　　 </head>
　　<body>
　　   <h1>集体声明h1</h1>
　　   <h2 class="special">集体声明h2</h2>
 　　  <h3>集体声明h3</h3>
　　  <h4>集体声明h4</h4>
 　　  <h5>集体声明h5</h5>
 　　  <p>集体声明p1</p>
 　　  <p class="special">集体声明p2</p>
 　　  <p id="one">集体声明p3</p>
　　</body>
　　</html>
image.png

css 外部样式引入 两种方法

1. 导入外部样式表 @import

common.css

@charset "gb2312";  
/* CSS Document */

#first{font-size:16px; color: green;}
#second{font-size:24px;color: red;}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导入外部样式表</title>
<style type="text/css">

@import url("css/common.css");

</style>
</head>
<body>
  <h1>北京欢迎你</h1>
  <p id="first">北京欢迎你，有梦想谁都了不起！</p>
  <p id="second">有勇气就会有奇迹。</p>
  <p>北京欢迎你，为你开天辟地</p>
  <p>流动中的魅力充满朝气。</p>
</body>
</html>
显示结果

2。链接外部样式表 link

<link href="css/common.css" rel="stylesheet" type="text/css" />

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>链接外部样式表</title>
<link href="css/common.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <h1>北京欢迎你</h1>
  <p id="first">北京欢迎你，有梦想谁都了不起！</p>
  <p id="second">有勇气就会有奇迹。</p>
  <p>北京欢迎你，为你开天辟地</p>
  <p>流动中的魅力充满朝气。</p>
</body>
</html>

行内样式 在标签内使用style属性 （特殊情况才使用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css" >
        p{
            color:red;
        }
       /* h1{
            font-size: 10px;
        }*/
    </style>
</head>
<body>
    <h1>hello css 标签选择器</h1>
    <!--行内选择器/行内样式      
    只针对当前被修饰的标签进行修改 
    有限级别最高     -->
    <p style="color: green;">标签选择器</p>
</body>
</html>

优先级顺序对比

link外链 与 style 看上下位置 下面的覆盖上面的
在style里面  普通选择器 都是下面的 覆盖上面的
      @import url("css/common1.css"); 无论在上还是在下优先级最低
行内引用 sytle 优先级最高 
    标签选择器 <类选择器 < id选择器
image.png

image.png

css 中的继承关系 修饰父类时 子类会继承父类中的特点

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>链接外部样式表</title>
<link href="css/common.css" rel="stylesheet" type="text/css" />
<style>
    /*修饰body 时   body的子类也继承了 父类的 修饰    所有body下 字体都为红色*/
body{
    color: red;
}
</style>
</head>
<body>
    撒旦发生的
  <h1>北京欢迎你</h1>
  <p id="first">北京欢迎你，有梦想谁都了不起！</p>
  <p id="second">有勇气就会有奇迹。</p>
  <p>北京欢迎你，为你开天辟地</p>
  <p>流动中的魅力充满朝气。</p>
</body>
</html>
继承关系上下一片红

css 修饰字体
font-family:字体
font-size: 大小
font-style:字体风格
font-wight:字体粗细
font ：可以只是所有的属性


image.png
p {font:oblique bold 20px "楷体";}

text 文本修饰
text-align: 文本位置
text-decoration: 文本修饰 横线

.p1 {
            text-decoration: none;
        }
        .p2{
            text-decoration: underline;
        }
        .p3{
            text-decoration: overline;
        }
        .p4{
            text-decoration: line-through;
        }
        .p5{
            text-decoration: blink;
        }
image.png

伪类：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a{text-decoration: none;}
        a:hover{text-decoration: underline;color: red;}
        p:hover{font-size: 20px;font-weight: bold;}
    </style>
</head>
<body>
<a href="#">你好啊</a>
<p>产业融入教育</p>
</body>
</html>

背景颜色 background-color

列表去掉圆点 list-style

 li{

            list-style: none;
        }

引用外部 漂亮的字体
http://www.fontawesome.com.cn/

image.png

div+css 盒式布局

image.png

width ： 是 content 的宽度
height: 是 content 的高度

border :边框
padding ：内边距
margin ：外边距

而以页面中 div实际宽度 或者高度 计算
realwidth=width+2border +2padding
realheight=height+2border+2padding

image.png
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>div 测试   div+css 布局</title>
        <style>
            div{
                width: 600px;
                height: 200px;
                border: 0px solid black;
            }
            #a1{
                width: 796px;
                border: 1px solid black;
                padding: 1px;
            }
            #a2{
                width: 760px;
                border: 10px solid black;
                padding: 10px;
            }
          #a3{
                border: 50px solid black;
                padding: 50px;
            }
        </style>
    </head>
    <body>
            <!--real width  一致  -->
            <!-- 604px +196px -->
        <div id="a1"> 你好1 </div>
        <!--   640px +160px  -->
        <div id="a2"> 你好2 </div>
        <!--real width 800px -->
        <div id="a3"> 你好3 </div>
    </body>
</html>
边界实际宽度计算

设置
border -width： 边框宽度
border-color ： 边框颜色 （上 右 下 左 ）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>div 测试   div+css 布局</title>
        <style>
            div{
                width: 600px;
                height: 200px;
                border: 0px solid black;
            }
            #a4{
                border-width: 10px;
                border-color: brown red green pink;
                
            }
            
        </style>
    </head>
    <body>
        
        <div id="a4">  你好4 border-color </div>
        
    </body>
    
    
    
</html>
image.png
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>div 测试   div+css 布局</title>
        <style>
            div{
                width: 600px;
                height: 200px;
                border: 0px solid black;
            }
            #a4{

                border-width: 10px;
                border-color: brown red;
                
            }
            
        </style>
    </head>
    <body>
        <div id="a4">  你好4 border-color </div>
    </body>
</html>
image.png

border-color 结论为：
一个颜色 ： 上下左右一致
两个颜色 ： 上下(第一个颜色)左右（第二个颜色）
三个颜色 ： 上 (第一个颜色) 下(第二个颜色) 左右(第三个颜色)
四个颜色： 上 右 下 左

内外边框

参考系的问题
如果 以a6 为参考系 a6与a5的距离是 a6的外边距 在a6 当中设置margin
如果 以a5 为参考系 a5 与a5 的距离是 a5的内边距 在a5 当中设置 padding

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>div 测试   div+css 布局</title>
        <style>
            div{
                width: 600px;
                height: 200px;
                border: 0px solid black;
            }

            #a5{
                border: 1px black  solid ;
                padding-top: 20px;
                padding-left: 50px;
            }
            #a6{
                width: 100px;
                height: 100px;
                border: 1px red solid;
                
                /*margin-left: 50px;
                margin-top: 20px;*/
            }
        </style>
    </head>
    <body>

        <div id="a5">  
            <div id="a6" ></div>  
        </div>
        
    </body>
    
    
    
</html>
image.png

页面居中对齐 margin 0 auto

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
       #a1{
           width: 200px;
           height: 200px;
           margin: 0 auto;
           background-color: gray;
       }
   </style>
</head>
<body>
   <div>
       <div id="a1">
           我要水平居中对齐
       </div>
   </div>
</body>
</html>

元素默认值

body标签： 默认margin=8px
p标签 ： 默认 margin- top/bottom=16px
h1标签：默认 margin- top/bottom=21.440px
ul标签： 默认 margin- top/bottom=16px ,padding left=40px


通过F12 使用开发者工具查看 h1标签 属性

元素分类

行级元素

1.inline内嵌元素
<a>,<strong>,<em>,<span>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>内嵌元素的特性</title>
        <!--1.默认同行可以继续跟同类型标签
            2.内容撑开宽度
            3.不支持宽高
            4.不支持上下的margin-->

        <style>
            .outer{
                width: 800px;
                height: 300px;
                border: 1px black solid;
            }
            #inner1{
                margin-top: 100px ;
                margin-left: 100px;
            }
            #inner2{
                margin-top:  100px ;
                margin-left: 100px;
            }
            #inner3{
                margin-top:  100px ;
                margin-left: 100px;
            }
        </style>
    </head>
    <body>
        <div class="outer">
        <a id="inner1" > 你好啊啊实打实的阿发士大夫</a>
        
        </div>
        <div class="outer">
        
        <div id="inner2"> 你好啊啊实打实的阿发士大夫</div>
        
        </div>
        <div class="outer">
        
        <span id="inner3"> 你好啊啊实打实的阿发士大夫</span>
        
        </div>
    </body>
</html>
image.png

block 块级元素

块元素的特性：
1.默认独占一行显示
2.没有宽度时，默认撑满一排
3.支持所有css命令
<p>
<div>
<h1>~<h6>
<ol>-<li>
<ul>-<li>
<dl>-<dt>-<dd>

内联块元素—代表元素
img
inline-block的特点：
元素在一行显示
支持宽高
没有宽度的时候内容撑开宽度

            既具备 inline 的 一行显示多个
            也具备 block 改变宽高  
            所以img标签很特殊 叫做 inline-block

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>块级元素 </title>
        <!--
            <p>
            <div>
            <h1>~<h6>
            <ol>-<li>
            <ul>-<li>
            <dl>-<dt>-<dd>

         块元素的特性：
        1.默认独占一行显示
        2.没有宽度时，默认撑满一排
        3.支持所有css命令  
        -->
        
        <!--内联块元素—代表元素img
             inline-block的特点：
                元素在一行显示
                支持宽高
                没有宽度的时候内容撑开宽度
                
                既具备 inline 的 一行显示多个
                也具备 block 改变宽高  
                所以img标签很特殊 叫做 inline-block 
        -->
        <style>
            img{
                
                width: 100px;
                height: 200px;
                
            }
            
        </style>
    </head>
    <body>
        <img src="../../02_课堂练习/02_课堂练习/ch01/练习4：书籍列表/images/diangong.jpg" />
        <img src="../../02_课堂练习/02_课堂练习/ch01/练习4：书籍列表/images/diangong.jpg" />
        <img src="../../02_课堂练习/02_课堂练习/ch01/练习4：书籍列表/images/diangong.jpg" />
        
    </body>
</html>
inline-block

display 1.显示与隐藏 2块级与行级元素的转变

@charset "utf-8";
/* CSS Document */
body,h1, p, div {
    margin:0px;
    padding:0px;
}
body {
    font-size:12px;
    line-height:25px;
}
#music {
    width:260px;
}
#music h1 {
    font-size:14px;
    text-align:center;
    line-height:35px;
}
#music p {
    text-align:right;
    color:#6E6E6E;
    border-bottom:1px #7F7F7F dashed;
    line-height:28px;
    margin-bottom:10px;
}
#music span {
    display:block;
    padding-left:5px;
}
#show h2{
    color:red;
}
#show:hover div{
    display:inline;
}
#music div {
    padding-left:5px;
}

#music .song-2{display:none}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>最炫民族风</title>
<link href="css/music.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="music">
  <h1>最炫民族风</h1>
  <p>演唱：凤凰传奇</p>
  <span>苍茫的天涯是我的爱</span>
  <span>绵绵的青山脚下花正开</span>
  <span>什么样的节奏是最呀最摇摆</span>
  <span>什么样的歌声才是最开怀</span>
  <span>弯弯的河水从天上来</span>
  <span>流向那万紫千红一片海</span>
  <div id = "show">
    <h2>显示全部</h2>
    <div class="song-2">火辣辣的歌谣是我们的期待</div>
    <div class="song-2">一路边走边唱才是最自在</div>
    <div class="song-2">我们要唱就要唱得最痛快</div>
  </div>


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

图片背景

背景图像
background-image属性


image.png

背景重复方式 :默认是重复的
background-repeat属性


image.png

背景定位
background-position属性


image.png

image.png

image.png

image.png
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 800px;
            height: 600px;
            border: 1px solid red;
            background-image: url("images/book.jpg");
            background-repeat: no-repeat;
            background-position: bottom right;
        }
    </style>
</head>
<body>
<div>
    摆渡人摆渡人摆渡人摆渡人 摆渡人摆渡人摆渡人摆渡人
</div>
</body>
</html>

表格 table

<tr> 行
<td> 普通列
<th> 标题列
colspan="2" 占两列
rowspan="2" 占两行

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        textarea{
            vertical-align: top;
        }
        span{
            display: inline-block;
            width: 250px;
            text-align: right;
        }
        h2,#btn-group{
            margin-left: 250px;
        }
    </style>

</head>
<body>
    
    
<table border="1">
<tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
    <th rowspan="2">为空</th>
</tr>
<tr>
    <td background="background.jpg">Bill Gates</td>
    <td>555 77 854</td>
    <td>555 77 855</td>
</tr>


</table>
</body>
</html>
image.png

关于table 的 css 修饰

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>   
            table, th, td{     
                border: 1px solid black;       
                border-collapse: collapse; 
                }  
            th, td{        
                padding: 6px;
                color:blue;   }
                
             </style>
        
        
    </head>
    
    
    <body>
        <table>    
<caption>考试成绩表</caption> 
<thead>   
    <tr><th>姓名</th><th>语文</th><th>英语</th> 
        <th>数学</th><tr></thead>
<tbody><tr><td>小明</td><td></td><td>80</td>
    <td>80</td>   
 </tr>
    <tr>        <td>小红</td>       <td>90</td>        <td>90</td>        <td>90</td>    </tr>    <tr>        <td>小杰</td>        <td>100</td>        <td>100</td>        <td>100</td>    </tr>    </tbody>    <tfoot>    <tr>        <td>平均</td>        <td>90</td>        <td>90</td>        <td>90</td>    </tr>    </tfoot></table>    
        
        
    </body>
</html>
border-collapse: collapse

如果不设置 边框坍塌效果border-collapse: collapse


image.png
image.png
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        textarea{
            vertical-align: top;
        }
        span{
            display: inline-block;
            width: 250px;
            text-align: right;
        }
        h2,#btn-group{
            margin-left: 250px;
        }
    </style>

</head>
<body>
<div>
    <h2>表单</h2>
    <form>
        <p>
            <span>请选择您的性别：</span>
            <input type="radio" name="sex" id="nan" /> <label for="nan">男</label>
            <input type="radio" name="sex" id="nv" checked="checked" /> <label for="nv">女</label>
        </p>
        <p>
            <span>请选择你的爱好：</span>
            <input type="checkbox" name="aihao"/> 睡觉
            <input type="checkbox" name="aihao"/> 吃饭
            <input type="checkbox" name="aihao"/> 足球
            <input type="checkbox" name="aihao"/> 篮球
            <input type="checkbox" name="aihao"/> 乒乓球
            <input type="checkbox" name="aihao"/> 打豆豆
        </p>
        <p>
            <span>请选择您的家乡：</span>
            <select>
                <option>北京</option>
                <option>河北</option>
                <option>河南</option>
                <option>山东</option>
                <option>山西</option>
                <option>湖北</option>
                <option>安徽</option>
            </select>
        </p>

        <p>
            <span>请输入您的账户名：</span>
            <input type="text" value="" />
        </p>
        <p>
            <span>请输入您的密码：</span>
            <input type="password" />
        </p>
        <p>
            <span>请输入您的建议和要求：</span>
                <textarea cols="30" rows="10"></textarea>
        </p>
        <p id="btn-group">
            <input type="button" value="登录" />
            <input type="submit" />
            <input type="reset" />
        </p>

    </form>
</div>
</body>
</html>
</body>
</html>
image.png

position

image.png

相对位置 relative

css文件

@charset "gb2312";
/* CSS Document */

div {
    width: 300px;
    margin:10px;
    padding:5px;
    font-size:12px;
    line-height:25px;
}
#father {
    width: 500px;
    margin: 50px auto;
    border:1px #666 solid;
    padding:10px;
}
#first {
    background-color:#FC9;
    border:1px #B55A00 dashed;
    position:relative;
    top:10px;
    left:50px;
}
#second {
    background-color:#CCF;
    border:1px #0000A8 dashed;
}
#third {
    background-color:#C5DECC;
    border:1px #395E4F dashed;
}

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<title>position属性</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="father">
  <div id="first">第一个盒子</div>
  <div id="second">第二个盒子</div>
  <div id="third">第三个盒子</div>
</div>
</body>
</html>
image.png

absulote 绝对定位

脱离文档流 以最近的父节点来进行定位 如果没有 祖先 节点 以浏览器 左上角为坐标原点 定位。

把父类 position设置为 static时 不可以约束 其子元素 的绝对参考系位置
css

@charset "gb2312";
/* CSS Document */

div {
    width: 300px;
    margin:10px;
    padding:5px;
    font-size:12px;
    line-height:25px;
}
#father {
    width: 500px;
    margin: 50px auto;
    border:1px #666 solid;
    padding:10px;
}
#first {
    background-color:#FC9;
    border:1px #B55A00 dashed;
    position: absolute;
    top:10px;
    left: 50px;
}
#second {
    background-color:#CCF;
    border:1px #0000A8 dashed;
}
#third {
    background-color:#C5DECC;
    border:1px #395E4F dashed;
}

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>position属性</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="father">
  <div id="first">第一个盒子</div>
  <div id="second">第二个盒子</div>
  <div id="third">第三个盒子</div>
</div>
</body>
</html>

父子关系· 看 父类 的 position
可以约束位置

@charset "gb2312";
/* CSS Document */

div {
    width: 300px;
    margin:10px;
    padding:5px;
    font-size:12px;
    line-height:25px;
}
#father {
    width: 500px;
    margin: 50px auto;
    border:1px #666 solid;
    padding:10px;
    position: relative;  /*absolute与relative可以约束 */   
    
}
#first {
    background-color:#FC9;
    border:1px #B55A00 dashed;
    position: absolute;
    top:10px;
    left: 50px;
}
#second {
    background-color:#CCF;
    border:1px #0000A8 dashed;
}
#third {
    background-color:#C5DECC;
    border:1px #395E4F dashed;
}

不可以约束

@charset "gb2312";
/* CSS Document */

div {
    width: 300px;
    margin:10px;
    padding:5px;
    font-size:12px;
    line-height:25px;
}
#father {
    width: 500px;
    margin: 50px auto;
    border:1px #666 solid;
    padding:10px;
    position: static;
    
}
#first {
    background-color:#FC9;
    border:1px #B55A00 dashed;
    position: absolute;
    top:10px;
    left: 50px;
}
#second {
    background-color:#CCF;
    border:1px #0000A8 dashed;
}
#third {
    background-color:#C5DECC;
    border:1px #395E4F dashed;
}

垂直布局 z-index

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #a2{
                position: absolute;   /*脱离文档流*/
                top:50px;
                left: 50px;
                z-index: -1;
            }
        </style>
    </head>
    <body>
        <div id="a1">
        <img src="../../02_课堂练习/02_课堂练习/ch01/练习4：书籍列表/images/diangong.jpg" />
        </div>
        <div id="a2">
        <img src="../../02_课堂练习/02_课堂练习/ch01/练习4：书籍列表/images/jianbian.jpg" />
        </div>
    </body>
</html>
image.png

透明度 opacity

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #a2{
                position: absolute;   /*脱离文档流*/
                top:50px;
                left: 50px;
                z-index: -1;
                opacity:0.1; /*不透明    属性  值越小 越透明*/

            }
        </style>
    </head>
    <body>
        <div id="a1">
        <img src="../../02_课堂练习/02_课堂练习/ch01/练习4：书籍列表/images/diangong.jpg" />
        </div>
        <div id="a2">
        <img src="../../02_课堂练习/02_课堂练习/ch01/练习4：书籍列表/images/jianbian.jpg" />
        </div>
    </body>
</html>

飘移 float


image.png
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .class1{width:200px;height:100px;background:palegreen;}
        .class2{width:250px;height:130px;background:gold;}
        .class3{width:300px;height:180px;background:red;}
    </style>
</head>
<body>
<div class="class1">我是块级元素1，没有设置浮动</div>
<div class="class2">我是块级元素2，没有设置浮动</div>
<div class="class3">我是块级元素3，没有设置浮动</div>
</body>
</html>
image.png
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .class1{width:200px;height:100px;background:palegreen;float: left}
        .class2{width:250px;height:130px;background:gold; float: left;}
        .class3{width:300px;height:180px;background:red;float: left;}
    </style>
</head>
<body>
<div class="class1">我是块级元素1，没有设置浮动</div>
<div class="class2">我是块级元素2，没有设置浮动</div>
<div class="class3">我是块级元素3，没有设置浮动</div>
</body>
</html>
image.png

image.png

image.png
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .class1{width:200px;height:100px;background:palegreen;float: left}
        .class2{width:250px;height:130px;background:gold; }
        .class3{width:300px;height:180px;background:red;}
    </style>
</head>
<body>
<div class="class1">我是块级元素1，没有设置浮动</div>
<div class="class2">我是块级元素2，没有设置浮动</div>
<div class="class3">我是块级元素3，没有设置浮动</div>
</body>
</html>
image.png

overflow图片 视频超出 规定范围问题

image.png

css

@charset "gb2312";
/* CSS Document */
body {
    font-size:12px;
    line-height:22px;
}
#content {
    width:200px;
    height:150px;
    border:1px #000 solid;
    overflow:hidden;
}


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<title>overflow属性</title>

<!--
    visible

-->
<link href="css/overflow.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="content"><img src="image/wine.jpg" alt="酒" />
  <p>在CSS中使用overflow属性处理盒子中的内容溢出，它规定当内容溢出盒子时发生的事情，例如内容不会被修剪而呈现在盒子之外，或者内容会被修剪，修剪内容隐藏等。</p>
</div>
</body>
</html>

clear :拯救 因为 飘移 造成的父类坍塌问题


image.png
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #wrap2{width:550px;border:3px solid red;}
        .class1{width:200px;height:400px;background: blue;float:left;}
        .class2{width:200px;height:300px;background: yellow;float:left;}
        .class3{width:200px;height:500px;background: fuchsia;float:left;}
        .class4{width:200px;height:200px;background: chartreuse;float:left;}
        .txt{clear: both}
    </style>
</head>
<body>
<div id="wrap2">
    <div class="class1">aaaaa</div>
    <div class="class2">bbbb</div>
    <div class="class3">cccc</div>
    <div class="class4">dddd</div>
    <p class="txt">我是一段文本我是一段文本我是一段文本我是一段文本</p>
</div>
</body>
</html>
image.png

h5新标签

header footer 等标签 其实就是 有意义的div标签 （块级元素）


image.png
<!DOCTYPE HTML>
<meta charset="utf-8">
<html>
<body>
    <div>
        <p>这是一个header标签</p>
        <nav>
            <ul>
                <li>首页</li>
                <li>内页一</li>
            </ul>
        </nav>
    </div> 
    
        <section>
            <p>这是一个section标签</p>
            <article>
                <header><ul><li>导航1</li><li>导航2</li></ul></header>
                <p>内页内容...</p>
                <footer >这是一个footer标签</footer>
            </article>
        </section>
        <aside>这是一aside标签</aside>
    
    <footer>尾部标签</footer>
</body>   
</html>

hgroup 标签 为 组标签 可以通过 修改hgroup（父类影响 子类）

<!DOCTYPE html>
<html>
<head>
    <style>
    hgroup{ background:yellow;}
    </style>
    <meta charset="utf-8" />
    <title>hgroup</title>
</head>
<body> 
    <hgroup>
        <h1>欢迎学习HTML5 教程</h1>
        <h2>第二章表单的hgroup</h2>
    </hgroup>
</body>
</html>

figure figcaption ：特殊流标签 一般用于图片 视频 代码 等


image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>figcaption</title>
</head>
<body> 
    
    <table>
        <tr><th></th></tr>
        <tr><td></td></tr>
        
    </table>
<figure> 
<figcaption>北京风景</figcaption> 
<img src="images/img_1.jpg">
<img src="images/img_2.jpg">
<img src="images/img_3.jpg">
<img src="images/img_4.jpg">
</figure> 
</body>
</html>

global 标签

contenteditable :对table 可编辑
spellcheck: 英文拼写检查

<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8"/>
<title>创建一个web页面</title>
</head>
<body>
<div>
    <!-- contenteditable 对table 可编辑-->
<table id="edit" contenteditable="true">
            <tr>
              <td width="92">名字:</td>
            <td width="55">麦克</td>
            <td width="111">生日:</td>
            <td width="72">1999.01.01</td></tr>
            <tr>
             <td>性别:</td>
            <td>男</td>
            <td>职业:</td>
            <td>教师</td></tr>
            <tr>
            <td>国籍:</td>
            <td>中国</td>
            <td>公司:</td>
            <td>NEUSOFT</td>
            </tr>
            <br />
        </table>
        
        <p hidden>这段话在页面中看不到</p>
</div>
<!--标注 -->
        <div>
     <ruby>犇<rt>ben</rt></ruby>
        </div>
        <div>
       我要标注<mark>我中大奖了</mark>太高兴了，快兑奖去...   
        </div>
        
</body>
</html>

        

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" /> <title>spellcheck属性的使用</title>
</head> 
<body>
<h5>这是可编辑的段落,请检查文字是否有错误。</h5>
<p contenteditable="true" spellcheck="true">This paragraph is editable,Please check whether there is an error te xaaat.</p>
</body>
</html>

video audio 视频音频标签

embed 多媒体 嵌入标签

embed
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head> 
<body>
<h5>这是一个多媒体文件</h5>
<embed src="embed.swf" width="800px" height="600px" />
</body>
</html>

重定义标签
老瓶子 装新酒


image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body> 

<dl>
 <dt><strong>套餐 99元</strong></dt><br>
 <dd>牛排套餐 <small>含牛排350克，西兰花100克</small></dd><br>
 <dt><strong>双人餐 199元</strong></dt><br>
 <dd>叉烧双拼 <small>港式烧鹅，港式叉烧各300克，油菜300克</small></dd>
</dl>
<br>
<hr>

<span>某宝客服</span>&nbsp;&nbsp;&nbsp;&nbsp;<small> 售后服务 | 联系我们 | 版权信息 | 声明 | 投诉</small>
</body>
</html>

form 表单新增属性

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
    
    <!-- 新增的form属性 实现了form 的解耦  既 不在需要将表单的内容写在form 中间了 -->
    <form action="http://localhost/test.php" method="post" id="register"></form>
    
    用户名：<input type="text" name="user" value="" form="register" /><br>
    密码：<input type="password" name="pwd" value="" form="register" /><br>
    出生年份：<select name="year" form="register"><br>
        <option value="1970">1970</option>
        <option value="1980">1980</option>
        <option value="1990">1990</option>
    </select>
    <br>
    <input type="submit" value="注册" form="register" />
    
    
</body>
</html>

datalist 下拉列表

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>无标题文档</title>
</head>

<body>
    <!--datalist 与 input 标签配合使用 -->
  <input type="text" list="movie" />
  <datalist id="movie">
    <option label="影片排行榜第一" value="超能陆战队">
    <option label="影片排行榜第二" value="灰姑娘">
    <option label="影片排行榜第三" value="失孤">
    <option label="影片排行榜第四" value="木星上行">
  <option label="影片排行榜第五" value="帕丁顿熊"> 
  </datalist>
</body>
</html>
image.png

detail summery 实现隐藏文档功能

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>无标题文档</title>
</head>
<body>
    <!--details用于描述文档或文档某个部分的细节-->
    <!--summary用于描述有关文档或文档片段的详细信息-->
<details>
    <summary>HTML5实战揭秘 </summary>
    <p>HTML5章节</p>
    <dl>
        <dt>第一章HTML5简介</dt>
        <dd>HTML5由来</dd>
        <dt>第二章标签</dt>
        <dd>新标签的哟功法</dd>
        <dt>第三章表单</dt>
        <dd>智能表单的应用</dd>
        <dt>第四章画布</dt>
        <dd>画布的应用</dd>
    </dl>
</details>
</body>
</html>
初始访问

隐藏的部分进行展示

input 标签新增加属性

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
    <form action="http://localhost/test.php" method="post" id="register"></form>
    
    用户名：<input type="text" name="user" value="" form="register" />
    密码：<input type="password" name="pwd" value="" form="register" />
    出生年份：<select name="year" form="register">
        <option value="1970">1970</option>
        <option value="1980">1980</option>
        <option value="1990">1990</option>
    </select>
    <input type="submit" value="注册" form="register" />
    <hr />
    默认值:<input type="text" name="test" value="" pattern="\d{3}" placeholder="我是新的HTML5的默认值" form="register" /><br />
    邮箱：<input type="email" name="youxiang" value="" form="register" required="required" /><br />
    URL：<input type="url" name="url" value="" form="register" /><br />
    DATE:<input type="date" name="riqi" value="" form="register" /><br />
    TIME：<input type="time" name="shijian" value="" form="register" /><br />
    Month：<input type="month" name="yue" value="" form="register" /><br />
    WEEK：<input type="week" name="zhou" value="" form="register" /><br />
    数字：<input type="number" name="shuzi" value="" form="register" autofocus="autofocus" /><br />
    滑动条：<input type="range" name="huadong" value="" form="register" max="10" step="2" /><br />
    搜索：<input type="search" name="sousuo" value="" form="register" results="n"  /><br />
    颜色：<input type="color" name="yanse" value="" form="register" /><br />
    <hr />
    自动填充表单<br />
    <input type="text" name="auto" value="" list="movie" />
    <datalist id="movie">
        <option>人在囧途</option>
        <option>车在囧途</option>
        <option>泰囧</option>
    </datalist>
</body>
</html>

output:输出表单 ,novalidate表单

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
    
    输出表单output<br />
    <form action="" method="post" oninput="result.value=parseInt(no1.value)+parseInt(no2.value)">
        <input type="number" name="no1" value="" />
        <input type="number" name="no2" value="" />
        <output name="result"></output>
    </form>
    <hr>
    novalidate表单<br >
    <form action="#" method="get" novalidate="true">
    请输入电子邮件地址：<input type="email" name="user_email">
    <input type="submit" value="提交">
    </form>
    
</body>
</html>
image.png

CSS3 新特性

选择器

image.png

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="IE8.js"></script>
<style type="text/css">
h1, h2, h3, h4, h5, h5, h6 {
    background-color: #99CC33;  /* 设置背景色 */
    margin: 0;  /* 清除标题的默认外边距 */
    margin-bottom: 10px;    /* 使用下边距拉开各个标题之间的距离 */
}
h1+h2, h2+h3, h4+h5 { color: brown; /* 兄弟关系 设置字体的颜色 */ }
body>h6, h1>span, h4>span { font-size: 50px;    /* 子选择器 设置字体的大小 */ }
h2 span, h3 span { padding: 0 20px; /* <span>标签的左右间距 */ }
h5 span[class], h6 span[class] { background-color: #CC0033; /* h5、h6标题中含有class属性的span标签设置背景色 */ }
h5~h6 { color: pink; }  /*匹配 h5 标签后的 h6*/
</style>
</head>
<body>
<h1>h1元素<span>这里是span元素</span></h1>
<h2>h2元素<span>这里是span元素</span></h2>
<h3>h3元素<span>这里是span元素</span></h3>
<h4>h4元素<span>这里是span元素</span></h4>
<h6>h5之前的h6元素<span class="S2">这里是span元素</span></h6>
<h5>h5元素<span class="S1">这里是span元素</span></h5>
<h6>h6元素<span class="S2">这里是span元素</span></h6>
<h6>h5之后的第二个h6元素<span class="S2">这里是span元素</span></h6>
<div> <h5> div内的h5</h5>
       <h6> div内的h6</h6>
</div>
</body>
</html>

图片结果


image.png

伪类 选择器

image.png
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<style type="text/css">
a:link { font-size: 14px; color: red; text-decoration: none; } /*链接 红色*/
a:visited { color: green; text-decoration: none; } /*访问之后 绿色*/
a:hover { color: brown; }   /*鼠标悬停 褐色*/
a:active { color: blue; }   /*运行中变为蓝色 */
</style>
</head>
<body>
<a href="#" target="_blank">设置了css样式的a链接</a>

</body>
</html>
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
        <style>
            input:disabled{background:gray;color:green}
            input:enabled{background:#f90;color:red}
            input:checked+span{background:red}
            
            /*以上三个选择器都是针对表单做的提升修改*/
        </style>
    </head>
    <body>
        <form method="post" action="#">
        <fieldset>
            <legend>disabled和enabled</legend>
            <ul>
                <li>
                    <label>
                        <input type="text" name="id" value="99" disabled /><span>ID</span>
                    </label>
                </li>
                <li>
                    <label>
                        <input type="text" name="user" value=""  />
                        <!--input的默认状态具有 enabled属性-->
                        <span>昵称</span>
                    </label>
                </li>
                <li>
                    <label>
                        <input type="text" name="pwd" value="" enabled />
                        <span>密码</span>
                    </label>
                </li>
            </ul>
        </fieldset>
        <fieldset>
            <legend>选中下面的项试试(单选按钮)</legend>
            <ul>
                <li><label><input type="radio" name="sex" value="0" /><span>蓝色</span></label></li>
                <li><label><input type="radio" name="sex" value="1" /><span>红色</span></label></li>
                <li><label><input type="radio" name="sex" value="2" /><span>黑色</span></label></li>
            </ul>
        </fieldset>
        <fieldset>
            <legend>选中下面的项试试(多选按钮)</legend>
            <ul>
                <li><label><input type="checkbox" name="like" value="0" /><span>蓝色</span></label></li>
                <li><label><input type="checkbox" name="like" value="1" /><span>红色</span></label></li>
                <li><label><input type="checkbox" name="like" value="2" checked /><span>黑色</span></label></li>
            </ul>
        </fieldset>
        </form>
</body>
</html>
image.png
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div:target { background:red; }
.item:target li a{background:blue;} /*样式代码*/<!—htm页面代码 后代选择器-->
</style>
</head>
<body>
<div id="red">盒子1</div>
<div id="blue">盒子2</div>


<div class="item">选项一
<li><a href="#red">子选项</a></li></div>


</body>
</html>

结构伪类选择器

image.png

只匹配父类下的第一子节点 若匹配这选中 ，否则不选中

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
        <meta charset="utf-8" />
        <title>结构性伪类选择符 E:first-child</title>
        <style>
            p:first-child{color:red;}  /*p 标签且 是 第一个孩子节点*/
            p:last-child{color:green;}
            p:nth-child(3){color:yellow;}
            
        </style>
    </head>
    <body>
        <div id="A">
            <h4>我是父亲的第1个子元素，可惜我不是p标签，所以无法选中我</h4>
            <p>我是父亲的第2个子元素</p>
            <p>我是父亲的第3个子元素</p>
            <p>我是父亲的第4个子元素</p>
            <p>我是父亲的第5个子元素</p>
        </div>
        
        <hr />
        
        <div id="B">
            <p>我是父亲的第1个子元素，并且我是p标签，所以我被选中了</p>
            <p>我是父亲的第2个子元素</p>
            <p>我是父亲的第3个子元素</p>
            <p>我是父亲的第4个子元素</p>
            <p>我是父亲的第5个子元素</p>
        </div>
        
        
    
    <!--
        注意：

            1、写法是  p:first-child，而不是div:first-child  
            2、以div为例 ：div 是元素，<div> 是标签 不过就目前而言多数情况下都视为1种

            
            
        该选择器的匹配步骤：

        1、找到页面中的p元素 (任何标签内部第一个出现p元素)
        2、找到该p元素的父亲元素 (找到div元素  一个是id为A的 一个是id为B的)
        3、检测找到的p元素的父元素的第一个子元素类型 是否是p标签。

            (找到2个div中的第一个子元素，id为A的第一个子元素是h3， id为B的第一个子元素是p)
            id为A的div第1个子元素不是p标签：无法选中第一个子元素
            id为B的div第1个子元素是p标签: 选中第一个子元素，定义颜色的样式对其生效
    -->
    </body>
</html>

匹配父类下的第一个 对应子节点 ，不论前面多少个其他子节点，当前子节点皆可被选中

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
        <meta charset="utf-8" />
        <title>结构性伪类选择符 E:first-of-type</title>
        <style>
            p:first-of-type{color:pink;} /*父标签下 出现的 第一次出现的 对应子节点*/
          p:last-of-type{color:orange;}
        </style>
    </head>
    <body>
        <div id="A">
            <h4>我是父亲的第1个子元素</h4>
            <p>我是父亲的第2个子元素，我虽然是父亲的第2个元素，但是我是父亲p元素中第1个p元素，所以选中了</p>
            <p>我是父亲的第3个子元素</p>
            <p>我是父亲的第4个子元素</p>
            <p>我是父亲的第5个子元素</p>
        </div>
        
        <hr />
        
        <div id="B">
            <p>我是父亲的第1个子元素，我是父亲的第一个p标签所以我被选中了</p>
            <p>我是父亲的第2个子元素</p>
            <p>我是父亲的第3个子元素</p>
            <p>我是父亲的第4个子元素</p>
            <p>我是父亲的第5个子元素</p>
        </div>
        
        <!--
            注意:of-type系列和child系列不同之处在于：

                child系列的元素序号是把父亲的所有子元素放在一个集合中，然后排序  
                    例如: id="A"的div共有5个子元素，所以他们在child系列中的序号是

                    
                    <div id="A">
                        ① <h4>我是父亲的第1个子元素</h4>
                        ② <p>
                            我是父亲的第2个子元素，我虽然是父亲的第2个元素，但是我是父亲p元素中第1个p元素，所以选中了

                          </p>
                        ③ <p>我是父亲的第3个子元素</p>
                        ④ <p>我是父亲的第4个子元素</p>
                        ⑤ <p>我是父亲的第5个子元素</p>
                    </div>
                    
                of-type系列的元素序号是把指定的元素类型的所有同类元素放在一个集合中，然后排序。

                    例如: id="A"的div共有5个子元素，但是p元素只有四个，

                        所以p元素在of-type系列中的序号是

                        
                        <div id="A">
                          <h4>我是父亲的第1个子元素</h4>
                        ① <p>
                            我是父亲的第2个子元素，我虽然是父亲的第2个元素，但是我是父亲p元素中第1个p元素，所以选中了

                          </p>
                        ② <p>我是父亲的第3个子元素</p>
                        ③ <p>我是父亲的第4个子元素</p>
                        ④ <p>我是父亲的第5个子元素</p>
                    </div>
                
                
                所有的child和of-type都遵循此原则。

                如果指定元素的所有兄弟元素都为同一类型(例如:ul内部子元素全部为li)，那么 child完全等于of-tyoe
        
        -->
    </body>
</html>

属性选择器

image.png
<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
        <style>
            p[id]{background:red}
            p[id="green"]{background:green}
            p[class~="yellow"]{background:yellow}
            p[class|="a"]{background:blue}
            
            a[href^="http://"]{color:red;text-decoration:none}
            a[href$="rar"]{color:pink;text-decoration:none;}
            a[href$="rar"]:after{content:url(images/rar.jpg)}
            
            a[href*="o"]{background:green}
            
        </style>
    </head>
    <body>
        <p id="abc">小红</p>
        <p id="green">小绿毛龟</p>
        <p class="fl yellow">我最喜欢黄色了</p>
        <p class="a-b">小兰兰</p>
        <hr />
        <!--E[att^="值"] 选中以指定值开头的属性的元素-->
        <a href="http://www.baidu.com">百度一下，你就知道</a><br />
        <a href="index.php">返回首页</a><br />
        <!--E[att$="值"] 选中以指定值结尾的属性的元素-->
        <a href="down.rar">点此下载高清无码的高洛峰的AVI大片的种子</a>
        <!--E[att*="值"] 选中包含指定值字符的属性的元素-->
        
    </body>
</html>

伪标签选择器


image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
        <style>
            p::first-line{color:red}
            p::first-letter{color:green;font-size:25px}
            a::before{content:url(qvod.jpg)}
            /*a::after{content:url(qvod.jpg)}*/
            span::selection{background:#F0F}
        </style>
    </head>
    <body>
        <p>
            春晓-孟浩然<br />
            春眠不觉晓，<br />
            处处蚊子咬，<br />
            打上敌敌畏，<br />
            不至死多少。<br />
        </p>
        <hr />
        <a href="高洛峰.avi">点此下载</a>
        <hr />
        <span>听歌听的是腕，戴表戴的是链...</span>
    </body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 205,132评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,802评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,566评论 0赞 338
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,858评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,867评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,695评论 1赞 282
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,064评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,705评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 42,915评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,677评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,796评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,432评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,041评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,992评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,223评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,185评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,535评论 2赞 343

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,727评论 1赞 92
  • h5常见的面试题
    第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML标准。 注意：讲述HT...
    kismetajun阅读 27,421评论 1赞 45
  • CSS 基础
    CSS基础 本文包括CSS基础知识选择器（重要！！！）继承、特殊性、层叠、重要性CSS格式化排版单位和值盒模型浮动...
    廖少少阅读 3,057评论 0赞 40
  • HTML学习笔记（完）
    概述 在网易云课堂学习李南江老师的《从零玩转HTML5前端+跨平台开发》时，所整理的笔记。笔记内容为根据个人需求所...
    墨荀阅读 2,331评论 0赞 7
  • CSS3的学习之路
    课程目标: 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握C...
    繁华退却阅读 1,739评论 0赞 0