您的位置: 首页  >  IT文章  >  HTML+CSS

HTML+CSS

分类: IT文章 • 2022-09-01 10:31:27

目录

HTML

CSS

HTML

1、标签分类

  • link：设置网页标题图标

  • div：块级标签，自占一行；

  • span：内联标签，有多少内容占多少地方

  • <小于，>大于， 空格；注意分号不要少；

  • p表示段落，<br/>换行

  • H1-H5标题大小默认递减，也可以自定制

  • a标签表示跳转，target='_blank'：表示在新的页面打开跳转；a标签内部如果有img标签，记得去掉边框（边框只在IE浏览器中显示），border:0;

  • 锚点：href="#1"，链接到ID等于1的标题；

  • 常见的块级元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。

  • 常见的内联元素有span、a、strong、em、label、input、select、textarea、img、br等

<!DOCTYPE html>
<html lang="en">
    <head>
        <!--自闭和标签-->
        <meta charset="UTF-8">
        <!--2秒后刷新，并跳转-->
        <!--<meta http-equiv="Refresh" Content="2;Url=http://weibo.com"/>-->
        <title>Charlie语录</title>
        <!--设置网页标题图标-->
        <link rel="shortcut icon" href="images/02.jpg">
    </head>
    <body>
        <!--div：块级标签，自占一行；span：行内标签，有多少内容占多少地方-->
        <div style="background-color: chocolate">123</div>
        <span style="background-color: aqua">123</span>
        <!--<小于，>大于， 空格-->
        <a b>
        <!--p表示段落，<br/>换行-->
        <p>charlie,<br/>have a nice day!</p>
        <!--H1-H5标题大小默认递减，也可以自定制-->
        <H1>H1</H1>
        <H2>H2</H2>
        <H3 style="font-size: 40px;">H3</H3>
        <!--a标签表示跳转，_blank表示在新的页面打开跳转-->
        <a href="http://www.baidu.com">百度1</a>
        <a href="http://www.baidu.com" target="_blank">百度2</a>
        <!--锚点-->
        <a href="#1">第一章</a>
        <a href="#2">第二章</a>
        <div id="1" style="height: 300px">第一章内容</div>
        <div id="2" style="height: 300px">第二章内容</div>
    </body>
</html>

2、菜单样式

  • border：添加边框，以下所有内容都在框内

  • input：输入标签，type类型：

    • text：输入文本，

    • password：输入密文,

    • email：输入邮箱，浏览器会自动检测输入是否正确；

    • radio：圆形框，默认可以多选，name属性相同表示不能同时选择；加上checked='checked'，表示默认被选中；

    • checkbox复选框，方形框，name相同，value不同；加上checked='checked'，表示默认被选中；

    • file：选择文件

    • button：普通按钮

    • submit：提交当前表单

    • reset：重置当前表单；

    • <input value='123'/>：文本框内默认就有一个123

  • select：下拉菜单；

    • 基本使用：<option>中国</option>

    • <option selected='selected'>广州</option>：表示默认显示；

    • 属性multiple：显示下拉菜单的内容，size指定显示个数，这里可以按住Ctrl多选；

    • 下拉菜单指定分组：<optgroup label="河北省"></optgroup>

  • textarea：多行文本输入，<textarea>123</textarea>，默认值123；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择菜单</title>
    <link rel="shortcut icon" href="images/02.jpg">
