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固定位置显示，不受控制条影响。
网友评论