高级网页设计Class-基础（不定期补充）

a标签包含img

2018-9-13
1.前端解析json后端传送json，动态生成网页传到用户是静态的
2.HTML标签化，使搜索引擎优化便于网络爬虫爬取信息。
标签间距的特点，网页兼容性有关
3.列表显示效果：点还有周围有距离，点的特性删去可以在ul可以在li
间距只有p h ul 有。ul的子元素只是li
4.strong和b的区别：语义化，strong是强调（效果刚好加粗），b是加粗但是违背h5原则
i和em 都是斜体，区别：em是语义化，强调。

5.全局和局部的强调是相对的

&&&&&&&&网页h5的原则：内容与样式相分离&&&&&

6.图片路径：不要用绝对路径：c盘。。。（本地绝对路径）
…是父目录，.是当前目录

  <img src="../04/1.jpg" alt="" width="300">

网站是绝对地址url

<a href="http://baidu.com">baidu</a>

7.css中属性和属性之间分号；间隔。属性和属性值之间冒号间隔：
book.edition = 6;
book[“main title”] = “ECMAScript”;

第一节课代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Wang ShuWei</title>
    <style type="text/css">
        .dd{
            font-size: 12px;
            color: purple;
        }
    </style>
</head>
<body>
    Hello World!
    <ul class="dd">
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
        <li>five</li>
    </ul>
    <p>image</p>
    <a href="http://baidu.com">
        <img src="../04/1.jpg" alt="">
    </a>
</body>
</html>

在这里插入图片描述

2018-9-17——选择器
讲了有关css的选择器（id选择器，标签选择器（标签只有那10个）），css基本样式的使用，还有HTML原则就是内容和样式相分离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        li{
            width: 150px;
            height: 30px;
            font-size: 14px;
            line-height: 30px;
            text-align: center;
            border: 1px solid #039;
            list-style: none;
            margin: 8px;
        }
        .bc{
            font-weight:bold ;
        }
        .ys{
            color: red;
        }
        .bk{
            border: dashed;
        }
        .bkys{
            border-color:dodgerblue;
        }
        .xt{
            border-color: #FF0000;
            font-weight: bold;
        }
        h2,p{
            padding: 0;
            margin: 0;
        }/*固定模式*/
        #box{
            width: 415px;
            border: 1px solid #ccc;
            padding: 6px;
        }
        #box h2{
            font-size: 18px;
            line-height: 33px;
        }
        #box p	{
            color: #003399;
            line-height: 21px;
            font-size: 12px;
            text-indent: 2em;
        }
        #box a{
            color: #ba2636;
            text-decoration: none;
        }
        /*CSS选择器selecotr*/
        #box{
            width: 400px;
            height: 300px;
            background-color: #ccc;
        }
        /*id选择器,只能使用一次*/
        h2{
            background-color: #c00;
            color: #fff;
        }
        /*标签选择器,对网页中所有的该标签使用*/
        .red{
            color:yellow
        }
        .green{
            color:cornflowerblue ;
        }
        .blue{
            color: chartreuse;
        }
        /*	类选择器,class selcotor*/
    </style>
</head>
<body>
<ul>
    <li class="bc">ID选择器</li>
    <li class="ys">类选择器</li>
    <li class="bk">标签选择器</li>
    <li class="bkys">伪类</li>
    <li class="xt">群组选择器</li>
    <li>父子选择器</li>
</ul>
<div id="box">
    <h2><span class="red">css</span><span class="green">选</span><span class="blue">择</span>器</h2>
    <p>dfghjk<a href="#">更多>></a></p>
</div>
</body>
</html>

在这里插入图片描述

一個HTML文件可以用多个标签

2018-9-20

一.伪类