</head>
<body>
    <form><!--form表单，只提交表单内部的内容-->
        <!--border添加绿色框，以下所有内容都在框内-->
        <div style="border: 1px solid green">
            <!--text输入文本，password输入密文,email输入邮箱-->
            <p> 用户名：<input type="text" /> </p>
            <p> 密码：<input type="password" /> </p>
            <p> 邮箱：<input type="email" /> </p>
            <!--radio添加选项,默认可以多选，name属性相同表示不能同时选择-->
            <p> 性别（单选框）：
                <br/>男<input type="radio" name="aa"/>
                <br/>女<input type="radio" name="aa"/>
            </p>
            <p>爱好（复选框）：<!--checkbox复选框，方形框-->
                <br/>篮球<input type="checkbox" />
                <br/>足球<input type="checkbox" />
                <br/>网球<input type="checkbox" />
            </p>
            <!--选择文件标签-->
            <p>选择文件：<input type="file"/></p>
            <p>城市（下拉菜单）：
                <select>
                    <option>中国</option>
                    <option>美国</option>
                </select>
                <select>
                    <option>北京</option>
                    <option>上海</option>
                </select>
                <!--multiple,显示下拉菜单，size指定个数，可以多选-->
                <select multiple size="2">
                    <option>北京</option>
                    <option>上海</option>
                    <option>杭州</option>
                    <option>宁波</option>
                </select>
                <!--下拉菜单指定分组-->
                <select>
                    <optgroup label="河北省"></optgroup>
                    <option>石家庄</option>
                    <option>沧州</option>
                    <optgroup label="河南省"></optgroup>
                    <option>郑州</option>
                    <option>洛阳</option>
                </select>
            </p>
            <!--多行文本输入-->
            <p>备注：<textarea></textarea></p>
            <p><!--提交-->
                <input type="submit" value="提交"/>
                <!--普通按钮，默认没有任何功能-->
                <input type="button" value="按钮"/>
                <!--重置当前表单内的内容-->
                <input type="reset" value="重置"/>
            </p>
        </div>
    </form>
</body>
</html>

3、表单form

  • action：设置提交URL

  • method：提交方式，post--发送，get--获取；

  • enctype：发送文件方式，例如：enctype="multipart/form-data"

  • <hr style="background-color: green" size="20px"/>--生成一条横线

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表单</title>
        <link rel="shortcut icon" href="images/02.jpg">
    </head>
    <body><!--form action设置提交网址-->
        <form action="http://www.baidu.com/s"><!--百度-->
            <!--name=wd设置提交内容-->
            <input type="text" name="wd"/>
            <!--value设置单选框提交内容-->
            男<input type="radio" name="gender" value="1"/>
            女<input type="radio" name="gender" value="0"/>
            <br /><input type="submit" value="提交"/>
        </form>
        <form action="http://www.sogou.com/web"><!--搜狗-->
            <input type="text" name="query"/>
            <br /><input type="submit" value="提交"/>
        </form>
        <hr style="background-color: green" size="20px"/><!--生成一条横线-->
        <!--Django自定制，method指定发送方式，enctype发送文件方式-->
        <form action="http://127.0.0.1:8000/" method="post" enctype="multipart/form-data">
            <!--name=wd设置提交内容-->
            用户名：<input type="text" name="user"/>
            <br/>密 码：<input type="password" name="pwd"/>
            <p>
                <!--value设置提交内容-->
                男<input type="radio" name="gender" value="1"/>
                女<input type="radio" name="gender" value="0"/>
            </p>
            <p>爱好：
                篮球<input type="checkbox" name="favor" value="1"/>
                足球<input type="checkbox" name="favor" value="0"/>
            </p>
            <p>上传文件：<input type="file" name="fff"/></p>
            <p>下拉菜单：
                <select name="city"><!--指定一个数字value，节省流量-->
                    <option value="1">北京</option>
                    <option value="2">上海</option>
                </select>
            </p>
            <p>备注：<textarea name="extra"></textarea></p>
            <br /><input type="submit" value="提交"/>
        </form>
    </body>
</html>

4、表格table

  • <table border="2">--创建表格，边框宽度2；
  • colspan：左右合并单元格；
  • rowspan：上下合并单元格；
<body>
    <table border="2"><!--创建表格，完整的写法-->
        <thead><!--标题-->
            <tr><!--行-->
                <th>标题一</th><!--th标题列，字体加粗-->
                <th>标题二</th>
                <th>标题三</th>
            </tr>
        </thead>
        <tbody><!--内容-->
            <tr>
                <td>第一列</td><!--td内容列-->
                <td>第二列</td>
                <td>第三列</td>
            </tr>
            <tr>
                <td>第一列</td><!--td内容列-->
                <td>第二列</td>
                <td>第三列</td>
            </tr>
        </tbody>
    </table>
    <table border="2"><!--创建表格，简单的写法-->
        <tr><!--colspan左右合并单元格-->
            <th colspan="2">标题一</th>
            <th colspan="2">标题二</th>
        </tr>
        <tr><!--rowspan上下合并单元格-->
            <td rowspan="2">内容一</td>
            <td>内容二</td>
            <td>内容三</td>
            <td>内容四</td>
        </tr>
        <tr>
            <td>内容二</td>
            <td>内容三</td>
            <td>内容四</td>
        </tr>
    </table>
