第十四章:Python の Web开发基础(一) HTML与CSS

本課主題

  • HTML 介绍
  • CSS 介绍

 

HTML 介绍

HTML 的头部份,重点:

定义HTML 的编码:<meta charset="UTF-8"/>
定义标题: <title name="'janice">s1</title>
定义标题旁边的图片:<link rel="shortcut icon" href="mikasa.icon" /> 
<head>
    <!--自闭合标签-->
    <meta charset="UTF-8"/>
    <meta name="keywords" content="DATA SCIENCE, WEB DEVELOPMENT, OPEN SOURCE, FRONT END DEVELOPMENT, ARTIFICIAL INTELLIGENCE">
    <meta name="description" content="Creative engineers and data scientists building a world where you can belong anywhere. http://airbnb.io.">
    <!--标签属性 name='janice'-->
    <title name="'janice">s1</title>
    <link rel="shortcut icon" href="mikasa.icon" />
</head>
<head> </head>

检签存在的意义是更好的定位数据在那里,方便日后以 CSS 和 JS 来定位和操作数据 

<!--HTML基本 标签系列-->
<a href="https://www.google.com.hk" target="_blank">行内标签:超连结</a>
<a href="#id1">行内标签:錨</a>
<img src="" title="美女" alt=""> 圖片
<br/> 换行
<p>块级标签:段落,段落和段落之间有间距</p> 
<label for="id1">获取并关连ID</label>
<h1>块级标签:标题一</h1>
<h2>块级标签:标题二</h2>
<h3>块级标签:标题三</h3>
<h4>块级标签:标题四</h4>
<h5>块级标签:标题五</h5>
<h6>块级标签:标题六</h6>
<div>块级标签:白板</div>
<span>行内标签:白板</span>

<!--input 标签系列 只有以下标签可以发送到后台-->
<form action="/index", method="POST" enctype="multipart/form-data"> 表单
    <!-- name 是用在后台收集数据,以下的标签都可以发送到后台 -->
    <input type="text" name="user" value="默认值" />
    <input type="text" name="email"/>
    <input type="password" name="passwd"/>
    <input type="button" name="video_click" value="PressMe" /> 默认什么功能都没有,要配合 JS 
    <input type="submit" value="提交" /> 提交表单
    <input type="reset" value="重置" /> 重置表单还原原来的状态
    <!-- radio input 如果name是相同的话,会互斥 -->
    <input type="radio" name="gender" value="0" checked='checked'/> 
    <input type="radio" name="gender" value="1"/>
    <!-- checkbox input-->
    <input type="checkbox" name="hobbies" value="0" checked='checked'/>
    <input type="checkbox" name="hobbies" value="1"/>
    <!-- file input-->
    <input type="file" name="fname" /> 依赖 form 表单的一个属性 enctype="multipart/form-data"
    <textarea name="memo">默认值</textarea>
    <select name="city" size=1 multiple="multiple">
        <optgroup label="广东省"> 下拉框的分组显示,这个可加可不加
            <option value="1">上海</option>
            <option value="2" selected='selected'>杭洲</option>
            <option value="3">深圳</option>
        </optgroup>
    </select>
</form>

<!--table 标签系列-->
<table border="1">
    <thead> 表头
        <tr> 第一行
            <th>第一列</th>
            <th>第二列</th>
        </tr>
    </thead>
    <tbody> 表身:内容相关
        <tr> 第二行
            <td colspan="2">第一列, 第二行</td>
        </tr>
    </tbody>
</table>

<!--列表 标签系列-->
<ul>
  <li></li>
</ul>
<ol>
  <li></li>
</ol>
<dl>
  <dd>內容</dd>
</dl>

<!--others 标签系列-->
<fieldset>
    <legend>在边框上输出内容</legend>
</fieldset>
<iframe></iframe>
HTML 标签总览

 

HTML 基本语句

<head></head>
<body></body>

在身体部份可以定义:

