div css企业网站_CSS

企业网站CSS样式设计

1. 页面布局

1.1 头部（Header）

header {
    backgroundcolor: #333;
    color: white;
    padding: 20px;
    textalign: center;
}

1.2 导航栏（Navigation Bar）

nav {
    backgroundcolor: #f2f2f2;
    overflow: hidden;
    padding: 14px 16px;
}
nav a {
    float: left;
    display: block;
    color: black;
    textalign: center;
    padding: 14px 16px;
    textdecoration: none;
}

1.3 主体内容（Main Content）

main {
    margin: 15px;
    padding: 20px;
    backgroundcolor: #fff;
}

1.4 页脚（Footer）

footer {
    backgroundcolor: #333;
    color: white;
    textalign: center;
    padding: 10px;
    position: fixed;
    bottom: 0;
    width: 100%;
}

2. 字体和颜色

2.1 标题（Headings）

h1, h2, h3, h4, h5, h6 {
    fontfamily: Arial, sansserif;
    color: #333;
}

2.2 正文（Body Text）

body {
    fontfamily: Arial, sansserif;
    color: #666;
}

2.3 链接（Links）

a {
    color: #007BFF;
    textdecoration: none;
}
a:hover {
    color: #0056b3;
    textdecoration: underline;
}

3. 响应式设计

为了适应不同设备的屏幕尺寸，可以使用媒体查询（Media Queries）来调整样式。

@media screen and (maxwidth: 600px) {
    nav a {
        float: none;
        display: block;
        textalign: left;
    }
}

常见问题与解答

问题1：如何设置导航栏中的链接在鼠标悬停时改变颜色？

答：可以通过CSS的伪类选择器:hover来实现。

nav a:hover {
    color: #ff9900; /* 更改为你想要的颜色 */
}

问题2：如何使页脚始终固定在页面底部？

答：可以使用CSS的position: fixed属性，并设置bottom: 0以及width: 100%来实现。

footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}