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教程