1讲师要求:
两个练习
2那些技术
标签使用、浮动float相关、盒模型相关、文字相关、边框使用
3遇到哪些问题
在对a标签设置时,文字大小字体用复合样式写在了a标签的属性中,行高写在父级中,检查时发现行高被覆盖。
4解决方法
把文字大小字体用复合样式移动到父级中,检查正常。
5学习感受
以前的知识点在今天又用到了一些,相较昨天而言,今天的速度比昨天快了一点,我自己的知识点熟悉程度又加深了一层,现在看到那么多代码没有之前感觉的那么震撼了,看到网站上面的小模块真的感觉是没有以前的神秘感了,小模块现在自己都可以做了,马上学定位了,学习完定位,就可以做整站了,这是一个巨大的进步,从10-25开始到现在,从什么都不懂到现在马上可以做征战了,就是一段忘不掉的经历,加油!!!
6练习
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>本周主打</title>
- <link rel="stylesheet" href="css/16lx1.css" />
- <!--
- 伪代码
- 模块section#box
- 内容div#main
- 上内容div.main-rem
- 头部header.rem-head
- 标题h3.rem-title
- 子内容ul.rem-content
- 子项li.content-item*2
- 左部div.item-img
- 右部div.item-name
- 子内容div*5
- 下内容ul.main-list
- 子项li.list-item*4
- -->
- </head>
- <body>
- <!--模块section#box-->
- <section id="box">
- <!--内容div#main-->
- <div id="main">
- <!--上内容ul.main-rem-->
- <div class="main-rem">
- <!--头部header.rem-head-->
- <header class="rem-head">
- <a href="">本周主打</a>
- </header>
- <!--子内容ul.rem-content-->
- <ul class="rem-content">
- <!--子项li.content-item*2-->
- <li class="content-item mr40">
- <!--左部div.item-img-->
- <div class="item-img">
- <a href="">
- <img src="img/item-left.png" alt="" />
- </a>
- </div>
- <!--右部div.item-name-->
- <div class="item-name">
- <!--子内容div*5-->
- <div class="book-name">
- <a href="">妙用性格</a>
- </div>
- <div class="name-text">讲师:张勤</div>
- <div class="name-text">技术:共12集全</div>
- <div class="name-text">类型:生活</div>
- <div class="name-other">
- <div class="other-left">
- <a href="">购买</a>
- </div>
- <div class="other-right">
- <a href="">预览</a>
- </div>
- </div>
- </div>
- </li>
- <li class="content-item">
- <!--左部div.item-img-->
- <div class="item-img">
- <a href="">
- <img src="img/item-right.png" alt="" />
- </a>
- </div>
- <!--右部div.item-name-->
- <div class="item-name">
- <!--子内容div*5-->
- <div class="book-name">
- <a href="">天下没有陌生人</a>
- </div>
- <div class="name-text">讲师:刘希平</div>
- <div class="name-text">技术:共300集全</div>
- <div class="name-text">类型:职场</div>
- <div class="name-other">
- <div class="other-left">
- <a href="">购买</a>
- </div>
- <div class="other-right">
- <a href="">预览</a>
- </div>
- </div>
- </div>
- </li>
- </ul>
- </div>
- <!--下内容ul.main-list-->
- <ul class="main-list">
- <!--子项li.list-item*4-->
- <li class="list-item">
- <div class="item-img">
- <a href="">
- <img src="img/list-img.png" alt="" />
- </a>
- </div>
- <div class="item-text">
- <a href="" >妙用性格</a>
- </div>
- </li>
- <li class="list-item">
- <div class="item-img">
- <a href="">
- <img src="img/list-img.png" alt="" />
- </a>
- </div>
- <div class="item-text">
- <a href="" >未来简史</a>
- </div>
- </li>
- <li class="list-item">
- <div class="item-img">
- <a href="">
- <img src="img/list-img.png" alt="" />
- </a>
- </div>
- <div class="item-text">
- <a href="" >嫌疑人X的献身</a>
- </div>
- </li>
- <li class="list-item">
- <div class="item-img">
- <a href="">
- <img src="img/list-img.png" alt="" />
- </a>
- </div>
- <div class="item-text">
- <a href="" >文字的情怀</a>
- </div>
- </li>
- </ul>
- </div>
- </section>
- </body>
- </html>
- /* reaet css */
- boay,h3{
- margin: 0;
- }
- ul{
- margin: 0;
- padding: 0;
- list-style: none;
- }
- a{
- text-decoration: none;
- }
- img{
- vertical-align: top;
- border: none;
- }
- /* main */
- #box{
- margin: 50px auto;
- width: 680px;
- height: 354px;
- padding: 115px 60px 31px;
- background: #ff80ab url(../img/miaov.png) no-repeat 308px 35px;
- }
- #main{
- width: 680px;
- height: 354px;
- background-color: #fff;
- }
- #main .main-rem{
- height: 212px;
- padding-left: 19px;
- border-bottom: 1px solid #fae3bc;
- }
- #main .main-rem .rem-head{
- padding-top: 20px;
- height: 24px;
- font: 20px/24px "微软雅黑";
- background: url(../img/title.png) no-repeat 0px 20px;
- margin-bottom: 14px;
- }
- #main .rem-head a{
- color: #000;
- margin-left: 27px;
- }
- #main .main-rem .rem-content{
- width: 641px;
- height: 135px;
- /*background-color: #009FD6;*/
- }
- #main .main-rem .content-item{
- float: left;
- width: 301px;
- height: 135px;
- /*background-color: #00008B;*/
- }
- #main .main-rem .mr40{
- margin-right: 39px;
- }
- #main .content-item .item-img{
- float: left;
- width: 130px;
- height: 135px;
- }
- #main .content-item .item-name{
- float: right;
- width: 150px;
- height: 135px;
- /*background-color: #00A0D4;*/
- }
- #main .item-name .book-name{
- height: 26px;
- line-height:26px;
- }
- #main .book-name a{
- color: #e7788d;
- font:bold 16px "宋体";
- }
- #main .item-name .name-text{
- height: 24px;
- color: #989898;
- font: 14px/24px "宋体";
- }
- #main .item-name .name-other{
- height: 38px;
- padding-top: 7px;
- }
- #main .name-other .other-left{
- float: left;
- width: 70px;
- height: 30px;
- line-height: 30px;
- text-align: center;
- background-color: #e7788d;
- }
- #main .other-left a{
- color: #fff;
- font: 14px "宋体";
- }
- #main .name-other .other-right{
- float: right;
- width: 68px;
- height: 28px;
- line-height: 28px;
- text-align: center;
- border: 1px solid #e7788d;
- }
- #main .other-right a{
- color: #e7788d;
- font: 14px "宋体";
- }
- #main .main-list{
- height: 121px;
- padding-left: 19px;
- padding-top: 20px;
- background-color: #fdf6ea;
- }
- #main .main-list .list-item{
- float: left;
- width: 145px;
- height: 111px;
- margin-right: 20px;
- /*background-color: #000001;*/
- }
- #main .list-item .item-img{
- width: 145px;
- height: 77px;
- }
- #main .list-item .item-text{
- height: 34px;
- line-height: 34px;
- text-align: center;
- }
- #main .list-item a{
- color: #53514c;
- font: 14px "宋体";
- }
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>电影介绍</title>
- <link rel="stylesheet" href="css/16lx2.css" />
- <!--
- 伪代码
- 模块section#box
- 主体div#main
- 内容div.main-content
- 左块div.content-left
- 头部header.left-head
- 介绍div.left-item
- 图片div.item-img
- 文字div.item-right
- 右块div.content-right
- 上部ul.right-list
- 下部div.right-more
- -->
- </head>
- <body>
- <!--模块section#box-->
- <section id="box">
- <!--主体div#main-->
- <div id="main">
- <!--内容div.main-content-->
- <div class="main-content">
- <!--左块div.content-left-->
- <div class="content-left">
- <!--头部header.left-head-->
- <header class="left-head">
- <div class="head-top">
- <a href="">湄公河行动</a>
- </div>
- <div class="head-bottom">
- <a href="">Operation Mekong</a>
- </div>
- </header>
- <!--介绍div.left-item-->
- <div class="left-item">
- <!--图片div.item-img-->
- <div class="item-img">
- <a href="">
- <img src="img/mghxd.png" alt="" />
- </a>
- </div>
- <!--文字div.item-right-->
- <div class="item-right">
- <div class="right-font">上映:2016-09-30</div>
- <div class="right-font">类型:动作犯罪警匪</div>
- <div class="right-font">导演:林超贤</div>
- <div class="right-font">主演:张涵予 彭于晏</div>
- <div class="right-font">地区:中国大陆</div>
- <div class="right-text">
- 影片简介:电影《湄公河行动》改编自2011年发生在湄公河金三角流域的中国商船遇袭案,当时13…
- <a href="">更多详情>></a>
- </div>
- </div>
- </div>
- </div>
- <!--右块ul.content-right-->
- <div class="content-right">
- <!--上部ul.right-list-->
- <ul class="right-list">
- <li class="list-item">
- <div class="list-img">
- <a href="">
- <img src="img/lss.png" alt="" />
- </a>
- </div>
- <div class="list-name">
- <a href="">女医明妃传</a>
- </div>
- </li>
- <li class="list-item nomargin">
- <div class="list-img">
- <a href="">
- <img src="img/wld.png" alt="" />
- </a>
- </div>
- <div class="list-name">
- <a href="">奋斗</a>
- </div>
- </li>
- </ul>
- <!--下部div.right-more-->
- <div class="right-more">
- <a href="">[熊出没·奇幻空间]</a>
- <a href="">[乘风破浪]</a>
- <a href="">[夜宴]</a>
- </div>
- </div>
- </div>
- </div>
- </section>
- </body>
- </html>
- /* reaet css */
- body{
- margin: 0;
- }
- ul{
- margin: 0;
- padding: 0;
- list-style: none;
- }
- a{
- text-decoration: none;
- }
- img{
- vertical-align: top;
- border: none;
- }
- /* main */
- #box{
- margin: 50px auto;
- width: 710px;
- height: 377px;
- padding: 96px 45px 27px;
- background: #ff80ab url(../img/miaov.png) no-repeat 308px 35px;
- }
- #main{
- width: 710px;
- height: 365px;
- padding: 6px 0px;
- background-color: #fff;
- }
- #main .main-content{
- width: 650px;
- height: 341px;
- padding: 0px 30px;
- border-top: 12px dotted #ff80ab;
- border-bottom: 12px dotted #ff80ab;
- /*background-color: #0000FF;*/
- }
- #main .main-content .content-left{
- float: left;
- width: 320px;
- height: 329px;
- padding-top: 12px;
- /*background-color: #00A0D4;*/
- }
- #main .content-left .left-head{
- height: 58px;
- margin-bottom: 5px;
- /*background-color: #0000FF;*/
- }
- #main .left-head .head-top{
- height: 44px;
- font: 24px/44px "微软雅黑";
- }
- #main .head-top a{
- color: #ff0000;
- }
- #main .left-head .head-bottom{
- height: 14px;
- font: 14px/14px arial;
- }
- #main .head-bottom a{
- color: #6a6a6a;
- }
- #main .content-left .left-item{
- height: 250px;
- /*background-color: #05B600;*/
- }
- #main .left-item .item-img{
- float: left;
- width: 170px;
- height: 240px;
- padding: 4px 0px 6px;
- /*background-color: #96FF38;*/
- }
- #main .left-item .item-right{
- float: right;
- width: 140px;
- height: 250px;
- /*background-color: #00BFFF;*/
- }
- #main .left-item .right-font{
- height: 25px;
- color: #989898;
- font: 14px/25px "宋体";
- }
- #main .left-item .right-text{
- height: 125px;
- color: #989898;
- font: 14px/25px "宋体";
- }
- #main .right-text a{
- color: #ff0000;
- }
- #main .main-content .content-right{
- float: right;
- width: 270px;
- height: 235px;
- padding: 15px 15px 0px;
- margin-top: 69px;
- background-color: #ff80ab;
- }
- #main .content-right .right-list{
- width: 270px;
- height: 190px;
- border-bottom: 1px dashed #e5e5e5;
- }
- #main .content-right .list-item{
- float: left;
- width: 130px;
- height: 190px;
- margin-right: 10px;
- /*background-color: #000000;*/
- }
- #main .content-right .nomargin{
- margin-right: 0px;
- }
- #main .content-right .list-img{
- width: 120px;
- height: 145px;
- padding: 4px;
- margin-bottom: 5px;
- background-color: #fff;
- border: 1px solid #e5004f;
- }
- #main .content-right .list-name{
- width: 130px;
- height: 26px;
- line-height: 26px;
- text-align: center;
- }
- #main .content-right .list-name a{
- color: #fff;
- font: 16px "宋体";
- }
- #main .content-right .right-more{
- width: 270px;
- height: 44px;
- line-height: 44px;
- word-spacing: 8px;
- }
- #main .content-right .right-more a{
- color: #fff;
- font: 14px/44px "宋体";
- }
来源: http://www.qdfuns.com/notes/48009/e4ccea5da45cae0f10ce991d4d030c54.html