/伪类的顺序不可改变，但可以不写其中几个/
a:link {color: #FF0000} /* 未访问的链接 /
a:visited {color: #00FF00} / 已访问的链接 /
a:hover {color: #FF00FF} / 鼠标移动到链接上 /
a:active {color: #0000FF} / 选定的链接 */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        a{
            display: inline-block;
            width: 140px;
            height: 32px;
            line-height: 32px;
            /*水平居中*/
            text-align: center;
            background: #8c8c8c;
            text-decoration: none;
        }
        /*伪类的顺序不可改变，但可以不写 其中几个*/
        a:link{
            color: purple;
        }
        a:visited{
            color: red;
        }
        a:hover{
            color: #2e2e2e;
            font-weight: bold;
            background: yellow;
        }
        a:active{
            color: green;
        }
    </style>
</head>
<body>
    <a href="#">ID选择器</a>
    <a href="#">标签选择器</a>
    <a href="#">类选择器</a>
    <a href="#">伪类选择器</a>
</body>
</html>

效果：
在这里插入图片描述
鼠标滑过

点击之后

二.css优先级

优先级：标签《类选择器《ID选择器《父子选择器《
同优先级，再看后面的样式把前面相同样式覆盖，没有用到的（没有被覆盖的）样式还会体现出来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="class4-youxianji.css">
    <style type="text/css">
        #box .h2{
            color: orange;
        }
        #box h2{
            color: pink;
        }
        #h2{
            color: purple;
            /*font-size: 20px;*/
        }
        .h2{
            color: green;
        }
        h2{
            color: purple;
            font-size: 100px;
        }
    </style>
</head>
<body>
    <div id="box">
        <h2 class="h2" id="h2">
            what color am I?
        </h2>
    </div>
</body>
</html>

外联：

h2{
    color: yellow;
    /*删除线*/
    text-decoration: line-through;
}

效果：
在这里插入图片描述

三边距-padding

margin的叠加，上下的时候取大的值为他们之间距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #box{
            /*盒子一般有宽高*/
            width: 200px;
            height: 200px;
            padding: 40px 50px;
            margin: 80px auto;
            border: 2px solid #039;
        }
        /*margin的叠加，上下的时候取大的值为他们之间距离*/
        #kuang{
            width: 200px;
            height: 200px;
            padding-top: 50px;
            margin: 70px auto;
            border: 2px solid black;
        }
        .boxone{
            width: 200px;
            height: 200px;
            border-top: yellow solid 1px;
            border-left: purple dashed 2px;
            border-bottom: green dotted 3px;
            padding: 10px 20px 30px 40px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div id="box">hemoxing</div>
    <div id="kuang">kuangmoxing</div>
    <div class="boxone">box</div>
</body>
</html>

三个盒子的效果分别为：都是居中显示
在这里插入图片描述

2018-9-27布局-display-float-清浮
1.标签选择器除全局一致使用父子选择器
2.li设置行高和高度考虑浏览器兼容
3.类选择器基本不用使用父子选择器但是当优先级父子选择器》类选择器的时候可以解决重叠问题要用父子选择器。d选择器和类选择器同理

4. span是行内元素，display: block;使行内元素的宽高生效
5. 处理设置高度之后span和a不在一行的问题：display和float都可以解决
6. span,a,strong,em行内元素不能设置宽高和背景颜色
div,ul,li,p,h可以设置宽高和背景颜色
7.兄弟元素都为一种元素block或者inline或者inline-block

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*不用**/
        ul{
            list-style-type: none;
        }
        a{
            text-decoration:none;
        }
        /*标签选择器除全局一致使用父子选择器*/
        #list li{
            /*li设置行高和高度考虑浏览器兼容*/
            height: 30px;
            line-height: 30px;
        }
        /*类选择器基本不用使用父子选择器但是当优先级父》类的时候可以解决重叠问题要用父子选择器*/
        /*id选择器和类选择器同理*/
        .rank{
            width: 16px;
            height: 16px;
            text-align: center;
            line-height: 16px;
            font-size: 12px;
            color: #fff;
            background: #333;
            /*span是行内元素*/
            display: block;
            /*!*浮动脱离传统文档流*!*/
            /*float: left;*/
            /*当添加float属性的时候该元素自动调为display: block;a这时行高的属性不起作用*/
            /*margin-top: 8px;*/
            /*margin-right: 5px;*/
        }
        .rank{
            /*缺陷不能设置padding*/
            display: inline-block;
        }
        /*处理设置高度之后span和a不在一行的问题：display和float都可以解决*/
        #list a{
            font-size: 14px;
            color: #666;
        }
    </style>