</body>

5、其他标签

  • label：点击文本，自动触发input框，<label for="name">指定触发的框；

  • ul标签：自动在文本前添加点；子标签为：li

  • ol标签：自动在文本前添加数字；子标签：li

  • dl标签：在文本前添加标题；子标签：dt大标题，dd小标题；

  • fieldset：自定义字段集，所有内容都在一个框内

  • iframe：设置一个框架，里面显示连接的网站内容；

<body><!--label点击文本，自动触发input框-->
    <label for="name">
        姓名：
    <input id="name" type="text"/>
    </label>
    <label for="marry">
        婚否：
    <input id="marry" type="checkbox"/>
    </label>
    <ul><!--在文本前加上点-->
        <li>Charlie</li>
        <li>james</li>
        <li>paul</li>
    </ul>
    <ol><!--在文本前加上数字-->
        <li>Charlie</li>
        <li>james</li>
        <li>paul</li>
    </ol>
    <dl><!--在文本前加上标题-->
        <dt>第一章</dt>
        <dd>James</dd>
        <dt>第二章</dt>
        <dd>科比</dd>
    </dl>
    <fieldset><!--自定义字段集，所有内容都在一个框内-->
        <legend>登陆</legend>
        <p>用户名：<input type="text"/></p>
        <p>密码：<input type="password"/></p>
    </fieldset>
    <h1>微博</h1><!--设置一个框架，里面显示连接的网站内容-->
    <iframe style=" 100%;height: 2000px" src="http://weibo.com"></iframe>
</body>

CSS

1、基本样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .c1{
            color: blueviolet;
            /*background-color: chartreuse;*/
            /*background-color: #00EE00;!*十六进制RGB颜色码*!*/
            background-color: rgb(20,250,150);/*RGB方式*/
            font-size: 50px;
            height: 100px;/*没有100%高度*/
            width: 100%;/*有100%宽度，不同浏览器宽度不同*/
        }
    </style>
</head>
<body>
    <div class="c1">基本样式</div>
</body>
</html>

2、选择器

  • css存放位置：单独的css文件，html头部，标签属性；

  • 三个位置优先级：没有重复，就继承；重复的优先级由高到低顺序为：标签属性、头部、文件；头部的优先级又分为：#id>.class>div

# 样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：
      1 内联样式表的权值最高       style=""-------------------1000；
　　 2 统计选择符中的ID属性个数。    #id    －－－－－－－－－－－－－100
　　3 统计选择符中的CLASS属性个数。 .class  －－－－－－－－－－－－－10
     4 统计选择符中的HTML标签名个数。     p     －－－－－－－－－－－－－-1

  • 如果样式中加上!important，这个样式就无法被覆盖，例如：color=‘red’ !important；前提是这个样式没有优先级之分，必须是同级的，例如：display就不适用；

选择器分类：

  • div：标签选择器

  • i1：id选择器，不能是纯数字，ID不能重复

  • .c2：class选择器，class可以重复

  • .c1 p .c2：层级选择器，c2也可以用标签代替，背景色重叠，c1,c2的背景色都有；

  • .c3,.c4,.c5：组合选择器，逗号隔开；

  • .div[charlie="a"]：属性选择器；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!--css文件：优先级最低-->
    <link rel="stylesheet" href="style.css"/>
    <!--头部：优先级中间-->
    <style>
        /*标签选择器*/
        div{
            color: blue;
        }
        /*id选择器：不能是纯数字，ID不能重复*/
        #i1{
            font-size: 50px;
            background-color: purple;
        }
        /*class选择器，class可以重复*/
        .c1{
            font-size: 30px;
            background-color: aqua;
        }
        /*层级选择器，c2也可以用标签代替，背景色重叠，c1,c2的背景色都有*/
        .c1 p .c2{
            font-size: 50px;
            background-color: deeppink;
        }
        /*组合选择器，逗号隔开*/
        .c3,.c4,.c5{
            font-size: 30px;
            background-color: chartreuse;
        }
        /*属性选择器*/
        .c1[charlie='a']{
            color: orangered;
        }
    </style>
