HTML 日常了解7

按钮练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按钮练习</title>
    <style type="text/css">
    /*
    做完功能以后，发现在第一次切换图片时，会发现图片有一个非常快的闪烁，这个闪烁会造成一次不佳的用户体验
    产生问题的原因：
        背景图片是以外部资源的形式加载进网页的，浏览器每加载一个外部资源就需要单独的发送一次请求
        但是我们的外部资源并不是同时加载，浏览器会在资源被使用时才去加载资源
        我们这个练习，一上来浏览器只会加载link.png
        由于hover和active的状态没有马上触发，所以hover.png和active.png并不是立即加载的
        当hover被触发时，浏览器才去加载hover.png
        当active被触发时，浏览器才去加载active.png
        由于加载图片需要一定的时间，所以在加载和显示过程会有一段时间，背景图片无法显示，导致出现闪烁的情况
    为了解决该问题，可以将三个图片整合为一张图片，这样可以同时将三张图片一起加载，就不会出现闪烁的问题了
    然后再通过background-position来切换要显示的图片的位置，这种技术叫做图片整合技术（CSS-Sprite）
    优点：
        1 将多个图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多个图片，提高访问效率，提高了用户体验。
        2 将多个图片整合为一张图片，减小了图片的总大小，提高请求的速度，增加了用户体验
    */
        .btn:link{
            /*将a转换为块元素*/
            display: block;
            /*设置宽高*/
            width: 93px;
            height: 29px;
            /*设置背景图片*/
            background-image: url(img/btn/btn2.png);
            /*设置背景图片不重复*/
            background-repeat: no-repeat;
        }
        .btn:hover{
            /*当是hover状态时，希望图片可以向左移动*/
            background-position: -93px 0px;
        }
        .btn:active{
            /*当是active状态时，希望图片再向左移动*/
            background-position: -186px 0px;
        }
    </style>
</head>
<body>
    <!-- 创建一个超链接 -->
    <a href="#" class="btn"></a>
</body>
</html>