</head>
<body>
<!--span,a,strong,em行内元素不能设置宽高和背景颜色-->
<!--div,ul,li,p,h可以设置宽高和背景颜色-->
    <ul id="list">
        <li>
            <!--兄弟元素都为一种元素block或者inline或者inline-block-->
            <span class="rank">1</span>
            <!--span是位于的第一个元素不用清除浮动，但是一般要清除浮动-->
            <a href="#">这里是超链接</a>
        </li>
        <li>
            <span class="rank">2</span>
            <a href="#">这里是超链接</a>
        </li>
        <li>
            <span class="rank">3</span>
            <a href="#">这里是超链接</a>
        </li>
        <li>
            <span class="rank">4</span>
            <a href="#">这里是超链接</a>
        </li>
        <li>
            <span class="rank">5</span>
            <a href="#">这里是超链接</a>
        </li>
        <li>
            <span class="rank">6</span>
            <a href="#">这里是超链接</a>
        </li>
    </ul>
</body>
</html>

在这里插入图片描述
display改为float有一样的效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*不用**/
        ul{
            list-style-type: none;
        }
        a{
            text-decoration:none;
        }
        /*标签选择器除全局一致使用父子选择器*/
        #list li{
            /*li设置行高和高度考虑浏览器兼容*/
            height: 30px;
            line-height: 30px;
        }
        /*类选择器基本不用使用父子选择器但是当优先级父》类的时候可以解决重叠问题要用父子选择器*/
        /*id选择器和类选择器同理*/
        .rank{
            width: 16px;
            height: 16px;
            text-align: center;
            line-height: 16px;
            font-size: 12px;
            color: #fff;
            background: #333;
            /*span是行内元素*/
            display: block;
            /*!*浮动脱离传统文档流*!*/
            float: left;
            /*当添加float属性的时候该元素自动调为display: block;a这时行高的属性不起作用*/
            margin-top: 8px;
            margin-right: 5px;
        }  
        /*处理设置高度之后span和a不在一行的问题：display和float都可以解决*/
        #list a{
            font-size: 14px;
            color: #666;
        }
    </style>
</head>
<body>
<!--span,a,strong,em行内元素不能设置宽高和背景颜色-->
<!--div,ul,li,p,h可以设置宽高和背景颜色-->
    <ul id="list">
        <li>
            <!--兄弟元素都为一种元素block或者inline或者inline-block-->
            <span class="rank">1</span>
            <!--span是位于的第一个元素不用清除浮动，但是一般要清除浮动-->
            <a href="#">这里是超链接</a>
        </li>
        <li>
            <span class="rank">2</span>
            <a href="#">这里是超链接</a>
        </li>
        <li>
            <span class="rank">3</span>
            <a href="#">这里是超链接</a>
        </li>
        <li>
            <span class="rank">4</span>
            <a href="#">这里是超链接</a>
        </li>
        <li>
            <span class="rank">5</span>
            <a href="#">这里是超链接</a>
        </li>
        <li>
            <span class="rank">6</span>
            <a href="#">这里是超链接</a>
        </li>
    </ul>
</body>
</html>

在这里插入图片描述
这里的设置span是位于的第一个元素不用清除浮动，但是一般要清除浮动
当添加float属性的时候span元素自动调为display: block;a这时行高的属性不起作用

