HTML和CSS总结

一：针对上节作业：

1：

实现：

code：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6     <style>
 7         .a{
 8             border: 0;
 9             border-left: solid red 1px;
10             border-right: solid red 1px;
11             height: 16px;
12             float: left;
13             margin-bottom: 0;
14             width: 40px;
15             text-align: center;
16         }
17         .b{
18             width: 85px;
19             height: 19px;
20             border: solid red 1px;
21         }
22         a{
23             text-align: center;
24             display: inline-block;
25             width: 20px;
26             line-height: 20px;
27             margin: 0;
28             float: left;
29         }
30     </style>
31 </head>
32 <body>
33     <div class="b">
34         <a>+</a>
35         <input class="a" type="text" value="1"/>
36         <a>-</a>
37     </div>
38 </body>
39 </html>

 效果：

需要注意:

让标签周围外距为0：margin:0 auto;

让标签内的文本水平居中：text-align: center；

让标签垂直居中：line-height: 20px;

在display: inline-block;中默认有3px的边距。解决方法float。

2：改造标签;我们通过改造标签的属性来改造标签的样式。

3：<img>标签默认带有边框。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6 </head>
 7 <body>
 8     <a href="http://www.jd.com">
 9     <img src="15.jpg">
10     </a>
11 </body>
12 </html>

如上代码在低版本的IE 会出现边框。需要加入如下样式。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6     <style>
 7         img{
 8             border: 0;/*需要加入该样式才可以*/
 9         }
10     </style>
11 </head>
12 <body>
13     <a href="http://www.jd.com">
14     <img src="15.jpg">
15     </a>
16 </body>
17 </html>

 二:html标签的补充

<img>标签的补充。

1）当图片不显示的时候，往往会出现显示一些波浪号等其他的符号。这时候用alt属性，当图片不显示的时候，会显示alt的内容。

code：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6 </head>
 7 <body>
 8     <img src="1.jpg" alt="图片缺失">
 9 </body>
10 </html>

 

效果：

各个标签的默认值补充：

1）<input> text类型标签的默认值:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6 </head>
 7 <body>
 8    <span>
 9        <input type="text" value="1" />
10    </span>
11 </body>
12 </html>

 

效果：

2）<input> radio类型的默认值：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6 </head>
 7 <body>
 8    <span>
 9        男：<input type="radio" name="a" checked="checked" />
10        女：<input type="radio" name="a" />
11    </span>
12 </body>
13 </html>

 效果：

3）<input>标签checkbox类型的默认值。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6 </head>
 7 <body>
 8    <span>
 9        basketball：<input type="checkbox" name="fav" checked="checked" />
10        football：<input type="checkbox" name="fav" />
11        swimming：<input type="checkbox" name="fav" checked="checked"/>
12        pingbang：<input type="checkbox" name="fav" />
13    </span>
14 </body>
15 </html>

 效果：

4）select标签的默认值。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6 </head>
 7 <body>
 8    <span>
 9     <select>
10         <option >北京</option>
11         <option>大连</option>
12         <option selected="selected">沈阳</option>
13     </select>
14    </span>
15 </body>
16 </html>

默认情况显示的是第一个标签。

添加默认值。修改显示。

5）<textarea>默认值：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6 </head>
 7 <body>
 8    <span>
 9     <textarea>
10         123
11     </textarea>
12    </span>
13 </body>
14 </html>

效果：

总结：

1：<input>标签的默认值，通过设置value(text)。或者通过checked=checked(radio checkbox)

2：<select>标签的默认值，通过selected=selected来设置。

3：<textarea>通过在标签之间设置值来设置默认值。

三：Css补充：

1：当我们的需求一个样式要全局生效而不是被其他同样的样式覆盖掉，需要使用!important.

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6     <style>
 7         .a{
 8             color: red;
 9         }
10         .b{
11             color:black;
12         }
13     </style>
14 </head>
15 <body>
16     <span class="a b">just test</span>
17 </body>
18 </html>

效果：

这种优先级下面的优先级高于上面的优先级。

用!important来增加 class="a"的优先级。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6     <style>
 7         .a{
 8             color: red !important;
 9         }
10         .b{
11             color:black;
12         }
13     </style>
14 </head>
15 <body>
16     <span class="a b">just test</span>
17 </body>
18 </html>

效果：

应用场景：当我们要求隐藏标签的时候，使用display:none的时候，我们希望在使用这个样式的时候，就是隐藏标签。而不是被display:block等覆盖，可以使用display:none !important;来解决这个问题。

2）属性选择器：我们自定义属性选择器，来查找对应的标签。通过[]形式查找。

code：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6     <style>
 7         .a[cc=evil]{
 8             color:firebrick;
 9         }
