Web前端入门学习(6)——浮动例子之鉴赏

浮动例子之鉴赏

在浮动原理及清除浮动一文中(http://cherry360.blog.51cto.com/12176744/1864258),简单介绍了浮动的相关基础知识,为了巩固知识点,本篇结合代码展示关于浮动的几个常见例子。

例1:九格子

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>九格子</title>
<style>
    body,ul{
    padding: 0;
    margin: 0;
    }
      .box{
      width: 300px;
      height: 300px;
      margin: 100px auto;
      border-top: 1px solid #000;
      border-left: 1px solid #000;
      }
      .box li{
      list-style: none;
      width: 99px;
      height: 99px;
      float: left;
      border-right: 1px solid #000;
      border-bottom: 1px solid #000;
      background: #9FC;
      text-align: center;
      line-height: 99px;
      }
</style>
</head>
<body>
    <ul class="box">
        <li><img src="http://img.baidu.com/hi/babycat/C_0002.gif" ></li>
        <li><img src="http://img.baidu.com/hi/babycat/C_0020.gif" ></li>
        <li><img src="http://img.baidu.com/hi/babycat/C_0003.gif" ></li>
        <li><img src="http://img.baidu.com/hi/babycat/C_0017.gif" ></li>
        <li><img src="//pic.ikafan.com/imgp/L3Byb3h5L2h0dHAvaW1nLmJhaWR1LmNvbS9oaS9iYWJ5Y2F0L0NfMDAwNC5naWY=.jpg" ></li>
        <li><img src="http://img.baidu.com/hi/babycat/C_0015.gif" ></li>
        <li><img src="http://img.baidu.com/hi/babycat/C_0005.gif" ></li>
        <li><img src="http://img.baidu.com/hi/babycat/C_0016.gif" ></li>
        <li><img src="http://img.baidu.com/hi/babycat/C_0006.gif" ></li>
    </ul>
</body>
</html>


显示结果:

例2:条纹

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>条纹</title>
<style>
    body,ul{
        padding: 0;
        margin: 0;
    }
    li{
        list-style: none;
    }
    .box{
        width: 500px;
        padding: 10px;
        background: #ccc;
        margin: 100px auto;
    }
    .box li {
        padding: 5px 0;
        height: 17px;
    }
    span{
        height: 17px;
        float: left;
    }
    .left{
        width:300px;
        background: yellow; 
    }
    .right{
        width: 200px;
        background: pink;
    }
</style>
</head>
<body>
    <ul class="box">
        <li>
            <span class="left"></span>
            <span class="right"></span>
        </li>
        <li>
            <span class="left"></span>
            <span class="right"></span>
        </li>
        <li>
            <span class="left"></span>
            <span class="right"></span>
        </li>
        <li>
            <span class="left"></span>
            <span class="right"></span>
        </li>
        <li>
            <span class="left"></span>
            <span class="right"></span>
        </li>
    </ul>
</body>
</html>


显示结果:

例3:钢琴按键

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>钢琴按键</title>
<style>
    body,ul{
        margin: 0;
        padding: 0;
    }
    li{
        list-style: none;
    }
    .list{
        width: 732px;
        overflow: auto;
        border-top: 1px solid #999;
        border-left: 1px solid #999;
        margin: 100px auto;
    }
    .list li{
        width: 60px;
        height: 180px;
        border-bottom: 1px solid #999;
        border-right: 1px solid #999;
        float: left;
    }
    li div {
        height: 100px;
        background: #000;
        color: #fff;
    }
    li .div2{
        height: 50px;
    }
</style>
</head>
<body>
    <ul class="list">
        <li>
            <div>1</div>
        </li>
        <li>
            <div class="div2">2</div>
        </li>
        <li>
            <div>3</div>
        </li>
        <li>
            <div class="div2">4</div>
        </li>
        <li>
            <div>5</div>
        </li>
        <li>
            <div class="div2">6</div>
        </li>
        <li>
            <div>7</div>
        </li>
        <li>
            <div class="div2">8</div>
        </li>
        <li>
            <div>9</div>
        </li>
        <li>
            <div class="div2">10</div>
        </li>
        <li>
            <div>11</div>
        </li>
        <li>
            <div class="div2">12</div>
        </li>
    </ul>
</body>
</html>



显示结果:

一般情况,一个元素里边所有子元素结构和样式都是一样,那咱们就把这看成是1个列表。以上就是这种情况。

时间: 2024-10-29 19:05:37

Web前端入门学习(6)——浮动例子之鉴赏的相关文章

Web前端入门学习(5)——浮动原理及清除浮动

浮动原理及清除浮动 上节回顾 在上节的<Web前端入门学习(4)-- 块级元素和行内元素之特征与转换>中(http://cherry360.blog.51cto.com/12176744/1863945),介绍了块级元素和行内元素的特征,及粗略介绍了如何进行转换.加上display属性,可以指定元素的类型,如display:block.display:inline,以及display:inline-block.当然用得最多的是最后一个display:inline-block.结合例子来看: 例

Web前端入门学习(2)——HTML常用标签

HTML标签 a标签 a标签是一个超链接标签,用于从一个页面链接到另一个页面.在<Web前端入门学习(1)>有提到过4个伪类,分别是a:link.a:visited.a:hover.a:active. a:link代表的是未访问过的链接,当访问者首次打开网页未点击链接时,所表现的形式: a:visited代表的是访问过的链接,相对于link,是访问者点击了连接后,所表现的形式: a:hover代表的是当鼠标经过链接上面时所表现的形式,鼠标经过后,链接会有所变化: a:active代表的是当用户

Web前端入门学习(1)——走进前端世界

前端基础知识 前端开发语言: HTML(Hypertext Markup Language):超文本标记语言: CSS(Cascading Style Sheets):层叠样式表: JS(JavaScript):脚本语言. 样式表: 行间样式表.内部样式表.外部样式表. 样式 样式格式:属性名:属性值: 常见样式: border:1px solid red border-width:1px border-style:solid border-color:red 常见颜色模式: 关键字:red y

Web前端入门学习(3)——CSS选择器

CSS选择器 id选择器 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> #box{width:200px;height:200px;border:2px solid #f3f3f

Web前端入门学习(4)—— 块级元素和行内元素之特征与转换

块级元素和行内元素  1.元素的定义 根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为"block",成为"块级"元素(block-level):而span元素的默认display属性值为"inline",称为"行内"元素.     div这样的块级元素,就会自动占据一定矩形空间,可以通过设置高度.宽度

web前端入门到实战:总结清除浮动的方法

方法一.在结尾处添加空div标签clear:both 在浮动的盒子之下再放一个标签,在这个标签中使用clear:both,来清除浮动对页面的影响. 注意:一般情况下不会使用这一种方式来清除浮动.因为这种清除浮动的方式会增加页面的标签,造成结构的混乱. <div class="box"> <div class="red">1</div> <div class="sienna">2</div>

web前端入门到实战:css浮动的特性,与浮动带来的影响以及如何清除浮动

块元素在文档流中默认垂直排列,所以多个div从上至下依次排开 如果希望块元素在页面中水平排列,可以使用float来使元素浮动,从而脱离文档流,元素脱离文档流以后,它下边的元素会立即向上移动 css浮动的特性 1.浮动的元素不会盖住文字,文字会自动环绕在浮动元素的周围 2.元素浮动以后,会尽量向页面的左上或这是右上漂浮,直到遇到父元素的边框或者其他的浮动元素 3.如果浮动元素上边是一个没有浮动的块元素,则浮动元素不会超过块元素 4.浮动的元素永远不会超过他上边的兄弟元素,最多一边挤 5.块元素脱离

web前端开发学习路线

首先分享一下我的经验,想做好一件事,必须要花费一些功夫,然后是多学.多思.多练.多交流.多总结,发现自己的问题,然后一定要克服,在状态不好的情况下,往往要及时调整.新手学习前端的话,一定要想想为什么要学习它,是出于一种什么心态,然后定位好自己,多向大牛请教,多教一些没有自己水平高的人,那样往往能让自己成长的快,切勿急躁.初学可以看一些入门视频教程,之后可以买一些书,做一些小项目,要学会投资,分析自己的现状及能力,实时调整,一定要有自己的想法,懂得创新.在这里一定要对自己做分析,然后找出一种适合的

web前端的学习误区

web前端的学习误区 网页制作是计算机专业同学在大学期间都会接触到的一门课程,而学习网页制作所用的第一个集成开发环境(IDE)想必大多是Dreamweaver,这种所见即所得的“吊炸天”IDE为我们制作网页带来了极大的方便. 入门快.见效快让我们在不知不觉中已经深深爱上了网页制作.此时,很多人会陷入一个误区,那就是既然借助这么帅的IDE,通过鼠标点击菜单就可以快速方便地制作网页. 那么我们为什么还要去学习html.CSS.JavaScrpt.jQuery等这些苦逼的代码呢?这不是舍简求繁吗? 但