二.清浮操作
1.float处理一行可以显示多个盒子的问题，本来一行一个盒子
2.处理先出现的一个盒子，若有左浮是1在最左边
3.float有问题2个文字因为浮动破坏文档流显示，网页变形。一行超出宽度的限制会转到下一行
4.980px-1440px pc端
5.解决一
(现在清除浮动本意：隐藏溢出) 加给浮动元素的父元素，后面内容显示不会受到浮动元素的影响
overflow: hidden;
解决二：
清浮2：给浮动后的元素加个属性clean：both
6.用一个盒子包含浮动的盒子处理破坏的文档流
完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--float处理一行可以显示多个盒子的问题，本来一行一个盒子-->
    <style type="text/css">
        .box{
            width: 200px;
            height: 200px;
            border: 1px solid #999;
            /*处理先出现的一个盒子，若有左浮是1在最左边*/
            /*float问题2个 文字因为浮动破坏文档流显示，网页变形。一行超出宽度的限制会转到下一行*/
            float: right;
            line-height: 200px;
        }
        .container{
            /*980-1440pc端*/
            width: 1200px;
            /*解决一*/
            /*(现在清除浮动本意：隐藏溢出) 加给浮动元素的父元素，后面内容显示不会受到浮动元素的影响*/
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="container">
        <!--用一个盒子包含浮动的盒子处理破坏的文档流-->
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
    </div>
    hello panjin
</body>
</html>

在这里插入图片描述
三.布局
代码一（没有内外间距）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #wrap{
            width: 1200px;
            margin: 0 auto;
            /*作为容器没有显示意义*/
        }
        #header{
            background-color: #999;
            height: 30px;
        }
        #nav{
            height: 40px;
            background-color: #add8e6;
        }
        #section{
            height: 50px;
            background: #00A000;
        }
        /*一行中显示main和aside*/
        #main{
            width: 700px;
            height: 300px;
            float: left;
            background: greenyellow;
        }
        #aside{
            width: 500px;
            height: 300px;
            float: left;
            background-color: #66afe9;
        }
        #footer{
            height: 80px;
            background-color: yellow;
            clear: both;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="header"></div>
        <div id="nav"></div>
        <div id="section"></div>

        <div id="main"></div>
        <div id="aside"></div>
        <!--清浮2：给浮动后的元素加个属性clean：both-->
        <div id="footer"></div>
    </div>
</body>
</html>

在这里插入图片描述
代码二：（有间距并且考虑width的大小控件的margin和padding要算在width里面）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--题目1：完成三列布局的-->
    <style type="text/css">
        #wrap{
            width: 1000px;
            margin: 0 auto;
        }
        #header{
            height: 60px;
            background-color: #66afe9;
            margin: 20px auto;
        }
        #nav{
            height: 30px;
            background-color: #761c19;
            margin-bottom: 10px;
        }
        #section{
            height: 80px;
            background-color: #8c8c8c;
            margin-bottom: 20px;
        }
        #main{
            width: 290px;
            height: 300px;
            background-color: yellow;
            float: left;
            margin-bottom: 10px;
            margin-right: 10px;
        }
        #aside{
            width: 480px;
            height: 300px;
            background-color: #00A000;
            float: left;
            margin-right: 20px;
        }
        #article{
            width: 200px;
            height: 150px;
            background-color: #9acfea;
            float: left;
        }
        #article1{
            width: 200px;
            height: 150px;
            background-color: #269abc;
            float: left;
        }
        #footer{
            height: 40px;
            background-color: #8c8c8c;
            clear: both;
        }
    </style>
</head>
<body>
<div id="wrap">
    <div id="header"></div>
    <div id="nav"></div>
    <div id="section"></div>

    <div id="main"></div>
    <div id="aside"></div>
    <div id="article"></div>
    <div id="article1"></div>
    <!--清浮2：给浮动后的元素加个属性clean：both-->
    <div id="footer"></div>
</div>
</body>
</html>

在这里插入图片描述
代码三：
注意在footer上的元素有浮动，所以在footer本身设置margin-top会失效，所以在上面的元素设置margin-bottom即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--题目二：使每个盒子之间有间距-->
    <style type="text/css">
        #wrap{
            width: 1200px;
            margin: 0 auto;
            /*作为容器没有显示意义*/
        }
        #header{
            background-color: #999;
        }
        #nav{
            height: 40px;
            background-color: #add8e6;
            margin-top: 60px;
            margin-bottom: 10px;
        }
        #section{
            height: 50px;
            background: #00A000;
        }
        /*一行中显示main和aside*/
        #main{
            width: 690px;
            height: 300px;
            float: left;
            background: greenyellow;
            margin-top:10px;
            margin-right: 10px;
        }
        #aside{
            width: 490px;
            height: 300px;
            float: left;
            background-color: #66afe9;
            margin-top:10px;
            margin-bottom: 10px;
            margin-left: 10px;
        }
        #footer{
            height: 80px;
            background-color: yellow;
            clear: both;
            /*由于浮动，marigin-top不起作用*/
            /*margin-top: 6px;*/
        }
    </style>
