Startsida Utforska Hjälp
Logga in
lovecoding
/
VIP24
6
0
Fork 0
Filer Ärenden 0 Pull-förfrågningar 0 Wiki
Bläddra i källkod

浮动

dongxiuling 2 år sedan
förälder
272ea56e45
incheckning
642aed518a
3 ändrade filer med 286 tillägg och 0 borttagningar
Unifierad Vy Visa Diff Statistik
  1. 172 0
      css/11_整理与复习.html
  2. 47 0
      css/12_浮动.html
  3. 67 0
      css/13_清除浮动问题.html

+ 172 - 0
css/11_整理与复习.html
Visa fil 

@@ -0,0 +1,172 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        /* 内部样式 */
 
+        p{
 
+            width: 200px;
 
+            height: 200px;
 
+        }
 
+    </style>
 
+    <!-- 外部样式 -->
 
+    <link rel="stylesheet" href="1_test.css">
 
+</head>
 
+<body>
 
+    <!-- 
+        基础标签：
 
+        h1-h6  标题
 
+        p 段落
 
+        img  图片
 
+        a 超链接
 
+        ul li   列表
 
+        div 区块 用来布局
 
+        span 文本内容 
+        b 加粗
 
+        i 斜体
 
+
 
+        表格
 
+        table
 
+            tr
 
+                td
 
+
 
+        表单
 
+            文本框 
+            <input type="text">
 
+            密码框
 
+            <input type="password">
 
+            单选框
 
+            <input type="radio">
 
+            复选框
 
+            <input type="checkbox">
 
+            下拉框
 
+            select  
+                option
 
+            文本域
 
+            textarea
 
+            提交按钮
 
+            <input type="submit">
 
+            普通按钮
 
+            <input type="button">
 
+
 
+        css样式
 
+        1、引入css
 
+            内联样式
 
+            内部样式
 
+            外部样式
 
+           
+        2、css 选择器  
+            标签选择器
 
+            div{
 
+                
+            }
 
+            id选择器(id唯一的)
 
+            #xxx{
 
+
 
+            }
 
+            class 类选择器 
+            .aa{
 
+
 
+            }
 
+            后代选择器
 
+            #ul1 .aa{
 
+
 
+            }
 
+            分组选择器|群组选择器
 
+            #ul1 .aa, #xxx{
 
+            
+            }
 
+
 
+            伪类选择器
 
+            a:hover{
 
+
 
+            }
 
+        3、基础样式
 
+            宽高 背景
 
+            width:200px;
 
+            height:200px;
 
+            background
 
+                -color:red; 颜色
 
+                -image:url(xx.jpg); 图片
 
+                -repeat:no-reprat|repeat; 不重复|重复
 
+                -posiotn:0 0; 位置：水平（固定值|left|center|right） 垂直(固定值|top|center|bottom)
 
+
 
+            简化为：
 
+            background:red url(xx.jpg) no-reprat 0 0;
 
+
 
+            字体 相关
 
+            font
 
+                -size:12px 字体大小 （默认字体大小16px  设置最小字体大小12px）
 
+                -family:字体
 
+                -weight:400; 字体粗细 100-900 （默认400 ）
 
+                style:italic|normal 斜体|正常
 
+            
+            color:red; 文字颜色
 
+
 
+            文本相关属性
 
+            text-align:left |right|center; 文本水平对齐
 
+            line-height:height ;单行文本垂直居中
 
+            text-decoration: underline 下划线|none没有 |line-through中划线
 
+            text-indent:20px; 首行缩进
 
+
 
+            列表 
+            list-style:none;去掉列表前边的点
 
+
 
+            
+
 
+
 
+
 
+
 
+
 
+            
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+            
+
 
+
 
+
 
+
 
+
 
+     -->
 
+
 
+     <select name="" id="">
 
+         <option value="">黑大</option>
 
+         <option value="">理工</option>
 
+
 
+     </select>
 
+     <input type="submit">
 
+
 
+     <input type="button" value="确定">
 
+
 
+     <input type="reset">
 
+     <!-- 内联样式 -->
 
+     <div style="width:200px; height:200px; background:red"></div>
 
+    <h1 id="xxx"></h1>
 
+
 
+    <ul id="ul1">
 
+        <li></li>
 
+        <li class="aa"></li>
 
+        <li></li>
 
+        <li class="aa"></li>
 
+
 
+    </ul>
 
+
 
+
 
+    <ul>
 
+        <li></li>
 
+        <li class="aa"></li>
 
+        <li></li>
 
+        <li class="aa"></li>
 
+
 
+    </ul>
 
+</body>
 
+</html>

+ 47 - 0
css/12_浮动.html
Visa fil 

@@ -0,0 +1,47 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>浮动</title>
 
+    <style>
 
+        #div1{
 
+            width: 200px;
 
+            height: 200px;
 
+            background: #f00;
 
+
 
+            /* 浮动 */
 
+            float:left;
 
+        }
 
+        #div2{
 
+            width: 200px;
 
+            height: 200px;
 
+            background: #0f0;
 
+
 
+            float:left;
 
+        }
 
+        #div3{
 
+            width: 200px;
 
+            height: 200px;
 
+            background: #00f;
 
+            float:left;
 
+
 
+        }
 
+
 
+    </style>
 
+</head>
 
+<body>
 
+    <!-- 浮动 float:left|right|none;
 
+        浮动的元素 会脱离文档流，空间释放
 
+    -->
 
+    <div id="div1"></div>
 
+    <div id="div2"></div>
 
+    <div id="div3"></div>
 
+
 
+
 
+
 
+    
+
 
+</body>
 
+</html>

+ 67 - 0
css/13_清除浮动问题.html
Visa fil 

@@ -0,0 +1,67 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>浮动</title>
 
+    <style>
 
+        #div0{
 
+            background: #999;
 
+            /* height:200px; */
 
+
 
+            overflow: hidden;
 
+        }
 
+        #div1{
 
+            width: 200px;
 
+            height: 200px;
 
+            background: #f00;
 
+            float: left;
 
+
 
+        }
 
+        #div2{
 
+            width: 200px;
 
+            height: 200px;
 
+            background: #0f0;
 
+            float: left;
 
+
 
+        }
 
+        #div3{
 
+            width: 200px;
 
+            height: 200px;
 
+            background: #00f;
 
+            float: left;
 
+
 
+        }
 
+        h2{
 
+            height: 100px;
 
+            background: pink;
 
+        }
 
+
 
+    </style>
 
+</head>
 
+<body>
 
+    <!-- 浮动 float:left|right|none;
 
+        浮动的元素 会脱离文档流，空间释放
 
+
 
+        浮动的元素 会脱离文档流空间释放 ，导致父元素没有高度 
+
 
+        解决浮动导致的元素的塌陷问题？
 
+        1 给元素添加高度
 
+        2 父元素添加一个overflow:hidden (方法技巧)
 
+
 
+    -->
 
+    <div id="div0">
 
+        <div id="div1"></div>
 
+        <div id="div2"></div>
 
+        <div id="div3"></div>
 
+    </div>
 
+    <h2></h2>
 
+
 
+
 
+
 
+
 
+    
+
 
+</body>
 
+</html>