首页 > > 网页制作 > css >

前端技术之_CSS详解第一天

2018-06-24 02:23:15来源：未知 阅读 ()

新老客户大回馈,云服务器低至5折

前端技术之_CSS详解第一天

一html部分

 

略。。。。

二、列表

列表有3种

2.1 无序列表

无序列表，用来表示一个列表的语义，并且每个项目和每个项目之间，是不分先后的。

ul就是英语unordered list，“无序列表”的意思。

li 就是英语list item ， “列表项”的意思。

你会发现，这是我们学习的第一个“组标签”，就是要么不写，要么就要写一组。

    <ul><li>北京</li><li>上海</li><li>广州</li><li>铁岭</li>
    </ul>

也就是说，所以的li不能单独存在，必须包裹在ul里面；反过来说，ul的“儿子”不能是别的东西，只能有li。

下面的是错误的，因为必须用ul包裹：

<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>铁岭</li>

下面的也是错误的，因为ul里面只能有li标签，而不能有别的：

<ul>
　　<h3>中国主要城市</h3>
　　<li>北京</li>
　　<li>上海</li>
　　<li>广州</li>
　　<li>铁岭</li>
</ul>

 

浏览器会默认的给无序列表小圆点的“先导符号”

但是，我们这里再次强调，ul的作用，并不是给文字增加小圆点的，而是增加无序列表的“语义”的。

ul标签实际应用场景：

导航条：

ul的儿子，只能是li。但是li是一个容器级标签，li里面什么都能放，比如：

甚至于可以再放一个ul：

1<ul>
2        <li>
3            吃的
18            <ul>
19                <li>饼干</li>
20                <li>面包</li>
21                <li>
22                    巧克力
23                    <ul>
24                        <li>德芙</li>
25                        <li>费列罗</li>
26                    </ul>
27                </li>
28            </ul>
4        </li>
5        <li>
6            用的
7            <ul>
8                <li>笔记本</li>
9                <li>圆珠笔</li>
10            </ul>
11        </li>
12        <li>
13            喝的
14            <ul>
15                <li>牛奶</li>
16                <li>可乐</li>
17            </ul>
18        </li>
    </ul>

2.2 有序列表

ordered list  有序列表，用ol表示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>
    <h4>中国歌曲排行榜</h4>
    <ol>
        <li>小苹果</li>
        <li>月亮之上</li>
        <li>最炫民族风</li>
    </ol>
</body>
</html>

也就是说，ol和ul就是语义不一样，怎么使用都是一样的。

ol里面只能有li，li必须被ol包裹。li是容器级。

ol这个东西用的不多，如果想表达顺序，大家一般也用ul：

<ul>
    <li>1. 小苹果</li>
    <li>2. 月亮之上</li>
    <li>3. 最炫民族风</li>
</ul>

2.3定义列表

定义列表也是一个组标签，不过比较复杂，出现了三个标签：

dl表示definition list 定义列表

dt表示definition title 定义标题

dd表示definition description 定义表述词儿

dt、dd只能在dl里面；dl里面只能有dt、dd

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>
    <h3>中国主要城市</h3>
    <dl>
        <dt>北京</dt>
        <dd>国家首都，政治文化中心</dd>
        <dd>污染很严重，PM2.0天天报表</dd>
    </dl>

    <dl>
        <dt>上海</dt>
        <dd>魔都，有外滩、东方明珠塔、黄浦江</dd>
    </dl>

    <dl>
        <dt>广州</dt>
        <dd>中国南大门，有珠江、小蛮腰</dd>
    </dl>
</body>
</html>

 

表达的语义是两层：

1) 是一个列表，列出了北京、上海、广州三个项目

2）每一个词儿都有自己的描述项。

dd是描述dt的。

dt、dd都是容器级标签，想放什么都可以。所以，现在就应该更加清晰的知道：

用什么标签，不是根据样子来决定，而是语义。

三、div和span

div和span是非常重要的标签，div的语义是division“分割”； span的语义就是span“范围、跨度”。

这两个东西，都是最最重要的“盒子”。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>
    <div>
        <h3>中国主要城市</h3>
        <ul>
            <li>北京</li>
            <li>上海</li>
            <li>广州</li>
        </ul>
    </div>

    <div>
        <h3>美国主要城市</h3>
        <ul>
            <li>纽约</li>
            <li>洛杉矶</li>
            <li>华盛顿</li>
            <li>西雅图</li>
        </ul>
    </div>
