Learn CSS

韩顺平老师的CSS讲的还是很简单的，仅作入门。

div+css的介绍

div+css是什么。

div元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。

css是英语Cascading Style Sheets(层叠样式(大小/颜色/背景/位置)表单)的缩写，它是一种用来表现HTML或XML等文件样式的计算机语言。

div+css是网站标准(或称“WEB标准”)中常用术语之一，通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现和定位。

我们可以简单的这样理解div+css:

div是用于存放内容(文字、图片、元素)的容器。

css是用于指定放在div中的内容如何显示，包括这些内容的位置和外观。

div+css的优势

符合W3C标准。微软等公司均为W3C支持者。
搜索引擎更加友好。
样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。现在YAHOO、MSN等国际门户网站，网易、新浪等国内门户网站，和主流的WEB2.0网站，均div+css的框架模式，更加印证了div+css的大势所趋。
css的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码。
表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。

DOCTYPE：文档类型，用于指定使用哪个DTD(说明当前这个html文件遵循什么版本)。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

该DTD包含所有HTML元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。必须以格式正确的 XML 来编写标记。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

该DTD包含所有HTML元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。

<meta http-equiv="keywords" content="dell笔记本,怪味鸭,keywords">  这个keywords是给搜索引擎看到

css的滤镜体验

这个老师也是一笔带过，讲的很肤浅。就只是举了一个例子而已，如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        /* 使用滤镜 */
        a:link img {
            filter: gray;
        }
        a:hover img {
            filter: "";
        }
    </style>
</head>
<body>
    <a href="#"><img src="小丑.jpg" width="200px" /></a>
    <a href="#"><img src="小丑 (2).jpg" width="200px" /></a>
    <a href="#"><img src="小丑 (3).jpg" width="200px" /></a>
</body>
</html>

关于css的几种选择器，我已经在妙味课堂——HTML+CSS(第二课)中详述过，在此不赘述。

关于css中的块元素和行内元素，我已经在妙味课堂——HTML+CSS(第三课)中详述过，在此不赘述。

css核心内容--流

标准流：在网页布局中，写在前面的元素出现在前面，写在后面的元素出现在后面。这是默认的布局方式，也称为标准流。

非标准流：当某个元素(标签)脱离了标准流[比如因为相对定位]排列，我们统称为非标准排列。在实际网页布局中，我们可能需要使用非标准流的方式来布局(让某个元素脱离它原先应该在的位置)

关于css中的盒子模型，可以参考我的HTML CSS——margin与padding的初学，在此有一点需要注意：如果不希望破坏整个外观，则尽量使用marging布局，而不使用padding布局，padding会改变盒子的大小(相当于这个盒子有弹性)。如果marging过大，会把盒子的内容挤到盒子外面去，但盒子本身无变化。

现在来看一个盒子模型综合案例：

源码：

box.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="box.css">
</head>
<body>
    <div class="div1">
        <ul class="faceul">
            <li><img src="touxiang.jpg" /><a href="#">小龙女</a></li>
            <li><img src="touxiang.jpg" /></li>
            <li><img src="touxiang.jpg" /></li>
            <li><img src="touxiang.jpg" /></li>
            <li><img src="touxiang.jpg" /></li>
            <li><img src="touxiang.jpg" /></li>
            <li><img src="touxiang.jpg" /></li>
            <li><img src="touxiang.jpg" /></li>
            <li><img src="touxiang.jpg" /></li>
            <li><img src="touxiang.jpg" /></li>
            <li><img src="touxiang.jpg" /></li>
            <li><img src="touxiang.jpg" /></li>
            <li><img src="touxiang.jpg" /></li>
            <li><img src="touxiang.jpg" /></li>
            <li><img src="touxiang.jpg" /></li>
            <li><img src="touxiang.jpg" /></li>
        </ul>
    </div>
</body>
</html>

box.css：

body {
    margin: 0;
    padding: 0;
}
/* div1 用于控制显示的位置 */
.div1 {
    width: 500px;
    height: 300px;
    border: 1px solid #b4b4b4;
    margin-left: 100px;
    margin-top: 20px;
}
/* faceul用于控制显示图片区域的宽度和高度 */
.faceul {
    width: 350px;
    height: 250px;
    border: 1px solid red;
    padding: 0;
    margin-left: 5px;
}
/* 这个用于控制单个图片区域的大小 */
.faceul li {
    width: 50px;
    height: 66px;
    border: 1px solid blue;
    list-style-type: none;
    float: left;
    margin-left: 5px;
    margin-top: 5px;
}
.faceul img {
    width: 40px;
    margin-left: 5px;
    margin-top: 5px;
}
.faceul a {
    font-size: 12px;
    margin-top: 0px;
    margin-left: 5px;
}
a:link {
    text-decoration: none;
    color: black;
}
a:hover {
    text-decoration: underline;
    color: blue;
}

