作业5：CSS编程排版练习

引言

任务一

制作一个简单的页面，要求：

1）菜单始终在屏幕的上方（无论拖动）；

2）网页的结构如附件所示。每个区块之间，需要有边距和空白。

3）在屏幕的右下方，固定一个“联系电话”的方框；不随滚动条而改变位置。

4）进行界面设计。要求有布局、色彩、字体等因素的考虑；

任务二

基于以前的实验所做的网页，重新分栏/分区块（如果之前未分栏，先分栏显示页面）。使得html内容不变，但不同的css所控制的版面布局不同。

环境

html6
css
javascript
Dreamweaver2020

具体过程

任务一

创建html和对应的css
设置页面总体布局

<body>
<div class="nav">导航栏 </div>
<div class="main">
<div class="left">左侧栏</div>
<div class="right">右侧栏</div>
</div>
<div class="footer">页脚</div>
<div class="contact">联系方式 </div>
</body>

先写导航栏

<div class="nav">
    <ul class="menu">
    <li>导航</li>
    <li>导航</li>
    <li>导航</li>
    <li>导航</li>
    <li>导航</li>
    <li>导航</li>
    </ul>
    </div>

    .nav{
        position: fixed;/*导航栏常驻于页面顶端*/
        top: 0;
        left: 0;
        right: 0;
        background-color: #ac1400;
        text-align: center;
        box-shadow: 0px 5px 5px #00000088;
    }
    .menu{
    width: 70%;
    margin: 0 auto;
    padding: 0;
    list-style-type: none;
    display: flex;/*弹性盒布局*/
    }
    .menu li{
        margin: 0;
        flex: 1;/*弹性盒布局*/
        padding: 10px;
        font-family: "微软雅黑";
        font-size: 20px;
        font-weight: bolder;
        color: white;
    }
    .menu li:hover{/*指针悬浮效果*/
        background-color: #981100;
        border-bottom: black 3px solid;
        padding-bottom: 7px;
    }

在body选择器中设置通用的属性值

body{
        margin: 0;
        padding: 0;
        word-wrap:break-word;/*允许长单词换行*/
        font-family: "微软雅黑";
        font-size: 20px;
        line-height: 2em;
    }

效果如下

左栏

<div class="left">
    
<div class="item">文字文字文字文字文字文字</div>
<div class="item">文字文字文字文字文字文字</div>
<div class="item">文字文字文字文字文字文字</div>
<div class="item">文字文字文字文字文字文字</div>
<div class="item">文字文字文字文字文字文字</div>
<div class="item">文字文字文字文字文字文字</div>
<div class="item">文字文字文字文字文字文字</div>
<div class="item">文字文字文字文字文字文字</div>
<div class="item">文字文字文字文字文字文字</div>
<div class="item">文字文字文字文字文字文字</div>
<div class="item">文字文字文字文字文字文字</div>
<div class="item">文字文字文字文字文字文字</div>
    
</div>

.main{
        bottom: 0;
        left: 0;
        right: 0;
        margin:10px;
        margin-top: 80px;
        overflow: hidden;
    }
    
    .left{
        float: left;
        width: 25%;
        border-right: 3px solid #AC1400;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding: 1%;
        font-size: 18px;
        line-height: 36px;
    }
    .item{
        padding: 5% 10% ;
    }
    .item:hover{
    background-color: #EFEFEF;
    border-left: black solid 3px;
    padding-left: calc(10% - 3px);
}

效果：

image.png

右栏

<div class="right">
<div class="chapter">
    <h3>标题标题标题标题标题标题标题</h3>
    <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字字文字文字文字文</p>
    </div>

<table>
  <tbody>
    <tr>
      <th scope="col">&nbsp;标题</th>
      <th scope="col">&nbsp;标题</th>
      <th scope="col">&nbsp;标题</th>
    </tr>
    <tr>
      <td>&nbsp;数据</td>
      <td>&nbsp;数据</td>
      <td>&nbsp;数据</td>
    </tr>
    <tr>
      <td>&nbsp;数据</td>
      <td>&nbsp;数据</td>
      <td>&nbsp;数据</td>
    </tr>
    <tr>
      <td>&nbsp;数据</td>
      <td>&nbsp;数据</td>
      <td>&nbsp;数据</td>
    </tr>
    <tr>
      <td>&nbsp;数据</td>
      <td>&nbsp;数据</td>
      <td>&nbsp;数据</td>
    </tr>
    <tr>
      <td>&nbsp;数据</td>
      <td>&nbsp;数据</td>
      <td>&nbsp;数据</td>
    </tr>
  </tbody>
</table>
<div class="chapter">
    <h3>标题标题标题标题标题标题标题</h3>
    <p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
    </div>
</div>

 .right{
        float: left;
        width: 75%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding: 4%;
    }
    .chapter{
        margin: 0;
        margin-bottom: 3em;
    }
    .right table{
        width: 100%;
        margin-bottom: 3em;
        border: 3px solid #EFEFEF;
        border-collapse: collapse;
        text-align: center;
    }
    .right table th{
        background-color: #EFEFEF;
    }