10     </style>
11 </head>
12 <body>
13     <div class="a" cc="tom">just test</div>
14     <div class="a" cc="evil">just test</div>
15     <div class="a" cc="jack">just test</div>
16     <div class="a" cc="evil">just test</div>
17 </body>
18 </html

 效果：

 3)在使用width百分比的时候，需要注意一个问题：在定义百分比的时候，需要在外层定义这个标签的宽度。才可以使用百分比。

问题：

内容溢出.当窗口变小的时候。

采用外部标签定义宽度来解决。

底端出现左右拉取的横条。

代码：

1     <div class="a" style="background-color: red ;width: 1200px ">
2         <div class="a" style="width: 20%;background-color: aquamarine"> </div>
3         <div class="v" style="width: 80%;background-color: antiquewhite">dadadadaddadadadad
4         dadadadadadadadaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
5         daaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaad
6         daaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
7     </div>

注意：在使用宽度的百分比的时候需要在外部标签定义标签的长度。

 4）对于在滑动网页的时候，标题栏一直在头部的网页实现方法：

利用postion的fixed  以及top:0 left:0 right:0

通过top:0,left:0,right:0来拉取宽度，而不是通过我们定义宽度。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6 <style>
 7     .a{
 8         /*width: 2200px;  注意不需要定义宽度*/
 9         position: fixed;
10         top: 0;
11         margin: 0 auto;
12         left: 0;
13         right: 0;
14         height: 50px;
15         background-color: red;
16         color:black;
17         line-height: 50px;
18         padding-left: 5px;
19     }
20     .c{
21         float: left;
22         height: 3500px;
23         margin-top: 50px;
24         color: black;
25     }
26 
27 </style>
28 </head>
29 <body>
30 <div class="a">
31     标题一 标题二 标题三
32 </div>
33 <div class="c">
34     热点
35 </div>
36 
37 </body>
38 </html>

5）实现输入框左边或者右边有图片。如下效果：

 

code：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6     <style>
 7         .a{
 8             width: 200px;
 9             position: relative;
10             height: 37px;
11         }
12         .b{
13             width: 150px;
14             /*border: 0;*/
15             height: 35px;
16             line-height: 37px;
17             padding-right: 50px;
18         }
19         .c{
20             position: absolute;
21             right: 0;
22             top:0;
23             height: 37px;
24 
25         }
26     </style>
27 </head>
28 <body>
29     <div class="a">
30         <input class="b" type="text" />
31         <img  class="c" src="2.png">
32     </div>
33 </body>
34 </html>

效果：

实现核心思想：通过postion：relative absolute 实现一个标签相对另一个标签的位置。位置通过  top:0 、left:0、right:0等其中2个属性确定位置。正方形或者长方形确定其中2个边位置那形状也确定了。！！！！

6）对于写html网页的时候。建议如下分以下目录：

 1 目录介绍
 2 ├── App
 3 │   ├── *.html#存放html文件
 4 │
 5 │
 6 ├── css
 7 │    ├── *.css#存放css文件。
 8 │  
 9 ├── js
10 │  ├── *.js#存放js文件。
11 │ 
12 ├── picture
13 │  ├── #存放图片。

 

7)在使用图标的时候，可以使用插件。

Font Awesome

下载地址:http://fontawesome.io/

使用方式：解压到css目录中。注意css目录下有2个文件：

其中min文件是压缩文件，里面的内容由一行组成。在调试过程中不建议使用min，以方便查看样式。在上线的时候使用min。

使用图标：点击官网的icons或者访问：http://fontawesome.io/icons/

查找对应图标。并点击。查看样式css代码。比如：

点击查看：

code：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6     <link rel="stylesheet" href="font-awesome-4.6.3/css/font-awesome.css"/><?--引用插件css文件-->
 7     <style>
 8         .c{
 9             color: red;/*给引用的样式添加新的样式*/
10         }
11     </style>
12 </head>
13 <body>
14      <i class="fa fa-leaf c" aria-hidden="true"></i><!--注意class引用多个样式-->
15 </body>
16 </html>

 

效果：

8）对于float实现子标签飘起来：

以后再使用float的时候 ，网页需要有如下部分。好处自动撑起背景色。因为高度的不确定性。

 1         .clearfix:after{
 2             content: '.';/*.撑起背景色*/
 3             display:block;/*默认是内联标签*/
 4             clear: both;/*让子div float起来*/
 5             visibility: hidden;/*隐藏.*/
 6             height: 0;/*让原先的.占有高度变为0*/
 7 
 8         }
 9     <div class="clearfix">
10         <div class="inner" style="float: left">OK</div>
11         <div class="inner1"style="float: left">good</div>
12     </div>

 

code:需要注意的是：背景色是在clearfix中定义的。不是在after中定义的。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>test</title>
 6     <style>
 7         .clearfix{
 8             background-color: red;
 9         }