运行效果图：

练习：设计一个如下小网页：

源代码：

youku.html：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="./优酷.css">
</head>
<body>
    <div class="div1">
        <div>
            <span class="span1"><font class="font1">优酷牛人</font><a href="#">更多牛人</a></span>
            <ul class="faceul">
                <li><img src="./image/11.jpg" /><br/><a href="#">张三</a></li>
                <li><img src="./image/12.jpg" /><br/><a href="#">李四</a></li>
                <li><img src="./image/13.jpg" /><br/><a href="#">王五</a></li>
            </ul>
        </div>
        <div>
            <span class="span1"><font class="font1">优酷牛人</font><a href="#">更多牛人</a></span>
            <ul class="faceul">
                <li><img src="./image/11.jpg" /><br/><a href="#">张三</a></li>
                <li><img src="./image/12.jpg" /><br/><a href="#">李四</a></li>
                <li><img src="./image/13.jpg" /><br/><a href="#">王五</a></li>
            </ul>
        </div>
        <div>
            <span class="span1"><font class="font1">优酷牛人</font><a href="#">更多牛人</a></span>
            <ul class="faceul">
                <li><img src="./image/11.jpg" /><br/><a href="#">张三</a></li>
                <li><img src="./image/12.jpg" /><br/><a href="#">李四</a></li>
                <li><img src="./image/13.jpg" /><br/><a href="#">王五</a></li>
            </ul>
        </div>
    </div>
</body>
</html>

youku.css：

body {
    margin: 0 auto;
    width: 1000px;/*一般为1000px*/
    height: 1000px;
    border: 1px solid blue;
    font-size: 12px;
}
.div1 {
    width: 330px;
    height: 380px;
    /*border: 1px solid gray;*/
}

/* 定义几个常用的字体样式 */
.font1 {
    margin: 8px 0px 0px 2px;/*为何设置margin-top不为零，仍然显示为0? 答：内嵌不支持上下的margin和padding*/
    /*margin-top: 5px;*/
    font-weight: bold;
    font-size: 20px;
    font-family: 华文新魏;
}

.span1 {
    /*background-color: pink;*/ /*背景颜色是作调试用的*/
    display: block;
    /*margin-top: 5px;*/
    /*margin-top: 5px; 将<span>行内元素转换为块级元素，
    如果要设置其内部的<font>元素margin-top: 5px，则只能在块级元素设置，
    对<font>元素单独设置不起作用*/
}

.span1 a {
    margin-top: 10px;/*为何设置其内部的<a>元素margin-top: 4px会显示成功呢? 答：浮动支持上下的margin和padding*/
    float: right;
}

.faceul {
    width: 350px;
    height: 65px;
    /*background-color: silver;*/
    list-style-type: none;
    padding: 0px;
}
.faceul li {
    float: left;
    width: 100px;
    height: 90px;
    /*background-color: pink;*/
    margin-left: 6px;
    text-align: center;/*text-align表示放在该元素的其他元素会左右居中*/
}
.faceul img {
    margin-top: 2px;
    /*将图片宽高定死*/
    width: 60px;
    height: 60px;
    padding-bottom: 2px;
}
/* 定义几种超链接的样式 */
a:link {
    text-decoration: none;
}

注意：

内嵌不支持上下的margin和padding
浮动支持上下的margin和padding

关于css中的浮动，我已经在妙味课堂——HTML+CSS(第四课)(一)详述过，在此不赘述。

css核心内容--定位

css定位(Positioning)属性允许你对元素进行定位。position属性值：

static(静态定位，默认值)：元素框正常生成。块级元素生成一个矩形框，作为文档流/标准流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。特别注意：对static而言，left和top属性是不生效的。

relative(相对定位)：元素框偏移某个距离(left和top)。元素仍保持其未定位前的形状(它原先的高和宽保持不变)，它原本所占的空间仍保留(只是空出来了)。从这一角度看，好像该元素仍然在文档流/标准流中一样。特别注意：relative的参照点是它原来的位置，然后进行移动。

absolute(绝对定位)：元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。(通俗点说：元素从原来的位置脱离，并让出自己的空间，后面的元素就会占有让出的空间)。

fixed(固定定位，基本不使用)：元素框的表现类似于将position设置为absolute，不过其包含块是视窗本身。(即以body的左上角定位)。

例，相对定位。