</body>
</html>

div在浏览器中，默认是不会增加任何的效果改变的，但是语义变了，div中的所有元素是一个小区域。

div标签是一个容器级标签，里面什么都能放，甚至可以放div自己

span也是表达“小区域、小跨度”的标签，但是是一个“文本级”的标签。

就是说，span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。

span里面是放置小元素的，div里面放置大东西的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        span{
            background-color: pink;
        }
    </style>
</head>
<body>
    <h3>书</h3>
    <ul>
        <li>
            <p>书名</p>
            <p>
                简介简介简介简介简介简介简介简介
                <span>
                    <a href="">详细信息</a>
                    <a href="">购买</a>
                </span>
            </p>
        </li>
        <li>
            <p>书名</p>
            <p>
                简介简介简介简介简介简介简介简介
                <span>
                    <a href="">详细信息</a>
                    <a href="">购买</a>
                </span>
            </p>
        </li>
        <li>
            <p>书名</p>
            <p>
                简介简介简介简介简介简介简介简介
                <span>
                    <a href="">详细信息</a>
                    <a href="">购买</a>
                </span>
            </p>
        </li>
    </ul>
</body>
</html>

div标签是最最重要的布局标签

1    <div class="header">
2        <div class="logo"></div>
3        <div class="nav"></div>
4    </div>
5    <div class="content">
6        <div class="guanggao"></div>
7        <div class="dongxi"></div>
8    </div>
    <div class="footer"></div>

所以，我们亲切的称呼这种模式叫做“div+css”。div标签负责布局，负责结构，负责分块。css负责样式。

