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:;

    padding:;

}

/* 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:;

    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;

}

运行效果图：

Learn CSS

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

Learn CSS

源代码：

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;/*相对原来的位置，向下移动大小(如果希望向上移动，则值就是负数)*/

}

运行效果图：

Learn CSS

例，绝对定位(一)。

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

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

.s1 {

    width: 100px;

    height: 60px;

    background-color: gray;

    float: left;

    margin-left: 10px;

}

#special {

    position: absolute;/* 绝对定位 */

    left: 40px;

    top: 100px;

}

Learn CSS

例，绝对定位(二)。

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;

}

Learn CSS

特别说明：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="data: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="data: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;

}

运行效果图：

Learn CSS

Learn CSS的更多相关文章

界面设计技法之css布局
css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...
十步图解CSS的position
CSS的positon,我想做为一个Web制作者来说都有碰到过,但至于对其是否真正的了解呢?那我就不也说了,至少我自己并不非常的了解其内核的运行.今天在Learn CSS Positioning in ...
CSS定位属性Position详解
CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...
百度前端技术学院Html&amp&semi;CSS学习资源
Web相关名词通俗解释 https://www.zhihu.com/question/22689579 MDN HTML入门 https://developer.mozilla.org/zh-CN/d ...
HTML 引用Css样式的四种方式
不才,只知道HTML引用CSS样式有四种方式,内部引用和外部引用各两种,因为老是忘记细节,记下了随时翻阅亦可方便如我般的初学者内部引用方式1: 直接在标签内用 style 引用,如: <div ...
百度前端技术学院—-小薇学院(HTML+CSS课程任务)
任务一:零基础HTML编码课程概述作业提交截止时间:04-24 重要说明百度前端技术学院的课程任务是由百度前端工程师专为对前端不同掌握程度的同学设计.我们尽力保证课程内容的质量以及学习难度的合理 ...
CSS Box Model 盒子模型
1. 介绍 1.1 什么是 Box Model 在HTML中的每个element(元素)都可以看作一个矩形的盒子,矩形从内到外依次由元素的内容(content).内边距(padding).边框(bor ...
CSS Core Technology
1. Selector Different types of selectors: Selectors can be divided into the following categories: Si ...
css控制继承
inherit:继承父类. initial:继承浏览器. unset:重置为自然值,继承父类或者浏览器. revert:恢复原来的值. 详解: CSS为处理继承提供了四种特殊的通用属性值: inher ...

随机推荐

oracle方案是什么？
某用户拥有的所有的数据库对象的逻辑集合,就叫方案:方案在名称上和用户名是相同的. 比如有一个Oracle"用户"叫scott,那么一般称Scott用户所拥有的所有数据库对象的集合叫 ...
UITableView和UICollectionView的方法学习一
参考资料 UITableView UICollectionView UICollectionViewDataSource UICollectionViewDelegate UICollectionVi ...
Dialog类介绍
Dialog类实现为一个简单的漂浮窗口,完全在Activity中创建.使用基本的Dialog类,你可以创建一个新的实例并设定标题和布局,如下所示: Dialog d = new Dialog(MyAc ...
caption，为表格增加标题和摘要
格式: <table summary="***"> <caption>***</caption> <tr> </tr> ...
关于在linux下清屏的几种技巧
在windows的DOS操作界面里面,清屏的命令是cls,那么在linux 里面的清屏命令是什么呢?下面笔者分享几种在linux下用过的清屏方法. 1.clear命令.这个命令将会刷新屏幕,本质上只是 ...
android开发者博客二月Android Studio2&period;0测试
参考网页-http://android-developers.blogspot.com/2016/02/android-studio-20-beta.html Android Studio 2.0-B ...
table表格cellspacing与cellpadding属性
cellspacing属性用来指定表格各单元格之间的空隙. cellpadding属性用来指定单元格内容与单元格边界之间的空白距离的大小. 此属性的参数值也是数字,表示单元格内容与上下边界之间空白 ...
perl5 第八章子程序
第八章子程序 by flamephoenix 一.定义二.调用 1.用&调用 2.先定义后调用 3.前向引用 4.用do调用三.返回值四.局部变量五.子程序参数传递 1.形式 2 ...
与众不同 windows phone (12) - Background Task（后台任务）之 PeriodicTask（周期任务）和 ResourceIntensiveTask（资源密集型任务）
原文:与众不同 windows phone (12) - Background Task(后台任务)之 PeriodicTask(周期任务)和 ResourceIntensiveTask(资源密集型任 ...
强大的jquery-制作选项卡
最近在学习jquery,特地把今天写的一个选项卡源码贴出来.只是做只是梳理,大神们请不要吐槽,如果有更好的方法,欢迎指点.谢谢. css <style> #tab div{ width:2 ...