网页制作系列学习（三）CSS编程排版练习：下拉组件，导航菜单和多个css布局

一、前言

- 实验要求

TASK1

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

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

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

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

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

TSAK2

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

开发环境？

  1. 操作系统： Windows 10 X64
  2. 软件：Hbuilder

二、背景知识介绍

TASK1

postion:absolute 跳出文本流，不是行内元素，设置宽高有效，我的理解。
postion属性一共有4个值，分百别为static，absolute，relative和fixed。
（1） static为默认值，它表示块保持在原本应该在的位置上，即改值没有任何移动的效果。
（2） 当子块的postion值设为absolute时，子块已经不再从属于父块。
注：top，right，bottom和left这4个css属性，度他们都是配合position属性使用的，不但可以设置为绝对像素，也可以设置为表分数，表示块的各个边界离页面边框（postion=absolute）的距离，或者各个边界离原来位置（postion=relative）的距离。只有当postion属性设版置为absolute或者relative时才能生效。如果设置为static，则子块不会有任何变化。

（3）块的postion设置为relative时，与将其设置为absolute时完全不同。这时子块是相对于其父块来进行定位的，同样配权合top，right，bottom和left这4个属性来使用的。
用例：

<html>
<head>
<style type="text/css">
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}
</style>
</head>

<body>
<h2>正常位置</h2>
<h2 class="pos_left">正常位置向左移动</h2>
<h2 class="pos_right">正常位置向右移动</h2>

</body>

</html>

效果：

image.png

（4） 当子块的postion值设为fixed时，子块始终处于屏幕的某个位置（通过left top bottom right来设置）。
我们可以通过设置position为fixed来创建导航菜单和联系方式板块。

.menu
{
    /*导航菜单*/
    position:fixed;
    left: 0;
right: 0;
margin:0 auto;
background-color:hotpink;
width: 1200px;
height:200px;
z-index:9999;
opacity:0.7;
text-align: center;
font-family: "文悦新青年体 (非商业使用) W8";

/*遮挡*/
}

.contactinfo
{
    position:fixed;
    opacity: 0.7;
    bottom:5px;
    right:100px;
    width:150px;
    height:250px;
    background-color: orangered;
}

TASK2
1.通过button实现页面的重修排布：

  • 在1.html中放入一个地址为2.html的button。
  • 在2.html中放入一个地址为1.html的button。
  • 设置button的text=重新排版
    2.将不同板块的代码写在不同的css文件里，再用link rel="stylesheet" type="text/css" href="文件名.css"读取css文件里的代码：
    本案例中的css文件的link：
    <link rel="stylesheet" type="text/css" href="header.css"/>
    <link rel="stylesheet" type="text/css" href="content.css"/>
    <link rel="stylesheet" type="text/css" href="picture.css"/>
    <link rel="stylesheet" type="text/css" href="form.css"/>
    <link rel="stylesheet" type="text/css" href="footer.css"/>

三、视觉设计分析：

字体：

TASK1

  • 均为非衬线字
  • 卡通黑体作为标题，正文用微软雅黑
  • 字体的选择可以参考我之前的文章：字体·认知心理与界面

TASK2

  • 均为非衬线字
  • 黑体作为标题，正文用微软雅黑

颜色和排版：

TASK1:

本次实验的大致要求如下：

image.png

我的构想主题是：做一个猫屋的网页

颜色

根据：

颜色数量不多于4种，且最佳比例为60%：30%：10%

我选用了hotpink,lightpink和oranged。margin的部分选用白色。

排版
  • 总板块分为menu，content，footer，和contactInfo（联系方式）。
  • 在menu块中，我划分了搜索框子块和logo子块。
  • 在content块中，按要求分为左右两部分，右子块种有分为文字和表格。

TASK2

lab1.html：（第一次网页设计的作业）

参见网页制作系列学习（一）html+css入门
极简风格：作为mocom的主页，该网页并不需要把太多冗杂的信息展示出来，我摘取了两部分：实验室介绍和科研信息，在这两区域中分别增加了相关链接。
标题居中：我并没有把移动计算和数据分析放在最上方，用户不能够快速地理解这个词汇的意义：没有提到这个实验室隶属于厦门大学，甚至没有提到这是一个实验室网页，所以在最上方的大标题显得有点多余。我认为放在两个分模块下方便使用户理解标题的意思。如下图所示：

image.png

task2.html：

依然是极简风格：

  • 没有设计太花哨的功能：本来我设置了下拉界面的功能，但觉得和”实验室网页”实在是不搭，于是删掉了。改为由悬浮变色设计的表格。
  • 标题居上：想和上次做的尽量不同，选择了标题在上的方式
  • 尽可能多的陈列信息：上次是把信息规整为三大类放在三个div里，这次想在主页上展示更多的信息。
    效果图如下所示：
    image.png

    image.png

    总的来说，，上次的页面设计自己摸索的创造的成分占绝大多数，这次的页面设计参考了很多高校和实验室的首页。

三、编程分析

TASK1:

通过设置position：fixed使menu子块不随滚屏而改变位置
CSS文件：