</head>
<body><!--标签属性：优先级最高-->
    <div style="background-color: palegreen;color: orangered">01</div>
    <div >02</div>
    <p id="i1">charlie</p>
    <a class="c1">a标签</a>
    <p class="c1" charlie="a">p标签</p>
    <span class="c1">span标签</span>
    <div class="c1">
        <p>
            <a class="c2">层级选择器</a>
        </p>
    </div>
    <div class="c3">c3组合</div>
    <div class="c4">c4组合</div>
    <div class="c5">c5组合</div>
</body>
</html>

3、图片样式

  • img标签：页面中直接显示图片，可以拉伸显示，例如：<img src="01.gif" style="height: 500px; 500px;">

  • alt属性：如果图片不存在就显示alt的值；例如：alt="图片"，如果图片不存在就显示“图片”两个字；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .img{  /*只有图片没有宽度和高度，是无法显示的*/
            background-image: url("02.gif");
            height: 400px;
            width: 100%;
            background-repeat: no-repeat;/*不重复显示同一张图*/
        }
        .jpg{
            background-image: url("01.jpg");
            height: 100px;
            width: 100px;
            background-repeat: no-repeat;
            /*调整显示位置,注意jpg格式显示窗口会固定大小的移动位置，GIF大小会变化*/
            background-position: -1134px -316px;
        }
    </style>
</head>
<body>
    <div class="img"></div>
    <div class="jpg"></div>
    <!--页面中显示图片，可以拉伸显示-->
    <img src="01.gif" style="height: 500px; 500px;">
</body>
</html>

4、位置position

  • fixed:固定在窗口某一位置；

  • absolute:位置固定,随着屏幕滚动；绝对定位，相对于relative的位置；

  • absolute会到父级中寻找relative，固定在relative所在父级的边框中；

<body>
    <div style="height: 1000px;background-color: #dddddd;"></div>
    <!--fixed:固定在窗口某一位置-->
    <div style="position: fixed;right: 10px;bottom: 0;font-size: 20px;">返回顶部</div>
    <!--absolute:位置固定,随着屏幕滚动-->
    <div style="position: absolute;left: 10px;bottom: 0;font-size: 20px;">屏幕滚动</div>
    <!--absolute会到父级中寻找relative，固定在relative所在父级的边框中-->
    <div style="border: 2px solid orangered;height: 200px; 200px;position: relative;">
        <div style="position: absolute;right: 10px;bottom: 0;font-size: 20px;">固定窗口</div>
    </div>
</body>

5、边框border

  • border-top上、right右、bottom下、left左，可设置只有一边有边框；如果两个都有，就会重叠显示，可以创建一个四边颜色都不一样的边框；

  • solid-实线

  • dotted-点状虚线

  • dashed-线状虚线

<style>
        .c1{
            /*border边框：solid-实线*/
            border: 10px solid lightgreen;
            /*border-top上、right右、bottom下、left左，可设置只有一边有边框*/
            /*如果两个都有，就会重叠显示，可以创建一个四边颜色都不一样的边框*/
            border-bottom: 10px solid deeppink;
            height: 100px;
        }
        .c2{
            /*dotted-点状虚线，*/
            border: 10px dotted blueviolet;
            height: 100px;
        }
        .c3{
            /*dashed-线状虚线，*/
            border: 10px dashed orangered;
            height: 100px;
        }
 </style>

6、display

  • none：隐藏内容和位置

  • visibility:hidden：隐藏内容，位置还在

  • inline：块级标签变为行内标签

  • block：行内标签变为块级标签

  • inline-block同时具有有行内和块级标签的属性，默认只占用自身大小，也可以设置宽度，高度；

  • display:inline-block的时候都会有额外的三像素，所以要加上:float：left
