如何单独定义 a鼠标经过默认背景颜色_如何制作简洁大气的网站首页

最新推荐文章于 2024-07-03 13:50:17 发布

weixin_39612220

最新推荐文章于 2024-07-03 13:50:17 发布

阅读量145

点赞数

文章标签：如何单独定义 a鼠标经过默认背景颜色

知乎视频www.zhihu.com

1.初始化页面样式

不同的元素有不同的初始样式，如ul元素有list-style默认样式，body元素有默认的margin。当使用CSS样式还原网页设计图时，这些默认样式会影响网页样式的准确性。因此，在制作网页之前，首先要清空元素的默认样式，这种行为一般称为CSS初始化设置。常用的CSS初始化设置如下。

body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div
{margin:0;padding:0;border:0;} 
ul,ol{list-style-type:none;} 
input,img,select{vertical-align:middle;} 
a{text-decoration:none;} 
a:link{color:#009;} 
a:visited{color:#800080;} 
a:hover,a:active,a:focus{color:#c00;text-decoration:underline;}

一般来讲，需要将常用的CSS初始化设置写成一个reset.css文件，在每次页面开始的位置引用这个文件即可。当页面引用多个CSS文件时，要将reset.css文件放在第一位，这是为了让页面自身的CSS样式覆盖初始化样式。并在head中引入该文件

<link rel='stylesheet' href='./reset.css'/>

2.写入内容

html代码如下

<body>
    <div class="container">
        <ul>
            <li>Introduce</li>
            <li>Contact</li>
            <li>Activity</li>
        </ul>
        <div class='content'>
            <p>Designing through the night to bring wise ideas to light.</p>
            <p>With your vision,my design savvy ,and a hefty amount of coffee,we can create a digital experience that is creative,beautiful an memorable.</p>
            <button>SOUNDS GOOD?LET'S CHAT</button>
        </div>
    </div>
    
</body>

图1 写入内容

3.盒模型布局

导航栏横排，设置字体样式，间距等

 li{
            display: inline-block;//横排
            width: 120px;
            height: 28px;
            text-align: center;//文字居中
            font-size: 18px;
            margin: 30px 20px;//菜单项间距
        }
 .content{
            margin: 210px auto;//段类居中
            width: 800px;
            text-align: center;//文字居中
        }

图2 设置导航横排，文字段落居中

4.设置背景，字体，按钮样式

.container{
        background-color: #2d3a4b; 
}
.content p:nth-child(1){ //段类文字样式
       font-size: 50px;
       color: #ffffff;
            
}
.content p:nth-child(2){
            color:#aab0b6;
            font-size: 20px;
            line-height: 24px;
            margin-top: 30px;
 }
  button{
            margin: 50px auto;
            width: 400px;
            height: 54px;
            background-color: #f2c94c;
            font-size: 20px;
            color: #abb0b7;
            border: none;
}

图3 静态样式已完成

5.添加动态样式

当鼠标悬浮到导航栏时，添加一个激活样式，并给一个动态效果

li:hover{
          border-top: 12px solid #f2c94c;
          color: white;
          transform:scale3d(1.2,1.2,1.2)//缩放效果
}

这时鼠标移上去时，因为上边框增高，会导致整个导航栏下移导致用户体验不好，所以在li中事先定义一个同等高度的边框，且颜色透明来避免导航栏下移，并修改边框与文字的间距，为了让动画更流畅，可以使用过渡效果

 li{
            display: inline-block;
            width: 120px;
            height: 28px;
            text-align: center;
            font-size: 18px;
            color: #abb0b7;
            margin: auto 20px;
            border-top: 12px solid transparent;//定义透明边框，避免悬浮时挤动文字
            padding-top: 30px; //边框与文字的间距
            transition: .5s;//过渡
        }