<!DOCTYPE html>
<html lang="en">
    <head>
        <!--自闭合标签-->
        <meta charset="UTF-8"/>
        <!--标签属性 name='janice'-->
        <title name="'janice">s1</title>
        <link rel="shortcut icon" href="mikasa.icon" />
    </head>
    <body>
        Welcome to Janice's WebSite
        <!--主要的内容-->
        <!--内联和块级-->
        <div style="background-color: aquamarine">div-123-块级标签</div>
        <span style="background-color: palevioletred">span-111-行内标签</span>

        <!--符号-->
        &lt;a&nbsp;b&gt;

        <!--段落和换行-->
        <p>line1: Life is short! you need Python<br/>line2: Life is short! you need Python<br/></p>

        <!--标题-->
        <h1>Title 1</h1>
        <h2>Title 2</h2>
        <h3>Title 3</h3>
        <h4>Title 4</h4>
        <h5>Title 5</h5>
        <h6>Title 6</h6>
        <!--<h6 style="font-size: 20px;">Title 6</h6>-->

        <!--a 标签-->
        <a href="http://spark.apache.org">Spark: 直接跳傳到目標網站</a> <br/>
        <a href="http://spark.apache.org" target="_blank">Spark: 打開新貢面跳傳到目標網站</a>

        <br/>

        <!--寻找页面 id=i1 的标签,将其标签的内容放置在页面的顶部-->
        <a href="#i1">第一章</a> <!--这里一按,会跳传到 id=i1-->
        <a href="#i2">第二章</a>
        <a href="#i3">第三章</a>

        <!--每一个标签的id属性值不允许重复 id属性可以不写-->
        <div id="i1" style="height: 500px";>第一章内容</div>
        <div id="i2" style="height: 500px";>第二章内容</div>
        <div id="i3" style="height: 500px";>第三章内容</div>

    </body>
</html>
HTML基本语句

 

HTML Body 部份有两种很重要的标签:分别是

  1. div - 块级标签,它的特点是占用整行
    <div style="background-color: aquamarine">div-123-块级标签</div>
    div标签
  2. span - 行内标签,它的特点是只占用一块位置
    <span style="background-color: palevioletred">span-111-行内标签</span>
    span标签

Input 标签

  1. text
    <p>用户名: <input type="text" /> </p>
    <p>用户名: <input type="text" name="user" /> </p>
    input type="text"
  2. password
    <p>密码: <input type="password" /> </p>
    <p>密码: <input type="password" name="pswd" /> </p>
    input type="password"
  3. radio - 有 name、value 和 checked 属性,name 相同则互斥
    <p>性别(单选框):
        <br/><input type="radio" name="gender"/>
        <br/><input type="radio" name="gender"/>
    </p>
    
    <p>性别(单选框):
        <br/><input type="radio" name="gender" value="1" />
        <br/><input type="radio" name="gender" value="0" />
    </p>
    input type="radio"
  4. checkbox - 有 name、value 和 checked 属性
    <p>爱好(复选框):
        <br/>篮球   <input type="checkbox" name="hobbies"/>
        <br/>足球   <input type="checkbox" name="hobbies"/>
        <br/>游泳   <input type="checkbox" name="hobbies"/>
        <br/>瑜伽   <input type="checkbox" name="hobbies"/>
        <br/>赛车   <input type="checkbox" name="hobbies"/>
    </p>
    
    <p>爱好(复选框):
        <br/>篮球   <input type="checkbox" name="hobbies" value="1" />
        <br/>足球   <input type="checkbox" name="hobbies" value="2" />
        <br/>游泳   <input type="checkbox" name="hobbies" value="3" />
        <br/>瑜伽   <input type="checkbox" name="hobbies" value="4" />
        <br/>赛车   <input type="checkbox" name="hobbies" value="5" />
    </p>
    input type="checkbox"
  5. file - 要在 <form></form> 中配合 enctype="multipart/form-data" 来使用
    <p>文件: <input type="file"/> </p>
    <p>文件: <input type="file" name="fafafa"> </p>
    input type="file"
  6. button - 默认什么功能都没有,要配合 JS 
    <input type="button" value="Button">
    <input type="button" value="Button" name="btn123">
    input type="button"
  7. reset
    <input type="reset" value="Reset">
    input type="reset"
  8. submit - 提交表单
    <input type="submit" value="Submit">
    input type="submit"