</head>
<body>
<div id="wrap">
    <div id="header"></div>
    <div id="nav"></div>
    <div id="section"></div>

    <div id="main"></div>
    <div id="aside"></div>
    <!--清浮2：给浮动后的元素加个属性clean：both-->
    <div id="footer"></div>
</div>
</body>
</html>

在这里插入图片描述
代码四（作业完成规定布局）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全局布局</title>
    <style type="text/css">
        #container{
            width: 1200px;
            margin: 0 auto;
        }
        #header{
            height: 40px;
            background-color: purple;
        }
        .menu{
            width: 400px;
            height: 360px;
            background-color: #9acfea;
            float: left;
            margin: 10px auto;
        }
        .box{
            width: 180px;
            height: 100px;
            background-color: #00A000;
            float: left;
            margin: 10px 10px;
        }
        .content{
            width: 780px;
            height: 360px;
            background-color: #761c19;
            float: left;
            margin: 10px 0 10px 20px;
        }
        .list{
            width: 240px;
            height: 100px;
            background: greenyellow;
            float: left;
            margin:10px 10px ;
        }
        #footer{
            height: 60px;
            background-color: yellow;
            clear: both;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="header"></div>
        <div class="menu">
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
        </div>
        <div class="content">
            <div class="list"></div>
            <div class="list"></div>
            <div class="list"></div>
            <div class="list"></div>
            <div class="list"></div>
            <div class="list"></div>
            <div class="list"></div>
            <div class="list"></div>
            <div class="list"></div>
        </div>
        <div id="footer"></div>
    </div>
</body>
</html>

在这里插入图片描述

2018-9-29 课堂练习浮动和学习position

不要给relative定坐标
如果不写相对的在父元素，width不会被继承（position:relative;）
绝对定位-通过x-y坐标定位(用上下左右表示)
绝对定位和别的元素没有关系，一个元素是绝对定位，那对于他的删除或添加和网页其他元素没有影响
绝对定位继承父元素不能省略宽度
绝对定位不用做布局
绝对定位是：相对你写的左上或什么的位置
绝对定位的父亲必相对
下拉菜单-绝对定位
固定定位是图片上的文字，根据网页定位
固定定位-小广告

代码1“”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对</title>
    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
        }
        #parent{
            /*容器*/
            width: 1200px;
            /*不要给relative定坐标*/
            position: relative;
            /*如果不写相对的在父元素，width不会被继承*/
            margin: 0 auto;
        }
        #head{
            height: 60px;
            width: 100%;
            background-color: #ffff00;
            position: absolute;
            /*left: 100px;*/
            /*bottom: 0;*/
            z-index: -1;
        }
        #left{
            width: 700px;
            height: 300px;
            position: absolute;
            background-color: #00A000;
            top: 60px;
        }
        #right{
            width: 500px;
            height: 300px;
            position: absolute;
            background-color: #8c8c8c;
            top: 60px;
            left: 700px;
        }
        #footer{
            width: 100%;
            height: 50px;
            background-color: #9acfea;
            position: absolute;
            top: 360px;
            left: 0;
        }

        #fixed{
            width: 200px;
            height: 200px;
            position: fixed;
            bottom: 0;
            right: 0;
            background-color: #2e2e2e;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="head"></div>
        <div id="left"></div>
        <div id="right"></div>
        <div id="footer"></div>
        Dalian
    </div>
<div id="fixed"></div>
</body>
</html>

在这里插入图片描述
右下角的fix定位的div会随着内容的增多当高度达到滚动条的时候还是位于页面的右下角

三个一左一右

案例可以用一个a标签一个文字或者一张图片一个a/文字
（一）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>一左一右</title>
    <style>
        h2{
            padding: 0;
            margin: 0;
        }
        a{
            text-decoration: none;
        }
        .title{
            width: 300px;
            height: 32px;
            line-height: 32px;
            border: 1px solid #c00;
        }
        .more{
            color: #ccc;
            font-size: 14px;
            float: right;
            padding-right: 5px;
        }
        .title h2{
            font-size: 18px;
            color: #00A000;
            padding-left: 12px;
        }
    </style>
