HTML和CSS入门（3）

ゝ一纸荒年。 2022-06-06 09:58 131阅读 0赞

## 页面布局 ##

**1.盒子模型**  
盒子模型规定了元素框处理元素内容、内边距、边框、和外边距的方式。  
![这里写图片描述][SouthEast]  
在css中，width和height指的是内容区域的宽度和高度。增加内边距，边框和外边距不会影响内容区域的尺寸，但会增加元素框的总尺寸。  
**元素框的宽**=**margin-left**\+**margin-right**\+**border-left**\+**boder-right**\+**padding-left**\+**padding-right**\+**contentwidth**  
同样，**元素框的高**=**margin-height(上下)**\+**border-height(上下)**\+**padding-height(上下)**  
可以通过将元素的margin和padding设置为零来覆盖这些浏览器样式。(如下)

*{ margin:0; padding:0; }

**2.页面布局中所用到的css**

*  **块级元素**：每个块级元素默认占一行高度，一行内添加一个块级元素后无法一般无法添加其他元素（float浮动后除外）。两个块级元素连续编辑时，会在页面自动换行显示。块级元素一般可嵌套块级元素或行内元素。  
    如:`<p>` `<div>` `<ul>` `<li>` `<ol>` `<dl>` `<dt>` `<dd>`等。
    
    **块级元素的特点**：  
    (1)总是在新行上开始；  
    (2)高度，行高以及外边距和内边距都可以控制；  
    (3)它可以容纳内联元素和其他块元素。
 *  **行内元素**：行内元素一般都是基于语义级的基本元素，只能容纳文本或其他内联元素。  
    如：`<span>` `<strong>` `<em>` `<i>` `<b>` `<a>`等。
    
    **行内元素的特点**：  
    (1)和其他元素都在一行上；  
    (2)高，行高及外边距和内边距不可改变（除非转换成块级元素`display:inline-block/block`）；  
    (3)宽度就是它的文字或图片的宽度，不可改变；  
    (4)内敛元素只能容纳文本或者其他内联元素；  
    (5)对行内元素，需要注意:设置宽度width 无效,设置高度height 无效，可以通过line-height来设置。设置margin 只有左右margin有效，上下无效。  
    设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。
    
    **块级元素居中：margin:0 auto;**  
    **行内元素居中：text-align:center;**
 *  **标准流**：除非专门指定，否则所有元素都在标准流中定位。也就是说，标准流中的元素的位置由元素在HTML中的位置决定。块级元素从上到下一个接一个地排，列行内框在一行中水平布置。很明显这样生硬的规定是不灵活的，好比你玩 俄罗斯方块不让你变换元素的方向直接堆放一样。
 *  **定位**：  
    （1）相对定位： position:relative; （在原来的基础上偏移。）  
    （2）绝对定位： position:absolute;（以父元素为参考点发生偏移，父元素没有相对定位或没有父元素的话，就是以浏览器为参考点。）  
    （3）固定地位： position:fixed;(浮动+定位的话，浮动就不起作用了。)
    
    **示例**：首先定义三个div。

css：

.box1{ width: 100px; height: 50px; background: darkslateblue; }
    .box2{ width: 100px; height: 50px; background: lightpink; }
    .box3{ width: 100px; height: 50px; background: lightgreen; }

现在它们的样式如下：  
![这里写图片描述][SouthEast 1]  
我们现在定义一下第二个div的相对定位：

position: relative;
        top: 30px;
        left: 30px;

效果如图：相对定位是相对它原本的位置去发生改变的。  
![这里写图片描述][SouthEast 2]  
现在再定义一下第二个div的绝对定位

position: absolute;
        top: 30px;
        left: 30px;

效果图：因为第二个div没有父元素，所以它的绝对定位是是以浏览器左上角发生变化的。而且它下面的元素会替代它原来的位置。  
![这里写图片描述][SouthEast 3]

**3.页面布局的示例**  
我们要做的页面如下：  
![这里写图片描述][SouthEast 4]

步骤：

**（1）首先先建立一个站点。**  
![这里写图片描述][SouthEast 5]

**（2）在commen.css中设置页面要统一调用的css（因为一个页面会有多个子页面，这些页面中会调用相同的东西，为了方便起见，统一把要调用多次的css放在commen.css中）**