案例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        .header{
            width: 980px;
            height:100px;
            margin: 0 auto;
 
            margin-bottom: 10px;
        }
        .content{
            width: 980px;
            height: 400px;
 
            margin: 0 auto;
            margin-bottom: 10px;
        }
        .footer{
            width: 980px;
            height:100px;
            margin: 0 auto;
            background-color: yellow;
            margin-bottom: 10px;
        }
        .logo{
            float: left;
            width: 200px;
            height: 60px;
            background-color: red;
        }
        .nav{
            float: right;
            width: 600px;
            height: 60px;
            background-color: blue;
        }
        .guanggao{
            float: left;
            width: 250px;
            height: 400px;
            background-color: darkblue;
        }
        .dongxi{
            float: right;
            width: 690px;
            height: 400px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="logo">这就是logo</div>
        <div class="nav">导航条</div>
    </div>
    <div class="content">
        <div class="guanggao">广告</div>
        <div class="dongxi">卖的东西</div>
    </div>
    <div class="footer">页脚</div>
</body>
</html>

四、表单

 表单就是收集用户信息的，就是让用户填写的、选择的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>
    <div>
        <h3>欢迎注册本网站</h3>
        <form action="1.php">
            <p>
                请输入您的姓名:
                <input type="text" value="默认有的值，(*^__^*) 嘻嘻……" />
            </p>
            <p>
                请输入您的密码：
                <input type="password" />
            </p>
            <p>
                请选择你的性别：
                <input type="radio" name="xingbie" /> 男
                <input type="radio" name="xingbie" /> 女
                <input type="radio" name="xingbie" /> 保密
            </p>
            <p>
                请选择你的学历：
                <input type="radio" name="xueli" /> 幼儿园
                <input type="radio" name="xueli" /> 小学
                <input type="radio" name="xueli" /> 初中
                <input type="radio" name="xueli" /> 高中
                <input type="radio" name="xueli" /> 大学
                <input type="radio" name="xueli" /> 硕士
                <input type="radio" name="xueli" /> 博士
                <input type="radio" name="xueli" /> 更高
            </p>
            <p>
                请选择你的爱好：
                <input type="checkbox" name="aihao"/> 睡觉
                <input type="checkbox" name="aihao"/> 吃饭
                <input type="checkbox" name="aihao"/> 足球
                <input type="checkbox" name="aihao"/> 篮球
                <input type="checkbox" name="aihao"/> 乒乓球
                <input type="checkbox" name="aihao"/> 打豆豆
            </p>
            <p>
                请选择你的技能：
                <input type="checkbox" name="jineng" /> HTML
                <input type="checkbox" name="jineng" /> CSS
                <input type="checkbox" name="jineng" /> JS
            </p>
            <p>
                请选择你的籍贯：
                <select>
                    <option>北京</option>
                    <option>河北</option>
                    <option>河南</option>
                    <option>山东</option>
                    <option>山西</option>
                    <option>湖北</option>
                    <option>安徽</option>
                </select>
            </p>
            <p>
                签名：
                <textarea rows="4" cols="80"></textarea>
            </p>
            <p>
                普通按钮：
                <input type="button" value="我是一个普通按钮" />
            </p>
            <p>
                提交按钮：
                <input type="submit" />
            </p>
            <p>
                重置按钮
                <input type="reset" />
            </p>
        </form>
    </div>
</body>
</html>

form是英语表单的意思。form标签里面有action属性和method属性，稍微说一下：action属性就是表示，表单将提交到哪里。 method属性表示用什么HTTP方法提交，有get、post两种。

4.1 文本框

<input type="text" />

input表示“输入”，指的是这是一个“输入小部件”，

type表示“类型”，

text表示“文本”，指的是类型是一个文本框的输入小部件。

这是一个自封闭标签，自此，自封闭标签有：

<meta name=”Keywords” content=”” />
<img src=”” alt=”” />
<input type=”text” />
value表示“值”，value属性就是默认有的值，文本框中已经被填写好了：
<input type="text" value="默认有的值" />

4.2 密码框

<input type="password" />

到底是啥？看type属性的值是什么，来决定。也就是说，input标签很神奇，又是文本框，又是密码框。

如果type=”text”  文本框

如果type=”password” 密码框

4.3 单选按钮

只能选一个，术语叫做“互斥”。

<input type="radio" name="xingbie" /> 男
<input type="radio" name="xingbie" /> 女

非常像以前的收音机，按下去一个按钮，其他的就抬起来了。所以叫做radio。radio是“收音机”的意思，input的type的值，如果是radio就是单选按钮。

1 <input type="radio" name="xingbie" /> 男
2 <input type="radio" name="xingbie" /> 女

单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”。

1 <input type="radio" name="sex" checked="checked">

 默认被选择，就应该书写checked=”checked”

 <input type="radio" name="sex" checked="checked"> 

4.4 复选框

也是input标签，type是checkbox。

1 <p>
2  请选择你的爱好：
3  <input type="checkbox" name="aihao"/> 睡觉
4  <input type="checkbox" name="aihao"/> 吃饭
5  <input type="checkbox" name="aihao"/> 足球
6  <input type="checkbox" name="aihao"/> 篮球
7  <input type="checkbox" name="aihao"/> 乒乓球
8  <input type="checkbox" name="aihao"/> 打豆豆
9 </p>

 复选框，最好也是有相同的name（虽然他不需要互斥，但是也要有相同的name）

HTML5中，input的类型又增加了很多（比如date、color，但是都不兼容，所以我们是在专门的HTML5课程中学）。

不过现在，我们就先学习这四个。

1 <input type="text" /> 文本框
2 <input type="password" /> 密码框
1 <input type="radio"> 单选按钮
2 <input type="checkbox" /> 复选框

4.5 下拉列表

select就是“选择”，option“选项”。

select标签和ul、ol、dl一样，都是组标签。

1 <select>
2  <option>北京</option>
3  <option>河北</option>
4  <option>河南</option>
5  <option>山东</option>
6  <option>山西</option>
7  <option>湖北</option>
8  <option>安徽</option>
9 </select>

4.6 多行文本框（文本域） 

text就是“文本”，area就是“区域”。

 1 <textarea cols="30" rows="10"></textarea> 

 这个标签，是个标签对儿。对儿里面不用写东西。如果写的话，就是这个框的默认文字。

cols属性表示columns“列”，rows属性表示rows“行”。

值就是一个数，表示多少行，多少列。

4.7 三种按钮

按钮也是input标签，一共有三种按钮：

普通按钮：

 <input type="button" value="我是一个普通按钮" />

 button就是英语“按钮”的意思。value就是“值”的意思，按钮上面显示的文字。

提交按钮：

 1 <input type="submit" /> 

这个按钮点击，表单真的能提交。这个表单就会被提交到，form标签的action属性中的那个页面中去。submit就是英语“提交”的意思。这个按钮不需要写value自动就有“提交”文字。

4.8 label标签

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>
    <p>
        请选择你的性别：
        <input type="radio" name="sex" id="nan" /> <label for="nan">男</label>
        <input type="radio" name="sex" id="nv"  /> <label for="nv">女</label>
    </p>
    <p>
        <input type="checkbox" id="kk" />
        <label for="kk">10天内免登陆</label>  
    </p>
    <p>
        <label for="xingming">姓名：</label>
        <input type="text" id="xingming" />
    </p>
</body>
</html>

五、HTML杂项

5.1 HTML注释

任何的程序、代码都有注释，注释就是给程序员看的，不影响程序的。

适当的注释，能够让我们的程序更加可读，所以用中文提示自己，这里的程序是干什么的。

1  <!--这里是头部，还没有做完，准备加两天班弄完-->
2  <div>头部</div>
3  <!--这里是陈伟弄的，跟我没关系-->
4  <div>主要内容</div>
5  <!--这里是高俊负责的-->
6  <div>页尾</div>

Sublime中按ctrl+/ 就是注释HTML注释的语法

5.2 字符实体

我们想在页面上输出“<h1>”这些字符，但是HTML认为这是一个标签，还没封闭。

就是<的字符实体，什么意思呢？就是用常用字符表示这些符号的方式。所以，

lt 就是英语less than 小于的意思；

gt就是greater than 大于的意思。就是>的字符实体。

 就是©  版权符号。

 nbsp就是英语non-breaking spacing不打断空格的意思，就是空格。

所以：

空出了4个字的格，可以防止空白折叠现象。

5.3 HTML废弃标签介绍

HTML现在只负责语义，而不负责样式。但是HTML一开始，连样式也包办了。

这些样式的标签，都已经被废弃。 

2004年之前的东西了：

1 <font size="9" color="red">哈哈</font>

这些标签都是css钩子，而不是原意： 

1     <b>加粗</b>
2     <u>下划线</u>
3     <i>倾斜</i>
4     <del>删除线</del>
5     <em>强调</em>
6     <strong>强调</strong>

 这些标签，是有着浓厚的样式的作用，干涉了css的作用，所以HTML抛弃了他们。

水平线：

1 <hr />

换行： 

1 <br />
1     <p>

2     哈<br />哈哈

3     </p>

网页中99.9999%需要换行的时候，是因为另起了一个段落，所以要用p，不要用<br />不另起一个段落，进行换行。

br是英语break打断的意思。

标准的div+css页面，用的标签种类很少：

1 div  p  h1  span   a   img   ul   ol    dl    input

HTML结构、字符集。知道每个标签的特殊用法、属性。比如a标签，img的属性。

网络的基础知识。

六、CSS

现在的互联网前端三层：

　　HTML 超文本标记语言 从语义的角度描述页面结构。

　　CSS 层叠式样式表 从审美的角度负责页面样式。

　　JS JavaScript 从交互的角度描述页面行为。

6.1 CSS整体感知

css是cascading style sheet 层叠式样式表的简写。“层叠式”的意思，我们将慢慢的去理解。

css的最新版本是css3，我们学习的是css2.1。 因为css3和css2.1不矛盾，必须先学2.1然后学3。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        p{
            color:red;
            font-size: 30px;
            text-decoration: underline;
            font-weight: bold;
            text-align: center;
            font-style: italic;
        }
        h1{
            color:blue;
            font-size: 50px;
            font-weight: bold;
            background-color: pink;
        }
    </style>
</head>
<body>
    <h1>我是一个主标题</h1>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
</body>
</html>

css对换行不敏感，对空格也不敏感。但是一定要有标准的语法。冒号，分号都不能省略。

语法：

1 选择器{
2  k:v;
3  k:v;
4  k:v;
5  k:v;
6 }

七、基础选择器

注意的是：

1） 所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input

2） 无论这个标签藏的多深，一定能够被选择上：

 3）选择的所有，而不是一个。

7.1 id选择器

1  <p>我是段落1</p>
2  <p id="para2">我是段落2</p>
3  <p>我是段落3</p>

 css：

1  <style type="text/css">
2  #para2{
3  color:red;
4  }
5  </style>

id选择器的选择符是“#”。

任何的HTML标签都可以有id属性。表示这个标签的名字。

这个标签的名字，可以任取，但是：

　　1） 只能有字母、数字、下划线

　　2） 必须以字母开头

　　3） 不能和标签同名。比如id不能叫做body、img、a

 

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：自适应宽度元素单行文本省略用法探究

下一篇：百度前端学院-基础学院-第四课

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签