效果：

页脚部分

<div class="footer">页脚页脚页脚页脚页脚页脚页脚页脚<Br>
页脚页脚页脚页脚</div>

.footer{
        clear: both;
        width: 100%;
        text-align: center;
        background-color: #ac1400;
        color: white;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding: 30px;

效果：

联系方式浮动框

<div class="contact">
    <h3>联系方式</h3>
    <p>邮箱：zimo@qq.com</p>
    <p>电话：13088886666</p>
    </div>

.contact{
        position: fixed;
        right: 0;
        bottom: 110px;
        width: 50px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding: 10px;
        background-color: #ac1400;
        color: white;
        font-size: 15px;
        line-height: 2em;
        box-shadow: 0px 5px 5px #00000088;
    }
    .contact h3,p{
        margin: 0;
    }
    .contact p{
        margin-top: 10px;
        display: none;
    }
    .contact:hover{
        position: fixed;
        right: 0;
        bottom: 0;
        width: 100px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding: 10px;
        background-color: #ac1400;
        color: white;
        font-size: 15px;
        line-height: 2em;
    }
    .contact:hover p{
        display: block;
    }

效果：

鼠标放上去后：

任务二

修改了主页导航栏的css，从左边变成顶部

nav{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 7%;
padding: 0;
background-color: #FFFFFF77;
z-index: 1;
}

.menu{
    width: 70%;
    height: 100%;
    margin: 0 auto;
    list-style-type: none;
}
.menu-item{
    float: left;
    width: 25%;
    height: 100%;
    color: #ac1400;
    font-size: 3vh;
    font-weight: bolder;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items:center;
}
.menu-item:hover{
    background-color: #ce1700;
    color: white;
}
.menu-item:active{
    background-color: #ac1400;
}

效果：

image.png

修改了page模板的main的样式，使之适应导航栏的变化

.main{
    position: fixed;
    top:7%;
    left: 0;
    right: 0;
    bottom: 0;
    line-height:30px;
    padding: 0;
    color: #FFFFFF;

扩充学校简介部分的内容，并使用了左侧导航栏右侧内容的布局，左固定右滚动

  <ul class="left">
    <a href="#xxjj">
    <li>学校简介</li>
    </a> <a href="#xxbz">
    <li>学校标志</li>
    </a> <a href="#xybx">
    <li>学院部系</li>
    </a> <a href="#xydt">
    <li>校园地图</li>
    </a>
  </ul>
  <div class="right">
    <article>
      <h1><a name="xxjj">学校简介</a></h1>
      <p>厦门大学（Xiamen University），简称厦大（XMU），是由中华人民共和国教育部直属、中央直管副部级建制的综合性研究型全国重点大学，国家“双一流”A类世界一流大学建设高校，国家“2011计划”牵头高校，国家“211工程“和“985工程”重点建设高校。</p>
      <p>学校由爱国华侨领袖陈嘉庚先生于1921年创办，是中国近代教育史上第一所华侨创办的大学，国内最早招收研究生的大学之一，是首个在海外建设独立校园的大学，早期建筑入选全国重点文物保护单位和“首批中国20世纪建筑遗产”名录，被誉为“南方之强“、“中国最美大学”。
      <p/>
      <p> 截至2019年11月，学校4个校区占地9700多亩，其中马来西亚分校约900亩；有研究生院、6个学部、29个学院和15个研究院；专任教师2662人，两院院士22人；在校学生40000余人，本研比约为1:1；17个学科进入ESI全球前1%，位列中国大陆高校第7位。</p>
    </article>
    <article>
      <h1><a name="xxbz">校训</a></h1>
      <img src="images/logo/xiaoxun.gif" width="143" height="57" alt=""/>
      <p>厦门大学校训为&ldquo;自强不息，止于至善&rdquo;。</p>
      <p>自强不息&rdquo;是陈嘉庚先生创校时亮出的精神话语。1921年4月6日厦大举行开校式，演讲台中间就悬挂着陈嘉庚指定的四个大字——&ldquo;自强不息&rdquo;。&ldquo;自强不息&rdquo; 出自《周易•乾》的&ldquo;天行健，君子以自强不息&rdquo;，意味着追求永不歇止，蕴含着雄健浩然之气，体现了民族自立于世界之林的精神和气概。</p>
      <p>&ldquo;止于至善&rdquo;为厦大私立时期的林文庆校长确立的校训。&ldquo;止于至善&rdquo; 源于《礼记•大学》&ldquo;大学之道，在明明德，在亲民，在止于至善&rdquo;， 意在表明厦门大学应该始终如一、永无止息地探寻&ldquo;事理之极致&rdquo;，抵达科学真理和人格精神的最高境界，在启智与道德上达到完美至善，体现了中国文化的人格理想，蕴含着生命对于至善至美理想的追求与践行。</p>
      <p>1994年10月8日，经校党委校行政办公会议研究决定,&ldquo;自强不息，止于至善&rdquo;被正式确定为厦门大学校训。</p>
    </article>
    <article>
      <h1>校徽</h1>
      <img src="images/logo/xiaohui.jpg" alt=""/>
      <p>校徽图案是陈嘉庚先生创办厦门大学时确定和沿用的，其特定的内涵，简要说明如下：徽标圆环上方为繁体字&ldquo;厦门大学&rdquo;，下方为拉丁语&ldquo;厦门大学&rdquo;；盾形上的三颗五角星图案代表中国传统哲学中的&ldquo;三才&rdquo;，即所谓天然中精神的、宇宙的、人类的三大元素；盾形中心的城及城门图案象征着广纳贤才、开放办学；绶带上的&ldquo;止于至善&rdquo;四字为建校初期校训。</p>
    </article>
    <article>
      <h1>校歌</h1>
      <img src="images/logo/xiaoge.jpg" width="825" height="1000" alt=""/> </article>
    <article>
      <h1><a name="xybx">学院部系</a></h1>
      <div class="department">
        <h3>人文与艺术学部</h3>
        <ul class="college">
          <li>人文学院</li>
          <li>新闻传播学院</li>
          <li>外文学院</li>
          <li>艺术学院</li>
          <li>国学研究院</li>
          <li>海外教育学院</li>
          <li>国际学院</li>
        </ul>
      </div>
      <div class="department">
        <h3>社会科学学部</h3>
        <ul class="college">
          <li>经济学院</li>
          <li>王亚南经济研究院</li>
          <li>管理学院</li>
          <li>财务管理与会计研究院</li>
          <li>法学院</li>
          <li>厦门国际法高等研究院</li>
          <li>知识产权研究院</li>
          <li>公共事务学院</li>
          <li>公共政策研究院</li>
        </ul>
      </div>
    <div class="department">
        <h3>人文与艺术学部</h3>
        <ul class="college">
          <li>人文学院</li>
          <li>新闻传播学院</li>
          <li>外文学院</li>
          <li>艺术学院</li>
          <li>国学研究院</li>
          <li>海外教育学院</li>
          <li>国际学院</li>
        </ul>
      </div>
      <div class="department">
        <h3>社会科学学部</h3>
        <ul class="college">
          <li>经济学院</li>
          <li>王亚南经济研究院</li>
          <li>管理学院</li>
          <li>财务管理与会计研究院</li>
          <li>法学院</li>
          <li>厦门国际法高等研究院</li>
          <li>知识产权研究院</li>
          <li>公共事务学院</li>
          <li>公共政策研究院</li>
        </ul>
      </div>
    </article>
    <article>
      <h1><a name="xydt">校园地图</a></h1>
    </article>
  </div>

css

article{
    margin-bottom: 20%;
}
article:last-child{
    margin-bottom: 0;
}
h1{
    width: 100%;
    text-align: center;
    margin-top: 0;
    color: #ce1700;
    padding-bottom: 1%;
    border-bottom: #ce1700 solid 2px;
}
.left{
    margin: 0;
    margin-top:3%;
    float: left;
    width: 20%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    list-style-type: none;
}
.left li{
    padding: 3%;
    font-size: 3vh;
    font-weight: bolder;
    color: white;
    display: flex;
    align-items: center;
    justify-content:space-around;
    border-right: #FFFFFF77 solid 3px;
}
.left li:hover{
    background-color: #FFFFFF77;
    border-right: #FFFFFF00 3px solid;
    color: black;
}
.left li:active{
    background-color: #FFFFFFAA;
    border-right: #FFFFFF00 3px solid;
    color: black;
}
.right{
    float: left;
    width: 80%;
    height: 100%;
    margin-top:3%;
    padding: 0 10% 5%;
    font-size: 20px;
    line-height: 40px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow-y: scroll;
}

img{
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;  
    display: block;
    margin: auto;
}
.department{
    margin-top: 40px;
}
h3{
    font-size: 20px;
    margin:0;
}
.college{
    list-style-type: none;
    overflow: hidden;
    padding: 0;
    margin: 0;
    
}
.college li{
    float: left;
    padding: 5px;
    margin: 5px;
    background-color: #FFFFFF77;
    color: black;
}

效果：

左侧的锚链接快速定位到右边的指定内容。

这里使用了float：left

总结

display：flex可以使子div更好地适应父div
次要信息不能太抓眼球，要把握好视觉强度的主次

最后编辑于：2020.04.01 15:12:50

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,547评论 6赞 477
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,399评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,428评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,599评论 1赞 274
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,612评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,577评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,941评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,603评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,852评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,605评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,693评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,375评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,955评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,936评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,172评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 43,970评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,414评论 2赞 342

作业5：CSS编程排版练习

引言

任务一

任务二

基于以前的实验所做的网页，重新分栏/分区块（如果之前未分栏，先分栏显示页面）。使得html内容不变，但不同的css所控制的版面布局不同。

环境

具体过程

任务一

任务二

总结

推荐阅读更多精彩内容