*{ margin:0; padding:0; /*清空内外边距*/ }
    body{ font:12px Arial,"微软雅黑"; /*设置字体*/ }
    .fl{ float:left; /*左浮动*/ }
    .fr{ float:right;/*右浮动*/ }
    a{ text-decoration: none; /*去下划线*/ }
    ul,li{ list-style: none; /*去掉列表前的点*/ }
    .clear{ clear:both; /*清空浮动*/ }

**（3）从导航栏开始做起。导航栏包括左边图标和右面的文字两部分，需要两个div，它们都在一个大的div之中，所以整个导航栏需要三个div。**

导航栏中的css：

body{ background: url("../img/body.gif"); }
    .top{ width: 960px; height: 54px; margin: 0 auto; background: white; }
    .box{ width:730px; height:35px; border-top: solid 10px black ; margin-top: 9px; }
    .box a{ color: black; font-size: 16px; float: left; padding: 0 9px; line-height: 35px; display: block; }
    .box a:hover,.corrent{ background: darkred; color: white!important; }

效果：  
![这里写图片描述][SouthEast 6]  
**（4）之后是中间的图片，再定义一个div来装图片**

图片的css：

.top,.banner{ margin: 0 auto; width: 960px; background: white; }
    .banner{ height: 186px; overflow:hidden; }

效果:  
![这里写图片描述][SouthEast 7]

**（5）然后是中间位置和站内搜索，各占一个div，共三个div。**

<div class="title">
        <div class="ti-left fl">  您目前的位置：首页>>新闻中心</div>
        <div class="fr ti-right">
            <p><strong>站内搜索</strong>:<input type="text" id=""/> <input type="button" value="search" class="butt"/>
            </p>
        </div>
    </div>

css：