<body>
     <!--display: none;隐藏内容和位置-->
    <div style="background-color: blue;height: 30px;display: none;">charlie</div>
    <!--visibility: hidden隐藏内容，位置还在-->
    <div style="background-color: blue;height: 30px;visibility: hidden;">charlie</div>
    <!--display: inline块级标签变为行内标签-->
    <div style="display: inline;background-color: deepskyblue">好好学习</div>
    <!--display: block行内标签变为块级标签-->
    <span style="display: block;background-color: gold">好好学习</span>
    <!--纯正的行内标签无法设置宽度高度，自身多大就占多大-->
    <!--display: inline-block同时具有有行内和块级标签的属性，默认只占用自身大小，也可以设置宽度，高度-->
    <span style="display: inline-block;background-color: aqua; 400px">好好学习</span>
</body>

7、外边距和内边距

  • margin:外边距，-left左边距，-right右边距，-top上边距，-bottom下边距；

  • padding:内边距，自己会变大，-left左边距，-right右边距，-top上边距，-bottom下边距；

  • 块级标签按百分比显示width，float表示靠左或靠右；

  • width使用百分比显示时，要在外部定义一个宽度框架，这样缩放页面时就不会乱；
<body>
    <!--margin:外边距，-left左边距，-right右边距，-top上边距，-bottom下边距-->
    <!--默认上下左右各加10px-->
    <div style="border: 3px solid lawngreen;height: 70px;">
        <div style="background-color: deepskyblue;height:30px;margin: 10px;"></div>
    </div>
    <!--padding:内边距，自己会变大，-left左边距，-right右边距，-top上边距，-bottom下边距-->
    <!--默认上下左右各加10px-->
    <div style="border: 3px solid orangered;height: 70px;">
        <div style="background-color: deepskyblue;height:30px;padding: 10px;"></div>
    </div>
    <div style="border: 2px solid orangered; 500px;"> <!--块级标签按百分比显示，float表示靠左或靠右-->
        <div style="20%;background-color: chocolate;float: left">大儿子</div>
        <div style="80%;background-color: aqua;float: left">小儿子</div>
        <!--加上这句表示子标签在飘起来之后仍然在父标签内,这里只适用于没有高度的边框-->
        <div style="clear: both;"></div>
    </div>
</body>

8、cursor鼠标样式

<!--cursor给不同的标签设置鼠标接触时的样式-->
    <a style="cursor: pointer" href="http://www.baidu.com">链接</a>
    <span style="cursor: help">帮助</span>
    <span style="cursor: wait">等待</span>
    <span style="cursor: move">移动</span>
    <span style="cursor: crosshair">坐标</span>

9、CSS补充

  • 十六进制RGB颜色对照表：https://www.114la.com/other/rgb.htm

  • 图标字体库和CSS网站：http://www.fontawesome.com.cn/faicons/

  • opacity：透明度0-1，要和background-color结合使用；

  • background-color:rgba(0,0,0,0.6)同时设置颜色和透明度，单独使用；

  • z-index：优先级，数值越大越靠上；

  • 去除a标签下面的下划线：a{text-decoration:none}

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

  • line-height：30px;表示按30px高度的中心线上下居中；
<div style="text-align: center;height: 100px; 100px;border: 1px solid red;line-height: 100px;">ndddd</div>

10、前端文件夹模板Program

  • app：HTML文件，如果少的话，可以放在最外边；

  • images：图片

  • css：css文件

  • js：js文件

  • plugins：插件

11、鼠标触碰时的样式

  • .c1:hovor{backgound-color:背景色；color：字体颜色；}

  • .c1:before{content: '999';}:在块内容前面加上一些内容；

  • .c1:after{content: '999';}:在块内容后面加上一些内容；

12、HTML中快速写想同类型标签的方法（代码写标签）

# div   tab
<div></div>

# div.main>ul>li.c*4    tab
<div class="main">
    <ul>
        <li class="c"></li>
        <li class="c"></li>
        <li class="c"></li>
        <li class="c"></li>
    </ul>
</div>

13、清除浮动

  • 在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。

#clear语法：
clear : none | left | right | both

#取值：
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象

#但是需要注意的是：clear属性只会对自身起作用，而不会影响其他元素。
如果一个元素的右侧有一浮动对象，而这个元素设置了不允许右边有浮动对象，
即clear：right，则这个元素会自动下移一格，达到本元素右边没有浮动对象的目的。