Select 标签

select 有 name, size, mutiple, value属性,可以定义 optgroup 作为下拉框的分组显示

<p>
    城市:
    <select>
        <option>香港</option>
        <option>上海</option>
        <option>杭洲</option>
        <option>深圳</option>
    </select>
    <select>
        <optgroup label="广东省">
            <option>香港</option>
            <option>深圳</option>
        </optgroup>
         <optgroup label="江苏省">
            <option>上海</option>
            <option>杭洲</option>
        </optgroup>

    </select>
    <select multiple size="4">
        <option>香港</option>
        <option>上海</option>
        <option>杭洲</option>
        <option>深圳</option>
    </select>
</p>


    
<p>
    <select name="city">
        <option value="1">上海</option>
        <option value="2">广洲</option>
        <option value="3">香港</option>
    </select>
</p>
select 标签

textarea 标签

<p>备注: <textarea> </textarea></p>
textarea 标签

form 标签: action/ method/ enctype

以 <form></form> 标签发数据到后台是发两部份的数据:请求头和请求体。

  • 如果用 GET 的方式发送数据,数据会放在 URL 中然后再把整条 URL 发到服户器后台,请求体此时是空的;
  • 如果用 POST 的方式发送数据,数据内容会放在请求体中然后再发到服户器后台;

<form>
    <input type="text" />
</form>
<form>
    <div style="border: 1px solid red;">
        <p>用户名: <input type="text" /> </p>
        <p>密码: <input type="password" /> </p>
        <!--<p>邮箱: <input type="email" /> </p>-->
        <p>性别(单选框):
            <br/><input type="radio" name="gender"/>
            <br/><input type="radio" name="gender"/>
        </p>
        <p>爱好(复选框):
            <br/>篮球   <input type="checkbox" name="hobbies"/>
            <br/>足球   <input type="checkbox" name="hobbies"/>
            <br/>游泳   <input type="checkbox" name="hobbies"/>
            <br/>瑜伽   <input type="checkbox" name="hobbies"/>
            <br/>赛车   <input type="checkbox" name="hobbies"/>
        </p>
        <p>
            城市:
            <select>
                <option>香港</option>
                <option>上海</option>
                <option>杭洲</option>
                <option>深圳</option>
            </select>
            <select>
                <optgroup label="广东省">
                    <option>香港</option>
                    <option>深圳</option>
                </optgroup>
                 <optgroup label="江苏省">
                    <option>上海</option>
                    <option>杭洲</option>
                </optgroup>

            </select>
            <select multiple size="4">
                <option>香港</option>
                <option>上海</option>
                <option>杭洲</option>
                <option>深圳</option>
            </select>
        </p>
        <p>文件: <input type="file"/> </p>
        <p>备注: <textarea> </textarea></p>
        <input type="submit" value="Submit">
        <input type="button" value="Button">
        <input type="reset" value="Reset">
    </div>
</form>
form 标签(例子一) 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>s4</title>
</head>
<body>
    <!-- action 是那个地址就会发送到那个地址上 -->
    <!-- 程序默认是以 get 的方法提交的 -->
    <form action='https://www.sogou.com/web' method="post" enctype="multipart/form-data">
        <input type="text" name="user" />
        <input type="password" name="pswd" /><input type="radio" name="gender" value="1" /><input type="radio" name="gender" value="0" />
        <!-- {'query':'blablablablab'}-->
        <!-- 默應提交到本地路徑 -->
        <p>
            爱好:
            篮球 <input type="checkbox" name="favour" value="1" />
            足球 <input type="checkbox" name="favour" value="2" />
            棒球 <input type="checkbox" name="favour" value="3" />
        </p>
        <p>文件:
            <input type="file" name="fafafa">
        </p>
        <p>
            <select name="city">
                <option value="1">上海</option>
                <option value="2">广洲</option>
                <option value="3">香港</option>
            </select>
        </p>
        <p>
            备注: <textarea name="extra"></textarea>
        </p>
        <input type="submit" value="提交">
    </form>
    <!-- submit 的時候把下面的數據發送到 action 的目標 URL中 -->
    <hr />

    <form action='https://hk.search.yahoo.com/search'>
        <input type="text" name="p" />
        <input type="submit" value="提交">
    </form>