</head>
<body>
<div class="title">
    <a href="#" class="more">更多>></a>
    <h2>标题</h2>
</div>
123
</body>
</html>

在这里插入图片描述
title设置了宽度，对a标签设置右浮。a位于h2是a是第一个元素。这样的情况。一种高度的多个元素也就是在同行的元素，对第一个设置浮动，后面的不用设置清浮操作！！！
加了一个浮动浮动的东西写在前面不影响后面内容
（二）设置左右浮动
代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>一左一右</title>
    <style >
        /*第二种方法     两个浮动*/
        h2{
            padding: 0;
            margin: 0;
        }
        a{
            text-decoration: none;
        }
        .title{
            border-bottom: 2px solid #999;
            height: 30px;
            line-height: 30px;
            width: 300px;
        }
        .more{
            float: right;
            font-size: 12px;
            color: #2B542C;
            padding-right: 10px;
        }
        .title h2{
            /*h2的宽度就是内容的宽度*/
            float: left;
            font-size: 14px;
            color:#2e6da4;
            text-indent: 12px;
        }
    </style>
</head>
<body>
<div class="title">
    <a href="#" class="more">更多>></a>
    <h2>标题</h2>
</div>
</body>
</html>

在这里插入图片描述
（三）position
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>一左一右(浮动+定位)-relative</title>
    <style type="text/css">
        h2{
            padding: 0;
            margin: 0;
        }
        a{
            text-decoration: none;
        }
        .title{
            width: 300px;
            height: 30px;
            line-height: 30px;
            border-top: 2px solid #2e2e2e;
            position: relative;
            /*绝对的父亲必相对*/
        }
       .more{
           font-size: 12px;
           color: #999;
          /*宽度是内容的，高度是父元素*/
           position: absolute;
           top: 0;
           right: 7px;
        }
        .title h2{
            font-size: 14px;
            text-indent: 12px;
            color: #2e6da4;
        }
    </style>
</head>
<body>
    <div class="title">
        <a href="#" class="more">更多>></a>
        <h2>title</h2>
    </div>
123
</body>
</html>

在这里插入图片描述

2018-10-9上图下文两种写法（加透明）

