首先总结一下代码中用到样式,之所以做成表格,是为了多写几轮,增加自己的印象,样式选择方法采用了内嵌式的,选择器是层次选择器。
名称 | 作用 |
---|---|
border | 边框 |
font-size | 字体大小 |
margin-right | 右外连矩 |
text-algin | 文字位置 |
line-height | 文字高度 |
font-family | 字体 |
padding | 内连距 |
text-decoration | 下划线 |
:hover | 悬浮效果 |
list-style | 列表文字之前的园点 |
代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<style type="text/css">
.list{
width: 694px;
height: 50px;
list-style: none;
margin:50px auto;
font-size: 0;
padding: 0;
}
.list li{
display: inline-block;
width: 98px;
height: 48;
border:1px solid gold;
font-size: 16px;
margin-right: -1px;
text-align: center;
line-height: 48px;
}
.list a{
font-family:'Microsoft Yahei';
color:pink;
text-decoration: none;
}
.list a:hover{
color: red;
}
</style>
</head>
<body>
<ul class="list">
<li><a href="">首页</a></li>
<li><a href="">公司简介</a></li>
<li><a href="">解决方案</a></li>
<li><a href="">公司新闻</a></li>
<li><a href="">行业动态</a></li>
<li><a href="">招聘</a></li>
<li><a href="">联系我们</a></li>
</ul>
</body>
</html>
页面效果:
总结:
文章运用了众多样式,已经在文章开头做了说明,还给文字加了效果,一个网页的标题样式已经基本形成了,后面会继续学习一些CSS其他的样式,通过这次学习,慢慢的对前端知识有一个整体的初步了解,对之后的后端开发学习和测试深入学习打一下基础。