CSS基础总结

最新推荐文章于 2024-08-09 16:30:00 发布
最新推荐文章于 2024-08-09 16:30:00 发布
阅读量661 收藏
点赞数

1.html添加属性和css添加属性不同点：
html:
<table width="800" height="200"></table>
css:
<h1 style="width:800px;height:200px;">这里是内容</h1>
2.在HTML中引入CSS的方法
1）行内式：在标记中直接加样式
<h1 style="样式属性:值;样式属性:值;样式属性:值;">这里是内容</h1>

eg:

复制代码 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>行内式</title>
  </head>
  
  <body>
    <h1 style="background-color: blue;color: #fff;text-align: center;">我要成为优秀的设计师</h1>
    <p style="width: 500px;height: 100px;line-height: 100px;background-color: yellow;color: red;text-align: center;">学习CSS功能很强大</p>
  </body>
</html>
复制代码

拓展：
（1）如果做类似团购式网站的图片+文字的邮件（小网页），一般用行内式样式来学页面。
（2）关于颜色值的简写：
    #ffffff可以写成#fff
    #ffcc00可以写成#fc0
（3）CSS的一个小技巧：一个大块里如果只有一行文字，想让这行文字在大块里垂直居中，就加line-height（行高属性）

2）嵌入式：将页面中各种元素（所有的样式）的设置写在<head></head>之间。
结构：

复制代码 
<html>
    <head>
        <title>页面标题</title>
        <style type="text/css">
            样式
        </style>
    </head>

    <body>
        <h1>内容</h1>
        <p>内容</p>
    </body>
</html>
复制代码

eg:

复制代码 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>嵌入式</title>
    <style type="text/css">
        h1{background-color: blue;color: #fff;text-align: center;}
        p{width: 500px;height: 100px;line-height: 100px;background-color: yellow;color: red;text-align: center;}
    </style>
  </head>
  
  <body>
    <h1>我要成为优秀的设计师</h1>
    <p>学习CSS功能很强大</p>
  </body>
</html>
复制代码

3)导入式：
<style type="text/css">
    　
    @import"mystyle.css";
　
</style>
独立样式文件里固定格式：
@charset "utf-8";

eg:

复制代码 
html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>导入式</title>
    <style type="text/css">
        @import"mystyle.css"
    </style>
  </head>
  
  <body>
    <h1>我要成为优秀的设计师</h1>
    <p>学习CSS功能很强大</p>
  </body>
</html>
复制代码 
css:
@CHARSET "UTF-8";
h1{background-color: blue;color: #fff;text-align: center;}
p{background-color: yellow;height: 100px;line-height: 100px;color: red;text-align: center;}

4)链接式
<link href="mystyle.css" rel="stylesheet" type="text/css" />
eg:

复制代码 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>链接式</title>
    <link href="mystyle1.css" rel="stylesheet" type="text/css"/>
  </head>
  
  <body>
    <h2>我要成为优秀的设计师</h2>
    <p>这是一个神奇的网站</p>
  </body>
</html>
复制代码

拓展
导入式与链接式的区别：
1）如果页面用的是导入式样式，那么在下载页面时，先看见HTML结构，再看见样式，如果网速慢，页面加载慢的话，那么用户第一眼看见的页面效果很不美观。
2）如果页面用的是链接式，能保证用户在打开页面时，能同时看见美化后的页面效果。
CSS层叠性：
1）行内样式>ID样式>类别样式>标记样式
2）如果给同一个标签定义相同的属性，在样式文件里，底下的文件会覆盖上面的文件

3.CSS的基本选择器
1）标记选择器
h1{属性：值;属性：值;属性：值;属性：值;}
h2{属性：值;属性：值;属性：值;属性：值;}
p{属性：值;属性：值;属性：值;属性：值;}
eg:

复制代码 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>嵌入式</title>
    <style type="text/css">
        h1{background-color: blue;color: #fff;text-align: center;}
        p{width: 500px;height: 100px;line-height: 100px;background-color: yellow;color: red;text-align: center;}
    </style>
  </head>
  
  <body>
    <h1>我要成为优秀的设计师</h1>
    <p>我要学习CSS</p>
  </body>
</html>
复制代码

2)类别选择器
.class{属性：值;属性：值;}
里面的class将来写成你定义选择器类别的名称（名称不能是中文，最好是英文单词或拼音）
结构：

复制代码 
<html>
    <head>
        <style type="text/css">
            .样式名｛属性：值；属性：值;｝
        </style>
    </head>

    <body>
        <p class="这里是样式名字，你随便起">这里是内容</p>
        <p class="这里是样式名字，你随便起">这里也是内容</p>

        <p class="这里是样式名字 这里也是名字">这里也是内容</p>
    </body>
</html>
复制代码

eg:

复制代码 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>类别选择器</title>
    <style type="text/css">
        .red{color: red;font-size: 25px;}
        .blue{color: blue;font-size: 35px;}
        .bg{background-color: #d8d8d8;}
    </style>
  </head>
  
  <body>
    <p class="red">我是红色的文字，我的字号是25像素</p>
    <p class="blue bg">我是蓝色的文字，我的字号是35像素</p>
    <p>我是第三行文字，我不要背景</p>
  </body>
</html>
复制代码

3)ID选择器（代表唯一）
结构：

复制代码 
<html>
    <head>
        <style type="text/css">
            #样式名｛属性：值；属性：值;｝
        </style>
    </head>

    <body>
        <p id="这里是样式名">这里是内容</p>
        <p id="这里是样式名">这里也是内容</p>

    </body>
</html>
复制代码

eg:

复制代码 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>ID选择器</title>
    <style type="text/css">
        #red25{color: red;font-size: 25px;}
        #green35{color: green;font-size: 35px;}
    </style>
  </head>
  
  <body>
    <p id="red25">这个标签很神奇</p>
    <p id="green35">我要完全掌握CSS的用法</p>
  </body>
</html>
复制代码

4.复合选择器
1）交集选择器
标记选择器（名称）.类别选择器（名称）{属性：值;}
例如：
p.one{}
p.two{}

.one{}
.two{}

<p class="one"></p>
<p class="two"></p>
<p class="three"></p>
<p class="four"></p>

eg:

复制代码 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>交集选择器</title>
    <style type="text/css">
        p{color: red;}
        .green{color:green}
        p.green{font-size: 40px;}
        h3.green{font-size: 50px;}
    </style>
  </head>
  
  <body>
    <p>我是第一个p标记</p>
    <p class="green">我是第二个p标记</p>
    <h2 class="green">我是标题</h2>
    <h3 class="green">我是第二个标题</h3>
  </body>
</html>
复制代码

2）并集选择器
类别选择器（名称）,标记选择器（名称）{属性：值;}
eg:

复制代码 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>并集选择器</title>
    <style type="text/css">
        p,h2,h3,h4,h5{color: green;font-size: 40px;}
    </style>
  </head>
  
  <body>
      <p>我是第一行</p>
      <p>我是第二行</p>
      <h2>我是h2标题</h2>
      <h3>我是h3标题</h3>
      <h4>我是h4标题</h4>
      <h5>我是h5标题</h5>
  </body>
</html>
复制代码

3）后代选择器
类别选择器（名称） 标记选择器（名称）{属性：值;}
eg:

复制代码 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>后代选择器</title>
    <style type="text/css">
        p,h2,h3{color: green;font-size: 40px;}
        p strong{color: red;}
        h2 strong,h3 strong{color:blue;}
    </style>
  </head>
  
  <body>
      <p><strong>我是</strong>第一行</p>
      <p><strong>我是</strong>第二行</p>
      <h2><strong>我是</strong>h2标题</h2>
      <h3><strong>我是</strong>h3标题</h3>
  </body>
</html>
复制代码

5.一个小例子：列表嵌套