</body>
</html>
form标签(例子二) 

ul/ ol/ dl 标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>s5</title>
</head>
<body>
    <ul>
        <li>1 python</li>
        <li>2 scala</li>
        <li>3 java</li>
    </ul>

    <ol>
        <li>1 python</li>
        <li>2 scala</li>
        <li>3 java</li>
    </ol>

    <dl>
        <dt>DT</dt>
        <dd>dd</dd>
        <dd>dd</dd>
        <dd>dd</dd>
        <dd>dd</dd>
        <dd>dd</dd>
        <dt>DT</dt>
        <dd>dd</dd>
        <dd>dd</dd>
        <dd>dd</dd>
        <dd>dd</dd>
        <dd>dd</dd>
    </dl>
</body>
</html>
ul/ ol/ dl标签

table 标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>s6</title>
</head>
<body>
    <table border="1">
        <tr>
            <th colspan="2">标题一</th>
            <th>标题二</th>
            <th>标题三</th>
        </tr>
        <tr>
            <td>内容一</td>
            <td rowspan="2">内容二</td>
            <td>内容三</td>
            <td>内容四</td>
        </tr>
        <tr>
            <td>内容一</td>
            <td>内容二</td>
            <td>内容三</td>
        </tr>
        <tr>
            <td>内容一</td>
            <td>内容二</td>
            <td>内容三</td>
            <td>内容四</td>
        </tr>
    </table>
    <hr />
    <table border="1">
        <thead>
            <tr>
                <th>第一列</th>
                <th>第二列</th>
                <th>第三列</th>
                <th>第四列</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>第一列</td>
                <td>第二列</td>
                <td>第三列</td>
                <td>第四列</td>
            </tr>
            <tr>
                <td>第一列</td>
                <td>第二列</td>
                <td>第三列</td>
                <td>第四列</td>
            </tr>
        </tbody>
    </table>
    <fieldset>
        <legend>nice and beautiful legend</legend>
        <p>Username</p>
        <p>Password</p>
    </fieldset>
</body>
</html>
table 标签

fieldset

<fieldset>
    <legend>nice and beautiful legend</legend>
    <p>Username</p>
    <p>Password</p>
</fieldset>
fieldset 标签

iframe 标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>s7</title>
</head>
<body>
    <h1>Janice's HomePage</h1>
    <iframe style="width:100%; height: 2000px;" src="http://autohome.com.cn"></iframe>
</body>
</html>
iframe 标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>s3</title>
</head>
<body>
    <form>
        <input type="text" />
    </form>
    <form>
        <div style="border: 1px solid red;">
            <p>用户名: <input type="text" /> </p>
            <p>密码: <input type="password" /> </p>
            <!--<p>邮箱: <input type="email" /> </p>-->
            <p>性别(单选框):
                <br/><input type="radio" name="gender"/>
                <br/><input type="radio" name="gender"/>
            </p>
            <p>爱好(复选框):
                <br/>篮球   <input type="checkbox" name="hobbies"/>
                <br/>足球   <input type="checkbox" name="hobbies"/>
                <br/>游泳   <input type="checkbox" name="hobbies"/>
                <br/>瑜伽   <input type="checkbox" name="hobbies"/>
                <br/>赛车   <input type="checkbox" name="hobbies"/>
            </p>
            <p>
                城市:
                <select>
                    <option>香港</option>
                    <option>上海</option>
                    <option>杭洲</option>
                    <option>深圳</option>
                </select>
                <select>
                    <optgroup label="广东省">
                        <option>香港</option>
                        <option>深圳</option>
                    </optgroup>
                     <optgroup label="江苏省">
                        <option>上海</option>
                        <option>杭洲</option>
                    </optgroup>

                </select>
                <select multiple size="4">
                    <option>香港</option>
                    <option>上海</option>
                    <option>杭洲</option>
                    <option>深圳</option>
                </select>
            </p>
            <p>文件: <input type="file"/> </p>
            <p>备注: <textarea> </textarea></p>
            <input type="submit" value="Submit">
            <input type="button" value="Button">
            <input type="reset" value="Reset">
        </div>
    </form>
