CSS学习第三天--标题练习
2018-08-28 本文已影响8人
胆小的米老鼠
首先总结一下代码中用到样式，之所以做成表格，是为了多写几轮，增加自己的印象，样式选择方法采用了内嵌式的，选择器是层次选择器。
| 名称 | 作用 |
|---|---|
| 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其他的样式，通过这次学习，慢慢的对前端知识有一个整体的初步了解，对之后的后端开发学习和测试深入学习打一下基础。
