Div+css

时间  2019-12-05
标签 div+css div css 栏目 HTML 繁體版
原文   原文链接

Div+css 是一种目前比较流行的网页布局技术
php

div 来存放须要显示的数据（文字，图表），cSS 就是用来指定怎么样显示，从而作到数据和显示的效果css

原理图以下：html

有时候，咱们也可能把CSS直接嵌入到html文件中，这种方式称为内联CSS。c++

基本语法：浏览器

<style>服务器

选择器{mvc

属性：属性值；jsp

。。。。布局

}网站

<style>

咱们能够简单的理解div+css:

div  是用于存放内容（文字，图片，元素）的容器。

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

入门体验案例（体验案例）

Demo.html

<html>
<head>
<title>css 入门小案例</title>
<!--引入咱们的Css-->
<link rel="stylesheet" type="text/css" href="my.css">
</head>
<body>
<div class="style1">
<img src="2.jpg"/>
</div>
</body>
</html>

.style{
    /*宽度*/
    width：400px;
    heifht:300px;
    background-color:silver;
    border:1px solid red;
    margin-left:400px;
    margin-top:250px;
    padding-top:20px;
    padding-left:40px;
}


  • 网页设计的三个时期

       ①table 网页设计

       ②table+css 网页设计

       ③div+css 网页设计

  • css 使用必要性

        ⒈能够很好的统一网站的显示风格。

         css使用的基本语法

        选择器{

               属性1：属性值；

               属性2：属性值；

                。。。。

         }

         

   

html 文件

<html>
<!--css 部分能够单写一个文件，而后引入，也能够直接嵌入到该html-->
<link rel=stylesheet" type="text/css" href="demo2.css"/>
<span class="s1">栏目一</span>
<span calss="s1">栏目二</span>
<span class="s1">栏目三</span>
<span class="s1">栏目四</span>
<span class="s1">栏目五</span>
</html>

css文件：

/*s1 用术语 类选择器*/
.s1{
    color:blue;
    font-style:30px;
    font-style:italic;
    text-decoration:underline;
}
.s2{
    color:yellow;
    font-size:12px;
}
.s3{
    color:blue;
    font-style:italic;
}
.s4{
    color:green;
    font-weight:bold;
}
.s5{
    color:#9c3131;
}

css必要性2 可使用滤镜

<html>
<head>
<!--如何把css直接嵌入到html文件（内联css）-->
<style>
    a:link img{
        filter:gray;
    }
    a:hover img:"";
</style>
<body>
<a href="3"><img src="2.jpg"></a>
<a href="3"><img src="3.jpg"></a>
<a href="3"><img src="4.jpg"></a>
<a href="3"><img src="cat1.jpg"></a>
</body>
</head>
</html>

  • css 中经常使用的四种选择器

        1.类选择器（class 选择器）{

                属性名：属性值；        

        }

        2.id 选择器

        基本使用

        #id 选择器{

                属性名：属性值；   

        }            

        案例：

        /*id 选择器的使用*/

        #id1{

              background-color:silver;

              font-size:40px;

        }

        3.html 元素选择器

        某个html 元素{

                属性名：属性值；

        }

Table{

    p{

}

Button{

}            

}

//对html元素样式分类

P:cls{   

}

<p class="cls"></p>

需求人员（技术+行业背景）

财务软件（php,c++）->用友[]

4.通配符选择器

cSS 文件可使用在各类文件（php,html,jsp,asp...）

*{

}

案例：

再好比，咱们但愿全部的超连接

        (1)默认样式是 黑色，24px,没有下划线

        (2)当鼠标移动到超连接时，自动出现下划线。

        (3)点击后，超连接变成红色。这又该怎么实现呢？

test.html
a:link{
    color:black;
    text-decoration:none;
    font-size:24px;
}
a:hover{
    text-decoration:underline;
    font-size:40px;
    color:green;
}
a:visited{
    color:red;
}
/*对同一中html元素分类*/
p.cls1{
    color:blue;
    font-size:30px;
}
p.cls2{
    color:red;
    font-size:20px;
}

  • 通配符选择器

    该选择器能够用到全部的html元素，可是其优先权最低

        *{

            属性名：属性值；

    }

四个选择器优先权

id选择器->细节->深刻了解->应用项目

    经过上面的总结：

      ①父子选择器能够有多级（可是在实际开发中不要三层）

      ②父子选择器有严格的层次关系

      ③父子选择器不局限于什么类型选择器

好比

#id span span

.s1 #id span

div #id .s2

2.一个元素能够同时又id选择器和class选择器

    案例：<span class="s1" id="news_specail">新闻一</span>

3.一个元素最多有一个id选择器，可是能够有多个类选择器

    使用方法以下：

    <span class="cls1 s1">新闻三</span>

    <元素 class="cls1 s1">新闻部分</元素>

Css部分：

/* 给新闻三 再配置一个class 选择器*/

.cls1{

    font-style:italic;

    text-decoration:underline;

    color:blue;

    background-color:silver;

}