图片超链接-兼容性，IE有边框
a img{
border: none;
}
浮动的父元素这样来清除浮动或者增加高度overflow: hidden;
.slist li{
一行多个上图下文-用浮动一套
float: left;
width: 200px;
margin: 6px;
}
给浮动的子元素的祖先元素设置高度或overflow使文档流正常

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        
        /*全局*/
        ul,p{
            /*list-style: none;*/
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        /*图片超链接-兼容性，IE有边框*/
        a img{
            border: none;
        }
        .slist p a{
            color: #039;
        }
        .slist{
            width: 848px;
            /*浮动的父元素这样来清除浮动或者增加高度*/
            overflow: hidden;
        }
        .slist li{
            /*一行多个上图下文-用浮动一套*/
            float: left;
            width: 200px;
            margin: 6px;
        }
        .slist img{
            width: 180px;
            height: 180px;
            display: block;
            margin: 0 auto;
        }
        .slist p{
            height: 30px;
            line-height: 30px;
            overflow: hidden;
            font-size: 14px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="slist">
        <ul>
            <li>
                <a href="#">
                    <img src="image/hd-weather.png" alt="">
                </a>
                <p><a href="#">这里是文字</a></p>
            </li>
            <li>
                <a href="#">
                    <img src="image/hd-weather.png" alt="">
                </a>
                <p><a href="#">这里是文字</a></p>
            </li>
            <li>
                <a href="#">
                    <img src="image/hd-weather.png" alt="">
                </a>
                <p><a href="#">这里是文字</a></p>
            </li>
            <li>
                <a href="#">
                    <img src="image/hd-weather.png" alt="">
                </a>
                <p><a href="#">这里是文字</a></p>
            </li>
            <li>
                <a href="#">
                    <img src="image/hd-weather.png" alt="">
                </a>
                <p><a href="#">这里是文字</a></p>
            </li><li>
            <a href="#">
                <img src="image/hd-weather.png" alt="">
            </a>
            <p><a href="#">这里是文字</a></p>
        </li>
            <li>
                <a href="#">
                    <img src="image/hd-weather.png" alt="">
                </a>
                <p><a href="#">这里是文字</a></p>
            </li>
            <li>
                <a href="#">
                    <img src="image/hd-weather.png" alt="">
                </a>
                <p><a href="#">这里是文字</a></p>
            </li>
        </ul>
    </div>
</body>
</html>

在这里插入图片描述

方法二：包含文字的透明度在图片上方显示

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

    <style type="text/css">
        ul,p{
            /*list-style: none;*/
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        a{
            text-decoration: none;
        }

        a img{
            border: none;
        }

        .slist{
            width: 848px;
            overflow: hidden;
            /*给浮动的子元素的祖先元素设置高度或overflow使文档流正常*/
        }
        .slist li{
            float: left;
            width: 200px;
            margin: 6px;
        }
        .slist img{
            width: 200px;
            height: 180px;
            /*display: block;*/
            /*margin: 0 auto;*/
        }
        .slist p{
            height: 30px;
            line-height: 30px;
            overflow: hidden;
            font-size: 14px;
            text-align: center;
            /*background-color: #000;*/
            background-color: rgba(0,0,0,0.5);
            position: relative;
            z-index: 3;
            margin-top: -30px;
        }
        .slist p a{
            color: #fff;
        }
    </style>
</head>
<body>
<div class="slist">
    <ul>
        <li>
            <a href="#">
                <img src="image/hd-weather.png" alt="">
            </a>
            <p><a href="#">这里是文字</a></p>
        </li>
        <li>
            <a href="#">
                <img src="image/hd-weather.png" alt="">
            </a>
            <p><a href="#">这里是文字</a></p>
        </li>
        <li>
            <a href="#">
                <img src="image/hd-weather.png" alt="">
            </a>
            <p><a href="#">这里是文字</a></p>
        </li>
        <li>
            <a href="#">
                <img src="image/hd-weather.png" alt="">
            </a>
            <p><a href="#">这里是文字</a></p>
        </li>
        <li>
            <a href="#">
                <img src="image/hd-weather.png" alt="">
            </a>
            <p><a href="#">这里是文字</a></p>
        </li><li>
        <a href="#">
            <img src="image/hd-weather.png" alt="">
        </a>
        <p><a href="#">这里是文字</a></p>
    </li>
        <li>
            <a href="#">
                <img src="image/hd-weather.png" alt="">
            </a>
            <p><a href="#">这里是文字</a></p>
        </li>
        <li>
            <a href="#">
                <img src="image/hd-weather.png" alt="">
            </a>
            <p><a href="#">这里是文字</a></p>
        </li>
    </ul>
</div>
</body>
</html>

在这里插入图片描述

2018-10-11
上次的上图下文有个问题就是li的高度会超过实际的4px
更改方法：
在这里插入图片描述
让在同级的a和img为同级元素，所以让img为block

左图右文（简单版）-注意：清浮

对于ul下的li列表项如果用清浮clear:both那么对于ul外的第一个元素或文字还会在ul-li最后一项中，这样没有避免对文档流影响。
注意不要为了去除浮动而改变HTML的布局，而是通过css样式来修改。
所以清浮有两种方法
①用给li加高度这个属性。
②给ul中li增加overflow: hidden;属性
a中不要包含div

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style type="text/css">
       ul,h3,p{
           padding: 0;
           margin: 0;
       }
       a img{
           border: none;
           display: block;
       }
       .zuotu li{
           /*不能去除对文档流的影响，最后一个的ul结束的文字不能避免对文档流影响*/
           /*不要为去除浮动而改变HTML*/
           /*方法一：给li加高度*/
           /*clear: both;*/
           /*height: 150px;*/
           /*方法二？*/
           overflow: hidden;
           margin-bottom: 3px;
           border-bottom: 1px solid #e9322d;
       }
       .zuotu img{
           width: 150px;
           height: 150px;
           float: left;
       }
       .text{
           width: 300px;
           height: 80px;
           float: left;
       }
       .text h3{
           line-height: 30px;
       }
       .text p{
           text-indent: 2em;
           line-height: 20px;
           font-size: 14px;
       }
   </style>
</head>
<body>
   <ul class="zuotu">
       <li>
           <!--a里不要包含div-->
           <a href="#">
               <img src="../image/2.1.jpg" alt="">
           </a>
           <div class="text">
               <h3>titletitle</h3>
               <p>123456</p>
           </div>
       </li>
       <li>
           <a href="#">
               <img src="../image/2.1.jpg" alt="">
           </a>
           <div class="text">
               <h3>titletitle</h3>
               <p>123456789</p>
           </div>
       </li>
       <li>
           <a href="#">
               <img src="../image/2.1.jpg" alt="">
           </a>
           <div class="text">
               <h3>titletitle</h3>
               <p>123456789</p>
           </div>
       </li>
       <li>
           <a href="#">
               <img src="../image/2.1.jpg" alt="">
           </a>
           <div class="text">
               <h3>titletitle</h3>
               <p>123456789</p>
           </div>
       </li>
       <li>
           <a href="#">
               <img src="../image/2.1.jpg" alt="">
           </a>
           <div class="text">
               <h3>titletitle</h3>
               <p>123456789</p>
           </div>
       </li>
   </ul>
</body>
</html>

在这里插入图片描述

列表项（简单版）

要做成的效果（前面的小红点是以背景图的属性使用）
在这里插入图片描述

x轴 y轴—— 背景图片位置
background-position: 0px 13px;
文字和左边点的位置 padding-left: 12px;
左右位置通过padding-left或text-index调整
上下位置通过background-position:，第一个值x为0

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style type="text/css">
       ul{
       }
       .list li{
           list-style-type: none;
           line-height: 30px;
           height: 30px;
           font-size: 14px;
           background: url("../image/dot_red.gif") no-repeat;
           /*x轴 y轴*/
           /*背景图片位置*/
           background-position: 0px 13px;
           /*文字和左边点的位置*/
           padding-left: 12px;
           /*左右位置通过padding-left或text-index调整*/
           /*上下位置通过background-position:，第一个值x为0*/
       }
       .list a{
           text-decoration: none;
           color: #e9322d;
       }
       .list span{
           font-size: 12px;
           color: #039;
       }
   </style>
</head>
<body>
   <ul class="list">
       <li>
           <a href="#">列表前的点用背景图片</a>
           <span>文字的说明</span>
       </li>
       <li>
           <a href="#">列表前的点用背景图片</a>
           <span>文字的说明</span>
       </li>
       <li>
           <a href="#">列表前的点用背景图片</a>
           <span>文字的说明</span>
       </li>
       <li>
           <a href="#">列表前的点用背景图片</a>
           <span>文字的说明</span>
       </li>
       <li>
       <a href="#">列表前的点用背景图片</a>
       <span>文字的说明</span>
   </li>

   </ul>
</body>
</html>

在这里插入图片描述

列表项（复杂）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        /*li{*/
            /*list-style-type: none;*/
        /*}*/
        .list li{
            /*li高度必须要有*/
            height: 30px;
            line-height: 30px;
            margin-bottom: 4px;
            border-bottom: 1px solid #eee;
        }
        .rank{
            width: 18px;
            height: 18px;
            background-color: #c00;
            color: #fff;
            margin-right: 7px;
            float: left;
            line-height: 18px;
            margin-top: 8px;
            font-size: 12px;
        }
        .list a{
            color: #00BFFF;
            /*增加浮动属性都是块级元素*/
            float: left;
        }
        .amount{
            float: right;
            color: #ccc;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <ul class="list">
        <li>
            <!--都不浮动最后一个绝对定位、前两个左浮最后一个右浮，都浮动-->
            <span class="rank">1</span>
            <a href="#">超链接</a>
            <span class="amount">点击量</span>
        </li>
        <li>
            <span class="rank">2</span>
            <a href="#">超链接</a>
            <span class="amount">点击量</span>
        </li>
        <li>
        <span class="rank">3</span>
        <a href="#">超链接</a>
        <span class="amount">点击量</span>
    </li>
        <li>
            <span class="rank">4</span>
            <a href="#">超链接</a>
            <span class="amount">点击量</span>
        </li>
    </ul>
</body>
</html>

在这里插入图片描述