.menu
{
    /*导航菜单*/
    position:fixed;
    left: 0;
right: 0;
margin:0 auto;
background-color:hotpink;
width: 1200px;
height:200px;
z-index:9999;
opacity:0.7;
text-align: center;
    font-family: "文悦新青年体 (非商业使用) W8";

/*遮挡*/
}

设置链接的鼠标悬浮变色
CSS文件

a{
    color:white;
    font-family: "文悦新青年体 (非商业使用) W8";
    
}
    a:hover
            {
                color:purple;
                background-color:lightpink;

按照要求的排版：
html代码：

<body>
        
        <div  style="text-align: center;" class=menu>
            
                    <a href="https://www.baidu.com/"style="display:block;font-size:60px ;background-color:hotpink ; ;"target="_blank">
                猫咪の小屋
                  </a>
            <form>
            <input type="text" >
            <button >站内搜索</button>
            </form> 
            <div style="position:relative;left:13%" id='item'>
        <ul>
            <li><a href="https://www.baidu.com/"style="display:block;background-color:hotpink ;font-size:50px;"target="_blank">全部</a></li>
            <li><a href="https://www.baidu.com/"style="display:block;background-color:hotpink ;font-size:50px;"target="_blank">长毛</a></li>
            <li><a href="https://www.baidu.com/"style="display:block;background-color:hotpink ;font-size:50px;"target="_blank">短毛</a></li>
            <li><a href="https://www.baidu.com/"style="display:block;background-color:hotpink ;font-size:50px;"target="_blank">领养</a></li>
        </ul>
        </div>
            
        </div>
        <div align="center" class=content>
            
            <div  class=content1>
                <br/>
                <mainbody2 style="position: relative;top:100px;color:deeppink">猫咪是可爱的结晶</mainbody2>
                <img src="../img/猫.jpg"style="width:550px;height:60%;position: relative;top:200px" >

            </div>
            <div  class=content2>
                <mainbody2 style="position: relative;top:50px;color:deeppink">这里有不同种类的猫咪喔</mainbody2>
                
                <br />
                <img src="../img/布偶猫.jpg"style="width:333px;height:40%;position: relative;top:150px;float:left" >
                <img src="../img/折耳猫.jpg"style="width:333px;height:40%;position: relative;top:150px;float:left" >
                <img src="../img/英短猫.jpg"style="width:334px;height:40%;position: relative;top:150px;float:left" >
                
                <table style="position: relative;top: 150px;">
                <tr>
                <th style="font-size: 30px;">布偶猫</th>
                <th style="font-size: 30px;">折耳猫</th>
                <th style="font-size: 30px;">英短猫</th>
                </tr>
                <tr>
                <td style="font-size: 30px;">Pika</td>
                <td style="font-size: 30px;">Redeka</td>
                <td style="font-size: 30px;">Medusa</td>
               </tr>
                <tr>
                <td style="font-size: 30px;">长毛猫</td>
                <td style="font-size: 30px;">长毛猫</td>
                <td style="font-size: 30px;">短毛猫</td>
            </tr>
                </table>
            </div>
        </div>
        <div align="center" class=footer>
            <mainbody2 style="position: relative;top:200px;background-color: transparent;color:white;">produced by：vein</mainbody2>
        </div>
        <div class=contactinfo>
            <div style="background-color: orangered"class=vertical>联系方式  ：请私聊</div>
        
        </div>
    </body>

效果如下：


image.png

TASK2：

通过不同css文件实现版面设计：
CSS代码：

    <link rel="stylesheet" type="text/css" href="header.css"/>
    <link rel="stylesheet" type="text/css" href="content.css"/>
    <link rel="stylesheet" type="text/css" href="picture.css"/>
    <link rel="stylesheet" type="text/css" href="form.css"/>
    <link rel="stylesheet" type="text/css" href="footer.css"/>

搜索框和button的设计：
CSS代码：

input{
            
        
            width:75%;
            height:50px;
        }
        button{
            position: absolute;
            align-content: center;;
            height:60px;
            width:150px;
            margin:auto;

表格设计：通过hover选择器赋予表格随鼠标悬停而变化的颜色

table,td,th
  {
  border:1px solid black;
  }



table
  {
  width:100%;

 
  
  }
td{
  align:center;
  text-align:center;
  vertical-align:center;
  height:100px;
  width: 100px;
  border-style: solid;
  border-width:2px;
  border-color: black;
}
th
  {
  height:80px;
  background-color: black;
  color:white;
  }
  th:hover{
    background-color: darkred;
    color:white;
  }
  td:hover{
    background-color: darkred;
    color:white;
  }
  td{
    background: lightgrey;
    height:150px;
  }

页面布局设计：
html代码：

<body>
            <div class=headUp></div>
        
        <div class=head>

            <div class=headheadPic>
                <div class=headTitle>
            <p style="font-size: 35px;color:black;font-family: '微软雅黑';">
                厦门大学|移动计算与数据分析
            </p>
            </div>
            <div class=headSearch>      
            <form>
            <input type="text" >
            <button ><p style="font-size:15px;font-family: '微软雅黑';position:relative;bottom:10px;">站内搜索</p></button>
            <br/>
        
            <a href="lab1.html"style="font-size:20px;position: relative;left:580px;color:black;top:10px">切换排版</a> 
            </form> 
            </div>
            </div>
            <div class=headLine></div>
        </div>
        
        <div class=middleForm>
            <table style="position: relative;">
                <tr>
                <th style="font-size: 30px;">主页</th>
                <th style="font-size: 30px;">新闻</th>
                <th style="font-size: 30px;">人员</th>
            <th style="font-size: 30px;">科研</th>
                <th style="font-size: 30px;">课程</th>
                    <th style="font-size: 30px;">实践</th>
                        <th style="font-size: 30px;">文章</th>
                </table>
        </div>
        
        
        <div class=picture>
            <div class=pictureIn>
            <img style="position: relative;width:1500px;height:100%;z-index: 999;"src="../img/厦大pic.png" >
            </div>
        </div>
        
        <div class=lab>
            <h1 style="position: relative;left:20px;font-size:40px;color:">实验室介绍</h1>
            
                <table style="position: relative;top: 20px;">
                <tr>
                <td style="font-size: 30px;background-color: white;color:black"><a href="www.baidu.com"style="color:black">教师队伍</a></td>
                <td style="font-size: 30px;background-color: white;"><a href="www.baidu.com"style="color:black">学生名册</a></td>
                </tr>
                </table>
                <br />
            <h1 style="position: relative;left:20px;top:30px;font-size:40px">课程介绍</h1>
            <table style="position: relative;top: 50px;">
                <tr>
                <td style="font-size: 30px;">人机交互</td>
                <td style="font-size: 30px;">C#编程</td>
                <td style="font-size: 30px;">中间件技术</td>
               </tr>
                <tr>
                <td style="font-size: 30px;">人工智能概论</td>
                <td style="font-size: 30px;">高级软件工程</td>
                <td style="font-size: 30px;">短毛猫</td>
            </tr>
                </table>
        </div>
        
        <div class=research>
            <h1 style="position: relative;left:20px;font-size:40px">科研信息</h1>
            <table style="position: relative;top: 20px;">
                <tr>
                <td style="font-size: 30px;">客车充电优化</td>
                <td style="font-size: 30px;">DEEPTRAVEL论文介绍</td>
                <td style="font-size: 30px;">PCB瑕疵检测算法</td>
               </tr>
                <tr>
                <td style="font-size: 30px;">特征抽取</td>
                <td style="font-size: 30px;">Word2Vec</td>
                <td style="font-size: 30px;">Pytorch介绍</td>
            </tr>
            <tr>
                <td style="font-size: 30px;">networkx库介绍</td>
                <td style="font-size: 30px;">Hetero Edge论文介绍</td>
                <td style="font-size: 30px;">Aloe论文介绍</td>
            </tr>
                </table>
        </div>
        
        <div class=footer>
            <p style="color:black;position: relative;left:500px;top:30px;font-size:30px;background-color: lightgrey;">实验室概况</p>
            <p style="color:black;position: relative;left:500px;font-size:25px;background-color: lightgrey;top:30px;">联系方式</p>
            <p style="color:black;position: relative;left:500px;font-size:25px;background-color: lightgrey;top:30px;">课程中心</p>
            <p style="color:black;position: relative;left:500px;font-size:25px;background-color: lightgrey;top:30px;">课程项目</p>
            <p style="color:black;position: relative;left:500px;font-size:25px;background-color: lightgrey;top:30px;">毕业生花名册</p>
        </div>
        <div class=footer2>
            <p style="color:black;position: relative;left:500px;top:130px;font-size:25px;background-color: black;color:lightslategrey">电话查号台：0592-xxxx  地址：福建省厦门市思明区思明南路422号</p>
        </div>
    </body>

四.实验总结

1.通过设置width，top：为百分数可以使得板块随屏幕大小自适应改变位置。
2.水平居中是：text-align：center，垂直居中是vertical-align：center。
3.使用较不常见的字体时，不同浏览器的兼容性不同。
在本次实验中，IE浏览器可以显示出文悦新青年字体，Chrome浏览器则用黑体代替了文悦新青年字体。
4.如果一个子块的位置被设置为absoulute，align居中不再使用，需要使用代码：

    left: 0;
        right: 0;
        margin:0 auto;/*特殊居中*/

本文到此结束，感谢阅读

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • CSS
    一 外部式css样式 (也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css...
    KunMitnic阅读 974评论 0赞 1
  • CSS相关总结
    一、CSS入门 1、css选择器 选择器的作用是“用于确定（选定）要进行样式设定的标签（元素）”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 1,634评论 0赞 6
  • CSS 基础
    CSS基础 本文包括CSS基础知识选择器（重要！！！）继承、特殊性、层叠、重要性CSS格式化排版单位和值盒模型浮动...
    廖少少阅读 3,214评论 0赞 40
  • CSS层叠样式表【参考慕课】
    CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器...
    百作不死的学习阅读 1,228评论 0赞 7
  • 关于CSS
    学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,101评论 0赞 1