方式1(推荐):clearfix

  • 如果网页有背景色，里面的每一个块基本都有float，由于页面没有绝对高度，所以就需要一个clearfix样式，能够让背景色一直显示出来；整段代码就相当于在浮动元素后面跟了个宽高为0的空div，然后设定它clear:both来达到清除浮动的效果。之所以用它，是因为，你不必在html文件中写入大量无意义的空标签，又能清除浮动。只要写一个.clearfix就行了，然后在需要清浮动的元素中 添加clearfix类名就好了。 　
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .left{
            float: left;
        }
        .clearfix{
            background-color: #0a9a13;
        }
        .clearfix:after{
            /*默认after添加的内容是一个span标签*/
            content: '.';
            /*所以需要改成块级标签*/
            display: block;
            clear: both;
            /*!*隐藏后面添加的内容*!*/
            visibility: hidden;
            /*!*去掉多余的高度*!*/
            height: 0;
        }
    </style>
</head>
<body>
    <!--如果网页有背景色，里面的每一个块基本都有float，
    由于页面没有绝对高度，所以就需要一个clearfix样式，
    能够让背景色一直显示出来；-->
    <div class="clearfix">
        <div class="left">大儿子</div>
        <div class="left">小儿子</div>
    </div>
</body>
</html>

方式2：

overflow:hidden;

overflow：hidden的含义是超出的部分要裁切隐藏，float的元素虽然不在普通流中，但是他是浮动在普通流之上的，可以把普通流元素+浮动元素想象成一个立方体。如果没有明确设定包含容器高度的情况下，它要计算内容的全部高度才能确定在什么位置hidden，这样浮动元素的高度就要被计算进去。这样包含容器就会被撑开，清除浮动。

13、插件

  • font-awesome.min.css：一行显示，上传时使用；写代码就用不带min的格式；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="plugins/font-awesome-4.7.0/css/font-awesome.css"/>
</head>
<body>
    <i class="fa fa-camera" aria-hidden="true"></i>
</body>
</html>

14、尖角样式

/*边框四边颜色不一样，会变成四个三角形*/
/*其他三边变为透明，只显示一个三角形*/
.c1{
     display: inline-block;
     border-top: 15px solid red;
    /*transparent表示透明*/
     border-bottom: 15px solid transparent;
     border-left: 15px solid transparent;
     border-right: 15px solid transparent;
  }

15、后台管理页面布局的两种样式

  • 第一种后台布局，有多少内容就显示多少高度，页面内容框架没有设置bottom=0
<!DOCTYPE html>
<html lang="en">
<head><!--第一种后台布局，有多少内容就显示多少高度，页面内容框架没有设置bottom=0-->
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            margin: 0;
        }
        .pg-header{
            background-color: green;
            height: 50px;
        }

        .pg-body .pg-menu{
            width: 300px;
            position: absolute;
            top: 60px;
            left: 0;
            bottom: 0;
            background-color: orange;
        }
        .pg-body .pg-content{
            position: absolute;
            left: 310px;
            top: 60px;
            right: 10px;
            background-color: lawngreen;
        }
    </style>
</head>
<body>
    <div class="pg-header"></div>
    <div class="pg-body">
        <div class="pg-menu"></div>
        <div class="pg-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/>
        </div>
    </div>
</body>
</html>
View Code
  • 第二种后台布局，头部和左侧菜单固定不动，右侧出现滚动条
<!DOCTYPE html>
<html lang="en">
<head><!--第二种后台布局，头部和左侧菜单固定不动，右侧出现滚动条，-->
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            margin: 0;
        }
        .pg-header{
            background-color: green;
            height: 50px;
        }

        .pg-body .pg-menu{
            width: 300px;
            position: absolute;
            top: 60px;
            left: 0;
            bottom: 0;
            background-color: orange;
        }
        .pg-body .pg-content{
            position: absolute;
            left: 310px;
            top: 60px;
            right: 10px;
            bottom: 0;/*页面内容框架设置bottom=0*/
            background-color: lawngreen;
            /*如果超出了长度，页面右侧出现滚动条*/
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="pg-header"></div>
    <div class="pg-body">
        <div class="pg-menu"></div>
        <div class="pg-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/>
        </div>
    </div>
</body>
</html>
View Code

相关推荐