基本网页布局

目录

一、盒子模型（网页布局的基础）

（1）边界（margin）：盒子的边框与包含该盒子的容器之间的距离

    A、margin-top：上边界	
    B、margin-right：右边界
    C、margin-bottom：下边界
    D、margin-left: 左边界

(2)填充(padding)：内补白(内边距)，盒子中的内容与盒子边框之间的距离

	    A、padding: 上 右 下 左
		B、padding-top:上边距
		C、padding-right:右边距
		D、padding-bottom：下边距
		E、padding-left：左边距

(3)边框(border)：盒子的边框线

	    A、border-style:边框的样式【上、右、下、左】
		B、border-width:边框的宽度【上、右、下、左】
		C、border-color:边框的颜色【上、右、下、左】
		D、border(综合设置边框): 边框的宽度  边框的样式  边框的颜色
		E、border-radius(圆角边框):水平半径参数/垂直半径参数

(4)清除页面元素的默认内外边距

*{
		      padding: 0px;
			  margin: 0px;
		   }

‘*’：通配符，代表所有元素

(5)背景图像：

	background-repeat:
	repeat  默认值，图像在水平和垂直方向上都平铺	
	no-repeat：不平铺		
	repeat-x：水平平铺		
	repeat-y：垂直平铺

示例代码

div{
        width: 400px;
        height: 400px;
        background-color: coral;
        border-style: ridge dashed dotted double;
        border-width: 5px;
        border-color: cornflowerblue gray red aqua;
        border-radius: 20%;
        border-top-left-radius: 40%;
        margin-top: 200px;
        margin-right: 300px;
        margin-left: 300px;
        background-image: url('./image/1267541.gif');
        background-repeat: repeat-y;
    }

二、DIV+CSS进行网页布局

1、网页布局的目的：页面结构清晰、有条理、易读

2、如何布局：

  (1)确定"版心"：页面主体内容所在的位置。(通常在页面中水平居中)
   
  (2)分析页面中的模块：头部(header)、导航(nav)、焦点图(banner)、主体内容(content)、页面底部         (footer)
   
  (3)控制页面中的模块：通过盒子模型，使用DIV+CSS进行模块的控制

3、页面元素的定位机制：

(1)流式布局：按照元素的类型和在HTML源文件中出现的顺序进行定位

A、块(block):从上到下依次排列   
B、水平布局(inline)：在一行中进行水平布局

(2)浮动(float)：当元素浮动时，它将不再处于普通文档流中，相当于浮在文档之上，不占据空间，但是会缩短行框，产生文字环绕的效果

(3)绝对定位(position:absolute)：通过页面坐标(页面左上角)的方式来定位元素。使用绝对定位后元素不会占用普通流空间

(4)相对定位(position:relative):

如果一个元素进行相对定位，它将以它所在的位置(即它在普通流中的位置)为初始点，然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的初始点进行移动

注意：与定位相关的属性有left、top、right、bottom,这四个属性只有在使用了定位属性(position)后才有效;只能同时使用相邻的两个属性，不能同时使用相对的两个属性

三、布局中的常用属性

1、浮动属性（float）

选择器{
		     float: 属性值;
		  }

left：左浮动
right：右浮动
none：不浮动(默认值)

例1、 DIV+CSS,一列固定宽度与一列自适应宽度

<title>一列固定宽度与一列自适应宽度</title>
</head>
<style>
    body{
        margin-top: 5px;
    }
    #layout{
        height: 300px;
        width: 500px;
        background: blueviolet;
        margin: auto;
    }
    #d1{
        height: 300px;
        width: 500px;
        background: orange;
        margin: auto;
    }
    #d2{
        height: 200px;
        background: cornflowerblue;
        margin: auto;
    }
</style>
<body>
    <div id="layout">西安邮电大学</div>
    <div id="d1"></div>
    <div id="d2"></div>
</body>
</html>

例2、两列固定宽度自动居中 两列自适应宽度

<title>两列固定宽度自动居中 两列自适应宽度</title>
</head>
<style>
    #d1{
        height: 300px;
        width: 150px;
        background: crimson;
        float: left;    /*设置第一个为浮动格式，就留出了位置，第二个就飘上去了*/
    }
    #d2{
        height: 400px;
        width: 230px;
        background: aqua;
        margin-left: 150px;
    }
    #main{
        width: 380px;
        margin: auto;
    }
</style>
<body>
    <div id="main">
        <div id="d1"></div>
        <div id="d2"></div>
    </div>
</body>
</html>

例3、三列固定宽度自动居中 三列自适应宽度

<title>三列固定宽度自动居中 三列自适应宽度 </title>
</head>
<style>
    #d1{
        height: 300px;
        width: 200px;
        background: rosybrown;
        float: left;
    }
    #d2{
        height: 300px;
        width: 200px;
        background: yellowgreen;
        float: left;
    }
    #d3{
        height: 300px;
        width: 200px;
        background: indigo;
        float: left;
    }
    #main{
        margin: 0 auto;
        width: 600px;
    }