.title{ width: 960px; height: 35px; margin:0 auto; background: rgba(193, 193, 193, 0.92); }
    .ti-left{ line-height: 35px; }
    .ti-right{ margin-top: 8px; margin-right: 45px; }
    .ti-right p{ color: #d10000; }
    .butt{ width:70px; height: 23px; background: #c00000; color: white; border:none; border-radius: 5px; cursor: pointer;/*鼠标悬浮时变成手状*/ }

效果：  
![这里写图片描述][SouthEast 8]

**（6）之后是空白部分的内容。首先定义一个总div，其次是左边的小方框和右边的内容，它们各占一个div。左边的小方框里又分两个div，依次是标题和内容。**

<div class="content">
        <div class="news fl">
            <div class="head"><p>>新闻中心</p></div>
            <div class="con-t">
                <ul>
                   <li><a href="http://localhost:63342/HTML-CSS/2017-11-06%EF%BC%88%E4%BD%9C%E4%B8%9A%EF%BC%89/subpage-two/index.html" target="_blank">集团要闻</a></li>
    
                   <li><a href="">经营动态</a></li>
                   <li><a href="">企业专题</a></li>
                    <li><a href="">项目新闻</a></li>
                </ul>
            </div>
        </div>
        <div class="column fr">
            <h3 class="head-t"><strong>集团要闻</strong>Group News</h3>
            <ul>
                <li><span>[2011-12-12]</span><a href="http://localhost:63342/HTML-CSS/2017-11-06%EF%BC%88%E4%BD%9C%E4%B8%9A%EF%BC%89/subpage-two/index.html" target="_blank">中国保利集团副总经理国强一行视察青岛公司</a></li>
                <li><span>[2011-11-17]</span><a href="">郑州市委书记连维良一行视察郑州保利百合项目</a></li>
                <li><span>[2011-11-16]</span><a href="">保利集团总经理张振高一行视察辽宁公司</a></li>
                <li><span>[2011-11-16]</span><a href="">中国保利集团副总经理国强视察浙江公司</a></li>
                <li><span>[2011-11-14]</span><a href="">中国保利集团总经理张振高一行视察广东 华南公司</a></li>
                <li><span>[2011-11-14]</span><a href="">中国保利集团副总经理国强一行视察武汉公司</a></li>
                <li><span>[2011-10-31]</span><a href="">中国保利集团副总经理国强一行考察保利东江首府</a></li>
                <li><span>[2011-10-31]</span><a href="">中国保利集团董事长陈洪生视察成都公司</a></li>
                <li><span>[2011-10-31]</span><a href="">国资监委事会主席时希平一行赴武汉公司视察</a></li>
                <li><span>[2011-10-17]</span><a href="">海心沙相约宋祖英 保利和乐中国完美落幕</a></li>
                <li><span>[2011-10-18]</span><a href="">陈洪生董事长等领导一行抵汉参加央企与地方政府合作发展洽谈会并视察项目</a></li>
                <li><span>[2011-09-30]</span><a href="">中国保利集团副总经理国强一行考察成都公司</a></li>
                <li><span>[2011-09-14]</span><a href="">保利地产荣获“2011中国房地产行业领导公司品牌”</a></li>
                <li><span>[2011-09-08]</span><a href="">保利地产总经理朱明新一行视察武汉公司</a></li>
                <li><span>[2011-09-02]</span><a href="">保利地产董事长宋广菊一行视察福建公司</a></li>
                <li><span>[2011-08-20]</span><a href="">广东省委委员调研团考察保利银滩</a></li>
                <li><span>[2011-08-18]</span><a href="">保利地产2011年新员工入职培训圆满结束</a></li>
                <li><span>[2011-08-15]</span><a href="">合肥保利香槟国际开工盛典隆重举行</a></li>
                <li><span>[2011-08-10]</span><a href="">国资委监事会主席时希平一行赴保利地产北京公司调研</a></li>
                <li><span>[2011-08-09]</span><a href="">广东省省长黄华华视察调研保利银滩</a></li>
                 共<i>10</i>页<i>196</i>条记录 <a href="">上一页</a> <a href="">1</a> <a href="">2</a> <a href="">3</a> <a href="">4</a> <a href="">5</a> <a href="">下一页</a>
    `
            </ul>
        </div>
    </div>

css：

.content{ width: 960px; height: 507px; margin: 0 auto; background: white; }
    .news{ width: 160px; height: 160px; background: #dedede; margin-top: 30px; margin-left: 45px; border: solid 1px rgba(176, 176, 176, 0.76); }
    .head{ width: 146px; height: 25px; background: #295e79; margin: 0 auto; margin-top: 5px; }
    .head p{ line-height: 25px; color:white; margin-left: 10px; }
    .con-t{ width:146px; height: 140px; margin-top: 7px; margin-right: 10px; }
    .con-t li{ margin-left: 15px; border-bottom: dashed 1px grey; }
    .con-t a{ color:black; line-height: 28px; padding-left: 20px; }
    .column{ width:580px; height: 507px; background: white; margin-right: 45px; }
    .head-t{ border-bottom: solid 1px lightgray; margin-top: 30px; }
    .column ul li{ border-bottom: dashed 1px lightgray; }
    .column ul li a{ line-height: 20px; font-size: 1px!important; color:black; padding-left: 15px; }
    .column span{ float: right; padding-top: 5px; }
    .column a{ color: black; }
    .column i{ font-style: normal; color: red; }

效果：  
![这里写图片描述][SouthEast 9]

**（7）最后的尾页部分占一个div。**

css：

.last{ width: 960px; height: 100px; margin: 0 auto; background: #b2a695; }
    .last p{ text-align: center; line-height: 15px; padding-top: 25px; }

效果图：  
![这里写图片描述][SouthEast 10]

[SouthEast]: /images/20220606/67a0344d640a45c7844acb365c8944cc.png
[SouthEast 1]: /images/20220606/2d1388dc909c49d3a38bc741f7481d31.png
[SouthEast 2]: /images/20220606/fef0d4a7a770484688895cf2e3078e92.png
[SouthEast 3]: /images/20220606/e0c6b5c554fd489ab80a0f9e1ae08347.png
[SouthEast 4]: /images/20220606/0e414b7442ec4f6a9383f4f295c4e330.png
[SouthEast 5]: /images/20220606/6b3dfed8f712440f8da361de70fd856d.png
[SouthEast 6]: /images/20220606/ccf1efad64f94e70b66976c0cb53b808.png
[SouthEast 7]: /images/20220606/1a877db5f6a34d04b5d7f1e70143fc92.png
[SouthEast 8]: /images/20220606/315a49333a0044f18e93eedde6eee238.png
[SouthEast 9]: /images/20220606/974d74ba41604baf8883265abd065765.png
[SouthEast 10]: /images/20220606/46a4c8ebecd9446487b63ace8bf8d2c5.png