html文件：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="./相对定位.css">
</head>
<body>
    <div class="s1">内容1</div>
    <div id="special" class="s1">内容2</div>
    <div class="s1">内容3</div>
    <div class="s1">内容4</div>
</body>
</html>

css文件：

.s1 {
    width: 100px;
    height: 60px;
    background-color: gray;
    float: left;
    margin-left: 10px;
}
#special {
    position: relative;/* 这里我们使用相对定位 */
    left: 40px;/*相对原来的位置，向右移动大小(如果希望向左移动，则值就是负数)*/
    top: 100px;/*相对原来的位置，向下移动大小(如果希望向上移动，则值就是负数)*/
}

运行效果图：

例，绝对定位(一)。

html文件不变，css文件如下：

此时的参照点是body的左上角。

.s1 {
    width: 100px;
    height: 60px;
    background-color: gray;
    float: left;
    margin-left: 10px;
}
#special {
    position: absolute;/* 绝对定位 */
    left: 40px;
    top: 100px;
}

例，绝对定位(二)。

html文件：

此时的参照点是内容为abc的<div>块的左上角。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="./相对定位.css">
</head>
<body>
    <div class="s1">内容1</div>
    <div class="s1">内容3</div>
    <div class="s1">内容4</div>
    <div class="s2">abc<div id="special" class="s1">内容2</div></div>
</body>
</html>

css文件：

.s1 {
    width: 100px;
    height: 60px;
    background-color: gray;
    float: left;
    margin-left: 10px;
}
#special {
    position: absolute;/* 绝对定位 */
    left: 40px;
    top: 100px;
}
.s2 {
    position: relative;
    left: 200px;
    top: 200px;
    width: 300px;
    height: 100px;
    background-color: green;
    float: left;
}

特别说明：absolute定位是对自己最近的那个非标准流盒子而言的。

练习：仿sohu首页布局。

sohu.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>搜狐</title>
    <link rel="stylesheet" type="text/css" href="sohu.css">
</head>
<body>
    <!-- 最top的div -->
    <div class="top">
        <div class="login">登录部分</div>
        <div class="indexpage">设为首页</div>
        <div class="myherf">链接</div>
    </div>
    <!-- logo div -->
    <div class="logo"><img src="image/sohu.jpg" /></div>
    <div class="navi">导航栏</div>
    <!-- 广告部分 -->
    <div class="ad">
        <div class="stuad">招生广告</div>
        <div class="ad2">广告2</div>
        <div class="housead">房地产广告</div>
        <div class="picad">
            <table height="100%" align="center" valign="middle">
                <tr><td><img src="image/guanggao.jpg" /></td></tr>
            </table>
        </div>
    </div>
</body>
</html>

sohu.css：

body {
    width: 950px;
    /* 高度定不下来，就暂时不写 */
    /*height: 800px;*/
    margin: 0 auto;
    font-size: 12px;
}
.top {
    width: 950px;
    height: 22px;
    /*background: pink;*/
}
/* 登录部分 */
.login {
    width: 416px;
    height: 22px;
    background: green;
    float: left;
}
/* 设为首页面 */
.indexpage {
    width: 105px;
    height: 20px;
    background: gray;
    float: left;
    margin-left: 80px;
}
/* 超链接 */
.myherf {
    width: 250px;
    height: 20px;
    float: right;
    background: #b4b4b4;
}
/* logo */
.logo {
    width: 137px;
    height: 68px;
    background: yellow;
    float: left;
    margin-top: 5px;
}
.logo img {
    width: 137px;
    height: 68px;
}
/* 导航 */
.navi {
    width: 807px;
    height: 68px;
    float: left;
    margin-left: 6px;
    background: #7cf574;
    margin-top: 5px;
}
/* 广告 */
.ad {
    width: 950px;
    height: 212px;
    margin-top: 5px;
    float: left;
    border: 1px solid silver;
}
/* 学生广告 */
.stuad {
    width: 126px;
    height: 196px;
    background: #fc7e8c;
    float: left;
    margin: 5px 0 0 4px;
}
/* 广告2 */
.ad2 {
    width: 453px;
    height: 196px;
    margin: 5px 0 0 14px;
    background: #fc7e8c;
    float: left;
}
/* 房地产广告 */
.housead {
    height: 196px;
    width: 150px;
    background: #7cf574;
    margin: 5px 0 0 12px;
    float: left;
}
/* 图片广告 */
.picad {
    height: 212px;
    width: 180px;
    float: right;
    border-left: 1px solid silver;
    text-align: center;
}

运行效果图：

posted @ 2016-04-08 08:53 叶十一少阅读(308) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

叶十一少

Learn CSS

公告