</body>
</html>
完整HTML代码效果(例子一)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>s4</title>
</head>
<body>
    <!-- action 是那个地址就会发送到那个地址上 -->
    <!-- 程序默认是以 get 的方法提交的 -->
    <form action='https://www.sogou.com/web' method="post" enctype="multipart/form-data">
        <p> 用户名: 
            <input type="text" name="user" />
        </p>
        <p> 密码: 
            <input type="password" name="pswd" />
        </p><input type="radio" name="gender" value="1" /><input type="radio" name="gender" value="0" />
        <!-- {'query':'blablablablab'}-->
        <!-- 默應提交到本地路徑 -->
        <p>
            爱好:
            篮球 <input type="checkbox" name="favour" value="1" />
            足球 <input type="checkbox" name="favour" value="2" />
            棒球 <input type="checkbox" name="favour" value="3" />
        </p>
        <p>文件:
            <input type="file" name="fafafa">
        </p>
        <p>
            <select name="city">
                <option value="1">上海</option>
                <option value="2">广洲</option>
                <option value="3">香港</option>
            </select>
        </p>
        <p>
            备注: <textarea name="extra"></textarea>
        </p>
        <input type="submit" value="提交">
    </form>
    <!-- submit 的時候把下面的數據發送到 action 的目標 URL中 -->
    <hr />

    <form action='https://hk.search.yahoo.com/search'>
    <p>    Yahoo!Search: 
        <input type="text" name="p" />
        <input type="submit" value="提交">
    </p>
    </form>
</body>
</html>
完整HTML代码效果(例子二)

 

CSS 介绍

在CSS中你可以有3种不同的存放位置来定义你的 CSS 文件:标签属性 > HTML 头部的 > 单独的 CSS 文件

  1. 单独的 CSS 文件 (优先级:最低)
    /*单独的 CSS 文件 common.css*/
    div{
        background-color: darkslateblue;
        color: white;
    }
    单独的 CSS 文件
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS-s2</title>
        <link rel="stylesheet" href="common.css"/>
    </head>
    <body>
        <div>9999999</div>
    </body>
    </html>
    文件引用 common.css
  2. 在同一个 HTML 文件的头部 <title></title> 中写入 style 样式 (优先级: 高)
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS-S1</title>
        <!--HTML 头部的-->
        <style>
            div{
                background-color: darkgreen;
                color: white;
            }
        </style>
    </head>
    <body>
        <!--标签属性-->
        <div style="background-color: red; color: white;">88</div>
        <div>9999</div>
    </body>
    </html>
    HTML 头部的
  3. 标签属性 (优先级:最高),在每个 HTML标签里写上 style 样式 <div style=""></div> 
    <div style="background-color: red; color: white;">88</div>
    标签属性 
  4. 但如果两个选择器有重合的话,取于 css 样式的顺序,e.g. 在以下例子 c1 会比 c2 更优先
    /** c1更优先 */
    .c1{
        background-color: red;
    }
    .c2{
        background-color: purple;
    }
    
    <div class="c2 c1"></div> 
    重合顺序

     

在 CSS中的检签选择器

  1. 检签选择器 e.g. div{ } / body{ } / span{ }
  2. id 选择器 e.g. #id1{ }
  3. class 选择器 e.g. .c1{ }
  4. 层级选择器,是以空格分开 e.g. span div{ } / .c1 .c2{ }
  5. 组合选择器,是以","分开 e.g. #id1, #id2, #id2
  6. 属性选择器, 对选到的标签 e.g. input[type='text'] / input[type='password'] / .c1[n='alex']