</style>
<body>
    <div id="main">
        <div id="d1"></div>
        <div id="d2"></div>
        <div id="d3"></div>
    </div>
</body>
</html>

2、清除属性 （clear）

none：允许元素两边都有浮动元素		   
left：不允许元素左边有浮动的元素		   
right：不允许元素右边有浮动的元素	   
both：不允许两边有浮动的元素

例如

<style type="text/css">
    .leftText{
        margin: 5px;
        height: 200px;
        width: 180px;
        border: 1px solid #aaa;
        background-color: indigo;
        float: right;
    }
    .footText{
        height: 200px;
        border: 2px solid lightcoral;
        clear: both;
    }
    /* .Clear{
        clear: both;
    } */
</style>
<body>
    <div class="leftText">区块一</div>
    <div class="leftText">区块二</div>
    <div class="Clear">asd</div> 
    <!-- <div class="Clear"></div> Clear这个DIV如果不加的话，区块二和区块三会并列成一行，加上Clear这个DIV区块之后，区块三会不受影响，显示在下一行-->
    <div class="footText">区块三</div>
</body>
</html>

3、溢出属性（overflow):当内容溢出元素边框的时候，内容的处理方式

scroll：提供滚动机制(带有滚动条)
visible：默认值，内容溢出到边框以外
hidden: 内容被修剪。溢出的部分看不见
auto：如果内容被修剪，则显示器会显示滚动条以便查看其余的内容

<title>overflow的用法</title>
</head>
<style type="text/css">
    #d1{
        width: 100px;
        height: 300px;
        background-color: lightcoral;
        overflow: visible;
    }
    #d2{
        width: 100px;
        height: 300px;
        background-color: aqua;
        overflow: auto;
    }
</style>
<body>
    <div id="d1">asdfghjaaaaaaaaaaaaaaaa</div>
    <div id="d2">asdfghjaaaaaaaaaaaaaaaa</div>
</body>
</html>

四、使用DIV+CSS进行布局时要注意的问题：

1、div、ul、ol、p、li都是块，它们和周围的元素都有边界(margin),在块级标签嵌套的时候， 要注意处理这些边界

2、补充

内嵌框架

<iframe src="" frameborder="0"></iframe>

简单页面布局的实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面布局例子</title>
</head>
<style>
    body{
        margin-top: 2px;
    }
    #header{
        width: 1200px;
        height: 120px;
        margin: auto;    /*margin: auto为元素水平居中*/
        background-image: url('./image/1.jpg');
    }
    #nav{
        width: 1200px;
        height: 50px;
        margin: auto;
        margin-top: 2px;
        background-color: royalblue;
    }
    ul{
        margin-top: 0px;
    }
    #navItem >li{
        list-style: none;   /*list-style：设置列表的项目符号的格式 none表示不要项目符号*/
        display: inline-block;  /*列表显示在一行，每个列表呈现块状显示*/
        text-align: center;
        margin-left: 50px;
        line-height: 50px;
        width: 150px;
        color: white;
    }
    #navItem > li:hover{
        background-color: rgb(26, 59, 209);
        cursor: pointer;  /*将光标设置成手型样式*/
    }
    #main{
        width: 1200px;
        margin: auto;
        margin-top: 2px;
    }
    #left{
        width: 150px;
        height: 530px;
        float: left;
        background-color: lightcoral;
    }
    #right{
        width: 1048px;
        height: 530px;
        margin-left: 152px;
        background-color: lightseagreen;
    }
    #leftMenu{
        margin-top: 35px;
    }
    .Item{
        list-style: none;
        margin-top: 20px;
    }
    .Item>a{
        text-decoration: none;
    }
    #if{
        width: 1028px;
        height: 530px;
    }
</style>
<body>
    <div id="header"></div>
    <div id="nav">
        <ul id="navItem">
            <li>首页</li>
            <li>西安邮电大学</li>
            <li>长安大学</li>
            <li>陕西师范大学</li>
            <li>西安外国语大学</li>
        </ul>
    </div>
    <div id="main">
        <div id="left">
            <ul id="leftMenu">
                <li class="Item">
                    <a href="#">首页</a>
                </li>
                <li class="Item">
                    <a href="001.html" target="deyun">西安邮电大学</a>
                </li>
                <li class="Item">
                    <a href="002.html" target="deyun">长安大学</a>
                </li>
                <li class="Item">
                    <a href="003.html" target="deyun">陕西师范大学</a>
                </li>
                <li class="Item">
                    <a href="004.html" target="deyun">西安外国语大学</a>
                </li>
            </ul>
        </div>
        <div id="right">
            <iframe src="" frameborder="0" id="if" name="deyun"></iframe>
        </div>
    </div>
</body>
</html>
# css
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

6个实例带你解读TinyVue 组件库跨框架技术

avatar 华为云开发者联盟
cover

华为云FunctionGraph构建高可用系统的实践

avatar 华为云开发者联盟
cover

11个Python循环技巧

avatar 华为云开发者联盟