10         .clearfix:after{
11             content: '.';/*.撑起背景色*/
12             display:block;/*默认是内联标签*/
13             clear: both;/*让子div float起来*/
14             visibility: hidden;/*隐藏.*/
15             height: 0;/*让原先的.占有高度变为0*/
16 
17         }
18         .inner{
19             float: left;
20 
21         }
22         .inner1{
23             float: left;
24             height: 50px;
25             background-color: #EEEE00;
26         }
27     </style>
28 </head>
29 <body>
30     <div class="clearfix">
31         <div class="inner">OK</div>
32         <div class="inner1">good</div>
33     </div>
34 </body>
35 </html>

 

效果：

9）尖角的图标的形成。

code：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .a{
 8             display: inline-block;
 9             border-left: solid red 15px;
10             border-right: solid gold 15px;
11             border-bottom: blue solid 15px;
12             border-top: solid black 15px;
13         }
14     </style>
15 </head>
16 <body>
17     <div class="a"></div>
18 </body>
19 </html>

 

效果：

如果想取其中的一一个三角，可以用transparent透明色。来遮盖其他三角。

code：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .a{
 8             display: inline-block;
 9             border-left: solid transparent 15px ;
10             border-right: solid transparent 15px;
11             border-bottom: blue transparent 15px;
12             border-top: solid black 15px;
13         }
14     </style>
15 </head>
16 <body>
17     <div class="a"></div>
18 </body>
19 </html>

 

效果：

10）后台管理页面。利用absolute来确定各个div的位置。

注意：给body标签添加margin:0 auto保证主体部分没有边框！！！！

后台管理的布局：

code：利用absolute来固定位置。以及overflow 当内容溢出<div>的范围的时候，自动给内容创建拉动的动作条。保证菜单不超出范围。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .pd_header{
 8             height: 45px;
 9             background-color: cornflowerblue;
10             line-height: 45px;
11             padding-left: 15px;
12         }
13         body{
14             margin: 0 auto;
15         }
16         .pd_body{
17             width: 200px;
18             background-color: blanchedalmond;
19             position: absolute;
20             top:45px;
21             left: 0;
22             bottom: 0;
23 
24         }
25         .pd_content{
26             position: absolute;
27             top:45px;
28             left:202px;
29             bottom: 0;
30             right:0;
31             background-color: #EEEE00;
32             overflow: scroll;/*注意这个样式，当内容溢出的时候给内容创建一个拉动的动作条保证菜单不超出*/
33         }
34     </style>
35 </head>
36 <body>
37     <div class="pd_header">标题一</div>
38     <div class="pd_body"></div>
39     <div class="pd_content">
40         dadadadasdad<br/>
41         dadadadasdad<br/>
42     </div>
43 </body>
44 </html>

效果：

11)模拟对话框：

首先看下对话框的结构：

解释：

1）底层上面有按钮，当用户点击添加按钮的时候，会弹出对话框。当对话框出现的时候，底层按钮，用户不可以进行点击。所以需要遮罩层。

2）遮罩层：主要作用是当用户点击添加按钮的时候，用户的不可以点击添加按钮。

设计思想：当用点击添加按钮，按钮不可以点击，对话框弹出。当用户不点击按钮的时候，遮罩层和对话框是被隐藏的（display:none）。而且要保证遮罩层要在对话框下面(z-index)以及遮罩层的透明度（opacity 0是全透明0-1之间）。让

用户点击按钮，弹出对话框的时候可以看到添加按钮。

code：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .hide{
 8             display: none;
 9         }
10         .fist{
11             height: 2000px;
12         }
13         .second{
14             position: fixed;
15             top:0;
16             left: 0;
17             right: 0;
18             bottom: 0;
19             background-color: black;
20             opacity: 0.4;
21             z-index: 11;
22         }
23         .modle{
24             height: 200px;
25             width: 400px;
26             background-color: #eeeeee;
27             position: fixed;
28             top: 50%;
29             left: 50%;
30             margin-left: -200px;
31             margin-top: -100px;
32             z-index: 12;
33         }
34         .text{
35             height: 200px;
36             width: 400px;
37             padding-right: 0;
38             padding-bottom: 0;
39             opacity:1;
40             color: red;
41 
42         }
43     </style>
44 </head>
45 <body>
46     <div><input type="button" value="提交"/></div>
47     <div class="fist">  </div>
48     <div class="second "></div>
49     <div class="modle ">
50                 <input  class="text" type="text"/>
51     </div>
52     <div class="fist"></div>
53 </body>
54 </html>

 

效果：

 

posted @ 2016-08-16 15:37  evil_liu  阅读(481)  评论(0)  编辑  收藏  举报