天天看點
傳回

HTML+css樣式和案例筆記

CSS3+HTML：實操練習

1、标簽顯示模式轉換display

-塊轉行内：display:inline;

-轉行内轉塊元素：display:block;

-轉行内塊元素：display:inline-block;

2、設定寬和高，如果是行内元素 不能直接設定寬和高 必須要轉換為行内塊元素

3、行高等于盒子的高度 就可以讓單行文本垂直居中line-height:

4、背景半透明

-文法：background: rgba(0,0,0,0.3);

-最後一個參數是alpha透明度，取值範圍0~1之間

-background-attachment 背景固定還是滾動 （scroll/fixed）

5、優先級

-權重計算公式

-權重疊加

-important 無窮大

-行内樣式權重表示（1.0.0.0）

-id選擇器（0.1.0.0）

-類選擇器（0.0.1.0）

-元素選擇器（0.0.0.1）

-通配符選擇器（0.0.0.0）

6、盒子模型

-邊框 border:

-border-style 邊框樣式

-border-color 邊框顔色

-border-solid 單實線

-border-dashed 虛線

-border-dotted 點線

上邊框

-border-top-style:樣式；

-border-top-width:寬度；

_ border-top-color:顔色；

-border-top:寬度 樣式 顔色；

下邊框

-border-bottom-style:樣式；

-border- bottom -width:寬度；

  • border- bottom -color:顔色；

    -border- bottom:寬度 樣式 顔色；

    左邊框

    -border-left-style:樣式；

    -border- left -width:寬度；

  • border- left -color:顔色；

    -border- left:寬度 樣式 顔色；

    右邊框

    -border-right-style:樣式；

    -border- right -width:寬度；

  • border- right -color:顔色；

    -border- right:寬度 樣式 顔色；

塊級盒子水準居中

-盒子必須有寬度

-左右外邊距為auto

-常見三種寫法：

1、margin-left：auto；margin-right：auto；

2、margin：auto；

3、margin：0 auto；

文字居中和盒子居中的差別：

文字居中 text-align：center；

盒子居中 左右margin：auto；

插入圖檔和背景圖檔差別

-插入圖檔 産品展示類 移動位置隻能靠盒模型 padding margin

-背景圖檔 小圖示背景，超大背景圖檔 靠background-position移動

清除元素預設的内外邊距

*{

margin:0;

Padding:0

}

行内元素為了相容性，隻設定左右外邊距，不設定上下外邊距

相鄰塊元素垂直外邊距的合并

-取兩個值中的較大者，稱為相鄰塊元素垂直外邊距的合并（外邊距塌陷）

盒子模型demo：

<style>
            *{
                margin: 0px;
                padding: 0px;
            }
            li{
                list-style: none;
            }
            .box{
                margin: 100px auto;
                width: 288px;
                height:198px;
                border: 1px solid #ccc;
                padding: 15px;
                background-color: antiquewhite;
            }

            .box h2{
                font-size: 18px;
                border-bottom: 1px solid #ccc;
                padding: 5px 0px;
                margin-bottom: 10px;
            }
            .box ul li {
                height: 30px;
                /* background-color: pink; */
                /* 虛線 */
                border-bottom: 1px dashed #ccc;
            }
            .box ul li a {
                color: #333333;
                font-size: 12px;
                /* 去掉下劃線 */
                text-decoration: none;
            }
           
            .box ul li a:hover{
                text-decoration: underline;、//添加下劃線
            }
        </style>
    
</head>
<body>
    <div class="box">
        <h2>蓮，lay-z</h2>
        <ul>
            <li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >北京招聘網頁設計師</a></li>
            <li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >體驗生活</a></li>
            <li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >個人履歷</a></li>
            <li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >個人生活</a></li>
            <li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >jQuery中的鍊式程式設計</a></li>
        </ul>
    </div>

圓角邊框demo：

/* 圓角邊框 */
    div {
        width: 200px;
        height: 200px;
        background-color: burlywood;
        border-radius: 50%;

    }
    p {
        width: 100px;
        height:20px;
        background-color: chocolate;
        font-size: 12px;
        color: #ffffff;
        text-align: center;
        line-height: 20px;
        border-radius: 10px;
    }
</style>
<div></div>
<p></p>

盒子陰影：

-Box-shadow:水準陰影 垂直陰影 模糊距離 陰影尺寸 （影子大小）影子顔色 内/外陰影

案列： div {

width: 200px;

height: 200px;

background-color: burlywood;

margin: 50px auto;

box-shadow: 0px 15px 30px rgba(0,0,0,0.1);

}

浮動盒子的案例：

.one,
    .two,
    .three {
        width: 200px;
        height: 200px;
        background-color: pink;
    }
    .one {
        float: left;
    }
    .two {
        background-color: purple;
        float: left;
    }
    .three {
        background-color: sandybrown;
        float: left;
    }

<div class="one"></div>
<div class="two"></div>

小米浮動盒子的案例：

{

margin: 0px;

padding: 0px;

}

/ 清除元素預設内外邊距樣式 /

.box{

width: 1226px;

height: 615px;

background-color: springgreen;

/ 塊級元素居中 */

margin: auto;

}

.left {

width: 234px;

height: 615px;

background-color: violet;

float: left;

}

.right {

width:992px;

height: 615px;

background-color: skyblue;

float: right;

}

.right li {

float: left;

width: 234px;

height: 300px;

background-color: tomato;

margin-left: 14px;

margin-bottom: 14px;

}

li {

list-style: none;

}

html:

<!-- 浮動的元素互相貼靠一起的，但如果父級寬度裝不下這些浮動盒子，多出的盒子會另起一行對齊 -->
<div class="box">
    <div class="left"></div>
    <ul class="right">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </div>
</div>

導航欄demo（主要練習浮動布局，滑鼠經過變色，行内元素轉為塊元素）

css :

{

margin: 0px;

padding: 0px;

}

/ 清除元素預設内外邊距樣式 /

.banner{

width: 760px;

height: 150px;

background: url(images/1.jpg);

/ 塊級元素居中 */

margin: auto;

}

.nav {

width: 760px;

height: 32px;

background-color: yellow;

margin: auto;

}

li {

list-style: none;

}

.nav ul li {

float: left;

}

.nav ul li a {

display: block;/ 行内元素轉為塊元素/

width: 80px;

line-height: 32px;/文字水準居中/

height: 32px;

font-size: 14px;

color: #40510a;

text-align: center;/文字水準居中/

}

li a {

margin-left: 25px;

text-decoration: none;

}

a:hover{

background-color: wheat;

}

html:

<div class="banner">
    </div>
</div>
<div class="nav">
    <ul>
        <!-- 導航欄用li包含a -->
        <li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >網站首頁</a></li>
        <li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >網站首頁</a></li>
        <li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >網站首頁</a></li>
        <li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >網站首頁</a></li>
        <li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >網站首頁</a></li>
        <li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >網站首頁</a></li>
    </ul>
</div>

清除浮動的本質：

為了解決父級元素因為子級元素浮動引起内部高度為0的問題，清除浮動後父級會根據浮動的盒子自動檢測高度，父級有了高度，就不會影響标準流

-Clear：屬性值；

-Left 不允許左側有浮動元素

-Right 不允許右側有浮動元素

-Both 同時清除左右兩側浮動的影響

清除浮動的方法：

（1）額外标簽法：

（2）父級添加overflow屬性方法 overflow hidden (在css裡)

清出浮動的總結：

父親沒有高度

子盒子浮動了

影響下面布局了，應該清出浮動

使用after僞元素清除浮動

.clearfix:after {

Content: “”;

Display: block;

Height: 0;

Visibility: hidden;

Clear: both;

}

  • .clearfix {

    *zoom: 1; /IE6,7專門清除浮動的樣式/

    }

書寫css标準規範：

1、布局定位屬性：display/position/float/clear/overflow

2、自身屬性：width/height/margin/padding/border/background

3、文本屬性：color/font/text-align/break-word

4、其他屬性：content/cursor/box-shadow/

表格制作demo

<table  cellspacing="0" align="center" width="800px" height="800px">
   <tr>
     <td width="90px" height="50px">姓名</td>
     <td width="110px"></td>
     <td width="90px">性别</td>
     <td width="90px"></td>
     <td width="90px">出生年月</td>
     <td width="200px"></td>
     <td rowspan="3">照片</td>
   </tr>
   <tr width="90px" height="50px">
    <td>身份證号碼</td>
    <td></td>
    <td>民族</td>
    <td></td>
    <td>政治面貌</td>
    <td></td>
  </tr>
  <tr width="90px" height="50px">
    <td>婚姻狀況</td>
    <td></td>
    <td>健康狀況</td>
    <td></td>
    <td>身高</td>
    <td></td>
  </tr>
  <tr width="90px" height="50px">
    <td>現戶口所在地</td>
    <td></td>
    <td>所學專業</td>
    <td></td>
    <td>學曆</td>
    <td colspan="2"></td>
  </tr>
  <tr width="90px" height="50px">
    <td>最後畢業學校</td>
    <td></td>
    <td>畢業時間</td>
    <td></td>
    <td>技術職稱</td>
    <td colspan="2"></td>
  </tr>
  <trwidth="90px" height="50px">
    <td height="50"px>現工作機關</td>
    <td></td>
    <td>參加工作的時間</td>
    <td></td>
    <td>現從事專業</td>
    <td colspan="2"></td>
  </tr>
  <tr class="tll">
      <td rowspan="6" id=”tt”>主要履歷</td>
      <td colspan="2">起止年月</td>
      <td colspan="2">在何機關</td>
      <td colspan="2">任何職位</td>
  </tr>
  <tr>
      <td colspan="2"></td>
      <td colspan="2"></td>
      <td colspan="2"></td>
  </tr>
  <tr>
    <td colspan="2"></td>
    <td colspan="2"></td>
    <td colspan="2"></td>
</tr>
<tr>
    <td colspan="2"></td>
    <td colspan="2"></td>
    <td colspan="2"></td>
</tr>
<tr>
    <td colspan="2"></td>
    <td colspan="2"></td>
    <td colspan="2"></td>
</tr>
<tr>
    <td colspan="2"></td>
    <td colspan="2"></td>
    <td colspan="2"></td>
</tr>
<tr>
    <td>業務專長及工作成果</td>
    <td  colspan="6"></td> 
</tr>
<tr>
    <td>通訊位址</td>
    <td colspan="3"></td>
    <td>郵政編碼</td>
    <td colspan="2"></td>
</tr>
<tr>
    <td>聯系電話</td>
    <td colspan="3"></td>
    <td>Email位址</td>
    <td colspan="2"></td>
</tr>
</table>

補充讓文字豎排顯示：

#tt {

width: 50px;

font-size: 20px;

word-wrap: break-word;

letter-spacing: 50px;

}

html css
上一篇: 過程控制系統【PCS】一文全解！
下一篇: html+css 小案例（一）

繼續閱讀