CSS编程排版练习

2019-04-01 本文已影响0人未央花语

1. 实验准备

熟悉层叠样式表css语法；
登录w3school，进行示例练习；
http://www.w3school.com.cn/css/index.asp
查看一个在线的css实战教程：
https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout

2. 实验内容

制作一个简单的页面，要求：
1）菜单始终在屏幕的上方（无论拖动）；
2）网页的结构如附件所示。每个区块之间，需要有边距和空白。
3）在屏幕的右下方，固定一个“联系电话”的方框；不随滚动条而改变位置。
4）进行界面设计。要求有布局、色彩、字体等因素的考虑；

3.实验环境

JetBrains WebStorm 2018.3.5 x64 ： html+css

4.实验样式

样式.png

4.具体过程

1、整体布局

整体布局.png

同时，我们在可以用css定义全局样式；
开始前，在<style>开闭标签之间添加下面的代码：

html {
    font-family: sans-serif;
}
*{
    box-sizing: border-box;
}
body {
    margin:10px;
}

这只是一些一般设置，在我们页面上设置了无衬线的字体、使用 box-sizing模型，去掉 <body>默认外边距。

2、导航栏

导航栏.png

a) 基本文本

<section class="info-box" >
    <ul>
        <li><a href="#" class="active">Home</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">About</a></li>
    </ul>
</section>

b）基本设置

.info-box {
  width: 450px;
  height: 400px;
  margin: 0 auto;
}

这对内容设置具体的高度和宽度、在屏幕居中使用老把戏margin: 0 auto。在早先的课程中我们建议尽可能不固定内容容器的高度。这个情况下是可以的，因为我们是在选项卡中固定的内容，如果每个标签都有不同的高度，看起来也有些不和谐。

c) 样式化我们的选项卡

现在我们希望样式化选项卡看上去像选项卡——基本，这些是一个水平的导航标签，但不是点击之后加载不同的网页，和我们之前在课程中见到的不同，相反，他们在同一页面上显示不同的面板。首先，在你的CSS底部添加下列规则，从无序列表中移除默认的padding-left和`margin-top值：

.info-box ul {
  padding-left: 0;
  margin-top: 0;
}

接下来，我们将样式化水平选项卡——列表项都要左浮动确保他们一行合起来，他们的list-style-type被设置为 none 用以去除项目符号，宽度（width）设置为 150px 以便于适应这个info-box。链接（<a> ）元素设置为displayinline-block，这样他们将在一行显示，仍然保持样式可设置，他们会被样式化合适的选项卡按钮，通过一系列的其他属性。

.info-box li {
    float: left;
    list-style-type: none;
    width: 287px;
}
.info-box li a {
    display: inline-block;
    text-decoration: none;
    width: 100%;
    line-height: 3;
    background-color:lightslategrey;
    color: black;
    text-align: center;
}

最后，对于本节，我们将会在链接状态上设置一些样式。首先，我们要设置标签的 :focus 和 :hover 状态，让他们在获得焦点/鼠标悬浮的时候看起来不同，给用户提供一些可视化反馈。其次，当某个选项卡的类（ class ）出现 active 时，我们为其设置一条相同的样式规则。把这些CSS放置在你的其他样式后面：

.info-box li a:focus, .info-box li a:hover {
    background-color:indianred;
    color: white;
}
.info-box li a.active {
    background-color:indianred;
    color: white;
}

3、内容栏

内容栏.png

在body标签中添加一个div，设置其class属性为content。
在content中添加两个div，其class属性分别为content1和content2。
分别定义类选择器content、content1、content2

a) 基本设置，三个div(这部分在上一篇文章《CSS编程练习和界面设计》也讲过)

.content{
    margin:0px auto;
    height: 500px;
    margin-top: 60px;
    padding-right: 55px;
    width: 1210px;
    height: 500px;
}
.content1{
    float: left;
    background-color: lightgrey;
    padding:10px;
    width: 450px;
    height: 500px;
}
.content2{
    float: right;
    background-color: lightgray;
    padding:10px;
    width: 630px;
    height: 500px;
}

b) 表格制作以及样式化

在内容栏里面，重点就是一个表格的制作

表格内容:(这个就比较简单)

<table id="customers">
               <tr>
                   <th>拍摄技巧</th>
                   <th>场景</th>
               </tr>
               <tr>
                   <td>形状匹配</td>
                   <td>海浪与翻开的书</td>
              </tr>
</table>

简单的排版

#customers
{
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    width:100%;
    border-collapse:collapse;
}

使用 border-collapse: collapse 使表元素边框合并，生成一个更整洁、更易于控制的外观。

#customers td, #customers th
{
    font-size:1em;
    border:1px solid lightslategrey;
    padding:3px 7px 2px 7px;
}
#customers th
{
    font-size:1.1em;
    text-align:left;
    padding-top:5px;
    padding-bottom:4px;
    background-color:lightcoral;
    color:#ffffff;
}

我们在<th>元素上设置了一些padding——这些元素使数据项有了一些空间，使表看起来更加清晰。

#customers tr.alt td
{
    color:#000000;
    background-color:#EAF2D3;
}

对标题栏进行不同的设置

4、页脚

页脚的制作就相对比较简单了，就是背景+文字，这个跟内容栏的操作就是一样的了。

5、联系方式

Html内容编辑

<div class="contact">
    <b>
        <p>联</p>
        <p>系</p>
        <p>方</p>
        <p>式</p>
    </b>
</div>

样式化

.contact{
    background-color:darkgrey;
    float: right;
    right: 3px;
    bottom:10px;
    width: 50px;
    height: 180px;
    margin: 0 auto;
    position: fixed;
    text-align:center;
    vertical-align: middle;
}
.contact p{
    color: white;
}

-div的背景，大小设置都是同样的操作，主要就在于这个联系方式位置是固定的，一直都在页面的右下角。right: 3px; bottom:10px; position: fixed;这几个设置非常关键。

5、总结

这部分教程，主要就是讲了一个页面的分块化，不同的css所控制的版面布局不同。
详细的CSS，如何构建表格，以及使div固定位置显示，不受控制条影响。