<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="utf-8">

    <title>项目实战--PC端固定布局</title>

    <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<nav id="nav">

    <section class="center">

        <h1>旅游</h1>

        <ul class="link">

            <li class="active"><a href="###">首页</a></li>

            <li><a href="###">资讯</a></li>

            <li><a href="###">新闻</a></li>

            <li><a href="###">简介</a></li>

        </ul>

    </section>

</nav>

<header>header</header>

<section>body</section>

<footer>footer</footer>

</body>

</html>
@charset "utf-8";

body,h1,ul{

    margin: 0;

    padding: 0;

}

ul{

    list-style: outside none none; //简写属性 在一个声明中设置所有的列表属性。

}

a{

    text-decoration: none; //CSS文字修饰为无；一般用于设置清除超链接的默认下划线：

}

#nav {

    width: 100%;

    height: 70px;

    background-color: #333;

}

.center{

    width: 1263px;

    height: 70px;

    margin: 0 auto;

}

.center h1{

    width: 240px;

    height: 70px;

    text-indent: -9999px;

    float: left;

}

.link{

    width: 650px;

    height: 70px;

    line-height: 70px;

    color: #eee;

    float: right;

}

.link li{

    width: 120px;

    text-align: center;

    float: left;

}

.link a{

    color: #eee;

    display: block; //

}

.link a:hover,

.active a{

    background-color: #000;

}

style.css

css初级代码的更多相关文章

  1. css 初级进阶

    摘自:https://www.jianshu.com/p/dcc40ccc9841 CSS中级 Class和ID选择器 CSS初级教程中我们可以使用HTML标签选择器定义样式. 同样你也可以使用Cla ...

  2. 根据判断PC浏览器类型和手机屏幕像素自动调用不同CSS的代码

    1.媒体查询方法在 css 里面这样写 -------------------- @media screen and (min-width: 320px) and (max-width: 480px) ...

  3. css初始化代码

    最近老有新项目开发,一直在找存留的CSS初始化代码,索性放到这里备份下, @charset "utf-8"; /* -------------------------------- ...

  4. 网站哀悼变灰代码集合 兼容所有浏览器的CSS变暗代码

    下面这些CSS代码可以把网站的网页变为黑白,只需将代码加到CSS文件或网页最顶端就可以实现素装.建议全国站长动起来.为遇难的同胞哀悼. 如何将网站变成灰色调呢,网站变灰色方法是什么?有哪些?为了方便大 ...

  5. CSS透明代码

    透明往往能产生不错的网页视觉效果,先奉上兼容主流浏览器的CSS透明代码: .transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5 ...

  6. 各大门户网站的css初始化代码

    腾讯QQ官网 css样式初始 body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select ...

  7. CSS颜色代码 颜色值 颜色名字大全(转载)

    CSS颜色代码 颜色值 颜色名字大全 转载处http://flyjj.com/css-colour-code.html 颜色值 CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) ...

  8. CSS颜色代码大全

    CSS颜色代码大全 转载:http://blog.163.com/wujinhongisme@126/blog/static/3613698020095115919389/ RGB ( Red,Gre ...

  9. 兼容主流浏览器的CSS透明代码

    透明往往能产生不错的网页视觉效果下面是兼容主流浏览器的CSS透明代码.transparent_class {  filter:alpha(opacity=50);  -moz-opacity:0.5; ...

随机推荐

  1. Linux的基础操作

    1.概念 Linux是基于Unix的开源免费的操作系统,由于系统的稳定性和安全性几乎成为程序代码运行的最佳系统环境. 2.Linux的分类 1.按市场需求分为: 图形化界面版.服务器版 2.按原生程度 ...

  2. bash调试 脚本第一行 加set -x #!/bin/expact -d

    #!/bin/bash set -x 脚本第一行加 #!/bin/expact -d

  3. ARM64平台编译stream、netperf出错解决办法 解决办法：指定编译平台为alpha [root@localhost netperf-2.6.0]# ./configure –build=alpha

    ARM64平台编译stream.netperf出错解决办法 http://ilinuxkernel.com/?p=1738 stream编译出错信息: [root@localhost stream]# ...

  4. CentOS6.7系统文本安装-2020

    CentOS6.7系统文本安装 [日期:2016-01-30] 来源:Linux社区  作者:endmoon [字体:大 中 小]   一.选择虚拟机软件 1)VMware Workstation   ...

  5. 10.27-Redis-mz 深入浅出Redis

    深入浅出Redis 1.Redis的发展史     Redis[Remote Directory Server]:远程服务器字典 2.下载安装Redis 1>Linux下安装Reids     ...

  6. xxl-job使用遇到的问题

    1.背景 最近公司在迁移定时任务,以前老的定时任务是基于quartz搭建的分布式集群服务,遇到如下几个瓶颈问题: 同一个任务只能有一个节点运行,其他节点不执行,导致性能低,资源也浪费 定时任务在抢占执 ...

  7. NGINX缓存使用官方指南

    我们都知道,应用程序和网站一样,其性能关乎生存.但如何使你的应用程序或者网站性能更好,并没有一个明确的答案.代码质量和架构是其中的一个原因,但是在很多例子中我们看到,你可以通过关注一些十分基础的应用内 ...

  8. GO语言异常处理01---恐慌的报出与处理

    package main import ( "fmt" "math" ) /*自己报出恐慌的语法*/ func main021() { fmt.Println( ...

  9. 关于MongoDB ObjectId的那些事儿

    ObjectId 是什么? 一句话,ObjectId 是 MongoDB 文档 _id(主键)的默认类型. ObjectId 的组成? ObjectId 使用 12 字节的存储空间,是一个由 24 个 ...

  10. NNVM Compiler，AI框架的开放式编译器

    NNVM Compiler,AI框架的开放式编译器 深度学习已变得无处不在且不可或缺.在多种平台(例如手机,GPU,IoT设备和专用加速器)上部署深度学习工作负载的需求不断增长.宣布了TVM堆栈,以弥 ...