css_style_引入

Posted on |

前端三件套各自的作用:html组织页面的结构，css负责网页的样式，js负责页面的行为。

css样式的引入方式

想要使用css改变网页的样式，首先得引入css，目前有四种引入css方式:

  • 通过内联的style属性
  • 通过style标签
  • link 标签css文件引入
  • 在css文件中通过@import url引入

写一个顶部导航nav先

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
a.css

.clearfix::after{
    content: '';
    display: block;
    clear: both;
}
.topNavBar>nav>ul{
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid red;
}
.topNavBar>nav>ul>li{
   float: left;
}

index.html

<div class="topNavBar">
    <a href="#" class="logo" alt="logo">
        <span class='rs'>rs</span>
        <span class='card'>card</span>
    </a>
    <nav>
        <ul style="list-style: none" class='clearfix'>
            <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>
    </nav>
</div>

这个导航条条里 li 元素用了浮动布局，不过浮动元素经常有奇怪的bug，给浮动元素的父元素加一个clearfix类。clearfix类的样式只有三行，这三行样式可以解决很多bug。