在CSS中的效果

div{
    height: 48px;           高度
    width: 80%;             宽度(像素/百分比)
    border: 1px solid red;  边框
    color: black;           字体颜色
    font-size: 16px;        字体大小
    font-weight: bold;      字体加粗;
    text-align: center;     水平置中
    line-height: 48;        垂直方向根据标签高度
    opacity: 0.6;           透明度
    display: none;          是否显示在页面中
    float: right;           向右漂起来
    clear: both;            
    z-index: 10;            权重-愈大愈重要
    overflow: auto;         
    cursor: pointer;        
    position: absolute;
    min-height: 100px;      最少高度
    min-width: 50px;        最少宽度
    border-radius: 50%;     变成一个员的图案

}
CSS 总览 
  1. color 字体颜色
  2. font-size 字体大小
  3. background-color 背景颜色
  4. background-image
  5. background-repeat
  6. background-position
  7. border e.g. <div style="border-位置: 宽度px 样式 颜色;"></div>
    <div style="border: 1px;"></div>
    <div style="border-top: 1px dotted red;"></div>
  8. height
  9. width: 在外部定义整体的宽度
  10. float: left
  11. :hover
    ul li:hover { background-color: darkgrey;}
  12. :before
  13. :after
  14. display & visibility
    • none
    • inline
    • block
    • inline-block (默应有 3px 的宽度)
  15. boundary
    • margin
    • padding
  16. position
    • relative + absolute (加起来一起用)
    • absolute (自己单独用,它可以定位在一个窗口上,但是不会固定在特定的位置上)
      <div style="position: relative; width: 500px; height: 200px; border: 1px solid red; margin: 0 auto;">
          <div style="position: absolute; left: 0; bottom: 0; width: 50px; height: 50px; background-color: black"></div>
      </div>
    • fixed (自己单独用,它可以固定在窗口的某个位置,并且通个 right, bottom, left, top 来定义它的位置)
      <span style="background-color: black; position: fixed; bottom: 60px; right: 70px; color:white;">Back to Top</span>
  17. opacity
  18. z-index
  19. xxxxx

实战案例一

动手做一个对话框,在这个例子中,有几点需要注意的:

  1. 画一个有背景颜色的框,然后把它置中
  2. 设置三层架构,定义 shawdon layer 
  3. 运用 z-index 去设置优先值
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo-s1</title>
    <style>
        .model {
            background-color: #dddddd;
            width: 400px;
            height: 300px;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -191px;
            margin-top: -275px;
            z-index: 10;
        }
        .shadow {
            /*background-color: black;*/
            /*opacity: 0.6;*/
            background-color: rgba(0,0,0,0.6);
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            position: fixed;
            z-index: 9;
        }
        .hide {
            display: none;
        }

    </style>
</head>
<body>
    <input type="button" value="添加"/>
    <!--<div class="hide">对话框</div>-->

    <div class="shadow"></div>
    <div class="model">
        <input type="text"/>
        <input type="text"/>
        <input type="text"/>
        <input type="text"/>
    </div>
    <div style="height: 2000px"></div>
</body>
</html>
对话框实例

实战案例二

动手做一个网站,在这个例子中,有几点需要注意的:

  1. 把网站划分成三块:头、中间和脚 (Header, Body, Footer)
  2. 首先定义一个标题
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo-s2</title>
    <style>
        body {
            margin: 0;
            /*margin-top: 70px;*/
        }
        ul{
            margin: 0;
            list-style-type: none;
        }

        .pg-header{
            height: 44px;
            background-color: #006666;
            /*接照这个高度置中 44px*/
            line-height: 44px;
        }
        .w{
            width: 980px;
            margin: 0 auto;
            background-color: darkgrey;
        }

        ul li {
            float: right;
            padding: 0 8px 0 8px;
            color: white;
            cursor: pointer;
        }
        ul li:hover {
            background-color: darkgrey;
        }

    </style>
