HTML学习笔记 css定位浮动及瀑布流 第十三节 （原创）

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>浮动</title>    <link rel="stylesheet" href="tzy.css"type="text/css"></head><body>

<div id="container">    <div id="fd"></div>    <div id="sd"></div>    <div id="td"></div>    hello word    helloword    <div id="text">波电压</div></div><!--瀑布流图片大小要一样--><div id="div1">    <ul>        <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505626627&di=b6e93fc3aa32a73602d823fe05af202c&imgtype=jpg&er=1&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201412%2F30%2F20141230201143_wMJj8.thumb.224_0.jpeg" alt="1"></li>        <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505626627&di=b6e93fc3aa32a73602d823fe05af202c&imgtype=jpg&er=1&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201412%2F30%2F20141230201143_wMJj8.thumb.224_0.jpeg" alt="2"></li>        <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505626627&di=b6e93fc3aa32a73602d823fe05af202c&imgtype=jpg&er=1&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201412%2F30%2F20141230201143_wMJj8.thumb.224_0.jpeg" alt="3"></li>    </ul>    <ul>        <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505626627&di=b6e93fc3aa32a73602d823fe05af202c&imgtype=jpg&er=1&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201412%2F30%2F20141230201143_wMJj8.thumb.224_0.jpeg" alt="4"></li>        <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505626627&di=b6e93fc3aa32a73602d823fe05af202c&imgtype=jpg&er=1&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201412%2F30%2F20141230201143_wMJj8.thumb.224_0.jpeg" alt="5"></li>        <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505626627&di=b6e93fc3aa32a73602d823fe05af202c&imgtype=jpg&er=1&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201412%2F30%2F20141230201143_wMJj8.thumb.224_0.jpeg" alt="6"></li>    </ul>    <ul>        <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505626627&di=b6e93fc3aa32a73602d823fe05af202c&imgtype=jpg&er=1&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201412%2F30%2F20141230201143_wMJj8.thumb.224_0.jpeg" alt="7"></li>        <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505626627&di=b6e93fc3aa32a73602d823fe05af202c&imgtype=jpg&er=1&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201412%2F30%2F20141230201143_wMJj8.thumb.224_0.jpeg" alt="8"></li>        <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1505626627&di=b6e93fc3aa32a73602d823fe05af202c&imgtype=jpg&er=1&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201412%2F30%2F20141230201143_wMJj8.thumb.224_0.jpeg" alt="9"></li>    </ul></div>

</body></html>

css文件tzy.css
#fd {    width: 100px;    height: 150px;

float: left;}

#sd {    width: 150px;    height: 100px;

float: left;}

#td {    width: 100px;    height: 100px;

float: left;}

#container {    width: 300px;    height: 500px;

}

#text {    clear: both;    /*去掉浮动*/}

* {    margin: 0px;    padding: 0px;}

li {    list-style: none;}

#div1 {    width: 100%;    height: auto;margin: 20px auto;}ul{    width: 250px;    float: left;}
时间： 2024-10-07 05:45:49

HTML学习笔记 css定位浮动及瀑布流 第十三节 （原创）的相关文章

HTML学习笔记 css定位浮动及瀑布流案例 第十三节 （原创） 参考使用表

#fd { width: 100px; height: 150px; background-color: forestgreen; float: left; } #sd { width: 150px; height: 100px; background-color: coral; float: left; } #td { width: 100px; height: 100px; background-color: chartreuse; float: left; } #container { w

HTML学习笔记 css定位（静态，相对，固定，绝对布局）偏移案例 第十二节 （原创） 参考使用表

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS定位(静态,相对,固定,绝对布局)小广告案例</title> <link rel="stylesheet" href="tzy.css" type="text/css"> <

HTML学习笔记 css定位 第十二节 （原创）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS定位</title> <link rel="stylesheet" href="tzy.css" type="text/css"></head><body>&l

HTML学习笔记 CSS块元素加伪类选择器 第三节 （原创）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>伪类选择器</title> <style> div { border: 1px solid red; width: 400px; height: 150px; font-size: 35px; } .temple2 { /*隐藏超出的区域*/ ove

html+css学习笔记 4[定位]

如何让图1中的div2移动到如图2上的位置: 思路:哪些css命令能够影响盒子显示的位置呢? relative相对定位/定位偏移量 position:relative;  相对定位         a.不影响元素本身的特性: b.不使元素脱离文档流: c.如果没有定位偏移量,对元素本身没有任何影响: 定位元素位置控制         top/right/bottom/left  定位元素偏移量. absolute绝对定位/定位层级 osition:absolute;  绝对定位 a.使元素完全脱

Windows phone 8 学习笔记(8) 定位地图导航（转）

Windows phone 8 已经不使用自家的bing地图,新地图控件可以指定制图模式.视图等.bing地图的定位误差比较大,在模拟器中测试新地图貌似比较理想.本节主要讲解下位置服务以及新地图控件的使用. 快速导航:一.定位服务二.地图和导航 一.定位服务 通过手机定位服务可以开发利用手机地理位置的应用.我们可以通过应用监视手机行踪,配合地图使用可以用于导航等.定位服务可以及时取得手机地理位置,也可以持续跟踪手机移动,还可以在后台运行. 1. 立即获取当前位置 我们可以通过一次操作获取当前位置

浮动的瀑布流（案例：蘑菇街）

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>浮动的瀑布流(案例:蘑菇街).html</title> <style> *{margin:0;padding:0;} ul,li{list-style: none} #div1{width:695px;margin:20px auto;bord

[CSS3] 学习笔记-CSS动画特效

在CSS3中,出现了很多出彩的效果,例如2D.3D以及过度.动画和多列等.这些效果为页面设计添加了很多的可选设计. 1.2D.3D转换 转换,是使元素改变尺寸.形状.位置的一种效果:通过CSS3转换,我们能够对元素进行移动.缩放.转动.拉伸或拉长:可以通过2D.3D元素来转换: 2D转换方法: translate().rotate().scale().skew().matrix() 3D转换方法: rotateX() rotateY() 1 <!doctype html> 2 <html

JOAL学习笔记 第八课 OggVorbis格式流

JOAL学习笔记 如果将之前实例代码中的错误数量比作毛毛雨的话,笔者已经让本次课程的大暴雨淋成落汤鸡了-- 由于本次课程中原文作者并未给出完整的代码片,也并未给出解码器的实现,因此我在这里把我已经调通的测试代码贴出来. 先贴出一张图,这样能让大家对整个实现的体系有所了解: 可以看出,我并没有选择教程建议的j-ogg.de提供的j-oggAPI,这个德国网站上并没有实例的讲解,仅仅提供了一个API文档,我参照这个文档(英文)写了一些测试代码,发现其内部报了一个数组越界错误,估计这套API应该是有B