雪碧图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>雪碧图</title>
    <style type="text/css">
        .box1{
            width: 129px;
            height: 48px;
            background-image: url(img/amazon-sprite_.png);
        }
        .box2{
            width: 42px;
            height: 30px;
            background-image: url(img/amazon-sprite_.png);
            /*设置偏移量*/
            background-position: -58px -338px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

简写背景属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简写背景属性</title>
    <style type="text/css">
        body{
            height: 5000px;
            /*设置一个背景颜色*/
            /*background-color: #bfa;*/
            /*设置一个背景图片*/
            /*background-image: url(img/3.png);*/
            /*设置背景不重复*/
            /*background-repeat: no-repeat;*/
            /*设置背景图片的位置*/
            /*background-position: center center;*/
            /*设置背景图片不随滚动条滚动*/ 
            /*background-attachment: fixed;*/
            background-color: #bfa;
            /*background
                - 通过该属性可以同时设置所有背景相关的样式
                - 没有顺序的要求，谁在前睡在后都行
                - 也没有数量的要求，不写的样式就使用默认值
            */
            background: #bfa url(img/3.png) center center no-repeat fixed;
        }
    </style>
</head>
<body>
    
</body>
</html>

表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <!-- 在HTML中，使用table标签来创建一个表格 -->
    <table border="1" width="40%" align="center">
        <!-- 在table标签中使用tr来表示表格中的一行，有几行就有几对tr -->
        <tr>
            <!-- 在tr中需要使用td来创建一个单元格，有几个单元格就有几个td -->
            <td>A1</td>
            <td>A2</td>
            <td>A3</td>
            <td>A4</td>
        </tr>
        <tr>
            <td>B1</td>
            <td>B2</td>
            <td>B3</td>
            <!-- rowspan用来设置纵向的合并单元格 -->
            <td rowspan="2">B4</td>
        </tr>
        <tr>
            <td>C1</td>
            <td>C2</td>
            <td>C3</td>
        </tr>
        <tr>
            <td>D1</td>
            <td>D2</td>
            <!-- colspan横向的合并单元格 -->
            <td colspan="2">D3</td>
        </tr>
    </table>
</body>
</html>

表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
    <style type="text/css">
        table{
            /*设置表格的宽度*/
            width: 300px;
            /*居中*/
            margin: 0 auto;
            /*边框*/
            /*border:1px solid black;*/
            /*table和td边框之间默认有一个距离，通过border-spacing属性可以设置这个距离*/
            /*border-spacing: 10px;*/
            /*
            border-collapse可以用来设置表格的边框合并
            如果设置了边框合并，则border-spacing自动失效
            */
            border-collapse: collapse;
            /*设置背景样式*/
            /*background-color: #bfa;*/
        }
        /*设置边框*/
        th, td{
            border: 1px solid black;
        }
        /*设置隔行变色*/
        tbody > tr:nth-child(even){
            background-color: #bfa;
        }
        /*鼠标移入到tr以后，改变颜色*/
        tr:hover{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <!-- 
            可以使用th标签来表示表头中的内容，
            它的用法和td一样，不同的是它会有一些默认效果
             -->
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>住址</th>
        </tr>
        <tr>
            <td>1</td>
            <td>孙悟空</td>
            <td>男</td>
            <td>花果山</td>
        </tr>
        <tr>
            <td>2</td>
            <td>猪八戒</td>
            <td>男</td>
            <td>高老庄</td>
        </tr>
        <tr>
            <td>3</td>
            <td>沙和尚</td>
            <td>男</td>
            <td>流沙河</td>
        </tr>
        <tr>
            <td>4</td>
            <td>唐僧</td>
            <td>男</td>
            <td>女儿国</td>
        </tr>
        <tr>
            <td>1</td>
            <td>孙悟空</td>
            <td>男</td>
            <td>花果山</td>
        </tr>
        <tr>
            <td>2</td>
            <td>猪八戒</td>
            <td>男</td>
            <td>高老庄</td>
        </tr>
        <tr>
            <td>3</td>
            <td>沙和尚</td>
            <td>男</td>
            <td>流沙河</td>
        </tr>
        <tr>
            <td>4</td>
            <td>唐僧</td>
            <td>男</td>
            <td>女儿国</td>
        </tr>
        <tr>
            <td>1</td>
            <td>孙悟空</td>
            <td>男</td>
            <td>花果山</td>
        </tr>
        <tr>
            <td>2</td>
            <td>猪八戒</td>
            <td>男</td>
            <td>高老庄</td>
        </tr>
        <tr>
            <td>3</td>
            <td>沙和尚</td>
            <td>男</td>
            <td>流沙河</td>
        </tr>
        <tr>
            <td>4</td>
            <td>唐僧</td>
            <td>男</td>
            <td>女儿国</td>
        </tr>
        <tr>
            <td>1</td>
            <td>孙悟空</td>
            <td>男</td>
            <td>花果山</td>
        </tr>
        <tr>
            <td>2</td>
            <td>猪八戒</td>
            <td>男</td>
            <td>高老庄</td>
        </tr>
        <tr>
            <td>3</td>
            <td>沙和尚</td>
            <td>男</td>
            <td>流沙河</td>
        </tr>
        <tr>
            <td>4</td>
            <td>唐僧</td>
            <td>男</td>
            <td>女儿国</td>
        </tr>
        <tr>
            <td>1</td>
            <td>孙悟空</td>
            <td>男</td>
            <td>花果山</td>
        </tr>
        <tr>
            <td>2</td>
            <td>猪八戒</td>
            <td>男</td>
            <td>高老庄</td>
        </tr>
        <tr>
            <td>3</td>
            <td>沙和尚</td>
            <td>男</td>
            <td>流沙河</td>
        </tr>
        <tr>
            <td>4</td>
            <td>唐僧</td>
            <td>男</td>
            <td>女儿国</td>
        </tr>
        <tr>
            <td>1</td>
            <td>孙悟空</td>
            <td>男</td>
            <td>花果山</td>
        </tr>
        <tr>
            <td>2</td>
            <td>猪八戒</td>
            <td>男</td>
            <td>高老庄</td>
        </tr>
        <tr>
            <td>3</td>
            <td>沙和尚</td>
            <td>男</td>
            <td>流沙河</td>
        </tr>
        <tr>
            <td>4</td>
            <td>唐僧</td>
            <td>男</td>
            <td>女儿国</td>
        </tr>
    </table>
</body>
</html>

给表格添加样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
    <style type="text/css">
        table{
            /*设置表格的宽度*/
            width: 300px;
            /*居中*/
            margin: 0 auto;
            /*边框*/
            /*border:1px solid black;*/
            /*table和td边框之间默认有一个距离，通过border-spacing属性可以设置这个距离*/
            /*border-spacing: 10px;*/
            /*
            border-collapse可以用来设置表格的边框合并
            如果设置了边框合并，则border-spacing自动失效
            */
            border-collapse: collapse;
            /*设置背景样式*/
            /*background-color: #bfa;*/
        }
        /*设置边框*/
        th, td{
            border: 1px solid black;
        }
        /*设置隔行变色*/
        tbody > tr:nth-child(even){
            background-color: #bfa;
        }
        /*鼠标移入到tr以后，改变颜色*/
        tr:hover{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <!-- 
            可以使用th标签来表示表头中的内容，
            它的用法和td一样，不同的是它会有一些默认效果
             -->
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>住址</th>
        </tr>

    </table>
</body>
</html>

表格的布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格的布局</title>
</head>
<body>
    <!-- 
    以前表格更多的情况实际上是用来对页面进行布局的，但是这种方式早已被CSS所淘汰了
    表格的列数由td最多的那行决定
    表格是可以嵌套，可以在td中在放置一个表格
    -->
    <table border="1" width="100%">
        <tr height="100px">
            <td colspan="2"></td>
        </tr>
        <tr height="400px">
            <td width="20%"></td>
            <td width="80%">
                <table border="1" width="100%" height="100%">
                    <tr>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr height="100px">
            <td colspan="2"></td>
        </tr>
    </table>
</body>
</html>

完善clearfix

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>完善clearfix</title>
    <style type="text/css">
        .box1{
            width: 300px;
            height: 300px;
            background-color: #bfa;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: yellow;
            /*
            子元素和父元素相邻的垂直外边距会发生重叠，子元素的外边距会传递给父元素
            使用空的table标签可以隔离父子元素的外边距，阻止外边距的重叠
            */
            margin-top: 100px;
        }
        .box3{
            border: 10px red solid;
        }
        .box4{
            width: 100px;
            height: 100px;
            background-color: blue;
            float: left;
        }
        /*解决父子元素的外边距重叠*/
        /*.box1:before{
            content: "";*/
            /*display:table可以将一个元素设置为表格显示*/
            /*display: table;
        }*/
        /*解决父元素高度塌陷*/
        /*.clearfix:after{
            content: "";
            display: block;
            clear: both;
        }*/
        /*
        经过修改后的clearfix是一个多功能的样式，既可以解决高度塌陷，又可以确保父元素和子元素的垂直外边距不会重叠
        */
        .clearfix:before,
        .clearfix:after{
            content: "";
            display: table;
            clear: both;
        }
        .clearfix{
            zoom: 1;
        }
    </style>
</head>
<body>
    <div class="box3 clearfix">
        <div class="box4"></div>
    </div>

    <div class="box1 clearfix">
        <div class="box2"></div>
    </div>
</body>
</html>\

表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
    <style type="text/css">
    </style>
</head>
<body>
    <!-- 
    表单的作用就是用来将用户信息提交给服务器的
    比如：百度的搜索框 注册 登录这些操作都需要填写表单
    使用form标签创建一个表单
        form标签中必须指定一个action属性，该属性指向的是一个服务器的地址
        当我们提交表单时将会提交到action属性对应的地址
     -->
    <form action="demo075_target.html">
        <!-- 
        使用form创建的仅仅是一个空白的表单，我们还需要向form中添加不同的表单项
        -->

        <!-- 
        在表单中可以使用fieldset来为表单项进行分组，可以将表单项中的同一组放到一个fieldset中
        -->
        <fieldset>
            <!-- 在fieldset可以使用legend子标签，来指定组名 -->
            <legend>用户信息</legend>

            <!-- 
            使用input来创建一个文本框，它的type属性是text
                如果希望表单项中的数据会提交到服务器中，还必须给表单项指定一个name属性
                name表示提交内容的名字
            用户填写的信息会附在url地址的后边以查询字符串的形式发送给服务器
                url地址?查询字符串
            格式：
                属性名=属性值&属性名=属性值&属性名=属性值&……
            在文本框中也可以指定value属性值，该值将会作为文本框的默认值显示
             -->
            <!-- 
            在html中还为我们提供了一个专门用来选中表单中的提示文字的label标签
            该标签可以指定一个for属性，该属性的值需要指定一个表单项的id值
             -->
            <label for="um">用户名</label>
            <input id="um" type="text" name="username" value="我是value"><br><br>

            <!-- 
            密码框
                使用input创建一个密码框，它的type属性值是password
             -->
            <label for="pwd">密码</label>
            <input id="pwd" type="password" name="password"><br><br>

            
        </fieldset>

        <fieldset>
            <legend>用户爱好</legend>

            <!-- 
            单选按钮
                - 使用input来创建一个单选按钮，它的type属性使用radio
                - 单选按钮通过name属性进行分组，name属性相同是一组按钮
                - 像这种需要用户选择但是不需要用户直接填写内容的表单项，还必须指定一个value属性，这样被选中的表单项的value属性值将会最终提交给服务器
                如果希望在单选按钮或者是多选框中指定默认选中的选项，则可以在希望选中的项中添加checked="checked"属性
             -->
            性别<input type="radio" name="gender" value="male" id="male"><label for="male">男</label>
                <input type="radio" name="gender" value="female" checked="checked" id="female"><label for="female">女</label>
                <br><br>

            <!-- 
            多选框
                - 使用input创建一个多选框，它的type属性使用checkbox
             -->
            爱好<input type="checkbox" name="hobby" value="zq">足球
                <input type="checkbox" name="hobby" value="lq">篮球
                <input type="checkbox" name="hobby" value="ymq" checked="checked">羽毛球
                <input type="checkbox" name="hobby" value="ppq" checked="checked">乒乓球
                <br><br>
        </fieldset>
        <!-- 
        下拉列表
            - 使用select来创建一个下拉列表
            下拉列表的name属性需要指定给select，而value属性需要指定给option
            可以通过在option中添加selected="selected"来将选项设置为默认选中
            当为select添加一个multiple="multiple"，则下拉列表变为一个多选的下拉列表
         -->
        你喜欢的明星
        <select name="start">
            <!-- 
            在select中可以使用optgroup对选项进行分组
            同一个optgroup中的选项是一组
            可以通过label属性来指定分组的名字
             -->
            <optgroup label="女明星">
                <!-- 在下拉列表中使用option标签来创建一个一个列表项 -->
                <option value="fbb">范冰冰</option>
                <option value="lxr">林心如</option>
                <option value="zw">赵薇</option>
            </optgroup>
            <optgroup label="男明星">
                <option value="zbs" selected="selected">赵本山</option>
                <option value="ldh">刘德华</option>
                <option value="zjl">周杰伦</option>
            </optgroup>
        </select>
        <br><br>

        <!-- 使用textarea创建一个文本域 -->
        自我介绍<textarea name="info"></textarea>
        <br><br>

        <!-- 
        提交按钮可以将表单中的信息提交给服务器
        使用input创建一个提交按钮，它的type属性值是submit
        在提交按钮中可以通过value属性来指定按钮上的文字
        -->
        <input type="submit" value="注册" />

        <!-- <input type="reset">可以创建一个重置按钮，点击重置按钮以后表单中内容将会恢复为默认值 -->
        <input type="reset">

        <!-- 使用input type=button可以用来创建一个单纯的按钮，这个按钮没有任何功能，只能被点击 -->
        <input type="button" value="按钮">
        <br><br>

        <!-- 
        除了使用input，也可以使用button标签来创建按钮
        这种方式和使用input类似，只不过由于它是成对出现的标签，使用起来更加的灵活
         -->
        <button type="submit">提交</button>
        <button type="reset">重置</button>
        <button type="button">按钮</button>
    </form>
</body>
</html>

模拟后台服务器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模拟后台服务器</title>
</head>
<body>
    <h1>表单提交成功！！</h1>
</body>
</html>

框架集

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>框架集</title>
</head>
<!-- 
框架集和内联框架的作用类似，都是用于在一个页面中引入其他的外部的页面
    框架集可以同时引入多个页面，而内联框架只能引入一个
    在h5标准中，推荐使用框架集，而不使用内联框架
    
使用frameset来创建一个框架集，注意frameset不能和body出现在同一个页面中
    所以要使用框架集，页面中就不可以使用body标签
属性：
    rows，指定框架集中的所有的框架，一行一行的排列
    cols， 指定框架集中的所有的页面，一列一列的排列
    
    这两个属性frameset必须选择一个，并且需要在属性中指定每一部分所占的大小
    
    frameset中也可以再嵌套frameset
    
frameset和iframe一样，它里边的内容都不会被搜索引擎所检索
    所以如果搜索引擎检索到的页面是一个框架页的话，它是不能去判断里边的内容的
使用框架集则意味着页面中不能有自己的内容，只能引入其他的页面
    而我们每单独加载一个页面，浏览器都需要重新发送一次请求，引入几个页面就需要发送几次请求，用户的体验比较差
如果非得用建议使用frameset而不使用iframe
-->
<frameset cols="30%, *, 30%">
    <!-- 
    在frameset中使用frame子标签来指定要引入的页面
    引入几个页面就写几个frame
     -->
    <frame src="demo069_表格.html" />
    <frame src="demo070_给表格添加样式.html" />
    <!-- 嵌套一个frameset -->
    <frameset rows="30%, 50%, *">
        <frame src="demo072_表格的布局.html" />
        <frame src="demo073_完善clearfix.html" />
        <frame src="demo074_表单.html" />
    </frameset>
</frameset>
</html>
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 214,444评论 6赞 496
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,421评论 3赞 389
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 160,036评论 0赞 349
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,363评论 1赞 288
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,460评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,502评论 1赞 292
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,511评论 3赞 412
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,280评论 0赞 270
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,736评论 1赞 307
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,014评论 2赞 328
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,190评论 1赞 342
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,848评论 5赞 338
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,531评论 3赞 322
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,159评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,411评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,067评论 2赞 365
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,078评论 2赞 352

推荐阅读更多精彩内容

  • iOS工具和框架1
    1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明先生_X自主阅读 15,977评论 3赞 119
  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,747评论 1赞 92
  • 正面管教之旅DAY5
    今天的三种感受：平静，愉快，温暖 今天的小进步：今天老公加班到晚上10点多才回来，我热烈欢迎他回来，小宝和奶奶已睡...
    小嫔_1e27阅读 46评论 0赞 0
  • 随笔
    昨天因为看到微博上的一篇关于要不要aa的文章，跟我妈聊到谈恋爱的问题。我说要享受现在，好聚好散。然后我妈就立马反驳...
    格瑞_shauny阅读 198评论 0赞 0
  • 我画的也就这样子
    逆着光的不二阅读 90评论 0赞 0