</head>
<body>
    <!--三层架构-->
    <div class="pg-header">
        <div class="w">
            <ul>
                <li>菜单一</li>
                <li>菜单二</li>
                <li>菜单三</li>
                <li>菜单四</li>
                <li>菜单五</li>
                <li>菜单六</li>
                <li>菜单七</li>
                <li>菜单八</li>
                <li>菜单九</li>
            </ul>
        </div>
    </div>
    <div class="pg-body"></div>
    <div class="pg-footer"></div>
</body>
</html>
网站标题实例

 

 

 

小知识点 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo-S9</title>
    <style>
        .c1:hover{
            background-color: cornflowerblue;
        }
        /*在c2 class 之前加一个*/
        .c2:before{
            content: '77777';
        }
        .c3:after{
            content: '999999';
        }
        .left {
            float: left
        }
        .clearfix{
            background-color: darkslategrey;
        }
        .clearfix:after{
            content: '.';
            clear: both;
            display: block;
            visibility: hidden;
            height: 0px;
        }
    </style>
</head>
<body>
    <div class="c1">123</div>
    <div class="c2">5555</div>
    <div class="c3">5555</div>
    <div class="c2 c3">44444</div>

    <div class="clearfix">
        <div class="left" style="height: 200px; background-color: darkseagreen">1</div>
        <div class="left">2</div>
    </div>


</body>
</html>
View Code
  1. 自定义小尖角
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>demo-s10</title>
        <style>
            /*自定义小尖角*/
            .icon{
                display: inline-block;
                border-top: 15px solid red;
                border-right: 15px solid transparent;
                border-bottom: 15px solid transparent;
                border-left: 15px solid transparent;
            }
        </style>
    </head>
    <body>
        <div class="icon"></div>
    </body>
    </html>
    自定义小尖角例子
  2. 后台管理页面设计
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>layout-2</title>
        <style>
            body {
                margin: 0;
            }
            .pg-header{
                height: 48px;
                background-color: #006666;
            }
            .pg-body .body-menu{
                position: absolute;
                top: 48px;
                bottom: 0;
                left: 0;
                width: 200px;
                background-color: cornflowerblue;
    
            }
            .pg-body .body-content{
                position: absolute;
                top: 48px;
                bottom: 0;
                left: 200px;
                right: 0;
                background-color: lightgoldenrodyellow;
                overflow: auto;
    
            }
        </style>
    </head>
    <body>
        <div class="pg-header"></div>
        <div class="pg-body">
            <div class="body-menu"></div>
            <div class="body-content">
                Python <br/>Python <br/>Python <br/>Python <br/>Python <br/>Python <br/>Python <br/>Python <br/>
                Python <br/>Python <br/>Python <br/>Python <br/>Python <br/>Python <br/>Python <br/>Python <br/>
                Python <br/>Python <br/>Python <br/>Python <br/>Python <br/>Python <br/>Python <br/>Python <br/>
                Python <br/>Python <br/>Python <br/>Python <br/>Python <br/>Python <br/>Python <br/>Python <br/>
                Python <br/>Python <br/>Python <br/>Python <br/>Python <br/>Python <br/>Python <br/>Python <br/>
                Python <br/>Python <br/>Python <br/>Python <br/>Python <br/>Python <br/>Python <br/>Python <br/>
                Python <br/>Python <br/>Python <br/>Python <br/>Python <br/>Python <br/>Python <br/>Python <br/>
                Python <br/>Python <br/>Python <br/>Python <br/>Python <br/>Python <br/>Python <br/>Python <br/>
                Python <br/>Python <br/>Python <br/>Python <br/>Python <br/>Python <br/>Python <br/>Python <br/>
                Python <br/>Python <br/>Python <br/>Python <br/>Python <br/>Python <br/>Python <br/>Python <br/>
            </div>
        </div>
        <div class="pg-footer"></div>
    </body>
    </html>
    后台管理页面设计例子
  3. xxxxxxx

 

 

 

 

 

 

 

 

參考資料 

银角大王:

金角大王:

其他:Mozilla Web Development | CSS-Tricks

 

 

posted @ 2016-11-20 10:17 無情 阅读(...) 评论(...) 编辑 收藏