.sl{

    background-color:pink;

    font-weight:bold;

    font-size：16px；

    color:black;

}

特别注意：当两个类选择器发生冲突了，则能够写在css文件中的那个类选择器为准；

4，咱们能够把某个css文件中的 选择器共有的部分，独立出来写一份好比：

.ad_stu{
    width:136px;
    height:196px;
    background-color:#FC7E8C;
    margin:5px 0 0 6px;
    float:left;
}
/*广告 2*/
.ad_2{
background:#7cf574;
height:196px;
width:457;
float:left;
margin:5px 0 0 6px;
}
/*房地产广告*/
.ad_house{
background:#7cf574;
height:196px;
width:152px;
float:left;
margin:5px 0 0 6px;
}
//上面的CSS能够写成：
/*招生广告*/
.ad_stu{
width:136px;
background-color:#fc7e8c;
}
/*广告 2*/
.ad_2{
background:7cf574;
width:457px;
}
/*房地产广告*/
.ad_house{
background:#7cf574;
width:152px;
}
.ad_stu,.ad_2,ad_house{
height:196px;
float:left;
margin:5px 0 0 6px;
}

5.说明cSS文件本省也会儿被浏览器从服务器下载到本地，才能显示效果。

  • 行内元素和块元素

    快速入门案例：


    从案例咱们看出，行内元素它只占能显示本身内容的宽度，并且他不会儿占据整行块元素块元素它无论本身

    的内容有多少，会而占据整行，并且会而换行显示。

  • 常见的行内元素有<a><span><input type="xxx">

  • 常见块元素有<div><p>

<html>
<head>
<link rel="stylesheet" type="text/css" href="element.css">
</head>
<body>
<span class="s1">span1</span>
<span class="s1">span2</span><input type="text" name="username"/>
<div class="s2">div1</div>
<div class="s2">div2</div><input type="text" name="uesrname"/>
<p style="background-color.silver">这是一个段落</p>
</body>
</html>

  • 行内元素和块元素能够转换

    使用

    Display：inline 表示使用行内元素方式显示

    Display：block 表示使用块元素方式显示

  • Css 文件之间的相互引用指令(mvc)

  • 标准流和非标准流

流:html 元素在网页中显示的顺讯。

标准流：在html文件中，写在前面的元素在前面显示，写在后面的元素Html元素在后面显示。

非标准流：在html文件中，当某个元素脱离的标准流，那么它就处于非标准流。

  • css 中的盒子模型

    盒子模型的示意图

盒子模型的经典案例：

html 文件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
<html>

<head>
<title>盒子模型案例</tile>
</head>
<body>
<div class="div1">
<img src="aa.bmp"/>
</div>
</body>

</html>

Css文件：

body{
    border:1px solid red;/*1px 表示边框的宽度 solid 实线 red 表示颜色*/
    width：500px;
    height:500px;
    /*若是让body 自动居中*/
    margin：0 auto；
    /*第一个用于上—下，第二个用于左一右。auto 表示自动居中*/
}
/*盒子模型的概念：margin，padding，border content*/
.div1{
    width:50px;
    height:52px;
    border:1px solid blue;
    /*
        margin-top:5px;
        margin-left:5px;
    */
    margin:5px 0px 0px 5px;
    /*pading-top:35px*/
}
.div1 img{
    width:40px;
    height:40px;
    margin-top:5px;
    margin-5px;
}


盒子模型的综合案例2

基本结构

<div>

<ul><lmg src=""/></ul>

</div>

html 文件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
 
<html>
<head>
<link rel="stylesheet" type="text/css" href="box2.css">
</head>
<body>
<!--div 在布局起到一个控制整个内容显示的位置-->
<div class="div1">
<!--ul 在布局中做用是能够控制显示内容多少-->
<ul class="faceul">
<li><img src="aa.bmp"/></li>
<li><img src="aa.bmp"/></li>
<li><img src="aa.bmp"/></li>
<li><img src="aa.bmp"/></li>
<li><img src="aa.bmp"/></li>
<li><img src="aa.bmp"/></li>
<li><img src="aa.bmp"/></li>
<li><img src="aa.bmp"/></li>
<li><img src="aa.bmp"/></li>
</body>

</html>

Css 文件

.div1{
    width:500px;
    height:300px;
    border:1px solid gray;
    margin-left:200px;
}
.faceul{
    width：400px;
    height:250px;
    border:1px solid red;
    padding-left:5px;
    margin-left:10px;
}
.faceul li{
    lift-style-type:none;
    folat:left;/*左浮动，这个知识点后面说*/
    width：50px;
    height:52px;
    border:1px solid red;
    padding-left:5px;
    margin-left:10px;
}
.faceul li{
    list-style-type:none;
    float:left;/*左浮动，这个知识点后面说*/
    width：50px;
    height:52px;
    border:1px solid red;
    margin-right:15px;
    margin-top:15px;
}
.faceul li img{
    margin-left:5px;
    margin-top:5px;
    width:40px;
    height:40px;
}

 

做业 ：

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程