复制代码 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>并集选择器</title>
    <style type="text/css">
        h2{font-size: 30px;color: blue;font-style: italic;}
        em{font-size: 40px;color: red;font-style: normal;font-family: "微软雅黑","黑体","宋体"}
        li li{font-size: 30px;color: green;font-family: "黑体";}
    </style>
  </head>
  
  <body>
      <em>优秀设计师</em>
      <h2>网页设计课程</h2>
      <p>欢迎大家学习网页设计课程</p>
      <ul>
          <li>在这里，你可以学习到：
              <ul>
                  <li>HTML</li>
                  <li>CSS
                      <ul>
                          <li>CSS初级</li>
                          <li>CSS中级</li>
                          <li>CSS高级</li>
                      </ul>
                  </li>
                  <li>Javascript</li>
              </ul>
          </li>
          <li>你还可以学习到：
              <ol>
                  <li>fireworks</li>
                  <li>flash</li>
                  <li>dreamweaver</li>
              </ol>
          </li>
      </ul>
      <p>如果您有任何问题及时提问</p>
  </body>
</html>
复制代码

拓展：
font-style:italic设置字体样式为斜体
font-style:normal;取消标签自带的样式效果
font-family:"微软雅黑","黑体","宋体";
text-indent:2em;让文字首行缩进2个汉字
6.超链接的样式
1）a:link        链接
a:visited     访问后
a:hover       鼠标经过
a:active      鼠标点击时
注：以上顺序不能替换
2）做企业站关于链接文字的状态常用以下几种：
1.链接文字默认没有下划线，鼠标经过有下划线，访问后没有下划线（普通企业站）
2.链接文字都没有下划线，可能默认链接时一种颜色，鼠标经过变一种颜色（普通企业站）
3.链接文字默认有下划线，鼠标经过有下划线并且可以变颜色（新闻站用的多）
注意：通常情况下，链接和访问后的状态是相同的
3）text-decoration用于控制链接文字要不要下划线
text-decoration:none;没有下划线
text-decoration:underline;有下划线
font-weight:normal; 让文字不加粗
font-weight:bold 加粗
eg:

复制代码 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>链接文字样式的设置</title>
    <style type="text/css">
        a:link,a:visited{font-size: 18px;color: red;text-decoration: none;}
        a:hover{color:green;}
        
        p.one a:link,p.one a:visited{font-size: 12px;color: #666;text-decoration: none;}
        p.one a:hover{text-decoration: underline;}
        
        p.two a:link,p.two a:visited{font-size: 12px;color: blue;text-decoration: none;}
        p.two a:hover{text-decoration: underline;}
    </style>
  </head>
  
  <body>
      <a href="#">公司简介</a>&nbsp;&nbsp;<a href="#">产品介绍</a>&nbsp;&nbsp;<a href="#">联系我们</a>
      <p class="one"><a href="#">点击查看更多精彩内容</a></p>
      <p class="two"><a href="#">更多</a></p>
  </body>
</html>
复制代码

7.margin:外边距
1）有四个：
margin-top顶部外边距
margin-right右侧外边距
margin-bottom底部外边距
margin-left左侧外边距
注意：书写顺序为上、右、下、左,顺序不能颠倒
2）简写
margin:20px;
上、右、下、左外边距都是20px;
margin:20px 30px 50px;
第一个值是顶部，第二个值是左和右，第三个值是底部
margin:20px 40px;
第一个值代表顶部和底部，第二个值代表左侧和右侧。
8.padding内边距
padding-top顶部内边距
padding-right右侧内边距
padding-bottom底部
padding-left左侧
注意：书写顺序为上、右、下、左,顺序不能颠倒
边距清零
body,h1,h2,h3,h4,h5,h6,p,ul,li,ol,dl,dt,dd{margin:0;padding:0;}
*{margin:0;padding:0;}
9.例子：百度搜索结果页面

复制代码 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>百度收索结果页</title>
    <style type="text/css">
        h2,p{margin: 0;padding: 0;}
        h2 a:link,h2 a:visited{font-size: 16px;color: blue;font-weight: normal;}
        p{font-size: 12px;width: 700px;line-height: 20px;}
        .green{color:green;margin-bottom: 25px;}
        p a:link,p a:visited{color: #666;margin-left: 6px;}
        span{color:red;}
    </style>
  </head>
  
  <body>
      <h2><a href="#">百度<span>旅游</span>_<span>旅游</span>攻略_<span>旅游</span>景点大全——让旅行更简单</a></h2>
      <p>百度<span>旅游</span>为你提供最详实的<span>旅游</span>资讯,<span>旅游</span>攻略指南,<span>旅游</span>景点大全,更有真实用户的<span>旅游</span>经历,游记攻略。百度<span>旅游</span>,让你的<span>旅游</span>更欢乐,旅行更简单。</p>
      <p class="green">lvyou.baidu.com/ 2013-12-28<a href="#">百度快照</a></p>
      
      <h2><a href="#">百度<span>旅游</span>_<span>旅游</span>攻略_<span>旅游</span>景点大全——让旅行更简单</a></h2>
      <p>百度<span>旅游</span>为你提供最详实的<span>旅游</span>资讯,<span>旅游</span>攻略指南,<span>旅游</span>景点大全,更有真实用户的<span>旅游</span>经历,游记攻略。百度<span>旅游</span>,让你的<span>旅游</span>更欢乐,旅行更简单。</p>
      <p class="green">lvyou.baidu.com/ 2013-12-28<a href="#">百度快照</a></p>
      
      <h2><a href="#">百度<span>旅游</span>_<span>旅游</span>攻略_<span>旅游</span>景点大全——让旅行更简单</a></h2>
      <p>百度<span>旅游</span>为你提供最详实的<span>旅游</span>资讯,<span>旅游</span>攻略指南,<span>旅游</span>景点大全,更有真实用户的<span>旅游</span>经历,游记攻略。百度<span>旅游</span>,让你的<span>旅游</span>更欢乐,旅行更简单。</p>
      <p class="green">lvyou.baidu.com/ 2013-12-28<a href="#">百度快照</a></p>
      
      <h2><a href="#">百度<span>旅游</span>_<span>旅游</span>攻略_<span>旅游</span>景点大全——让旅行更简单</a></h2>
      <p>百度<span>旅游</span>为你提供最详实的<span>旅游</span>资讯,<span>旅游</span>攻略指南,<span>旅游</span>景点大全,更有真实用户的<span>旅游</span>经历,游记攻略。百度<span>旅游</span>,让你的<span>旅游</span>更欢乐,旅行更简单。</p>
      <p class="green">lvyou.baidu.com/ 2013-12-28<a href="#">百度快照</a></p>
      
      <h2><a href="#">百度<span>旅游</span>_<span>旅游</span>攻略_<span>旅游</span>景点大全——让旅行更简单</a></h2>
      <p>百度<span>旅游</span>为你提供最详实的<span>旅游</span>资讯,<span>旅游</span>攻略指南,<span>旅游</span>景点大全,更有真实用户的<span>旅游</span>经历,游记攻略。百度<span>旅游</span>,让你的<span>旅游</span>更欢乐,旅行更简单。</p>
      <p class="green">lvyou.baidu.com/ 2013-12-28<a href="#">百度快照</a></p>
      
      <h2><a href="#">百度<span>旅游</span>_<span>旅游</span>攻略_<span>旅游</span>景点大全——让旅行更简单</a></h2>
      <p>百度<span>旅游</span>为你提供最详实的<span>旅游</span>资讯,<span>旅游</span>攻略指南,<span>旅游</span>景点大全,更有真实用户的<span>旅游</span>经历,游记攻略。百度<span>旅游</span>,让你的<span>旅游</span>更欢乐,旅行更简单。</p>
      <p class="green">lvyou.baidu.com/ 2013-12-28<a href="#">百度快照</a></p>
  </body>
</html>
复制代码

页面效果

10.全局声明

复制代码 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>并集选择器</title>
    <style type="text/css">
        *{font-size:40px;color: red;}
    </style>
  </head>
  
  <body>
      <p>我是第一行文字</p>
      <h2>我是第一行标题文字</h2>
      <h3>我是第二行标题文字</h3>
  </body>
</html>
复制代码

11.盒子模型
<div></div>
1）div属于一个大盒子，可以将h1至h6，p这些标签包进去，不能相反去做
例如：
<div>
    <h2></h2>
    <ul><li></li></ul>
    <p></p>
    <dl></dl>
</div>
2）边框属性：
border
类型border-style
颜色border-color
粗细border-width
边框属性的简写
border:1px solid #fc0;
3）DIV的一个技巧
如果想让一个DIV（大盒子）在浏览器里水平居中显示，那么给这个DIV加margin:0 auto;
4）当然DIV宽度是980px，边框是1px,那么这个div的总宽度是982px
如果我的DIV宽度就必须固定为980px，但是又加1px的边框，那么div宽度就应该写成978px
5）大盒子宽度
大盒子总宽度＝第一个盒子宽度＋间距（第一个到第二个之间的距离）＋第二个盒子宽度＋间距＋第三个盒子宽度＋左右的边框
大盒子总高度＝第一个盒子高度＋间距（第一个到第二个之间的距离）＋第二个盒子高度＋间距＋第三个盒子高度＋上下的边框
eg：

复制代码 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>盒子模型</title>
    <style type="text/css">
        div{width:980px;height: 200px;border: 1px solid #A5CDEE; text-align: center;line-height: 200px;margin: 0 auto;}
        .two{border: 1px solid red;}
    </style>
  </head>
  
  <body>
      <div>我是一个盒子，我是大banner</div>
      <p>我是一个段落</p>
      <div class="two">我是一个盒子，我是大banner</div>
  </body>
</html>
复制代码

eg：（以下盒子为360*310的，注意要减掉padding和border的值）

复制代码 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>盒子模型</title>
    <style type="text/css">
        div{width: 338px;height: 288px;border: 1px solid #ccc;padding-top: 20px;padding-left: 20px;}
    </style>
  </head>
  
  <body>
      <div>我是内容</div>
  </body>
</html>
复制代码

6）margin值的计算规则
1.如果两个对象在一行里，第一个对象加了右边距，第二个对象加了左边距，那么margin值等两个边距之和；
2.如果两个对象在两行，上面对象加了下边距，下面对象加了上边距，那么margin值取最大的那个值。
eg:

复制代码 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>定位原则</title>
    <style type="text/css">
        span{padding: 10px;}
        .left{background-color: yellow;margin-right: 30px;}
        .right{background-color: blue;margin-left: 40px;}
        div{border: 1px solid red; background-color: yellow; width: 300px; height: 150px;}
        .top{margin-bottom: 30px;}
        .bottom{margin-top: 50px;}
    </style>
  </head>
  
  <body>
      <span class="left">left</span>
      <span class="right">right</span>
      <p>这是一个段落</p>
      <p>这是一个段落</p>
      <div class="top">我是一个块元素</div>
      <div class="bottom">我也是一个块元素</div>
  </body>
</html>
复制代码

12.块级元素（block）和行内元素（inline）
1）块级元素（block）
<div>块级元素
2）行内元素（inline）
<span>行内元素
3）几个属性
display:blcok;显示为块（可以将行内元素转成块级元素）
display:inline;显示为行内（可以将块级元素转成行内元素）
display:inline-block;显示为行内块（可以将行内元素转成行内块，目的加宽和高）
eg：

复制代码 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>行内元素与块级元素之间的转换</title>
    <style type="text/css">
        span{background-color:yellow;display: inline-block;border: 1px solid red;width: 300px;height: 100px;}
        div{background-color: blue;border: 1px solid #000; color: #fff; display: inline;}
    </style>
  </head>
  
  <body>
      <span>我是一个行内元素</span>
      <span>我是一个行内元素</span>
      <span>我是一个行内元素</span>
      <div>我是一个块级元素</div>
      <div>我是一个块级元素</div>
      <div>我是一个块级元素</div>
  </body>
</html>
复制代码

13.background:url(图片路径) no-repeat left top
背景图片默认位置是当前左侧和顶部
如果想左侧并且居中left center
左侧并且底部left bottom
如果右侧且居中right center
no-repeat不平铺
repeat-x水平方向平铺
repeat-y垂直方向平铺
eg：时事新闻

复制代码 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>时事新闻</title>
    <style type="text/css">
        *{margin: 0;padding: 0;list-style: none;}
        .box{width: 358px;height: 308px;border: 1px solid #abbaca;}
        h1{width: 348px;height: 40px;line-height: 40px;background-color: #eef2f6;font-size: 16px;padding-left: 10px;}
        ul{width: 328px;height: 238;padding: 15px;}
        li{padding-left: 10px;font-size: 14px;background:url(dot.jpg) no-repeat left center;line-height: 29px;}
        li a:link, li a:visited{color: #004276;text-decoration: none;}
        li a:hover{color: #c00;text-decoration: underline;}
    </style>
  </head>
  
  <body>
      <div class="box">
          <h1>时事新闻</h1>
          <ul>
              <li><a href="#">中国青年旅行网</a></li>
              <li><a href="#">旅行社出境游,国内游,自助旅游</a></li>
              <li><a href="#">中国青年旅行网</a></li>
              <li><a href="#">旅行社出境游,国内游,自助旅游</a></li>
              <li><a href="#">中国青年旅行网</a></li>
              <li><a href="#">旅行社出境游,国内游,自助旅游</a></li>
              <li><a href="#">中国青年旅行网</a></li>
              <li><a href="#">旅行社出境游,国内游,自助旅游</a></li>
          </ul>
      </div>
  </body>
</html>
复制代码

页面效果

14.盒子浮动
float:left 左浮动
float:right 右浮动
清除浮动 clear:both

eg:

复制代码 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>盒子浮动</title>
    <style type="text/css">
        .father{padding: 30px;border: 1px solid #000;background-color: yellow;}
        .father div{padding: 10px;border: 1px solid #000;background-color: #ccc;}
        .son1{float:left;margin-right: 10px;}
        .son2{float:left;margin-right: 10px;}
        .son3{float:left;}
        p{margin:0;padding:0;border:1px solid #000; background-color: #fc0;clear: both;}
    </style>
  </head>
  
  <body>
      <div class="father">
          <div class="son1">son1</div>
          <div class="son2">son2</div>
          <div class="son3">son3</div>
          <p>这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落</p>
      </div>
  </body>
</html>
复制代码

15.相对定位

复制代码 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>相对定位</title>
    <style type="text/css">
        .father{border: 1px solid #000;background-color: yellow;padding: 30px;}
        .son{border: 1px solid red; padding: 10px;background-color: #ccc;position: relative;top:50px;left: 50px;}
    </style>
  </head>
  <body>
      <div class="father">
          <div class="son">我是一个小盒子</div>
      </div>
  </body>
</html>
复制代码

16.绝对定位

复制代码 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>绝对定位</title>
    <style type="text/css">
        .father{border:1px solid #000;background-color: yellow;padding: 30px;}
        .son{border: 1px solid red;padding: 10px;background-color: #ccc;position: absolute;right: 500px;top: 300px;}
    </style>
  </head>
  
  <body>
      <div class="father">
          <div class="son">我是一个小盒子</div>
      </div>
  </body>
</html>
复制代码

17.相对加绝对定位

复制代码 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>相对定位加绝对定位</title>
    <style type="text/css">
        .father{width: 500px;height: 300px;border: 1px solid #000;background-color: yellow;position: relative;}
        .son1{width: 80px;height: 30px;border: 1px solid red;line-height: 30px;text-align: center;background-color: #ccc;position: absolute;right: 20px;bottom: 20px;}
        .son2{width: 80px;height: 30px;border: 1px solid red;line-height: 30px;text-align: center;background-color: #ccc;position: absolute;left: 20px;top: 20px;}
    </style>
  </head>
  
  <body>
      <div class="father">
          <div class="son1"><a href="#">更多..</a></div>
        <div class="son2"><a href="#">更多..</a></div>
      </div>
  </body>
</html>
复制代码

页面效果

18.兼容IE6的方法：
_属性：值
19.cursor: pointer;   让光标变手形
20.overflow: hidden; 溢出隐藏
1)如果一个列表li，宽度300PX，高度是30px，加的内容超出这个范围会显示在li的外面，如果你希望超出的部分隐藏，那么加 overflow: hidden; 
2)如果一个块里的内容不确定高度的时候，那么这个块不能指定固定的高，此时加overflow: hidden;(可以让块的高度自适应)
3)dl {width:300px;overflow: hidden;}


807882666
关注
CSS布局知识汇总
Cindy_Huang的博客
08-07 509
CSS布局知识汇总：                CSS布局是前端开发的基础，以下是对布局知识的系统学习和汇总。 1. 正常文档流（Normal Flow）                在正常的文档流中，写作模式是水平方向，正常流会垂直地一个接一个排列页面的块级元素；若写作模式是垂直方向，正常流会将块级元素水平排列。 正常文档流的用处 在定义的CSS加载失败，或者是浏览器不支持...
CSS布局--超详解版
qq_44906900的博客
10-12 540
CSS布局 目录 布局分类 布局思路 布局需要用到哪些属性 float布局 flex布局 grid布局（二维 平均布局 一、布局分类 固定宽度布局：一般宽度设置为960、1000、1024px 不固定宽度布局：依靠文档流的原理来布局 响应式布局：PC上一种布局样式，手机上又是另外一种布局样式 二、布局思路 从大到小(老手推荐) 先定下大局 完善每个部分的小布局 从小到大(新人推荐) 先完成小布局 组合成大布局 三、布局需要使用那些属性 一图流 四、float布局
CSS页面布局（超详解）
热门推荐
m0_52896041的博客
12-02 2万+
浮动的框可以向左或向右移动，直到其外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档普通流中，所以文档普通流中的块元素表现得就像浮动框不存在一样。HTML文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用的空间，这个模型称为盒子模型。
css各种布局详解
跟派大星学编程
03-03 623
文章目录0. 常用CSS1. 居中布局1.1 水平居中1.1.1 line-block + text-align1.1.2 block + margin1.1.3 absolute + transform1.2 垂直居中1.2.1 table-cell + vertical-align1.2.2 absolute + transform1.3 居中布局1.3.1 table + margin1...
CSS基础（二）——布局详解
mlh110的博客
12-18 481
CSS布局详解目录CSS布局详解 目录 Display属性 示例 visibility属性 position属性 float属性 overflow属性 z-index属性Display属性 block 使元素显示为块元素，即占用了全部宽度，在前后都是换行符。 inline 使元素显示为内联元素，内联元素只需要必要的宽度，不强制换行。 none 隐藏元素，元素不占用空间，
html+css基础总结（思维导图）
02-20
HTML和CSS基础知识点总结（xmind编辑的思维导图）
CSS基础入门总结（很详细的哟）
10-25
（1）基础选择器 （i）标签选择器 （ii）类选择器 （iii）id选择器 （iv）通配符选择器 （2）复合选择器 （i）后代选择器 （ii）子代选择器 （iii）并集选择器 （iv）伪类选择器 三、CSS字体属性 （1）字体大小 （2...
HTML+CSS基础总结与特性解析
CSS则用于布局和美化，如设置元素的边距、浮动等，使网页具有更好的视觉效果。" HTML是一种标记语言，其主要功能是定义网页的结构和内容。HTML文本由一系列的HTML命令组成，这些命令描述了页面上的各种元素，例如...
css 基础知识总结以及demo
04-09
标签引用CSS文件 在实际的项目开发过程中，我们一般都是将CSS单独存放在一个文件夹中，然后在HTML页面中通过如下形式进行引用。 样式表路径+名称.css"> 引用后CSS文件仍然是独立的，不会受到包括HTML和JavaScript...
最全CSS各种布局详解
u011555996的博客
12-13 1369
一、单列布局的实现 1、单列布局中最常用的水平居中的四种方法 同时设置父元素和子元素的样式：父元素使用text-align实现，子元素使用inline-block。这里宽高背景只是为了展示。 .parent{ text-align: center; } .child{ display: inline-block; width: 10...
CSS——布局
最新发布
Fan_web的博客
08-09 1742
本文详细介绍了CSS中的布局，包括文档流、盒子模型和大小、浏览器的默认样式介绍以及补充一些轮廓和圆角的一些知识点。
详解DIV+CSS布局，position：absolute布局
i_wolfer的博客
07-11 3765
DIV+CSS布局   DIV+CSS布局是非常经典的，同时也是对初学者很有用的。看起来布局很简单，但是对于初学者来说，在布局过程中会遇见很多问题。现在将讲解用DIV+CSS布局下面的内容 这里用div填充满了每一个板块。对于途中黑色边框   {border：1px solid black；}要特别说明，由于边框也占用了1个像素，所以在整体布局的时候要减去边框的像素，不然布局会溢出，导致混
CSS布局总结
pan303121的博客
11-23 428
css的布局主要分为三种布局：盒子布局，浮动布局，定位布局。 1.盒子布局 如图所示，我们需要将整个css视为一个大的盒子，其中每一个元素当作盒子的一个个组成成分。 其中每一个元素之间的分界线我们一般是使用border属性来展现。 border 简写属性在一个声明设置所有的边框属性。 border-width 规定边框的宽度。参阅：border-width中可能的值。 border-style 规定边框的样式。参阅：border-style中可能的值。 border...
【css】最全布局总结
qq_45406325的博客
08-13 9222
布局就是控制元素位置、大小，常见布局有 标准流布局、弹性布局、表格布局、流体布局、网格布局、混合布局、定位布局、浮动布局等，我会从文档流，容器，效果这些角度介绍
CSS学习总结（六）：CSS属性书写顺序（重点）、学成在线页面制作
weixin_62764364的博客
12-04 1145
因为里面三个盒子都要垂直居中，我们利用 继承性，给 最大的盒子 一个垂直居中的代码就好了，还记得 那些 样式可以继承吗？复习点：我们用到清除浮动，因为 box-hd 里面的盒子个数不一定是多少，所以我们就不给高度了，但是里面的盒子浮动会影响下面的布局，因此需要清除浮动。2号子盒子是 上部分 我们命名为 course-hd (hd 是 head 的简写 头部的意思，我们经常用)3号子盒子是 下部分 我们命名为 course-bd (bd 是 body 的简写 主体的意思，我们经常用)
CSS基础（四）——浮动布局
pro1822的博客
03-27 8077
CSS基础（四）——浮动布局
通用CSS样式
痞子51998
05-02 746
通用样式01 [html] view plain copy @charset "utf-8";   /* ------------------------------------全局定义---------------------------------------- */   /* 将具有默认margin和padding的标记置零，所有标记的
HTML学习笔记
weixin_33813128的博客
02-07 93
时间：2016-10-23 17:25 ——常用标签 字体标签： <font> </font> size：范围1 ~ 7，当超出最大值，默认为7。 color：两种表示方式，1、英文单词 red green black等，2、十六进制表示方法，第一位为#，每两位表示一个颜色。 标题标签： h1...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值